/* The two illustrated interfaces share one safe content rectangle.
   Decorations have their own elements; no battle or animation rules live here. */
:root {
  --ui-serif: "Noto Serif SC", "Songti SC", SimSun, serif;
  --ui-gold: #dfc28b;
  --ui-light: #f2ead9;
  --ui-line: #ae9871;
  --cut-card: polygon(6% 0,94% 0,100% 3%,100% 97%,94% 100%,6% 100%,0 97%,0 3%);
}
.selection, .upgrade { font-family: var(--ui-serif); color: var(--ui-light); isolation: isolate; }
.selection button span, .upgrade button span { float: none; margin: 0; }
.selection svg, .upgrade svg { display: block; }
.selection button:focus-visible, .upgrade button:focus-visible { outline: 2px solid #fff1c6; outline-offset: 5px; }
.selection {
  --footer: calc(clamp(90px,24vh,226px) + var(--safe-bottom));
  --edge-left: max(3vw,var(--safe-left));
  --edge-right: max(3vw,var(--safe-right));
  background: linear-gradient(90deg,#0b101918,transparent 43%,#0a0f18b8 69%,#0b1019e6 100%),url('assets/cover-cathedral.png') 40% 48% / cover;
}
.selection::before { z-index: -1; background: radial-gradient(ellipse at 34% 38%,#dce9f329,transparent 45%); }
.selection::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg,#070a10b3,transparent 35%),radial-gradient(ellipse at 50% 40%,transparent 35%,#0509127a); }
.sel-top { position: absolute; inset: 0 0 auto; z-index: 4; height: 11vh; min-height: 54px; padding: 0 var(--edge-right) 0 var(--edge-left); border: 0; background: none; }
.sel-brand { display: flex; align-items: center; gap: 24px; color: var(--ui-light); }
.brand-mark { font-family: STKaiti, KaiTi, var(--ui-serif); font-size: clamp(32px,4.3vw,72px); letter-spacing: 4px; transform: rotate(-6deg); text-shadow: 0 2px 18px #0009; }
.sel-brand i { width: 1px; height: 36px; background: #cbbd9d; }
.brand-page { font-size: clamp(18px,2.4vw,40px); letter-spacing: .18em; }
.sel-brand::after { content: ""; position: absolute; left: var(--edge-left); top: 95%; width: 24vw; height: 1px; background: linear-gradient(90deg,#d3b77a,transparent); }
.icon-button { width: 44px; height: 44px; padding: 10px; color: #d9cbb0; border: 1px solid #a8926a; background: #10151f7a; transform: rotate(45deg); }
.icon-button svg { width: 100%; height: 100%; transform: rotate(-45deg); }
.sel-stage { position: absolute; inset: 0 0 var(--footer); display: grid; grid-template-columns: 68% 32%; }
.sel-portrait { position: relative; margin: 0; overflow: hidden; }
.sel-portrait::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#0b101833,transparent 15%); pointer-events: none; }
.sel-portrait img { position: absolute; height: 210%; width: auto; max-width: none; top: 2%; left: 49%; transform: translateX(-48%); object-fit: contain; filter: drop-shadow(12px 12px 28px #03091377); mask-image: none; -webkit-mask-image: none; }
.selection[data-character="xie"] .sel-portrait img { left: 47%; }
.sel-info { position: relative; margin: 12vh var(--edge-right) 0 0; padding: 0 0 0 1.2vw; display: flex; flex-direction: column; gap: 1.4vh; min-height: 0; overflow: visible; background: none; border-left: 1px solid #cab18470; }
.sel-info::before { content: ""; position: absolute; width: 15px; height: 15px; top: 6vh; left: -8px; border: 1px solid #d9bc81; transform: rotate(45deg); background: #d9bc81; box-shadow: 0 0 20px #d5bc6c99; }
.sel-info h2 { font-family: var(--ui-serif); font-size: clamp(32px,4vw,67px); font-weight: 400; letter-spacing: .14em; line-height: 1.15; margin: 0; white-space: nowrap; color: #f6edda; }
.sel-rule { display: block; flex: 0 0 1px; height: 1px; background: linear-gradient(90deg,#c7ae7c,transparent); margin: 0; }
.sel-rule::after { content: none; }
.selection #characterRole { align-self: flex-start; font-size: clamp(13px,1.3vw,22px); line-height: 1.25; letter-spacing: .12em; color: #ead9b6; margin: 0; padding: .6vh 2.5vw; border: 0; background: linear-gradient(90deg,#b69e7055,#080e1880); clip-path: polygon(6% 0,94% 0,100% 50%,94% 100%,6% 100%,0 50%); }
.skill-list { margin: 1vh 0 0; padding: 0; list-style: none; display: grid; gap: 1vh; }
.skill-list li { position: relative; display: grid; grid-template-columns: clamp(44px,5.7vw,94px) 1fr; gap: 1vw; align-items: center; padding: 1vh .5vw; border: 0; border-top: 1px solid #b9a27791; border-bottom: 1px solid #b9a27755; background: linear-gradient(90deg,#18202a75,transparent); }
.skill-list li::before { content: ""; position: absolute; width: 7px; height: 7px; top: -1px; left: -1px; border-top: 2px solid #e0c285; border-left: 2px solid #e0c285; }
.skill-icon { position: relative; display: grid; place-items: center; width: clamp(44px,5.7vw,94px); height: clamp(44px,5.7vw,94px); color: #f1ddba; border: 1px solid #cbb58c9c; border-radius: 50%; background: radial-gradient(circle,#9d8c6155,transparent 70%); }
.skill-icon::after { content: ""; position: absolute; inset: 6px; border: 1px solid #c8b28d50; transform: rotate(45deg); }
.skill-icon svg { width: 74%; height: 74%; filter: drop-shadow(0 0 6px #e9c78155); }
.skill-list strong { display: block; font-family: var(--ui-serif); font-size: clamp(18px,1.85vw,31px); font-weight: 400; line-height: 1.2; letter-spacing: .1em; color: #f4ead8; margin: 0 0 .5vh; }
.skill-list p { margin: 0; font-size: clamp(12px,1.13vw,19px); line-height: 1.55; color: #d0c9ba; }
.skill-demo { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; margin: 0 0 1vh; }
.demo-label { flex: 0 0 auto; margin: 0 0 .5vh; color: #dac59d; letter-spacing: .12em; font-size: clamp(12px,1.25vw,21px); line-height: 1.3; }
.demo-stage { flex: 1 1 auto; position: relative; min-height: 50px; max-height: 19vh; height: auto; overflow: hidden; display: grid; place-items: center; background: linear-gradient(140deg,#44454d9c,#1b2233ad); border: 1px solid #a6a09369; }
.demo-scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.demo-stage img { position: relative; height: 88%; max-height: 17vh; width: auto; max-width: 34%; object-fit: contain; filter: drop-shadow(4px 7px 4px #030813bb); z-index: 2; }
.demo-arc { position: absolute; width: 32%; height: 66%; left: 43%; top: 16%; border: 0; border-radius: 50%; }
[data-arc="fan"] .demo-arc { border: 0; border-right: 3px solid #ffe6ac; box-shadow: 8px 0 12px #e7b44d66,inset -6px 0 13px #f3c26955; transform: rotate(-22deg); background: conic-gradient(from 10deg,transparent,#f0c66e33 30%,transparent 43%); }
[data-arc="ring"] .demo-arc { inset: 16% 26%; width: 48%; height: 67%; border: 1px solid #bddbf7bb; box-shadow: 0 0 16px #a6cbe766,inset 0 0 16px #a6cbe733; }
.demo-note { position: absolute; right: 8px; bottom: 3px; z-index: 3; margin: 0; font-size: 9px; letter-spacing: .08em; color: #d8d1c280; pointer-events: none; }
.skill-demo { position: relative; }
.sel-bottom { position: absolute; inset: auto 0 0; height: var(--footer); padding: 1.5vh var(--edge-right) max(2vh,var(--safe-bottom)) var(--edge-left); display: grid; grid-template-columns: 26px minmax(0,1fr) 26px 29%; gap: 1vw; align-items: center; border-top: 1px solid #b59c6d77; background: linear-gradient(0deg,#10141aeb,#1419219c 80%,#14192144); }
.sel-bottom::after { content: ""; position: absolute; left: var(--edge-left); right: var(--edge-right); bottom: max(1vh,calc(var(--safe-bottom) - 1px)); height: 1px; background: linear-gradient(90deg,transparent,#b59d7199,transparent); pointer-events: none; }
.sel-roster { display: flex; height: 100%; min-width: 0; gap: .8vw; padding: 8px 5px; overflow-x: auto; overflow-y: hidden; align-items: center; scrollbar-width: none; scroll-snap-type: x proximity; }
.sel-roster::-webkit-scrollbar { display: none; }
.sel-roster button { position: relative; height: 100%; width: auto; aspect-ratio: .65; padding: 0; flex: 0 0 auto; overflow: visible; border: 1px solid #9b9483a8; background: linear-gradient(150deg,#47464a,#181d25); scroll-snap-align: start; }
.roster-crop { position: absolute; inset: 0; overflow: hidden; }
.sel-roster button img { position: absolute; inset: auto; left: 50%; top: 0; height: 340%; width: auto; max-width: none; transform: translateX(-55%); object-fit: contain; opacity: .95; pointer-events: none; }
.sel-roster button { clip-path: inset(-8px -6px -8px -6px); }
.sel-roster button::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#060b15cc,transparent 30%); pointer-events: none; }
.sel-roster button.selected { border-color: #ffe1a2; box-shadow: 0 0 0 2px #e7bb72,0 0 17px #eab96c9c,inset 0 0 14px #d3b37744; }
.sel-roster button.selected::before { content: ""; position: absolute; left: calc(50% - 5px); top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #ffe8b9; transform: none; z-index: 4; }
.sel-roster button.selected::after { inset: auto auto -8px calc(50% - 5px); width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid #ffe8b9; transform: none; }
.roster-name { position: absolute; bottom: 3px; left: 0; right: 0; color: #e4d7be; text-align: center; font-size: clamp(9px,.75vw,13px); letter-spacing: .06em; text-shadow: 0 1px 5px #000; background: #0a0f1780; z-index: 3; }
.sel-roster button:disabled { opacity: .46; }
.roster-silhouette { position: absolute; inset: 0; width: 100%; height: 100%; color: #a19c9b; opacity: .55; }
.roster-lock { position: absolute; inset: auto 0 22%; font: 9px sans-serif; color: #d4ccc2; text-align: center; }
.sel-arrow { width: 26px; height: 48px; padding: 0; border: 0; background: none; color: #e6c68c; font-family: var(--ui-serif); font-size: 42px; opacity: .9; }
.bevel-button { position: relative; display: grid; place-items: center; min-width: 0; width: 100%; min-height: 48px; height: 9vh; max-height: 90px; border: 0; padding: 10px 20px; font-family: var(--ui-serif); font-weight: 400; font-size: clamp(22px,3vw,48px); letter-spacing: .18em; line-height: 1; color: #342817; background: linear-gradient(135deg,#f0ddb2 0%,#c8a974 28%,#f5e5bf 55%,#ac8750 100%); clip-path: polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%); text-shadow: 0 1px 0 #fff7; filter: drop-shadow(0 0 12px #dab77b30); }
.bevel-button::before { content: ""; position: absolute; inset: 5px; border: 1px solid #624c2d; clip-path: inherit; background: linear-gradient(150deg,#c0a37611,#fff5 40%,#c0a37611); pointer-events: none; }
.bevel-button::after { content: ""; position: absolute; inset: 8px; border-top: 1px solid #fff0c8; border-bottom: 1px solid #8b6b42; clip-path: inherit; pointer-events: none; }
.bevel-button .button-outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; fill: none; stroke: #fff0c6; stroke-width: 1; }
.button-outline polygon { vector-effect: non-scaling-stroke; }
.bevel-button .button-outline polygon + polygon { stroke: #84633b; }
.bevel-button:hover { background: linear-gradient(135deg,#fff0cb,#d8b781 28%,#fff4d1 55%,#bd975e); }
.selection #depart { min-width: 0; width: 100%; flex: none; }

/* Upgrade: the live canvas remains visible, frozen, under a translucent scrim. */
.upgrade { background: #090e18a8; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.upgrade::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 30% 42%,transparent,#090e1880 85%); pointer-events: none; }
.upg-head { position: absolute; inset: 0 35% auto 0; height: 23vh; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0; padding: 0 0 2vh; border: 0; }
.upg-ornament { position: absolute; width: 28vw; height: 19vh; left: 50%; top: -1vh; transform: translateX(-50%); background: none; opacity: .65; color: #d9bd85; }
.upg-ornament svg { width: 100%; height: 100%; }
.upg-title { position: relative; font-family: var(--ui-serif); font-weight: 400; margin: 0 0 1vh; color: #fff6e3; font-size: clamp(36px,5vw,84px); line-height: 1; letter-spacing: .15em; text-shadow: 0 0 22px #f2da9e77; }
.upg-sub { position: relative; margin: 0; font-size: clamp(14px,1.8vw,30px); letter-spacing: .18em; color: #ece3d2; }
.upg-sub::before,.upg-sub::after { content: ""; position: absolute; height: 1px; width: 7vw; background: linear-gradient(90deg,transparent,#d4b980); top: 50%; margin: 0; }
.upg-sub::before { right: calc(100% + 20px); }
.upg-sub::after { left: calc(100% + 20px); transform: rotate(180deg); }
.upg-pause { position: fixed; top: 2.6vh; right: max(3vw,var(--safe-right)); padding: 8px 24px; font-size: clamp(12px,1.4vw,24px); color: #dcd0ba; background: #13192277; border: 1px solid #b9a27b; clip-path: polygon(12% 0,100% 0,100% 100%,0 100%); }
.upg-body { position: absolute; inset: 23.5vh max(3vw,var(--safe-right)) max(7.5vh,var(--safe-bottom)) max(5vw,var(--safe-left)); display: grid; grid-template-columns: 63% minmax(0,1fr); gap: 3vw; }
.upg-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.4vw; padding: 0; min-height: 0; }
.upg-card { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; overflow: visible; background: none; clip-path: none; transition: transform .18s; }
.upg-card::before,.upg-card::after { content: none; }
.upg-card:hover { background: none; transform: translateY(-3px); }
.upg-card.selected { background: none; filter: none; }
.upg-art-stage { display: block; position: absolute; inset: 2px; overflow: hidden; clip-path: var(--cut-card); background: linear-gradient(#11172133,#10162088),url('assets/cover-cathedral.png') 38% 48% / auto 100%; }
.upg-art-stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg,#0a0e17f7 0%,#0b1019dd 12%,#0a0e1722 42%,transparent 70%); pointer-events: none; }
.upg-art-stage[data-character="xie"] { background-position: 57% center; }
.upg-art { position: absolute; inset: auto; top: 3%; left: var(--art-x,50%); height: calc(var(--art-scale,1.9) * 100%); width: auto; max-width: none; object-fit: contain; transform: translateX(-55%); transform-origin: center; filter: drop-shadow(0 5px 14px #0006); }
.upg-frame { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; fill: none; }
.upg-frame polygon { vector-effect: non-scaling-stroke; stroke-linejoin: bevel; }
.frame-outer { stroke: #b3b0b5; stroke-width: 1.7; }
.frame-inner { stroke: #a5a3ad99; stroke-width: .8; }
.upg-card.selected .upg-frame { filter: drop-shadow(0 0 3px #ffd99b) drop-shadow(0 0 9px #d99748); }
.upg-card.selected .frame-outer { stroke: #fff0c0; stroke-width: 2.4; }
.upg-card.selected .frame-inner { stroke: #ffcd83; stroke-width: 1.4; }
.upg-card:not(.selected):hover .frame-outer { stroke: #f1e6d2; }
.upg-check { display: none; position: absolute; top: 1.3%; left: 3%; z-index: 4; color: #fff1cb; background: linear-gradient(120deg,#a3824bcf,#a3824b9c); border: 1px solid #c8aa77; clip-path: polygon(0 0,100% 0,83% 100%,0 100%); padding: .7vh 2.2vw .7vh 1vw; font-size: clamp(11px,1.35vw,23px); letter-spacing: .1em; }
.upg-card.selected .upg-check { display: block; }
.upg-copy { position: absolute; z-index: 4; inset: auto 5% 5%; display: flex; flex-direction: column; align-items: center; gap: 1.2vh; padding: 0; background: none; pointer-events: none; }
.upg-copy strong { font-family: var(--ui-serif); font-size: clamp(17px,2.35vw,40px); font-weight: 400; line-height: 1.2; letter-spacing: .08em; color: #fff1d5; white-space: nowrap; text-shadow: 0 2px 10px #000; }
.card-divider { width: 73%; height: 25px; color: #e4c487; }
.upg-copy em { color: #e4d5bc; font-style: normal; font-size: clamp(11px,1.4vw,24px); letter-spacing: .12em; line-height: 1.2; }
.upg-gem { display: none; position: absolute; width: 14px; height: 14px; left: calc(50% - 7px); bottom: -6px; background: #e5f0ed; border: 2px solid #ffdfab; transform: rotate(45deg); box-shadow: 0 0 0 2px #aa8550,0 0 10px #ffd185; z-index: 5; }
.upg-card.selected .upg-gem { display: block; }
.upg-detail { position: relative; display: flex; flex-direction: column; min-width: 0; gap: 1.5vh; border-left: 1px solid #d8be8b99; padding: 0 0 0 2.6vw; }
.upg-detail h2 { margin: 0; color: #fff2d9; font-size: clamp(26px,3.2vw,54px); font-weight: 400; letter-spacing: .1em; line-height: 1.2; padding-bottom: 2vh; border-bottom: 1px solid #c7ae7c8c; }
.upg-owner { margin: -.8vh 0 0; font-family: var(--ui-serif); font-size: clamp(11px,1vw,17px); color: #c5bba8; letter-spacing: .08em; }
.upg-banner { align-self: flex-start; margin: .5vh 0 0; padding: .5vh 1.8vw; border: 1px solid #b99c69; color: #e9d9b8; font-size: clamp(12px,1.4vw,24px); letter-spacing: .16em; background: linear-gradient(90deg,#a78c5444,transparent); clip-path: polygon(6% 0,100% 0,94% 100%,0 100%); }
.upg-stats { display: grid; gap: 0; margin: 0; }
.upg-row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 1vw; padding: 1.4vh 0; border-bottom: 1px solid #b5a07a4d; }
.upg-row dt { color: #eee3cd; font-size: clamp(13px,1.65vw,28px); letter-spacing: .05em; white-space: nowrap; }
.upg-row dd { margin: 0; display: flex; align-items: baseline; justify-content: flex-end; gap: 1vw; font-size: clamp(15px,1.85vw,31px); white-space: nowrap; color: #f0e5d2; }
.upg-row dd strong { color: #f3cc87; font-size: inherit; font-weight: 500; }
.upg-row dd i { font-style: normal; color: #cabb9d; font-size: .9em; }
.upg-desc { margin: 0; font-size: clamp(12px,1.35vw,23px); line-height: 1.6; letter-spacing: .04em; color: #c9b99b; }
.upg-flavor { margin: 1vh 0 0; padding: 2vh 0; border-top: 1px solid #d7bb825e; border-bottom: 1px solid #d7bb825e; color: #f0e6d2; font-size: clamp(14px,1.65vw,28px); letter-spacing: .1em; line-height: 1.5; text-align: center; }
.upg-flavor::before { content: none; }
.upg-detail .bevel-button { margin-top: auto; flex: 0 0 auto; color: #f9edcf; text-shadow: 0 2px 4px #1e120e; background: linear-gradient(150deg,#5c4b3499,#b5965ca6 40%,#7560409c); border: 0; filter: drop-shadow(0 0 8px #d4a75c40); }
.upg-detail .bevel-button::before { inset: 3px; border: 2px solid #f2d09a; }
.upg-detail .bevel-button::after { inset: 8px; border: 1px solid #e2bd7b; }
.upg-detail .button-outline { stroke: #ffe0aa; stroke-width: 2; }
.upg-detail .button-outline polygon + polygon { stroke: #d7ac69; stroke-width: 1; }
.upg-foot { margin: 0; color: #c4b69c; font-size: 11px; line-height: 1.2; text-align: center; }

@media (max-height: 560px) and (orientation: landscape) {
  .selection { --footer: calc(90px + var(--safe-bottom)); }
  .sel-top { height: 36px; min-height: 0; }
  .brand-mark { font-size: 28px; }
  .brand-page { font-size: 17px; }
  .sel-brand { gap: 12px; } .sel-brand i { height: 20px; }
  .icon-button { width: 25px; height: 25px; padding: 5px; }
  .sel-stage { grid-template-columns: 64% 36%; }
  .sel-info { margin-top: 38px; padding-left: 10px; gap: 4px; margin-bottom: 3px; }
  .sel-info::before { top: 12px; width: 7px; height: 7px; left: -4px; }
  .sel-info h2 { font-size: 27px; line-height: 1.1; }
  .selection #characterRole { font-size: 11px; padding: 3px 16px; letter-spacing: 1px; }
  .skill-list { margin: 0; gap: 5px; }
  .skill-list li { grid-template-columns: 33px 1fr; gap: 7px; padding: 4px 3px; }
  .skill-icon { width: 32px; height: 32px; }
  .skill-icon::after { inset: 4px; }
  .skill-list strong { font-size: 14px; margin-bottom: 2px; }
  .skill-list p { font-size: 10px; line-height: 1.4; }
  .skill-demo { margin: 0; flex: 1 1 50px; }
  .demo-label { font-size: 10px; margin-bottom: 2px; }
  .demo-stage { min-height: 34px; max-height: none; }
  .demo-stage img { max-height: 52px; height: 90%; }
  .demo-note { display: none; }
  .sel-bottom { grid-template-columns: 18px minmax(0,1fr) 18px 28%; gap: 6px; padding-top: 6px; padding-bottom: max(8px,var(--safe-bottom)); }
  .sel-roster { padding: 5px 4px; gap: 7px; }
  .sel-roster button { height: 100%; }
  .sel-arrow { width: 18px; height: 40px; font-size: 26px; }
  .bevel-button,.selection #depart { min-height: 40px; height: 44px; font-size: 21px; padding: 6px 10px; letter-spacing: .1em; }
  .roster-name { font-size: 8px; }
  .roster-lock { font-size: 7px; }
  .upg-head { height: 20vh; padding-bottom: 1vh; }
  .upg-title { font-size: 35px; margin-bottom: 4px; }
  .upg-sub { font-size: 14px; letter-spacing: 2px; }
  .upg-ornament { height: 17vh; width: 25vw; }
  .upg-pause { font-size: 11px; padding: 4px 12px; }
  .upg-body { top: 21vh; bottom: max(5vh,calc(var(--safe-bottom) + 8px)); gap: 2.5vw; grid-template-columns: 63% minmax(0,1fr); }
  .upg-cards { gap: 1.4vw; }
  .upg-copy { gap: 5px; bottom: 6%; }
  .upg-copy strong { font-size: 18px; letter-spacing: 1px; }
  .upg-copy em { font-size: 11px; letter-spacing: 1px; }
  .card-divider { height: 17px; }
  .upg-check { font-size: 11px; padding: 3px 20px 3px 6px; }
  .upg-gem { width: 9px; height: 9px; left: calc(50% - 4px); bottom: -4px; }
  .upg-detail { padding-left: 1.8vw; gap: 6px; }
  .upg-detail h2 { font-size: 26px; padding-bottom: 5px; }
  .upg-owner { display: none; }
  .upg-banner { font-size: 11px; padding: 2px 13px; margin-top: 0; }
  .upg-row { gap: 6px; padding: 6px 0; }
  .upg-row dt { font-size: 12px; letter-spacing: 0; }
  .upg-row dd { font-size: 16px; gap: 6px; }
  .upg-desc { font-size: 11px; line-height: 1.45; letter-spacing: 0; }
  .upg-flavor { font-size: 13px; letter-spacing: 0; padding: 6px 0; margin: 0; }
  .upg-foot { display: none; }
  .upg-detail .bevel-button { min-height: 40px; height: 40px; font-size: 25px; }
}
@media (max-height: 350px) and (orientation: landscape) {
  .selection { --footer: calc(72px + var(--safe-bottom)); }
  .sel-info { margin-top: 30px; gap: 3px; }
  .sel-info h2 { font-size: 23px; }
  .sel-top { height: 30px; }
  .brand-mark { font-size: 24px; } .brand-page { font-size: 14px; }
  .skill-list strong { font-size: 12px; } .skill-list p { font-size: 9px; }
  .skill-list li { padding-block: 2px; }
  .skill-icon { width: 26px; height: 26px; }
  .demo-label { display: none; }
  .upg-detail { gap: 4px; }
  .upg-detail h2 { font-size: 22px; }
  .upg-row { padding: 3px 0; } .upg-row dt { font-size: 11px; }
  .upg-desc { font-size: 10px; }
  .upg-flavor { display: none; }
}
@media (max-height: 380px) and (orientation: landscape) {
  .sel-info { margin-top: 30px; gap: 3px; }
  .sel-info h2 { font-size: 25px; }
  .skill-list { gap: 4px; }
  .skill-list li { padding-block: 2px; }
  .skill-list strong { font-size: 13px; line-height: 1.1; }
  .skill-list p { line-height: 1.3; }
  .skill-icon { width: 30px; height: 30px; }
  .upg-flavor { display: none; }
}
@media (max-width: 760px) and (orientation: landscape) {
  .sel-stage { grid-template-columns: 58% 42%; }
  .upg-body { grid-template-columns: 59% minmax(0,1fr); }
  .upg-copy strong { font-size: 16px; }
  .upg-copy em { font-size: 10px; letter-spacing: 0; }
  .upg-row { grid-template-columns: 1fr; gap: 2px; padding: 3px 0; }
  .upg-row dt { font-size: 11px; line-height: 1.2; }
  .upg-row dd { font-size: 15px; line-height: 1.2; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .upg-card { transition: none; }
  .sel-roster { scroll-behavior: auto; }
}

/* 固定网格高度，文案换行只在说明区内滚动，不撑高整排卡。 */
.upg-body { min-height:0; grid-template-rows:minmax(0,1fr); }
.upg-cards { grid-template-rows:minmax(0,1fr); }
.upg-card,.upg-detail { min-height:0; }
.upg-desc { box-sizing:content-box; height:4.8em; min-height:4.8em; max-height:4.8em; flex:0 0 4.8em; overflow:auto; overflow-wrap:anywhere; scrollbar-gutter:stable; }
@media (max-height:560px) and (orientation:landscape) {
  .upg-desc { height:4.35em; min-height:4.35em; max-height:4.35em; flex-basis:4.35em; }
}
/* New portraits are waist/thigh compositions, unlike Liang/Xie's tall sources.
   Show the whole supplied figure instead of reusing their 210% zoom. */
.selection:not([data-character="liang"]):not([data-character="xie"]) .sel-portrait img {
  height:105%; max-width:96%; top:2%; left:50%; transform:translateX(-50%); object-fit:contain; object-position:center top;
}
.roster button:not([data-character="liang"]):not([data-character="xie"]) .roster-crop img {
  height:112%; width:100%; inset:0; object-fit:cover; object-position:50% 0;
}
.upg-art-stage:not([data-character="liang"]):not([data-character="xie"]) .upg-art {
  height:105%; top:3%; left:50%; transform:translateX(-50%);
}
.roster button:not([data-character="liang"]):not([data-character="xie"]) .roster-crop img { transform:none; max-width:100%; object-fit:contain; }
.sel-roster button:not([data-character="liang"]):not([data-character="xie"]) .roster-crop img {
  height:145%; width:auto; max-width:none; top:0; left:50%; transform:translateX(-50%); object-fit:contain;
}