/* The main screen (web/main-screen.js; docs/archive/superpowers/specs/2026-10-17-lobby-overhaul-design.md).
   Three cards over the live hero, a small corner bar, and the dialogs the cards open.
   The faces (Morpheus, Friz) are declared once in lobby.css; these tokens reuse its palette. */
:root{
  --ms-title-font:Morpheus,Friz,Georgia,serif;
  --ms-body-font:Friz,Georgia,serif;
  --ms-gold:var(--gold,#e5c170);
  --ms-gold-bright:var(--gold-bright,#ffe49c);
  --ms-label:#ffd100;
  --ms-muted:var(--muted,#a59a83);
  --ms-ink:var(--ink,#100d09);
  --ms-line:var(--line,#61533a);
  --ms-frame:#e2b858;
  --ms-frame-deep:#b8862b;
  --ms-card:linear-gradient(#211c13,#0f0b07);
  --ms-button-red:linear-gradient(#65180e,#310705);
  --ms-hint:#b7a07a;
}

/* The main screen: cards in the lower part of the viewport so the live hero stands clear above. */
.adventure-setup.main-screen{max-width:none;margin:0;padding:0;pointer-events:none}
.main-card{position:relative;isolation:isolate;min-width:0;padding:20px 22px 18px;background:var(--ms-card);border:1px solid var(--ms-line);color:#e9dcbc;font-family:var(--ms-body-font);pointer-events:auto;box-shadow:0 6px 24px #000a}
.main-card h1,.main-card h2{font-family:var(--ms-title-font);color:var(--ms-gold-bright);margin:0;text-shadow:1px 2px #000}
.main-card-sub{margin:2px 0 10px;color:var(--ms-label);font-size:13px}
.main-card .eyebrow{color:var(--ms-label);font:12px var(--ms-body-font);letter-spacing:.14em;text-align:center}
#setupHeroName{font-size:28px;line-height:1.1}
#heroCard .gear-doll-gap{display:none}
#heroCard .gear-doll{grid-template-columns:1fr 1fr}
#heroCard .gear-doll-left,#heroCard .gear-doll-right{justify-items:center}
#heroCard .gear-panel>.gear-currencies{margin-bottom:8px}
#heroCard .gear-menu .gear-status:empty{display:none}
#heroCard .gear-panel:not(:has(.gear-sheet)){padding:10px 4px;color:var(--ms-hint);font-size:13px;line-height:1.5;text-align:center}
#heroCard .character-account{display:block;margin-top:10px;border-top:1px solid #79613b88;padding-top:10px}
#heroCard .account-actions{display:none}
#heroCard .account-status strong{font-size:12px}#heroCard .account-status span{font-size:11px}
#heroCard #legacyClassLabel{display:block;margin:10px 0 0;font-size:12px}
.hero-card-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0 8px}
.hero-card-actions button{min-height:44px;padding:0 6px;font:16px var(--ms-body-font);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;line-height:18px;background-image:var(--classic-button-tall,var(--classic-button))}
.hero-card-actions small{display:block;font-size:10px;line-height:11px;margin:0}
#setupBack,#changeZone,#changeDifficulty{background:none;border:0;box-shadow:none;min-height:0;padding:2px 4px;font:13px var(--ms-body-font);color:var(--ms-gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#setupBack:hover,#changeZone:hover,#changeDifficulty:hover{color:var(--ms-gold-bright);filter:none}
/* The bar is sticky, so while the card scrolls it overlays the Keystone Vendor button beneath it: only the label
   takes clicks, the gradient lets them fall through to the button (1366x768 acceptance, 2026-10-23). */
#setupBack{display:block;margin:4px auto 0;position:sticky;bottom:0;z-index:1;width:100%;padding:8px 4px 10px;background:linear-gradient(to bottom,#0f0b0700,#0f0b07 65%);pointer-events:none}#setupBack>span{pointer-events:auto}
.next-run-card{text-align:center;border-color:var(--ms-frame);box-shadow:0 0 0 1px #000,0 0 28px #e2b85840,0 6px 24px #000a}
#nextZone{font-size:40px;line-height:1.05;margin:6px 0 4px}
.next-line{margin:0 0 6px;color:#e1d3b0;font-size:14px}
.next-links{display:flex;justify-content:center;gap:18px;margin:0 0 12px}
.next-links [hidden]{display:none}
/* Game mode: one segmented strip of flat tabs, the chosen one lit like a selected realm tab (lobby.css
   .realm-tabs). The strip's own colour shows through the 1px gaps as dividers, between wrapped rows too.
   The card-id scope outranks lobby.css's classic red button rule, so these read as settings, not actions. */
.game-mode{display:flex;flex-wrap:wrap;justify-content:center;gap:1px;width:fit-content;max-width:100%;box-sizing:border-box;margin:6px auto 6px;padding:0;background:#3a2c17;border:1px solid #5a4626;border-radius:4px;box-shadow:0 0 0 1px #0009,0 1px 0 #ffffff0a;overflow:hidden}
.game-mode[hidden]{display:none}
:is(#nextRunCard,#partyCard) .game-mode button{flex:1 1 auto;min-height:0;margin:0;padding:5px 7px;background:linear-gradient(#1a1309,#0d0905);border:0;border-radius:0;box-shadow:inset 0 2px 3px -1px #000c;font:12px/1.2 var(--ms-body-font);color:#c9b17a;text-decoration:none;text-shadow:1px 1px #000;white-space:nowrap;cursor:pointer;filter:none;opacity:1}
:is(#nextRunCard,#partyCard) .game-mode button[hidden]{display:none}
:is(#nextRunCard,#partyCard) .game-mode button:hover:enabled:not([aria-pressed="true"]){color:#f1dca0;background:linear-gradient(#2c2011,#150f07);filter:none}
:is(#nextRunCard,#partyCard) .game-mode button[aria-pressed="true"]{color:#ffe199;font-weight:bold;background:linear-gradient(#5a4322,#2d1f10);box-shadow:inset 0 1px #d6c29733;cursor:default}
:is(#nextRunCard,#partyCard) .game-mode button:disabled{cursor:default;filter:none}
:is(#nextRunCard,#partyCard) .game-mode button:disabled:not([aria-pressed="true"]){opacity:.55}
:is(#nextRunCard,#partyCard) .game-mode button:focus-visible{outline-offset:-2px}
/* Car Brawl's Arena row and Mirage Kart's Course and Length rows (lobby.js renderArenaPicker, renderRaceOptions):
   a small label, then pill chips, the chosen one filled. */
.game-arena{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 8px;margin:0 0 4px;font-size:12px;color:var(--ms-label)}
.game-arena[hidden]{display:none}
.game-arena>span:not([class]){font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ms-label);opacity:.8}
:is(#nextRunCard,#partyCard) .game-arena button{min-height:0;margin:0;padding:2px 9px;background:transparent;border:1px solid #5a4626;border-radius:10px;box-shadow:none;font:12px/1.25 var(--ms-body-font);color:#d8c48c;text-decoration:none;text-shadow:1px 1px #000;white-space:nowrap;cursor:pointer;filter:none;opacity:1}
:is(#nextRunCard,#partyCard) .game-arena button:hover:enabled:not([aria-pressed="true"]){color:#f1dca0;border-color:#8a7040;background:#ffffff0a;filter:none}
:is(#nextRunCard,#partyCard) .game-arena button[aria-pressed="true"]{background:#3a2a14;border-color:#b2924e;color:#ffe199;font-weight:bold;cursor:default}
:is(#nextRunCard,#partyCard) .game-arena button:disabled{cursor:default;filter:none}
:is(#nextRunCard,#partyCard) .game-arena button:disabled:not([aria-pressed="true"]){opacity:.55}
/* A Length chip's lap count: a lighter, smaller suffix ("Sprint (1 lap)"); short windows hide it below. */
.game-race .race-laps{font-size:10.5px;font-weight:normal;color:#b3a172}
/* The race's twist: a small blue tag after the Course chips. */
.game-race .race-twist{color:#9fe6ff;font-style:italic;font-size:11px;padding:1px 7px;border:1px solid #2c5566;border-radius:3px;background:#0b1a21}
/* Why a race row cannot be changed (a guest, a member), in words under it; the buttons point at it. */
.game-race .race-reason{flex-basis:100%;font-size:11px;font-style:italic;color:var(--ms-muted)}
/* A car room seats eight: tighter member rows on the party card. */
.party-members[data-car="1"]{gap:3px;margin-bottom:6px}
.party-members[data-car="1"] .party-pill{grid-template-columns:22px 1fr auto;gap:6px;padding:1px 8px}
.party-members[data-car="1"] .party-pill.removable{grid-template-columns:22px 1fr auto auto}
.party-members[data-car="1"] .party-pill .unit-icon{width:20px;height:20px}
.party-members[data-car="1"] .party-pill strong{font-size:13px}
/* Short windows (1366x768, 960x600): the mode, arena and race rows tighten on both cards, and a
   Length chip shows its name only (the lap count stays in its title and on the race line). */
@media(min-width:801px) and (max-height:800px){
 .game-mode{margin:0 0 2px}
 .game-arena{gap:0 8px;margin:0 0 2px;line-height:1.25}
 .game-race .race-laps{display:none}
}
/* The strip and chip rows in short windows: the strip stays centred, wrapped chips keep a row gap. */
@media(min-width:801px) and (max-height:800px){
 .game-mode{margin:5px auto 5px}
 :is(#nextRunCard,#partyCard) .game-mode button{padding:4px 7px}
 .game-arena{gap:3px 6px;margin:0 0 3px}
 :is(#nextRunCard,#partyCard) .game-arena button{padding:1px 8px}
}
/* Cards narrower than the five tabs (801-1179px wide windows): three tabs over two, never four over one. */
@media(min-width:801px) and (max-width:1179px){:is(#nextRunCard,#partyCard) .game-mode button{flex:1 1 26%;padding-left:5px;padding-right:5px}}
/* Barren Bashers (barren-bashers.js): a car and no fight, so the run bar keeps the mode only; the race line under it
   carries the lap clock, the one clock a car room shows (Wave 0 visual review). */
body.barren-bashers #runTime,body.barren-bashers #runBar span:has(> #runLevel),body.barren-bashers #runBar span:has(> #runKills),body.barren-bashers #runBar span:has(> #runGold),body.barren-bashers #buyChest,body.barren-bashers #damageMeter,body.barren-bashers #survivalBar,body.barren-bashers #defenseFrame,body.barren-bashers #objectivePanel{display: none !important}
/* A car room's first-run hint sits higher (barren-bashers.js HUD.hintBottom), over the meters in the bottom right corner. */
body.barren-bashers .run-hint{bottom:144px}
/* Mirage Kart's race HUD and results (car-race.js, card K1.7). raceLayout places every box (left, top, width inline);
   these rules are the looks. The race banner carries the clocks, so the run bar's "Barren Bashers" mode label goes. */
body.car-race #runDifficulty{display:none !important}
.car-race-banner[hidden],.car-race-map[hidden],.car-race-standings[hidden],.car-race-callout[hidden],.car-race-results[hidden]{display:none !important}
.car-race-banner{position:fixed;z-index:45;box-sizing:border-box;height:56px;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:38px 14px;align-items:center;column-gap:20px;padding:1px 16px 3px;border:1px solid #8a6d2c;background:linear-gradient(#22180ae8,#0b0905e8);box-shadow:0 0 0 1px #000,0 4px 16px #0009;color:#f1e3b0;font:600 12px Friz,Georgia,serif;white-space:nowrap;pointer-events:none}
.car-race-banner b{display:inline-block;font:bold 32px/1 Morpheus,Georgia,serif;color:#ffd76a;text-shadow:0 2px 0 #5a3a08,0 0 10px #000}
.car-race-banner small{font:600 14px Friz,Georgia,serif;color:#bfae7a;margin-left:2px}
.cr-pos sup{font:bold 15px Morpheus,Georgia,serif;color:#ffd76a;vertical-align:top;margin-left:1px}
.cr-lap span,.cr-timer span{margin-right:6px;font:600 10px Friz,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#bfae7a}
.cr-lap.cr-final b{color:#ff9a3c;animation:cr-pulse .45s ease-in-out infinite alternate}
.cr-timer{justify-self:end}
.cr-timer.cr-urgent b{color:#ff5a3c;animation:cr-pulse .5s ease-in-out infinite alternate}
.cr-timer.cr-closing b{color:#ffb36a}
.cr-timer.cr-lich b,.cr-timer.cr-lich span{color:#9fe6ff;text-shadow:0 0 12px #2a7fd0,0 2px 0 #0b2a50}
.cr-times{grid-column:1/-1;text-align:center;font-size:11px;line-height:14px;color:#d8c690;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-times .cr-tag{color:#9fe6ff}
.car-race-map{position:fixed;z-index:45;pointer-events:none;background:radial-gradient(#130e06e0,#0b0905b0);outline:1px solid #8a6d2c;box-shadow:0 0 0 2px #000,0 4px 14px #0008}
.car-race-map svg{display:block;overflow:visible}
.car-race-map .cr-road{fill:none;stroke:#4a3818;stroke-width:9;stroke-linejoin:round}
.car-race-map .cr-paint{fill:none;stroke:#e9d6a0;stroke-width:2.5;stroke-linejoin:round}
.car-race-map .cr-finish{stroke:#fff;stroke-width:4;stroke-dasharray:2 2}
.car-race-map .cr-dot{stroke:#000;stroke-width:1.2}
.car-race-map .cr-leader{stroke:#ffd76a;stroke-width:2}
.car-race-map .cr-me{fill:#fff3;stroke:#fff;stroke-width:1.6;animation:cr-blink 1s ease-in-out infinite}
.car-race-standings{position:fixed;z-index:45;box-sizing:border-box;padding:5px 10px 6px;border:1px solid #8a6d2c;background:#0b0905dc;box-shadow:0 0 0 1px #000,0 4px 14px #0008;color:#f1e3b0;font:600 12px Friz,Georgia,serif;pointer-events:none}
.car-race-standings h2{margin:0 0 3px;font:bold 16px/22px Morpheus,Georgia,serif;color:#ffd76a;text-align:center}
.car-race-standings ol{list-style:none;margin:0;padding:0}
.car-race-standings li{display:grid;grid-template-columns:30px 10px minmax(0,1fr) auto;gap:6px;align-items:center;height:var(--cr-row,19px);padding:0 4px;white-space:nowrap}
.car-race-standings li i,.car-race-results td i,.cr-step i{display:inline-block;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px #000}
.car-race-standings .cr-place{color:#bfae7a}
.car-race-standings .cr-name{display:flex;align-items:baseline;gap:4px;min-width:0;overflow:hidden}.car-race-standings .cr-who{min-width:0;overflow:hidden;text-overflow:ellipsis}.car-race-standings .cr-name em{flex:none}
.car-race-standings .cr-status{color:#d8c690;font-size:11px}
.car-race-standings li.cr-mine{background:linear-gradient(90deg,#ffd76a3a,#ffd76a08);color:#fff}
.car-race-standings li.cr-done .cr-status{color:#9fe69f}
.car-race-standings em,.car-race-results em{font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9a8c68}
.car-race-callout{position:fixed;z-index:58;overflow:hidden;text-align:center;white-space:nowrap;word-spacing:.3em;pointer-events:none;font:bold 40px/1.25 Morpheus,Georgia,serif;color:#ffd76a;text-shadow:0 0 18px #000,0 4px 0 #5a3a08;animation:cr-pop .35s cubic-bezier(.2,1.6,.4,1)}
.car-race-callout.cr-final{color:#ff9a3c}
.car-race-callout.cr-win{color:#ffe08a;text-shadow:0 0 22px #ffb000,0 4px 0 #5a3a08}
.car-race-callout.cr-record{color:#e2b8ff;text-shadow:0 0 18px #6a2fb0,0 4px 0 #2a0e50}
.car-race-callout.cr-lich{color:#bff0ff;text-shadow:0 0 22px #2a7fd0,0 4px 0 #0b2a50}
.car-race-callout.cr-tow{color:#9ff07f;text-shadow:0 0 18px #000,0 4px 0 #1d4a0e}
.car-race-callout.cr-wrong{color:#ff4b3a;text-shadow:0 0 18px #000,0 4px 0 #5a0e08;animation:cr-flash .6s steps(2,jump-none) infinite}
/* Mirage Kart's items (car-items.js, card I2.4): the slot in the left column under the unit frames (chips to its
   right), the feed under the standings, and item lines in the callout box. car-race.js places the slot and feed. */
.car-items-slot[hidden],.car-items-feed[hidden]{display:none !important}
.car-items-slot{position:fixed;z-index:45;box-sizing:border-box;display:flex;align-items:center;gap:10px;padding:4px 10px 4px 4px;border:1px solid #8a6d2c;background:#0b0905dc;box-shadow:0 0 0 1px #000,0 4px 14px #0008;color:#f1e3b0;pointer-events:none}
.car-items-slot .ci-tile{flex:none;box-sizing:border-box;height:100%;aspect-ratio:1;display:grid;place-items:center;font:28px/1 'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;border:1px solid #5a4620;background:radial-gradient(#3a2d12,#15100a)}
.car-items-slot.ci-held .ci-tile{border-color:#ffd76a;box-shadow:0 0 10px #ffb00088;animation:ci-pop .4s cubic-bezier(.2,1.8,.4,1)}
.car-items-slot.ci-rolling .ci-tile{border-color:#9fe6ff;animation:ci-shake .12s linear infinite}
.car-items-slot.ci-empty{opacity:.6}
.car-items-slot.ci-immune{animation:cr-blink .5s steps(2,jump-none) infinite}
.car-items-slot .ci-text{min-width:0;display:grid;gap:2px}
.car-items-slot .ci-name{font:bold 17px/1.1 Morpheus,Georgia,serif;color:#ffd76a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car-items-slot .ci-hint{font:600 12px/1.2 Friz,Georgia,serif;color:#bfae7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car-items-slot .ci-chips{position:absolute;left:100%;top:0;margin-left:6px;display:grid;gap:3px;justify-items:start}
.car-items-slot .ci-chip{padding:1px 8px;border:1px solid #8a6d2c;background:#0b0905dc;font:bold 13px/1.3 Friz,Georgia,serif;white-space:nowrap;color:#9fe6ff}
.car-items-slot .ci-chip.ci-bad{color:#ff8a6a;border-color:#b0452c}
.car-items-feed{position:fixed;z-index:44;box-sizing:border-box;margin:0;padding:3px 6px;list-style:none;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;background:#0b090588;border-left:2px solid #8a6d2c;pointer-events:none}
.car-items-feed li{height:16px;font:600 12px/16px Friz,Georgia,serif;color:#cdbd8e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.car-items-feed li.ci-mine{color:#ffe08a}
.car-items-feed li.ci-hurt{color:#ff8a6a}
.car-items-feed li.ci-lich:not(.ci-hurt){color:#9fe6ff}
.car-race-callout.cr-item-hurt{color:#ff7a54;text-shadow:0 0 14px #000,0 3px 0 #5a0e08}
.car-race-callout.cr-item-mine{color:#9fe6ff;text-shadow:0 0 14px #000,0 3px 0 #0b2a50}
/* Mirage Kart's announcers and podium party (car-juice.js, card L3.3): a caption under the banner, a canvas of confetti and fireworks over everything. */
.car-juice-caption[hidden],.car-juice-party[hidden]{display:none !important}
.car-juice-caption.compact{padding:2px 8px;font-size:13px;line-height:1.25;white-space:nowrap;text-overflow:ellipsis}
.car-juice-caption{position:fixed;z-index:57;box-sizing:border-box;max-height:46px;overflow:hidden;text-align:center;pointer-events:none;padding:3px 10px;border:1px solid #5a4620;background:#0b0905cc;box-shadow:0 2px 10px #0008;color:#f6ecc8;font:600 15px/1.3 Friz,Georgia,serif;text-shadow:0 1px 0 #000;animation:cr-pop .25s cubic-bezier(.2,1.6,.4,1)}
.car-juice-party{position:fixed;left:0;top:0;width:100vw;height:100vh;z-index:49;pointer-events:none}
@media (prefers-reduced-motion:reduce){.car-juice-caption{animation:none}}
.car-race-callout.cr-item-seen{color:#f1e3b0;text-shadow:0 0 14px #000,0 3px 0 #3a2a08}
.car-race-callout.cr-item-lich{color:#bff0ff;text-shadow:0 0 18px #2a7fd0,0 3px 0 #0b2a50}
.car-race-results{position:fixed;z-index:50;box-sizing:border-box;overflow:auto;padding:10px 16px 12px;border:1px solid var(--ms-frame,#c9a54a);background:linear-gradient(#211c13f7,#0f0b07f7);box-shadow:0 0 0 1px #000,0 0 28px #e2b85840,0 6px 24px #000a;color:#e9dcbc;font:13px Friz,Georgia,serif;pointer-events:auto;animation:cr-pop .3s ease-out}
.car-race-results header{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.car-race-results h2{margin:0;font:bold 26px Morpheus,Georgia,serif;color:#ffd76a;text-shadow:1px 2px #000}
.car-race-results .cr-next{color:#bfae7a;font-size:12px}
.car-race-results .cr-next b{color:#ffe08a;font-size:15px}
.cr-top{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:center;margin:6px 0 8px}
.cr-podium{display:grid;grid-template-columns:repeat(3,92px);align-items:end;gap:5px}
.cr-step{min-width:0;text-align:center}
.cr-step b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:bold 13px Friz,Georgia,serif;color:#fff}
.cr-step span{display:block;font-size:11px;color:#bfae7a}
.cr-block{margin-top:3px;font:bold 24px Morpheus,Georgia,serif;color:#1b1206;text-shadow:0 1px #fff6;border:1px solid #000;box-shadow:inset 0 1px #fff8}
.cr-step-1 .cr-block{height:56px;line-height:56px;background:linear-gradient(#ffe89a,#c98b16)}
.cr-step-2 .cr-block{height:40px;line-height:40px;background:linear-gradient(#f2f2f2,#8f9aa6)}
.cr-step-3 .cr-block{height:30px;line-height:30px;font-size:20px;background:linear-gradient(#f0b27a,#9a5a26)}
.cr-step.cr-empty{visibility:hidden}
.cr-photo{position:relative;width:190px;margin:0;text-align:center}
.cr-photo img{display:block;width:100%;border:3px solid #fff;box-shadow:0 3px 10px #000a;filter:sepia(.3) contrast(1.1);transform:rotate(-2deg)}
.cr-photo strong{position:absolute;top:4px;left:50%;transform:translateX(-50%) rotate(-5deg);padding:1px 8px;white-space:nowrap;background:#c0281c;color:#fff;font:bold 14px Morpheus,Georgia,serif;box-shadow:0 2px 6px #000a}
.cr-photo figcaption{margin-top:4px;font-size:11px;color:#d8c690}
.cr-photo-blank{display:flex;flex-direction:column;justify-content:flex-end;height:96px;padding:0 0 8px;border:3px solid #fff;background:repeating-conic-gradient(#1b1206 0 25%,#e9dcbc 0 50%) 0 0/16px 16px;color:#fff;font:bold 15px Morpheus,Georgia,serif;text-shadow:0 0 6px #000,0 0 3px #000}
.cr-photo-blank span{padding:3px 6px;background:#000c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cr-photo-blank small{font:11px Friz,Georgia,serif;color:#bfae7a}
.cr-table{width:100%;border-collapse:collapse;font-size:12px}
.cr-table th{padding:2px 4px;border-bottom:1px solid #5b4a24;color:#bfae7a;font-weight:normal;text-align:left}
.cr-table td{height:18px;padding:1px 4px;white-space:nowrap}
.cr-table td i{margin-right:6px}
.cr-table tr.cr-mine td{background:#ffd76a22;color:#fff}
.cr-record{margin:6px 0 0;text-align:center;font-size:11px;color:#bfae7a}
.cr-record b{color:#e2b8ff}
/* The Rematch button stays in view under the results: the panel is a column whose body scrolls on
   its own, so the button never sits on a row (W6 at 960x600 it hid your own 8th place and the record). */
.car-race-results:not(.cr-folded){display:flex;flex-direction:column;overflow:hidden}
.car-race-results:not(.cr-folded) .cr-results-body{flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#81673e #181108}
.car-race-results .cr-rematch{position:static;flex:none;display:block;min-width:160px;min-height:32px;margin:8px auto 0;font:15px Friz,Georgia,serif}
/* Leave the race (back to the hero), under Rematch; a dragged finish says so instead of a podium. */
.car-race-results .cr-leave{position:static;flex:none;display:block;min-width:120px;min-height:26px;margin:5px auto 0;font:13px Friz,Georgia,serif}
.cr-no-podium{max-width:300px;padding:10px 12px;border:1px solid #3d5a78;background:#0b1a2acc;color:#bfe3ff;font:14px Friz,Georgia,serif;text-align:center}
.car-race-results .cr-dragged{margin:4px 0 0;text-align:center;color:#bfe3ff;font:bold 15px Friz,Georgia,serif}
/* Short windows: a tighter podium, photo and rows, so eight rows and the record fit without a scrollbar. */
@media(max-height:700px){
 .car-race-results{padding:6px 12px 8px}
 .car-race-results h2{font-size:20px}
 .cr-top{gap:10px;margin:2px 0 4px}
 .cr-podium{grid-template-columns:repeat(3,80px)}
 .cr-step-1 .cr-block{height:38px;line-height:38px}
 .cr-step-2 .cr-block{height:28px;line-height:28px}
 .cr-step-3 .cr-block{height:20px;line-height:20px;font-size:16px}
 .cr-block{font-size:18px}
 .cr-photo{width:128px}
 .cr-photo-blank{height:64px}
 .cr-table td{height:15px;padding:0 4px}
 .cr-record{margin-top:3px}
 .car-race-results .cr-rematch{min-height:28px;margin-top:5px}
}
.car-race-results.cr-folded{display:flex;align-items:center;justify-content:space-between;gap:12px;overflow:visible;padding:6px 12px;animation:none}
.car-race-results.cr-folded .cr-results-body{display:flex;align-items:center;gap:14px}
.car-race-results.cr-folded .cr-rematch{position:static;margin:0;min-height:28px;box-shadow:none}
.car-race-results.cr-folded .cr-leave{margin:0;min-height:28px}
@keyframes cr-pop{from{transform:scale(1.5);opacity:0}to{transform:none;opacity:1}}
@keyframes cr-pulse{to{transform:scale(1.12)}}
@keyframes cr-flash{50%{opacity:.3}}
@keyframes cr-blink{50%{opacity:.35}}
@keyframes ci-pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
@keyframes ci-shake{0%{transform:translateY(-2px)}50%{transform:translateY(2px)}100%{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){.car-race-banner b,.car-race-map .cr-me,.car-race-callout,.car-race-results,.car-items-slot,.car-items-slot .ci-tile{animation:none !important}}
/* Car Brawl's HUD and winner screen (car-brawl.js, card R5.3): it wears the race HUD's frames (car-race-* classes) and adds its own
   health bars, lives, arena map, kill feed and callouts. brawlLayout places every box. */
.car-brawl-banner{grid-template-columns:1fr auto auto}
.cb-vitals{display:flex;align-items:center;gap:12px;min-width:0}
.cb-hpbar{position:relative;box-sizing:border-box;width:200px;height:24px;border:1px solid #000;background:#2a0d0a;box-shadow:0 0 0 1px #8a6d2c}
.cb-hpbar u{position:absolute;inset:0 auto 0 0;background:linear-gradient(#7be86a,#2f9a2a);transition:width .18s linear}
.cb-hpbar.cb-mid u{background:linear-gradient(#ffd75a,#c98b16)}
.cb-hpbar.cb-low u{background:linear-gradient(#ff6a52,#b4200f);animation:cr-flash .7s steps(2,jump-none) infinite}
.car-brawl-banner .cb-hpbar b{position:absolute;inset:0;display:block;font:bold 15px/24px Friz,Georgia,serif;color:#fff;text-align:center;text-shadow:0 1px 3px #000,0 0 2px #000}
.cb-hpbar.cb-dead u{width:0 !important}
.cb-lives{display:inline-flex;gap:4px;align-items:center}
.cb-lives s{display:inline-block;width:12px;height:12px;border:1px solid #000;border-radius:50%;text-decoration:none}
.cb-lives s.cb-on{background:radial-gradient(circle at 35% 30%,#ffb0a0,#d8301c 60%,#7a1208);box-shadow:0 0 5px #ff4b3a99}
.cb-lives s.cb-off{background:#1a1410;box-shadow:inset 0 0 0 1px #4a3818}
.cb-lives em{font-style:normal;font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:#9a8c68}
.cb-alive{justify-self:center;white-space:nowrap}
.cb-alive span{margin-right:6px;font:600 10px Friz,Georgia,serif;letter-spacing:.12em;text-transform:uppercase;color:#bfae7a}
.car-brawl-banner .cr-times.cb-storming{color:#ff7a5c;font-weight:bold;animation:cr-flash .6s steps(2,jump-none) infinite}
.car-brawl-banner .cr-timer.cr-shrink b,.car-brawl-banner .cr-timer.cr-late b,.car-brawl-banner .cr-timer.cr-closed b{color:#ffb36a}
.car-brawl-standings li{grid-template-columns:10px minmax(0,1fr) 40px 36px;gap:5px}
.car-brawl-standings .cb-hpbar.cb-small{width:auto;height:7px;box-shadow:0 0 0 1px #5b4a24}
.car-brawl-standings li.cb-out{opacity:.6}
.car-brawl-standings li.cb-frozen .cr-name{color:#9fe6ff}
/* Struck through only once out of lives; a wreck waiting to respawn (lives left) is only dimmed (W6). */
.car-brawl-standings li.cb-wreck .cr-name{font-style:italic;opacity:.75}
.car-brawl-standings li.cb-out .cr-name{text-decoration:line-through}
.car-brawl-standings .cb-lives{justify-content:flex-end;gap:3px}
.car-brawl-standings .cb-lives s{width:8px;height:8px}
.car-brawl-map{border-radius:50%;overflow:hidden;outline-offset:-1px}
.car-brawl-map .cb-arena{fill:#4b1420cc;stroke:#a02a3a;stroke-width:1.5}
.car-brawl-map .cb-safe{fill:#2a2412;stroke:#ffe08a;stroke-width:2}
.car-brawl-map .cb-final{fill:none;stroke:#ffe08a99;stroke-width:1.2;stroke-dasharray:3 3}
.car-brawl-map .cb-trap{fill:#9fe6ff;stroke:#0b2a50;stroke-width:1}
.car-brawl-map .cb-ghost{fill-opacity:.35;stroke-dasharray:2 1.5}
.car-brawl-map .cb-wreck{fill-opacity:.4}
.car-brawl-feed{position:fixed;z-index:44;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none;font:600 12px/16px Friz,Georgia,serif;color:#f1e3b0;text-shadow:0 1px 2px #000,0 0 3px #000}
.car-brawl-feed[hidden]{display:none !important}
.car-brawl-feed p{margin:0;height:16px;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;background:linear-gradient(90deg,#0b0905b0,#0b090500)}
.car-brawl-feed p.cb-mine{color:#9ff07f}
.car-brawl-feed p.cb-lost{color:#ff8a72}
.car-brawl-feed p.cb-outline{font-weight:bold}
.car-race-callout.cr-kill{color:#9ff07f;text-shadow:0 0 18px #000,0 4px 0 #1d4a0e}
.car-race-callout.cr-life{color:#ff8a72;text-shadow:0 0 18px #000,0 4px 0 #5a0e08}
.car-race-callout.cr-out{color:#ff4b3a;text-shadow:0 0 22px #000,0 4px 0 #5a0e08}
.car-race-callout.cr-back{color:#9fe6ff;text-shadow:0 0 18px #2a7fd0,0 4px 0 #0b2a50}
.car-race-callout.cr-ring{color:#ffb36a;text-shadow:0 0 18px #000,0 4px 0 #5a2a08}
.car-race-callout.cr-storm{color:#ff4b3a;text-shadow:0 0 18px #000,0 4px 0 #5a0e08;animation:cr-flash .6s steps(2,jump-none) infinite}
.car-race-callout.cr-frozen{color:#bff0ff;text-shadow:0 0 22px #2a7fd0,0 4px 0 #0b2a50}
.cb-winner{margin:8px 0;text-align:center}
.cb-winner span{display:block;font:600 11px Friz,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#bfae7a}
.cb-winner b{display:block;font:bold 34px/1.2 Morpheus,Georgia,serif;color:#ffe08a;text-shadow:0 0 20px #ffb000,0 3px 0 #5a3a08}
.cb-winner i{display:inline-block;width:14px;height:14px;margin-right:10px;border-radius:50%;box-shadow:0 0 0 1px #000;vertical-align:middle}
.cb-winner.cb-me b{color:#fff3b0;text-shadow:0 0 28px #ffb000,0 3px 0 #5a3a08}
/* Car Soccer's HUD and result screen (car-soccer.js, card S6.4): the race HUD's frames again, with Blue (cs-t0) and Red (cs-t1) as the two
   team colours on the banner, the standings, the pitch map, the goal feed and the result table. soccerLayout (brawlLayout) places every box. */
.car-soccer-banner{grid-template-columns:1fr auto 1fr;column-gap:14px}
.cs-team{display:flex;align-items:baseline;gap:8px}
.cs-team.cs-t1{justify-content:flex-end}
.cs-team span{font:600 11px Friz,Georgia,serif;letter-spacing:.12em;text-transform:uppercase}
.cs-team b{font-size:34px}
.cs-t0.cs-team span,.cs-t0.cs-team b{color:#6cc0ff;text-shadow:0 2px 0 #0b2a50,0 0 10px #000}
.cs-t1.cs-team span,.cs-t1.cs-team b{color:#ff7a6c;text-shadow:0 2px 0 #5a0e08,0 0 10px #000}
.cs-team.cs-mine{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.car-soccer-banner .cs-timer{justify-self:center;text-align:center}
.car-soccer-banner .cs-timer.cr-goal b,.car-soccer-banner .cs-timer.cr-kickoff b{color:#9ff07f}
.car-soccer-banner .cs-timer.cr-overtime b,.car-soccer-banner .cs-timer.cr-sudden b{color:#ffb36a}
.car-soccer-banner .cr-times.cs-hurt{color:#ff8a72;font-weight:bold}
.car-soccer-standings h2 span.cs-t0{color:#6cc0ff}
.car-soccer-standings h2 span.cs-t1{color:#ff7a6c}
.car-soccer-standings li{grid-template-columns:10px minmax(0,1fr) auto;gap:6px}
.car-soccer-standings li.cs-split{border-top:1px solid #5b4a24}
.car-soccer-standings li.cs-t0{box-shadow:inset 3px 0 #3fa7ff}
.car-soccer-standings li.cs-t1{box-shadow:inset 3px 0 #ff5a4e}
.car-soccer-standings li.cs-wreck .cr-name{text-decoration:line-through;opacity:.6}
.car-soccer-standings .cs-stats{color:#d8c690;font-size:11px}
.car-soccer-map{overflow:hidden}
.car-soccer-map .cs-field{fill:#16361a;stroke:#e9dcbc;stroke-width:1.2}
.car-soccer-map .cs-line{fill:none;stroke:#e9dcbc99;stroke-width:1}
.car-soccer-map .cs-goal{stroke:#000;stroke-width:1}
.car-soccer-map .cs-g0{fill:#3fa7ffaa}
.car-soccer-map .cs-g1{fill:#ff5a4eaa}
.car-soccer-map .cs-goal.cs-wide{stroke:#ffb36a;stroke-width:2}
.car-soccer-map .cs-ball{fill:#fff;stroke:#000;stroke-width:1.2}
.car-soccer-map .cs-dot-wreck{fill-opacity:.35}
.car-soccer-feed p.cs-t0{border-left:3px solid #3fa7ff}
.car-soccer-feed p.cs-t1{border-left:3px solid #ff5a4e}
.car-race-callout.cs-goal-0{color:#6cc0ff;text-shadow:0 0 22px #000,0 4px 0 #0b2a50}
.car-race-callout.cs-goal-1{color:#ff7a6c;text-shadow:0 0 22px #000,0 4px 0 #5a0e08}
.car-race-callout.cs-count{font-size:64px;color:#fff3b0;text-shadow:0 0 24px #000,0 4px 0 #5a3a08}
.car-race-callout.cs-ot{color:#ffb36a;text-shadow:0 0 18px #000,0 4px 0 #5a2a08}
.car-race-callout.cs-wide{color:#e2b8ff;text-shadow:0 0 18px #6a2fb0,0 4px 0 #2a0e50}
.car-soccer-results tr.cs-t0 td:first-child{color:#6cc0ff}
.car-soccer-results tr.cs-t1 td:first-child{color:#ff7a6c}
.cs-winner{margin:8px 0;text-align:center}
.cs-winner span{display:block;font:600 11px Friz,Georgia,serif;letter-spacing:.14em;text-transform:uppercase;color:#bfae7a}
.cs-winner b{display:block;font:bold 34px/1.2 Morpheus,Georgia,serif;text-shadow:0 0 20px #000,0 3px 0 #000}
.cs-winner em{display:block;font:bold 22px Morpheus,Georgia,serif;font-style:normal;color:#ffe08a}
@media (prefers-reduced-motion:reduce){.cb-hpbar.cb-low u,.car-brawl-banner .cr-times.cb-storming,.car-race-callout.cr-storm{animation:none !important}}
#play{display:block;width:100%;min-height:68px;font:36px var(--ms-title-font);letter-spacing:.08em;color:#ffd341;border:2px solid var(--ms-frame);border-radius:6px;background:var(--ms-button-red);box-shadow:inset 0 0 0 1px #1e0c07,0 0 14px #b8862b55;text-shadow:1px 2px #000}
#play:hover:enabled{filter:brightness(1.2)}
#play:disabled{filter:grayscale(.6) brightness(.8)}
.next-under{margin:10px 0 0;color:var(--ms-hint);font-size:12px}

@media(min-width:801px){
 .main-cards{position:fixed;left:16px;right:16px;bottom:56px;display:grid;grid-template-columns:minmax(260px,340px) minmax(320px,440px) minmax(260px,340px);justify-content:space-between;align-items:end;gap:16px;pointer-events:none}
 #heroCard{grid-column:1}
 #nextRunCard,#partyCard{grid-column:2;grid-row:1}
 #friendsCard{grid-column:3}
 #heroCard{max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:thin;scrollbar-color:#81673e #181108}
 /* The cards sit on the bottom edge and grow upwards: a tall one (Car Brawl's arena row) scrolls inside
    the window instead of running off its top (W6 at 960x600 the header sat at y=-34). */
 #nextRunCard,#partyCard{max-height:calc(100vh - 72px);overflow:auto;scrollbar-width:thin;scrollbar-color:#81673e #181108}
}
/* Short windows: a tighter next-run card so Car Brawl's arena row still fits without scrolling. */
@media(min-width:801px) and (max-height:700px){
 .next-run-card #nextZone{font-size:26px;margin:0}
 .next-run-card #play{min-height:46px;font-size:28px}
 .next-run-card .next-under{margin-top:4px}
 .next-run-card .game-mode{margin:0 auto 2px}

 .next-run-card .next-rules{margin:0 0 4px}
}
@media(max-width:800px){
 body[data-screen=setup]:not(.in-room){overflow:auto}
 .main-cards{display:flex;flex-direction:column;gap:14px;padding:16px 16px 72px}
 #nextRunCard,#partyCard{order:-1}
 #nextZone{font-size:32px}
}

/* The corner bar: small buttons, bottom-left, on the roster and the main screen only. */
.corner-bar{position:fixed;left:16px;bottom:14px;z-index:4;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100vw - 32px)}
.corner-bar .small-button{font-size:11px;padding:4px 10px;min-height:28px}
body:not([data-screen=roster]):not([data-screen=setup]) .corner-bar,body.in-room .corner-bar{display:none}

/* Solo PLAY keeps the room view for loading only: no party roster. */
body.solo-run .party-section .section-heading,body.solo-run #party{display:none}

/* Play with friends: create a party (optional password), join with a code, Open parties. */
.friends-card{display:grid;gap:10px;text-align:center}
.friends-card h2{font-size:26px}
#partyCreate{min-height:44px;font:18px var(--ms-title-font);letter-spacing:.04em}
.party-password summary{cursor:pointer;color:var(--ms-gold);font-size:12px}
.party-password input{width:100%;margin-top:6px}
.friends-card .invite-entry{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:end;text-align:left}
.friends-card .invite-entry label{grid-column:1/-1;color:var(--ms-label);font-size:12px}
.friends-card .invite-entry input{min-width:0}
#openParties,#partyLeave,#partyChangeZone,#partyChangeDifficulty{background:none;border:0;box-shadow:none;min-height:0;padding:2px 4px;font:13px var(--ms-body-font);color:var(--ms-gold);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
#openParties:hover,#partyLeave:hover,#partyChangeZone:hover,#partyChangeDifficulty:hover{color:var(--ms-gold-bright);filter:none}

/* The party card while a party forms: members, the run, privacy, the code and one action. */
.party-card{text-align:center;border-color:var(--ms-frame);box-shadow:0 0 0 1px #000,0 0 28px #e2b85840,0 6px 24px #000a}
.party-card h2{font-size:30px;margin:4px 0 8px}
.party-members{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:6px}
.party-pill{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:4px 8px;border:1px solid #4e3d1f;border-radius:16px;background:#0d0a06cc;text-align:left}
.party-pill .unit-icon{width:28px;height:28px;border-radius:50%}
.party-pill strong{font:14px var(--ms-body-font);color:var(--class-color,#e9dcbc);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.party-pill small{font-size:11px;color:var(--ms-muted)}
.party-pill.ready{border-color:#5f8a3a}.party-pill.ready small{color:#9fdc6a}
.party-pill.you{box-shadow:inset 0 0 0 1px var(--ms-frame-deep)}
/* Bots: a dashed pill with a Bot tag, the leader's Remove, and the Add bot row under the members. */
.party-pill.bot{border-style:dashed}
.party-pill.removable{grid-template-columns:30px 1fr auto auto}
.party-pill .remove-bot{min-height:22px;padding:0 8px;font-size:11px}
.unit-frame .unit-remove{min-height:18px;padding:0 6px;font-size:10px;line-height:16px}
.party-bots{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:0 0 8px}
.party-bots[hidden],.party-bots select[hidden],.bot-status[hidden]{display:none}
#botPersona{max-width:14em}
.party-bots select{min-height:28px;padding:2px 8px;border:1px solid #4e3d1f;border-radius:4px;background:#0d0a06cc;color:var(--ms-label);font:13px var(--ms-body-font)}
.party-bots select:disabled,.party-bots button:disabled{opacity:.6;cursor:default}
#playWithBots:hover{color:var(--ms-gold-bright);filter:none}
.party-privacy{display:flex;justify-content:center;align-items:center;gap:8px;margin:0 0 8px;color:var(--ms-label);font-size:13px}
.party-privacy .privacy-toggle{min-width:170px;min-height:30px;padding:4px 14px;font:13px var(--ms-body-font);color:var(--ms-label)}
.party-privacy .privacy-toggle[aria-pressed=true]{border-color:var(--ms-frame);color:var(--ms-gold-bright);box-shadow:inset 0 0 8px #e2b85866,0 0 0 1px #000}
.party-privacy .privacy-toggle:disabled{filter:none;opacity:.8;cursor:default}
.party-code{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;color:var(--ms-muted);font-size:12px}
.party-code code{color:#e1d3b0;font-size:12px;letter-spacing:.06em}
#partyAction{display:block;width:100%;min-height:56px;font:30px var(--ms-title-font);letter-spacing:.06em;color:#ffd341;border:2px solid var(--ms-frame);border-radius:6px;background:var(--ms-button-red);box-shadow:inset 0 0 0 1px #1e0c07,0 0 14px #b8862b55;text-shadow:1px 2px #000}
#partyAction:hover:enabled{filter:brightness(1.2)}
#partyAction:disabled{filter:grayscale(.6) brightness(.8)}
.party-status{min-height:1.2em;margin:8px 0 0;color:#e1d3b0;font-size:13px}
#partyRetry{margin:6px auto 0}
#partyLeave{display:block;margin:8px auto 0}

/* The Open parties dialog: one line per party, Join on the right. */
.open-parties{list-style:none;margin:0;padding:0}
.open-party{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:7px 9px;border-bottom:1px solid #4e3d1f;color:#e1d3b0;font-size:13px}
.open-party.closed span{color:var(--ms-muted)}

/* In-run hints (run-hints.js): one sentence at the bottom centre, just above the action bar (survival-bar tops out
   near 116px), so it never covers the objective banner or the boss bar; it steps aside while rewards are offered. */
.run-hint{position:fixed;left:50%;top:auto;bottom:128px;transform:translateX(-50%);z-index:15;max-width:min(420px,calc(100vw - 32px));padding:10px 18px 8px;text-align:center;background:linear-gradient(#211c13f2,#0f0b07f2);border:1px solid var(--ms-frame);border-radius:4px;box-shadow:0 0 0 1px #000,0 6px 24px #000a;color:var(--ms-label);font-family:var(--ms-body-font);pointer-events:auto;cursor:pointer}
.run-hint p{margin:0;font-size:15px;line-height:1.35;text-shadow:1px 1px #000}
.run-hint small{display:block;margin-top:4px;color:var(--ms-hint);font-size:11px}
body:has(#rewardPanel:not([hidden])) .run-hint{display:none}

/* A forming party: the arena loads dimmed behind the main screen with a still of the hero. */
/* The world loads behind, dimmed and blurred; the edges, where the run HUD draws, fade to black, so
   no HUD shows before Start. The hero card stays left and the party card centred. */
body.in-party iframe#world{filter:brightness(.35) blur(14px)}
body.in-party .world-backdrop{z-index:1;pointer-events:none;filter:none;background:radial-gradient(ellipse 60% 55% at 50% 45%,#0806037a,#080603f2 72%,#050403 100%)}
body.in-party .preview-mount,body.in-party .preview-status,body.in-party #cornerLogout,body.in-party #setupBack{display:none}

/* The hero dialog's Spells page (main-screen.js renderSpellbook). */
.spells-page{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:16px 20px;align-content:start}
.spells-page .spell-entry summary{display:flex;align-items:center;gap:8px;font-size:13px}
.spells-page .spell-entry summary small{margin:0 0 0 auto}
.spells-page .spell-entry-icon{width:28px;height:28px;border:1px solid #6b5a3a;flex:none}
.spells-page .spell-entry p{font-size:12px}
.spells-page .rare-spell summary{color:var(--item-color)}
@media(max-width:760px){.spells-page{grid-template-columns:1fr;padding:12px}}

/* The zone chooser dialog: today's foldable expansion sections. */
.zone-dialog{width:min(520px,94vw)}
.zone-dialog .zone-choices{max-height:min(62vh,640px);overflow:auto}
.zone-dialog .zone-expansion{display:flex;justify-content:space-between;align-items:center;width:100%;padding:6px 9px;background:none!important;box-shadow:none;border:1px solid #4e3d1f;margin-top:6px}
.zone-dialog .zone-expansion[aria-expanded=true]{background:linear-gradient(90deg,#624323aa,#291c11aa)!important;border-color:#af885b}
.zone-dialog .zone-expansion strong{font:15px var(--ms-body-font);color:var(--ms-label)}
.zone-dialog .zone-option{background:none!important;box-shadow:none;border:1px solid transparent;padding:6px 9px;min-height:43px;margin:0;text-align:left;width:100%;display:block}
.zone-dialog .zone-option strong{display:block;font:15px var(--ms-body-font);color:var(--ms-label)}
.zone-dialog .zone-option small{display:block;font-size:11px;color:#e1dfd4}
.zone-dialog .zone-option[aria-pressed=true]{border-color:#af885b;background:linear-gradient(90deg,#624323aa,#291c11aa)!important}
.zone-dialog .zone-option[aria-pressed=true] strong{font-size:18px;color:var(--ms-gold-bright)}
.zone-dialog .zone-contract{font-size:11px;color:#c9b88f;margin-top:4px}
.zone-dialog .zone-bosses{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}.zone-dialog .zone-bosses span{font-size:10px;padding:1px 5px;border:1px solid #6b5a3a;color:#e1d3b0}

/* The Difficulty dialog: six levels in a row (two columns on narrow screens), then mode and seed. */
.difficulty-dialog{width:min(1040px,95vw)}
.difficulty-choices{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.difficulty-dialog button.difficulty-choice{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;min-height:150px;padding:12px 8px;text-align:center;white-space:normal;background:var(--ms-card)!important;border:1px solid var(--ms-line)!important;box-shadow:none}
.difficulty-dialog button.difficulty-choice[aria-pressed=true]{border-color:var(--ms-frame)!important;box-shadow:0 0 12px #e2b85855,inset 0 0 0 1px var(--ms-frame-deep)}
.difficulty-choice strong{font:18px var(--ms-title-font);color:var(--ms-gold-bright)}
.difficulty-choice .difficulty-pays{font-size:11px;line-height:1.35;color:#d9caa3}
.difficulty-choice .difficulty-costs{font-size:11px;line-height:1.35;color:#d98c6a}
.difficulty-extras{display:flex;flex-wrap:wrap;gap:16px;margin-top:14px;font-size:12px;color:var(--ms-label)}
.difficulty-extras label{display:flex;align-items:center;gap:8px}
.difficulty-extras #menuSeed{width:130px}
@media(max-width:800px){.difficulty-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.difficulty-dialog button.difficulty-choice{min-height:0}}

/* The first visit (main-screen.js onboardingView; lobby.js applyOnboarding). Welcome: one sentence
   and one button over the hero; the creator with the class first; the first run's card alone. */
#welcomeScreen{display:none}
body[data-screen=welcome]:not(.in-room) #welcomeScreen{display:block;position:fixed;left:50%;bottom:12vh;transform:translateX(-50%);z-index:3;width:min(520px,calc(100vw - 32px));padding:24px 28px 22px;text-align:center;background:var(--ms-card);border:1px solid var(--ms-frame);box-shadow:0 0 0 1px #000,0 0 28px #e2b85840,0 6px 24px #000a;color:#e9dcbc;font-family:var(--ms-body-font);pointer-events:auto}
body[data-screen=welcome] .preview-mount{bottom:0}
#welcomeScreen h1{margin:0 0 10px;font:44px/1.05 var(--ms-title-font);color:var(--ms-gold-bright);text-shadow:1px 2px #000}
#welcomeScreen p{margin:0 0 18px;font-size:16px;line-height:1.45;text-shadow:1px 1px #000}
#welcomeStart{display:block;width:100%;min-height:60px;font:30px var(--ms-title-font);letter-spacing:.04em;color:#ffd341;border:2px solid var(--ms-frame);border-radius:6px;background:var(--ms-button-red);box-shadow:inset 0 0 0 1px #1e0c07}
#welcomeStart:hover{filter:brightness(1.2)}
.class-line{display:none}
body.first-visit .creation-rail{display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}
body.first-visit .creation-rail>*{flex:none}
body.first-visit #classHeading,body.first-visit #classChoices{order:1}
body.first-visit .faction-labels,body.first-visit #raceChoices,body.first-visit #genderChoices,body.first-visit #randomizeAppearance{order:2}
body.first-visit #creatorBack{order:3}
body.first-visit #classHeading{position:static;width:auto;height:auto;overflow:visible;clip-path:none;margin:2px 0 6px}
body.first-visit .creation-rail .class-choices{grid-template-columns:1fr;gap:4px;margin-bottom:10px}
body.first-visit .creation-rail .class-choice{display:grid;grid-template-columns:auto 1fr;column-gap:8px;align-items:center;justify-items:start;text-align:left;padding:0!important}
body.first-visit .creation-rail .class-choice-icon{grid-row:1/3;width:30px;height:30px}
body.first-visit .creation-rail .class-choice>span:last-child{position:static;grid-column:2;grid-row:1;text-align:left;font-size:12px;line-height:14px}
body.first-visit .creation-rail .class-line{display:block;grid-column:2;grid-row:2;font-size:10px;line-height:12px;color:#e1d3b0;text-shadow:1px 1px #000}
/* 1366x768 and other short windows: the class list with its lines, the races, the gender pair and both
   buttons fit inside the frame without a scrollbar (launch critic: 11 px sideways overflow, gender
   buttons under the frame); the logo gives way first. */
@media(min-width:801px) and (max-height:790px){
 body.first-visit .creation-logo{display:none}
 body.first-visit #classHeading{margin:0 0 4px}
 body.first-visit .creation-rail .class-choices{gap:2px;margin-bottom:6px}
 body.first-visit .creation-rail .class-choice-icon{width:27px;height:27px}
 body.first-visit .creation-rail .class-line{line-height:11px}
}
body.first-run #heroCard,body.first-run #friendsCard,body.first-run .corner-bar{display:none}
@media(min-width:801px){body.first-run .main-cards{grid-template-columns:minmax(320px,440px);justify-content:center}body.first-run #nextRunCard{grid-column:1}}

/* One-time hints (main-screen.js renderHint; characters.js #armoryHint): one sentence, gold-edged. */
.card-hint-slot[hidden],.dialog-hint[hidden]{display:none}
.card-hint{display:flex;align-items:flex-start;gap:8px;margin:12px 0 0;padding:7px 6px 7px 12px;border:1px solid #6b5126;border-left:3px solid var(--ms-frame);background:#1a130acc;color:#f0e2bd;font:13px/1.4 var(--ms-body-font);text-align:left;cursor:pointer;text-shadow:1px 1px #000}
.card-hint span{flex:1}
.card-hint .hint-dismiss{flex:none;width:22px;height:22px;min-height:0;padding:0;border:0;background:none;box-shadow:none;color:var(--ms-gold);font:16px/20px var(--ms-body-font)}
.card-hint .hint-dismiss:hover{color:var(--ms-gold-bright);filter:none}
#partyHint .card-hint{margin:0 0 10px}
.dialog-hint{margin:10px 16px 0;padding:7px 12px;border-left:3px solid var(--ms-frame);background:#1a130acc;color:#f0e2bd;font:13px/1.4 var(--ms-body-font);text-shadow:1px 1px #000}

/* ---- UI polish 2026-10-20 ---- */
/* M1. The character scene inside the preview frame is deliberately pillarboxed by the wasm client
   (portrait/framing.rs GLUE_BOX_ASPECT 1.672: the one glue frame, so no authored scene is cropped), so the
   bars are the booth camera's clear inside the iframe and cannot be filled from the page. At wider windows
   the page feathers the box edges into the bars instead of a hard cut. */
@media(min-aspect-ratio:1672/1000){
 .preview-mount:before,.preview-mount:after{content:'';position:absolute;top:0;bottom:0;z-index:1;pointer-events:none;width:12vh}
 .preview-mount:before{left:calc((100vw - 167.2vh)/2);background:linear-gradient(to right,#000,#0000)}
 .preview-mount:after{right:calc((100vw - 167.2vh)/2);background:linear-gradient(to left,#000,#0000)}
}

/* M2. A compact next-run card so the hero's lower half stays visible; PLAY stays the biggest thing on it. */
.next-run-card{padding:10px 18px 12px}
.next-run-card .eyebrow{font-size:11px;line-height:1.2}
.next-run-card #nextZone{font-size:32px;margin:2px 0 2px}
.next-run-card .next-line{margin:0 0 2px;font-size:14px}
.next-run-card .next-links{gap:16px;margin:0 0 8px}
.next-run-card #play{min-height:58px;font-size:32px}
.next-run-card .next-under{margin:6px 0 0;font-size:12px}
.next-run-card .card-hint{margin:8px 0 0;padding:5px 6px 5px 10px}
/* M7. Zone rules line: readable, tight. */
.next-run-card .next-rules{margin:0 0 6px;font-size:12px;line-height:1.3;color:#c4b48e}
/* The rows that change with the game mode (arena, course, laps, zone, rules, links) keep one height,
   so the bottom-anchored card and its mode tabs do not jump between modes (launch critic: ~17 px). */
.next-run-card .next-run-body{display:flex;flex-direction:column;justify-content:center;min-height:134px}
@media(min-width:801px) and (max-height:700px){.next-run-card .next-run-body{min-height:118px}}
@media(min-width:801px) and (min-height:1000px){.next-run-card .next-run-body{min-height:182px}}
/* Short desktop windows: the hero preview rises with the window's missing height, so the hero's head
   and chest show above the next-run card at 1366x768 (the scene keeps its framing, only the mount moves). */
@media(min-width:801px){body[data-screen=setup]:not(.in-room) .preview-mount{top:min(0px,calc((100vh - 1000px) * 0.6))}}

/* M3. Hero card buttons: one line each; the Talents points ride as a small badge on the bottom edge. */
.hero-card-actions{align-items:stretch}
.hero-card-actions button{position:relative;display:flex;flex-direction:row;align-items:center;justify-content:center}
.hero-card-actions #menuTalents small{position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);padding:0 6px;border:1px solid #6b5126;border-radius:8px;background:#1a130a;color:var(--ms-gold-bright);font-size:10px;line-height:13px;white-space:nowrap;pointer-events:none}
.hero-card-actions button:focus:not(:focus-visible){outline:none}

/* M4. At most one tip shows at a time (lobby.js renderCardHints). */

/* M5. The corner bar: a quiet, legible bar with separators instead of small red tags. */
body .corner-bar{gap:0;align-items:center;padding:3px 8px;background:linear-gradient(#120d08d9,#0a0705d9);border:1px solid #3d3220;border-radius:3px;box-shadow:0 2px 10px #0008}
body .corner-bar .small-button,body .corner-bar a.small-button{display:inline-flex;align-items:center;min-height:28px;padding:3px 10px;font:13px/1.2 var(--ms-body-font);color:#d8c796;text-decoration:none;text-shadow:1px 1px #000;background:none!important;border:0!important;border-radius:2px;box-shadow:none!important;filter:none;cursor:pointer}
body .corner-bar .small-button:hover,body .corner-bar a.small-button:hover{color:var(--ms-gold-bright);background:#ffffff14!important}
body .corner-bar>*+*:before{content:'';display:inline-block;width:1px;height:14px;margin:0 10px 0 0;background:#5a4a2e;pointer-events:none}
body .corner-bar>*+*{padding-left:0}
body .corner-bar>#cornerFeedback[aria-disabled=true]{color:#a8987a}
/* The roster's Continue sits above this bar (lobby.css .roster-enter); below 1100 px the ten links
   wrapped into a second row over it, so they tighten to keep one row down to 960 px. */
@media(max-width:1100px){body .corner-bar .small-button,body .corner-bar a.small-button{padding:3px 7px;font-size:12px}body .corner-bar>*+*:before{margin-right:7px}}
/* M6. The join code field keeps its full placeholder. */
.friends-card .invite-entry input::placeholder{color:#8f8570}

/* Z1. The zone chooser: wide, two columns of zones, larger text, locked zones muted below the open ones. */
.zone-dialog{width:min(820px,95vw)}
.zone-dialog .zone-choices{max-height:min(72vh,760px)}
.zone-dialog .zone-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:4px 8px;margin:6px 0 10px;padding:0;border-left:0}
.zone-dialog .zone-option{min-height:52px;padding:7px 10px}
.zone-dialog .zone-option strong{font-size:16px}
.zone-dialog .zone-option small{font-size:12px}
.zone-dialog .zone-preview{grid-column:1/-1;position:relative}
.zone-dialog .zone-preview .zone-option{padding-right:178px}
.zone-dialog .zone-option[aria-pressed=true] strong{font-size:20px}
/* Z2. A click previews; the card's own Choose zone button picks it. The chosen zone keeps a quiet mark. */
.zone-dialog .zone-confirm{position:absolute;top:12px;right:14px;min-width:150px;min-height:36px;padding:4px 16px;font-size:15px}
.zone-dialog .zone-current:not([aria-pressed=true]){border-color:#5d4a2c}
.zone-dialog .zone-option small.zone-current-note{color:#d8bc74}
.zone-dialog .zone-option.zone-locked,.zone-dialog .zone-option:disabled{opacity:.62;cursor:not-allowed}
.zone-dialog .zone-option.zone-locked strong,.zone-dialog .zone-option:disabled strong{color:#a89a78}
.zone-dialog .zone-option.zone-locked small:last-child{color:#e0b46a}
.zone-dialog .zone-contract{font-size:12px}
.zone-dialog .zone-bosses span{font-size:11px}
.zone-dialog .zone-family-rules,.zone-dialog .zone-family-rules strong{font-size:12px}
@media(max-width:700px){.zone-dialog .zone-group{grid-template-columns:1fr}.zone-dialog .zone-preview .zone-option{padding-right:10px}.zone-dialog .zone-confirm{position:static;display:block;width:calc(100% - 20px);margin:0 10px 8px}}

/* D1. Difficulty: readable text, the shared payout once as a caption, the seed under Advanced. */
.difficulty-caption{margin:0 0 10px;color:var(--ms-label);font-size:14px;text-align:center}
.difficulty-choice strong{font-size:20px}
.difficulty-choice .difficulty-pays,.difficulty-choice .difficulty-costs{font-size:13px;line-height:1.4}
.difficulty-choice .difficulty-note{font-size:12px}
.difficulty-extras{font-size:14px;align-items:flex-start}
.difficulty-advanced summary{cursor:pointer;color:#b8a783;font-size:13px}
.difficulty-advanced label{margin-top:8px}

/* O1. Options: URL parameters live under Advanced as monospace code. */
.advanced-options .url-param{display:inline-block;margin:2px 6px 0 0}

/* Large monitors (1440p and up): the lobby's fixed-size panels and dialogs read at 10-12 px, so they scale up as a
   whole (CSS zoom keeps their proportions and the tooltips still anchor to them). Zoom also multiplies a dialog's
   viewport-based height, so 76dvh is about 95% of the screen. The Armory scales itself (--g). */
@media(min-width:2200px) and (min-height:1100px){dialog.wow-dialog:not(#armoryDialog){zoom:1.25;max-height:76dvh!important}.main-cards>.main-card,#cornerBar{zoom:1.15}}
/* Short screens: the menu panel drops its set-bonus lines (the Gear dialog lists them) so the Gear, Talents and
   Spells buttons stay in view without scrolling the hero card. (--ms-card is a gradient, so the sticky Change hero
   bar above uses the card's end colour.) */
@media(max-height:900px){#heroCard .gear-menu .gear-set-bonus{display:none}}
.party-open-seats{list-style:none;padding:4px 10px;border:1px dashed #4e3d1f;border-radius:16px;font-size:12px;color:var(--ms-muted);text-align:center}
/* Ten classes: a race shows up to seven (the Death Knight joins every race), four rows in the
   rail's two columns. Short viewports lay them four across instead, so the rail's buttons stay
   inside the frame at 960x600. The first-visit rail lists classes first, which needs flex to
   win over the create screen's display:block. */
@media(min-width:801px) and (max-height:700px){
  body:not(.first-visit) .creation-rail .class-choices{grid-template-columns:repeat(4,minmax(0,1fr));width:206px;column-gap:6px}
  body:not(.first-visit) .creation-rail .class-choice>span:last-child{font-size:10px;line-height:11px}
  body:not(.first-visit) .creation-rail .class-choice-icon{width:40px;height:40px}
}
body.first-visit[data-screen=create]:not(.in-room) #creatorRail{display:flex}
/* The development note moves top right on short screens (ui-polish.css); the community buttons (lobby.css) hold that corner, so the note sits under them. */
@media(min-width:801px) and (max-height:800px){body .development-note{top:56px}}