/* Verdant Spire · the glass system (17 Oct 2026). ONE stylesheet for the game; it replaces style, edo, versus,
   battle, journey, refinement and layout.css. Spec: the approved "glass" boards (Kit, Main, Battle, Result and the
   screen boards) on the Verdant Spire canvas. overlay.html keeps overlay.css (separate OBS surface).

   Rules this file keeps:
   - Glass needs a picture behind it: the street in menus, the towers in play. Light glass for controls and cards,
     smoke glass for sheets and lists, one cream action per screen, fully round pills and circles.
   - Colour carries meaning: amber = ranked, a win, seats; jade = critical and the founder; House colour only as an
     edge on something that belongs to that House.
   - Performance: during play the blur drops to 12px, and nothing that moves every frame (#feedback, the clock fill,
     the score punch, the countdown) carries a backdrop-filter. Without backdrop-filter support, surfaces go solid.
   - Layout keeps the 16 Oct phone-first pass: phone lobby order Cup -> actions -> Houses with the main action in the
     thumb dock, landscape phones side by side, the activity counter in the footer, the result action always reachable.
   - Art is placeholder (Astra redraws it). Nothing here depends on a bitmap's proportions; art slots are sized boxes. */

/* ================================================================== 0. fonts and tokens */
@font-face{font-family:Hound;src:url('./assets/hound-display-latin.woff2') format('woff2');font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('./assets/fonts/ibm-plex-sans-regular-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('./assets/fonts/ibm-plex-sans-medium-latin.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url('./assets/fonts/ibm-plex-sans-semibold-latin.woff2') format('woff2');font-weight:600 700;font-display:swap}

:root{
  --base:#16201D; --cream:#F6F2EA; --on-cream:#16201D;
  --text:#F6F2EA; --muted:rgba(246,242,234,.74); --faint:rgba(246,242,234,.58);
  --glass:rgba(255,255,255,.12); --glass-strong:rgba(255,255,255,.16); --glass-edge:rgba(255,255,255,.22); --glass-hl:inset 0 1px 0 rgba(255,255,255,.25);
  --smoke:rgba(16,24,21,.55); --smoke-edge:rgba(255,255,255,.16); --smoke-hl:inset 0 1px 0 rgba(255,255,255,.18);
  --blur:22px; --blur-sheet:28px;
  --amber:#F0B54A; --amber-ink:#FFD58A; --amber-wash:rgba(240,181,74,.2);
  --jade:#7FE0BC; --jade-ink:#BFF2DF; --jade-wash:rgba(127,224,188,.16); --jade-cta:#C9F5E5; --jade-deep:#0C2A20;
  --live:#E05A47;
  --onyx-forge:#E05A47; --chrome-manor:#C9D1DB; --gilded-court:#E6B84F; --sapphire-keep:#5B8FE0;
  --ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --display:Hound,Georgia,serif;
  --gutter:16px; --head-h:76px; --foot-h:44px; --dock-h:70px; --dock-gap:8px;
  --i-play:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  --i-back:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6l-6 6 6 6'/%3E%3C/svg%3E");
  --i-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-sound-off:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M17 9l4 6M21 9l-4 6'/%3E%3C/svg%3E");
  --i-sound-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16.5 9.5a3.5 3.5 0 0 1 0 5M19 7a7 7 0 0 1 0 10'/%3E%3C/svg%3E");
  --i-pause:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E");
  --i-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-wall:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='2'/%3E%3Cpath d='M4 10h16M10 4v16'/%3E%3C/svg%3E");
  --i-cup:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 6H4a3 3 0 0 0 3 4M17 6h3a3 3 0 0 1-3 4M12 14v4M8 20h8'/%3E%3C/svg%3E");
  --i-cal:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='4' y='5' width='16' height='15' rx='3'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E");
  --i-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6'/%3E%3Ccircle cx='12' cy='7.6' r='.6' fill='black'/%3E%3C/svg%3E");
  --i-bearing:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3C/svg%3E");
  /* Icons baked with their colour, for the round action icons (a background layer, never a mask). */
  --ic-play-cream:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F6F2EA' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  --ic-play-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2316201D' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  --ic-play-jade:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C9F5E5' d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  --ic-ring-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316201D' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 9c0-1.7 3.6-3 8-3s8 1.3 8 3v5c0 1.7-3.6 3-8 3s-8-1.3-8-3z'/%3E%3Cpath d='M4 9c0 1.7 3.6 3 8 3s8-1.3 8-3'/%3E%3C/svg%3E");
}
/* Play keeps phones at frame rate: one modest blur for the few glass surfaces over the moving towers. */
body[data-screen=game]{--blur:12px;--blur-sheet:12px}

/* ================================================================== 1. base and the world behind the glass */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--base);color:var(--text);font:400 16px/1.45 var(--ui);-webkit-font-smoothing:antialiased;isolation:isolate;-webkit-tap-highlight-color:transparent}
button,input{font:inherit;color:inherit}
button{cursor:pointer;touch-action:manipulation}
button:disabled{cursor:default}
a{color:var(--text)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
h1,h2,h3{font-weight:600;margin:0}
.sr-only,.house-name{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.world,.atmosphere{position:fixed;inset:0;pointer-events:none}
.world{z-index:-2;background:url('./assets/edo-street.webp') 44% 50%/cover no-repeat}
.atmosphere{z-index:-1;background:linear-gradient(180deg,rgba(18,28,25,.28) 0,rgba(18,28,25,.12) 30%,rgba(18,28,25,.7) 66%,rgba(14,20,18,.92) 100%)}
body[data-screen=game] .atmosphere{background:linear-gradient(180deg,rgba(14,20,18,.82) 0,rgba(14,20,18,.35) 22%,rgba(14,20,18,.18) 50%,rgba(14,20,18,.55) 82%,rgba(14,20,18,.9) 100%)}

/* ================================================================== 2. the two glass surfaces */
/* Light glass: controls, chips, cards. */
.secondary,.text-button,.icon-button,.cup-line,.cup-banner,.house-cell,#journey-home,.tools button,#site-nav,#emotes button,
.qual-tabs,.round-tabs,.stat,.score-card,.podium-step:not([data-place="1"]) .podium-card,.points-grid>div,.stakes-when,.guide-progress,
.guest-card,.journey-panel,.eyebrow-chip,.honour-grid article,.seat-chip,.qual-you,.bracket-match,.queue-elapsed,
#battle-lead,#battle-mode,.result-chip,#result-record,.journey-field input,.vs-field input{
  background:var(--glass);-webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);
  border:1px solid var(--glass-edge);box-shadow:var(--glass-hl);color:var(--text)}
/* Smoke glass: sheets and long lists. */
.compact-screen,.qual-main,.qual-side .seats-so-far,.bracket-screen .bracket,.wall-list,.stakes-points,.rule-list,.result,
#honours,#profile-dialog,.stage-sheet{
  background:var(--smoke);-webkit-backdrop-filter:blur(var(--blur-sheet)) saturate(140%);backdrop-filter:blur(var(--blur-sheet)) saturate(140%);
  border:1px solid var(--smoke-edge);box-shadow:var(--smoke-hl),0 20px 60px rgba(0,0,0,.28)}
/* Glass inside a sheet is already over a blurred backdrop: it takes the tint, not a second blur (one blur layer
   per surface keeps software-rendered and older GPUs at frame rate). */
:is(.compact-screen,.guide-screen,.qual-main,.seats-so-far,.result,#honours,#profile-dialog,.bracket-screen .bracket,.stakes-points,.wall-list,.rule-list,#site-nav) *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* No backdrop-filter (old browsers, reduced transparency): solid surfaces, same layout. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .secondary,.text-button,.icon-button,.cup-line,.cup-banner,.house-cell,#journey-home,.tools button,#site-nav,#emotes button,.qual-tabs,.round-tabs,.stat,.score-card,.podium-step:not([data-place="1"]) .podium-card,.points-grid>div,.stakes-when,.guide-progress,.guest-card,.journey-panel,.honour-grid article,.seat-chip,.qual-you,.bracket-match,.queue-elapsed,#battle-lead,#battle-mode,#result-record,.journey-field input{background:rgba(52,62,58,.92)}
  .compact-screen,.qual-main,.qual-side .seats-so-far,.bracket-screen .bracket,.wall-list,.stakes-points,.rule-list,.result,#honours,#profile-dialog,#account-menu{background:rgba(20,29,26,.95)}
  /* These carry their own background further down: one more element of specificity so the solid fill wins. */
  html #action{background:rgba(52,62,58,.92)}
  html .guide-screen{background:rgba(20,29,26,.95)}
  html .podium-step[data-place="1"] .podium-card{background:linear-gradient(180deg,rgba(240,181,74,.3),rgba(240,181,74,.14)),rgba(20,29,26,.95)}
}
@media (prefers-reduced-transparency:reduce){
  .secondary,.text-button,.icon-button,.cup-line,.cup-banner,.house-cell,#journey-home,.tools button,#site-nav,#emotes button,.qual-tabs,.round-tabs,.stat,.score-card,.podium-step:not([data-place="1"]) .podium-card,.points-grid>div,.stakes-when,.guide-progress,.guest-card,.journey-panel,.honour-grid article,.seat-chip,.qual-you,.bracket-match,.queue-elapsed,#battle-lead,#battle-mode,#result-record,.journey-field input{background:rgba(52,62,58,.95);-webkit-backdrop-filter:none;backdrop-filter:none}
  .compact-screen,.qual-main,.qual-side .seats-so-far,.bracket-screen .bracket,.wall-list,.stakes-points,.rule-list,.result,#honours,#profile-dialog,#account-menu{background:rgba(20,29,26,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  html #action{background:rgba(52,62,58,.95);-webkit-backdrop-filter:none;backdrop-filter:none}
  html .guide-screen{background:rgba(20,29,26,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
  html .podium-step[data-place="1"] .podium-card{background:linear-gradient(180deg,rgba(240,181,74,.3),rgba(240,181,74,.14)),rgba(20,29,26,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Low-power mode (perf.mjs sets html[data-power=low] on weak hardware or slow measured frames): every blur goes,
   surfaces turn to solid smoke so text keeps its contrast, and the layout is untouched. */
html[data-power=low]{--glass:rgba(34,44,40,.88);--glass-strong:rgba(40,52,47,.92);--smoke:rgba(20,29,26,.94)}
/* Scoped to the surfaces that carry a blur (no universal selector: entering low power must not restyle the page). */
html[data-power=low] :is(.secondary,.text-button,.icon-button,.cup-line,.cup-banner,.house-cell,#journey-home,.tools button,#site-nav,#emotes button,
  .qual-tabs,.round-tabs,.stat,.score-card,.podium-card,.points-grid>div,.stakes-when,.guide-progress,.guest-card,.journey-panel,
  .eyebrow-chip,.honour-grid article,.seat-chip,.qual-you,.bracket-match,.queue-elapsed,#battle-lead,#battle-mode,.result-chip,
  #result-record,.journey-field input,.vs-field input,.compact-screen,.qual-main,.seats-so-far,.bracket,.wall-list,.stakes-points,
  .rule-list,.result,#honours,#profile-dialog,.stage-sheet,.guide-screen,.journey-center,#action,.dock-primary,#honours-open,#arena-presence,#account-menu){-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html[data-power=low] #action{background:rgba(34,44,40,.9)}

/* ================================================================== 3. buttons */
/* Pills for text, circles for icons, 44px or more. Labels in caps from older copy read as sentence case. */
.primary,.secondary,.text-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 20px;border-radius:999px;
  font:500 15px/1.2 var(--ui);letter-spacing:0;text-decoration:none;text-align:center;transition:background-color .15s,border-color .15s,transform .12s,opacity .15s}
.secondary:hover,.text-button:hover{background:rgba(255,255,255,.2)}
.secondary:active,.text-button:active,.primary:active{transform:translateY(1px)}
.caps>.label,#action,#retry .label,#battle-lead,#feedback.critical{text-transform:lowercase}
.caps>.label::first-letter,#action::first-letter,#retry .label::first-letter,#battle-lead::first-letter,#feedback.critical>span:first-child::first-letter{text-transform:uppercase}
.caps>.label,#retry .label{display:inline-block}
.label{min-width:0}
.sub{display:block;font:400 12px/1.3 var(--ui);color:var(--muted)}

/* The one cream action: label left, dark round icon right. */
.primary{position:relative;justify-content:flex-start;min-height:56px;padding:0 64px 0 24px;border:0;background:var(--cream);color:var(--on-cream);
  font:600 17px/1.2 var(--ui);box-shadow:0 0 0 1px rgba(255,255,255,.35),0 10px 28px rgba(0,0,0,.28);text-align:left}
.primary:hover{background:#fffdf8}
/* The second line on the cream pill (761-1023px, and every primary off the lobby dock) is dark ink, not the
   muted cream meant for glass; the glass dock variants (<=760px, >=1024px) set it back to muted below. */
.primary .sub{color:rgba(22,32,29,.72)}
.primary .glyph,.primary:not(:has(.glyph))::after{position:absolute;right:6px;top:50%;width:44px;height:44px;margin-top:-22px;border-radius:50%;
  display:grid;place-items:center;background:var(--on-cream);color:var(--cream);font:600 17px/1 var(--ui)}
.primary:not(:has(.glyph))::after{content:'';background:var(--ic-play-cream) 56% 50%/16px no-repeat,var(--on-cream)}
.primary:disabled{opacity:.7;cursor:wait}
.primary[aria-busy=true]::after,.primary[aria-busy=true] .glyph{background:var(--on-cream)}
/* Founder and ghost: jade on deep green. */
.primary.founder,body[data-screen=ghost-ready] #journey .primary,body[data-screen=wall] #journey .primary{background:var(--jade-cta);color:var(--jade-deep)}
body[data-screen=ghost-ready] #journey .primary .glyph,body[data-screen=wall] #journey .primary:not(:has(.glyph))::after{background-color:var(--jade-deep);color:var(--jade-cta)}
body[data-screen=wall] #journey .primary:not(:has(.glyph))::after{background:var(--ic-play-jade) 56% 50%/16px no-repeat,var(--jade-deep)}
.secondary.founder{background:var(--jade-wash);border-color:rgba(127,224,188,.6);color:var(--jade-ink)}
.secondary.founder:hover{background:rgba(127,224,188,.26)}
.text-button{min-height:44px}
.icon-button,#journey-home,.tools button{display:inline-grid;place-items:center;width:46px;height:46px;min-height:0;padding:0;border-radius:50%;font-size:0;color:var(--text)}
.icon-button::before,#journey-home::before,#pause::before{content:'';width:20px;height:20px;background:currentColor;
  -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat}
/* Icons are centred on the circle itself, not in the button's text flow: the hidden label (SOUND OFF, PAUSE,
   a span) is still a flow item and was pushing the glyph up to 6px off centre. The speaker glyph carries its
   weight on the left, so it sits 1px right of the geometric centre. */
.icon-button,#journey-home,.tools button{position:relative}
.icon-button::before,#journey-home::before,#pause::before{position:absolute;inset:0;margin:auto}
#journey-home{--icon:var(--i-back)}
#journey-home>span{display:none}
#honours-close{--icon:var(--i-close)}
#pause{--icon:var(--i-pause)}
#pause[aria-label="Resume game"]{--icon:var(--i-play)}
#pause:disabled{opacity:.45}


/* ================================================================== 4. header, nav, chip, footer */
/* The header is the HOUND shared bar plus the Spire's own row: spire-bar.css. These are the row's game parts. */
.tools{display:flex;gap:8px;align-items:center}
body:not([data-screen=game]) #pause{display:none}
#site-nav{display:none}

footer{position:fixed;left:0;right:0;bottom:0;z-index:25;height:var(--foot-h);display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:0 max(12px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(12px,env(safe-area-inset-left));font:500 12px var(--ui);color:var(--muted);pointer-events:none}
footer>*{pointer-events:auto}
footer>span:first-child{display:none}
#identity-status{font-size:11px;letter-spacing:.06em;color:var(--faint)}
footer:has(#arena-presence) #identity-status{display:none}
#honours-open{min-height:44px;padding:0 14px;border-radius:999px;border:0;background:none;color:var(--text);font:500 13px var(--ui)}
#arena-presence{position:relative;display:flex;align-items:center;gap:8px;min-height:36px;padding:0 4px 0 12px;border-radius:999px;font:500 13px var(--ui);color:var(--text)}
#arena-presence::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--jade);box-shadow:0 0 8px rgba(127,224,188,.6)}
#arena-presence[data-available=false]::before{background:var(--faint);box-shadow:none}
#arena-presence .presence-label{display:none}
#arena-presence button{min-width:44px;min-height:44px;margin:0 -6px 0 -6px;border:0;background:none;color:var(--muted);font:600 14px var(--ui)}
#presence-explanation{position:absolute;right:0;bottom:calc(100% + 8px);width:290px;max-width:calc(100vw - 24px);margin:0;padding:14px 16px;border-radius:20px;
  background:rgba(16,24,21,.92);border:1px solid var(--smoke-edge);font:400 13px/1.5 var(--ui);color:var(--muted);box-shadow:0 12px 40px rgba(0,0,0,.4)}
#presence-explanation strong{color:var(--text);font-weight:600}

body[data-screen=game] footer{visibility:hidden}

/* ================================================================== 5. menus: the journey */
main{position:fixed;inset:0}
#journey{position:absolute;inset:0;z-index:12;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(var(--head-h) + 4px) max(var(--gutter),env(safe-area-inset-right)) calc(var(--foot-h) + 30px) max(var(--gutter),env(safe-area-inset-left))}
body[data-screen=game] #journey{display:none}
body:not([data-screen=game]) main> :not(#journey){visibility:hidden;pointer-events:none}
.journey-shell{min-height:100%;display:flex;flex-direction:column;max-width:1360px;margin:0 auto}
#journey h1{font:400 clamp(40px,11vw,54px)/1.02 var(--display);letter-spacing:0;margin:4px 0 10px;text-shadow:0 2px 18px rgba(0,0,0,.45);text-wrap:balance}
#journey h1 em{font-style:normal}
#journey h1:focus,#journey h2:focus{outline:none}
#journey h2{font:600 18px/1.3 var(--ui)}
#journey h3{font:600 17px/1.3 var(--ui)}
#journey p{margin:0}
#journey .lede{font:400 16px/1.5 var(--ui);color:var(--text);max-width:34em;margin:0 0 14px;text-wrap:pretty;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 18px rgba(0,0,0,.6)}
.compact-screen .lede,.guide-screen .lede{text-shadow:none}
.apos{margin-right:-.34em}
.eyebrow{display:block;font:500 12px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.eyebrow>span{display:none}
.journey-note,.arrival-meta,#journey-error{font:400 13px/1.5 var(--ui);color:var(--muted)}
#journey-error:empty{display:none}
#journey-error{margin-top:10px;color:var(--amber-ink)}
.journey-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.journey-actions>.primary,.journey-actions>a.primary{flex:1 1 100%}
.journey-actions>.secondary,.journey-actions>.text-button,.journey-actions>a.secondary{flex:1 1 auto;white-space:nowrap}
#journey details{margin-top:16px;border-top:1px solid rgba(255,255,255,.14);padding-top:6px}
#journey summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:500 15px var(--ui);color:var(--text)}
#journey details p{margin:8px 0;font-size:14px;color:var(--muted)}

/* ------------------------------------------------ the lobby */
.arrival{display:flex;flex-direction:row;flex-wrap:wrap;align-content:flex-end;justify-content:flex-start;gap:8px;flex:1;max-width:560px}
.arrival>:not(.journey-actions):not(.journey-links){flex:1 1 100%}
.arrival .journey-actions,.arrival .journey-links{display:contents}
.arrival .journey-actions>.secondary{order:3}
.arrival .journey-links>.text-button{order:4}
.arrival .dock-primary{order:2;flex:1 1 100%}
.arrival>.eyebrow{margin:0 0 -8px;order:0}
.arrival>h1{order:1}
body[data-screen=home] #journey h1{font-size:clamp(42px,12.5vw,54px);line-height:.98;margin:2px 0 10px}
body[data-screen=home] #journey h1 br{display:none}
body[data-screen=home] #journey h1 em::before{content:' '}
.arrival>.lede,.arrival>.arrival-meta{display:none}
.arrival>.journey-note{order:6;margin:14px 2px 0}
.arrival>.progress-line{order:7;margin:4px 2px 0}
.progress-line b{font-weight:600;color:var(--text)}
.progress-line a{font-weight:600;color:var(--amber);text-decoration:none}
.progress-line a:hover,.progress-line a:focus-visible{text-decoration:underline}
.arrival>.house-strip{order:8}
.arrival>.cup-line,.arrival>.cup-banner{order:2}
.arrival:has(.cup-banner) .cup-line{display:none}

/* Cup cards: the personal line (signed in) or the event line (everyone). */
.cup-line,.cup-banner{display:flex;align-items:center;gap:12px;width:100%;margin:0 0 4px;padding:12px 14px;border-radius:22px;text-align:left;font:inherit}
button.cup-line:hover,button.cup-banner:hover{background:rgba(255,255,255,.18)}
.cup-line[data-pending]{min-height:66px;visibility:hidden}
.cup-mark{flex:none;width:40px;height:40px;object-fit:contain;image-rendering:pixelated}
.cup-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cup-copy>b{font:600 16px/1.3 var(--ui)}
.cup-copy>span{font:400 13px/1.35 var(--ui);color:var(--muted)}
.chev{flex:none;width:18px;height:18px;background:currentColor;-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat}
.cup-banner{flex-wrap:wrap}
.cup-banner[data-kind=match]{border-color:rgba(240,181,74,.7);background:linear-gradient(90deg,rgba(240,181,74,.16),rgba(255,255,255,.08))}
.cup-banner[data-kind=match] .cup-copy>b{color:var(--amber-ink);font-size:14px;letter-spacing:.06em}
.cup-banner-actions{display:flex;flex-wrap:wrap;gap:8px;width:100%}
.cup-banner-actions>.primary{flex:1 1 100%;min-height:52px}
.cup-banner-actions>.secondary{flex:1 1 auto}

/* Modes: Ranked Trials is the dock action; the rest are pills. */

.arrival .journey-actions .secondary,.arrival .journey-links .text-button{flex:0 0 auto;min-height:44px;padding:0 18px}
/* Lobby hierarchy (Evan, 17 Oct): PLAY = Ranked Trials (the one cream/dock action), Challenge the Founder (jade),
   then a quieter two-up group of other ways to play. LEARN = How to play as a text link. ACCOUNT = the chip menu. */
.play-more{display:flex;gap:8px;flex:1 1 100%;order:3}
.play-more>.secondary.quiet{flex:1 1 0;min-width:0;min-height:44px;padding:0 12px;font-size:14px;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:rgba(246,242,234,.9)}
.play-more>.secondary.quiet:hover{background:rgba(255,255,255,.14)}
.arrival .journey-actions>.founder{min-height:48px;padding:0 22px;font-weight:600}
.journey-links .learn-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px!important;background:none!important;border:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--muted);font:500 14px var(--ui);text-decoration:underline;text-decoration-color:rgba(246,242,234,.35);text-underline-offset:4px}
.journey-links .learn-link::before{content:'';width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--i-info) center/contain no-repeat;mask:var(--i-info) center/contain no-repeat}
.journey-links .learn-link:hover{color:var(--text)}
.tools{position:relative}
.dock-primary{border-radius:999px;flex-direction:column;align-items:flex-start;justify-content:center;gap:0}
.dock-primary .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.sub-more{display:none}
.dock-primary .label{display:block;font:600 19px/1.15 var(--ui)}
.dock-primary .sub{margin-top:2px}

/* House standings: four coins, House colour on the ring only. */
.house-strip{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:22px 0 0}
.strip-label{font:500 14px var(--ui);color:rgba(246,242,234,.85)}
.house-coins{display:flex;padding-left:8px}
.house-cell{width:58px;height:58px;margin-left:-8px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-width:1.5px;box-shadow:0 6px 16px rgba(0,0,0,.25);position:relative}
.house-cell .emblem{width:26px;height:26px;image-rendering:pixelated}
.house-cell b{font:600 13px/1 var(--ui);font-variant-numeric:tabular-nums}
.house-cell[data-house=onyx-forge]{border-color:var(--onyx-forge)}
.house-cell[data-house=chrome-manor]{border-color:var(--chrome-manor)}
.house-cell[data-house=gilded-court]{border-color:var(--gilded-court)}
.house-cell[data-house=sapphire-keep]{border-color:var(--sapphire-keep)}
.house-cell[data-leading=true]{z-index:1;box-shadow:0 0 0 3px rgba(240,181,74,.35),0 6px 16px rgba(0,0,0,.3)}
.house-cell[data-leading=true] b{color:var(--amber-ink)}

/* ------------------------------------------------ sheets: every other menu */
/* The street stays visible above; the screen's words and its action sit in one smoke sheet at thumb height. */
.journey-center{display:flex;flex-direction:column;width:100%;max-width:560px}
.compact-screen{margin-top:auto;padding:20px;border-radius:28px}
.compact-screen>.eyebrow,.journey-center>.eyebrow{align-self:flex-start;display:inline-flex;align-items:center;min-height:30px;padding:0 12px;margin:0 0 12px;border-radius:999px;
  font:600 11px/1.35 var(--ui);letter-spacing:.08em;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--text);padding-block:6px;max-width:100%}
.compact-screen #journey h1,.compact-screen h1{font-size:clamp(34px,10vw,44px)!important}
#journey .compact-screen h1{font-size:clamp(34px,10vw,44px)}
.compact-screen>p:not(.eyebrow):not(.lede):not(.journey-note){font:400 15px/1.55 var(--ui);color:var(--muted);margin:0 0 10px}
.compact-screen .journey-note{margin-top:8px}
.house-lantern{float:right;width:64px;height:64px;object-fit:contain;image-rendering:pixelated;margin:0 0 6px 10px}

/* How to play: a placeholder art card (rings, not slabs) until the tutorial frames are drawn. */
.guide-screen{margin-top:auto;max-width:560px;padding:20px;border-radius:28px;background:var(--smoke);-webkit-backdrop-filter:blur(var(--blur-sheet)) saturate(140%);backdrop-filter:blur(var(--blur-sheet)) saturate(140%);border:1px solid var(--smoke-edge);box-shadow:var(--smoke-hl)}
.guide-screen .lede{min-height:3em}
#journey .guide-screen h1{font-size:clamp(34px,10vw,44px)}
.stone-demo{position:relative;height:200px;margin:0 0 16px;border-radius:22px;overflow:hidden;
  background:var(--demo-art,none) center/cover no-repeat,radial-gradient(ellipse at 50% 70%,rgba(127,224,188,.12),transparent 60%),rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.22)}
.stone-demo i{position:absolute;left:calc(50% - 64px);width:128px;height:30px;border-radius:50%;border:3px solid rgba(246,242,234,.5)}
.stone-demo i:nth-child(1){bottom:44px;border-color:rgba(246,242,234,.35)}
.stone-demo i:nth-child(2){bottom:74px;border-color:rgba(246,242,234,.55)}
.stone-demo i:nth-child(3){bottom:104px;border-color:var(--amber);box-shadow:0 0 18px rgba(240,181,74,.35)}
.stone-demo .demo-cut{display:none}
.stone-demo span{position:absolute;left:0;right:0;bottom:12px;text-align:center;font:500 12px var(--ui);color:var(--muted)}
.stone-demo.align i:nth-child(3){animation:demo-slide 2.6s ease-in-out infinite}
.stone-demo.trim i:nth-child(3){border-color:var(--jade);box-shadow:0 0 18px rgba(127,224,188,.45)}
.stone-demo.trim .demo-cut{display:block;bottom:104px;width:40px;left:calc(50% + 64px);border-radius:0 50% 50% 0;border-left:0;border-color:rgba(246,242,234,.35);animation:demo-drop 2.6s ease-in infinite}
.stone-demo.rise i:nth-child(3){animation:demo-land 1.6s ease-out infinite}
@keyframes demo-slide{0%,100%{translate:-80px 0}45%,55%{translate:0 0}75%{translate:80px 0}}
@keyframes demo-drop{0%,25%{translate:0 0;opacity:1}80%,100%{translate:20px 80px;opacity:0}}
@keyframes demo-land{0%,20%{translate:50px -30px}50%,100%{translate:0 0}}
/* The step label and the dots pill sit on the card's centre line. The dot is centred in its button with flex: as a grid,
   the hidden step number became a second row and pushed every dot into the top half. */
.guide-screen>.eyebrow{text-align:center}
.guide-progress{display:flex;width:max-content;gap:0;padding:0 6px;margin:6px auto 0;border-radius:999px}
.guide-progress button{width:40px;height:44px;padding:0;border:0;background:none;font-size:0;display:flex;align-items:center;justify-content:center}
.guide-progress button::before{content:'';width:8px;height:8px;border-radius:999px;background:rgba(246,242,234,.45);transition:width .2s}
.guide-progress [aria-current=step]::before{width:22px;background:var(--cream)}
.guide-screen .journey-actions{margin-top:14px}

/* Queue: the search clock in a glass ring. */
#journey .queue-elapsed{font-size:0}
.queue-elapsed{position:relative;align-self:center;width:180px;height:180px;margin:6px auto 16px;border-radius:50%;display:grid;place-items:center;align-content:center;font-size:0;color:var(--text)}
.queue-elapsed span{font:600 44px/1 var(--ui);font-variant-numeric:tabular-nums}
.queue-elapsed::after{content:'searching';font:400 14px var(--ui);color:var(--muted);margin-top:8px}
.queue-elapsed::before{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid transparent;border-top-color:rgba(246,242,234,.85);animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.queue-status{font:500 15px/1.5 var(--ui);color:var(--text);margin:0 0 6px!important}
.queue-guidance{min-height:3em}
.queue-light{display:inline-block;width:9px;height:9px;margin-right:10px;border-radius:50%;background:var(--jade);animation:pulse 1.5s infinite}
@keyframes pulse{50%{opacity:.3}}
.journey-code{font:600 46px/1 var(--ui);letter-spacing:.3em;color:var(--amber-ink);margin:12px 0}
#queue-time{font:600 28px var(--ui);font-variant-numeric:tabular-nums;margin:6px 0!important}
.journey-panel{padding:16px;border-radius:22px;margin-top:8px}
.journey-field{display:grid;gap:6px;margin:12px 0;font:500 12px var(--ui);letter-spacing:.06em;color:var(--muted)}
.journey-field input,.vs-field input{width:100%;min-height:48px;padding:0 18px;border-radius:999px;font:500 17px var(--ui);color:var(--text)}

/* Matchup: two player rows and a VS seal. */
body[data-screen=matchup] .journey-center{margin-top:auto}
.matchup{display:grid;grid-template-columns:1fr;gap:0;margin:14px 0 6px;position:relative}
.matchup>span{justify-self:center;display:grid;place-items:center;width:44px;height:44px;margin:-10px 0;z-index:1;border-radius:50%;
  background:var(--base);border:1px solid var(--glass-edge);font:400 18px var(--display);color:var(--cream)}
.guest-card{display:grid;grid-template-columns:56px 1fr auto;grid-template-areas:"av name pill" "av meta pill" "av hint pill";align-items:center;column-gap:12px;
  min-width:0;padding:14px 16px;border-radius:24px;text-align:left;position:relative}
.guest-card>small:first-child{display:none}
.guest-avatar,.member-avatar{grid-area:av;width:52px;height:52px;margin:0;border-radius:50%;object-fit:cover;display:grid;place-items:center;
  background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);font:400 24px var(--display);color:var(--cream)}
.guest-card h3{grid-area:name;font:600 20px/1.2 var(--ui)!important;overflow-wrap:anywhere;margin:0}
.guest-card>small:not(:first-child){grid-area:meta;font:400 13px var(--ui);color:var(--muted)}
.guest-card>p{display:none}
.guest-card .kingdom-inline{display:none}
.house-avatar{padding:10px;image-rendering:pixelated}
.house-avatar[data-house=onyx-forge]{border-color:var(--onyx-forge)}.house-avatar[data-house=chrome-manor]{border-color:var(--chrome-manor)}
.house-avatar[data-house=gilded-court]{border-color:var(--gilded-court)}.house-avatar[data-house=sapphire-keep]{border-color:var(--sapphire-keep)}
.guest-card>small.matchup-profile-hint{grid-area:hint;font:500 12px var(--ui)!important;color:var(--muted)!important;margin-top:2px}
.ready-pill{grid-area:pill;align-self:center;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font:600 12px var(--ui);
  text-transform:lowercase;border:1px solid rgba(255,255,255,.3);color:var(--muted)}
.ready-pill::first-letter{text-transform:uppercase}
.matchup .guest-card{cursor:pointer}
.matchup .guest-card:hover{background:rgba(255,255,255,.18)}
#ready-status{min-height:3em;margin-top:10px!important}

/* The founder's ghost: two numbers and three rules. */
.stat-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
.stat{display:flex;flex-direction:column;padding:12px 14px;border-radius:22px}
.stat small{font:500 12px var(--ui);color:var(--muted)}
.stat b{font:600 34px/1.1 var(--ui);font-variant-numeric:tabular-nums}
.stat span{font:400 12px var(--ui);color:var(--muted)}
.rule-list{list-style:none;counter-reset:rule;margin:0 0 8px;padding:8px 14px;border-radius:22px}
.rule-list li{counter-increment:rule;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:start;padding:8px 0;font:400 14px/1.45 var(--ui)}
.rule-list li::before{content:counter(rule);display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.3);font:600 12px var(--ui)}
.compact-screen .rule-list,.compact-screen .stat{background:rgba(255,255,255,.06);-webkit-backdrop-filter:none;backdrop-filter:none}

/* The Wall and qualifying boards: one smoke list, rows with House emblems. */
.wall-list{list-style:none;counter-reset:wall;margin:6px 0 10px;padding:4px 12px;border-radius:24px}
.wall-list li{counter-increment:wall;display:grid;grid-template-columns:22px 32px minmax(0,1fr) auto auto;column-gap:10px;align-items:center;min-height:52px;
  padding:6px 2px;border-bottom:1px solid rgba(255,255,255,.08);font:400 13px var(--ui);color:var(--muted)}
.wall-list li:last-child{border-bottom:0}
.wall-list li::before{content:counter(wall);font:500 13px var(--ui);color:var(--muted)}
.wall-list li>.emblem{width:30px;height:30px;padding:4px;border-radius:50%;border:1.5px solid var(--glass-edge);background:rgba(255,255,255,.06);image-rendering:pixelated}
.wall-list li[data-house=onyx-forge]>.emblem{border-color:var(--onyx-forge)}
.wall-list li[data-house=chrome-manor]>.emblem{border-color:var(--chrome-manor)}
.wall-list li[data-house=gilded-court]>.emblem{border-color:var(--gilded-court)}
.wall-list li[data-house=sapphire-keep]>.emblem{border-color:var(--sapphire-keep)}
.wall-list b{font:500 16px var(--ui);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wall-list li>span:nth-of-type(2){font:600 16px var(--ui);color:var(--text);font-variant-numeric:tabular-nums}
.wall-list li>span:nth-of-type(1){display:none}
body[data-screen=wall] .journey-center{margin-top:0}
body[data-screen=wall] .compact-screen{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none;padding:0}

/* Qualifying: House tabs, the board, and (desktop) who holds a seat so far. */
.qualifying-screen{max-width:none}
.qual-main{padding:12px;border-radius:28px}
.qual-you{display:flex;flex-direction:column;gap:2px;padding:12px 16px;margin-bottom:10px;border-radius:22px;border-color:rgba(240,181,74,.55)}
.qual-you b{font:600 15px var(--ui)}
.qual-you span{font:400 12px var(--ui);color:var(--muted)}
.qual-tabs,.round-tabs{display:flex;gap:4px;padding:4px;border-radius:999px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.qual-tabs button,.round-tabs button{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 12px;border:0;border-radius:999px;
  background:none;font:500 14px var(--ui);color:var(--text);white-space:nowrap}
.qual-tabs button .emblem{width:20px;height:20px;image-rendering:pixelated}
.qual-tabs [aria-selected=true],.round-tabs [aria-selected=true]{background:var(--cream);color:var(--on-cream)}
.qual-grid>.qual-house{display:none}
[data-show=onyx-forge] .qual-house[data-house=onyx-forge],[data-show=chrome-manor] .qual-house[data-house=chrome-manor],
[data-show=gilded-court] .qual-house[data-house=gilded-court],[data-show=sapphire-keep] .qual-house[data-house=sapphire-keep],
[data-show=any] .qual-house[data-house=any]{display:block}
.qual-house h2{display:flex;align-items:center;gap:8px;font:600 14px var(--ui)!important;color:var(--muted);margin:2px 4px 6px!important}
.qual-house h2 .emblem{width:20px;height:20px;image-rendering:pixelated}
.qual-house .journey-note{padding:12px 6px}
.qual-list{margin:0;padding:0 4px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border:0;box-shadow:none}
.qual-list li{grid-template-columns:22px minmax(0,1fr) auto auto auto}
.qual-cross .qual-list li{grid-template-columns:22px minmax(0,1fr) auto auto auto auto}
.qual-list li>span:nth-of-type(1){display:inline;font:500 13px var(--ui);color:var(--muted)}
.qual-list li>span:nth-of-type(2){font:600 15px var(--ui);color:var(--jade-ink);font-variant-numeric:tabular-nums;text-align:right}
.qual-cross .qual-list li>span:nth-of-type(1){font-size:12px}
.qual-cross .qual-list li>span:nth-of-type(2){font:500 13px var(--ui);color:var(--muted)}
.qual-cross .qual-list li>span:nth-of-type(3){font:600 15px var(--ui);color:var(--jade-ink);text-align:right}
.qual-list li[data-you]{margin:0 -8px;padding:6px 10px;border-radius:16px;background:rgba(240,181,74,.12);border-bottom-color:transparent}
.qual-tag:empty{display:none}
.qual-tag{justify-self:end;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font:600 11px var(--ui);letter-spacing:.06em;color:var(--amber-ink);border:1px solid var(--amber)}
[data-projected=house-seat] .qual-tag{background:var(--amber);color:#1B1306;border-color:var(--amber)}
[data-projected=reserve] .qual-tag{color:rgba(246,242,234,.82);border-color:rgba(255,255,255,.35)}
.qual-main>.journey-note{padding:8px 6px 2px}
.qual-side{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.seats-so-far{display:none;padding:14px 16px;border-radius:28px}
.seats-so-far h2{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px!important}
.seats-so-far h2 span{display:flex;align-items:center;gap:6px;font:400 12px var(--ui);color:var(--muted)}
.seats-so-far h2 i{width:8px;height:8px;border-radius:50%;background:var(--amber)}
.seats-so-far h2 i[data-kind=bonus]{background:none;border:1.5px solid var(--amber);margin-left:6px}
.seat-house{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:start;padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.seat-house .emblem{width:40px;height:40px;padding:7px;border-radius:50%;border:1.5px solid var(--glass-edge);image-rendering:pixelated}
.seat-house[data-house=onyx-forge] .emblem{border-color:var(--onyx-forge)}.seat-house[data-house=chrome-manor] .emblem{border-color:var(--chrome-manor)}
.seat-house[data-house=gilded-court] .emblem{border-color:var(--gilded-court)}.seat-house[data-house=sapphire-keep] .emblem{border-color:var(--sapphire-keep)}
.seat-house b{font:600 14px var(--ui)}
.seat-house p{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px!important}
.seat-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 10px;border-radius:999px;font:500 12px var(--ui)}
.seat-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--amber)}
.seat-chip[data-kind=bonus]{border-color:rgba(240,181,74,.6)}
.seat-chip[data-kind=bonus]::before{background:none;border:1.5px solid var(--amber)}

/* Bracket: round tabs on phones, four columns on desktop. */
.bracket-screen{max-width:none}
.bracket-screen .bracket{display:grid;grid-template-columns:1fr;gap:8px;padding:10px;border-radius:28px;margin:0 0 10px}
.bracket-screen .bracket>section{display:none;gap:8px}
.bracket-screen[data-show="1"] [data-round="1"],.bracket-screen[data-show="2"] [data-round="2"],.bracket-screen[data-show="3"] [data-round="3"],.bracket-screen[data-show="4"] [data-round="4"]{display:grid}
#journey .bracket h2{font:500 12px var(--ui)!important;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 6px 2px!important}
.bracket-match{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:10px;padding:8px 14px;border-radius:22px}
.bracket-match>p{grid-column:1;display:flex;align-items:center;gap:8px;min-width:0;margin:2px 0!important;font:500 15px var(--ui);color:var(--muted)}
.bracket-match>p .emblem{width:20px;height:20px;flex:none;image-rendering:pixelated}
.bracket-match>p b{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bracket-match>p small{display:none}
.bracket-match>p em{margin-left:auto;font:600 15px var(--ui);font-style:normal;color:var(--text);font-variant-numeric:tabular-nums}
.bracket-match>p[data-won=true] b,.bracket-match>p[data-won=true] em{color:var(--amber-ink)}
.bracket-match .seed{display:none}
.bracket-empty{font:400 13px var(--ui);color:var(--faint)}
.ghost-dot{width:20px;height:20px;flex:none;border-radius:50%;background:radial-gradient(circle,var(--jade) 0 35%,transparent 40%),rgba(127,224,188,.18);border:1px solid rgba(127,224,188,.6)}
.bracket-state{grid-column:2;grid-row:1/span 2;display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px;font:600 12px var(--ui);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:var(--muted)}
.bracket-state[data-status=open]{background:var(--live);border-color:var(--live);color:#fff}
.bracket-match[data-status=open]{border-color:rgba(224,90,71,.7)}
.bracket-screen>.journey-note{margin:0 4px}

/* The Cup: what is at stake. */
.stakes-screen{max-width:620px}
.podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:6px;margin:6px 0 12px}
.podium-step{display:flex;flex-direction:column;gap:6px;min-width:0}
.podium-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:12px 8px;border-radius:22px;min-width:0}
.podium-card img{width:44px;height:44px;object-fit:contain;image-rendering:pixelated}
.podium-card b{font:600 13px/1.25 var(--ui)}
.podium-card p,.podium-card li{font:500 12px/1.35 var(--ui);color:var(--text)}
.podium-card em{font:400 11px/1.3 var(--ui);font-style:normal;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:4px}
.podium-card em span{display:inline-flex;align-items:center;min-height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(240,181,74,.6);color:var(--amber-ink);font-weight:600}
.podium-step[data-place="1"] .podium-card{padding:14px 10px;border:1px solid rgba(240,181,74,.7);background:linear-gradient(180deg,rgba(240,181,74,.22),rgba(240,181,74,.08));
  -webkit-backdrop-filter:blur(var(--blur)) saturate(140%);backdrop-filter:blur(var(--blur)) saturate(140%);box-shadow:var(--glass-hl),0 12px 30px rgba(0,0,0,.3)}
.podium-step[data-place="1"] img{width:58px;height:58px}
.podium-step[data-place="1"] b{font-size:15px;color:var(--amber-ink)}
.podium-card ul{margin:2px 0 0;padding:0 0 0 14px;text-align:left;display:grid;gap:4px}
.podium-card li::marker{color:var(--amber)}
.podium-base{display:grid;place-items:center;height:34px;border-radius:14px;font:600 16px var(--ui);background:rgba(16,24,21,.55);border:1px solid var(--smoke-edge)}
.podium-step[data-place="1"] .podium-base{height:44px;background:var(--amber);color:#1B1306;border-color:var(--amber)}
.stakes-points{padding:14px;border-radius:24px;margin-bottom:10px}
.stakes-points h2{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px!important;font-size:16px!important}
.stakes-points h2 span{font:400 12px var(--ui);color:var(--muted)}
.points-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0}
.points-grid>div{display:flex;justify-content:space-between;align-items:center;min-height:40px;padding:0 14px;border-radius:999px}
.points-grid dt{font:500 13px var(--ui)}
.points-grid dd{margin:0;font:600 15px var(--ui);font-variant-numeric:tabular-nums}
.points-grid [data-top]{border-color:rgba(230,184,79,.7)}
.points-grid [data-top] dd{color:#FFE2A3}
.stakes-points .journey-note{margin-top:10px}
.stakes-when{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 16px;border-radius:999px;font:500 14px var(--ui);text-align:center;margin:4px 0 0!important}
.stakes-when::before{content:'';flex:none;width:16px;height:16px;background:var(--amber);-webkit-mask:var(--i-cal) center/contain no-repeat;mask:var(--i-cal) center/contain no-repeat}

/* The founder studio (private) reuses the sheet. */
body[data-screen=founder] .journey-center{max-width:760px;padding:20px;border-radius:28px;background:var(--smoke);-webkit-backdrop-filter:blur(var(--blur-sheet));backdrop-filter:blur(var(--blur-sheet));border:1px solid var(--smoke-edge)}
body[data-screen=founder] #journey h2{margin:22px 0 8px}
body[data-screen=founder] #journey ol{padding-left:20px;font-size:14px;color:var(--muted)}

/* ================================================================== 6. play */
#stage{position:absolute;left:0;right:0;top:calc(var(--head-h) + 52px);bottom:calc(var(--dock-h) + 30px);touch-action:none;outline:none;cursor:crosshair}
#stage:focus-visible{outline:2px solid var(--cream);outline-offset:-4px;border-radius:24px}
#stage canvas{width:100%;height:100%;display:block}
/* Menus need nothing moving behind the glass: the tower canvas is hidden until play. */
body:not([data-screen=game]) #stage{visibility:hidden}

/* Legacy solo surfaces (Cup human run and the founder studio): kept compact and out of the way. */
.intro{display:none}
.scoreboard{position:absolute;top:calc(14px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:5;display:flex;align-items:center;gap:8px;pointer-events:none}
.score-block{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:86px;height:46px;padding:0 16px;border-radius:999px;background:rgba(16,24,21,.62);border:1px solid var(--glass-edge)}
.score-block .eyebrow{display:none}
.score-block>strong{font:600 20px/1 var(--ui);font-variant-numeric:tabular-nums}
.personal{font:400 10px var(--ui);color:var(--muted)}
.personal b{font-weight:600;color:var(--text)}
.time-block{display:flex;align-items:center;justify-content:center;gap:6px;height:46px;min-width:96px;padding:0 18px;border-radius:999px;position:relative;overflow:hidden;
  background:rgba(16,24,21,.62);border:1px solid var(--glass-edge);box-shadow:var(--glass-hl)}
.time-block>.eyebrow{display:none}
#timer{font:600 22px/1 var(--ui);font-variant-numeric:tabular-nums}
#timer span{font-size:0}
#timer span::after{content:'sec';font:400 13px var(--ui);color:var(--muted);margin-left:5px}
.time-track{position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:rgba(255,255,255,.14)}
#time-fill{height:100%;width:100%;border-radius:2px;background:var(--amber);transform-origin:left}
.milestone{position:absolute;right:var(--gutter);bottom:calc(var(--dock-h) + 40px);z-index:4;width:92px;font:500 11px var(--ui);color:var(--muted);pointer-events:none}
.milestone b{display:block;margin:4px 0;font:600 14px var(--ui);color:var(--text)}
.milestone>div{height:3px;border-radius:3px;background:rgba(255,255,255,.14)}
.milestone i{display:block;height:100%;width:0;border-radius:3px;background:var(--jade);transition:width .2s}
body[data-versus]:not([data-versus=off]) :is(.milestone,.score-block,#vs-rival){display:none!important}
#vs-open,#vs-panel{display:none!important}

/* The action: a glass pill with a cream ring icon, in the thumb zone. */
.action-dock{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(16px + env(safe-area-inset-bottom));z-index:6;
  display:flex;flex-direction:column;align-items:center;pointer-events:none}
#hint{order:2;margin:8px 0 0;font:400 13px/1.4 var(--ui);color:var(--muted);text-align:center;text-shadow:0 1px 6px rgba(0,0,0,.6)}
#controls{display:none}
#action{pointer-events:auto;position:relative;display:block;width:100%;max-width:600px;height:var(--dock-h);min-height:0;padding:0 84px 0 24px;border-radius:999px;text-align:left;
  font:600 19px/1.2 var(--ui);color:var(--text);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(var(--blur)) saturate(150%);backdrop-filter:blur(var(--blur)) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px rgba(0,0,0,.3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#action::after{content:'';position:absolute;right:6px;top:50%;width:58px;height:58px;margin-top:-29px;border-radius:50%;
  background:var(--ic-ring-dark) center/24px no-repeat,var(--cream);box-shadow:0 0 0 6px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.3)}
body:not([data-state=playing]) #action::after{background:var(--ic-play-dark) 56% 50%/22px no-repeat,var(--cream)}
/* A button centres its content: room for the second line is made at the bottom. */
body[data-state=playing] #action{padding-bottom:18px}
body[data-state=playing] #action::before{content:'or tap anywhere';position:absolute;left:24px;top:41px;font:400 12px var(--ui);color:var(--muted);text-transform:none}
#action:disabled{opacity:.7}
#action:active{transform:translateY(1px)}
body[data-state=over] .action-dock{opacity:0;pointer-events:none}
body[data-state=over] .action-dock *{pointer-events:none!important}
body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #hint{display:none}

/* Feedback: the CRITICAL call-out rides above the landing ring. It moves every frame, so it is solid, never blurred. */
#feedback{position:absolute;top:0;left:0;z-index:7;max-width:calc(100% - 16px);text-align:center;font:600 16px/1.2 var(--ui);color:var(--text);opacity:0;transition:opacity .13s;pointer-events:none;
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
#feedback.visible{opacity:1}
#feedback.critical{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap;width:auto!important;max-width:none;padding:5px 12px;border-radius:999px;
  font:600 14px/1.2 var(--ui);color:var(--jade-cta);text-shadow:none;background:rgba(20,64,50,.82);border:1px solid rgba(127,224,188,.7);box-shadow:0 6px 20px rgba(0,0,0,.3)}
#feedback.critical.visible{transition:none}
#feedback.critical strong{font:inherit;color:#fff}
#feedback.critical small{display:inline;font:500 11px var(--ui);color:var(--jade-ink);letter-spacing:0}
#feedback.critical small::before{content:'· '}
#score.critical-score,#battle-you-score.critical-score{color:var(--jade-cta);transform-origin:center}

/* Battle HUD: back, clock and mode on top; the two players under it; the lead chip under the clock. */
#battle-hud{position:absolute;left:0;right:0;top:0;z-index:5;pointer-events:none}
#battle-mode{display:none}
.battle-player{position:absolute;top:calc(70px + env(safe-area-inset-top));display:grid;grid-template-columns:auto auto;grid-template-areas:"em name" "em score";align-items:center;column-gap:8px;
  max-width:calc(50% - 22px);min-height:54px;padding:4px 16px 4px 4px;border-radius:999px;pointer-events:auto;cursor:pointer;
  background:rgba(16,24,21,.6);border:1.5px solid var(--glass-edge);box-shadow:var(--glass-hl)}
.battle-player:first-of-type{left:var(--gutter)}
.battle-player:last-of-type{right:var(--gutter);grid-template-columns:auto auto;grid-template-areas:"name em" "score em";padding:4px 4px 4px 16px;text-align:right}
.battle-player .eyebrow,.battle-player small{display:none}
/* This player's run has ended while the match clock keeps running: the card says so, quietly. */
.battle-player[data-run=ended]{opacity:.8}
/* Status on its own line beside the score, never appended to the name (Evan, 22 Oct: "Yudy · run end…" was cut off). */
.battle-player[data-run=ended] b::after,.battle-player[data-guest] b::after{display:inline-block;margin:0 0 0 6px;font:600 10px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);vertical-align:middle;white-space:nowrap}
.battle-player[data-run=ended] b::after{content:'run ended'}
.battle-player[data-guest] b::after{content:'guest'}
.battle-player[data-guest][data-run=ended] b::after{content:'guest · run ended'}
.battle-player strong{grid-area:name;align-self:end;font:500 13px/1.1 var(--ui);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.battle-player b{grid-area:score;align-self:start;font:600 24px/1.05 var(--ui);font-variant-numeric:tabular-nums}
.battle-emblem{grid-area:em;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.1) center/26px no-repeat;image-rendering:pixelated;display:grid;place-items:center;font:400 20px var(--display);font-style:normal;color:var(--cream)}
.battle-emblem::before{content:attr(data-initial)}
.battle-player[data-house]:not([data-house=""]) .battle-emblem::before{content:none}
.battle-player[data-house=onyx-forge]{border-color:var(--onyx-forge)}.battle-player[data-house=onyx-forge] .battle-emblem{background-image:url('./assets/kingdom/art/emblem-onyx-forge-px.png');background-color:rgba(224,90,71,.28)}
.battle-player[data-house=chrome-manor]{border-color:var(--chrome-manor)}.battle-player[data-house=chrome-manor] .battle-emblem{background-image:url('./assets/kingdom/art/emblem-chrome-manor-px.png');background-color:rgba(201,209,219,.22)}
.battle-player[data-house=gilded-court]{border-color:var(--gilded-court)}.battle-player[data-house=gilded-court] .battle-emblem{background-image:url('./assets/kingdom/art/emblem-gilded-court-px.png');background-color:rgba(230,184,79,.28)}
.battle-player[data-house=sapphire-keep]{border-color:var(--sapphire-keep)}.battle-player[data-house=sapphire-keep] .battle-emblem{background-image:url('./assets/kingdom/art/emblem-sapphire-keep-px.png');background-color:rgba(91,143,224,.32)}
.battle-player[data-kind=ghost]{border-color:rgba(127,224,188,.7)}.battle-player[data-kind=ghost] .battle-emblem{background-color:rgba(127,224,188,.2);color:var(--jade-cta)}
.battle-player:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
#battle-lead:empty{display:none}
#battle-lead{position:absolute;left:50%;top:calc(132px + env(safe-area-inset-top));transform:translateX(-50%);display:inline-block;margin:0;padding:6px 14px;border-radius:999px;
  font:600 13px/1.2 var(--ui);white-space:nowrap}
/* In a battle the clock is the header's centre pill. */
body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) .scoreboard{top:calc(14px + env(safe-area-inset-top))}
body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #stage{top:calc(var(--head-h) + 92px);left:0;right:0}
body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #stage::after{content:'';position:absolute;left:50%;top:6%;bottom:10%;width:1px;
  background:linear-gradient(transparent,rgba(255,255,255,.2) 20%,rgba(255,255,255,.2) 80%,transparent);pointer-events:none}
#vs-count{position:absolute;left:0;right:0;top:36%;z-index:8;text-align:center;font:400 clamp(96px,26vw,160px)/1 var(--display);color:var(--cream);text-shadow:0 6px 40px rgba(0,0,0,.6);pointer-events:none}
#vs-rival{display:none!important}

/* Emotes (online matches): small pills above the action. */
#emotes{position:absolute;left:50%;bottom:calc(var(--dock-h) + 28px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:7;display:flex;gap:6px;max-width:calc(100% - 24px)}
#emotes button{min-height:40px;padding:0 12px;border-radius:999px;font:500 13px var(--ui);white-space:nowrap}
#emotes button:disabled{opacity:.5}
#emote-mute{font-size:12px!important}
#emote-message{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--dock-h) + 80px + env(safe-area-inset-bottom));z-index:8;max-width:85%;margin:0;padding:8px 16px;border-radius:999px;
  background:rgba(16,24,21,.85);border:1px solid var(--glass-edge);font:500 14px var(--ui);pointer-events:none;text-align:center}
#emote-message:empty{display:none}

/* ================================================================== 7. the result sheet */
.result{position:absolute;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));z-index:9;
  max-height:calc(100% - var(--head-h) - 24px);overflow:auto;padding:22px 18px 18px;border-radius:28px;text-align:center}
.result>.eyebrow{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;margin:0 auto 8px;border-radius:999px;font:600 11px var(--ui);letter-spacing:.08em;color:var(--amber-ink);
  background:var(--amber-wash);border:1px solid rgba(240,181,74,.6)}
.result h2{font:400 30px/1.1 var(--display);margin:0 0 14px;text-wrap:balance}
.result-numbers{display:flex;justify-content:center;gap:10px;margin-bottom:12px}
.result-numbers>div{flex:1;max-width:180px;padding:12px;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid var(--glass-edge)}
.result-numbers strong{display:block;font:600 40px/1.1 var(--ui);font-variant-numeric:tabular-nums}
.result-numbers span{font:500 11px var(--ui);letter-spacing:.06em;color:var(--muted)}
#result-copy{font:400 15px/1.5 var(--ui);color:var(--muted);margin:0 0 14px}
.result #retry{width:100%;margin-top:6px}
#result-lobby{display:none}
#share{width:100%;margin-top:8px;background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;font-size:14px;color:var(--muted)}
#result-note{display:block!important;margin:10px 0 0;font:400 12px/1.5 var(--ui);color:var(--muted)}
/* Versus: verdict chip, headline, the two score cards. */
#result-versus{margin:0}
#result-versus::before{content:'Still building';display:inline-flex;align-items:center;min-height:28px;padding:0 12px;margin-bottom:8px;border-radius:999px;font:600 11px var(--ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);border:1px solid rgba(255,255,255,.3)}
#result-versus[data-outcome=win]::before{content:'Victory';color:var(--amber-ink);background:var(--amber-wash);border-color:rgba(240,181,74,.6)}
#result-versus[data-outcome=loss]::before{content:'Defeat';color:var(--text);background:rgba(255,255,255,.08)}
#result-versus[data-outcome=draw]::before{content:'Level';color:var(--text);background:rgba(255,255,255,.08)}
#result-verdict{font:400 28px/1.12 var(--display);margin:0 0 14px;text-wrap:balance}
#result-versus[data-outcome=win] #result-verdict{color:var(--cream)}
#result-tally,#result-tally-names{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#result-cards{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:0 0 12px}
#result-cards>i{font:500 12px var(--ui);font-style:normal;color:var(--muted)}
.score-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px;border-radius:22px;min-width:0;border-width:1.5px}
.score-card .card-emblem{width:30px;height:30px;image-rendering:pixelated}
.score-card span{font:500 14px var(--ui);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.score-card b{font:600 40px/1.1 var(--ui);font-variant-numeric:tabular-nums}
.score-card[data-won=true] b{color:var(--amber)}
/* A run still going: its number is live, so the card reads as live (dashed edge, a quiet label), never as a final. */
.score-card small{font:600 11px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.score-card[data-run=building]{border-style:dashed}
.score-card[data-run=building] small{color:var(--jade-ink)}
.score-card[data-house=onyx-forge]{border-color:var(--onyx-forge)}.score-card[data-house=chrome-manor]{border-color:var(--chrome-manor)}
.score-card[data-house=gilded-court]{border-color:var(--gilded-court)}.score-card[data-house=sapphire-keep]{border-color:var(--sapphire-keep)}
.score-card[data-kind=ghost]{border-color:rgba(127,224,188,.6)}
#result-record{display:inline-flex;align-items:center;min-height:30px;padding:4px 14px;margin:0 0 4px;border-radius:999px;font:600 11px/1.3 var(--ui);letter-spacing:.06em;color:var(--text);max-width:100%}
#result-record::before{content:'RECORD\00a0'}
/* Personal best: one quiet line under the record (display only). */
#result-best{margin:2px 0 6px;font:500 13px/1.4 var(--ui);color:var(--muted)}
#result-best:empty{display:none}
#result-best[data-new=true]{color:var(--amber-ink);font-weight:600}
.arrival>.best-line{order:6;margin:4px 2px 0;font:500 13px/1.4 var(--ui);color:var(--muted)}
#result-record[data-kind]::before{content:none}
body:is([data-versus=racing],[data-versus=settled]) .result :is(h2,.eyebrow,.result-numbers,#result-copy,#share){display:none}
body:is([data-versus=racing],[data-versus=settled]) .result #retry{position:sticky;bottom:0;z-index:1}
body:is([data-versus=racing],[data-versus=settled]) #result-lobby{display:inline-flex;width:100%;margin-top:8px}
body[data-versus=racing] .result #retry{opacity:.6}
/* While the run is still live (a victory lap, or waiting on the rival), the sheet sits above the action. */
body[data-state=playing] .result{bottom:calc(var(--dock-h) + 28px + env(safe-area-inset-bottom));max-height:46%}
body[data-state=playing] #result-lobby{display:none!important}

/* ================================================================== 8. dialogs */
dialog{color:var(--text)}
dialog::backdrop{background:rgba(8,12,11,.7)}
#honours{width:620px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border-radius:28px;font:400 15px/1.5 var(--ui)}
#honours-close{position:sticky;top:0;float:right;margin:-4px -4px 0 8px;width:44px;height:44px;z-index:1}
#honours .eyebrow{color:var(--muted)}
#honours h2{font:400 32px/1.1 var(--display);margin:6px 0 10px}
#honours>p{color:var(--muted);margin:0 0 6px}
.honour-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0}
.honour-grid article{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:14px 12px;border-radius:24px}
.honour-grid img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.honour-grid h3{font:600 15px var(--ui);margin:6px 0 0}
.honour-grid p{font:400 13px/1.4 var(--ui);color:var(--muted);margin:0}
.honour-mark{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:1.5px solid var(--jade);color:var(--jade-ink);font:600 9px/1.15 var(--ui);letter-spacing:.06em;text-align:center;background:var(--jade-wash)}
.honour-state{display:inline-flex;align-items:center;min-height:26px;margin-top:6px;padding:0 12px;border-radius:999px;font:600 11px var(--ui);color:var(--muted);border:1px solid rgba(255,255,255,.25)}
[data-honour][data-earned=true] .honour-state{color:var(--amber-ink);border-color:var(--amber);background:var(--amber-wash)}
[data-honour][data-earned=false] img,[data-honour][data-earned=false] .honour-mark{opacity:.6;filter:saturate(.5)}
.honours-rule{font-size:13px!important}
#honours-note{font-size:12px;color:var(--muted)}
#profile-dialog{max-width:calc(100vw - 24px);max-height:90dvh;overflow:auto;padding:18px;border-radius:28px}
#profile-dialog>button{display:inline-flex;min-height:44px;margin:0 0 10px;padding:0 16px;border-radius:999px}
#profile-dialog .guest-card{width:300px;max-width:100%}
#profile-dialog .hpc{max-width:100%}
#profile-dialog .journey-note{margin:0 0 10px;font:400 13px var(--ui);color:var(--muted)}

/* ================================================================== 9. responsive */
/* Phones (portrait): the lobby's main action and two round shortcuts live in a dock above the footer. */
@media (max-width:760px){
  body[data-screen=home] #journey{padding-bottom:calc(var(--foot-h) + var(--dock-h) + 22px)}
  .arrival .dock-primary{position:fixed;z-index:20;left:calc(max(12px,env(safe-area-inset-left)) + 70px);right:calc(max(12px,env(safe-area-inset-right)) + 70px);
    bottom:calc(var(--foot-h) + 4px + env(safe-area-inset-bottom));height:var(--dock-h);padding:0 74px 0 24px;
    background:rgba(255,255,255,.14);color:var(--text);border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px rgba(0,0,0,.3)}
  .arrival .dock-primary .sub{color:var(--muted)}
  .arrival .dock-primary::after{width:58px;height:58px;margin-top:-29px;background:var(--ic-play-dark) 56% 50%/22px no-repeat,var(--cream)!important;box-shadow:0 0 0 6px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.3)}
  .arrival .dock-primary .label{font-size:19px}
  .arrival:not(:has([data-action=bracket])) .dock-primary{right:max(12px,env(safe-area-inset-right))}
  .arrival .dock-icon{position:fixed;z-index:20;bottom:calc(var(--foot-h) + 8px + env(safe-area-inset-bottom));width:62px;height:62px;min-height:0;padding:0!important;border-radius:50%;font-size:0}
  .arrival .dock-icon::before{content:'';position:absolute;inset:0;margin:auto;width:24px;height:24px;background:currentColor;-webkit-mask:var(--dock-i) center/contain no-repeat;mask:var(--dock-i) center/contain no-repeat}
  .arrival [data-action=wall].dock-icon{left:max(12px,env(safe-area-inset-left));--dock-i:var(--i-wall)}
  .arrival [data-action=bracket].dock-icon{right:max(12px,env(safe-area-inset-right));--dock-i:var(--i-cup)}
  .arrival>.journey-note{order:6;margin:4px 2px 0}
  .arrival>.progress-line{order:7;margin:0 2px}
  .arrival>.house-strip{order:8;margin-top:10px}
  /* Footer: Event honours and the activity counter, one quiet line under the dock. */
  footer{height:var(--foot-h);justify-content:center;gap:4px}
  /* Long menus scroll under the footer: a scrim keeps both legible (the lobby keeps the open street). */
  body:not([data-screen=home]) footer{height:calc(var(--foot-h) + 18px);padding-top:18px;background:linear-gradient(180deg,rgba(14,20,18,0),rgba(14,20,18,.94) 45%)}
  .qual-tabs button:not([aria-selected=true]):not([data-qtab=any]) span{display:none}
  .qual-tabs button{padding:0 10px;font-size:13px}
  #honours-open{min-height:44px}
  #arena-presence{min-height:36px}
  #honours-open,#arena-presence{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
  /* Battle on a phone. */
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #stage{bottom:calc(var(--dock-h) + 26px)}
}
@media (max-width:400px){
  footer #arena-presence>span{display:none}
  footer #arena-presence button{font-size:0;width:auto;padding:0 8px;margin:0}
  footer #arena-presence button::before{content:attr(data-short);font:500 13px var(--ui);color:var(--text)}
  footer #presence-explanation{right:0;left:auto}
}
@media (max-width:360px){
  .battle-player strong{font-size:12px}
  .battle-player b{font-size:20px}
  .qual-list li,.qual-cross .qual-list li{grid-template-columns:20px minmax(0,1fr) auto auto;column-gap:6px}
  .qual-list li>span:nth-of-type(1){display:none}
  .stat b{font-size:28px}
  .podium-card{padding:10px 6px}
}
/* Short phones (320x568): the title and the explanation shrink so the action stays on screen. */
@media (max-width:760px) and (max-height:650px){
  :root{--head-h:66px;--dock-h:60px}
  body[data-screen=home] #journey h1{font-size:40px;margin:0 0 4px}
  .arrival>.eyebrow,.arrival>.progress-line,.strip-label{display:none}
  .arrival .dock-primary .label{white-space:nowrap}
  .arrival .dock-primary .sub{display:none}
  .cup-copy>span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
  .arrival .journey-actions .secondary,.arrival .journey-links .text-button:not(.dock-icon){font-size:14px;padding:0 14px}
  .house-strip{justify-content:center}
  .arrival .dock-icon{width:50px;height:50px;bottom:calc(var(--foot-h) + 9px + env(safe-area-inset-bottom))}
  .arrival .dock-primary{left:calc(max(12px,env(safe-area-inset-left)) + 56px);right:calc(max(12px,env(safe-area-inset-right)) + 56px);padding:0 56px 0 18px}
  .arrival .dock-primary .label{font-size:16px!important}
  .arrival .dock-primary::after{width:48px!important;height:48px!important;margin-top:-24px!important}
  .arrival .dock-primary .label{font-size:17px}
  .house-cell{width:50px;height:50px}
  .house-cell .emblem{width:22px;height:22px}
  .compact-screen,.guide-screen{padding:16px}
  #journey .compact-screen h1,#journey .guide-screen h1{font-size:30px}
  .stone-demo{height:120px}
  .queue-elapsed{width:140px;height:140px}
  .queue-elapsed span{font-size:34px}
  .battle-player{top:calc(64px + env(safe-area-inset-top))}
  #battle-lead{top:calc(120px + env(safe-area-inset-top))}
  body:is([data-versus=racing],[data-versus=settled]) .result{max-height:56%}
  body:is([data-versus=racing],[data-versus=settled]) #result-record{display:none}
  .score-card b{font-size:30px}
  #result-verdict{font-size:22px}
  #action::after{width:48px;height:48px;margin-top:-24px}
  body[data-state=playing] #action{padding-bottom:14px}
  body[data-state=playing] #action::before{top:32px}
}
/* Landscape phones: menus side by side (title and Houses left, Cup and every action right), nothing below the fold. */
@media (orientation:landscape) and (max-height:550px){
  :root{--head-h:60px;--dock-h:52px;--foot-h:36px}
  .icon-button,#journey-home,.tools button{width:44px;height:44px}
  .arrival{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-rows:auto auto 1fr;column-gap:24px;row-gap:8px;align-content:end;max-width:none}
  .arrival>.eyebrow,.arrival>.arrival-meta,.arrival>.lede,.arrival>.progress-line{display:none}
  body[data-screen=home] #journey h1{font-size:34px;margin:0}
  .arrival>h1{grid-column:1;grid-row:1}
  .arrival>.house-strip{grid-column:1;grid-row:2;margin:0}
  .arrival>.journey-note{grid-column:1;grid-row:3;font-size:12px;margin:0}
  .arrival>.cup-line,.arrival>.cup-banner{grid-column:2;grid-row:1;margin:0;padding:8px 12px}
  .arrival>.cup-line .cup-copy>span,.arrival>.cup-banner .cup-copy>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .arrival .journey-actions,.arrival .journey-links{display:flex;flex-wrap:wrap;gap:6px;grid-column:2}
  .arrival .journey-actions{grid-row:2}
  .arrival .journey-links{grid-row:3;align-self:start}
  .arrival .journey-actions>.primary{min-height:48px;height:auto;flex:1 1 100%}
  .arrival .journey-actions>.primary .sub{display:none}
  .arrival .journey-actions>.secondary,.arrival .journey-links>.text-button{min-height:44px;padding:0 14px;font-size:14px}
  .compact-screen,.guide-screen{max-width:none;padding:14px 18px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:20px;align-items:start}
  .compact-screen>*,.guide-screen>*{grid-column:1}
  .compact-screen>.journey-actions,.guide-screen>.journey-actions,.compact-screen>.journey-panel,.compact-screen>.stat-row,.compact-screen>.rule-list,.compact-screen>.matchup,.guide-screen>.stone-demo{grid-column:2;grid-row:1/span 6}
  .compact-screen>.journey-actions{align-self:end;margin-top:0}
  #journey .compact-screen h1,#journey .guide-screen h1{font-size:26px}
  .stone-demo{height:100px}
  .guide-progress{display:none}
  .queue-elapsed{width:110px;height:110px;margin:0 0 8px}
  .queue-elapsed span{font-size:28px}
  .battle-player{top:6px;min-height:48px}
  .battle-player:first-of-type{left:72px}
  .battle-player:last-of-type{right:150px}
  .battle-emblem{width:38px;height:38px}
  #battle-lead{top:62px}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) .scoreboard{top:8px}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #stage{top:64px;bottom:calc(var(--dock-h) + 16px)}
  .action-dock{bottom:8px}
  #action{max-width:440px;margin:0 auto;font-size:16px}
  #action::after{width:42px;height:42px;margin-top:-21px}
  body[data-state=playing] #action{padding-bottom:0}
  body[data-state=playing] #action::before{display:none}
  .result{left:50%;right:auto;transform:translateX(-50%);width:min(560px,calc(100% - 24px));padding:12px 16px}
  #result-verdict{font-size:20px;margin-bottom:8px}
  #result-cards{margin-bottom:6px}
  .score-card{padding:6px}
  .score-card b{font-size:26px}
  .score-card .card-emblem{display:none}
  body[data-state=playing] .result{max-height:60%}
  #emotes button{min-height:36px}
}

/* Desktop: navigation in the header pill, the lobby as a left column over the open street. */
@media (min-width:1024px) and (min-height:551px){
  :root{--head-h:112px;--gutter:40px}
  /* The Spire's sections, in its own row under the shared bar: quieter than the bar (no cream fill), so the bar's
     cream pill on "The Spire" stays the one current-page mark. */
  #site-nav{display:flex;gap:2px;height:50px;padding:4px;border-radius:999px;background:rgba(16,24,21,.72);border-color:rgba(255,255,255,.2)}
  body[data-screen=game] #site-nav{display:none}
  #site-nav button{min-height:40px;padding:0 16px;border:0;border-radius:999px;background:none;font:500 14px var(--ui);color:var(--muted)}
  #site-nav button:hover{background:rgba(255,255,255,.1);color:var(--text)}
  #site-nav button[aria-current=page]{background:rgba(255,255,255,.16);color:var(--text);font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
  .tools{margin-left:auto}
  .tools button{width:50px;height:50px}
  #journey-home{width:auto;height:50px;padding:0 20px 0 16px;border-radius:999px;font:500 15px var(--ui);display:inline-flex;align-items:center;gap:8px}
  #journey-home::before{position:static;margin:0;width:16px;height:16px}
  #journey-home>span{display:inline}
  body[data-screen=game] #journey-home>span{font-size:0}
  body[data-screen=game] #journey-home>span::after{content:'Leave';font-size:15px}
  #journey{padding:var(--head-h) var(--gutter) calc(var(--foot-h) + 40px)}
  footer{--foot-h:88px;justify-content:flex-end;padding:0 40px 28px;height:auto}
  footer{bottom:0;align-items:flex-end}
  #honours-open,#arena-presence{min-height:48px;background:rgba(255,255,255,.12);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px)}
  footer:has(#arena-presence) #honours-open{border-right:0;padding:0 16px 0 18px}
  footer:has(#arena-presence) #arena-presence{border-radius:0 999px 999px 0;margin-left:-10px;padding-left:16px;border-left:1px solid rgba(255,255,255,.18)}
  footer #arena-presence>[data-counts]{font-weight:600}
  /* The lobby. */
  .journey-links [data-action=rules],.journey-links [data-action=wall],.journey-links [data-action=qualifying],.journey-links [data-action=bracket]{display:none}
  .arrival{align-content:center;max-width:540px;padding-bottom:110px}
  footer:has(#arena-presence) #honours-open{border-radius:999px 0 0 999px}
  .arrival>.eyebrow{font-size:13px;letter-spacing:.16em}
  body[data-screen=home] #journey h1{font-size:96px;line-height:.98;margin:8px 0 22px}
  body[data-screen=home] #journey h1 br{display:block}
  body[data-screen=home] #journey h1 em::before{content:none}
  .arrival>.lede{display:block;order:1;font-size:18px;margin:0 0 14px;text-shadow:0 1px 10px rgba(0,0,0,.5)}
  .sub-more{display:inline}
  .arrival>.cup-line,.arrival>.cup-banner{order:2;padding:16px 20px 16px 26px;border-radius:999px;min-height:76px;margin-bottom:8px}
  .arrival>.cup-banner[data-kind]:not([data-kind=live]){border-radius:28px}
  .arrival .journey-actions .dock-primary{flex:1 1 100%;height:78px;padding:0 90px 0 28px;margin-bottom:6px;background:rgba(255,255,255,.14);color:var(--text);
    border:1px solid rgba(255,255,255,.28);-webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 30px rgba(0,0,0,.3)}
  .arrival .journey-actions .dock-primary .label{font-size:22px}
  .arrival .journey-actions .dock-primary .sub{font-size:13px;color:var(--muted)}
  .arrival .journey-actions .dock-primary::after{right:8px;width:62px;height:62px;margin-top:-31px;background:var(--ic-play-dark) 56% 50%/22px no-repeat,var(--cream);box-shadow:0 0 0 6px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.3)}
  .arrival .journey-actions .secondary,.arrival .journey-links .text-button{min-height:48px;padding:0 20px;font-size:15px}
  .arrival>.journey-note{order:5;margin-top:16px}
  .arrival>.progress-line{order:6}
  .arrival>.house-strip{position:fixed;left:40px;bottom:36px;margin:0;gap:12px;justify-content:flex-start}
  .house-cell{width:62px;height:62px}
  .house-cell .emblem{width:28px;height:28px}
  .house-cell b{font-size:14px}
  /* Sheets sit in the left column too, mid-height, with the street open to the right. */
  .journey-center:not(.qualifying-screen):not(.bracket-screen):not(.stakes-screen){max-width:560px}
  .compact-screen,.guide-screen{margin-top:auto;margin-bottom:auto;padding:26px}
  #journey .compact-screen h1,#journey .guide-screen h1{font-size:52px}
  .ghost-screen,body[data-screen=matchup] .journey-center{max-width:600px}
  body[data-screen=wall] .journey-center{max-width:640px;margin-top:0}
  body[data-screen=wall] #journey h1{font-size:64px}
  .wall-list li{min-height:56px}
  /* Qualifying: board left, seats right. */
  .qualifying-screen{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,1fr);column-gap:28px;align-items:start}
  .qualifying-screen>.eyebrow,.qualifying-screen>h1,.qualifying-screen>.lede{grid-column:1}
  #journey .qualifying-screen h1{font-size:60px}
  .qual-main{grid-column:1}
  .qual-side{grid-column:2;grid-row:1/span 4;margin-top:0}
  
  .qual-side .seats-so-far{display:block}
  .qualifying-screen .qual-side .journey-actions{margin-top:0}
  .qual-list li{min-height:48px;font-size:14px}
  /* Bracket: all four rounds side by side. */
  .bracket-screen .round-tabs{display:none}
  .bracket-screen .bracket{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:16px;align-items:center}
  .bracket-screen .bracket{align-items:stretch}
  .bracket-screen .bracket>section{display:grid!important;align-content:space-around;position:relative;padding-top:30px}
  #journey .bracket-screen .bracket>section>h2{position:absolute;top:0;left:0}
  #journey .bracket-screen h1{font-size:60px}
  .bracket-match{padding:8px 12px}
  .bracket-match>p{font-size:14px}
  .stakes-screen{max-width:640px;margin:auto 0}
  #journey .stakes-screen h1{font-size:56px}
  /* Battle at 1440: the two player plates either side of a round clock, mode chip above. */
  #battle-mode{display:inline-flex;position:absolute;left:50%;top:28px;transform:translateX(-50%);align-items:center;min-height:46px;padding:0 20px;border-radius:999px;
    font:600 14px var(--ui);white-space:nowrap}
  #battle-mode[data-mode=ranked]{color:var(--amber-ink);background:rgba(240,181,74,.2);border-color:rgba(240,181,74,.6)}
  #battle-mode[data-mode=ghost]{color:var(--jade-ink);background:var(--jade-wash);border-color:rgba(127,224,188,.6)}
  .battle-player{top:100px;width:340px;max-width:none;min-height:76px;grid-template-columns:62px 1fr auto;grid-template-areas:"em name score" "em meta score";padding:6px 26px 6px 6px}
  .battle-player:first-of-type{left:auto;right:calc(50% + 74px)}
  .battle-player:last-of-type{right:auto;left:calc(50% + 74px);grid-template-columns:auto 1fr 62px;grid-template-areas:"score name em" "score meta em";padding:6px 6px 6px 26px}
  .battle-emblem{width:62px;height:62px;background-size:34px}
  .battle-player strong{font:600 16px var(--ui);align-self:end}
  .battle-player small{display:block;grid-area:meta;align-self:start;font:400 13px var(--ui);color:var(--muted);text-transform:lowercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .battle-player b{grid-area:score;align-self:center;font-size:44px}
  .battle-player:first-of-type b{margin-left:14px}
  .battle-player:last-of-type b{margin-right:14px}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) .scoreboard{top:86px}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) .time-block{flex-direction:column;gap:2px;width:108px;height:108px;min-width:0;padding:0;border-radius:50%;
    border:2px solid rgba(240,181,74,.75);box-shadow:0 0 0 6px rgba(16,24,21,.35),var(--glass-hl)}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #timer{font-size:42px}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #timer span::after{display:block;content:'sec left';font-size:13px;margin:4px 0 0;text-align:center}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #timer span{display:block;font-size:0;line-height:1}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #timer{display:flex;flex-direction:column;align-items:center}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) .time-track{left:26px;right:26px;bottom:14px}
  #battle-lead{top:206px;font-size:14px;padding:8px 16px;border-color:rgba(240,181,74,.6);color:var(--amber-ink);background:rgba(240,181,74,.14)}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #stage{top:200px;bottom:140px;left:6%;right:6%}
  .action-dock{bottom:40px}
  #action{max-width:600px;height:84px;font-size:21px;padding-left:32px}
  body[data-state=playing] #action{padding-bottom:20px}
  body[data-state=playing] #action::before{content:'or press Space or click the arena';left:32px;top:48px;font-size:13px}
  #action::after{width:66px;height:66px;margin-top:-33px;right:8px;background-size:28px}
  #feedback.critical{font-size:16px;padding:6px 14px}
  /* Result at 1440: a wide sheet along the bottom, cards either side of the verdict. */
  .result{left:50%;right:auto;transform:translateX(-50%);width:min(1200px,calc(100% - 80px));bottom:40px;padding:28px 32px}
  body:is([data-versus=racing],[data-versus=settled]) .result{display:grid;grid-template-columns:1fr auto auto;grid-template-areas:"versus versus versus" "retry lobby note";align-items:center;column-gap:12px}
  body:is([data-versus=racing],[data-versus=settled]) #result-versus{grid-area:versus}
  body:is([data-versus=racing],[data-versus=settled]) .result #retry{grid-area:retry;max-width:440px;justify-self:end;position:relative}
  body:is([data-versus=racing],[data-versus=settled]) #result-lobby{grid-area:lobby;width:auto;margin:0;padding:0 28px;min-height:56px}
  body:is([data-versus=racing],[data-versus=settled]) #result-note{grid-area:note;max-width:260px;text-align:left;margin:0}
  #result-versus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"you chip rival" "you verdict rival" "you record rival";align-items:center;column-gap:24px}
  #result-versus::before{grid-area:chip;justify-self:center;align-self:end}
  #result-verdict{grid-area:verdict;font-size:44px;margin:0 0 10px}
  #result-record{grid-area:record;justify-self:center}
  #result-best{grid-column:2;justify-self:center;margin:4px 0 0}
  #result-cards{display:contents}
  #result-cards>i{display:none}
  #result-cards>.score-card[data-side=you]{grid-area:you}
  #result-cards>.score-card[data-side=rival]{grid-area:rival}
  .score-card{padding:16px;border-radius:26px}
  .score-card b{font-size:56px}
  .score-card .card-emblem{width:36px;height:36px}
  body[data-state=playing] .result{bottom:140px;max-height:42%}
  /* The towers' bases stay in view: with the result sheet up, the arena ends where the sheet begins (--result-h is the
     sheet's live height, from journey.mjs). Phones keep the sheet over the arena. */
  body:is([data-versus=racing],[data-versus=settled]):has(#result:not([hidden])) #stage{bottom:calc(var(--result-h,0px) + 52px)}
  body[data-state=playing]:is([data-versus=racing],[data-versus=settled]):has(#result:not([hidden])) #stage{bottom:calc(var(--result-h,0px) + 152px)}
  #emotes{bottom:136px}
  #emote-message{bottom:190px}
  .milestone{right:40px}
}
@media (min-width:1024px) and (min-height:551px) and (max-height:820px){
  body[data-screen=home] #journey h1{font-size:72px}
  .arrival>.lede{margin-bottom:14px}
  .arrival .journey-actions .dock-primary{height:70px}
  .battle-player{top:92px}
  #battle-lead{top:196px}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) .scoreboard{top:80px}
  body:is([data-versus=countdown],[data-versus=racing],[data-versus=settled]) #stage{top:188px;bottom:120px}
  .action-dock{bottom:24px}
  /* Shorter desktops: a slimmer result sheet leaves the arena more height above it. */
  .result{bottom:24px;padding:18px 28px}
  #result-verdict{font-size:32px;margin-bottom:6px}
  .score-card{padding:10px 14px}
  .score-card b{font-size:42px}
  body:is([data-versus=racing],[data-versus=settled]):has(#result:not([hidden])) #stage{bottom:calc(var(--result-h,0px) + 32px)}
}

/* ================================================================== 10. motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .stone-demo.trim .demo-cut{translate:12px 26px;opacity:.6}
  #score.critical-score,#battle-you-score.critical-score{transform:none!important}
}

/* Practice while searching (search-bar.mjs): one quiet bar over practice, louder when a rival is found. */
#search-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--dock-h,70px) + 78px + env(safe-area-inset-bottom,0px));z-index:70;width:min(560px,calc(100vw - 32px));display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 12px 10px 16px;border-radius:20px;background:rgba(12,20,18,.88);border:1px solid rgba(127,224,188,.42);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#f3efe6;font:400 13px/1.35 'IBM Plex Sans',system-ui,sans-serif;box-shadow:0 12px 32px rgba(0,0,0,.38)}
#search-bar[hidden]{display:none}
#search-bar[data-state=offer]{border-color:rgba(240,181,74,.85);background:rgba(28,22,10,.92)}
#search-bar .sb-copy{flex:1 1 200px;margin:0}
#search-bar .sb-copy b{font-weight:600;letter-spacing:.01em}
#search-bar .sb-copy span{color:rgba(243,239,230,.78)}
#search-bar .sb-time{font-variant-numeric:tabular-nums}
/* The 10 s to accept (Evan, 22 Oct): a draining bar along the top edge and a ring with the seconds, both driven by --left
   (1 -> 0). Reduced motion: no easing between steps; the number still counts. */
#search-bar{--left:1}
#search-bar .sb-drain{position:absolute;left:14px;right:14px;top:0;height:4px;border-radius:0 0 4px 4px;background:rgba(240,181,74,.18);overflow:hidden;pointer-events:none}
#search-bar .sb-drain i{display:block;height:100%;width:100%;background:#f0b54a;transform-origin:left center;transform:scaleX(var(--left));transition:transform .1s linear}
#search-bar .sb-timer{position:relative;flex:0 0 auto;width:48px;height:48px;display:grid;place-items:center}
#search-bar .sb-ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#f0b54a calc(var(--left)*360deg),rgba(240,181,74,.18) 0);-webkit-mask:radial-gradient(circle,transparent 17px,#000 18px);mask:radial-gradient(circle,transparent 17px,#000 18px)}
#search-bar .sb-count{position:relative;font:700 18px/1 'IBM Plex Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums;color:#f6d48f}
#search-bar .sb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#search-bar[data-state=offer]{padding-top:14px}
@media (prefers-reduced-motion:reduce){#search-bar .sb-drain i{transition:none}}
#search-bar .sb-actions{display:flex;flex-wrap:wrap;gap:8px}
#search-bar button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(243,239,230,.35);background:rgba(243,239,230,.08);color:#f3efe6;font:600 13px/1 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer;box-shadow:none;width:auto;letter-spacing:.01em}
#search-bar button.sb-primary{background:#7fe0bc;border-color:#7fe0bc;color:#0c1412}
#search-bar[data-state=offer] button.sb-primary{background:#f0b54a;border-color:#f0b54a}
#search-bar button:disabled{opacity:.55;cursor:default}
#search-bar button:focus-visible{outline:2px solid #f3efe6;outline-offset:2px}
@media (max-width:560px){#search-bar{padding:10px 12px}#search-bar .sb-actions{flex:1 1 100%}#search-bar .sb-actions button{flex:1 1 0}}
#search-bar .sb-line{display:block;margin-top:2px}

/* The lobby leaderboard (leaderboard-ui.mjs, Evan 22 Oct): the empty right side of the desktop lobby; a sheet on phones. */
.lobby-board{display:none}
.lb-dialog{width:min(440px,calc(100vw - 24px));max-height:min(640px,calc(100dvh - 40px));padding:18px 16px 16px;border-radius:22px;border:1px solid rgba(243,239,230,.22);background:rgba(12,20,18,.96);color:#f3efe6;overflow:auto}
.lb-dialog::backdrop{background:rgba(0,0,0,.55)}
.lb-dialog .lobby-board{display:block}
.lb-close{position:absolute;right:10px;top:10px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(243,239,230,.3);background:transparent;color:inherit;font-size:20px;cursor:pointer}
.lb-title{font:600 13px/1 var(--ui,'IBM Plex Sans',system-ui,sans-serif);letter-spacing:.12em;text-transform:uppercase;margin:0 0 10px;color:rgba(243,239,230,.72)}
.lb-tabs{display:flex;gap:6px;margin-bottom:10px}
.lb-tabs button{flex:1 1 0;min-height:36px;padding:0 10px;border-radius:999px;border:1px solid rgba(243,239,230,.28);background:transparent;color:#f3efe6;font:600 12px/1 var(--ui,'IBM Plex Sans',system-ui,sans-serif);cursor:pointer}
.lb-tabs button[aria-selected=true]{background:#f3efe6;color:#0c1412;border-color:#f3efe6}
.lb-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.lb-row{display:grid;grid-template-columns:24px 22px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:38px;padding:3px 8px;border-radius:12px}
.lb-row[data-you=true]{background:rgba(127,224,188,.14)}
.lb-keeper{background:rgba(240,181,74,.12);border:1px dashed rgba(240,181,74,.55)}
.lb-place{font:600 13px/1 var(--ui,'IBM Plex Sans',system-ui,sans-serif);font-variant-numeric:tabular-nums;color:rgba(243,239,230,.6);text-align:right}
.lb-emblem{width:20px;height:20px;image-rendering:pixelated;display:block}
.lb-npc{border-radius:50%;background:rgba(240,181,74,.6)}
.lb-name{min-width:0;display:flex;flex-direction:column;align-items:flex-start;padding:0;border:0;background:none;color:inherit;font:500 14px/1.2 var(--ui,'IBM Plex Sans',system-ui,sans-serif);text-align:left;cursor:pointer}
.lb-name>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-name small,.lb-value small{font:400 11px/1.2 var(--ui,'IBM Plex Sans',system-ui,sans-serif);color:rgba(243,239,230,.6)}
.lb-value{display:flex;flex-direction:column;align-items:flex-end;font:700 15px/1.1 var(--ui,'IBM Plex Sans',system-ui,sans-serif);font-variant-numeric:tabular-nums}
.lb-gap{text-align:center;color:rgba(243,239,230,.45);line-height:1}
.lb-note,.lb-empty{font:400 12px/1.45 var(--ui,'IBM Plex Sans',system-ui,sans-serif);color:rgba(243,239,230,.6);margin:10px 4px 0}
@media (min-width:1100px){
  body[data-screen=home] .journey-shell{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px}
  /* Right column (Evan, 22 Oct): House standings above the leaderboard, both always fully on screen. */
  body[data-screen=home] .lobby-side{flex:0 0 380px;align-self:flex-end;display:flex;flex-direction:column;gap:12px;min-height:0;max-height:calc(100dvh - var(--head-h,112px) - 48px)}
  body[data-screen=home] .lobby-side .house-strip{margin:0;padding:12px 14px;border-radius:22px;background:rgba(12,20,18,.72);border:1px solid rgba(243,239,230,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);flex:0 0 auto}
  body[data-screen=home] .lobby-board{display:block;flex:1 1 auto;min-height:0;padding:16px 14px;border-radius:22px;background:rgba(12,20,18,.72);border:1px solid rgba(243,239,230,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:auto}
  .arrival .lb-link{display:none}
}

/* Phone result strip (Evan, 22 Oct: the sheet covered the towers, so nobody could see how the last ring missed).
   After a match the phone shows a short strip at the bottom: outcome, both scores and the two buttons; "Details" opens
   the full sheet. Both towers' tops, the final or missed ring included, stay in view above it. Desktop is unchanged. */
#result-more{display:none}
@media (max-width:1023px) and (orientation:portrait){
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]){display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"versus versus" "record record" "retry lobby" "more more";
    column-gap:8px;row-gap:6px;padding:8px 10px 6px;max-height:none;overflow:visible;border-radius:22px;bottom:calc(8px + env(safe-area-inset-bottom))}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #result-versus:not([hidden]){grid-area:versus;display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:6px}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #result-versus::before{margin:0;min-height:24px;padding:0 9px;font-size:10px}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #result-cards{display:contents;margin:0}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #result-cards>i{font-size:11px}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) .score-card{flex-direction:row;justify-content:center;gap:6px;padding:4px 8px;border-radius:14px}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) .score-card b{font-size:22px}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) .score-card span{font-size:12px;max-width:9ch}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) :is(.score-card small,.score-card .card-emblem,#result-verdict,#result-best,#result-note,#result-record:not([data-kind=ghost]),#share){display:none!important}
  /* Evan's record and shadows keep their one status line in the strip (guest run, checking, win for your House). */
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #result-record[data-kind=ghost]{display:inline-flex!important;grid-area:record;justify-self:center;min-height:22px;margin:0;padding:2px 10px;font-size:10px;line-height:1.25;text-align:center}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #retry{grid-area:retry;margin:0;min-height:46px;font-size:13px;padding:0 12px}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #retry .glyph{display:none}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #retry::after{display:none}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #retry .label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  body:is([data-versus=racing],[data-versus=settled]) .result:not([data-expanded]) #result-lobby{grid-area:lobby;margin:0;width:auto;min-height:46px}
  body[data-state=playing] .result:not([data-expanded]) #retry{grid-column:1/-1}
  body:is([data-versus=racing],[data-versus=settled]) #result-more{display:block;grid-area:more;margin:0 auto;min-height:28px;padding:0 10px;font-size:12px;color:var(--muted)}
  body:is([data-versus=racing],[data-versus=settled]) .result[data-expanded] #result-more{margin-top:6px}
}
/* "Stay in the game" (online.mjs, once per online match at the countdown). */
#stay-note{position:fixed;left:50%;transform:translateX(-50%);top:calc(var(--head-h,70px) + 96px + env(safe-area-inset-top));z-index:30;width:max-content;max-width:calc(100vw - 32px);margin:0;padding:8px 14px;border-radius:999px;background:rgba(16,24,21,.9);border:1px solid rgba(240,181,74,.6);color:#f6d48f;font:600 13px/1.35 var(--ui);text-align:center;pointer-events:none}
#stay-note[hidden]{display:none}
body:not([data-screen=game]) #stay-note{display:none}
/* How to Play with the real rings (rules-demo.mjs): the canvas replaces the line drawing once it draws. */
.stone-demo[data-real] i,.stone-demo[data-real] .demo-cut{display:none!important}
.stone-demo .rules-demo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.stone-demo .rules-demo-label{position:absolute;left:0;right:0;top:12px;text-align:center;font:700 12px var(--ui);letter-spacing:.08em;color:var(--amber-ink,#f6d48f);text-transform:uppercase;pointer-events:none}
.stone-demo .rules-demo-label:empty{display:none}
.stone-demo span{z-index:1}
.beacon-note{margin:0 0 12px}
.lb-warmup{margin:-4px 0 10px;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;font:600 11px/1 var(--ui);letter-spacing:.06em;color:#f6d48f;background:rgba(240,181,74,.14);border:1px solid rgba(240,181,74,.5)}
@media (min-width:1100px) and (max-height:820px){body[data-screen=home] .lb-row{min-height:30px;padding:2px 8px}body[data-screen=home] .lb-tabs button{min-height:32px}}
/* Leaderboard names sit on the row's centre line with the place, the emblem and the points (live 1440 check, 22 Oct):
   the name is a .pf-name button and inherits button padding/min-height, which pushed it up and centred it. */
#journey .lb-row .lb-name,.lb-dialog .lb-row .lb-name{align-self:center;justify-content:center;align-items:flex-start;text-align:left;min-height:0;height:auto;padding:0;margin:0;gap:0;line-height:1.2;background:none;border:0;box-shadow:none}
.lb-row>.lb-place,.lb-row>.lb-emblem,.lb-row>.lb-value{align-self:center}
/* The points and their unit on one line ("30 pts"), so the number sits on the row's centre line too. */
.lb-row .lb-value{flex-direction:row;align-items:baseline;gap:4px}

/* Leaderboard: empty places, the bar to beat and the one call to play (Evan, 22 Oct). */
.lb-row.lb-keeper .lb-npc{width:22px;height:22px;border-radius:0;background:none;object-fit:contain;image-rendering:auto}
.lb-row.lb-ghost{opacity:.62}
.lb-row.lb-ghost .lb-name>span{color:var(--faint);font-style:italic}
.lb-row.lb-ghost .lb-value b{color:var(--faint);font-weight:500}
.lb-slot{width:18px;height:18px;border-radius:50%;border:1.5px dashed rgba(243,239,230,.35)}
.lb-row.lb-ghost{border-top:1px dashed rgba(243,239,230,.12);border-radius:0}
.lb-call{margin:12px 2px 0;display:grid;gap:10px}
.lb-call p{margin:0;font:400 13px/1.45 var(--ui);color:var(--muted);text-wrap:pretty}
.lb-cta{width:100%;min-height:48px}
/* The sheet's close button clears the tabs. */
.lb-dialog .lb-title{margin-bottom:18px}
.lb-close{width:32px;height:32px;top:8px;right:8px}
/* The right column clears the footer pill, and on short desktops (1280x720) it tightens so the call to play stays on
   screen: smaller banners, compact rows, three empty places instead of five. */
/* The column runs the full height of the lobby as one composed panel (Evan, 22 Oct: no dead gap at 1440x900): the
   leaderboard takes the height and its note or call to play sits at the panel's foot. Short desktops clear the footer. */
@media (min-width:1100px){body[data-screen=home] .lobby-side{align-self:stretch;max-height:none}
  body[data-screen=home] .lobby-board{display:flex;flex-direction:column}
  body[data-screen=home] .lobby-board>.lb-note,body[data-screen=home] .lobby-board>.lb-call{margin-top:auto;padding-top:12px}}
@media (min-width:1100px) and (max-height:820px){body[data-screen=home] .lobby-side{margin-bottom:58px}}
@media (min-width:1100px) and (max-height:820px){
  body[data-screen=home] .lobby-side .house-strip{padding:10px 12px}
  body[data-screen=home] .lobby-board{padding:12px}
  body[data-screen=home] .lb-title{margin-bottom:6px}
  body[data-screen=home] .lb-call{margin-top:8px;gap:8px}
  body[data-screen=home] .lb-cta{min-height:44px}
}

/* ================================================================== House standings as hanging banners (Evan, 22 Oct)
   The staging theme's House pass banners (assets/banners). Each count sits on its own plate under the banner, clear of
   the emblem. The leader's banner rises and catches the lantern light and its plate turns amber; level Houses (all 0 on
   day one) hang level. Desktop: full banners in the right column. Phone and tablet: a compact strip under the title. */
.house-strip.house-banners{display:block;margin:0}
.hb-title{margin:0 0 10px;font:600 13px/1.2 var(--ui);letter-spacing:.02em;color:var(--text)}
.hb-title small{font:400 12px var(--ui);color:var(--faint);margin-left:6px}
.hb-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}
.hb{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.hb-art{display:block;width:100%;max-width:76px;height:auto;aspect-ratio:2/3;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));transition:filter .5s}
.hb-plate{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;max-width:100%;padding:4px 10px 5px;border-radius:12px;background:rgba(10,16,14,.62);border:1px solid rgba(243,239,230,.18)}
.hb-count{font:600 20px/1 var(--ui);font-variant-numeric:tabular-nums;letter-spacing:0;color:var(--text)}   /* UI face: the brush 1 reads as a slash */
.hb-name{font:600 10.5px/1.2 var(--ui);letter-spacing:.04em;color:var(--muted);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hb[data-house=onyx-forge] .hb-plate{border-color:color-mix(in srgb,var(--onyx-forge) 55%,transparent)}
.hb[data-house=chrome-manor] .hb-plate{border-color:color-mix(in srgb,var(--chrome-manor) 55%,transparent)}
.hb[data-house=gilded-court] .hb-plate{border-color:color-mix(in srgb,var(--gilded-court) 55%,transparent)}
.hb[data-house=sapphire-keep] .hb-plate{border-color:color-mix(in srgb,var(--sapphire-keep) 55%,transparent)}
.hb[data-leading=true]{transform:translateY(-8px)}
.hb[data-leading=true] .hb-art{filter:drop-shadow(0 10px 16px rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(240,181,74,.6))}
.hb[data-leading=true] .hb-plate{background:rgba(240,181,74,.18);border-color:rgba(240,181,74,.85)}
.hb[data-leading=true] .hb-count{color:var(--amber-ink)}
.hb[data-leading=true] .hb-name{color:var(--amber-ink)}
@media (prefers-reduced-motion:reduce){.hb,.hb-art{transition:none}}
/* Phone and tablet lobby: a compact strip right under the title (Ranked Trials keeps the lead, docked at the bottom):
   a small banner beside its plate, four across. */
@media (max-width:1099px){
  .arrival>.house-strip.house-banners{order:1;margin:2px 0 6px}
  .house-banners .hb-title{display:none}
  .hb-row{gap:6px}
  .hb{flex-direction:row;gap:4px;justify-content:center}
  .hb-art{width:22px;max-width:22px;flex:none;filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
  .hb-plate{align-items:flex-start;padding:2px 6px 3px;border-radius:9px;background:rgba(10,16,14,.5)}
  .hb-count{font-size:16px}
  .hb-name{font-size:11px;letter-spacing:0}
  .hb-plate{padding:2px 4px 3px}
  .hb[data-leading=true]{transform:none}
  .hb[data-leading=true] .hb-art{filter:drop-shadow(0 0 8px rgba(240,181,74,.75))}
}
@media (min-width:1100px) and (max-height:820px){
  body[data-screen=home] .lobby-side .hb-art{max-width:56px}
  body[data-screen=home] .lobby-side .hb-count{font-size:19px}
}
.stone-demo[data-real] span{display:none}
/* Phone and tablet lobby rhythm (Evan, 22 Oct): How to play and Leaderboard are one quiet row of text links with room
   between them, and the sign-in line sits on its own below with clear space. */
@media (max-width:1099px){
  .arrival .journey-links .lb-link{order:4;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px!important;background:none!important;border:0!important;box-shadow:none!important;font:500 14px var(--ui);color:var(--muted);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(246,242,234,.35)}
  .arrival .journey-links .learn-link{margin-right:14px}
  .arrival>.journey-note{order:6;margin:10px 2px 0;line-height:1.5;max-width:44ch}
  .play-more{flex-wrap:nowrap;min-width:0}
  .play-more>.secondary.quiet{min-width:0;overflow:hidden}
  .play-more>.secondary.quiet .label{min-width:0;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:380px){.hb-art{width:18px;max-width:18px}.hb{gap:3px}.hb-plate{padding:2px 3px 3px}.hb-name{font-size:11px;letter-spacing:0}}
/* Desktop right column: never taller than the lobby (it stops above the footer pill); the list takes the spare height,
   scrolling inside when full and spreading its open places evenly when empty, with the call to play at the foot. */
@media (min-width:1100px){
  body[data-screen=home] .lobby-side{max-height:calc(100dvh - 142px - 84px)}
  body[data-screen=home] .lobby-board .lb-list{flex:1 1 auto;min-height:0;overflow:auto;align-content:start}
  body[data-screen=home] .lobby-board .lb-list[data-empty=true]{display:flex;flex-direction:column;justify-content:space-evenly;overflow:hidden}
}
@media (min-width:1100px) and (max-height:820px){body[data-screen=home] .lobby-side{max-height:calc(100dvh - 142px - 24px - 58px)}}

/* Tablet (761-1099px): every lobby link is a quiet text link, The Wall included (Fable review, 22 Oct). */
@media (min-width:761px) and (max-width:1099px){
  .arrival .journey-links .text-button{display:inline-flex;align-items:center;min-height:44px;padding:0 6px!important;background:none!important;border:0!important;box-shadow:none!important;font:500 14px var(--ui);color:var(--muted);text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(246,242,234,.35)}
  .arrival .journey-links .learn-link{text-decoration:none}
}
.lb-row[hidden]{display:none!important}

/* NPC picker (npc-roster.mjs): four opponents, easiest first. No portraits yet: a House-neutral initial plate. */
.npc-pick{border:0;margin:14px 0 4px;padding:0;display:grid;gap:6px;text-align:left}
.npc-pick legend{font:600 12px/1.2 var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 6px;padding:0}
.npc-opt{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:60px;padding:6px 12px 6px 8px;border-radius:14px;background:var(--glass);box-shadow:var(--glass-hl);border:1px solid transparent;cursor:pointer}
.npc-portrait{display:inline-block;width:48px;height:48px;flex-shrink:0;overflow:hidden;border-radius:50%;background:var(--glass);vertical-align:middle}
.npc-portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.npc-portrait img{filter:drop-shadow(1px 0 0 white) drop-shadow(-1px 0 0 white) drop-shadow(0 1px 0 white) drop-shadow(0 -1px 0 white)}
.npc-beaten{display:flex;align-items:center;gap:4px;color:var(--jade-ink);font:600 12px/1.3 var(--ui)}
.battle-emblem.has-npc-portrait::before,.battle-emblem.has-npc-portrait::after{display:none!important}
.battle-emblem .npc-portrait{width:100%;height:100%}
.npc-opt input{position:absolute;opacity:0;pointer-events:none}
.npc-opt:has(input:checked){border-color:var(--jade);background:var(--jade-wash)}
.npc-opt:has(input:focus-visible){outline:2px solid var(--jade-ink);outline-offset:2px}
.npc-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(246,242,234,.1);border:1px solid var(--glass-edge);font:600 15px/1 var(--ui);color:var(--text)}
.npc-who{min-width:0;display:grid}
.npc-who b{font:600 15px/1.2 var(--ui);color:var(--text)}
.npc-who small{font:400 12px/1.3 var(--ui);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.npc-typ{display:grid;justify-items:end;font-variant-numeric:tabular-nums}
.npc-typ b{font:600 16px/1 var(--ui);color:var(--text)}
.npc-typ small{font:400 11px/1.2 var(--ui);color:var(--faint)}

/* ================================================================== one nav bar (Evan, 22 Oct)
   The HOUND bar is the only header. The game's sections are quiet text tabs in the page, under the title on the lobby
   and at the top of How to play / The Trials / the Cup screens. The Spire's own row only carries Back and Pause. */
body[data-sections=true]:not([data-screen=game]) .spire-sub{display:none}
body[data-sections=true]:not([data-screen=game]){--head-h:calc(var(--bar-h) + 10px)}
@media (min-width:1200px) and (min-height:551px){body[data-sections=true]:not([data-screen=game]){--head-h:calc(var(--bar-h) - 4px)}}
.spire-sections{display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px;margin:6px 0 14px;padding:0}
.spire-sections button{position:relative;min-height:44px;padding:0;border:0;background:none;box-shadow:none;border-radius:0;font:500 15px/1 var(--ui);color:var(--muted);cursor:pointer;
  -webkit-backdrop-filter:none;backdrop-filter:none;text-decoration:none}
.spire-sections button::after{content:'';position:absolute;left:0;right:0;bottom:9px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.spire-sections button:hover{color:var(--text)}
.spire-sections button:hover::after{transform:scaleX(.35)}
.spire-sections button[aria-current=page]{color:var(--text);font-weight:600;cursor:default}
.spire-sections button[aria-current=page]::after{transform:scaleX(1);background:var(--jade)}
.spire-sections button:focus-visible{outline:2px solid var(--jade-ink);outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.spire-sections button::after{transition:none}}
.arrival>.spire-sections{order:1;flex:1 1 100%;margin:2px 0 6px}
/* On every other section screen the tabs sit above the screen's own panel, on the page. */
.journey-shell>.spire-sections{width:100%;max-width:1280px;margin:0 auto 10px;padding:0 2px}
body[data-screen=rules] .journey-shell>.spire-sections{max-width:560px;margin-top:auto}
body[data-screen=rules] .guide-screen{margin-top:0}
@media (min-width:1100px){.journey-shell>.spire-sections{padding:0}}
@media (max-width:420px){.spire-sections{gap:0 16px}.spire-sections button{font-size:14px}}

/* ================================================================== the two Cup boards (lobby leaderboard) */
.lb-houses{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 10px}
.lb-houses button{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(243,239,230,.18);background:transparent;color:var(--muted);font:500 12px/1 var(--ui);cursor:pointer}
.lb-houses button[data-house]:not([data-house=""])::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--hc,currentColor)}
.lb-houses [data-house=onyx-forge]{--hc:var(--onyx-forge)}.lb-houses [data-house=chrome-manor]{--hc:var(--chrome-manor)}
.lb-houses [data-house=gilded-court]{--hc:var(--gilded-court)}.lb-houses [data-house=sapphire-keep]{--hc:var(--sapphire-keep)}
.lb-houses button:hover{color:var(--text);border-color:rgba(243,239,230,.36)}
.lb-houses button[aria-pressed=true]{color:var(--text);border-color:var(--hc,rgba(243,239,230,.7));background:rgba(243,239,230,.1);font-weight:600}
.lb-houses button:focus-visible,.lb-tabs button:focus-visible{outline:2px solid var(--jade-ink);outline-offset:2px}
@media (pointer:coarse){.lb-houses button{min-height:40px}}
.lb-name .lb-seat{flex:none;margin-left:8px;padding:2px 7px;border-radius:999px;font:600 10px/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--jade-deep);background:var(--jade-ink)}
.lb-name .lb-seat[data-kind=reserve]{color:var(--text);background:transparent;box-shadow:inset 0 0 0 1px rgba(243,239,230,.45)}
.lb-name{display:flex;align-items:center;min-width:0}
.lb-name>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-cut{display:flex;align-items:center;gap:8px;margin:4px 8px;font:600 10px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--jade-ink)}
.lb-cut::before,.lb-cut::after{content:'';flex:1 1 auto;height:1px;background:repeating-linear-gradient(90deg,var(--jade) 0 6px,transparent 6px 10px)}
.lb-cut::before{flex:0 0 12px}

/* ================================================================== The Trials (trials.mjs) */
body[data-screen=trials] .journey-shell{display:block;max-width:1280px}
.trials-screen{display:grid;grid-template-columns:minmax(0,1fr);gap:0;padding:0 0 48px;color:var(--text)}
.tr-head{padding:4px 0 18px}
.tr-head h1{margin:0 0 6px;font-family:var(--display);font-weight:400;font-size:clamp(34px,6vw,56px);line-height:1}
.tr-head .lede{margin:0;max-width:52ch;color:var(--muted)}
.tr-index{display:none}
.tr-body{display:grid;gap:12px}
.tr-section{padding:20px;border-radius:22px;background:rgba(12,20,18,.78);border:1px solid rgba(243,239,230,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);scroll-margin-top:calc(var(--head-h) + 12px)}
html[data-power=low] .tr-section{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(14,22,19,.94)}
.tr-section h2{margin:0 0 10px;font:600 20px/1.2 var(--ui);letter-spacing:-.01em;text-wrap:balance}
.tr-section h2:focus{outline:none}
.tr-section h3{margin:18px 0 6px;font:600 15px/1.3 var(--ui)}
.tr-section p,.tr-section li,.tr-section dd{font:400 15px/1.55 var(--ui);color:rgba(246,242,234,.86);max-width:68ch;text-wrap:pretty}
.tr-section p{margin:0 0 10px}
.tr-section p:last-child{margin-bottom:0}
.tr-section b{color:var(--text);font-weight:600}
.tr-lead{font-size:17px!important;color:var(--text)!important}
.tr-small{font-size:13px!important;color:var(--faint)!important}
.tr-list{margin:0 0 10px;padding:0;list-style:none;display:grid;gap:8px}
.tr-list li{position:relative;padding-left:16px}
.tr-list li::before{content:'';position:absolute;left:0;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--jade)}
.tr-pairs{margin:0;display:grid;gap:14px}
.tr-pairs>div{display:grid;gap:3px}
.tr-pairs dt,.tr-faq dt{font:600 15px/1.35 var(--ui);color:var(--text)}
.tr-pairs dd,.tr-faq dd{margin:0}
.tr-schedule{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:0}
.tr-schedule li{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr);gap:4px 16px;padding:10px 0;border-top:1px solid rgba(243,239,230,.1)}
.tr-schedule li:first-child{border-top:0;padding-top:2px}
.tr-schedule time{font:600 14px/1.5 var(--ui);color:var(--jade-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-npcs{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px}
.tr-npcs li{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:14px;background:rgba(246,242,234,.05)}
.tr-npcs li:last-child{background:var(--amber-wash);box-shadow:inset 0 0 0 1px rgba(240,181,74,.35)}
.tr-npcs b{display:block;font:600 15px/1.25 var(--ui);color:var(--text)}
.tr-npcs small{display:block;font:400 12px/1.35 var(--ui);color:var(--muted)}
.tr-npc-mark{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(246,242,234,.1);border:1px solid var(--glass-edge);font:600 16px/1 var(--ui)}
.tr-num{text-align:right;font-variant-numeric:tabular-nums}
.tr-num b{font-size:18px}
.tr-faq{margin:0;display:grid;gap:0}
.tr-faq>div{padding:12px 0;border-top:1px solid rgba(243,239,230,.1)}
.tr-faq>div:first-child{border-top:0;padding-top:2px}
.tr-faq dd{margin-top:4px}
.tr-prizes{width:100%;border-collapse:collapse;margin:14px 0 10px;font:400 14px/1.45 var(--ui)}
.tr-prizes caption{text-align:left;font:600 15px/1.3 var(--ui);padding-bottom:6px}
.tr-prizes th,.tr-prizes td{text-align:left;vertical-align:top;padding:8px 10px 8px 0;border-top:1px solid rgba(243,239,230,.1);color:rgba(246,242,234,.86)}
.tr-prizes thead th{font:600 12px/1.2 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-top:0}
.tr-prizes tbody th{color:var(--text);font-weight:600;white-space:nowrap}
.tr-wall{margin-top:14px;padding-top:4px;border-top:1px solid rgba(243,239,230,.1)}
.tr-wall .wall-list{margin:8px 0}
.tr-wall-h{margin-top:12px!important}
.tr-rates{margin-top:12px}
.tr-rates .lb-list{max-height:none}
@media (min-width:1100px){
  .trials-screen{grid-template-columns:220px minmax(0,760px);column-gap:40px;align-items:start;justify-content:start}
  .tr-head{grid-column:1/-1}
  .tr-index{display:block;position:sticky;top:calc(var(--head-h) + 12px)}
  .tr-index ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid rgba(243,239,230,.14)}
  .tr-index a{display:block;padding:7px 14px;margin-left:-1px;border-left:2px solid transparent;font:500 14px/1.3 var(--ui);color:var(--muted);text-decoration:none}
  .tr-index a:hover{color:var(--text);border-left-color:rgba(243,239,230,.4)}
  .tr-index a:focus-visible{outline:2px solid var(--jade-ink);outline-offset:2px}
  .tr-section{padding:24px 28px}
}
@media (max-width:560px){.tr-section{padding:16px;border-radius:18px}.tr-schedule li{grid-template-columns:1fr}.tr-section p,.tr-section li,.tr-section dd{font-size:15px}}

/* ================================================================== Lobby v2 (DESIGN-LOBBY-v2.md, 22 Oct)
   Spacing 4/8/12/16/24/32/48. Panels pad 20 (16 in the phone sheet); 12 within a group, 16 between groups and panels.
   Rows are a fixed 44px (48 in the sheet). The board panel's height comes from the viewport, never its rows. */
@media (min-width:1100px){.hb-plate{min-width:64px}}
.hb-title{font:600 17px/1.2 var(--ui);letter-spacing:0;margin:0 0 12px}
.hb-title small{font:400 13px var(--ui)}
.hb-name{letter-spacing:0}
.lobby-board.lb-v2{display:flex;flex-direction:column;min-height:0;color:var(--text)}
.lb-v2 .lb-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:21px;margin:0 0 16px}
.lb-v2 .lb-title{margin:0;font:600 17px/1.2 var(--ui);letter-spacing:0;text-transform:none;color:var(--text)}
.lb-v2 .lb-phase{font:500 13px/1.2 var(--ui);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-v2[data-board=season] .lb-phase::before{content:'';display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--jade);vertical-align:1px}
.lb-v2 .lb-controls{display:grid;gap:12px;align-content:start;height:84px;margin:0 0 16px}
.lb-v2 .lb-intro{margin:0;align-self:center;font:400 13px/1.5 var(--ui);color:var(--muted);text-wrap:pretty}
.lb-v2 .lb-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}
.lb-v2 .lb-tabs button{min-height:40px;font:600 14px/1 var(--ui);border-radius:999px}
.lb-v2 .lb-houses{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:4px;margin:0}
.lb-v2 .lb-houses button{justify-content:center;min-height:32px;padding:0 8px;font:500 12px/1 var(--ui);white-space:nowrap;overflow:hidden}
.lb-v2 .lb-scroll{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;margin:0 -8px;padding:0 8px;
  scrollbar-width:thin;scrollbar-color:rgba(243,239,230,.28) transparent}
.lb-v2 .lb-scroll:focus-visible{outline:2px solid var(--jade-ink);outline-offset:-2px;border-radius:12px}
.lb-v2 .lb-head,.lb-v2 .lb-row,.lb-v2 .lb-you-row{display:grid;grid-template-columns:28px 22px minmax(0,1fr) auto;align-items:center;column-gap:10px;padding:0 10px}
.lb-v2 .lb-head{position:sticky;top:0;z-index:2;height:32px;font:500 12px/1 var(--ui);color:var(--faint);background:rgb(14,22,19);border-bottom:1px solid rgba(243,239,230,.1)}
.lb-v2 .lb-head span:first-child{text-align:right}
.lb-v2 .lb-head span:last-child{text-align:right}
.lb-v2 .lb-list{display:block;margin:4px 0 0}
.lb-v2 .lb-row{height:36px;min-height:36px;border-radius:10px;border:0}
.lb-v2 .lb-row:hover{background:rgba(243,239,230,.05)}
.lb-v2 .lb-row[data-you=true]{background:var(--jade-wash);box-shadow:inset 0 0 0 1px rgba(127,224,188,.35)}
.lb-v2 .lb-place{font:600 13px/1 var(--ui);color:var(--muted)}
#journey .lb-v2 .lb-row .lb-name,.lb-dialog .lb-v2 .lb-row .lb-name{flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;font:500 15px/1.2 var(--ui)}
.lb-v2 .lb-value{flex-direction:row;align-items:baseline;gap:4px}
.lb-v2 .lb-value b{font:600 15px/1 var(--ui);font-variant-numeric:tabular-nums}
.lb-v2 .lb-value small{font:400 12px/1 var(--ui);color:var(--faint);min-width:26px}
.lb-v2 .lb-name .lb-seat{margin:0;padding:3px 8px;font:600 11px/1.2 var(--ui);letter-spacing:0;text-transform:none}
.lb-v2 .lb-keeper{height:52px;margin:4px 0;background:var(--amber-wash);border:1px dashed rgba(240,181,74,.55)}
.lb-v2 .lb-keeper .lb-name{flex-direction:column!important;align-items:flex-start!important;gap:2px!important}
.lb-v2 .lb-keeper .lb-name small{font:400 12px/1.2 var(--ui);color:var(--muted)}
.lb-v2 .lb-cut{height:24px;margin:2px 10px}
.lb-v2 .lb-skel .lb-place::before{content:'';display:block;width:12px;height:10px;margin-left:auto;border-radius:4px;background:rgba(243,239,230,.1)}
.lb-v2 .lb-skel .lb-emblem{border-radius:50%;background:rgba(243,239,230,.08)}
.lb-v2 .lb-skel .lb-name i{display:block;height:11px;border-radius:6px;background:rgba(243,239,230,.12)}
.lb-v2 .lb-skel .lb-value i{display:block;width:44px;height:11px;border-radius:6px;background:rgba(243,239,230,.12)}
.lb-v2 .lb-call{display:grid;justify-items:center;gap:12px;margin:24px 8px;text-align:center}
.lb-v2 .lb-call p{max-width:34ch}
.lb-v2 .lb-cta{width:auto;min-width:220px}
.lb-v2 .lb-you{margin:8px 0 0}
.lb-v2 .lb-you[hidden]{display:none}
.lb-v2 .lb-you-row{width:100%;height:44px;border-radius:10px;border:0;background:var(--jade-wash);box-shadow:inset 0 0 0 1px rgba(127,224,188,.35);color:var(--text);font:600 14px/1 var(--ui);text-align:left;cursor:default}
.lb-v2 button.lb-you-row{cursor:pointer}
.lb-v2 .lb-you-row>span:first-child{grid-column:1/4}
.lb-v2 .lb-note{margin:12px 0 0;min-height:38px;font:400 13px/1.45 var(--ui);color:var(--faint);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* The desktop side column: fixed to the viewport, banners on top, the board takes the rest. */
@media (min-width:1100px){
  body[data-screen=home] .journey-shell{gap:40px;max-width:1280px}
  body[data-screen=home] #journey{padding-bottom:104px}
  body[data-screen=home] .lobby-side{flex:0 0 400px;align-self:flex-end;gap:16px;height:max(520px,calc(100dvh - var(--head-h) - 104px));min-height:0;max-height:none;margin:0}
  body[data-screen=home] .lobby-side .house-strip{flex:0 0 auto;padding:16px 20px 20px}
  body[data-screen=home] .lobby-board.lb-v2{flex:1 1 auto;min-height:0;padding:20px;overflow:hidden}
  body[data-screen=home] .lobby-board.lb-v2>.lb-note{margin-top:12px;padding:0}
}
@media (min-width:1400px){body[data-screen=home] .journey-shell{gap:56px;max-width:1360px}body[data-screen=home] .lobby-side{flex-basis:440px}}
@media (min-width:1100px) and (max-height:820px){
  body[data-screen=home] .lobby-side{margin:0;height:max(480px,calc(100dvh - var(--head-h) - 104px))}
  body[data-screen=home] .lobby-side .house-strip{padding:12px 16px 14px}
  body[data-screen=home] .lobby-side .hb-art{max-width:60px}
  body[data-screen=home] .lobby-board.lb-v2{padding:16px}
  body[data-screen=home] .lb-v2 .lb-top{margin-bottom:12px}
  body[data-screen=home] .lb-v2 .lb-controls{margin-bottom:12px}
  body[data-screen=home] .lb-v2 .lb-row,body[data-screen=home] .lb-v2 .lb-you-row{height:36px;min-height:36px}
}
/* The phone and tablet sheet: the same panel, full height, touch rows. */
.lb-dialog{width:min(560px,calc(100vw - 24px));height:min(760px,calc(100dvh - 24px));max-height:none;padding:16px;overflow:hidden}
.lb-dialog .lb-sheet.lb-v2{height:100%}
.lb-dialog .lb-v2 .lb-top{padding-right:44px}
.lb-dialog .lb-v2 .lb-row,.lb-dialog .lb-v2 .lb-you-row{height:44px;min-height:44px}
.lb-dialog .lb-v2 .lb-houses button{min-height:40px}
.lb-dialog .lb-v2 .lb-controls{height:92px}
@media (max-width:420px){.lb-v2 .lb-houses{grid-template-columns:repeat(5,minmax(0,1fr))}.lb-v2 .lb-houses button{padding:0 4px;font-size:11.5px}.lb-v2 .lb-houses button::before{display:none!important}}
/* Font swap without reflow: Arial metrics adjusted to IBM Plex Sans for the moment before the preloaded face lands. */
@font-face{font-family:'Plex Fallback';src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:105%;ascent-override:97%;descent-override:26%;line-gap-override:0%}
:root{--ui:'IBM Plex Sans','Plex Fallback',system-ui,-apple-system,'Segoe UI',sans-serif}
/* Casing (DESIGN-LOBBY-v2.md §4): sentence case everywhere, no tracked capitals. Copy is authored in sentence case;
   these undo the old uppercase transforms that would put the capitals back. */
.eyebrow{font:500 13px/1.4 var(--ui);letter-spacing:0;text-transform:none}
.score-card small,#journey .bracket h2,.npc-pick legend,.tr-prizes thead th,.lb-title,.lb-name .lb-seat,.lb-cut,.stone-demo .rules-demo-label{letter-spacing:0!important;text-transform:none!important}
.npc-pick legend{font-size:13px}
.lb-cut{font-size:11px}
.battle-player[data-run=ended] b::after,.battle-player[data-guest] b::after,#result-versus::before{letter-spacing:0!important;text-transform:none!important}
.battle-player[data-run=ended] b::after{content:'Run ended'}
.battle-player[data-guest] b::after{content:'Guest'}
#identity-status,.cup-banner[data-kind=match] .cup-copy>b,.journey-field,.qual-tag,.result>.eyebrow,.result-numbers span,#result-record,#search-bar .sb-copy b,#search-bar button,.lb-warmup,.arrival>.eyebrow{letter-spacing:0!important;text-transform:none!important}
.cup-slot{visibility:hidden;pointer-events:none}

/* Desktop home: the shell is exactly the scroll box, the play column sits at its foot (never pushed below it), the side
   column runs from the header to the footer line. Below 1000px of height the banners become the compact strip, so the
   board keeps room for a long list (DESIGN-LOBBY-v2.md §2). */
@media (min-width:1100px){
  body[data-screen=home] .journey-shell{height:100%;min-height:0;align-items:stretch}
  body[data-screen=home] .arrival{align-self:flex-end;align-self:safe flex-end}
  body[data-screen=home] .lobby-side{align-self:stretch;height:auto;min-height:0}
}
@media (min-width:1100px) and (max-height:999px){
  body[data-screen=home] .lobby-side .hb-row{gap:8px}
  body[data-screen=home] .lobby-side .hb{flex-direction:row;gap:5px;justify-content:center;transform:none!important}
  body[data-screen=home] .lobby-side .hb-art{width:22px;max-width:22px;flex:none;filter:drop-shadow(0 3px 5px rgba(0,0,0,.45))}
  body[data-screen=home] .lobby-side .hb-plate{align-items:flex-start;min-width:0;padding:3px 7px 4px;border-radius:10px}
  body[data-screen=home] .lobby-side .hb-count{font-size:18px}
  body[data-screen=home] .lobby-side .hb-name{font-size:11px}
  body[data-screen=home] .lobby-side .hb[data-leading=true] .hb-art{filter:drop-shadow(0 0 8px rgba(240,181,74,.75))}
  body[data-screen=home] .lobby-side .hb-title{margin-bottom:10px}
}
/* Short desktops (1280x720 class): the board keeps the room. The banners lose their title line (the strip keeps its
   label for screen readers), the controls and rows step down one size, the footnote keeps one line. */
@media (min-width:1100px) and (max-height:999px){
  body[data-screen=home] .lobby-side .hb-plate{padding:3px 6px 4px}
  body[data-screen=home] .lobby-side .hb-name{font-size:10.5px}
}
@media (min-width:1100px) and (max-height:820px){
  body[data-screen=home] .lobby-side .hb-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  body[data-screen=home] .lobby-side .house-strip{padding:12px 16px}
  body[data-screen=home] .lb-v2 .lb-controls{height:74px;gap:10px}
  body[data-screen=home] .lb-v2 .lb-tabs button{min-height:36px}
  body[data-screen=home] .lb-v2 .lb-houses button{min-height:28px}
  body[data-screen=home] .lb-v2 .lb-head{height:28px}
  body[data-screen=home] .lb-v2 .lb-note{min-height:19px;-webkit-line-clamp:1;margin-top:10px}
  body[data-screen=home] .lb-v2 .lb-you{margin-top:6px}
}
.tr-head h1{margin-bottom:10px}
.tr-section .tr-lead{font-size:17px!important;line-height:1.5!important;margin-bottom:12px!important}
.lb-v2 .lb-scroll{border-bottom:1px solid rgba(243,239,230,.1)}
.lb-dialog .lb-v2 .lb-note{-webkit-line-clamp:3;min-height:57px}

/* ================================================================== the nav tree (DESIGN-LOBBY-v2.md §5, v3)
   Desktop (>=1200): one fixed left nav on a glass surface, aligned under the HOUND logo, a constant width whether The
   Trials is open or not (no shift). Narrower: one disclosure in the page under the title. Never a second header. */
:root{--tree-w:232px;--tree-x:max(40px,calc(50vw - 640px))}
.spire-tree{display:none}
.spire-menu{position:relative;order:1;flex:1 1 100%;margin:4px 0 10px}
.journey-shell>.spire-menu{width:100%;max-width:560px;margin:0 auto 10px}
.sm-toggle{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 18px;border-radius:999px;border:1px solid rgba(243,239,230,.2);
  background:rgba(12,20,18,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);color:var(--text);font:600 15px/1 var(--ui);cursor:pointer}
.sm-chev{width:14px;height:14px;background:currentColor;-webkit-mask:var(--i-chev) center/contain no-repeat;mask:var(--i-chev) center/contain no-repeat;transform:rotate(90deg);transition:transform .2s}
.sm-toggle[aria-expanded=true] .sm-chev{transform:rotate(-90deg)}
.sm-toggle:focus-visible{outline:2px solid var(--jade-ink);outline-offset:3px}
.sm-panel{margin-top:8px;padding:8px;border-radius:20px;background:rgba(12,20,18,.92);border:1px solid rgba(243,239,230,.16);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);max-width:420px}
.sm-panel[hidden]{display:none}
@media (max-width:1199px){
  body[data-sections=true] .spire-menu{position:sticky;top:0;z-index:15;align-self:flex-start}
  .sm-panel{position:absolute;top:100%;left:0;width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - var(--head-h) - var(--foot-h) - 88px);overflow-y:auto;overscroll-behavior:contain}
}
.st-list,.st-sub{list-style:none;margin:0;padding:0}
.st-list{display:grid;gap:2px}
.st-link,.st-child{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:12px;color:var(--muted);text-decoration:none;font:500 15px/1.25 var(--ui)}
.st-link:hover,.st-child:hover{color:var(--text);background:rgba(243,239,230,.06)}
.st-link[aria-current=page]{color:var(--text);font-weight:600;background:rgba(243,239,230,.1)}
.st-link:focus-visible,.st-child:focus-visible{outline:2px solid var(--jade-ink);outline-offset:-2px}
.st-sub{display:grid;gap:0;margin:2px 0 6px 14px;padding-left:10px;border-left:1px solid rgba(243,239,230,.14)}
.st-child{min-height:36px;padding:0 10px;font-size:14px}
.st-child[aria-current=location]{color:var(--jade-ink);font-weight:600}
.st-child[aria-current=location]::before{content:'';width:6px;height:6px;margin:0 8px 0 -4px;flex:none;border-radius:50%;background:var(--jade)}
@media (pointer:coarse){.st-child{min-height:44px}}
@media (min-width:1200px){
  body[data-sections=true]:not([data-screen=game]) .spire-tree{display:block;position:fixed;z-index:14;left:var(--tree-x);top:calc(var(--head-h) + 8px);width:var(--tree-w);
    max-height:calc(100dvh - var(--head-h) - 8px - 104px);overflow:auto;overscroll-behavior:contain;padding:10px;border-radius:22px;
    background:rgba(12,20,18,.8);border:1px solid rgba(243,239,230,.14);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);scrollbar-width:thin}
  html[data-power=low] .spire-tree{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:rgba(14,22,19,.95)!important}
  body[data-sections=true]:not([data-screen=game]) .spire-menu{display:none}
  body[data-sections=true]:not([data-screen=game]) #journey{padding-left:calc(var(--tree-x) + var(--tree-w) + 32px);padding-right:var(--tree-x)}
  body[data-sections=true] .journey-shell{margin-left:0;max-width:calc(1280px - var(--tree-w) - 32px)}
  body[data-screen=home] .journey-shell{max-width:none}
}
@media (min-width:1200px) and (max-width:1399px){body[data-screen=home] .journey-shell{gap:32px}}
/* The fixed footer (Event honours / online) never covers a card: on the reading screens the scroll box ends above it. */
body:is([data-screen=trials],[data-screen=rules],[data-screen=qualifying],[data-screen=bracket],[data-screen=cup-stakes]) #journey{bottom:calc(var(--foot-h) + env(safe-area-inset-bottom));padding-bottom:24px}
@media (min-width:1024px) and (min-height:551px){
  body:is([data-screen=trials],[data-screen=rules],[data-screen=qualifying],[data-screen=bracket],[data-screen=cup-stakes]) #journey{bottom:88px}
}
/* The Trials column now that the index lives in the tree. */
@media (min-width:1100px){
  .trials-screen{grid-template-columns:minmax(0,760px)!important;justify-content:start}
  .tr-index{display:none!important}
}
/* The reading screens scroll in a box between the header and the footer, so cards never slide under either. */
body:is([data-screen=trials],[data-screen=rules],[data-screen=qualifying],[data-screen=bracket],[data-screen=cup-stakes]) #journey{top:var(--head-h);padding-top:12px}
body[data-screen=trials] .tr-section{scroll-margin-top:12px}

/* Sign-in: providers first, guest entry second, recovery kept quiet. */
.compact-screen.signin-screen{display:block;max-width:620px;text-align:left}
#journey .signin-screen h1{font-size:clamp(30px,4vw,44px);line-height:1.1;margin-bottom:14px}
.signin-screen .signin-providers{display:grid;gap:10px;margin-top:20px}
.signin-screen .signin-providers>*{width:100%;min-height:52px}
.signin-recheck{margin:8px 0 16px}
#journey .signin-recheck .text-button,#journey .signin-footer .text-button{min-height:44px;font-size:14px;background:none;border-color:transparent;padding-left:0;text-decoration:underline;text-underline-offset:4px;box-shadow:none}
.signin-screen #signin-status{font-size:14px;line-height:1.45;margin:0;color:var(--cream)}
.signin-screen .guest-panel{border-top:1px solid var(--glass-edge);padding-top:20px;margin-top:8px;background:none;border-radius:0}
#journey .signin-screen .guest-panel h2{font:600 20px/1.3 var(--ui);margin:0 0 6px}
.signin-screen .guest-panel p{font-size:15px;line-height:1.5;margin:0 0 14px}
.signin-screen .guest-field{display:block;font:600 14px/1.4 var(--ui);margin-bottom:6px}
.signin-screen #guest-name{display:block;box-sizing:border-box;width:100%;min-width:0;min-height:50px;border:1px solid var(--glass-edge);border-radius:10px;padding:12px 14px;background:var(--base);color:var(--cream);font:400 16px/1.4 var(--ui);caret-color:var(--cream)}
.signin-screen #guest-name::placeholder{color:var(--muted);opacity:1}
.signin-screen #guest-name:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.signin-screen #guest-hint{display:block;font:400 13px/1.45 var(--ui);color:var(--muted);margin-top:8px}
.signin-screen .guest-panel .journey-actions{display:grid;margin-top:14px}
.signin-screen #journey-error:empty,.signin-screen #signin-status:empty{display:none}
.signin-screen #journey-error{margin-top:10px}
.signin-footer{margin-top:12px}

/* Keep the emblems legible instead of compressing them beside score plates. */
body[data-screen=home] .house-banners .hb{flex-direction:column;gap:4px;transform:none!important}
body[data-screen=home] .house-banners .hb-art{width:48px;max-width:48px;flex:none}
body[data-screen=home] .house-banners .hb-plate{align-items:center}
@media(min-width:1100px){
 body[data-screen=home] .lobby-side .house-banners .hb-art{width:58px;max-width:58px}
}
/* The source bitmap has more transparent padding above/left of its painted speaker. */
#sound .hm-snd-off{transform:translate(-2px,-2px)}
.lb-v2 .lb-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.lb-v2 .lb-tabs button{min-height:40px}
.lb-v2 .lb-controls:has([data-ctab=winRate]){height:auto;min-height:92px}
.mp-rates{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;font:400 13px/1.4 var(--ui);color:var(--text)}
.mp-rates b{font-weight:700;font-variant-numeric:tabular-nums}
.mp-rates small{display:block;font-size:12px;color:var(--muted)}
/* Result explanations are body copy, not a multi-line brush headline. */
#result-verdict{font:400 18px/1.5 var(--ui);max-width:52ch;margin:0 auto 12px;text-wrap:pretty}
@media(max-width:760px){#result-verdict{font-size:15px;line-height:1.45}}
.play-more>.secondary.quiet[data-action=online-ranked]{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 12px}
.play-more>.secondary.quiet[data-action=online-ranked] .label{flex:none;white-space:normal;overflow:visible}
.play-more>.secondary.quiet[data-action=online-ranked] .sub{font-size:11px;line-height:1.3;text-align:center}