/* tokens.css */
@font-face{font-family:'Black Han Sans';src:url('../assets/fonts/black-han-sans.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:'YUT Sans';src:url('../assets/fonts/pretendard-variable.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
  color-scheme:light;
  --brand-charcoal:#2d2c2a;--brand-dark:#24221f;--brand-cream:#fbeee9;--brand-orange:#fe3b00;
  --bg:#fbeee9;--bg-subtle:#f4dfd7;--surface:#fffaf7;--surface-raised:#fffdfb;--surface-strong:var(--brand-charcoal);
  --text:#2d2c2a;--text-muted:#6f6561;--text-on-strong:#fbeee9;--border:#dacbc5;--border-strong:#aa9890;
  --accent:#fe3b00;--accent-raw:#fe3b00;--accent-hover:#ee3b08;--accent-text:#171512;--accent-link:#b92d00;
  --action-fill:var(--accent);--action-hover:var(--accent-hover);--action-text:var(--accent-text);--action-outline:var(--accent);
  --success:#1f7156;--success-bg:#dcefe7;--warning:#8a5100;--warning-bg:#fae8c8;--error:#a62828;--error-bg:#f7dede;--info:#155f73;--info-bg:#dcecf0;--focus:#006d80;
  --team-blue:#1767a0;--team-blue-soft:#dcecf7;--team-red:#b6312d;--team-red-soft:#f3dcda;
  --board-paper:#f5dfbc;--board-wood:#c88955;--board-wood-edge:#9a5c32;--board-ink:#513c2d;
  --board-node:#ecc58d;--board-major:#f7edda;--board-stick:#bd7444;--board-stick-text:#402515;--board-stick-edge:#704020;
  --shadow:0 8px 24px rgb(58 36 27 / .09);--shadow-small:0 1px 3px rgb(58 36 27 / .08);
  --button-raised:inset 0 1px 0 rgb(255 255 255 / .18),inset 0 -1px 0 rgb(0 0 0 / .12),0 1px 2px rgb(58 36 27 / .12);
  --button-highlight:inset 0 1px 0 rgb(255 255 255 / .4),inset 0 -1px 0 rgb(0 0 0 / .16),0 1px 2px rgb(58 36 27 / .16);
  --button-pressed:inset 0 1px 2px rgb(0 0 0 / .18);--shadow-dialog:0 8px 24px rgb(58 36 27 / .2);
  --sidebar-bg:var(--brand-dark);--sidebar-text:#fbeee9;--sidebar-muted:#cbbeb8;--sidebar-hover:#36332f;--sidebar-active:#403c36;--sidebar-border:#49443e;
  --search-surface:#fffaf7;--search-text:#2d2c2a;--search-muted:#6f6561;--search-border:#aa9890;--search-hover:#f4dfd7;
  --radius-small:5px;--radius-medium:10px;--radius-large:10px;--radius-panel:5px;
  --sidebar-width:170px;--sidebar-collapsed-width:56px;--content-max:1084px;--content-home-max:1120px;--content-padding:8px;--mobile-nav-height:68px;--side-panel-width:280px;--auth-width:420px;
  --currency-summary-width:288px;--currency-heading-reserve:calc(var(--currency-summary-width) + 12px);--interactive-hover:#f8ebe4;--interactive-pressed:#f6e5dc;
  --sidebar-inset:8px;--sidebar-row-height:40px;--sidebar-tool-size:32px;--search-panel-width:300px;--friend-search-max-width:520px;--control-stroke:2px;--home-activity-height:224px;
  --font-family:'YUT Sans','Malgun Gothic','Apple SD Gothic Neo',system-ui,sans-serif;
  --font-body:14px;--font-small:13px;--font-caption:12px;--font-page-title:28px;--font-section-title:17px;--font-control:14px;--font-control-large:17px;--line-control-large:1.1428;
  --line-body:1.6;--line-heading:1.3;--weight-body:400;--weight-label:600;--weight-heading:700;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;
  --control-height:40px;--control-height-large:48px;--control-height-small:32px;--panel-padding:16px;--layout-gap:16px;--welcome-art-width:560px;
  --home-control-width:248px;--home-column-gap:12px;--button-radius-small:3px;--button-radius-large:10px;--play-option-height:84px;--play-option-title:19px;
  --board-stage:#14555a;--scene-wall:#11636b;--scene-frame:#0b4247;--scene-floor:#154c51;--scene-ink:#102b30;--scene-trim:#26878c;
}
@media(min-width:330px) { :root { --content-padding:12px; } }
@media(min-width:960px) { :root { --content-padding:16px; } }
@media(min-width:960px) and (max-width:1249.98px) { :root { --sidebar-width:56px; } }
:root[data-theme='dark']{
  color-scheme:dark;
  --interactive-hover:#36332f;--interactive-pressed:#403c36;
  --bg:#2d2c2a;--bg-subtle:#24221f;--surface:#24221f;--surface-raised:#24221f;--surface-strong:#fbeee9;
  --text:#fbeee9;--text-muted:#bdb0aa;--text-on-strong:var(--brand-charcoal);--border:#514b43;--border-strong:#73695e;
  --accent:#fe3b00;--accent-raw:var(--brand-orange);--accent-hover:#ee3b08;--accent-text:#171512;
  --action-fill:var(--brand-orange);--action-hover:#ff501b;--action-text:#171512;--action-outline:var(--brand-orange);
  --success:#64bd94;--success-bg:#203e34;--warning:#f0b75d;--warning-bg:#4a371d;--error:#ff8983;--error-bg:#492827;--info:#70b8ca;--info-bg:#213d45;--focus:#79d4e7;
  --team-blue:#65aee0;--team-blue-soft:#233846;--team-red:#f07870;--team-red-soft:#472b2c;
  --shadow:0 12px 30px rgb(0 0 0 / .26);--shadow-small:0 1px 3px rgb(0 0 0 / .22);
  --button-raised:inset 0 1px 0 rgb(255 255 255 / .1),inset 0 -1px 0 rgb(0 0 0 / .25),0 1px 2px rgb(0 0 0 / .25);
  --button-highlight:inset 0 1px 0 rgb(255 255 255 / .25),inset 0 -1px 0 rgb(0 0 0 / .3),0 1px 2px rgb(0 0 0 / .35);
  --button-pressed:inset 0 1px 2px rgb(0 0 0 / .35);--shadow-dialog:0 8px 24px rgb(0 0 0 / .48);
  --board-stage:#263a3a;--scene-wall:#2d5557;--scene-frame:#20383a;--scene-floor:#294445;--scene-ink:#1b3133;--scene-trim:#426a6b;--accent-link:#ff956f;
  --search-surface:#403c36;--search-text:#fbeee9;--search-muted:#cbbeb8;--search-border:#73695e;--search-hover:#514b43;
  --board-paper:#efd4aa;--board-wood:#b77c4e;--board-wood-edge:#81502f;--board-ink:#463225;--board-node:#e1b678;
}
@media(min-width:960px){
  :root[data-theme='dark']{
    --surface:#353432;--surface-raised:#3d3b39;--border:#66615a;--border-strong:#81776d;
    --interactive-hover:#383532;--interactive-pressed:#45413b;
    --action-fill:#fbeee9;--action-hover:#fffaf7;--action-text:#24221f;--action-outline:var(--brand-orange);
  }
}

/* base.css */
@font-face { font-family:'Material Symbols Outlined';font-style:normal;font-weight:400;font-display:block;src:url('/assets/fonts/material-symbols-outlined-subset.woff2') format('woff2'); }
.material-symbols-outlined { font-family:'Material Symbols Outlined'; }
* { box-sizing: border-box; }
.visually-hidden { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; }
html { scrollbar-gutter: stable; overflow-y: scroll; }
@supports (scrollbar-gutter: stable) { html { overflow-y: auto; } }
body { margin: 0; min-width: 0; background: var(--bg); color: var(--text); font: var(--weight-body) var(--font-body)/var(--line-body) 'Malgun Gothic', 'Apple SD Gothic Neo', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { line-height: var(--line-heading); font-weight: var(--weight-heading); letter-spacing: -.035em; }
h1 { font-size: var(--font-page-title); }
h2 { font-size: var(--font-section-title); }
h3 { font-size: var(--font-body); }
p { word-break: keep-all; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: -80px; background: var(--surface-raised); border: 2px solid var(--focus); padding: 10px 14px; border-radius: var(--radius-small); }
.skip-link:focus { top: 12px; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; overflow: hidden; font-size: 22px; line-height: 1; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0; }
.nav-link.active .icon, .button.primary .icon { font-variation-settings: 'FILL' 1; }
.wordmark { display: inline-flex; align-items: center; gap: 6px; font: 800 19px/1 system-ui, sans-serif; letter-spacing: -.04em; white-space: nowrap; }
.taegeuk { width: 19px; height: 19px; border-radius: 50%; margin: 0 1px; background: linear-gradient(to bottom, var(--accent-raw) 50%, #1767a0 50%); transform: rotate(-12deg); }
.eyebrow { font-size: var(--font-caption); font-weight: var(--weight-label); letter-spacing: .08em; color: var(--accent); }
.noscript-note { margin: var(--space-6); padding: var(--space-4); background: var(--error-bg); color: var(--error); border-radius: var(--radius-medium); }

/* components.css */
/* Shared controls: pages choose a variant; they do not redefine its size. */
.button { --button-height: var(--control-height); min-height: var(--button-height); padding: var(--space-3) var(--space-4); border: var(--control-stroke) solid transparent; border-radius: var(--radius-small); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--font-control); font-weight: var(--weight-label); line-height: 1.3; text-align: center; transition: background .15s, border-color .15s, color .15s; }
.button.primary { background: var(--action-fill); color: var(--action-text); border-color: var(--action-outline); }
.button.primary:not(:disabled):not([aria-disabled='true']):hover { background: var(--action-hover); border-color: var(--action-outline); }
.button.secondary { background: var(--surface-raised); border-color: var(--border-strong); }
.button.secondary:not(:disabled):not([aria-disabled='true']):hover { background: var(--interactive-hover); border-color: var(--text-muted); }
.button.ghost { background: transparent; color: var(--text-muted); }
.button.ghost:not(:disabled):not([aria-disabled='true']):hover { background: var(--interactive-hover); color: var(--text); }
.button.danger { background: var(--error-bg); color: var(--error); border-color: var(--error); }
.button.danger:not(:disabled):not([aria-disabled='true']):hover { border-color: var(--text); }
.button.primary,.button.secondary { box-shadow:var(--button-raised); }
.button.primary:not(:disabled):not([aria-disabled='true']):hover,.button.secondary:not(:disabled):not([aria-disabled='true']):hover { box-shadow:var(--button-highlight); }
:root[data-theme='dark'] .button.primary,
:root[data-theme='dark'] .button.primary:not(:disabled):not([aria-disabled='true']):hover { box-shadow:none; }
.button.compact>.icon { font-size:18px; }
.button.full { width: 100%; }
.button.compact { --button-height: var(--control-height-small); padding: 2px var(--space-4);border-radius:var(--button-radius-small); }
.button.large { --button-height: var(--control-height-large);padding:4px var(--space-4);border-radius:var(--button-radius-large);font-size:var(--font-control-large);line-height:var(--line-control-large); }
.segmented button { display: flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2); border: 1px solid var(--border-strong); background: var(--surface-raised); color: var(--text); border-radius: var(--radius-small); font-size: var(--font-control); font-weight: var(--weight-label); }
.segmented button:not(:disabled):hover { background:var(--interactive-hover); }
.segmented button.selected { background:var(--surface-raised);color:var(--text);outline:2px solid var(--accent-raw);outline-offset:2px; }
.button:not(:disabled):not([aria-disabled='true']):active { box-shadow:var(--button-pressed); }
.button:disabled, .button[aria-disabled='true'] { cursor: not-allowed; opacity: .55; }
.button[aria-busy='true'] { cursor: progress; }
.icon-button { width: var(--control-height); height: var(--control-height); display: inline-grid; place-items: center; background: var(--surface); border: var(--control-stroke) solid var(--border-strong); border-radius: var(--radius-small); }
.icon-button:not(:disabled):hover { background:var(--interactive-hover); }
.icon-button:not(:disabled):active { background:var(--interactive-pressed); }
.icon-button:disabled { opacity:.55;cursor:not-allowed; }
.panel { padding: var(--panel-padding); background: var(--surface); border: var(--control-stroke) solid var(--border); border-radius: var(--radius-panel); box-shadow: none; min-width: 0; }
.panel--compact { padding: var(--space-4); }
.panel--flush { padding: 0; }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.panel-heading a { min-height: var(--control-height); display: inline-flex; align-items: center; font-size: var(--font-small); color: var(--text-muted); }
.panel-heading a:hover { color: var(--accent); text-decoration: underline; }
.status-tag { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 28px; padding: var(--space-1) var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-small); font-size: var(--font-caption); font-weight: var(--weight-label); white-space: nowrap; }
.status-tag .icon { font-size: 16px; }
.status-success { color: var(--success); background: var(--success-bg); border-color: var(--success); }
.status-warning { color: var(--warning); background: var(--warning-bg); border-color: var(--warning); }
.status-info { color: var(--info); background: var(--info-bg); border-color: var(--info); }
.avatar { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: var(--radius-small); background: var(--bg-subtle); border: 1px solid var(--border-strong); color: var(--text); font-weight: var(--weight-heading); }
.avatar-tiny { width: 28px; height: 28px; font-size: var(--font-caption); }
.avatar-small { width: 32px; height: 32px; }
.avatar-medium { width: 44px; height: 44px; }
.avatar-large { width: 72px; height: 72px; font-size: 24px; }
.avatar-xlarge { width: 96px; height: 96px; font-size: 32px; }
.spinner { width: 28px; height: 28px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
.loading-state { min-height: 180px; display: grid; place-items: center; align-content: center; gap: var(--space-4); color: var(--text-muted); }
@keyframes spin { to { transform: rotate(1turn); } }
.empty-state { min-height: 180px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: var(--space-6); color: var(--text-muted); }
.empty-state > .icon { font-size: 28px; margin-bottom: var(--space-3); }
.empty-state h2 { font-size: var(--font-body); color: var(--text); margin-bottom: var(--space-2); }
.empty-state p { font-size: var(--font-small); }
.empty-state .button { margin-top: var(--space-4); }
.inline-alert { padding: var(--space-3) var(--space-4); border: 1px solid; border-radius: var(--radius-small); font-size: var(--font-small); margin-bottom: var(--space-4); display: flex; align-items: flex-start; gap: var(--space-2); }
.inline-alert .icon { font-size: 20px; margin-top: 1px; }
.alert-info { color: var(--info); background: var(--info-bg); }
.alert-error { color: var(--error); background: var(--error-bg); }
.toast-region { position: fixed; right: var(--space-6); bottom: var(--space-6); z-index: 100; display: grid; gap: var(--space-2); }
.toast { max-width: 360px; padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface-raised); box-shadow: var(--shadow); font-weight: var(--weight-label); }
.toast-success { border-color: var(--success); color: var(--success); }
.toast-error { border-color: var(--error); color: var(--error); }
label { display: grid; gap: var(--space-2); font-weight: var(--weight-label); font-size: var(--font-small); }
input { width: 100%; min-width: 0; min-height: var(--control-height); padding: var(--space-3); background: var(--surface-raised); border: var(--control-stroke) solid var(--border-strong); border-radius: var(--radius-small); }
input::placeholder { color: var(--text-muted); }
input[aria-invalid='true'] { border-color: var(--error); }
input:disabled { opacity: .6; cursor: not-allowed; }
.form-error { min-height: 22px; color: var(--error); font-size: var(--font-small); font-weight: var(--weight-body); }
.modal { width: min(440px, calc(100% - 32px)); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-medium); background: var(--surface-raised); color: var(--text); box-shadow: var(--shadow-dialog); }
.modal::backdrop { background: rgb(10 10 12 / .66); }
.modal form { padding: var(--space-6); }
.modal p { margin: var(--space-3) 0 var(--space-6); color: var(--text-muted); }
.modal form > div { display: flex; justify-content: flex-end; gap: var(--space-2); }
.result-mark { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: var(--radius-small); font-weight: var(--weight-heading); }
.result-mark.win { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }
.result-mark.loss { background: var(--error-bg); color: var(--error); border: 1px solid var(--error); }
@media (max-width: 900px) { .button.compact { --button-height: var(--control-height); } .toast-region { bottom: calc(var(--mobile-nav-height) + 12px); right: 12px; left: 12px; } }
@media (prefers-reduced-motion: reduce) { .button { transition: none; } .spinner { animation: none; } }

/* pages.css */
.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:20px}
.auth-card form{display:grid;gap:15px}
.auth-switch{text-align:center;margin-top:22px;color:var(--text-muted)}
.auth-switch a{color:var(--accent);font-weight:var(--weight-heading)}
.local-account-note{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);color:var(--text-muted);font-size:var(--font-caption)}
.profile-stats dl{display:grid;gap:8px}
.profile-stats dl div{padding:11px;background:var(--bg);border-radius:var(--radius-medium)}
.profile-stats dt{font-size:var(--font-caption);color:var(--text-muted)}
.profile-stats dd{font-size:1.1rem;font-weight:var(--weight-heading)}
.recent-panel{grid-column:span 1}
.match-list{display:grid;margin-top:14px}
.match-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--border)}
.match-row>div{display:grid}
.match-row small{color:var(--text-muted)}
.setup-main{display:grid;gap:0}
.setup-main>h2{margin-bottom:8px}
.setup-main>p{color:var(--text-muted);margin-bottom:22px}
.setting-row{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:15px;border-bottom:1px solid var(--border)}
.setting-row>div{display:grid}
.setting-row span{color:var(--text-muted);font-size:var(--font-caption)}
.setup-main>.button{margin-top:24px}
.setup-aside h2{margin-bottom:12px}
.setup-aside p,.setup-aside li,.aside-note{color:var(--text-muted);font-size:var(--font-caption)}
.setup-aside ul{padding-left:20px;display:grid;gap:9px}
.invite-field{display:grid;grid-template-columns:1fr auto;gap:8px}
.setup-aside form{display:grid;gap:13px;margin-top:18px}
.aside-note{margin-top:20px}
.rank-ready{text-align:center;display:grid;justify-items:center}
.rank-emblem{width:80px;height:80px;display:grid;place-items:center;background:var(--warning-bg);color:var(--warning);border-radius:var(--radius-large);margin-bottom:14px}
.rank-emblem .icon{width:40px;height:40px}
.rank-ready>strong{font-size:3.5rem}
.rank-ready>span{color:var(--text-muted)}
.rank-ready>.button{margin-top:24px}
.finding-opponent{min-height:calc(100vh - 150px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.match-pulse{position:relative;width:150px;height:150px;display:grid;place-items:center;margin-bottom:25px}
.match-pulse span{position:absolute;inset:0;border:2px solid var(--accent);border-radius:50%;animation:pulse 1.7s ease-out infinite}
.match-pulse span:nth-child(2){animation-delay:.7s}
.match-pulse strong{z-index:1;width:74px;height:74px;display:grid;place-items:center;background:var(--surface);border:2px solid var(--accent);border-radius:50%;font:400 1.8rem/1 'Black Han Sans',sans-serif}
@keyframes pulse{0%{transform:scale(.45);opacity:1}100%{transform:scale(1);opacity:0}}
.finding-opponent h1{margin:8px 0}
.finding-opponent>p:not(.eyebrow){color:var(--text-muted)}
.finding-opponent .button{margin-top:25px}



/* pages-extra.css */
.result-page{align-content:start}
.result-card{width:min(680px,100%);margin:0 auto;text-align:center}
.result-symbol{width:92px;height:92px;display:grid;place-items:center;margin:18px auto;border-radius:var(--radius-large);font:400 3rem/1 'Black Han Sans',sans-serif}
.result-symbol.win{background:var(--success-bg);color:var(--success);border:2px solid var(--success)}
.result-symbol.loss{background:var(--error-bg);color:var(--error);border:2px solid var(--error)}
.result-card>p:not(.eyebrow){color:var(--text-muted);margin-top:10px}
.result-card dl{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0;background:var(--bg);border-radius:var(--radius-large)}
.result-card dl div{padding:15px;border-right:1px solid var(--border)}
.result-card dl div:last-child{border:0}
.result-card dt{color:var(--text-muted);font-size:var(--font-caption)}
.result-card dd{font-weight:var(--weight-heading)}
.result-actions{display:flex;gap:10px;justify-content:center}
.guest-conversion{margin-top:28px;padding:22px;background:var(--brand-charcoal);color:var(--brand-cream);border-radius:var(--radius-large);text-align:left}
.guest-conversion p{color:#cbbeb8!important;margin:5px 0 16px!important}
.profile-card{grid-row:span 2;text-align:center;display:flex;flex-direction:column;align-items:center}
.profile-card h2{margin-top:15px}
.profile-card>p{color:var(--text-muted);font-size:var(--font-caption);margin:4px 0 12px}
.profile-card .button{margin-top:24px}
.profile-stats dl{grid-template-columns:repeat(4,1fr);margin-top:24px}
.profile-migration p{color:var(--text-muted);margin:10px 0}
.table-panel{overflow:hidden}
.table-head,.table-row{display:grid;grid-template-columns:70px minmax(160px,1fr) 110px 80px 130px;align-items:center;gap:10px;padding:15px 20px}
.table-head{color:var(--text-muted);font-size:var(--font-caption);font-weight:var(--weight-heading);background:var(--bg-subtle)}
.table-row{min-height:65px;border-top:1px solid var(--border)}
.table-row:hover{background:var(--bg)}
.table-row.current-user{background:var(--warning-bg);border-left:4px solid var(--accent)}
.ranking-table .table-head,.ranking-table .table-row{grid-template-columns:70px 1fr 100px 80px}
.ranking-table .table-row>span:nth-child(2){display:flex;align-items:center;gap:9px}
.ranking-guide h2{margin-bottom:10px}
.ranking-guide>p{color:var(--text-muted)}
.ranking-guide dl{margin:20px 0}
.ranking-guide dl div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.ranking-guide dd{font-weight:var(--weight-heading)}
.two-column .empty-state{min-height:330px}
.two-column aside form{display:grid;gap:13px;margin-top:20px}
.collection-note{display:flex;align-items:center;gap:10px;margin-bottom:18px;color:var(--text-muted);font-size:var(--font-caption)}
.item-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.item-card{min-height:170px;padding:22px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px}
.item-card.equipped{border:2px solid var(--accent)}
.item-symbol{width:82px;height:82px;display:grid;place-items:center;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-large);font:400 2rem/1 'Black Han Sans',sans-serif}
.item-card>div:nth-child(2)>span{color:var(--text-muted);font-size:var(--font-caption)}
.settings-stack{display:grid;gap:12px}
.setting-section{min-height:120px;padding:24px 27px;display:flex;justify-content:space-between;align-items:center;gap:28px}
.setting-section p{color:var(--text-muted);margin-top:5px}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:7px;width:230px}
.inline-form{display:grid;grid-template-columns:1fr auto;gap:8px;width:min(430px,100%)}
.inline-form .form-error{grid-column:1/-1}
.outcome-guide{grid-row:span 2}
.outcome-guide>div{margin-top:18px}
.outcome-guide p{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--border)}
.outcome-guide span{color:var(--text-muted)}
.rule-list ol{list-style:none;padding:0;margin:20px 0 0;counter-reset:rule}
.rule-list li{counter-increment:rule;display:grid;grid-template-columns:38px 1fr;column-gap:12px;margin-bottom:16px}
.rule-list li:before{content:counter(rule);grid-row:span 2;width:34px;height:34px;display:grid;place-items:center;background:var(--accent);color:var(--accent-text);border-radius:var(--radius-small);font-weight:var(--weight-heading)}
.rule-list li span{color:var(--text-muted);font-size:var(--font-caption)}
.shortcut-guide{display:grid;grid-template-columns:170px 1fr;align-items:center;gap:22px}
.shortcut-guide h2{grid-column:1/-1}
.mini-board{aspect-ratio:1;border:3px solid var(--text);position:relative;transform:rotate(3deg)}
.mini-board:before,.mini-board:after{content:'';position:absolute;left:50%;top:0;width:3px;height:100%;background:var(--text);transform:rotate(45deg)}
.mini-board:after{transform:rotate(-45deg)}
.mini-board span{position:absolute;width:13px;height:13px;background:var(--surface);border:3px solid var(--accent);border-radius:50%;z-index:1}
.mini-board span:nth-child(1){left:-8px;top:-8px}
.mini-board span:nth-child(2){right:-8px;top:-8px}
.mini-board span:nth-child(3){left:calc(50% - 6px);top:calc(50% - 6px)}
.mini-board span:nth-child(4){left:-8px;bottom:-8px}
.mini-board span:nth-child(5){right:-8px;bottom:-8px}
.shortcut-guide p{color:var(--text-muted)}
.center-action{text-align:center;margin-top:24px}

/* game.css */
.game-page{min-height:calc(100vh - 85px)}.game-topbar{min-height:62px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin-bottom:15px}.game-topbar>div{display:flex;align-items:center;gap:10px}.game-topbar>p{display:flex;align-items:center;gap:8px}.game-topbar>.button{justify-self:end}.turn-indicator{width:13px;height:13px;border:3px solid currentColor;border-radius:50%;box-shadow:0 0 0 3px var(--surface)}.turn-indicator.team-blue{color:var(--team-blue)}.turn-indicator.team-red{color:var(--team-red)}.game-layout{display:grid;grid-template-columns:minmax(560px,1fr) 330px;gap:18px;align-items:start}.yut-board-wrap{padding:3% 6% 7%;perspective:1300px}.yut-board{position:relative;aspect-ratio:1;max-width:720px;margin:auto;background:var(--board-paper);border:17px solid var(--board-wood-edge);border-radius:var(--radius-large);box-shadow:inset 0 0 0 3px var(--board-wood),0 25px 35px rgb(38 22 12 / .24);transform:rotateX(5deg);transform-origin:center bottom}.yut-board:before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgb(112 73 46 / .08) 1px,transparent 1px);background-size:17px 17px;pointer-events:none}.board-lines{position:absolute;inset:8%;width:84%;height:84%;overflow:visible}.board-lines path{fill:none;stroke:var(--board-ink);stroke-width:.65;stroke-linecap:round}.board-node{position:absolute;left:var(--x);top:var(--y);width:19px;height:19px;border-radius:50%;background:var(--board-node);border:3px solid var(--board-ink);transform:translate(-50%,-50%);z-index:2}.board-node.major{width:29px;height:29px;background:var(--board-major);border-width:4px}.game-piece{position:absolute;left:var(--x);top:var(--y);width:42px;height:50px;transform:translate(-50%,-68%);border:3px solid var(--board-major);border-radius:48% 48% 42% 42%;z-index:5;box-shadow:0 10px 0 rgb(55 35 24 / .25),0 12px 10px rgb(55 35 24 / .3)}.game-piece:before{content:'';position:absolute;inset:7px;border:2px solid rgb(255 255 255 / .7);border-radius:50%}.game-piece.team-blue,.yard-piece.team-blue{background:var(--team-blue)}.game-piece.team-red,.yard-piece.team-red{background:var(--team-red)}.game-piece.selectable,.yard-piece.selectable{animation:selectable 1.2s ease-in-out infinite;border-color:var(--accent-raw)}.game-piece span{position:absolute;right:-8px;top:-8px;width:22px;height:22px;display:grid;place-items:center;background:var(--brand-charcoal);color:var(--brand-cream);border-radius:50%;font-size:var(--font-caption)}.game-piece:disabled,.yard-piece:disabled{cursor:default}@keyframes selectable{50%{filter:brightness(1.25);box-shadow:0 10px 0 rgb(55 35 24 / .25),0 0 0 5px rgb(254 59 0 / .27)}}.piece-yard{position:absolute;display:grid;gap:4px;color:var(--board-ink);font-size:var(--font-caption);font-weight:900;z-index:4}.piece-yard>div{display:flex;gap:4px}.yard-blue{left:4%;bottom:-9%}.yard-red{right:4%;top:-10%;text-align:right}.yard-piece{width:23px;height:28px;border:2px solid var(--board-major);border-radius:45%;box-shadow:0 4px 0 rgb(55 35 24 / .25)}.yard-empty{font-size:var(--font-caption)}.game-control{padding:20px}.player-strip{min-height:62px;display:flex;align-items:center;gap:11px;padding:10px;border-bottom:1px solid var(--border)}.player-strip.current{border-top:1px solid var(--border);border-bottom:0}.player-strip>div{display:grid}.player-strip small{color:var(--text-muted)}.team-badge{width:39px;height:39px;display:grid;place-items:center;border-radius:var(--radius-small);font-weight:900;border:2px solid currentColor}.team-badge.team-blue{color:var(--team-blue);background:var(--team-blue-soft)}.team-badge.team-red{color:var(--team-red);background:var(--team-red-soft)}.turn-console{min-height:340px;display:flex;flex-direction:column;justify-content:center;text-align:center;padding:20px 0}.turn-console>p{color:var(--text-muted);font-size:var(--font-small);margin:7px 0 18px}.yut-sticks{display:flex;justify-content:center;gap:7px;margin-bottom:25px}.yut-sticks span{width:27px;height:75px;padding-top:8px;background:var(--board-stick);color:var(--board-stick-text);border:2px solid var(--board-stick-edge);border-radius:12px;box-shadow:6px 8px 0 rgb(63 36 22 / .18);font-weight:900}.outcome-badge{width:112px;height:112px;margin:0 auto 22px;display:grid;place-content:center;background:var(--warning-bg);border:2px solid var(--accent);border-radius:50%}.outcome-badge small{font-size:var(--font-caption)}.outcome-badge strong{font:400 2rem/1 'Black Han Sans',sans-serif}.destination-list{display:grid;gap:7px;width:100%}.game-control details{border-top:1px solid var(--border);padding-top:12px}.game-control summary{cursor:pointer;font-weight:800}.game-control ol{margin:10px 0 0;padding-left:20px;color:var(--text-muted);font-size:var(--font-caption)}:root[data-theme='dark'] .yut-board{box-shadow:inset 0 0 0 3px var(--board-wood),0 25px 38px rgb(0 0 0 / .48)}


.piece-yard > small { font-size: var(--font-caption); line-height: 1.4; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-small); padding: 2px 4px; }


/* responsive.css */
@media(max-width:1180px){.utility-rail{display:none}
.game-layout{grid-template-columns:minmax(0,1fr) 290px}
.game-control{padding:15px}
.turn-console{min-height:300px}
.yut-board{border-width:14px}
.board-node{width:16px;height:16px}
.board-node.major{width:25px;height:25px}
}
@media(max-width:900px){
.recent-panel{grid-column:1/-1}
.game-layout{grid-template-columns:1fr}
.yut-board-wrap{padding:3% 8% 9%}
.game-control{max-width:620px;width:100%;margin:auto}
.game-topbar{position:sticky;top:0;z-index:15;background:var(--bg);padding:5px 0}
.profile-stats dl{grid-template-columns:1fr 1fr}
.item-grid{grid-template-columns:1fr}
.outcome-guide{grid-row:auto}
.shortcut-guide{grid-template-columns:150px 1fr}
.table-panel{overflow-x:auto}
.table-head,.table-row{min-width:650px}
}
@media(max-width:640px){.section-heading{display:block}
.section-heading h2{margin-top:6px}
.invite-field{grid-template-columns:1fr}
.profile-card{grid-row:auto}
.item-card{grid-template-columns:auto 1fr;padding:18px}
.item-card>:last-child{grid-column:1/-1;justify-self:stretch}
.item-symbol{width:64px;height:64px}
.setting-section{display:grid;padding:20px}
.segmented,.inline-form{width:100%}
.result-card{padding:26px 19px}
.result-card dl{grid-template-columns:1fr}
.result-card dl div{border-right:0;border-bottom:1px solid var(--border)}
.result-actions{display:grid}
.shortcut-guide{grid-template-columns:1fr}
.shortcut-guide .mini-board{width:160px;margin:auto}
.game-topbar{grid-template-columns:1fr auto}
.game-topbar>p{grid-row:2;grid-column:1/-1;justify-content:center}
.game-topbar>.button{font-size:var(--font-caption)}
.yut-board-wrap{padding:7% 5% 13%}
.yut-board{border-width:10px}
.board-node{width:12px;height:12px;border-width:2px}
.board-node.major{width:20px;height:20px;border-width:3px}
.game-piece{width:31px;height:38px;border-width:2px}
.yard-piece{width:18px;height:22px}
.yard-red{top:-12%}
.yard-blue{bottom:-12%}
.game-control{border-radius:var(--radius-large)}
.turn-console{min-height:270px}
.collection-note{align-items:flex-start}
}
@media(max-width:380px){.item-card{grid-template-columns:1fr}
.item-symbol{width:58px;height:58px}
.game-topbar{font-size:var(--font-caption)}
.game-piece{width:28px;height:34px}
.yut-sticks span{height:62px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
}


/* overrides.css */
.rank-emblem .icon{font-size:40px}
.segmented button.selected .icon{font-variation-settings:'FILL' 1}
.ranking-table{min-width:0;overflow-x:auto}

/* layout.css */
/* Fixed rail and centered content; ordinary document scroll. */
.app-shell { min-height:100dvh;display:flex; }
.main-column { width:calc(100% - var(--sidebar-width));margin-left:var(--sidebar-width);min-width:0; }
.sidebar { position:fixed;inset:0 auto 0 0;width:var(--sidebar-width);z-index:30;display:grid;grid-template-rows:64px minmax(0,1fr) auto;padding:0 var(--sidebar-inset);background:var(--sidebar-bg);color:var(--sidebar-text);box-shadow:inset -1px 0 var(--sidebar-border);overflow:hidden; }
.sidebar-header { display:flex;align-items:center;min-width:0;gap:4px; }
.sidebar-logo { display:flex;align-items:center;flex:1;min-width:0;height:64px;padding:12px 4px 12px 10px; }
.sidebar-logo .wordmark { font:750 20px/1.4 var(--font-family);letter-spacing:-.6px;white-space:nowrap; }
.sidebar-toggle { display:grid;place-items:center;flex:0 0 28px;width:28px;height:32px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--sidebar-muted); }
.sidebar-toggle:hover { background:var(--sidebar-hover);color:var(--sidebar-text); }
.sidebar-toggle svg { width:18px;height:18px;flex:none; }
.sidebar-toggle[aria-expanded='true'] svg { transform:rotate(180deg); }
.sidebar-navigation { min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;padding-top:12px;padding-bottom:12px;overscroll-behavior:contain; }
.sidebar-navigation::-webkit-scrollbar { display:none; }
.sidebar nav { display:grid;gap:4px; }
.nav-link { display:flex;align-items:center;gap:11px;min-height:42px;padding:8px 12px;border:0;border-radius:7px;font-size:15px;font-weight:500;line-height:1.5;color:var(--text-muted);background:transparent; }
.sidebar .nav-link { width:100%;min-height:var(--sidebar-row-height);padding:8px;font-size:14px;gap:12px;color:var(--sidebar-muted);white-space:nowrap; }
.nav-link .icon { width:24px;height:24px;display:inline-grid;place-items:center;flex:0 0 24px;font-size:24px;line-height:1; }
.nav-link:hover { background:var(--bg-subtle);color:var(--text); }
.sidebar .nav-link:hover { background:var(--sidebar-hover);color:var(--sidebar-text); }
.nav-link.active { background:var(--bg-subtle);color:var(--text); }
.sidebar .nav-link.active { background:var(--sidebar-active);color:var(--sidebar-text);font-weight:600; }
.sidebar .nav-link.active .icon { color:var(--accent-raw); }
.sidebar-more { margin-top:4px; }
.sidebar-more summary { list-style:none;cursor:pointer; }
.sidebar-more summary::-webkit-details-marker { display:none; }
.sidebar-more[open]>summary { background:var(--sidebar-hover);color:var(--sidebar-text); }
.sidebar-current:empty { display:none; }
.sidebar-current:not(:empty) { margin-top:4px; }
.sidebar-secondary { position:fixed;left:var(--sidebar-width);top:var(--sidebar-menu-top,64px);z-index:35;width:232px;max-width:calc(100vw - var(--sidebar-width) - 12px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:8px;background:var(--sidebar-bg);border:1px solid var(--sidebar-border);border-radius:0 7px 7px 0;box-shadow:var(--shadow);scrollbar-width:thin; }
.sidebar-more:not([open])>.sidebar-secondary { display:none; }
.sidebar-secondary .nav-link { min-height:40px;font-size:14px; }
.sidebar-bottom { min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-top:0;padding:0 0 12px;background:var(--sidebar-bg); }
.sidebar-account { min-width:0;width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:8px; }
.sidebar-bottom:not(.sidebar-bottom-member) .sidebar-account { margin-top:8px; }
.sidebar-profile { display:flex;align-items:center;gap:12px;min-width:0;width:100%;height:var(--sidebar-row-height);padding:8px;border-radius:7px;background:transparent;color:var(--sidebar-text); }
.sidebar-profile:hover,.sidebar-profile:focus-visible { background:var(--sidebar-hover);color:var(--sidebar-text); }
.sidebar-profile .avatar { width:24px;height:24px;flex:0 0 24px; }
.sidebar-profile strong { min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px; }
.sidebar-search-area { min-width:0;height:var(--sidebar-row-height); }
.sidebar-search { display:flex;align-items:center;gap:12px;height:var(--sidebar-row-height);min-height:var(--sidebar-row-height);width:100%;padding:6px;border:var(--control-stroke) solid transparent;border-radius:7px;background:transparent;color:var(--sidebar-muted);text-align:left;font-size:14px;list-style:none;cursor:pointer; }
.sidebar-search>.icon { width:24px;height:24px;font-size:24px;flex:0 0 24px; }
.sidebar-search::-webkit-details-marker { display:none; }
.sidebar-search-area:not([open])>.sidebar-search-content { display:none; }
.sidebar-search-area[open]>.sidebar-search { display:none; }
.sidebar-search-content { position:relative;height:var(--sidebar-row-height); }
.sidebar-search-input { position:relative;height:100%; }
.sidebar-search-input>.icon { position:absolute;left:8px;top:8px;width:24px;height:24px;font-size:24px;color:var(--sidebar-muted);pointer-events:none; }
.sidebar-search-input>button { position:absolute;right:4px;top:4px;display:grid;place-items:center;width:32px;height:32px;padding:4px;background:transparent;border:0;border-radius:5px;color:var(--sidebar-muted); }
.sidebar-search-input>button:hover { background:var(--sidebar-hover);color:var(--sidebar-text); }
.sidebar-search-input>button .icon { width:18px;height:18px;font-size:18px; }
.sidebar-search-suggestions { position:fixed;top:var(--search-panel-top,12px);left:var(--search-panel-left,8px);width:var(--search-panel-width);max-width:calc(100vw - 16px);max-height:var(--search-panel-max-height,300px);padding:10px 6px;background:var(--search-surface);color:var(--search-text);border:1px solid var(--search-border);border-radius:7px;box-shadow:var(--shadow);z-index:40; }
.sidebar-search-suggestions h2 { margin:0 6px 6px;font-size:13px;font-weight:700; }
.sidebar .sidebar-search-suggestions .nav-link { color:var(--search-text); }
.sidebar .sidebar-search-suggestions .nav-link:hover,.sidebar .sidebar-search-suggestions .nav-link.active { background:var(--search-hover);color:var(--search-text); }
.sidebar-search-content input { width:100%;height:var(--sidebar-row-height);min-height:var(--sidebar-row-height);padding:6px 34px 6px 42px;font-size:14px;background:var(--sidebar-hover);color:var(--sidebar-text);border-color:var(--sidebar-border); }
.sidebar-search-content input::-webkit-search-cancel-button { display:none; }
.sidebar-search-content .search-results { display:grid;gap:2px;max-height:min(252px,calc(var(--search-panel-max-height,300px) - 48px));overflow-y:auto;scrollbar-width:none; }
.sidebar-search-content .search-results::-webkit-scrollbar { display:none; }
.sidebar-search-content .nav-link { min-height:36px;font-size:13px;padding:6px 8px; }
.sidebar-search-content [hidden] { display:none; }
.sidebar-search-content p { color:var(--search-muted);font-size:13px;padding:8px; }
.sidebar nav.sidebar-shortcuts { display:flex;gap:4px;margin:0 2px 12px; }
.sidebar-shortcuts .nav-link { justify-content:center;flex:1;min-height:38px;padding:5px; }
.sidebar-search:hover { color:var(--sidebar-text);background:var(--sidebar-hover); }
.sidebar-account .button { min-height:38px;height:auto;font-size:14px; }
.sidebar-login { background:var(--sidebar-hover);color:var(--sidebar-text)!important;border-color:var(--sidebar-border); }
.sidebar-login:hover { background:var(--sidebar-active); }
@media (min-width:960px) {
  :root[data-theme='dark'] .sidebar-account .button.primary { background:var(--sidebar-hover);color:var(--sidebar-text);border-color:var(--sidebar-border); }
  :root[data-theme='dark'] .sidebar-account .button.primary:hover { background:var(--sidebar-active);border-color:var(--sidebar-border); }
}
.sidebar-tools { min-width:0;width:100%;margin-top:8px; }
.sidebar-icon-tools { min-width:0;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:0 4px; }
.sidebar-icon-tools a,.sidebar-icon-tools .nav-link,.sidebar-help>button { display:grid;place-items:center;min-width:0;width:100%;height:var(--sidebar-tool-size);min-height:var(--sidebar-tool-size);padding:5px;border:0;border-radius:7px;background:transparent;color:var(--sidebar-muted); }
.sidebar-icon-tools .icon,.sidebar-help>button .icon { width:20px;height:20px;font-size:20px;flex:none; }
.sidebar-icon-tools a:hover,.sidebar-icon-tools button:hover { background:var(--sidebar-hover);color:var(--sidebar-text); }
.sidebar-icon-tools button span:not(.icon),.sidebar-help>button span:not(.icon) { display:none; }
.sidebar-help { display:flex;align-items:center;justify-content:space-between; }
.sidebar-help>button { width:var(--sidebar-tool-size);flex:0 0 var(--sidebar-tool-size); }
.sidebar-help>a { font-size:13px; }
.sidebar .nav-link:focus-visible,.sidebar-toggle:focus-visible,.sidebar-profile:focus-visible { outline:2px solid var(--focus);outline-offset:-2px; }
.sidebar-language-panel { position:fixed;left:var(--sidebar-width);top:var(--language-panel-top,64px);z-index:40;width:232px;max-width:calc(100vw - var(--sidebar-width) - 12px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:12px;background:var(--sidebar-bg);color:var(--sidebar-text);border:1px solid var(--sidebar-border);border-radius:0 7px 7px 0;box-shadow:var(--shadow); }
.sidebar-language-panel[hidden] { display:none; }
.language-panel-heading { display:flex;align-items:center;justify-content:space-between;gap:8px; }
.language-panel-heading h2 { margin:0;font-size:16px; }
.language-panel-heading button { color:var(--sidebar-text);background:transparent; }
.sidebar-language-panel .language-choice { color:var(--sidebar-muted); }
.sidebar-language-panel .language-choice:hover { color:var(--sidebar-text);background:var(--sidebar-hover); }
.sidebar-language-panel .language-choice:disabled { color:var(--sidebar-muted);cursor:not-allowed;background:transparent; }
.language-choice:disabled>span:last-child { font-size:12px; }
.sidebar-collapsed .sidebar { width:var(--sidebar-collapsed-width);padding:0 8px; }
.sidebar-collapsed .main-column { width:calc(100% - var(--sidebar-collapsed-width));margin-left:var(--sidebar-collapsed-width); }
.sidebar-collapsed .sidebar-header { justify-content:center; }
.sidebar-collapsed .sidebar-logo,.sidebar-collapsed .sidebar .nav-link>span:not(.icon),.sidebar-collapsed .sidebar-profile strong,.sidebar-collapsed .sidebar-search>span:not(.icon) { display:none; }
.sidebar-collapsed .sidebar nav.sidebar-shortcuts { display:none; }
.sidebar-collapsed .sidebar .nav-link,.sidebar-collapsed .sidebar-search { justify-content:center;padding:8px 0; }
.sidebar-collapsed .sidebar-secondary { left:var(--sidebar-collapsed-width);max-width:calc(100vw - var(--sidebar-collapsed-width) - 12px); }
.sidebar-collapsed .sidebar-language-panel { left:var(--sidebar-collapsed-width);max-width:calc(100vw - var(--sidebar-collapsed-width) - 12px); }
.sidebar-collapsed .sidebar-secondary .nav-link { justify-content:flex-start;padding:8px 12px; }
.sidebar-collapsed .sidebar-secondary .nav-link>span:not(.icon) { display:inline; }
.sidebar-collapsed .sidebar-icon-tools { grid-template-columns:minmax(0,1fr);padding:0;justify-items:center; }
.sidebar-collapsed .sidebar-icon-tools>* { max-width:var(--sidebar-tool-size); }
.sidebar-collapsed .sidebar-search-area[open] .sidebar-search-content { position:fixed;left:calc(var(--sidebar-collapsed-width) + 8px);top:var(--search-input-top,12px);width:var(--search-panel-width);max-width:calc(100vw - var(--sidebar-collapsed-width) - 16px);z-index:40; }
.sidebar-collapsed .sidebar-search-area[open]>.sidebar-search { display:flex;background:var(--sidebar-active);color:var(--sidebar-text); }
.sidebar-collapsed .sidebar-profile { padding:0;justify-content:center; }
.sidebar-collapsed .sidebar-account .button { padding:8px 2px;font-size:11px;overflow-wrap:anywhere; }
.sidebar-collapsed .sidebar-bottom:not(.sidebar-bottom-member) .sidebar-account { display:none; }
.sidebar-collapsed .sidebar-help { flex-direction:column; }
.mobile-nav { display:none; }
@media(min-width:960px) and (max-width:1249.98px) {
  .sidebar-header { justify-content:center; }
  .sidebar-logo,.sidebar .nav-link>span:not(.icon),.sidebar-profile strong,.sidebar-search>span:not(.icon) { display:none; }
  .sidebar nav.sidebar-shortcuts { display:none; }
  .sidebar .nav-link,.sidebar-search { justify-content:center;padding:8px 0; }
  .sidebar-secondary .nav-link { justify-content:flex-start;padding:8px 12px; }
  .sidebar-secondary .nav-link>span:not(.icon) { display:inline; }
  .sidebar-icon-tools { grid-template-columns:minmax(0,1fr);padding:0;justify-items:center; }
  .sidebar-icon-tools>* { max-width:var(--sidebar-tool-size); }
  .sidebar-search-area[open] .sidebar-search-content { position:fixed;left:calc(var(--sidebar-width) + 8px);top:var(--search-input-top,12px);width:var(--search-panel-width);max-width:calc(100vw - var(--sidebar-width) - 16px);z-index:40; }
  .sidebar-search-area[open]>.sidebar-search { display:flex;background:var(--sidebar-active);color:var(--sidebar-text); }
  .sidebar .sidebar-search-suggestions .nav-link { justify-content:flex-start;padding:6px 8px; }
  .sidebar-search-suggestions .nav-link>span:not(.icon) { display:inline; }
  .sidebar-profile { padding:0;justify-content:center; }
  .sidebar-bottom:not(.sidebar-bottom-member) .sidebar-account { display:none; }
  .sidebar-help { flex-direction:column; }
}
@media(max-width:959.98px) {
  .main-column,.sidebar-collapsed .main-column { width:100%;margin-left:0; }
  .app-shell { padding:0 0 calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
  .sidebar { display:none; }
  .sidebar-language-panel,.sidebar-collapsed .sidebar-language-panel { left:auto;right:16px;width:232px;max-width:calc(100vw - 32px);border-radius:10px; }
  .mobile-nav { position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);height:calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--surface);border-top:1px solid var(--border); }
  .mobile-nav .nav-link { display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:var(--mobile-nav-height);padding:6px 2px;border-radius:0;font-size:12px; }
  .mobile-nav .nav-link.active { color:var(--accent-link);background:var(--bg-subtle);box-shadow:inset 0 3px var(--accent); }
}
.language-choice { margin-top:12px;justify-content:space-between; }
.language-choice[aria-pressed='true'] { border:2px solid var(--accent); }
.language-suggestion { display:none; }

/* page-layouts.css */
/* The only owner of outer page geometry and page-heading placement. */
.app-main { width:100%; max-width:var(--content-max); margin:0 auto; padding:16px var(--content-padding) 24px; min-height:100dvh; }
@media (min-width: 960px) { :root[data-theme='dark'] .app-main:has(>.game-home) { max-width:var(--content-home-max); } }
@media (min-width: 960px) { :root[data-theme='dark'] .app-main:has(>.play-hub) { max-width:1284px; } }
@media (min-width: 960px) { :root[data-theme='dark'] .route-game:not(.route-test) .app-main { max-width:1284px; } }
@media (min-width: 1200px) { :root[data-theme='dark'] .route-test .app-main { max-width:1284px; } }
.page-stack { display: grid; gap: var(--layout-gap); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--layout-gap); }
.page-stack > .page-header { margin-bottom: 0; }
.app-main:has(>.currency-float)>.page-stack>.page-header { padding-right:var(--currency-heading-reserve);min-height:40px; }
@media(min-width:960px) {
  :root[data-theme='dark'] .app-main:has(>.currency-float)>.member-page,
  :root[data-theme='dark'] .app-main:has(>.currency-float)>.pending-profile { padding-top:56px; }
}
.page-header h1 { font-size: var(--font-page-title); line-height: var(--line-heading); }
.page-description { color: var(--text-muted); font-size: var(--font-small); margin-top: var(--space-2); line-height: var(--line-body); }
.page-header-utility { display: flex; align-items: center; gap: var(--space-2); flex: 0 0 auto; }
.service-columns, .setup-grid, .two-column, .ranking-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--side-panel-width); gap: var(--layout-gap); align-items: start; }
.profile-grid, .learn-grid { display: grid; grid-template-columns: var(--side-panel-width) minmax(0, 1fr); gap: var(--layout-gap); align-items: start; }
.auth-layout { width: min(var(--auth-width), 100%); margin: var(--space-8) auto; }
.auth-card h1 { margin-bottom: var(--space-6); }
.auth-card form { display: grid; gap: var(--space-4); }
.auth-description { margin-bottom: var(--space-6); color: var(--text-muted); font-size: var(--font-small); }
.pending-auth-fields { display:grid; gap:var(--space-4); margin-top:4px; }
.pending-auth-fields > div { display:grid; gap:var(--space-2); }
.pending-auth .skeleton-block { background:var(--interactive-hover); }
.pending-auth-label { width:72px; height:20px; }
.pending-auth-fields .skeleton-control { height:48px; }
.pending-auth-button { height:50px; }
.pending-auth-switch { width:180px; height:16px; margin:28px auto 0; }
.site-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); color: var(--text-muted); font-size: var(--font-caption); }
.site-footer a, .site-footer button { display: inline-flex; align-items: center; min-height: var(--control-height); background: transparent; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.site-footer a:hover, .site-footer button:hover { color: var(--text); text-decoration: underline; }
@media (max-width: 959.98px) {
  .app-main:has(>.currency-float)>.page-stack>.page-header { padding-right:0; }
  :root { --panel-padding:16px; --layout-gap:16px; --control-height:44px; --control-height-small:44px; }
  .app-main { min-height: calc(100dvh - var(--mobile-nav-height)); }
  .app-shell.route-game { padding-bottom: 0; }
  .app-shell.route-game .mobile-nav { display: none; }
}
@media (max-width: 640px) {
  .service-columns, .setup-grid, .two-column, .ranking-layout, .profile-grid, .learn-grid { grid-template-columns: 1fr; }
  .page-header { flex-wrap: wrap; gap: var(--space-4); }
  .page-header-utility { max-width: 100%; }
  .auth-layout { margin: var(--space-4) auto; }
}

/* workspace.css */
.game-topbar .game-toolbar-actions{ justify-self: end; }
.game-navigation-trigger{ display: none; }









.play-workspace{ display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; padding: 18px; background: var(--bg-subtle); border-color: var(--border); }
.play-controls{ display: flex; flex-direction: column; align-self: center; }
.play-controls h2{ font-size: 1.1rem; margin-bottom: 12px; }
.match-kind{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.match-kind a{ display: grid; place-content: center; min-height: 44px; border: 1px solid var(--border); border-radius: var(--radius-small); background: var(--surface); font-weight:var(--weight-heading); font-size:var(--font-caption); }
.match-kind a:hover{ border-color: var(--text-muted); }
.match-kind .preferred{ border: 2px solid var(--accent); }
.match-access-note{ font-size:var(--font-caption); color: var(--text-muted); text-align: center; margin: 10px 0 18px; }
.play-shortcuts{ display: grid; gap: 8px; }
.play-shortcuts .button{ justify-content: flex-start; min-height: 48px; font-size:var(--font-small); }
.workspace-board{ min-width: 0; align-self: center; }
.workspace-board .board-artwork{ width: min(650px, 100%); margin: 0 auto; filter: drop-shadow(0 6px 4px rgb(58 36 27 / .12)); }
.workspace-board figcaption{ display: flex; justify-content: space-between; gap: 16px; padding: 12px 4px 0; color: var(--text-muted); font-size:var(--font-caption); }
.workspace-board figcaption span:first-child{ display: flex; align-items: center; gap: 5px; white-space: nowrap; }
.workspace-board figcaption .icon{ font-size: 16px; }
.account-summary{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 18px 0; padding: 14px 0; }
.account-summary div{ display: flex; justify-content: center; align-items: baseline; gap: 10px; border-right: 1px solid var(--border); }
.account-summary div:last-child{ border: 0; }
.account-summary dt{ color: var(--text-muted); font-size:var(--font-caption); }
.account-summary dd{ font-weight:var(--weight-heading); font-size: 1.15rem; }
.play-policy-note{ display: flex; gap: 8px; margin-top: 18px; color: var(--text-muted); font-size:var(--font-caption); }
.play-policy-note .icon{ font-size: 18px; margin-top: 2px; }
html[lang="en"] .skip-link > [lang="ko"],html[lang="en"] .boot-screen > [lang="ko"],html[lang="ko"] .skip-link > [lang="en"],html[lang="ko"] .boot-screen > [lang="en"]{ display: none; }
@media (max-width: 1180px){.play-workspace{ grid-template-columns: 230px minmax(0, 1fr); gap: 18px; }
.workspace-board figcaption{ flex-direction: column; gap: 4px; }
}
@media (max-width: 900px){.ranking-table .table-head,.ranking-table .table-row{ min-width: 0; grid-template-columns: 36px minmax(0, 1fr) 64px 36px; gap: 8px; padding: 14px 12px; }
.ranking-table .table-row > span:nth-child(2){ min-width: 0; overflow-wrap: anywhere; }
.game-navigation-trigger{ display: inline-grid; }
.play-workspace{ grid-template-columns: 240px minmax(0, 1fr); }
}
@media (max-width: 640px){.ranking-table{ padding: 8px; }
.ranking-table .table-head,.ranking-table .table-row{ grid-template-columns: 24px minmax(0, 1fr) 46px 24px; gap: 5px; padding: 14px 6px; font-size:var(--font-caption); }
.ranking-table .avatar{ display: none; }
.table-panel .table-head,.table-panel .table-row{ min-width: 0; grid-template-columns: 22px minmax(0, 1fr) 40px 22px 64px; gap: 5px; padding: 14px 10px; font-size:var(--font-caption); }
.table-panel .table-row > *{ min-width: 0; overflow-wrap: anywhere; }
.game-toolbar-actions{ gap: 6px !important; }
.game-toolbar-actions .button{ font-size:var(--font-caption); padding: 8px 10px; }
.play-workspace{ grid-template-columns: 1fr; }
.play-workspace{ padding: 16px; gap: 22px; }
.account-summary div{ display: grid; gap: 4px; text-align: center; }
}



/* home.css */
/* Feature composition only. Control, type and panel styles are shared. */
.profile-shortcut { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); font-size: var(--font-small); }
.profile-shortcut strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-account-panels { display: grid; gap: var(--layout-gap); }
.home-workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-6); align-items: center; }
.home-play-controls { min-width: 0; }
.home-play-controls h2 { margin-bottom: var(--space-4); }
.home-match-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
.home-match-modes button { min-height: var(--control-height); padding: var(--space-2); background: var(--surface-raised); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-small); font-size: var(--font-control); font-weight: var(--weight-label); }
.home-match-modes button:hover { background: var(--bg-subtle); }
.home-match-modes button[aria-pressed='true'] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.home-mode-description { min-height: 44px; margin: var(--space-3) 0; color: var(--text-muted); font-size: var(--font-small); }
.home-play-controls > .button + .button { margin-top: var(--space-2); }
.home-board-preview { min-width: 0; background: var(--board-stage); border-radius: var(--radius-small); padding: var(--space-2); }
.home-board-preview .board-artwork { width: 100%; height: auto; }
.home-play-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); grid-column: 1 / -1; padding-top: var(--space-4); border-top: 1px solid var(--border); }
.home-stats dl { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.home-stats dl > div { display: flex; justify-content: space-between; gap: var(--space-3); }
.home-stats dt { color: var(--text-muted); font-size: var(--font-small); }
.home-stats dd { font-weight: var(--weight-heading); }
.home-account-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); padding-top: var(--space-4); margin-top: var(--space-6); border-top: 1px solid var(--border); }
.home-account-links .button { justify-content: flex-start; padding-inline: var(--space-2); }
.welcome-table { display: grid; gap: var(--space-6); background: var(--surface); }
.welcome-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 280px)); justify-content: center; gap: var(--space-3); }
.welcome-access-note { text-align: center; margin-top: var(--space-3); color: var(--text-muted); font-size: var(--font-small); }
.welcome-board { background: var(--board-stage); border-radius: var(--radius-medium); padding: var(--space-6); }
.welcome-board .board-artwork { width: min(var(--welcome-art-width), 100%); height: auto; margin: 0 auto; }
.welcome-rules { display: flex; justify-content: center; }
@media (max-width: 1180px) { .home-workspace { grid-template-columns: 1fr; } .home-board-preview { width: min(440px, 100%); margin: 0 auto; } }
@media (max-width: 900px) {
  .home-play-shortcuts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-play-shortcuts .button { flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-1); font-size: var(--font-caption); }
}
@media (max-width: 640px) {
  .welcome-actions { grid-template-columns: 1fr; }
  .welcome-board { padding: var(--space-2); }
  .welcome-table { gap: var(--space-4); }
  .home-board-preview { width: min(360px, 100%); }
}

/* dialogs.css */
.modal {
  width: min(480px, calc(100% - 32px));
  max-width: calc(100% - 32px);
  max-height: calc(100dvh - 48px);
  padding: 24px;
  overflow: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-medium);
}
.modal > form, .modal .navigation-dialog-heading form { padding: 0; }
.modal h2 { font-size: 20px; font-weight: 700; line-height: 28px; letter-spacing: -.02em; }
.modal .navigation-dialog-heading { align-items: center; gap: 16px; margin-bottom: 16px; flex: 0 0 auto; }
.navigation-dialog-heading { display: flex; justify-content: space-between; }
.navigation-dialog nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); margin-bottom: var(--space-5); }
.navigation-dialog .nav-link { min-height: var(--control-height); font-size: var(--font-small); }
.dialog-close { width: 40px; height: 40px; min-width: 40px; border: 0; border-radius: var(--radius-small); color: var(--text-muted); }
.dialog-close:hover, .dialog-close:active { color: var(--text); background: var(--bg-subtle); }
.dialog-close .icon { font-size: 24px; }
.navigation-dialog > .button + .button { margin-top: 12px; }
.language-choice { min-height: 48px; font-size: 14px; font-weight: 600; }
@media (max-width: 640px) {
  .navigation-dialog nav { grid-template-columns: 1fr; }
  .modal { padding: 20px; max-height: calc(100dvh - 32px); }
  .dialog-close { width: 44px; height: 44px; min-width: 44px; }
  .modal > form > div { gap: 12px; }
}

/* functional.css */
/* Shared beta structure. Colors come from semantic theme tokens. */
.feature-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:16px; }
.feature-row,.row { display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 0;border-bottom:1px solid var(--border); }
.feature-row>div,.row>div { min-width:0;overflow-wrap:anywhere; }
.feature-actions,.actions { display:flex;gap:10px;flex-wrap:wrap; }
.panel,.page-stack { min-width:0;overflow-wrap:anywhere; }
input[type='checkbox'] { width:20px;height:20px;min-height:20px;display:inline-block;vertical-align:middle;accent-color:var(--accent); }
.form-error:empty { display:none; }
.player-popup { max-width:min(440px,calc(100vw - 32px)); }
.player-popup { padding:16px; }
.vs-screen { display:grid;gap:24px;text-align:center;padding:32px 16px; }
.vs-players { display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start; }
.sidebar-profile { overflow-wrap:anywhere; }
.beta-home-actions { display:grid;gap:12px; }
.beta-home-character { display:flex;gap:12px;align-items:center;flex-wrap:wrap; }
.reaction-bar { display:flex;gap:8px;flex-wrap:wrap; }
.reaction-message,[data-reactions]>p { border:1px solid var(--border);border-radius:var(--radius-small);padding:10px;background:var(--surface-raised); }
body,button,input,select,textarea,h1,h2,h3,.outcome-badge strong { font-family:var(--font-family); }
.button:hover,.icon-button:hover,.nav-link:hover { transform:none; }
.avatar { border-radius:50%; }
.wordmark { color:inherit; }
.sidebar-profile .avatar { border-radius:50%;background:var(--sidebar-hover);color:var(--sidebar-text);border-color:var(--sidebar-border); }
.button:not(.primary):not(.danger):not(.ghost) { color:var(--text); }
.sidebar .sidebar-login { color:var(--sidebar-text); }
select,textarea { max-width:100%;min-width:0;min-height:var(--control-height);padding:12px;border:1px solid var(--border-strong);border-radius:var(--radius-small);background:var(--surface-raised);color:var(--text);font:inherit; }
textarea { width:100%;resize:vertical; }
.panel>h2,.panel>h3 { margin-bottom:12px; }
.panel>p { margin-bottom:16px;color:var(--text-muted); }
.panel>p:last-child { margin-bottom:0; }
.row h2 { font-size:var(--font-body);margin:0; }
.row p { color:var(--text-muted);font-size:var(--font-small);margin-top:4px; }
.panel form { display:grid;gap:16px; }
details>summary { cursor:pointer;min-height:40px;display:flex;align-items:center;font-weight:600; }
.vs-players>div { min-width:0;overflow-wrap:anywhere; }
.result-panel { background:var(--surface); }
.language-suggestion { display:none; }
.avatar>.icon { font-size:1.1em;width:auto;height:auto; }
.avatar-small>.icon,.avatar-medium>.icon { font-size:20px; }
.avatar-framed { outline:2px double var(--accent-link);outline-offset:2px; }
.rank-badge { display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:6px 8px;border:1px solid var(--border-strong);border-radius:var(--radius-small);font-size:13px; }
.rank-badge>.icon { font-size:18px; }
.vs-player { display:flex;flex-direction:column;align-items:center;gap:10px; }
.vs-player>.character-art { width:min(140px,100%);height:auto; }
.vs-player .member-badges { justify-content:center;flex-wrap:wrap; }
.vs-player h3 { font-size:17px;line-height:24px;min-height:48px;display:grid;align-items:center; }
.vs-player .status-tag { font-size:12px;padding:4px; }
.vs-mark { font-size:24px;align-self:center; }
.player-popup>.avatar,.player-popup>.rank-badge { margin:12px 12px 12px 0;vertical-align:middle; }
.yut-tray .yut-stick.flat { background:var(--board-paper); }
.yut-tray .yut-stick.round { background:var(--board-stick);border-radius:12px; }
.yut-tray-unknown span { font-size:13px;color:var(--board-stick-text); }
.item-action-state:empty { display:none; }
.button.secondary:not(:disabled):not([aria-disabled='true']):active,.button.ghost:not(:disabled):not([aria-disabled='true']):active { background:var(--interactive-pressed); }
@media(max-width:640px) { .row .actions { width:100%; } .row .actions>.button { flex:1; } .feature-grid { gap:14px; } .vs-players { gap:8px; } }

/* brand-game.css */
/* Brand finish; outer page geometry remains owned by page-layouts.css. */
.button { font-weight:600;letter-spacing:normal; }
.button:focus-visible,.nav-link:focus-visible { outline:3px solid var(--focus);outline-offset:3px; }
.auth-switch a,.panel-heading a:hover { color:var(--accent-link); }
.home-account-strip { display:flex;align-items:center;gap:16px;flex-wrap:wrap;min-height:40px;padding-right:var(--currency-heading-reserve); }
.home-account-control { position:relative;min-width:0;z-index:25; }
.home-account { display:flex;align-items:center;gap:12px;min-width:0;min-height:40px;margin:-4px -6px;padding:4px 6px;border-radius:7px; }
.home-account:hover,.home-account:focus-visible { background:var(--interactive-hover); }
.home-profile-popover { display:none;position:absolute;top:100%;left:-6px;width:min(280px,calc(100vw - 2 * var(--content-padding)));padding-top:8px;z-index:25; }
.home-account-control:hover .home-profile-popover,.home-account-control:focus-within .home-profile-popover { display:block; }
.home-profile-card { display:grid;gap:12px;padding:16px;background:var(--surface-raised);border:var(--control-stroke) solid var(--border-strong);border-radius:var(--radius-medium);box-shadow:var(--shadow); }
.home-profile-card>strong { font-size:17px;line-height:1.3; }
.home-profile-card .member-badges { display:flex;flex-wrap:wrap;gap:4px; }
.home-profile-level { display:flex;justify-content:space-between;gap:12px;font-size:14px; }
.home-profile-level span:last-child { color:var(--text-muted); }
.home-account h1 { font-size:17px;line-height:20px;font-weight:800; }
.home-account small,.home-level small { color:var(--text-muted);font-size:var(--font-caption); }
.home-level { display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px; }
.progress-meter { height:10px;min-width:50px;width:100%;display:block;overflow:hidden;border-radius:5px;background:var(--border-strong); }
.progress-meter i { height:100%;display:block;background:var(--accent-raw);border-radius:5px; }
.home-level .progress-meter { width:132px; }
.home-utilities { margin-left:auto;display:flex;gap:8px;flex-wrap:wrap; }
.home-arena { display:grid;grid-template-columns:var(--home-control-width) minmax(0,1fr) var(--home-control-width);gap:var(--home-column-gap);padding:12px;background:var(--surface);border:var(--control-stroke) solid var(--border);border-radius:var(--radius-panel);overflow:hidden; }
@media(min-width:1181px) {
  :root[data-theme='dark'] .home-arena { grid-template-columns:repeat(3,minmax(0,1fr)); }
  :root[data-theme='dark'] .home-character .character-scene { height:auto;min-height:0;aspect-ratio:513/390; }
}
.home-arena>.panel { border:0;border-radius:0;padding:0; }
.home-start { display:flex;flex-direction:column;gap:12px; }
.home-start h2,.home-objectives h2,.home-activity h2 { font-size:17px;line-height:20px;margin:0; }
.home-start-button.button.large { min-height:var(--control-height-large);height:var(--control-height-large);display:grid;place-items:center;justify-content:center; }
.home-other-play { margin-top:12px; }
.home-rating { display:flex;align-items:end;gap:8px;margin-top:auto;border-top:var(--control-stroke) solid var(--border);padding-top:16px; }
.home-rating-status { display:grid;gap:4px;min-width:0; }
.home-rating small { color:var(--text-muted);font-size:13px; }
.home-rating-value { display:flex;align-items:center;gap:8px;min-height:24px; }
.home-rating-value>.icon { width:22px;height:22px;font-size:22px;line-height:1;color:var(--text-muted); }
.home-rating strong { font-size:18px;line-height:24px; }
.home-character { min-width:0;display:flex;flex-direction:column;justify-content:space-between;background:var(--surface); }
.home-character .character-scene { height:320px;flex:none; }
.character-scene { width:100%;display:block;flex:1;min-height:280px;overflow:hidden; }
.character-scene-illustration { position:relative;display:grid;place-items:end center;background:var(--scene-floor); }
.character-scene-illustration>.character-art { width:62%;max-width:300px;z-index:1;margin-bottom:16px; }
.character-scene-illustration::after { content:'';position:absolute;inset:0;z-index:2;background:url('/assets/room-reference.png') 57.34% 20.3% / 312.48% auto no-repeat;pointer-events:none; }
:root[data-theme='dark'] .home-character .character-scene-illustration::after { filter:saturate(.82); }
@media(min-width:960px) { :root[data-theme='dark'] .play-stage-art .character-scene-illustration::after { filter:saturate(.84) brightness(.94); } }
.home-wardrobe { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 8%;background:var(--surface);color:var(--text); }
.home-wardrobe>div { display:flex;gap:8px; }
.home-wardrobe .button { font-size:14px; }
.character-scene-code { position:relative;display:grid;place-items:end center;background:var(--scene-floor); }
.character-scene-code>.character-art { width:62%;max-width:300px;z-index:1;margin-bottom:16px; }
.folding-screen { position:absolute;inset:0 0 30%;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;background:var(--scene-frame);padding:12px; }
.folding-screen i { border:5px double var(--scene-trim);background:var(--scene-wall);transform:skewY(-5deg); }
.folding-screen i:nth-child(even) { transform:skewY(5deg); }
.home-objectives { display:grid;align-content:start;gap:10px; }
.home-objectives .panel-heading { gap:8px; }
.panel-heading .button.ghost { padding:6px;min-height:36px;font-size:13px;white-space:nowrap; }
.home-missions { display:grid;gap:0; }
.home-mission { display:flex;align-items:center;gap:10px;border:0;padding:12px 0; }
.home-mission+.home-mission { border-top:1px solid var(--border); }
.home-mission>.icon { flex:none;font-size:22px;color:var(--text-muted); }
.home-utilities .button { white-space:nowrap; }
.home-mission>div { min-width:0;flex:1; }
.home-mission h3 { font-size:14px;font-weight:600;margin-bottom:6px; }
.home-mission-meter { display:flex;align-items:center;gap:10px; }
.home-mission small { color:var(--text-muted);font-size:13px;white-space:nowrap; }
.home-pass { padding-top:18px;border-top:1px solid var(--border);display:grid;gap:12px; }
.home-pass-meter { display:flex;align-items:center;gap:14px; }
.home-pass-meter>.icon { font-size:26px;color:var(--text-muted); }
.home-pass-meter>div { flex:1;display:grid;gap:8px; }
.home-pass-meter small { color:var(--text-muted);font-size:13px; }
.home-activity { display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px; }
.home-activity>.panel { height:var(--home-activity-height);overflow-y:auto;scrollbar-width:thin; }
.home-empty { margin-top:12px;color:var(--text-muted);font-size:14px; }
@media(min-width:960px) {
  :root[data-theme='dark'] .home-start h2 { font-size:20px;line-height:24px; }
  :root[data-theme='dark'] .route-game .game-page { gap:8px;padding:12px; }
  :root[data-theme='dark'] .route-game .game-topbar { min-height:48px;padding:8px 12px; }
  :root[data-theme='dark'] .route-game [data-connection-status] { padding:4px 8px;font-size:12px; }
  :root[data-theme='dark'] .home-activity>.panel:has(>.home-empty-state) { display:flex;flex-direction:column; }
  :root[data-theme='dark'] .home-empty-state { flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;color:var(--text-muted);font-size:14px; }
  :root[data-theme='dark'] .home-empty-state .button { min-width:132px; }
}
.home-history-table { margin-top:16px; }
.home-history-table table { width:100%;border-collapse:collapse;font-size:14px; }
.home-history-table th { text-align:left;background:var(--surface-raised);color:var(--text-muted);font-weight:500;padding:8px; }
.home-history-table td { border-bottom:1px solid var(--border);padding:12px 8px; }
.home-history-table td>a { display:flex;align-items:center;gap:10px; }
.home-history-table td .icon { font-size:16px;vertical-align:middle;margin-right:4px; }
.history-win { color:var(--success);font-weight:700; }
.history-loss { color:var(--error);font-weight:700; }
.home-opponent { display:flex;align-items:center;gap:12px;border:1px solid var(--border);border-radius:var(--radius-small);padding:14px;margin-top:14px; }
.home-opponent>div { min-width:0;flex:1; }
.home-opponent h3 { font-size:16px; }
.home-opponent>h3 { flex:1;min-width:0; }
.home-opponent p { color:var(--text-muted);font-size:13px; }
.landing-welcome { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:center;min-height:400px;padding:32px; }
.landing-welcome h1 { font-size:40px;line-height:1.25;margin:0 0 12px; }
.landing-copy>p { color:var(--text-muted);margin:0 0 24px; }
.landing-actions { display:grid;gap:12px;max-width:380px; }
.landing-character { overflow:hidden;border-radius:var(--radius-medium);background:var(--scene-wall); }
.landing-character .character-scene { aspect-ratio:513/390;min-height:0; }
.character-art { width:100%;height:auto;display:block; }
.game-page { position:relative;padding:20px;border-radius:var(--radius-medium);background:var(--board-stage);isolation:isolate;overflow:hidden; }
.room-environment { position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none; }
.game-topbar { grid-template-columns:1fr auto 1fr;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-medium);padding:14px;margin:0; }
.game-topbar>div { justify-content:flex-end;flex-wrap:wrap; }
.game-topbar>p { font-size:14px; }
.game-topbar [data-turn-timer] { font-variant-numeric:tabular-nums; }
[data-connection-status] { color:var(--brand-cream);font-size:13px;background:var(--scene-frame);border-radius:var(--radius-small);padding:6px 10px;justify-self:start; }
.game-layout { grid-template-columns:minmax(0,1fr) 270px;gap:20px; }
.yut-board-wrap { padding:20px 24px 40px;perspective:1200px; }
.yut-board { width:100%;max-width:680px;transform:rotateX(9deg);border:18px solid var(--board-wood);border-radius:6px;background:var(--board-paper);box-shadow:inset 0 0 0 3px var(--board-wood-edge),0 12px 0 var(--board-wood-edge),0 18px 24px rgb(0 0 0 / .35);overflow:visible; }
.yut-board::before { background-image:none; }
.board-lines { inset:0;width:100%;height:100%; }
.board-lines path { stroke-width:.45; }
.board-node { width:18px;height:18px;border:2px solid var(--board-ink);background:var(--board-major); }
.board-node.major { width:25px;height:25px;border:3px solid var(--board-ink); }
.game-piece { width:60px;height:64px;background:transparent!important;transform:translate(-50%,-78%);border:0;border-radius:6px;box-shadow:none!important;animation:none!important;overflow:visible; }
.game-piece::before { display:none; }
.game-piece::after { content:'';position:absolute;left:10%;right:10%;bottom:2px;height:12px;border:3px solid var(--piece-team-color);border-radius:50%;background:var(--board-major);z-index:-1;box-shadow:0 4px 0 rgb(0 0 0 / .2); }
.game-piece.team-blue,.yard-piece.team-blue { --piece-team-color:var(--team-blue); }
.game-piece.team-red,.yard-piece.team-red { --piece-team-color:var(--team-red); }
.game-piece.team-red::after { border-style:double;border-width:5px; }
.game-piece .character-art { height:64px;width:68px;margin-left:-4px; }
.game-piece span { top:0;right:-3px;width:auto;min-width:24px;height:20px;padding:1px 3px;border:1px solid var(--board-ink);background:var(--board-major);color:var(--board-ink);font-size:11px;border-radius:4px; }
.game-piece.selectable { outline:2px dashed var(--board-ink);outline-offset:4px;cursor:pointer; }
.game-piece.selected { outline:3px solid var(--accent-raw);outline-offset:4px; }
.game-piece:disabled { opacity:1; }
.board-destination { position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);width:42px;height:42px;border:3px dashed var(--board-ink);border-radius:50%;background:var(--board-major);color:var(--board-ink);z-index:8;font-weight:700; }
.board-destination:hover { background:var(--board-node); }
.game-layout .feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.yard-panel { padding:14px; }
.yard-panel.current { border:2px solid var(--accent-raw); }
.yard-panel h2 { font-size:16px; }
.yard-panel>.player-strip { padding:0 0 12px;margin-bottom:12px;min-height:0; }
.yard-panel .player-strip strong { font-size:14px; }
.yard-piece { width:46px;height:52px;background:transparent!important;border:2px solid var(--piece-team-color);border-radius:6px;box-shadow:none;position:relative;animation:none; }
.yard-piece .character-art { width:100%;height:100%; }
.yard-piece>span { position:absolute;right:0;bottom:0;background:var(--surface);color:var(--text);border:1px solid var(--border);font-size:11px;padding:0 3px;border-radius:3px; }
.yard-piece:disabled { opacity:.7; }
.yard-piece.selected { outline:3px solid var(--accent-raw);outline-offset:2px; }
.team-badge { border-radius:50%;font-size:12px;flex:none; }
.team-badge.team-blue { color:var(--team-blue);background:var(--team-blue-soft); }
.team-badge.team-red { color:var(--team-red);background:var(--team-red-soft);border-style:double; }
.game-control { padding:18px; }
.game-control>.player-strip { padding:0 0 12px; }
.game-control .button.ghost { padding:6px 0;justify-content:flex-start; }
.turn-console { min-height:230px;padding:20px 0; }
.turn-console h2 { font-size:22px; }
.turn-console>.button.primary { min-height:56px;font-size:20px; }
.game-control>p { font-size:13px;color:var(--text-muted);margin-bottom:14px; }
.game-reaction-picker>summary { min-height:40px;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 10px;list-style:none;border:var(--control-stroke) solid var(--border-strong);border-radius:var(--radius-small);background:var(--surface-raised);color:var(--text);font-size:var(--font-small); }
.game-reaction-picker>summary::-webkit-details-marker { display:none; }
.game-reaction-picker>summary:hover { background:var(--interactive-hover); }
.game-reaction-picker>summary:focus-visible { outline:3px solid var(--focus);outline-offset:2px; }
.game-reaction-picker[open]>summary { border-color:var(--accent-raw); }
.reaction-toggle-glyph { width:22px;height:22px;display:inline-grid;place-items:center;border:2px solid currentColor;border-radius:50%;font:700 18px/1 sans-serif; }
.game-reaction-options { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px; }
.game-reaction-options .button { min-width:0;min-height:36px;padding:4px 6px;font-size:var(--font-small); }
.game-reaction-options .button>span { font-size:18px;line-height:1; }
.outcome-badge { border-radius:var(--radius-medium);width:100%;height:auto;min-height:100px;background:var(--bg-subtle);padding:14px;gap:4px; }
.outcome-badge strong { font-size:32px; }
.outcome-badge span { font-size:14px; }
.yut-tray { display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:120px;border:8px solid var(--board-wood-edge);border-radius:50%;background:var(--board-wood);margin-bottom:20px;box-shadow:0 6px 0 var(--board-wood-edge); }
.yut-tray i { display:grid;place-items:center;width:24px;height:70px;background:var(--board-stick);color:var(--board-stick-text);border:1px solid var(--board-stick-edge);border-radius:5px;transform:rotate(-20deg);font-style:normal;font-weight:700;box-shadow:3px 5px 0 rgb(0 0 0 / .2); }
.yut-tray i:nth-child(even) { transform:rotate(20deg); }
/* Desktop dark game controls and available pieces stay in one viewport at common laptop heights. */
@media(min-width:960px) {
  :root[data-theme='dark'] .route-game .game-topbar>strong { color:var(--text-muted);font-size:13px; }
  :root[data-theme='dark'] .route-game .game-topbar>p { justify-content:center;gap:4px;font-size:16px;white-space:nowrap; }
  :root[data-theme='dark'] .route-game .game-topbar>p strong { font-size:18px; }
  :root[data-theme='dark'] .route-game .game-topbar>p::before { content:'';width:11px;height:11px;flex:none;border:3px solid var(--team-blue);border-radius:50%; }
  :root[data-theme='dark'] .route-game .game-topbar[data-current-team='red']>p::before { border-color:var(--team-red);border-style:double; }
  :root[data-theme='dark'] .route-game .game-topbar [data-turn-timer] { font-size:16px; }
  :root[data-theme='dark'] .route-game .turn-timer.is-urgent { color:var(--warning);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px; }
  :root[data-theme='dark'] .route-game .yut-board-wrap { padding:4px 8px 14px; }
  :root[data-theme='dark'] .route-game .yut-board { width:min(100%,clamp(400px,calc(100dvh - 288px),620px)); }
  :root[data-theme='dark'] .route-game .game-layout .feature-grid { max-width:650px;margin:0 auto; }
  :root[data-theme='dark'] .route-game .yard-panel { padding:10px 12px; }
  :root[data-theme='dark'] .route-game .yard-panel>.player-strip { display:none; }
  :root[data-theme='dark'] .route-game .yard-panel h2 { font-size:14px; }
  :root[data-theme='dark'] .route-game .yard-panel .actions { margin-top:8px; }
  :root[data-theme='dark'] .route-game .game-control:has(.outcome-badge) .turn-console { padding:10px 0; }
  :root[data-theme='dark'] .route-game .game-control:has(.outcome-badge) .yut-tray { min-height:88px;margin-bottom:12px;border-width:6px; }
  :root[data-theme='dark'] .route-game .game-control:has(.outcome-badge) .yut-tray i { height:52px; }
  :root[data-theme='dark'] .route-game .game-control:has(.outcome-badge) .outcome-badge { min-height:76px;padding:8px;margin-bottom:12px; }
  :root[data-theme='dark'] .route-game .game-control:has(.outcome-badge) .outcome-badge strong { font-size:28px; }
}
@media(min-width:960px) and (max-height:800px) {
  :root[data-theme='dark'] .route-game .game-control { padding:12px 16px; }
  :root[data-theme='dark'] .route-game .game-control>.player-strip { min-height:52px;padding:5px 0; }
  :root[data-theme='dark'] .route-game .turn-console { min-height:190px;padding:8px 0; }
  :root[data-theme='dark'] .route-game .game-control .yut-tray { min-height:76px;margin-bottom:8px;border-width:5px; }
  :root[data-theme='dark'] .route-game .game-control .yut-tray i { height:46px; }
  :root[data-theme='dark'] .route-game .game-control .outcome-badge { min-height:64px;margin-bottom:8px; }
  :root[data-theme='dark'] .route-game .game-control details { padding-top:8px; }
  :root[data-theme='dark'] .route-game .game-reaction-options .button { min-height:32px; }
}
@media(max-width:1180px) { .home-arena { grid-template-columns:minmax(210px,.9fr) minmax(260px,1.3fr); } .home-objectives { grid-column:1/-1;grid-template-columns:1fr 1fr;align-items:start;border-top:1px solid var(--border)!important; } .home-objectives>.panel-heading,.home-objectives>.home-missions,.home-objectives>.button { grid-column:1; } .home-pass { grid-column:2;grid-row:1/4;border:0;border-left:1px solid var(--border);padding:0 0 0 24px;height:100%;align-content:start; } .game-layout { grid-template-columns:minmax(0,1fr) 250px; } }
@media(max-width:900px) { .home-utilities { width:100%;margin-left:0; } .home-account-strip { gap:12px; } .home-activity { grid-template-columns:1fr; } .game-page { padding:12px; } .game-layout { grid-template-columns:1fr; } .game-topbar { grid-template-columns:1fr;gap:8px; } .game-topbar>div { justify-content:space-between; } .game-control { display:grid;gap:14px; } .turn-console { min-height:0; } .yut-tray { max-width:300px;min-height:110px;margin:0 auto 16px; } .yut-board-wrap { padding:20px 22px 36px; } .game-piece { width:48px;height:52px; } .game-piece .character-art { height:52px;width:54px; } }
@media(max-width:640px) { .home-arena { grid-template-columns:1fr; } .home-start { order:0; } .home-character { order:1; } .home-character .character-scene { height:250px;min-height:0;flex:none; } .home-objectives { order:2;display:flex;flex-direction:column; } .home-objectives>*,.home-missions { width:100%; } .home-pass { padding:18px 0 0;border:0;border-top:1px solid var(--border);width:100%; } .home-arena>.panel { padding:4px; } .home-utilities .button { flex:1; } .home-level .progress-meter { width:100px; } .home-level small { display:none; } .home-history-table table { font-size:13px;table-layout:fixed; } .home-history-table th:first-child { width:44%; } .home-history-table td,.home-history-table th { padding:10px 4px; } .home-history-table .avatar { display:none; } .home-opponent { flex-wrap:wrap; } .home-opponent .button { width:100%; } .landing-welcome { grid-template-columns:1fr;min-height:0;padding:24px;gap:24px; } .landing-welcome h1 { font-size:34px; } .landing-character { order:-1; } .landing-character .character-scene { max-height:230px; } .game-layout .feature-grid { gap:8px; } .yard-panel { padding:10px; } .yard-panel .team-badge { display:none; } .yard-panel .player-strip strong { font-size:13px; } .yard-panel .player-strip small { font-size:12px; } .yard-piece { width:34px;height:42px; } .yard-panel .actions { gap:6px; } .game-piece { width:36px;height:42px; } .game-piece .character-art { width:42px;height:42px; } .game-piece span { font-size:10px;height:18px;min-width:20px; } .yut-board { border-width:10px; } .board-node { width:12px;height:12px;border-width:1.5px; } .board-node.major { width:17px;height:17px;border-width:2px; } .board-destination { width:32px;height:32px;border-width:2px; } .game-page { padding:8px; } .yut-board-wrap { padding:22px 8px 30px; } }
@media(prefers-reduced-motion:reduce) { .game-piece,.yard-piece { animation:none; } }
@media(max-width:640px) {
  .home-utilities { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .home-utilities .button { font-size:13px;padding:10px 8px;gap:5px; }
  .home-utilities .button:last-child { grid-column:1/-1; }
  .home-character .character-scene { height:210px; }
  .home-rating { margin-top:4px;padding-top:16px; }
  .yard-panel .player-strip { gap:4px; }
  .yard-panel .player-strip small { font-size:11px; }
  .game-layout { display:flex;flex-direction:column; }
  .game-layout>div { display:contents; }
  .game-layout .yut-board-wrap { order:0;width:100%;flex:none; }
  .game-layout .game-control { order:1;width:100%; }
  .game-layout .feature-grid { order:2;width:100%;display:grid; }
  .game-control>.player-strip { display:none; }
  .game-control .yut-tray { min-height:88px;max-width:240px;margin-bottom:12px;border-width:5px; }
  .game-control .yut-tray i { height:50px;width:20px; }
  .game-control .turn-console { padding:0; }
  .game-control .outcome-badge { min-height:56px;padding:8px;margin-bottom:12px; }
  .game-control .outcome-badge strong { font-size:24px; }
  .game-control .turn-console h2 { font-size:18px; }
  .game-control .turn-console>p { margin:6px 0 12px; }
  .yard-piece { width:44px;height:44px; }
}
@media(max-width:959.98px) { .home-account-strip { padding-right:0; } }

/* collection.css */
.inventory-page { max-width:var(--content-max);margin-inline:auto; }
.inventory-group { min-width:0;display:grid;gap:12px; }
.inventory-group + .inventory-group { margin-top:12px; }
.inventory-group-heading { display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--border);padding:0 0 9px; }
.inventory-group-heading h2 { margin:0;font-size:var(--font-section-title); }
.inventory-group-heading span { color:var(--text-muted);font-size:var(--font-small);font-variant-numeric:tabular-nums; }
.inventory-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:16px;align-items:stretch; }
.inventory-card { display:flex;flex-direction:column;gap:0;padding:12px;min-width:0; }
.inventory-card.equipped { border-color:var(--accent-raw); }
.collection-art { display:grid;place-items:center;height:124px;margin-bottom:12px;background:var(--bg-subtle);border-radius:var(--radius-small);overflow:hidden; }
.collection-art>.character-art { width:132px;max-height:116px; }
.collection-art>.icon { font-size:44px;color:var(--text-muted); }
.inventory-card-heading { display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-width:0; }
.inventory-card-heading h2,.inventory-card-heading h3 { margin:0;font-size:16px;line-height:1.35;min-width:0; }
.inventory-status { flex:none;color:var(--text-muted);font-size:var(--font-caption);font-weight:var(--weight-label); }
.inventory-card.equipped .inventory-status { color:var(--text); }
.inventory-type,.inventory-source { color:var(--text-muted);font-size:var(--font-caption);line-height:1.4;margin:4px 0 0; }
.inventory-source { margin-top:12px; }
.inventory-price { display:flex;align-items:center;gap:4px;margin:12px 0 0;font-size:var(--font-small); }
.inventory-price .icon { font-size:18px; }
.inventory-price strong { font-variant-numeric:tabular-nums; }
.inventory-price span { color:var(--text-muted); }
.inventory-card-action { display:grid;align-content:end;gap:4px;min-height:38px;margin-top:auto;padding-top:12px; }
.inventory-card-action .button { width:100%; }
.inventory-card-action .item-action-state { margin:0;color:var(--text-muted);font-size:var(--font-caption); }

/* currency-pass.css */
/* A compact floating balance, not a page-wide service header. */
.currency-float { position:sticky;top:12px;z-index:24;width:fit-content;max-width:100%;height:0;margin:0 0 0 auto; }
.currency-float>summary { position:absolute;right:0;top:0;display:flex;gap:0;width:var(--currency-summary-width);min-height:40px;padding:0;list-style:none;background:var(--surface-raised);border:var(--control-stroke) solid var(--border-strong);border-radius:999px;box-shadow:var(--shadow-small); }
.currency-float>summary::-webkit-details-marker { display:none; }
.currency-float>summary:hover { border-color:var(--text-muted); }
.currency-balance { display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 4px;min-width:0;flex:1 1 0; }
.currency-balance+.currency-balance { border-left:var(--control-stroke) solid var(--border); }
.currency-balance strong { font-size:14px;font-variant-numeric:tabular-nums;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.currency-balance .icon { font-size:20px; }
.currency-popover { position:absolute;top:48px;right:0;width:320px;max-width:calc(100vw - 32px);padding:16px;background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:var(--radius-medium);box-shadow:var(--shadow);max-height:calc(100dvh - 100px);overflow:auto; }
.route-game .currency-float { height:40px;margin-bottom:16px; }
.currency-float:not([open])>.currency-popover { display:none; }
.currency-popover h2 { font-size:18px; }
.currency-description { display:flex;gap:12px;margin:16px 0; }
.currency-description h3 { display:flex;flex-wrap:wrap;gap:8px;font-size:14px; }
.currency-description p { color:var(--text-muted);font-size:13px;line-height:1.6;margin-top:4px; }
.pass-summary { display:flex;align-items:center;flex-wrap:wrap;gap:16px; }
.pass-summary>div:first-child { flex:1;min-width:200px; }
.pass-overall { flex:1 0 100%;display:grid;gap:8px; }
.pass-overall>div:first-child { display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap; }
.pass-overall span,.pass-overall small { color:var(--text-muted);font-size:13px; }
.pass-track-toolbar { display:flex;align-items:center;justify-content:flex-end; }
.pass-scroll-controls { display:flex;gap:6px; }
.pass-scroll-controls .button { width:36px;min-width:36px;min-height:36px;padding:4px; }
.pass-scroll-controls [data-direction='-1'] .icon { transform:rotate(180deg); }
.pass-board { --pass-card-height:224px;--pass-line-height:64px;display:grid;grid-template-columns:116px minmax(0,1fr);border:1px solid var(--border);border-radius:var(--radius-medium);background:var(--bg-subtle);overflow:hidden; }
.pass-track-labels { display:grid;grid-template-rows:var(--pass-card-height) var(--pass-line-height) var(--pass-card-height);padding:16px 8px;background:var(--surface);border-right:1px solid var(--border);text-align:center; }
.pass-track-labels>div { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; }
.pass-track-labels h2 { font-size:15px; }
.pass-track-labels small { color:var(--text-muted);font-size:12px; }
.pass-track-labels .icon { font-size:32px; }
.pass-track-labels>div:first-child .icon { color:var(--accent-link); }
.pass-scroll { min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) var(--bg-subtle);padding:16px; }
.pass-scroll:focus-visible { outline:3px solid var(--focus);outline-offset:-3px; }
.pass-rail { display:flex;gap:12px;width:max-content; }
.pass-step { flex:0 0 172px;width:172px;display:grid;grid-template-rows:var(--pass-card-height) var(--pass-line-height) var(--pass-card-height); }
.pass-reward-card { display:flex;flex-direction:column;gap:12px;min-width:0;padding:12px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--radius-small); }
.pass-reward-card.premium { border-top:3px solid var(--accent-raw); }
.pass-reward-card.claimable { border:2px solid var(--accent-link); }
.pass-reward-card.claimed { border-color:var(--success); }
.pass-reward-status { display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--text-muted); }
.pass-reward-status>.icon { font-size:18px; }
.claimed .pass-reward-status { color:var(--success); }
.claimable .pass-reward-status { color:var(--accent-link);font-weight:700; }
.pass-reward-preview { flex:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;min-height:0;overflow:auto;padding:8px 4px;border:0;border-radius:var(--radius-small);background:var(--bg-subtle); }
.pass-reward-preview:hover { background:var(--surface-raised);outline:1px solid var(--border-strong); }
.pass-reward-item { display:grid;justify-items:center;text-align:center;gap:8px; }
.pass-reward-item>.icon { font-size:46px;color:var(--text); }
.pass-reward-item>.character-art { width:76px; }
.pass-reward-item strong { font-size:13px;line-height:1.4; }
.pass-reward-item b { display:block;font-size:20px; }
.pass-reward-card.locked .pass-reward-preview { background:var(--surface); }
.pass-reward-card.locked .pass-reward-item>.icon { color:var(--text-muted); }
.pass-reward-card.locked .pass-reward-item>.character-art { filter:grayscale(1); }
.pass-reward-card .button { font-size:13px;padding:6px 8px; }
.pass-milestone { position:relative;display:grid;place-content:center;justify-items:center;gap:2px; }
.pass-milestone:before { content:'';position:absolute;left:-12px;right:-12px;top:24px;height:3px;background:var(--border-strong); }
.pass-milestone.reached:before { background:var(--accent-raw); }
.pass-milestone>strong { position:relative;display:grid;place-items:center;min-width:32px;height:32px;background:var(--surface);border:2px solid var(--border-strong);border-radius:var(--radius-small);font-size:14px; }
.pass-milestone.reached>strong { border-color:var(--accent-link); }
.pass-milestone>small { position:relative;color:var(--text-muted);font-size:12px;background:var(--bg-subtle);padding:0 4px; }
.pass-reward-detail { display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:20px;margin-bottom:16px;background:var(--bg-subtle);border-radius:var(--radius-small); }
.pass-reward-dialog>p { font-size:14px;color:var(--text-muted);margin:8px 0; }
.pending-season-name { width:72px;height:21px;margin-top:var(--space-2); }
.pending-season .pass-summary>div:first-child { min-height:24px; }
.pending-season .pass-summary .button:disabled { opacity:1; }
.pending-season .pass-overall { min-height:69px; }
.pending-season .pending-pass-line { display:block;width:120px;max-width:80%;height:12px;border-radius:var(--radius-small);background:var(--interactive-hover); }
.pending-season .pending-pass-line.short { width:64px; }
.pending-season .pass-scroll { overflow:hidden; }
.pending-season .pending-pass-card { align-items:center;justify-content:center;gap:18px; }
.pending-season .pending-pass-card.premium { border-top-color:var(--border-strong); }
.pending-season .pending-pass-symbol { display:block;width:42px;height:42px;border-radius:var(--radius-small);background:var(--interactive-hover); }
.pending-season .pending-pass-milestone>span { position:relative;display:block;width:32px;height:32px;border:2px solid var(--border-strong);border-radius:var(--radius-small);background:var(--surface); }
@media (min-width:960px) {
 :root[data-theme='dark'] .pass-board { --pass-card-height:192px;--pass-line-height:58px; }
 :root[data-theme='dark'] .pass-reward-card { padding:10px;gap:6px; }
 :root[data-theme='dark'] .pass-reward-item { gap:6px; }
 :root[data-theme='dark'] .pass-reward-item>.icon { font-size:40px; }
 :root[data-theme='dark'] .pass-reward-preview { padding-block:6px; }
 :root[data-theme='dark'] .pass-reward-card.locked { border-color:var(--border); }
 :root[data-theme='dark'] .pass-reward-card.locked .pass-reward-item strong { color:var(--text-muted); }
 :root[data-theme='dark'] .pass-reward-card.locked .pass-reward-preview:hover { background:var(--interactive-hover);outline:2px solid var(--border-strong); }
 :root[data-theme='dark'] .pass-reward-card.premium.locked { border-top-color:var(--border-strong); }
 :root[data-theme='dark'] .pass-reward-card.premium.claimed { border-top-color:var(--success); }
 :root[data-theme='dark'] .pass-step.next .pass-milestone>strong { border-color:var(--accent-raw); }
 :root[data-theme='dark'] .pass-step.next .pass-milestone>small { color:var(--text);font-weight:700; }
}
@media (max-width:959.98px) {
 .currency-float { top:8px;height:44px;margin-bottom:16px; }
 .currency-float>summary { position:static;min-height:44px; }
 .currency-balance { padding:10px 6px;gap:4px;min-width:0; }
 .pass-board { --pass-card-height:224px;grid-template-columns:76px minmax(0,1fr); }
 .pass-track-labels { padding:12px 4px; }
 .pass-track-labels h2 { font-size:13px; }
 .pass-track-labels small { font-size:12px; }
 .pass-scroll { padding:12px; }
 .pass-step { width:156px;flex-basis:156px; }
 .pass-reward-card { padding:10px;gap:8px; }
 .pass-reward-card .button { min-height:44px; }
}
@media (max-width:360px) {
 .currency-balance { padding:10px 6px;min-width:0; }
 .currency-balance strong { font-size:13px; }
}

/* account-views.css */
/* Page-specific structures measured from the reference; no service data here. */
.play-hub { display:grid;gap:16px;max-width:960px;margin:0 auto; }
@media(min-width:960px) {
  :root[data-theme='dark'] .play-hub { max-width:1252px;align-content:start; }
  :root[data-theme='dark'] .play-stage { grid-template-columns:minmax(0,720fr) minmax(0,500fr);align-items:start;gap:24px;min-height:0;overflow:visible;background:transparent;border:0; }
  :root[data-theme='dark'] .play-stage-art { aspect-ratio:513/390;overflow:hidden;border:var(--control-stroke) solid var(--border);border-radius:var(--radius-medium); }
  :root[data-theme='dark'] .play-options { justify-content:flex-start;padding:24px;border:var(--control-stroke) solid var(--border);border-radius:var(--radius-medium); }
}
.play-hub>.page-header { align-items:center;min-height:40px;padding-right:var(--currency-heading-reserve);margin:0; }
.play-hub>.page-header h1 { font-size:26px; }
.play-stage { display:grid;grid-template-columns:minmax(0,42%) minmax(0,58%);min-height:368px;overflow:hidden;background:var(--surface);border:var(--control-stroke) solid var(--border);border-radius:var(--radius-medium); }
.play-stage-art { min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--scene-floor); }
.play-stage-art .character-scene { width:100%;height:100%;min-height:0; }
.play-stage-art .character-scene-illustration { flex:none;width:auto;min-width:100%;height:100%;aspect-ratio:513/390; }
.play-options { min-width:0;display:flex;flex-direction:column;justify-content:center;padding:28px 32px;border:0;background:var(--surface); }
.play-options h2 { margin-bottom:18px;font-size:17px;line-height:22px; }
.play-mode-options { display:grid;gap:10px; }
.play-option { width:100%;display:grid;grid-template-columns:32px minmax(0,1fr) 20px;align-items:center;gap:16px;min-height:var(--play-option-height);padding:14px 18px;border:var(--control-stroke) solid var(--border-strong);border-radius:var(--radius-medium);background:var(--surface-raised);text-align:left;color:var(--text);cursor:pointer; }
.play-option-primary { border-color:var(--action-outline);background:var(--action-fill);color:var(--action-text);box-shadow:var(--button-raised); }
.play-option-primary { grid-template-columns:1fr;text-align:center; }
.play-option-primary .play-option-copy { justify-items:center; }
.play-option:hover { background:var(--interactive-hover);border-color:var(--text-muted); }
.play-option-primary:hover { background:var(--action-hover);border-color:var(--action-outline);box-shadow:var(--button-highlight); }
.play-option:active { background:var(--interactive-pressed); }
.play-option-primary:active { background:var(--action-hover);box-shadow:var(--button-pressed); }
:root[data-theme='dark'] .play-option-primary,
:root[data-theme='dark'] .play-option-primary:hover,
:root[data-theme='dark'] .play-option-primary:active { box-shadow:none; }
.play-option:focus-visible { outline:3px solid var(--focus);outline-offset:2px; }
.play-option>.icon:first-child { width:32px;font-size:30px;color:var(--action-text); }
.play-option:not(.play-option-primary)>.icon:first-child { color:var(--text); }
.play-option>.icon:last-child { font-size:20px;color:var(--text-muted); }
.play-option-copy { display:grid;min-width:0;gap:2px; }
.play-option-title { font-size:var(--play-option-title);font-weight:700;line-height:25px; }
.play-option-description { font-size:13px;color:var(--text-muted);line-height:19px; }
.play-option-primary .play-option-description { color:var(--action-text); }
.play-options-footer { display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:16px;border-top:var(--control-stroke) solid var(--border); }
.play-options-footer .button { min-height:36px; }
.friend-play-page { max-width:560px;margin:0 auto; }
.friend-play-panel { display:grid;gap:24px;padding:24px; }
.friend-invite-section,.friend-join-section,.friend-join-section form { display:grid;gap:12px; }
.friend-invite-section h2,.friend-join-section h2 { font-size:18px;line-height:24px; }
.friend-invite-actions { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px; }
.friend-invite-divider { height:1px;background:var(--border); }
.friend-contacts { display:grid;gap:8px;padding-top:18px;border-top:var(--control-stroke) solid var(--border); }
.friend-contacts .panel-heading h2 { margin:0;font-size:18px;line-height:24px; }
.friend-contacts .friend-row { flex-wrap:nowrap;padding:10px 0; }
.friend-contacts .friend-row:last-child { border-bottom:0; }
.friend-contacts-empty { display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--text-muted);font-size:14px; }
.friend-join-section .form-error { margin:0; }
@media(min-width:960px) { :root[data-theme='dark'] .friend-play-page { min-height:0;align-content:start;padding-top:clamp(24px,4vh,48px); } }
.matchmaking-state { width:min(680px,100%);min-height:calc(100dvh - 32px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;margin:0 auto;padding:24px 0 68px; }
.matchmaking-heading { text-align:center; }
.matchmaking-mode { color:var(--text-muted);font-size:13px;font-weight:700; }
.matchmaking-state h1 { margin-top:6px;font-size:24px;line-height:32px; }
.matchmaking-search-progress { width:min(280px,100%);height:4px;overflow:hidden;background:var(--border);border-radius:2px; }
.matchmaking-search-progress>span { width:40%;height:100%;display:block;background:var(--accent-raw);border-radius:2px;animation:matchmaking-search 1.8s ease-in-out infinite alternate; }
@keyframes matchmaking-search { from { transform:translateX(0); } to { transform:translateX(150%); } }
.matchmaking-players { width:100%;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:12px;align-items:center; }
.matchmaking-player { min-width:0;min-height:160px;display:grid;justify-items:center;align-content:center;gap:6px;padding:16px 8px;background:var(--surface);border:var(--control-stroke) solid var(--border);border-radius:var(--radius-medium); }
.matchmaking-player>.avatar,.matchmaking-search-icon { width:44px;height:44px;display:grid;place-items:center;border-radius:50%; }
.matchmaking-search-icon { background:var(--bg-subtle);color:var(--text-muted);font-size:27px; }
.matchmaking-player strong { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px; }
.matchmaking-player small { display:flex;align-items:center;gap:6px;color:var(--text-muted);font-size:13px; }
.matchmaking-versus { text-align:center;color:var(--text-muted);font-size:16px;font-weight:800; }
.matchmaking-cancel { min-width:144px; }
@media(prefers-reduced-motion:reduce) { .matchmaking-search-progress>span { animation:none; } }
.member-header { display:flex;align-items:center;gap:24px;min-height:160px;padding:24px; }
.member-header>.avatar { width:112px;height:112px;font-size:36px; }
.member-identity { display:grid;gap:8px;flex:1;min-width:0; }
.member-identity h1 { font-size:28px;line-height:32px; }
.member-identity p,.member-identity small { color:var(--text-muted); }
.member-meta { display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;color:var(--text-muted);font-size:13px; }
.member-meta a { color:var(--text);text-decoration:underline;text-underline-offset:3px; }
.member-meta a:hover { color:var(--accent-link); }
.member-header>.button { align-self:start;margin-top:32px; }
.member-badges { display:flex;flex-wrap:wrap;gap:8px; }
.page-tabs { display:flex;gap:16px;align-items:center;border-bottom:1px solid var(--border); }
.page-tabs>button { padding:12px;min-height:48px;border:0;border-radius:0;background:transparent;color:var(--text-muted);font-size:14px;transition:color .15s,background .15s,box-shadow .15s; }
.page-tabs>button:hover { color:var(--text);background:var(--bg-subtle); }
.page-tabs>button[aria-selected='true'] { color:var(--text);box-shadow:inset 0 -3px 0 var(--accent-raw); }
.page-tabs>button:focus-visible { outline:2px solid var(--focus);outline-offset:-2px; }
[data-tab-panel][hidden],[data-history-row][hidden],[data-history-empty][hidden] { display:none; }
.member-stats dl { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:16px 0 0; }
.member-stats dt { color:var(--text-muted);font-size:13px; }
.member-stats dd { font-size:22px;font-weight:700;margin:8px 0 0; }
@media(min-width:960px) {
 :root[data-theme='dark'] .member-overview-layout { grid-template-columns:minmax(0,1fr) 280px;align-items:start; }
 :root[data-theme='dark'] .member-overview-side { grid-column:2;grid-row:1; }
 :root[data-theme='dark'] .member-recent-matches { grid-column:1;grid-row:1;min-height:260px; }
 :root[data-theme='dark'] .member-overview-side:not(:has(.member-recent-opponents))>.member-stats { min-height:260px; }
 :root[data-theme='dark'] .member-stats dl { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px; }
 :root[data-theme='dark'] .member-stats dd { font-size:19px; }
}
.member-recent-opponents h2 { font-size:var(--font-section-title); }
.member-opponents-list { display:grid;gap:4px;margin-top:12px; }
.member-opponents-list>a,.member-opponents-list>div { display:flex;align-items:center;gap:10px;min-width:0;min-height:40px;padding:4px;border-radius:var(--radius-small);font-size:14px; }
.member-opponents-list>a:hover { background:var(--interactive-hover); }
.member-opponents-list [data-user-content] { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.match-history { margin-top:16px; }
.history-toolbar { display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:16px; }
.history-modes .button[aria-pressed='true'] { color:var(--text);background:var(--surface-raised);border-color:var(--border-strong);box-shadow:inset 0 -3px 0 var(--accent-raw); }
.history-modes .button[aria-pressed='true']:not(:disabled):not([aria-disabled='true']):hover { background:var(--interactive-hover);box-shadow:inset 0 -3px 0 var(--accent-raw); }
.history-toolbar>label { margin-left:auto;max-width:240px; }
.history-toolbar>small { color:var(--text-muted); }
.history-modes { display:flex;gap:8px; }
.history-table { min-width:0; }
.history-table table { width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px; }
.history-table th { text-align:left;padding:8px;color:var(--text-muted);font-weight:400;border-bottom:1px solid var(--border); }
.history-table th:first-child { width:35%; }
.history-table th:nth-child(4) { width:8%; }
.history-table th:nth-child(5) { width:22%; }
.history-table td { padding:12px 8px;border-bottom:1px solid var(--border);overflow-wrap:anywhere; }
.history-table td:first-child>a { display:flex;align-items:center;gap:12px; }
.history-table tr:hover { background:var(--bg-subtle); }
.history-table td:last-child { text-align:right; }
.history-table .result-mark { width:28px;height:28px;font-size:13px; }
.history-empty { padding:24px;text-align:center;color:var(--text-muted); }
.friends-page .friend-search-form { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px; }
@media(min-width:960px) { :root[data-theme='dark'] .friends-page .friend-search-form { width:min(100%,var(--friend-search-max-width));grid-template-columns:minmax(0,1fr) 80px; } }
.friend-search-form .form-error { grid-column:1/-1; }
.friends-hub .friends-list-section { margin-top:18px;padding-top:16px;border-top:var(--control-stroke) solid var(--border); }
.friends-list-section h2 { font-size:var(--font-section-title); }
.friend-search-results { margin-top:24px; }
.friend-search-results h2 { font-size:17px; }
.friend-identity { display:flex;align-items:center;gap:16px;min-width:0; }
.friend-row .actions { margin-left:auto; }
.friend-row .button { min-height:32px;padding:2px 12px;font-size:14px;border-radius:var(--button-radius-small); }
.friend-blocks { padding-top:4px;padding-bottom:4px; }
.settings-layout { display:grid;grid-template-columns:192px minmax(0,1fr);gap:24px;align-items:start; }
.settings-layout>.page-tabs { display:grid;gap:4px;border:0; }
.settings-layout>.page-tabs>button { width:100%;text-align:left;min-height:40px;padding:8px 16px;border:0;border-radius:var(--radius-small); }
.settings-layout>.page-tabs>button[aria-selected='true'] { background:var(--surface);box-shadow:inset 3px 0 var(--accent-raw); }
.settings-layout .panel form { max-width:480px; }
.settings-profile-cosmetics { margin-top:16px;padding-top:16px;border-top:1px solid var(--border); }
.checkbox-label { display:flex;align-items:center;gap:12px; }
.ranking-table .table-row>span:nth-child(2) { display:flex;align-items:center;gap:12px;min-width:0; }
.ranking-table .table-row:hover { background:var(--bg-subtle); }
.ranking-table .table-row.current-user { background:var(--bg-subtle);border-left:0;box-shadow:inset 3px 0 var(--accent-raw); }
@media(min-width:960px) {
  :root[data-theme='dark'] .ranking-table .table-row { min-height:58px;padding-block:8px; }
  :root[data-theme='dark'] .ranking-table .table-row:hover { background:var(--interactive-hover); }
  :root[data-theme='dark'] .ranking-table .table-row.current-user { background:var(--surface-raised); }
  :root[data-theme='dark'] .ranking-table .table-row.current-user:hover { background:var(--interactive-hover); }
}
.ranking-player-identity { min-width:0;display:grid;gap:2px; }
.ranking-player-identity>strong { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--font-body); }
.ranking-player-identity>small { color:var(--text-muted);font-size:var(--font-caption); }
.ranking-empty { min-height:128px;display:flex;align-items:center;justify-content:center;gap:16px;padding:20px;border-top:1px solid var(--border);color:var(--text-muted); }
.ranking-empty p { margin:0; }
.learn-grid .shortcut-guide { display:block; }
.learn-grid .shortcut-guide p { margin-top:16px;font-size:var(--font-body); }
@media(max-width:959.98px) {
 .play-hub>.page-header { padding-right:0; }
 .friend-row .button { min-height:44px; }
}
@media(max-width:640px) {
 .play-stage { grid-template-columns:1fr; }
 .play-stage-art { height:180px; }
 .play-options { padding:20px; }
 .play-option { gap:12px;padding:12px 14px; }
 .play-option-primary { padding-left:12px; }
 .play-options-footer .button { flex:1;padding:8px; }
 .matchmaking-state { min-height:calc(100dvh - var(--mobile-nav-height));padding:20px 16px;gap:20px; }
 .matchmaking-players { grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:4px; }
 .matchmaking-player { min-height:130px; }
 .matchmaking-versus { font-size:13px; }
 .member-header { display:grid;grid-template-columns:72px minmax(0,1fr);gap:16px;padding:16px; }
 .member-header>.avatar { width:72px;height:72px;font-size:24px; }
 .member-identity h1 { font-size:24px;line-height:28px; }
 .member-header>.button { grid-column:1/-1;justify-self:end;margin:0; }
 .member-stats dl { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .history-toolbar>label { max-width:none;width:100%; }
 .history-turns { display:none; }
 .history-table th,.history-table td { padding:10px 4px;font-size:13px; }
 .history-table th:first-child { width:29%; }
 .history-table th:nth-child(5) { width:28%; }
 .history-table td:first-child .avatar { display:none; }
 .history-table td .button { min-height:44px;padding:2px 6px;font-size:13px; }
 .settings-layout { grid-template-columns:1fr;gap:16px; }
 .settings-layout>.page-tabs { display:flex;gap:4px; }
 .settings-layout>.page-tabs>button { text-align:center;min-height:44px;padding:8px; }
 .settings-layout>.page-tabs>button[aria-selected='true'] { box-shadow:inset 0 -3px var(--accent-raw); }
}

/* missions.css */
.mission-page { max-width:960px;margin-inline:auto; }
.mission-board { padding:0 20px; }
.mission-group + .mission-group { border-top:var(--control-stroke) solid var(--border); }
.mission-group-heading { min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:16px; }
.mission-group-heading h2 { margin:0;font-size:var(--font-section-title);line-height:1.3; }
.mission-list { padding-bottom:8px; }
.mission-row { display:flex;align-items:center;gap:20px;min-height:80px;padding:13px 14px;border-top:1px solid var(--border); }
.mission-row.is-ready { box-shadow:inset 3px 0 0 var(--accent-raw);background:var(--bg-subtle); }
.mission-copy { min-width:0;flex:1;display:grid;gap:10px; }
.mission-title-line { display:flex;align-items:baseline;gap:8px 18px;flex-wrap:wrap; }
.mission-title-line h3 { margin:0;font-size:var(--font-body);font-weight:700;line-height:1.4; }
.mission-reward { color:var(--text-muted);font-size:var(--font-small);line-height:1.4; }
.mission-reward-item { display:inline-flex;align-items:center;gap:4px;white-space:nowrap; }
.mission-reward-item .icon { font-size:17px;line-height:1;color:var(--text); }
.mission-reward-item strong { color:var(--text);font-weight:700;font-variant-numeric:tabular-nums; }
.mission-progress { width:min(330px,100%);display:flex;align-items:center;gap:12px; }
.mission-progress .progress-meter { flex:1;min-width:0;height:8px; }
.mission-row .progress-meter i { background:var(--border-strong); }
.mission-row.is-claimed .progress-meter i { background:var(--success); }
.mission-progress>span:last-child { min-width:33px;text-align:right;color:var(--text-muted);font-size:var(--font-small);font-variant-numeric:tabular-nums; }
.mission-status { min-width:92px;display:inline-flex;align-items:center;justify-content:flex-end;gap:6px;color:var(--text-muted);font-size:var(--font-small);white-space:nowrap; }
.mission-status .icon { font-size:18px; }
.mission-row.is-claimed .mission-status { color:var(--success); }
.mission-claim { flex:none;min-width:96px; }
.pending-missions .pending-mission-name,.pending-missions .pending-mission-reward,.pending-missions .pending-mission-count,.pending-missions .pending-mission-status { display:block;height:14px;border-radius:var(--radius-small);background:var(--interactive-hover); }
.pending-missions .pending-mission-name { width:120px;max-width:100%; }
.pending-missions .pending-mission-reward { width:170px;max-width:100%; }
.pending-missions .pending-mission-count { width:32px;flex:none; }
.pending-missions .pending-mission-status { width:74px;flex:none; }
@media (min-width:960px) {
  :root[data-theme='dark'] .mission-title-line { display:grid;grid-template-columns:minmax(0,1fr) 210px;align-items:start;gap:24px; }
  :root[data-theme='dark'] .mission-title-line h3 { min-width:0; }
  :root[data-theme='dark'] .mission-reward { display:flex;align-self:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 12px;text-align:right;font-size:14px; }
  :root[data-theme='dark'] .mission-progress { width:calc(100% - 234px); }
  :root[data-theme='dark'] .mission-status { font-size:14px; }
}

/* results.css */
.result-flow { min-height:calc(100dvh - 32px);display:grid;place-items:center;padding:24px 0 68px; }
.result-flow:not(.result-stage-victory) { min-height:0;place-items:start center;padding-top:clamp(32px,5vh,56px); }
.result-flow-inner { width:min(720px,100%); }
.result-progress { display:grid;grid-template-columns:repeat(var(--result-steps),minmax(0,1fr));gap:8px;list-style:none;margin:0 0 12px;padding:0; }
.result-progress li { display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;border-bottom:3px solid var(--border);color:var(--text-muted);font-size:var(--font-small);font-weight:600; }
.result-progress li.is-complete { color:var(--text);border-color:var(--border-strong); }
.result-progress li.is-current { color:var(--text);border-color:var(--accent-raw); }
.result-progress-number { font-variant-numeric:tabular-nums; }
.result-archive-kicker { margin:0 0 12px;color:var(--text-muted);font-size:var(--font-small);font-weight:600; }
.result-stage-content { min-height:430px;display:grid;align-content:center;justify-items:center;gap:18px;padding:36px;background:var(--surface);border:var(--control-stroke) solid var(--border);border-radius:var(--radius-panel);text-align:center; }
.result-stage-content h1 { margin:0;font-size:32px;line-height:1.25; }
.result-stage-actions { display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:6px; }
.result-stage-actions>.button { min-width:188px; }
.result-victory-art { position:relative;min-height:190px;display:grid;place-items:center; }
.result-victory-art>.character-art { width:205px;max-height:190px; }
.result-victory-art>.icon { position:absolute;top:0;right:-10px;font-size:38px;color:var(--warning); }
.result-stage-victory .result-stage-content h1 { color:var(--text);font-size:42px; }
.result-lead { color:var(--text-muted);font-size:15px; }
.result-matchup { width:100%;display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);align-items:center;gap:10px;margin-top:6px; }
.result-matchup>div { min-width:0;display:grid;justify-items:center;gap:6px; }
.result-matchup .avatar,.result-opponent .avatar { width:66px;height:66px;font-size:24px; }
.result-matchup strong,.result-opponent>strong { max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:18px; }
.result-matchup-versus { color:var(--text-muted);font-weight:800; }
.result-outcome { display:flex;align-items:center;gap:8px;margin:0;font-size:18px;font-weight:800; }
.result-outcome .icon { font-size:23px; }
.result-outcome.is-win { color:var(--success); }
.result-outcome.is-loss { color:var(--error); }
.result-facts { width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid var(--border);border-bottom:1px solid var(--border); }
.result-facts>div { display:grid;gap:5px;padding:13px 8px; }
.result-facts>div+div { border-left:1px solid var(--border); }
.result-facts dt { color:var(--text-muted);font-size:var(--font-small); }
.result-facts dd { margin:0;font-size:var(--font-body);font-weight:700; }
.result-rewards { width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:8px; }
.result-reward { min-height:148px;display:grid;justify-items:center;align-content:center;gap:7px;padding:18px 10px;border:var(--control-stroke) solid var(--border);border-radius:var(--radius-medium);background:var(--surface-raised); }
.result-reward .icon { font-size:32px;color:var(--warning); }
.result-reward span { color:var(--text-muted);font-size:var(--font-small); }
.result-reward strong { font-size:24px;line-height:1.2; }
.result-no-reward { color:var(--text-muted);font-size:15px; }
.result-archived-rewards { width:100%;display:grid;gap:12px;padding-top:4px; }
.result-archived-rewards h2 { margin:0;font-size:var(--font-section-title); }
.result-archived-rewards .result-reward { min-height:112px; }
.result-opponent { display:grid;justify-items:center;gap:10px;min-width:0; }
.result-opponent .member-badges { justify-content:center; }
.result-social-actions { display:flex;justify-content:center;gap:10px;flex-wrap:wrap; }
.result-social-actions:empty { display:none; }
.result-social-actions .button { min-width:144px; }

/* test-game.css */
.test-workspace { display:grid;gap:12px; }
.test-toolbar { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:var(--surface);border:var(--control-stroke) solid var(--border);border-radius:var(--radius-medium); }
.test-toolbar>div:first-child { display:grid;gap:2px;min-width:0; }
.test-toolbar strong { font-size:16px; }
.test-toolbar small { color:var(--text-muted);font-size:13px; }
.test-toolbar .actions { display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.test-roll-picker { display:flex;align-items:center;gap:16px;padding:12px 16px;background:var(--surface);border:var(--control-stroke) solid var(--border);border-radius:var(--radius-medium); }
.test-roll-picker>strong { flex:none;font-size:14px; }
.test-roll-options { display:grid;grid-template-columns:repeat(6,minmax(0,64px));gap:8px; }
.test-roll-options .button { min-width:0; }
.route-test .yut-board-wrap { display:flex;justify-content:center;padding:12px 18px 28px; }
.route-test .yut-board { max-width:460px; }
.route-test .yard-panel { padding:10px; }
.route-test .yard-panel>.player-strip { display:none; }
.route-test .yard-panel h2 { font-size:14px; }
.route-test .yard-panel .actions { margin-top:8px; }
@media(min-width:960px) {
  :root[data-theme='dark'] .route-test .game-page { min-height:0;align-content:start;gap:8px;padding:12px; }
  :root[data-theme='dark'] .route-test .game-topbar { min-height:48px;padding:8px 12px; }
  :root[data-theme='dark'] .route-test [data-connection-status] { padding:4px 8px;font-size:12px; }
  :root[data-theme='dark'] .route-test .yut-board-wrap { padding:4px 8px 14px; }
  :root[data-theme='dark'] .route-test .yut-board { width:min(100%,clamp(350px,calc(100dvh - 380px),520px));max-width:520px; }
}
@media(min-width:1200px) {
  :root[data-theme='dark'] .route-test .test-workspace { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  :root[data-theme='dark'] .route-test .test-toolbar { min-width:0; }
  :root[data-theme='dark'] .route-test .test-roll-picker { min-width:0; }
  :root[data-theme='dark'] .route-test .game-page { grid-column:1/-1; }
}
@media(min-width:960px) and (max-width:1199.98px) {
  :root[data-theme='dark'] .route-test .yut-board { max-width:460px; }
}
.test-result { width:min(560px,100%);display:grid;justify-items:center;gap:16px;margin:clamp(48px,15vh,140px) auto 0;padding:32px;text-align:center; }
.test-result-label { color:var(--accent-raw);font-size:14px;font-weight:700; }
.test-result h1 { font-size:28px; }
.test-result p { color:var(--text-muted); }
.test-result .actions { display:flex;justify-content:center;flex-wrap:wrap;gap:8px; }
@media(max-width:640px) {
  .test-toolbar { flex-wrap:wrap;padding:12px; }
  .test-toolbar .actions { width:100%; }
  .test-toolbar .actions>* { flex:1; }
  .test-roll-picker { flex-wrap:wrap;gap:8px; }
  .test-roll-options { width:100%;grid-template-columns:repeat(3,minmax(0,1fr)); }
  .test-result { margin-top:24px;padding:24px 16px; }
}