/* M31 approved character-first portrait design. Functional primitives live in styles.css.
   Original PNG/GIF art is always contained; no generated mockup is shipped as UI. */
:root {
  --ui-bg:#11151f; --ui-surface:#1b2230; --ui-raised:#262e3d;
  --ui-line:#434b5b; --ui-text:#f0f0ec; --ui-muted:#b3b9c5;
  --ui-accent:#d8c79f; --ui-violet:#d6dbe5; --ui-mint:#d6dbe5;
  color:var(--ui-text); background:var(--ui-bg); font-family:"Segoe UI","Malgun Gothic",sans-serif;
}
body::before { background:radial-gradient(ellipse at 45% 12%,#33435e66,transparent 52%),radial-gradient(circle at 17% 28%,#dcd9cb 0 1px,transparent 1.5px),radial-gradient(circle at 81% 20%,#dcd9cb88 0 1px,transparent 1.5px),linear-gradient(145deg,#0e121b,#1a2232); }
a { color:var(--ui-mint); }
:focus-visible { outline:2px solid var(--ui-accent); outline-offset:3px; }
.game-symbols { position:absolute; width:0; height:0; overflow:hidden; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.eyebrow { color:var(--ui-mint); font-size:.65rem; letter-spacing:.12em; }
.muted,.panel>p:last-child { color:var(--ui-muted); }
.app-shell { display:block; width:min(100%,760px); min-height:100dvh; margin-inline:auto; background:linear-gradient(#27324630,transparent 850px); border-inline:1px solid #a5b0ca16; }
.rail { width:100%; height:auto; position:relative; overflow:visible; padding:calc(.5rem + env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) .5rem max(1rem,env(safe-area-inset-left)); border:0; background:#11151fcc; }
.rail-head { gap:.75rem; }
.brand { display:flex; align-items:center; gap:.45rem; font-size:1.1rem; font-weight:900; letter-spacing:.11em; color:var(--ui-text); }
.brand svg { width:30px; height:30px; color:var(--ui-mint); }
.pilot-chip { display:flex; align-items:center; gap:.5rem; margin-left:auto; min-width:0; min-height:44px; color:var(--ui-text); text-decoration:none; }
.pilot-chip__mark { display:none; }
.pilot-chip small { display:block; color:var(--ui-muted); font-size:.58rem; }
.pilot-chip strong { display:block; max-width:130px; font-size:.75rem; word-break:keep-all; overflow-wrap:anywhere; }
.rail-toggle { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:44px; padding:.4rem .7rem; border:1px solid var(--ui-line); border-radius:999px; background:#20273580; color:var(--ui-text); font-size:.65rem; }
.rail-toggle svg { width:17px; height:17px; }
.rail-nav { gap:.9rem; }
.rail-nav.menu-ready:not(.is-open) { display:none; }
.rail-nav.is-open { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:calc(100dvh - 165px); overflow:auto; overscroll-behavior:contain; padding:.5rem 0; }
.rail-nav__group { align-content:start; }
.rail-nav__group h2 { color:var(--ui-mint); font-size:.7rem; }
.rail-nav a { display:flex; align-items:center; min-height:44px; border-radius:4px; font-size:.8rem; color:var(--ui-muted); }
.rail-nav a:hover,.rail-nav a[aria-current=page] { color:var(--ui-text); background:#2c3341; box-shadow:inset 2px 0 var(--ui-mint); }
.text-button { color:var(--ui-muted); min-height:44px; }
.main-stage { max-width:none; padding:1rem max(1.25rem,env(safe-area-inset-right)) calc(6.5rem + env(safe-area-inset-bottom)) max(1.25rem,env(safe-area-inset-left)); }
.mobile-dock { position:fixed; z-index:15; left:50%; right:auto; transform:translateX(-50%); bottom:0; width:min(100%,760px); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); padding:.5rem max(.6rem,env(safe-area-inset-right)) calc(.5rem + env(safe-area-inset-bottom)) max(.6rem,env(safe-area-inset-left)); border-top:1px solid #aeb8c540; background:#111722f5; box-shadow:0 -8px 24px #080b1240; }
.mobile-dock a,.mobile-dock button { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.35rem; min-height:52px; padding:.25rem 0; background:none; color:#a5adc0; border:0; border-radius:3px; font-size:.64rem; font-weight:600; text-decoration:none; cursor:pointer; }
/* The open menu owns the dock highlight; aria-current still identifies the page. */
.mobile-dock:not(:has(button[aria-expanded=true])) a[aria-current=page],.mobile-dock button[aria-expanded=true] { color:var(--ui-accent); background:linear-gradient(#bbad8d17,transparent); }
.mobile-dock:not(:has(button[aria-expanded=true])) a[aria-current=page]::before { content:""; position:absolute; top:-.5rem; width:26px; height:1px; background:var(--ui-accent); }
.catalog-head,.preview-head { margin:.8rem 0 1.3rem; }
.catalog-head>.eyebrow,.preview-head>.eyebrow { display:none; }
.catalog-head h1,.preview-head h1 { position:relative; font-size:clamp(1.65rem,4vw,2.1rem); font-weight:750; letter-spacing:-.045em; padding:0; margin:.5rem 0; }
.catalog-head h1::before,.preview-head h1::before { content:none; }
.catalog-head>p:not(.eyebrow),.preview-head>p:not(.eyebrow) { color:var(--ui-muted); font-size:.8rem; line-height:1.8; }
.panel,.status-card,.profile-form,.form-details,fieldset,.battle-log,.item-card { min-height:0; border:1px solid #8893a433; border-radius:12px; background:#1d253180; }
.panel { padding:1.2rem; }
.panel h2 { font-size:1rem; }
summary { display:flex; align-items:center; gap:.75rem; min-height:48px; color:var(--ui-text); font-size:.8rem; cursor:pointer; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; margin-left:auto; color:var(--ui-mint); font-size:1.1rem; font-weight:400; }
details[open]>summary::after { content:"−"; }
.action-link { color:var(--ui-mint); font-size:.82rem; }
.main-stage :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),textarea,select),.auth-form :is(input,select),.main-stage .panel :is(input:not([type=hidden]):not([type=checkbox]):not([type=radio]),textarea,select) { min-width:0; max-width:100%; min-height:48px; padding:.7rem .9rem; font-size:1rem; color:var(--ui-text); background:#12151b; border:1px solid #48536a; border-radius:4px; box-shadow:inset 0 2px 5px #0003; }
.main-stage select,.main-stage .panel select,.auth-form select { appearance:none; padding-right:2.2rem; background-image:linear-gradient(45deg,transparent 50%,#b1b9ca 50%),linear-gradient(135deg,#b1b9ca 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat; }
.main-stage button,.main-stage .panel button,.game-button,.auth-form button { display:inline-flex; align-items:center; justify-content:center; gap:.6rem; min-height:48px; padding:.75rem 1rem; border:1px solid #7d879954; border-radius:999px; background:#232c3b; color:var(--ui-text); font-size:.85rem; font-weight:700; cursor:pointer; box-shadow:none; text-decoration:none; }
.main-stage button:hover:not(:disabled) { background:#343f50; }
.game-button,.main-stage .game-button,.main-stage .panel .game-button,.auth-form button { background:linear-gradient(110deg,#f1eee4,#e5dfd1); border-color:#ffffff66; color:#202631; box-shadow:none; }
.game-button:hover,.main-stage .game-button:hover,.main-stage .panel .game-button:hover,.auth-form button:hover { background:#fffaf0; color:#151a24; }
.game-button--secondary,.main-stage .game-button--secondary,.main-stage .panel .game-button--secondary { border-color:#8893a470; background:#222b3980; color:#e6e8ee; box-shadow:none; }
.game-button--secondary:hover,.main-stage .game-button--secondary:hover,.main-stage .panel .game-button--secondary:hover { background:#343f50; color:var(--ui-text); }
button:disabled { opacity:.5; cursor:not-allowed; }
.main-stage .text-button { background:none; border:0; box-shadow:none; }
input:is([type=checkbox],[type=radio]) { accent-color:var(--ui-mint); }
.filter-form { border:1px solid var(--ui-line); border-radius:5px; background:#161a21; padding:1rem; gap:.7rem; }
.filter-form label { font-size:.75rem; color:var(--ui-muted); }
.action-notices,.selection-summary { color:#e0e3ea; border-color:#596683; background:#222731; border-radius:4px; }
.pagination { gap:1rem; padding:1.5rem 0; font-size:.8rem; color:var(--ui-muted); }
.pagination a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:.4rem .9rem; border:1px solid var(--ui-line); border-radius:4px; background:#1f242e; color:var(--ui-text); }

/* The lobby is a character stage, not an image in a generic dashboard card. */
.home-wallet { display:flex; justify-content:flex-end; gap:.5rem; flex-wrap:wrap; margin:0 0 .5rem; font-variant-numeric:tabular-nums; }
.home-wallet>a,.home-wallet>span { display:flex; align-items:center; gap:.4rem; padding:.35rem .65rem .35rem .35rem; border:1px solid #8491a244; border-radius:999px; background:#151c27a0; color:var(--ui-text); text-decoration:none; }
.home-wallet small { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.home-wallet strong { font-size:.72rem; overflow-wrap:anywhere; }
.currency-token { display:grid; place-items:center; width:23px; height:23px; border:1px solid #b4a582; border-radius:50%; color:#d1c8b3; background:linear-gradient(130deg,#665a3d,#252b37); font-size:.7rem; font-weight:900; }
.currency-token--fame { border-radius:4px; border-color:#667495; color:#c9ceda; background:#292f3d; }
.character-home { position:relative; isolation:isolate; display:grid; grid-template-columns:minmax(0,1fr); min-height:0; overflow:visible; margin:0; border:0; border-radius:0; background:none; }
.character-home::before { content:""; position:absolute; z-index:-1; inset:0; pointer-events:none; background:radial-gradient(ellipse at 50% 32%,#62739128,transparent 50%); }
.character-home__art.unit-thumb::after { height:1px; left:22%; right:22%; background:linear-gradient(90deg,transparent,#919cb3,transparent); }
.portrait-orbit { position:absolute; z-index:0; pointer-events:none; width:90%; height:75%; border:1px solid #aab5c319; border-radius:50%; transform:rotate(-18deg); box-shadow:none; }
.portrait-orbit::before { content:none; }
.portrait-orbit::after { content:none; }
.portrait-caption { display:none; }
.character-home__info { grid-column:1; grid-row:2; position:relative; padding:.8rem .25rem 1.4rem; margin:0; background:none; min-width:0; }
.character-home__info>.eyebrow { display:none; }
.character-tags { display:flex; flex-wrap:wrap; gap:.45rem; margin:0; }
.character-tag { font-size:.7rem; letter-spacing:.02em; color:var(--ui-accent); border:0; border-radius:0; padding:.2rem .5rem .2rem 0; background:none; box-shadow:none; }
.character-home__info h1 { font-size:clamp(1.65rem,4vw,2.2rem); letter-spacing:-.045em; line-height:1.3; color:var(--ui-text); margin:.5rem 0 .35rem; overflow-wrap:anywhere; word-break:keep-all; text-wrap:balance; }
.home-greeting { font-size:.72rem; color:#a9b0c1; margin:.4rem 0; }
.character-vitals { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:1rem 0 1.1rem; font-variant-numeric:tabular-nums; }
.character-vitals dt { color:#99a3b9; font-size:.6rem; font-weight:800; }
.character-vitals dd { font-size:.8rem; font-weight:800; margin:.3rem 0; }
.character-vitals dd span { font-size:.68rem; font-weight:400; color:#acb4c5; }
meter { display:block; appearance:none; width:100%; height:5px; background:#0e1015; border:0; border-radius:0; }
meter::-webkit-meter-bar { background:#0e1015; border:0; border-radius:0; }
meter::-webkit-meter-optimum-value { background:linear-gradient(90deg,#7784a2,#cbd0dc); border-radius:0; }
meter::-moz-meter-bar { background:#b5bdcd; border-radius:0; }
.energy-meter::-webkit-meter-optimum-value { background:linear-gradient(90deg,#6a7899,#cbd0db); }
.energy-meter::-moz-meter-bar { background:#cbd0db; }
.home-actions { display:grid; grid-template-columns:1.45fr 1fr; gap:.7rem; }
.home-actions .game-button { min-height:52px; }
.home-actions svg { width:19px; height:19px; }
.home-actions .button-arrow { margin-left:auto; width:17px; }
.combat-readiness { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; margin:.9rem 0 0; font-size:.66rem; color:#bac1d0; }
.combat-readiness small { flex-basis:100%; color:#9aa4bb; font-size:.6rem; }
.ready-dot { width:5px; height:5px; background:#bec5d3; border-radius:50%; box-shadow:0 0 8px #bec5d3; }
.home-destinations { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:1rem 0 1.4rem; }
.destination { position:relative; display:flex; align-items:center; gap:.7rem; min-width:0; padding:1rem .8rem; border:1px solid #8694a344; border-radius:12px; background:#20273580; color:var(--ui-text); text-decoration:none; transition:border-color .15s; }
.destination::after { content:none; }
.destination--collect { grid-column:auto; padding:1rem .8rem; border-color:#9a957655; background:#20273580; }
.destination:hover { border-color:var(--ui-mint); }
.destination>span { min-width:0; flex:1; }
.destination strong,.destination small,.destination>span>span { display:block; }
.destination strong { font-size:.9rem; margin:.35rem 0 0; }
.destination small { color:#c2c8d6; font-size:.62rem; }
.destination>span>span { display:none; }
.destination__icon { width:27px; height:27px; color:#c4c9d6; }
.destination--collect .destination__icon { width:35px; height:35px; color:var(--ui-accent); }
.destination__arrow { width:17px; height:17px; color:var(--ui-muted); }
.home-pilot { display:block; padding:1rem .25rem; border-top:1px solid var(--ui-line); }
.home-pilot strong { font-size:.85rem; }
.home-pilot p:not(.eyebrow) { font-size:.73rem; color:var(--ui-muted); line-height:1.6; }
.home-record-links { display:flex; gap:.8rem; flex-wrap:wrap; }
.home-record-links .action-link { font-size:.7rem; }

/* Character cards and recruitment banners share the lobby's stage material. */
.unit-thumb { display:flex; align-items:center; justify-content:center; position:relative; height:220px; background:radial-gradient(ellipse at 50% 50%,#48526960,transparent 70%),linear-gradient(135deg,#292e3b,#1c2029); }
.unit-thumb img { display:block; position:relative; width:100%; height:100%; max-width:100%; max-height:100%; padding:1rem; object-fit:contain; }
.unit-fallback { color:#79849d; font-size:.85rem; letter-spacing:.22em; pointer-events:none; }
.unit-thumb:has(img):not(.image-unavailable) .unit-fallback { display:none; }
.character-gallery,.draw-rewards.character-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; align-items:start; }
.character-gallery .unit-card { display:block; }
.unit-card { border-color:#545e75; border-radius:5px; background:#1c2028; }
.unit-card--active { border-color:var(--ui-accent); box-shadow:0 0 0 1px #d6cebb30; }
.unit-info { padding:.9rem; }
.unit-info h2 { font-size:.9rem; min-height:0; margin:.4rem 0 .7rem; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.unit-info>p:not(.eyebrow) { color:var(--ui-muted); font-size:.73rem; line-height:1.65; }
.unit-info dl { border-color:var(--ui-line); }
.unit-info dt { color:var(--ui-muted); font-size:.65rem; }
.unit-info details { border-top:1px solid var(--ui-line); margin-top:.6rem; }
.unit-info details[open] { padding-bottom:.5rem; }
.unit-info details form { display:grid; gap:.65rem; font-size:.8rem; }
.unit-info form button { width:100%; font-size:.78rem; }
.unit-info form[action$="/reset/"] button { color:#ffd5cf; border-color:#b87975; background:#542d34; }
.character-gallery .unit-card:has(details[open]) { grid-column:1 / -1; }
.character-gallery .unit-card:has(details[open]) .unit-thumb { height:270px; }
.garage-storage { padding:.5rem 1rem; margin-bottom:1rem; }
.collection-filters { border-block:1px solid var(--ui-line); margin-bottom:1rem; }
.catalog-count { font-size:.72rem; color:var(--ui-muted); }
.draw-wallet { display:flex; flex-wrap:wrap; gap:.8rem; color:var(--ui-muted); font-size:.75rem; padding:.6rem .8rem; margin-bottom:1rem; background:#161a21; border-left:2px solid var(--ui-accent); }
.draw-wallet strong { color:var(--ui-accent); font-variant-numeric:tabular-nums; }
.draw-banners { display:grid; grid-template-columns:1fr; gap:1.3rem; }
.draw-banner { position:relative; display:grid; grid-template-columns:1fr; overflow:hidden; border:1px solid #a59368; border-radius:5px; background:linear-gradient(130deg,#363c4a,#20252f); }
.draw-banner__art.unit-thumb { grid-column:1; grid-row:1; height:350px; justify-content:flex-start; background:radial-gradient(ellipse at 25% 35%,#7784a255,transparent 65%),linear-gradient(120deg,#2f3646,#1f232d); }
.draw-banner__art img { width:67%; padding:1rem .4rem 6rem; object-position:center; }
.draw-example { position:absolute; z-index:3; bottom:6.1rem; left:.75rem; width:51%; text-align:center; color:#e1e4eb; font-size:.6rem; padding:.4rem; background:#171b23ef; border-radius:3px; }
.draw-banner__info { position:relative; grid-column:1; grid-row:1; z-index:2; display:flex; flex-direction:column; align-items:flex-end; padding:1.1rem; border:0; background:linear-gradient(90deg,transparent 35%,#1d212ac9 72%); }
.draw-banner__info>.eyebrow,.draw-banner__info>h2,.draw-banner__info>p:not(.eyebrow) { width:44%; overflow-wrap:anywhere; word-break:keep-all; }
.draw-banner__info h2 { font-size:1.45rem; margin:.45rem 0; color:#ebe8de; }
.draw-banner__info p:not(.eyebrow) { font-size:.78rem; line-height:1.9; color:var(--ui-text); }
.draw-banner__info form { width:100%; margin-top:auto; }
.draw-banner__info .game-button { width:100%; }
.draw-banner__info>.muted { display:block; width:100%; font-size:.65rem; margin-top:.8rem; text-align:center; }
.draw-rewards .unit-thumb { height:180px; }
.draw-rewards h3 { font-size:.85rem; line-height:1.5; }
.draw-rewards .unit-info { padding:.7rem; }

/* Combat preparation is a selection screen, with accessible native inputs. */
.mode-tabs { display:flex; flex-wrap:wrap; gap:4px; padding:4px; margin:1rem 0 0; background:#131b26; border:1px solid #8691a44d; border-radius:24px; }
.mode-tabs a { display:flex; align-items:center; justify-content:center; flex:1; min-height:44px; padding:.5rem .6rem; color:#bdc4d2; text-decoration:none; font-size:.75rem; white-space:nowrap; }
.mode-tabs a[aria-current] { color:#232833; background:#ece8de; box-shadow:none; border-radius:999px; }
.loadout-strip { display:flex; align-items:center; gap:1rem; padding:.6rem .75rem; margin-bottom:1rem; border:1px solid #727a8b; border-radius:5px; background:linear-gradient(110deg,#313847,#1d212b); }
.loadout-strip__art.unit-thumb { width:85px; height:100px; min-height:0; flex:none; background:#212631; border-radius:3px; }
.loadout-strip__art img { padding:.4rem; }
.loadout-strip>div:nth-child(2) { min-width:0; flex:1; }
.loadout-strip h2 { font-size:1rem; margin:.3rem 0; line-height:1.5; word-break:keep-all; overflow-wrap:anywhere; }
.loadout-strip p { font-size:.65rem; color:var(--ui-muted); margin:.3rem 0; }
.loadout-strip .action-link { display:flex; align-items:center; justify-content:center; min-height:44px; flex:none; font-size:.75rem; margin:0; padding:.4rem; }
.duel-selection.panel { background:none; border:0; padding:0; }
.duel-form { max-width:none; }
.opponent-search { display:grid; gap:.5rem; }
.opponent-search label { color:var(--ui-muted); font-size:.7rem; }
.opponent-search>div { display:flex; gap:.5rem; }
.opponent-search input { min-width:0; flex:1; }
.opponent-search button { flex:none; }
.opponent-picker { border:0; padding:0; margin:1rem 0; min-width:0; background:none; }
.opponent-picker legend { color:var(--ui-muted); font-size:.75rem; margin-bottom:.5rem; }
.picker-hint { font-size:.65rem; color:var(--ui-muted); margin:0 0 .6rem; }
.opponent-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; max-height:480px; overflow:auto; overscroll-behavior:contain; padding:.3rem; scrollbar-width:thin; }
.opponent-card { display:block; position:relative; min-width:0; border:1px solid #535f79; border-radius:5px; background:#1c202a; cursor:pointer; transition:border-color .15s; }
.opponent-check { position:absolute; z-index:2; top:.75rem; right:.75rem; width:20px; height:20px; display:grid; place-items:center; border:1px solid #acb3c3; border-radius:50%; background:#171b23bf; color:#20242e; font-size:.75rem; pointer-events:none; }
.opponent-card:has(input:checked) { border-color:var(--ui-accent); box-shadow:0 0 0 2px #d6cebb40; }
.opponent-card:has(input:checked) .opponent-check { background:var(--ui-accent); border-color:var(--ui-accent); }
.opponent-card:has(input:checked) .opponent-check::after { content:"✓"; }
.opponent-card:has(input:focus-visible) { outline:2px solid var(--ui-accent); outline-offset:2px; }
.opponent-card input[type=radio] { position:absolute; top:0; right:0; width:44px; height:44px; min-height:44px; margin:0; z-index:3; opacity:0; cursor:pointer; }
.opponent-art.unit-thumb { height:240px; border-radius:4px 4px 0 0; }
.opponent-art img { padding:.65rem; }
.opponent-info { display:block; padding:.75rem; line-height:1.5; }
.opponent-info strong { display:block; color:#eceef2; font-size:.85rem; word-break:keep-all; overflow-wrap:anywhere; }
.opponent-info small,.opponent-info>span { display:block; font-size:.65rem; margin:.2rem 0; color:var(--ui-muted); word-break:keep-all; overflow-wrap:anywhere; }
.duel-launch { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:.7rem; padding:1rem 0; border-block:1px solid var(--ui-line); }
.duel-launch select { width:100%; }
.duel-launch button { grid-column:1 / -1; width:100%; }
.battle-note { font-size:.73rem; color:var(--ui-muted); line-height:1.8; }
.championship-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
.championship-card.panel,.market-card.panel { margin:0; padding:0; overflow:hidden; border-radius:5px; }
.championship-art.unit-thumb { height:250px; }
.champion-mark { position:absolute; width:25px; height:25px; right:.7rem; top:.7rem; color:var(--ui-accent); }
.championship-info,.market-info { padding:1rem; }
.championship-info h2 { margin:0; }
.championship-info h2 a { color:var(--ui-text); text-decoration:none; }
.championship-info p,.market-info>p { font-size:.75rem; line-height:1.7; color:var(--ui-muted); }
.championship-info .game-button { width:100%; }
.champion-detail-art.unit-thumb { height:280px; border-radius:4px; }
.market-grid,.event-grid,.dashboard-grid { display:grid; grid-template-columns:1fr; gap:1rem; }
.market-art.unit-thumb { height:280px; }
.market-info h2 { margin:.4rem 0; word-break:keep-all; overflow-wrap:anywhere; }
.market-info>.market-price { color:var(--ui-accent); font-size:1.4rem; font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.market-price small { font-size:.7rem; font-weight:400; }
.market-info form,.market-info .profile-form { width:100%; max-width:none; padding:0; border:0; background:none; }
.market-info form button { width:100%; }
.event-card { position:relative; padding:1.2rem; border:1px solid #6f788d; border-left:3px solid var(--ui-mint); border-radius:4px; background:linear-gradient(120deg,#282e3b,#1e222b); min-width:0; }
.event-card[data-status=finished],.event-card[data-status=cancelled] { background:#1a1e27; border-color:var(--ui-line); }
.event-card__head { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.event-symbol { color:var(--ui-accent); font-size:1.5rem; }
.event-status { color:#dadee6; font-size:.65rem; padding:.4rem .6rem; border:1px solid #727d94; border-radius:3px; }
.event-card h3 { font-size:1.1rem; margin:.7rem 0 .4rem; word-break:keep-all; overflow-wrap:anywhere; }
.event-card h3 a { display:flex; align-items:center; min-height:44px; color:var(--ui-text); text-decoration:none; }
.event-card p { color:var(--ui-muted); font-size:.75rem; line-height:1.7; }
.event-card .event-prize { color:var(--ui-accent); font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.event-prize small,.event-capacity { color:var(--ui-muted); font-size:.7rem; font-weight:400; }
.arena-create { display:grid; gap:.75rem; }
.arena-create label { display:grid; gap:.5rem; }

/* Rankings stay vertical cards on PC as well as mobile. */
.ranking-board.panel { padding:0; border:0; background:none; }
.ranking-table-scroll { overflow:visible; }
.ranking-table { display:block; min-width:0; width:100%; }
.ranking-table thead { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.ranking-table tbody { display:grid; gap:.8rem; }
.ranking-table tr { display:grid; grid-template-columns:1fr 1fr; gap:.75rem 1rem; padding:1rem; border:1px solid var(--ui-line); border-left:3px solid #6c7996; border-radius:4px; background:linear-gradient(125deg,#252a36,#1b1f27); }
.ranking-table tr.ranking-self { border-color:var(--ui-accent); background:linear-gradient(125deg,#353b48,#1c2029); }
.ranking-table td { display:block; min-width:0; padding:0; border:0; white-space:normal; overflow-wrap:anywhere; font-size:.82rem; color:var(--ui-text); font-variant-numeric:tabular-nums; }
.ranking-table td:first-child { grid-column:1; grid-row:1; align-self:center; }
.ranking-table td:nth-child(2) { grid-column:1 / -1; grid-row:1; padding-left:2.5rem; }
.ranking-table td[data-label]::before { content:attr(data-label); display:block; font-size:.65rem; color:var(--ui-muted); padding-bottom:.2rem; }
.ranking-table td[colspan] { grid-column:1 / -1; }
.rank-character { display:flex; align-items:center; gap:.75rem; min-width:0; }
.rank-portrait.unit-thumb { width:60px; height:72px; min-height:0; flex:none; border-radius:3px; }
.rank-portrait img { padding:.25rem; }
.rank-character>span:last-child { min-width:0; }
.rank-character strong { font-size:.85rem; word-break:keep-all; overflow-wrap:anywhere; }
.rank-character small { display:block; color:var(--ui-muted); font-size:.65rem; }
.rank-character .self-badge { display:inline-block; padding:.1rem .35rem; margin-left:.5rem; color:var(--ui-accent); border:1px solid #a59369; border-radius:3px; }
.rank-number { font-size:1.2rem; font-weight:800; }
.rank-number--podium { color:var(--ui-accent); }

/* Recorded battle data remains authoritative; only stage/HUD materials change. */
.result-summary { padding:1rem; border-color:#6d7891; border-radius:4px; background:linear-gradient(120deg,#2f3645,#1e222b); }
.result-summary .result-verdict { color:var(--ui-accent); font-size:1.7rem; }
.result-summary p { color:var(--ui-muted); font-size:.73rem; line-height:1.6; }
.result-rewards { margin:.9rem 0; }
.result-rewards div { padding:.7rem 1rem; border-radius:4px; background:#1f242e; border-color:var(--ui-line); }
.result-rewards dt { color:var(--ui-muted); font-size:.65rem; }
.result-rewards dd { color:var(--ui-accent); font-size:1.1rem; }
.battle-scene { min-height:400px; gap:.7rem; padding:1.2rem; border-color:#67728b; border-radius:5px; background:radial-gradient(ellipse at 50% 100%,#404a5f,transparent 55%),linear-gradient(#232834,#171b23); }
.battle-scene::before { opacity:.16; }
.battle-scene__horizon { background:linear-gradient(transparent,#212630cc); border-color:#a2abbf2b; }
.battle-actor__frame { height:250px; }
.battle-actor__frame img { width:100%; height:230px; max-height:230px; object-fit:contain; }
.battle-scene__versus { color:var(--ui-accent); font-size:1.2rem; text-shadow:none; }
.battle-actor figcaption { padding:.7rem; width:100%; border-radius:4px; border-color:#626d8688; background:#171a22dd; }
.battle-actor figcaption strong { font-size:.9rem; word-break:keep-all; overflow-wrap:anywhere; }
.battle-actor figcaption>span:not(.eyebrow) { color:var(--ui-muted); font-size:.68rem; }
.battle-resources dt { color:var(--ui-muted); }
.battle-resources dd { color:var(--ui-text); font-size:.75rem; }
.battle-resources meter { height:4px; margin-top:.4rem; }
.preview-controls { padding:1rem; background:#1d212a; border:1px solid var(--ui-line); border-radius:4px; gap:.6rem; }
.preview-controls #play-result,.preview-controls #play-preview { background:var(--ui-accent); color:#202530; border-color:var(--ui-accent); }
#battle-progress { accent-color:var(--ui-mint); }
.auth-card { background:linear-gradient(145deg,#292e3ccf,#171a21dc); border-color:#7c869d; border-radius:6px; box-shadow:0 25px 70px #0005; }
.auth-emblem { width:52px; height:52px; color:var(--ui-mint); }
.auth-card h1 { letter-spacing:-.05em; }
.auth-form input { min-height:48px; }
@keyframes lobby-arrive { from { opacity:0; } to { opacity:1; transform:none; } }
@media (max-width:700px) {
  .app-shell { border:0; }
  .main-stage { padding:1rem max(1rem,env(safe-area-inset-right)) calc(6.5rem + env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left)); }
  .brand { font-size:.95rem; gap:.3rem; }
  .brand svg { width:25px; height:25px; }
  .rail-head { gap:.4rem; }
  .pilot-chip strong { max-width:90px; font-size:.68rem; }
  .rail-toggle { padding:.4rem .5rem; font-size:.6rem; }
  .rail-toggle svg { width:15px; height:15px; }
  .portrait-orbit { width:min(78%,275px); }
  .character-home__info h1 { font-size:1.5rem; }
  .home-actions .game-button { font-size:.8rem; padding:.7rem .65rem; }
  .home-actions svg { width:17px; }
  .destination { padding:1rem .7rem; gap:.5rem; }
  .destination strong { font-size:.78rem; }
  .destination__arrow { display:none; }
  .destination--collect .destination__arrow { display:block; }
  .filter-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .filter-form a { grid-column:1 / -1; }
  .character-gallery .unit-thumb { height:195px; }
  .character-gallery .unit-info { padding:.75rem; }
  .mode-tabs a { font-size:.69rem; padding:.5rem .3rem; }
  .opponent-grid { max-height:310px; gap:.65rem; }
  .opponent-art.unit-thumb { height:170px; }
  .opponent-info { padding:.65rem; }
  .opponent-info strong { font-size:.78rem; }
  .loadout-strip { gap:.65rem; }
  .loadout-strip__art.unit-thumb { width:60px; height:85px; }
  .loadout-strip h2 { font-size:.9rem; }
  .loadout-strip .action-link { flex-basis:44px; }
  .championship-grid { gap:.7rem; }
  .championship-art.unit-thumb { height:190px; }
  .championship-info { padding:.8rem; }
  .championship-info h2 { font-size:1rem; }
  .championship-info .game-button { padding:.6rem .4rem; font-size:.75rem; }
  .market-art.unit-thumb { height:230px; }
  .ranking-table td { font-size:.75rem; }
  .battle-scene { min-height:330px; gap:.3rem; padding:1rem .6rem; }
  .battle-actor__frame { height:170px; }
  .battle-actor__frame img { height:155px; max-height:155px; }
  .battle-actor figcaption { padding:.55rem; }
  .battle-actor figcaption strong { font-size:.82rem; }
  .battle-scene__versus { font-size:.8rem; }
  .battle-resources { gap:.35rem; }
  .battle-resources div { flex-basis:40%; }
  .result-summary { grid-template-columns:1fr 1fr; gap:.7rem; }
  .result-summary>div+div { border-top:0; border-left:1px solid #838ea770; padding-top:0; padding-left:.7rem; }
  .result-summary .result-verdict { font-size:1.2rem; }
}
@media (max-width:360px) {
  .brand { letter-spacing:.04em; }
  .brand svg { width:21px; }
  .home-wallet strong { font-size:.65rem; }
  .home-wallet>a,.home-wallet>span { padding-right:.5rem; }
  .home-actions .button-arrow { display:none; }
  .destination__icon { width:23px; }
}
@media (prefers-reduced-motion:reduce) {
  .destination,.opponent-card { transition:none; }
}

/* The entire image is visible at every aspect ratio. No crop, zoom, mask or text overlay. */
.character-home__art.unit-thumb,.collection-stage__art.unit-thumb {
  position:relative; display:flex; align-items:center; justify-content:center;
  grid-column:1; grid-row:1; width:100%; height:clamp(260px,46svh,430px);
  min-height:0; padding:1rem .75rem 1.25rem; overflow:visible; background:none; border:0;
}
.character-home__art.unit-thumb {
  height:clamp(160px,min(46svh,calc(100svh - 200px)),430px);
}
.character-home__art.unit-thumb img,.collection-stage__art.unit-thumb img {
  position:relative; z-index:1; display:block; width:100%; height:100%;
  min-width:0; min-height:0; max-width:100%; max-height:100%; padding:0;
  object-fit:contain; object-position:center; transform:none; clip-path:none; mask:none;
  filter:drop-shadow(0 12px 15px #06091080); animation:lobby-arrive .45s ease-out both;
}
.character-home__art.unit-thumb::after,.collection-stage__art.unit-thumb::after {
  content:""; position:absolute; z-index:0; left:12%; right:12%; bottom:10px; height:32px;
  border:1px solid #c1cadd30; border-radius:50%; background:radial-gradient(ellipse,#a4b6d42b,transparent 65%);
  box-shadow:0 0 22px #899bb511; pointer-events:none;
}
.collection-stage { display:grid; grid-template-columns:minmax(0,1fr); margin:0 0 1.5rem; }
.collection-stage__info { min-width:0; text-align:center; }
.collection-stage__info h2 { font-size:clamp(1.5rem,4vw,2rem); overflow-wrap:anywhere; word-break:keep-all; margin:.6rem 0; }
.collection-stage__state { color:var(--ui-accent); font-size:.8rem; }
.collection-stage__stats { display:grid; gap:0; margin:1rem auto; max-width:460px; font-variant-numeric:tabular-nums; }
.collection-stage__stats>div { display:flex; justify-content:space-between; gap:1rem; padding:.7rem .3rem; border-top:1px solid #8b96a333; }
.collection-stage__stats dt { color:var(--ui-muted); font-size:.8rem; }
.collection-stage__stats dd { margin:0; font-size:.85rem; overflow-wrap:anywhere; }
.collection-stage .game-button { width:100%; max-width:460px; }
.collection-tabs,.draw-pool-tabs { display:flex; gap:.35rem; padding:4px; border:1px solid #8691a44d; border-radius:999px; background:#131b26; margin:1rem 0; }
.collection-tabs a,.draw-pool-tabs a { display:flex; align-items:center; justify-content:center; min-height:44px; padding:.6rem 1.15rem; color:var(--ui-muted); text-decoration:none; font-size:.8rem; border-radius:999px; }
.collection-tabs a { flex:1; }
.collection-tabs a[aria-current],.draw-pool-tabs a[aria-current] { color:#232833; background:#ece8de; }
.draw-pool-tabs { max-width:100%; overflow-x:auto; scrollbar-width:thin; border-radius:24px; }
.draw-pool-tabs a { white-space:nowrap; flex:none; }
.draw-pool-tabs a:focus-visible { outline-offset:-3px; }
.draw-banners[data-pool-picker] .draw-banner[hidden] { display:none; }
.draw-banner { overflow:visible; display:block; border:0; border-radius:0; background:none; }
.draw-banner__art.unit-thumb { display:flex; justify-content:center; width:100%; height:clamp(280px,45svh,450px); padding:1rem .5rem 2.7rem; background:radial-gradient(ellipse at 50% 45%,#6e729125,transparent 70%); overflow:visible; }
.draw-banner__art img { width:100%; height:100%; padding:0; object-fit:contain; object-position:center; }
.draw-example { z-index:2; bottom:0; left:0; width:100%; text-align:left; padding:.65rem .1rem; color:var(--ui-accent); background:none; font-size:.7rem; }
.draw-banner__info { display:flex; align-items:stretch; padding:.3rem 0 1.4rem; background:none; }
.draw-banner__info>.eyebrow,.draw-banner__info>h2,.draw-banner__info>p:not(.eyebrow) { width:100%; }
.draw-banner__info h2 { color:var(--ui-text); font-size:1.7rem; }
.draw-banner__info p:not(.eyebrow) { padding:.7rem .9rem; border:1px solid #94a0b433; border-radius:10px; background:#20283880; font-size:.83rem; }
.draw-banner__info form { margin-top:.6rem; }
.draw-banner__info>.muted { color:var(--ui-muted); font-size:.7rem; }
@media (prefers-reduced-motion:reduce) {
  .character-home__art.unit-thumb img,.collection-stage__art.unit-thumb img { animation:none; }
}