/* ══ BUILD 401A — FRONT OF HOUSE: THE MENU BASE ═══════════════════════════════════════════════
   Three stylesheets used to style the same title, lobby and modal selectors: v3.html's inline
   <style>, theme-exchange.css and this file, patched into agreement with !important. Build 401A
   ends that. The title/lobby/modal BASE rules that used to live in v3.html's inline sheet are
   here, at the top of the last sheet to load, so theme-exchange.css's reskin and meta.css's own
   later rules keep the cascade order they always had. Every declaration that a later sheet also
   made has been DELETED rather than duplicated - one winning declaration per selector+property.
   Two exceptions stayed in v3.html and say why in a comment there: declarations whose breakpoint
   override lives in theme-exchange.css (a base rule parked in this file would silently beat it -
   the Build 347 trap), and the credential rail, which three gates read out of v3.html.
   meta.css has NO :root block any more: the one token sheet is declared once, in
   theme-exchange.css, and tokens-test.js fails the build on any literal outside it. */

/* the one modal host */
#v2modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center}
#v2mbox{border-width:1px;border-style:solid;padding:18px 20px;min-width:280px;max-width:92vw;max-height:86vh;overflow-y:auto}
#v2mbox h3{margin:0 0 10px;font-family:'Bebas Neue';text-align:center}
.v2opt{display:block;width:100%;margin-top:8px;border-width:1px;border-style:solid;padding:10px 12px;font:700 14px Barlow;cursor:pointer;text-align:left}
.v2opt:hover{transform:translateY(-1px);box-shadow:0 7px 18px rgba(0,0,0,.28)}.v2opt:active{transform:translateY(1px)}.v2opt:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.v2opt small{display:block;font-weight:500;color:var(--muted);font-size:var(--fs-11);margin-top:2px}
.v2opt.gold{text-align:center;font-family:'Bebas Neue';font-size:var(--fs-16);letter-spacing:var(--ls-label)}

/* the title */
#v2title{position:fixed;inset:0;z-index:25;display:flex;flex-direction:column;align-items:center}
.tt1{-webkit-background-clip:text;background-clip:text}
.tttag{text-align:center;text-transform:uppercase}
.ttrow{display:flex;gap:8px;margin-top:10px}
.ttrow button{width:44px;height:44px;border-radius:var(--r-card);border:1px solid var(--hairline);background:var(--ink-2);color:var(--ivory);font:800 16px Barlow;cursor:pointer}
.ttrow button.on{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink)}
.ttgo{margin-top:16px;border:1px solid var(--brass-deep);border-radius:var(--r-card);padding:14px 46px;cursor:pointer;
 font-family:'Bebas Neue';font-size:var(--fs-24);letter-spacing:var(--ls-eyebrow);color:var(--ink);
 background:linear-gradient(180deg,var(--ivory),var(--brass-hi) 42%,var(--brass) 70%,var(--brass-deep));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.65),0 4px 0 var(--brass-deep),0 14px 26px rgba(0,0,0,.55)}
.ttgo:active{transform:translateY(4px)}
/* ---- mode buttons ---- */
.ttmode{position:relative;cursor:pointer}
.ttmode small{display:block;text-transform:none}
.ttmode.gold small{color:var(--muted)} /* was #5C450F - dark brown written for a gold background that theme-exchange.css overrides to dark green, leaving it unreadable */

/* ---- lobby ---- */
#v3lobby{position:fixed;inset:0;z-index:26;display:none;align-items:center;justify-content:center}
.lbCard{overflow-y:auto}
.lbHead{display:flex;justify-content:space-between;border-bottom-width:1px;border-bottom-style:solid}
.lbHead span{font-family:'Bebas Neue'}
.lbHead b{font-family:'Bebas Neue'}
.lbAvWrap{display:flex;align-items:center;gap:6px}
.lbAvBtn{border-radius:50%;border-width:1px;border-style:solid;font:800 16px Barlow;cursor:pointer}
.lbAvBtn:active{transform:scale(.92)}
#lbName{flex:1;border-width:1px;border-style:solid;letter-spacing:var(--ls-label);text-transform:uppercase;outline:none}
.lbRow{margin:12px 0 0}
.lbLbl{display:block;font-family:'Bebas Neue'}
.ttrow.sm{margin-top:0}.ttrow.sm button{width:36px;height:36px;font-size:var(--fs-14)}
#lbSeats{display:grid}
.lbSeat{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;border-width:1px;border-style:solid;text-align:center}
.lbSeat img{border-radius:50%;border:2px solid var(--ink-3);background:var(--ink-2)}
.lbSeat.ready img{border-color:var(--jade-bright)}
.lbSeat.ready .st{color:var(--jade-bright)}
.lbSeat.empty{opacity:.55;border-style:dashed}
/* Build 347: the crown is the compact HOST DIAMOND only. It used to read "◆ HOST" over the
   portrait and clip against the card edge on a 4-across phone grid, while the status line
   underneath already said HOST - the same word twice, one of them unreadable. */
.lbSeat .crown{position:absolute;top:4px;right:6px;font:800 11px Barlow;line-height:1;letter-spacing:0}
.lbSeat.waiting{border-color:color-mix(in srgb,var(--brass-hi) 55%,transparent)}
.lbSeat.waiting img{border-color:var(--brass)}
.lbSeat.waiting .st{color:var(--brass-hi)}
.lbSeat.justJoined{animation:seatIn .7s cubic-bezier(.2,.9,.3,1.35) both}
@keyframes seatIn{0%{transform:scale(.55);opacity:0}55%{transform:scale(1.07);opacity:1;box-shadow:0 0 26px rgba(232,200,122,.55)}100%{transform:scale(1);box-shadow:0 0 16px rgba(47,196,124,.22)}}
#lbReady.pulse{animation:readyPulse 1.1s ease-in-out infinite alternate}
@keyframes readyPulse{from{box-shadow:0 0 0 rgba(47,196,124,0)}to{box-shadow:0 0 26px rgba(47,196,124,.55)}}
#lbReady.isReady{background:linear-gradient(180deg,var(--jade-bright),var(--jade));color:var(--ink)}
@keyframes lbPulse{0%,100%{opacity:.45}50%{opacity:1}}
.lbSeat .st.waiting{animation:lbPulse 1.3s infinite}
#lbReady{width:100%;margin-top:12px;border-width:1px;border-style:solid;cursor:pointer;font-family:'Bebas Neue';letter-spacing:var(--ls-eyebrow)}
#lbReady:active{transform:translateY(3px)}
#lbReady.armed{border-color:var(--jade);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 var(--jade),0 0 26px rgba(47,196,124,.4)}
#lbHint{text-align:center}
/* v290: host-lobby INVITE FRIENDS panel — multi-invite over the Build 275 server invite system */
.lbInvitePanel{width:min(430px,92vw);max-height:78vh;overflow:auto;background:linear-gradient(180deg,var(--ink-3),var(--ink-2));border:1px solid var(--hairline);border-radius:var(--r-card);padding:18px 16px;text-align:left;color:var(--ivory)}
.lbInvitePanel h3{margin:2px 0 6px;font-family:'Bebas Neue';font-size:var(--fs-24);letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}
.lbInviteKicker{font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted)}
.lbInviteLead{margin:0 0 10px;font:600 12px Barlow;color:var(--muted);line-height:1.45}
.lbInviteDock{min-height:46px;margin:2px;padding:8px 10px;border:1px solid color-mix(in srgb,var(--jade-bright) 55%,transparent);border-radius:var(--r-card);background:var(--ink-3);color:var(--jade-bright);font:800 11px Barlow;letter-spacing:var(--ls-label);cursor:pointer}/* v291: survives the lobby card's sub-1 phone fit scale as a rendered 44px touch target */
.lbInviteRow{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;border:1px solid var(--hairline);border-radius:var(--r-card);padding:8px 10px;margin-bottom:8px;background:rgba(10,33,27,.7)}
.lbInviteRow.off{opacity:.62}
.lbInviteRow b{font:700 14px 'Barlow Semi Condensed';letter-spacing:0;display:block}
.lbInviteRow small{font:600 11px Barlow;color:var(--muted);letter-spacing:0}
.lbInviteAv{position:relative;width:44px;height:44px}
.lbInviteAv img{width:44px;height:44px;border-radius:50%;border:2px solid var(--hairline);background:var(--ink-2);box-sizing:border-box}
.lbInviteAv i{position:absolute;right:-4px;bottom:-3px;display:grid;place-items:center;min-width:18px;height:18px;padding:0 3px;border:1px solid var(--brass-hi);border-radius:var(--r-card);background:var(--ink-2);color:var(--ivory);font:800 11px Barlow;font-style:normal}
.lbInviteAv.founder::before{content:'◆';position:absolute;left:-4px;top:-6px;z-index:2;color:var(--brass-hi);font-size:var(--fs-11)}
.lbInviteGo{min-height:44px;min-width:96px;border:1px solid color-mix(in srgb,var(--jade-bright) 55%,transparent);border-radius:var(--r-card);background:var(--ink-3);color:var(--jade-bright);font:800 11px Barlow;letter-spacing:var(--ls-label);cursor:pointer}
.lbInviteGo:disabled{opacity:.6;cursor:default}
.lbInviteState{font:800 11px Barlow;letter-spacing:var(--ls-label);color:var(--jade-bright);font-style:normal;text-align:right}
.lbInviteState.off{color:var(--muted)}
.lbInviteEmpty{font:600 12px Barlow;color:var(--muted);line-height:1.5}
.lbInviteClose{display:block;width:100%;min-height:44px;margin-top:10px;border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--ink-2);color:var(--brass-hi);font:800 12px Barlow;letter-spacing:var(--ls-eyebrow);cursor:pointer}
/* ══ END OF THE MOVED MENU BASE ═══════════════════════════════════════════════════════════════ */

/* Build 401B: the name chip is gone from the markup, so the header is the House utility family
   alone and sits at its own right-hand edge. */
#metaHeader{position:fixed;z-index:28;top:max(12px,env(safe-area-inset-top));left:18px;right:130px;display:flex;align-items:center;justify-content:flex-end;pointer-events:none}
#metaHeader button{pointer-events:auto;min-height:52px;border:1px solid rgba(232,200,122,.42);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(18,53,40,.96),rgba(5,19,14,.96));color:var(--ivory);box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer}
#metaInfluence{display:flex;align-items:center;gap:8px;padding:5px 12px}
#metaInfluence span{display:flex;flex-direction:column;line-height:1.05}
#metaInfluence small{font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted);margin-top:3px}
#metaInfluence img{width:34px;height:34px}
#metaInfluence b{font-family:'Bebas Neue';font-size:var(--fs-20);letter-spacing:var(--ls-label);color:var(--brass-hi)}
#metaNav{position:fixed;z-index:28;left:50%;bottom:max(14px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;gap:6px;padding:6px;border:1px solid rgba(232,200,122,.35);border-radius:var(--r-card);background:rgba(5,19,14,.92);box-shadow:0 12px 30px rgba(0,0,0,.55);backdrop-filter:blur(12px)}
/* Build 401B: FIVE stops (PLAY / COLLECTION / HOUSE / FRIENDS / PROFILE). Each button is sized
   from its own label with a 44px floor, so the widest word (COLLECTION) is never clipped and the
   narrowest (PLAY) is still a full tap target - at 360px as well as on a desktop. */
#metaNav button{flex:1 1 auto;min-width:var(--tap);min-height:48px;padding:0 var(--sp-3);border:0;border-radius:var(--r-card);background:transparent;color:var(--muted);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
#metaNav span{font-size:var(--fs-16);color:var(--muted)}#metaNav b{font:800 12px Barlow;letter-spacing:var(--ls-label);white-space:nowrap}
#metaNav button.on,#metaNav button:hover{background:linear-gradient(180deg,rgba(232,200,122,.18),rgba(232,200,122,.06));color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(232,200,122,.35)}
#metaNav button.on span{color:var(--brass-hi)}
body.meta-open #metaHeader,body.meta-open #metaNav{z-index:48}
body.playing #metaHeader,body.playing #metaNav,body.lobby-open #metaHeader,body.lobby-open #metaNav{display:none}
/* Build 401B: the Floor Wire lane is the TABLE's notice surface. Outside a match it can still be
   holding the audio-restore notice, and a full-page stop now covers the whole room - so the lane
   stands down while a page is open and nothing is playing (it is untouched during a match, where
   it remains the only surface for table events). */
body.meta-open:not(.playing) #v2toastLane{display:none}
#v3coach{position:fixed;z-index:34;left:50%;bottom:112px;transform:translateX(-50%);width:min(720px,calc(100vw - 28px));display:none;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 16px;box-sizing:border-box;border:1px solid rgba(232,200,122,.72);border-radius:var(--r-card);background:linear-gradient(135deg,rgba(10,33,27,.98),rgba(18,53,40,.98));box-shadow:0 14px 45px rgba(0,0,0,.7);color:var(--ivory);pointer-events:auto}#v3coach.on{display:grid;animation:coachIn 220ms ease-out both}@keyframes coachIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}.coachStep{min-width:0}.coachStep small{display:block;font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}.coachStep strong{display:block;margin-top:3px;font:400 20px 'Bebas Neue';letter-spacing:var(--ls-label)}.coachStep p{margin:3px 0 0;font:700 16px/1.35 Barlow;color:var(--ivory)}.coachStep p:empty{display:none}.coachActions{display:flex;gap:8px}.coachActions button{min-width:88px;min-height:48px;border:1px solid rgba(232,200,122,.55);border-radius:var(--r-card);background:var(--ink-2);color:var(--ivory);font:800 14px Barlow;cursor:pointer}.coachActions #coachPrimary{background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink-2)}
#v2title{padding-top:62px;padding-bottom:76px;box-sizing:border-box}
.millionaireWord{font-size:clamp(66px,9vw,116px);letter-spacing:var(--ls-label)}
#v2setB{min-width:44px;min-height:44px}
/* ══ Build 401B — PAGES, NOT BOXES (FRONT OF HOUSE PLAN D2/§3) ═══════════════════════════════
   #metaPanel was a centred, blurred, floating card: a phone app in a window on a desktop, and a
   box scrolling inside a page on a phone. It is now a full PAGE laid over the brass room, whose
   engraved ground and frame stay visible behind it (body.meta-open hides #v2title's CONTENT, not
   its architecture). No backdrop-filter, no scrim blur, no centred card - and therefore no
   backdrop to click and no × to close: a top-level page is left through the rail, a sub-page
   through the head's ‹. 100dvh, because a phone's URL bar is not 100vh of anything. */
/* The rail is FIXED, so the page surface itself has to end above it: padding cannot clip, and a
   long list scrolled to any position would otherwise put a control under the rail (which is what
   responsive.spec.js's auditLayout reads as an interactive overlap). The lane is the tap target
   plus the rail's own offset. */
#metaPanel{position:fixed;z-index:45;inset:0;height:100dvh;display:none;justify-content:center;padding-bottom:calc(var(--tap) + var(--sp-5) + env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(5,19,14,.42),rgba(5,19,14,.76));box-sizing:border-box}
#metaPanel.open{display:flex}body.meta-open #v2title{pointer-events:none}
/* the room stays the ground: the title's own content stands down, its architecture does not */
body.meta-open #v2title>*{visibility:hidden}
body.meta-open #v2title>.titleArchitecture{visibility:visible}
.metaPanelCard{width:min(1280px,92vw);height:100%;overflow:hidden;display:flex;flex-direction:column;padding:0 var(--sp-5);box-sizing:border-box}
#metaPanel.open .metaPanelCard{animation:metaPageIn var(--dur) var(--ease) both}@keyframes metaPageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.metaPanelHead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:calc(var(--tap) + var(--sp-5) + env(safe-area-inset-top)) 0 var(--sp-4);border-bottom:1px solid rgba(232,200,122,.24)}
.metaPanelHeading{grid-column:2;min-width:0}.metaPanelHeading h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.metaPanelHead small{font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted)}
.metaPanelHead h2{margin:3px 0 0;font:400 32px/1 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--brass-hi)}
.metaPanelHead>button{height:48px;border:1px solid rgba(232,200,122,.42);background:var(--ink-2);color:var(--ivory);cursor:pointer}.metaPanelBack{grid-column:1;display:flex;align-items:center;gap:6px;width:auto;padding:0 13px;border-radius:var(--r-pill);font-family:Barlow}.metaPanelBack[hidden]{display:none}.metaPanelBack span{font-size:var(--fs-24);line-height:1;margin-top:-2px}.metaPanelBack b{font:800 12px Barlow;letter-spacing:var(--ls-label)}
#metaPanelBody{padding:var(--sp-5) 0 var(--sp-6);overflow-y:auto;overscroll-behavior:contain}
.metaLead{margin:0 0 18px;color:var(--ivory);font:600 16px/1.5 Barlow;max-width:700px}
.metaFactRail{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}.metaFactRail span{padding:7px 10px;border:1px solid rgba(232,200,122,.28);border-radius:var(--r-pill);background:rgba(232,200,122,.06);color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.metaGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.metaCard{border:1px solid rgba(232,200,122,.25);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(18,53,40,.9),rgba(5,19,14,.92));padding:16px;color:var(--ivory);box-shadow:0 8px 20px rgba(0,0,0,.24);transition:border-color 150ms ease,transform 150ms ease,box-shadow 150ms ease}
button.metaCard{cursor:pointer;text-align:left;font-family:inherit}.metaCard:hover{border-color:rgba(232,200,122,.68)}
.metaCard h3{font:400 24px/1 'Bebas Neue';letter-spacing:var(--ls-label);margin:0;color:var(--ivory)}
.metaCard p{font:600 14px/1.45 Barlow;color:var(--muted);margin:8px 0 0}
.metaPrimary,.metaSecondary,.metaDanger{min-height:48px;border-radius:var(--r-card);padding:11px 16px;font:800 16px Barlow;letter-spacing:0;cursor:pointer}
.metaPrimary{border:1px solid var(--brass-deep);background:linear-gradient(180deg,var(--brass-hi),var(--brass-hi) 48%,var(--brass));color:var(--ink-2)}
.metaSecondary{border:1px solid rgba(232,200,122,.4);background:var(--ink-2);color:var(--ivory)}
.metaDanger{border:1px solid var(--crash);background:var(--ink-2);color:var(--crash)}
.metaActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}.metaActions>*{flex:1;min-width:150px}
.characterGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.characterCard{position:relative;min-height:210px;border:1px solid rgba(232,200,122,.24);border-radius:var(--r-card);padding:12px;background:var(--ink-2);color:var(--ivory);cursor:pointer;text-align:left;overflow:hidden}
.characterCard.on{border-color:var(--brass-hi);box-shadow:0 0 0 1px var(--brass-hi),0 0 25px rgba(232,200,122,.2)}
.characterCard.locked{border-color:rgba(142,77,201,.35)}
.characterCard img{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;margin:0 auto 10px;border:2px solid rgba(232,200,122,.55)}
.characterCard b{display:block;text-align:center;font:400 20px 'Bebas Neue';letter-spacing:var(--ls-label)}.characterCard small{display:block;text-align:center;font:800 12px/1.35 Barlow;color:var(--muted);margin-top:3px}
.characterCard em{display:block;margin-top:8px;text-align:center;font:800 12px Barlow;color:var(--brass-hi);font-style:normal}
.characterCard .pill{display:block;width:max-content;margin:var(--sp-2) auto 0}
/* Build 404: a locked character prices itself in brass, as a pill, on its own card (PLAN §4.2) */
.pill.price{border-color:rgba(232,200,122,.45);color:var(--brass-hi)}
.characterCard.selected{border-color:var(--brass);box-shadow:inset 0 0 0 1px var(--brass),0 0 22px rgba(232,200,122,.16)}
.collectionPills{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin:0 0 var(--sp-4)}
.masteryTrack,.houseTrack{height:10px;border-radius:var(--r-card);background:var(--ink);border:1px solid rgba(232,200,122,.24);overflow:hidden;margin-top:10px}
.masteryTrack i,.houseTrack i{display:block;height:100%;border-radius:var(--r-card);background:linear-gradient(90deg,var(--brass-deep),var(--brass-hi),var(--ivory))}
.characterHero{display:grid;grid-template-columns:190px minmax(0,1fr);gap:22px;align-items:start}
.characterHero>img,.characterPortraitWrap>img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:3px solid var(--brass-hi);box-shadow:0 0 34px rgba(232,200,122,.2)}.characterPortraitWrap{position:relative;width:186px;height:186px}.characterTrophy{position:absolute;right:2px;bottom:6px;display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--ivory);border-radius:50%;background:var(--brass-deep);color:var(--ivory);box-shadow:0 7px 15px rgba(0,0,0,.6)}
.characterHero h3{margin:0;font:400 32px/1 'Bebas Neue';letter-spacing:var(--ls-label)}.characterHero .tag{font:600 16px Barlow;color:var(--muted);margin-top:5px}
.characterBrowse{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:0 0 16px}.characterBrowse button{min-height:44px;border:1px solid rgba(232,200,122,.35);border-radius:var(--r-card);background:var(--ink-2);color:var(--ivory);font:800 12px Barlow;letter-spacing:var(--ls-label);cursor:pointer}.characterBrowse b{min-width:70px;text-align:center;color:var(--brass-hi);font:400 20px 'Bebas Neue';letter-spacing:0}.characterBrowse button:last-child{justify-self:stretch}
/* Build 404 — THE VOICE TAB. One .row per pack: name + one clause, the state as a .pill, then
   PREVIEW and the single action. The Build 343 consent clause is the <small>: a player reads what
   equipping Rivalry or Reckoning does before the button exists. */
.voicePackRow{flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);cursor:default;letter-spacing:0}
.voicePackRow:hover{background:transparent}
.voicePackCopy{flex:1 1 240px;min-width:0}
.voicePackCopy b{display:block;font:400 20px 'Bebas Neue';letter-spacing:var(--ls-label)}
.voicePackCopy small{display:block;margin-top:2px;color:var(--muted);font:600 14px/1.35 Barlow;letter-spacing:0}
.rowActions{display:flex;flex:none;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.rowActions button{min-height:var(--tap);min-width:104px;padding:9px 14px;font-size:var(--fs-12)}
.houseChoice{position:relative;padding-top:72px;min-height:250px}.houseChoice>img{position:absolute;top:14px;left:16px;width:48px;height:48px}.houseChoice .houseFaces{display:flex;margin-top:18px}.houseFaces img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--ink-2);margin-right:-8px}.houseChoice .metaPrimary{width:100%;margin-top:18px}
.houseStanding{display:grid;grid-template-columns:150px minmax(0,1fr) 54px;gap:12px;align-items:center;margin:13px 0}.houseStanding b{font:400 20px 'Bebas Neue';letter-spacing:var(--ls-label)}.houseStanding strong{font:400 20px 'Bebas Neue';color:var(--brass-hi);text-align:right}
.houseGoalHeading{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:22px}.houseGoalHeading .houseSectionHead{margin:0}.houseGoalHeading>span{padding:5px 10px;border:1px solid rgba(232,200,122,.38);border-radius:var(--r-pill);color:var(--brass-hi);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.contractGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.contractCard{position:relative;overflow:hidden}.contractCard .contractLane{display:block;margin-bottom:8px;color:var(--muted);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow)}.contractCard.done{border-color:var(--jade-bright);background:radial-gradient(circle at 80% 0,rgba(47,196,124,.24),transparent 45%),linear-gradient(180deg,rgba(18,53,40,.96),rgba(5,19,14,.96));box-shadow:inset 0 0 0 1px rgba(47,196,124,.38),0 0 22px rgba(47,196,124,.3)}.contractCard.done::after{content:"";position:absolute;inset:-80% -35%;background:linear-gradient(105deg,transparent 42%,rgba(255,255,255,.16) 49%,transparent 56%);transform:translateX(-45%);animation:contractGlow 3.6s ease-in-out infinite;pointer-events:none}.contractCard.done h3,.contractCard.done .progress{color:var(--jade-bright);text-shadow:0 0 14px rgba(47,196,124,.44)}.contractCard.done .reward{color:var(--ivory)}.contractCard .progress{font:400 24px 'Bebas Neue';color:var(--brass-hi);margin-top:12px}.contractCard .reward{font:800 12px Barlow;color:var(--muted);margin-top:6px}@keyframes contractGlow{0%,30%{transform:translateX(-55%)}70%,100%{transform:translateX(55%)}}
.contractPicker{display:grid;gap:18px}.contractPickerLane{padding:14px;border:1px solid rgba(232,200,122,.22);border-radius:var(--r-card);background:rgba(5,19,14,.35)}.contractPickerLane>div:first-child small{display:block;color:var(--muted);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow)}.contractPickerLane>div:first-child h3{margin:2px 0 12px;color:var(--brass-hi);font:400 24px 'Bebas Neue';letter-spacing:0}.contractPick{position:relative}.contractPick>span{display:block;margin-bottom:7px;color:var(--muted);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow)}.contractPick>strong{display:block;margin-top:11px;color:var(--brass-hi);font:800 12px Barlow}.contractPick.on{border-color:var(--brass-hi);box-shadow:inset 0 0 0 1px var(--brass-hi),0 0 22px rgba(232,200,122,.15)}.contractPick.on>span{color:var(--jade-bright)}
.trophyCase{margin-top:20px;padding:16px;border:1px solid rgba(232,200,122,.3);border-radius:var(--r-card);background:radial-gradient(circle at 10% 10%,rgba(232,200,122,.12),transparent 45%),rgba(5,19,14,.62)}.trophyCase>div:first-child{display:flex;align-items:end;justify-content:space-between;gap:12px}.trophyCase h3{margin:0;font:400 24px 'Bebas Neue';letter-spacing:0}.trophyCase>div>span{font:700 12px Barlow;color:var(--muted)}.trophyCase>p{margin:10px 0 0;font:600 14px/1.45 Barlow;color:var(--muted)}.trophyGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}.trophyItem{min-height:104px;padding:9px;border:1px solid rgba(232,200,122,.3);border-radius:var(--r-card);background:var(--ink-2);color:var(--ivory);cursor:pointer}.trophyItem.on{border-color:var(--brass-hi);box-shadow:inset 0 0 0 1px var(--brass-hi),0 0 18px rgba(232,200,122,.14)}.trophyItem i{display:grid;place-items:center;width:32px;height:32px;margin:0 auto 6px;border:1px solid var(--ivory);border-radius:50%;background:var(--brass-deep);color:var(--ivory);font-style:normal}
/* Build 385 THE HOUSE TROPHY IN THE CASE. The tile used to show a brass disc with a diamond in it -
   the same mark for a Gilded season, a Vanguard season and a Syndicate season, and the same mark
   the seat rail and the table drew. It now shows the House's own drawn trophy, at a size worth
   looking at, and the CHAMPION tile is lit from behind so the season's best result reads first.
   The classes come from profile.js trophyClass(); this file never parses a trophy id. */
.trophyItem i.trophyMark{display:block;width:46px;height:46px;margin:0 auto 7px;border:0;border-radius:0;background:url(art/meta/trophy-brass.svg) center/contain no-repeat;filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
.trophyItem.houseTrophy-gilded i.trophyMark{background-image:url(art/meta/trophy-gilded.svg)}
.trophyItem.houseTrophy-vanguard i.trophyMark{background-image:url(art/meta/trophy-vanguard.svg)}
.trophyItem.houseTrophy-syndicate i.trophyMark{background-image:url(art/meta/trophy-syndicate.svg)}
.trophyItem.trophyChampion{border-color:rgba(232,200,122,.62);background:radial-gradient(circle at 50% 27%,rgba(232,200,122,.17),transparent 58%),var(--ink-2)}
.trophyItem.trophyChampion i.trophyMark{filter:drop-shadow(0 0 12px rgba(245,239,221,.42)) drop-shadow(0 3px 6px rgba(0,0,0,.6))}
/* the collection card's corner trophy is the same art, small */
.characterTrophy{background:url(art/meta/trophy-brass.svg) center/contain no-repeat;border:0;box-shadow:none;filter:drop-shadow(0 3px 7px rgba(0,0,0,.7))}
.characterTrophy.houseTrophy-gilded{background-image:url(art/meta/trophy-gilded.svg)}
.characterTrophy.houseTrophy-vanguard{background-image:url(art/meta/trophy-vanguard.svg)}
.characterTrophy.houseTrophy-syndicate{background-image:url(art/meta/trophy-syndicate.svg)}.trophyItem b,.trophyItem small{display:block;text-align:center}.trophyItem b{font:800 12px/1.2 Barlow}.trophyItem small{margin-top:3px;font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted)}.trophyItem.on small{color:var(--brass-hi)}
.profileHero{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:center}.profileHero>img,.profileHeroPortrait>img{width:138px;height:138px;border-radius:50%;object-fit:cover;border:3px solid var(--brass-hi)}
/* v163 FOUNDER BADGE on the profile portrait — same gold pill family as .founderProfileCard */
.profileHeroPortrait{position:relative;display:inline-grid;justify-self:start;place-items:center}.profileHeroPortrait>img{border-color:var(--brass-hi);box-shadow:0 0 0 4px rgba(232,200,122,.18),0 0 26px rgba(232,200,122,.28)}.founderBadge{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);padding:3px 12px;border:1px solid var(--ivory);border-radius:var(--r-pill);background:var(--brass-deep);color:var(--ivory);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);white-space:nowrap;box-shadow:0 3px 10px rgba(0,0,0,.6)}
.profileHero h3{font:400 32px/1 'Bebas Neue';margin:0}.profileStats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.statCard{text-align:center}.statCard strong{display:block;font:400 32px 'Bebas Neue';color:var(--brass-hi)}.statCard span{font:800 12px Barlow;letter-spacing:var(--ls-label);color:var(--muted)}
.accountCard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:18px;padding:15px 16px;border:1px solid rgba(232,200,122,.42);border-radius:var(--r-card);background:linear-gradient(135deg,rgba(232,200,122,.13),rgba(10,33,27,.75))}.accountCard.linked{border-color:rgba(47,196,124,.55);background:linear-gradient(135deg,rgba(47,196,124,.12),rgba(10,33,27,.75))}.accountCard span,.accountCard b,.accountCard small{display:block}.accountCard span{font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}.accountCard.linked span{color:var(--jade-bright)}.accountCard b{margin-top:3px;font:400 20px 'Bebas Neue';letter-spacing:0}.accountCard small{margin-top:2px;font:600 14px Barlow;color:var(--muted)}.accountCard button{min-width:170px}
.accountDialog{text-align:left}.accountDialog .dialogKicker{display:block;font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}.accountDialog h3{margin:5px 0 8px;font:400 32px 'Bebas Neue';letter-spacing:0}.accountDialog p{margin:0 0 16px;font:600 16px/1.45 Barlow;color:var(--ivory)}.accountDialog label{display:block;margin-bottom:14px;font:800 12px Barlow;letter-spacing:var(--ls-label);color:var(--brass-hi)}.accountDialog input{display:block;width:100%;min-height:52px;box-sizing:border-box;margin-top:7px;padding:10px 12px;border:1px solid rgba(232,200,122,.5);border-radius:var(--r-card);background:var(--ink);color:var(--ivory);font:700 16px Barlow;letter-spacing:0}.accountDialog .v2opt{width:100%;min-height:52px;margin-top:8px}
.accountDivider{display:flex;align-items:center;gap:10px;margin:15px 0 11px;color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.accountDivider:before,.accountDivider:after{content:"";height:1px;flex:1;background:rgba(232,200,122,.2)}
/* v293: the one-time code is the whole job of this screen, so it gets the biggest, calmest
   target on it — wide ledger digits, generous tracking, 60px tall on every phone. */
.accountCodeDialog input.accountCodeInput{min-height:60px;text-align:center;font:800 32px Barlow;letter-spacing:var(--ls-eyebrow);text-indent:12px;caret-color:var(--brass-hi)}
.accountCodeDialog input.accountCodeInput::placeholder{color:rgba(245,239,221,.24);letter-spacing:var(--ls-eyebrow)}
.accountCodeDialog input.accountCodeInput:focus{outline:none;border-color:rgba(232,200,122,.95);box-shadow:0 0 0 3px rgba(232,200,122,.18)}
.accountCodeDialog .accountCodeHint{margin:11px 0 4px;font:600 14px/1.4 Barlow;color:var(--muted)}
.accountCodeDialog .v2opt:disabled{opacity:.55}
.accountGoogle{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--ivory);color:var(--ink-2);border-color:#fff}.accountGoogle span{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:#fff;color:var(--opportunity);font:900 16px Arial;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.accountNudge{position:relative;display:grid;gap:5px;margin-top:12px;padding:14px 42px 14px 14px;border:1px solid rgba(232,200,122,.48);border-radius:var(--r-card);background:linear-gradient(135deg,rgba(232,200,122,.16),rgba(10,33,27,.94));text-align:left}.accountNudge>span{color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.accountNudge>b{font:400 20px 'Bebas Neue';letter-spacing:0}.accountNudge>small{color:var(--ivory);font:600 14px/1.4 Barlow}.accountNudge .metaPrimary{width:100%;margin-top:7px}.accountNudgeClose{position:absolute;right:8px;top:8px;width:32px;height:32px;border:0;border-radius:50%;background:rgba(0,0,0,.22);color:var(--ivory);font:400 24px/1 Barlow;cursor:pointer}
.rewardSummary{margin-top:14px;padding:14px;border:1px solid rgba(232,200,122,.35);border-radius:var(--r-card);background:rgba(232,200,122,.07)}.rewardSummary h4{margin:0 0 10px;font:400 20px 'Bebas Neue';color:var(--brass-hi)}.rewardLine{display:flex;justify-content:space-between;gap:12px;padding:5px 0;font:700 14px Barlow}.rewardLine b{color:var(--brass-hi)}.rewardHouseBonus{color:var(--jade-bright)}.houseResultReceipt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:2px 12px;margin-top:10px;padding:12px 14px;border:1px solid rgba(47,196,124,.42);border-radius:var(--r-card);background:rgba(47,196,124,.08)}.houseResultReceipt small{grid-column:1/-1;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--jade-bright)}.houseResultReceipt strong{font:400 24px 'Bebas Neue';letter-spacing:0;color:var(--ivory)}.houseResultReceipt span{font:900 11px Barlow;letter-spacing:var(--ls-label);color:var(--brass-hi);text-align:right}
.resultHero{position:relative;overflow:hidden;box-sizing:border-box;min-height:162px;display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto auto auto;align-content:center;column-gap:16px;padding:15px 24px;text-align:left}.resultVictoryCutin{position:relative;inset:auto;grid-column:1;grid-row:1/4;align-self:center;justify-self:center;width:118px;height:132px;object-fit:contain;object-position:center bottom;opacity:.88;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));pointer-events:none}.resultKicker,.resultTitle,.resultSub{grid-column:2;min-width:0;max-width:100%}.resultKicker{grid-row:1;align-self:end}.resultTitle{grid-row:2;font-size:clamp(32px,4vw,48px);line-height:.95;margin:7px 0;transform-origin:left center}.resultSub{grid-row:3;align-self:start;line-height:1.35}.resultSub:empty{display:none}.resultHero>*:not(.resultVictoryCutin):not(.victoryRays):not(.victoryBurst){position:relative;z-index:1}.resultBody{max-height:min(58vh,540px);overflow-y:auto}.resultbox{width:min(560px,94vw);max-height:92vh}.resultActions .v2opt{min-height:48px;font-size:var(--fs-16)}
.resultHero.masteryVictory{min-height:250px;grid-template-columns:40% minmax(0,1fr);grid-template-rows:minmax(20px,1fr) auto auto auto minmax(20px,1fr);column-gap:0;padding:0;background:linear-gradient(90deg,transparent 30%,rgba(5,19,14,.7) 48%,rgba(10,33,27,.98) 72%),radial-gradient(circle at 25% 45%,rgba(232,200,122,.3),transparent 55%)}.resultHero.masteryVictory .resultVictoryCutin{grid-column:1;grid-row:1/-1;align-self:stretch;justify-self:stretch;width:100%;height:100%;object-fit:cover;object-position:center 24%;opacity:1;filter:none}.resultHero.masteryVictory .resultKicker,.resultHero.masteryVictory .resultTitle,.resultHero.masteryVictory .resultSub{grid-column:2;margin-left:22px;margin-right:18px}.resultHero.masteryVictory .resultKicker{grid-row:2}.resultHero.masteryVictory .resultTitle{grid-row:3;font-size:var(--fs-32)}.resultHero.masteryVictory .resultSub{grid-row:4}.resultHero.masteryVictory::after{content:"MASTERY IX";position:absolute;left:14px;bottom:10px;z-index:2;padding:5px 8px;border:1px solid rgba(232,200,122,.7);background:rgba(5,19,14,.8);color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.masteryRewards{margin-top:22px;border-top:1px solid rgba(232,200,122,.25);padding-top:18px}.masteryRewardsHead{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-bottom:10px}.masteryRewardsHead h3{margin:0;font:400 24px 'Bebas Neue';letter-spacing:0}.masteryRewardsHead span{font:800 12px Barlow;color:var(--muted)}.masteryReward{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid rgba(232,200,122,.15)}.masteryReward>strong{font:400 20px 'Bebas Neue';color:var(--muted)}.masteryReward.unlocked>strong{color:var(--brass-hi)}.masteryReward>div{display:grid;gap:8px}.masteryReward article{display:grid;grid-template-columns:72px minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:60px;padding:8px 10px;border:1px solid rgba(232,200,122,.22);border-radius:var(--r-card);background:rgba(5,19,14,.55)}.masteryReward article b{font:800 14px Barlow}.masteryReward article small{font:800 11px Barlow;letter-spacing:var(--ls-label);color:var(--muted)}.masteryReward.locked article{opacity:.62}.masteryReward button{min-height:40px;padding:7px 12px;font-size:var(--fs-12)}.rewardPreview{display:grid;place-items:center;width:64px;height:48px;overflow:hidden;border:1px solid rgba(232,200,122,.35);border-radius:var(--r-card);background:var(--ink-2);color:var(--brass-hi);font:800 11px Barlow}.rewardPreview img{width:100%;height:100%;object-fit:cover}.rewardPreview.frame img{width:38px;height:38px;border-radius:50%;border:2px solid var(--brass-hi)}.rewardPreview.frame.prestige img{border-color:var(--jade-bright);box-shadow:0 0 0 2px var(--jade)}.rewardPreview.frame.master img{border-color:var(--brass-hi);box-shadow:0 0 0 3px var(--market)}.rewardPreview.nameplate{font:400 14px 'Bebas Neue';letter-spacing:var(--ls-label)}.rewardPreview.nameplate.prestige{color:var(--jade-bright);text-shadow:0 0 8px rgba(47,196,124,.5)}.rewardPreview.entrance{font-size:var(--fs-24);background:radial-gradient(circle,rgba(232,200,122,.25),var(--ink))}.rewardPreview.entrance.prestige{color:var(--jade-bright);background:radial-gradient(circle,rgba(47,196,124,.25),var(--ink))}.rewardPreview.reaction{width:66px;border-radius:var(--r-card);background:var(--ivory);color:var(--ink-2);font-size:var(--fs-11)}.rewardPreview.reaction.master{border:2px solid var(--ivory);background:var(--ink-3);color:var(--ivory)}.cosmeticFrame{position:relative;padding:16px;border:1px solid rgba(232,200,122,.2);border-radius:var(--r-card);background:radial-gradient(circle at 100px 90px,rgba(232,200,122,.12),transparent 48%)}.cosmeticFrame.frameSignature{box-shadow:inset 0 0 0 2px rgba(232,200,122,.32),0 0 28px rgba(232,200,122,.12)}.cosmeticFrame.framePrestige{box-shadow:inset 0 0 0 2px var(--jade-bright),0 0 32px rgba(47,196,124,.22)}.cosmeticFrame.frameMaster{box-shadow:inset 0 0 0 2px var(--market),inset 0 0 0 5px rgba(232,200,122,.28),0 0 38px rgba(142,77,201,.3)}.nameplateSignature{color:var(--brass-hi);text-shadow:0 2px var(--ink)}.nameplatePrestige{color:var(--jade-bright);text-shadow:0 2px var(--ink),0 0 14px rgba(47,196,124,.42)}
.rewardContract{padding:8px 0;border-top:1px solid rgba(47,196,124,.2)}.rewardUnlock{display:grid;gap:3px;margin-top:9px;padding:11px;border:1px solid rgba(232,200,122,.55);border-radius:var(--r-card);background:linear-gradient(135deg,rgba(232,200,122,.18),rgba(47,196,124,.08))}.rewardUnlock b{font:400 20px 'Bebas Neue';color:var(--brass-hi);letter-spacing:var(--ls-label)}.rewardUnlock span{font:700 14px Barlow;color:var(--ivory)}.rewardUnlock button{margin-top:6px}.rewardSync{margin-top:10px;text-align:center;font:800 11px Barlow;letter-spacing:var(--ls-label);color:var(--jade-bright)}.socialList{margin-top:22px}.socialList h3{font:400 24px 'Bebas Neue';letter-spacing:0}.socialList article{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid rgba(232,200,122,.2);border-radius:var(--r-card);margin-top:8px}.socialList img{width:48px;height:48px;border-radius:50%;object-fit:cover}.socialList b,.socialList small{display:block}.socialList b{font:800 16px Barlow}.socialList small{font:600 12px Barlow;color:var(--muted)}.archiveSeason img{width:28px;height:28px;vertical-align:middle}.archiveSeason small{font:700 12px Barlow;color:var(--muted)}
.friendCode{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 13px;border:1px solid rgba(232,200,122,.25);border-radius:var(--r-card);background:var(--ink)}.friendCode span{font:800 12px Barlow;letter-spacing:var(--ls-label);color:var(--muted)}.friendCode b{font:400 20px 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--brass-hi)}.friendAdd{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:8px}.friendAdd input{min-height:48px;box-sizing:border-box;border:1px solid rgba(232,200,122,.35);border-radius:var(--r-card);background:var(--ink);color:var(--ivory);padding:10px 12px;font:800 16px Barlow;text-transform:uppercase}.friendAdd button{min-width:100px}
.lbIdent.frameSignature #lbMyAv,.lbSeat.frameSignature img{border-color:var(--brass-hi);box-shadow:0 0 0 3px var(--brass-deep),0 0 0 5px rgba(232,200,122,.8),0 10px 24px rgba(0,0,0,.5)}.lbIdent.framePrestige #lbMyAv,.lbSeat.framePrestige img{border-color:var(--jade-bright);box-shadow:0 0 0 3px var(--jade),0 0 0 5px rgba(47,196,124,.7),0 0 24px rgba(47,196,124,.35)}.lbIdent.frameMaster #lbMyAv,.lbSeat.frameMaster img{border-color:var(--brass-hi);box-shadow:0 0 0 3px var(--market),0 0 0 6px rgba(142,77,201,.85),0 0 30px rgba(142,77,201,.5)}.lbIdent.nameplateSignature #lbCharName,.lbSeat.nameplateSignature .nm{color:var(--brass-hi);text-shadow:0 2px var(--ink)}.lbIdent.nameplatePrestige #lbCharName,.lbSeat.nameplatePrestige .nm{color:var(--jade-bright);text-shadow:0 2px var(--ink),0 0 12px rgba(47,196,124,.35)}.lbIdent.trophyEquipped::after,.lbSeat.trophyEquipped .seatAv::after{content:"◆";position:absolute;z-index:3;display:grid;place-items:center;width:23px;height:23px;border:1px solid var(--ivory);border-radius:50%;background:var(--brass-deep);color:var(--ivory);font:800 11px Barlow;box-shadow:0 4px 10px rgba(0,0,0,.5)}.lbIdent.trophyEquipped{position:relative}.lbIdent.trophyEquipped::after{left:67px;top:7px}/* Build 347: the seat trophy used to sit at the card corner (50%+13px), where on a 4-across phone grid it landed on the portrait AND on the host diamond. It is an identity cosmetic, so it belongs to the FACE: it now mirrors the mastery coin - coin bottom-right, trophy bottom-left - anchored on .seatAv, which is the portrait's own box, so it stays correct at every breakpoint without a second copy of the portrait size. */.lbSeat.trophyEquipped .seatAv::after{left:-4px;bottom:1px;width:19px;height:19px;font-size:var(--fs-11);box-shadow:0 2px 6px rgba(0,0,0,.5)}
/* Build 377 (David 2026-09-01): "make it a literal mini trophy". The identity card's trophy stops
   being a diamond glyph in a brass disc and becomes the same drawn cup the seat rail wears, so one
   piece of art answers for a trophy everywhere it appears. */
.lbIdent.trophyEquipped::after{content:"";left:64px;top:4px;width:26px;height:26px;border:0;border-radius:0;background:url(art/meta/trophy-brass.svg) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 2px 5px rgba(0,0,0,.75))}
/* Build 385: the identity card wears the SAME trophy the seat rail and the trophy case draw. */
.lbIdent.trophyEquipped.houseTrophy-gilded::after{background-image:url(art/meta/trophy-gilded.svg)}
.lbIdent.trophyEquipped.houseTrophy-vanguard::after{background-image:url(art/meta/trophy-vanguard.svg)}
.lbIdent.trophyEquipped.houseTrophy-syndicate::after{background-image:url(art/meta/trophy-syndicate.svg)}
.reactionBubble.reactionSignature{border-width:2px;box-shadow:0 0 0 2px rgba(232,200,122,.25),0 10px 25px rgba(0,0,0,.5)}.reactionBubble.reactionMaster{border:2px solid var(--ivory);background:linear-gradient(155deg,var(--ink-3),var(--ink-3));color:var(--ivory);box-shadow:0 0 0 2px rgba(232,200,122,.32),0 0 25px rgba(142,77,201,.46),0 10px 28px rgba(0,0,0,.52)}.reactionBubble.reactionMaster::after{background:var(--ink-3)}.reactionBubble.reactionMaster>b{color:var(--brass-hi)}
.lbFairRules{margin-top:9px;padding:9px 10px;border-radius:var(--r-card);background:rgba(5,19,14,.62);color:var(--muted);font:700 12px/1.45 Barlow;text-align:center}.lbFairRules b{color:var(--brass-hi)}.lbFairRules i{font-style:normal;color:var(--muted);margin:0 5px}
.lbAdvanced{margin-top:12px;border:1px solid rgba(201,162,75,.22);border-radius:var(--r-card);background:rgba(5,19,14,.4)}.lbAdvanced summary{cursor:pointer;list-style:none;padding:12px 14px;font:800 12px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}.lbAdvanced summary span{float:right;color:var(--muted);font-weight:600;letter-spacing:0}.lbAdvanced[open] summary{border-bottom:1px solid rgba(201,162,75,.18)}.lbAdvanced .lbRow{padding:0 12px 12px}
.lbAdvanced:not([open])>:not(summary){display:none}
.lbHead{position:relative;padding-left:54px}.lbHeadBack{position:absolute;left:0;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(232,200,122,.4);border-radius:50%;background:var(--ink-2);color:var(--ivory);font:400 32px/1 Barlow;cursor:pointer}.lbHeadBack:active{transform:translateY(-48%) scale(.95)}
/* ══ BUILD 402 — SHARED LIST COMPONENTS (FRONT OF HOUSE PLAN §2.4) ═══════════════════════════
   `.row` is the one list row in the menus - Settings uses it now, Friends and the reward ladders
   follow in 403/404. `.pill` is the one status chip: a span states a state, a button switches one.
   `.slider` is the one level control. Declared once, here, and nowhere else. */
.surface{border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--ink-2)}
.surface.raised{background:var(--ink-3);box-shadow:var(--shadow)}
.rowGroup{margin:var(--sp-3) 0;border:1px solid var(--hairline);border-radius:var(--r-card);background:rgba(5,19,14,.62);overflow:hidden}
.rowGroup>*+*{border-top:1px solid rgba(232,200,122,.13)}
.row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);box-sizing:border-box;width:100%;min-height:54px;margin:0;padding:var(--sp-1) var(--sp-4);border:0;background:transparent;color:var(--ivory);font:800 14px Barlow;letter-spacing:var(--ls-eyebrow);text-align:left;cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.row>b{min-width:0;font:800 14px Barlow;letter-spacing:var(--ls-eyebrow)}
.row:hover{background:rgba(232,200,122,.05)}
.row:focus-visible{outline:2px solid var(--brass-hi);outline-offset:-2px}
.row>.go{flex:none;color:var(--brass);font:400 24px/1 'Bebas Neue'}
.pill{flex:none;padding:6px var(--sp-3);border:1px solid rgba(140,166,154,.35);border-radius:var(--r-pill);color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);white-space:nowrap}
.pill.on{color:var(--jade-bright);border-color:rgba(47,196,124,.5)}
button.pill{min-width:58px;min-height:var(--tap);background:transparent;cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
button.pill.on{border-color:var(--brass-hi);background:rgba(232,200,122,.13);color:var(--brass-hi)}
button.pill:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.slider{display:flex;align-items:center;gap:var(--sp-3);min-height:54px;padding:var(--sp-1) var(--sp-4)}
.slider>b{flex:none;width:78px;color:var(--ivory);font:800 12px Barlow;letter-spacing:var(--ls-eyebrow)}
.slider input{flex:1;min-width:0;min-height:var(--tap);accent-color:var(--brass-hi)}
/* the one hairline-on-glass secondary button (PLAN §2.4) */
.btnSecondary{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:0 var(--sp-4);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--glass);color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);cursor:pointer;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.btnSecondary:hover{border-color:var(--brass);color:var(--ivory)}
.btnSecondary:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.modalRouteBack{position:sticky;z-index:5;top:-2px;display:inline-flex;align-items:center;min-height:44px;margin:-5px 0 11px;padding:8px 13px;border:1px solid rgba(232,200,122,.48);border-radius:var(--r-pill);background:rgba(10,33,27,.97);box-shadow:0 5px 14px rgba(0,0,0,.35);color:var(--ivory);font:800 12px Barlow;letter-spacing:var(--ls-label);cursor:pointer}.modalRouteBack:hover{border-color:var(--brass-hi)}
@media(max-width:700px){
 #metaHeader{top:max(7px,env(safe-area-inset-top));left:8px;right:52px}#metaHeader button{min-height:46px}#metaInfluence{padding:4px 7px}#metaInfluence img{width:30px;height:30px}#metaInfluence small{display:none}#metaInfluence b{font-size:var(--fs-16)}
 #metaNav{left:var(--sp-2);right:var(--sp-2);bottom:max(7px,env(safe-area-inset-bottom));transform:none;justify-content:stretch;gap:var(--sp-1);padding:var(--sp-1)}#metaNav button{min-height:52px;padding:0 var(--sp-1);flex-direction:column;gap:1px}#metaNav span{font-size:var(--fs-14)}#metaNav b{font-size:var(--fs-11)}
 #v3coach{bottom:112px;grid-template-columns:1fr;gap:10px;padding:12px 13px}.coachStep strong{font-size:var(--fs-20)}.coachStep p{font-size:var(--fs-16)}.coachActions{width:100%}.coachActions button{flex:1;min-height:44px}
 #v2title{padding:66px 12px 74px;justify-content:center;gap:10px;overflow-y:auto}.millionaireWord{font-size:clamp(32px,9.3vw,42px);letter-spacing:0;max-width:100%;white-space:nowrap}.ttEyebrow{font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow)}.ttmodes{margin-top:10px}.ttmode{min-height:64px;padding:10px 14px}.ttmode small{font-size:var(--fs-14);line-height:1.25;margin-top:3px}
 .metaPanelCard{width:100%;padding:0 var(--sp-4)}.metaPanelHead{gap:8px;padding:calc(var(--tap) + var(--sp-3) + env(safe-area-inset-top)) 0 var(--sp-3)}.metaPanelHead h2{font-size:var(--fs-24)}.metaPanelHead>button{height:44px}.metaPanelBack{padding:0 10px}.metaPanelBack b{font-size:var(--fs-11)}#metaPanelBody{padding:var(--sp-4) 0 var(--sp-5)}.metaLead{font-size:var(--fs-16)}
 .metaGrid,.contractGrid{grid-template-columns:1fr}.trophyGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.trophyCase>div:first-child{align-items:start;flex-direction:column}.characterGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.characterCard{min-height:194px;padding:10px}.characterCard img{width:88px;height:88px}.characterCard b{font-size:var(--fs-20)}.characterCard small,.characterCard em{font-size:var(--fs-12)}.houseChoice{min-height:0}
 .characterHero,.profileHero{grid-template-columns:98px minmax(0,1fr);gap:14px}.characterHero>img,.characterPortraitWrap>img,.profileHero>img,.profileHeroPortrait>img{width:92px;height:92px}.founderBadge{font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow);padding:2px 9px}.characterPortraitWrap{width:98px;height:98px}.characterTrophy{width:26px;height:26px;right:1px;bottom:3px}.characterHero h3,.profileHero h3{font-size:var(--fs-32)}.characterBrowse{gap:7px;margin-bottom:12px}.characterBrowse button{font-size:var(--fs-12);padding:7px}.characterBrowse b{min-width:58px;font-size:var(--fs-20)}.voicePackRow{padding:var(--sp-3)}.voicePackCopy{flex:1 1 100%}.rowActions{flex:1 1 100%}.rowActions button{flex:1 1 auto;min-width:0}.profileStats{grid-template-columns:repeat(2,1fr)}.accountCard{grid-template-columns:1fr;gap:12px}.accountCard button{width:100%;min-width:0}.accountCard b{font-size:var(--fs-20)}.accountCard small{font-size:var(--fs-16)}
 .houseStanding{grid-template-columns:94px minmax(0,1fr) 42px;gap:8px}.houseStanding b,.houseStanding strong{font-size:var(--fs-16)}
 .masteryRewardsHead{align-items:start;flex-direction:column}.masteryReward{grid-template-columns:74px minmax(0,1fr)}.masteryReward article{grid-template-columns:58px minmax(0,1fr) auto}.masteryReward article small{grid-column:2}.masteryReward article button{grid-column:1/-1;width:100%}.rewardPreview{grid-row:1/3;width:52px;height:46px}.rewardPreview.reaction{width:54px}.rewardLine{font-size:var(--fs-14);line-height:1.35;align-items:start}.rewardLine b{text-align:right}.socialList article{grid-template-columns:44px minmax(0,1fr)}.socialList article button{grid-column:1/-1;width:100%}
 .resultHero{min-height:132px;grid-template-columns:64px minmax(0,1fr);column-gap:10px;padding:13px 14px}.resultVictoryCutin{width:64px;height:88px;opacity:.7}.resultKicker{font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow)}.resultTitle{font-size:clamp(24px,7vw,24px);letter-spacing:var(--ls-label)}.resultSub{font-size:var(--fs-12);line-height:1.3}.resultHero.masteryVictory{min-height:270px;grid-template-columns:minmax(0,1fr);grid-template-rows:clamp(164px,26vh,220px) auto auto auto;padding:0 0 14px;text-align:left}.resultHero.masteryVictory .resultVictoryCutin{grid-column:1;grid-row:1;width:100%;height:clamp(164px,26vh,220px);object-fit:contain;object-position:center bottom;opacity:1;background:radial-gradient(ellipse at center bottom,rgba(232,200,122,.2),transparent 64%)}.resultHero.masteryVictory .resultKicker,.resultHero.masteryVictory .resultTitle,.resultHero.masteryVictory .resultSub{grid-column:1;margin-left:14px;margin-right:14px}.resultHero.masteryVictory .resultKicker{grid-row:2;margin-top:12px}.resultHero.masteryVictory .resultTitle{grid-row:3;font-size:var(--fs-32)}.resultHero.masteryVictory .resultSub{grid-row:4;font-size:var(--fs-14);line-height:1.3}.resultHero.masteryVictory::after{top:12px;bottom:auto}.resultBody{padding:12px;max-height:62vh}.resultActions{grid-template-columns:1fr}.resultActions .gold{grid-column:auto}
 .lbFairRules{font-size:var(--fs-12);text-align:left}.lbAdvanced summary span{display:none}
 .lbStep.on{animation:none;transform:none}.lbAvatarGrid{grid-template-columns:repeat(3,minmax(0,1fr))}.lbAvatarChoice{min-height:104px}.lbAvatarChoice img{width:58px;height:58px}.lbAvatarChoice span{font-size:var(--fs-14)}.voicePackChoices{grid-template-columns:repeat(3,minmax(0,1fr))}.voicePackChoice{min-height:52px}.voicePackChoice b{font-size:var(--fs-12)}.voicePackChoice small{font-size:var(--fs-11);line-height:1.15}.lbVoiceEquip{grid-template-columns:1fr}.lbContinue{position:static;width:100%;margin-top:10px}.reactionChoice b{font-size:var(--fs-11)}.reactionChoice span{font-size:var(--fs-12);line-height:1.25}.reactionTierHead span{font-size:var(--fs-11)}
}

/* Build 390: mastery 4/8 now improve a player's shared ceremony spotlight. */
.rewardPreview.spotlight{font-size:var(--fs-24);background:radial-gradient(circle,rgba(232,200,122,.25),var(--ink))}
.rewardPreview.spotlight.prestige{color:var(--jade-bright);background:radial-gradient(circle,rgba(47,196,124,.25),var(--ink))}
@media(max-height:690px) and (max-width:700px){#v2title{justify-content:flex-start}.ttSeal,.titleArchitecture{display:none}.tt1{margin-top:10px}.ttmodes{width:100%}}
@media(prefers-reduced-motion:reduce){#metaPanel.open .metaPanelCard{animation:none}.metaCard,#metaHeader button{transition:none!important}}

/* Final mobile legibility guardrails: explanatory copy stays at body size,
   primary values stay larger, and every persistent control has a full target. */
@media(max-width:700px){
 .lbIntro span{max-width:58%;font-size:var(--fs-16);line-height:1.3}
 .lbLbl{font-size:var(--fs-16);line-height:1.2;letter-spacing:var(--ls-label)}
 .lbFairRules{font-size:var(--fs-16);line-height:1.45}
 #lbHint,.lbBack{font-size:var(--fs-16);line-height:1.4}
 .metaLead,.socialList small,.archiveSeason small,.rewardLine,.rewardUnlock span{font-size:var(--fs-16);line-height:1.4}
 .friendCode span{font-size:var(--fs-14)}.characterCard small,.characterCard em{font-size:var(--fs-14);line-height:1.3}
}
@media(max-width:360px){
}
@media(max-width:400px){
 #v3coach{bottom:128px}
}

/* v120 deterministic tutorial: a compact guide that stays clear of the player's hand. */
.coachProgress{height:3px;margin-top:9px;border-radius:var(--r-chip);background:rgba(245,239,221,.13);overflow:hidden}.coachProgress i{display:block;height:100%;width:14.285%;border-radius:var(--r-chip);background:linear-gradient(90deg,var(--brass-deep),var(--brass-hi),var(--jade-bright));transition:width .25s ease}
body.tutorial #v3coach{left:auto;right:16px;top:86px;bottom:auto;transform:none;width:min(360px,calc(100vw - 32px));grid-template-columns:1fr;align-items:start}
body.tutorial .turnclock{display:none}
body.tutorial #v3coach.on{animation:tutorialCoachIn .22s ease-out both}@keyframes tutorialCoachIn{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
body.tutorial #coachSkip{border-color:rgba(226,61,61,.42);color:var(--crash)}
/* v167 (David 2026-08-04): the old 2px ring + 24px glow was invisible on a wide desktop, where
   this button is a small pill in the far corner. Same colours, same geometry — the button is
   never moved or resized — but the halo now reads from across a 2600px window. */
body.tutorial .tutorialFocusDom{animation:tutorialDomPulse 1s ease-in-out infinite;box-shadow:0 0 0 3px var(--ivory),0 0 0 11px rgba(232,200,122,.30),0 0 38px 10px rgba(232,200,122,.9)}
#tutorialLeader{display:none;position:fixed;z-index:33;height:2px;transform-origin:0 50%;pointer-events:none;background:linear-gradient(90deg,rgba(232,200,122,.3),var(--brass-hi));box-shadow:0 0 7px rgba(232,200,122,.72)}
#tutorialLeader.on{display:block}
#tutorialLeader::after{content:"";position:absolute;right:-7px;top:-4px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--brass-hi);filter:drop-shadow(0 0 4px rgba(232,200,122,.8))}
@keyframes tutorialDomPulse{50%{filter:brightness(1.3);transform:scale(1.06)}}
@media(max-width:700px){body.tutorial #v3coach{left:8px;right:8px;top:54px;bottom:auto;width:auto;padding:9px 75px 9px 11px;gap:7px;border-radius:var(--r-card)}body.tutorial #v3coach.coachLow{top:auto;bottom:62px}body.tutorial .coachStep{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;column-gap:8px}body.tutorial .coachStep small{grid-column:1;white-space:nowrap;font-size:var(--fs-11)}body.tutorial .coachStep strong{grid-column:2;min-width:0;margin:0;font-size:var(--fs-16)}body.tutorial .coachStep p,body.tutorial .coachProgress{grid-column:1/-1}body.tutorial .coachStep p{font-size:var(--fs-12);line-height:1.25}body.tutorial .coachActions{width:100%;gap:6px}body.tutorial .coachActions button{min-height:40px;font-size:var(--fs-12)}body.tutorial #coachSkip{position:absolute;right:9px;top:9px;width:58px;min-width:58px;min-height:44px;padding:4px}body.tutorial #coachPrimary{width:100%}.coachProgress{margin-top:6px}}
@media(prefers-reduced-motion:reduce){body.tutorial .tutorialFocusDom{animation:none}body.tutorial #v3coach.on{animation:none}}

/* Table setup: one clear decision path with no floating controls. */
#v3lobby .lbCard{padding-bottom:18px}
#v3lobby .lbHead{padding-right:58px}
#v3lobby .lbHead>span{min-width:0}
#v3lobby .lbHead>#lbSub{flex:0 1 auto;max-width:150px;text-align:right;white-space:nowrap}
.lbSetupIntro{margin-bottom:10px}
.lbSetupGrid{grid-template-columns:1fr;gap:9px}
/* Build 401B: the two-column control strip opens at the DESKTOP breakpoint, not at 701px. On a
   768px tablet the .62fr column was narrower than PLAYERS + a 44px stepper, so the stepper's +
   overhung the column and landed on the $1 MILLION button (responsive.spec.js auditLayout). */
@media(min-width:1180px){body.climbFlow .lbSetupGrid{grid-template-columns:minmax(180px,.62fr) minmax(0,1.38fr)}}
.lbSetupGrid .lbRow{margin:0;padding:11px 12px}
.lbSetupGrid #lbCountRow,.lbSetupGrid #lbCodeRow{display:flex;align-items:center;justify-content:space-between;gap:18px}
.lbSetupGrid #lbCountRow .lbLbl,.lbSetupGrid #lbCodeRow .lbLbl{margin:0}
/* Build 368: Solo and Host offer one $1M/$2M Closing Bell choice; Join inherits the host target. */
.lbTarget{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.lbTarget button{min-height:58px;border:1px solid rgba(201,162,75,.28);border-radius:var(--r-card);background:var(--ink-2);color:var(--ivory);cursor:pointer}.lbTarget button.on{border-color:var(--brass-hi);background:linear-gradient(180deg,rgba(232,200,122,.22),rgba(232,200,122,.06));box-shadow:inset 0 -3px var(--brass-hi)}.lbTarget b{display:block;font:400 20px 'Bebas Neue'}.lbTarget span{display:block;font:800 11px Barlow;letter-spacing:var(--ls-label);color:var(--muted)}.lbTargetRow .lbChoiceNote{margin-top:8px;text-align:left;text-wrap:balance}
/* Build 347: with the CLOSING TARGET row retired the OPENING HAND row is the only choice on the
   screen, so it is laid out as one: the label, then the deal it currently reads, then a
   full-width slider, then one quiet line of guidance - all left-aligned on the same margin
   instead of a 128px caption column that wrapped "3 Careers · 4 Opportunities" onto two lines
   and a centred note that broke raggedly under it. */
.lbMixRow #lbCustomMix{grid-template-columns:minmax(0,1fr);gap:9px}
.lbMixRow #ttSplitL{color:var(--brass-hi);font:800 14px/1.15 Barlow;letter-spacing:0;text-transform:uppercase}
.lbMixRow #ttSplit{width:100%;min-height:30px}
.lbMixRow .lbChoiceNote{margin-top:8px;text-align:left;text-wrap:balance}
.lbChoiceNote{color:var(--muted);font:700 12px/1.35 Barlow;text-align:center;letter-spacing:0}
.lbChoiceNote i{margin:0 7px;color:var(--muted);font-style:normal}
.lbReadyDock{position:static;z-index:auto;display:grid;gap:8px;margin-top:10px;padding:0;background:none}
#lbHint{order:0;min-height:18px;margin:0;padding:0 8px;color:var(--muted);font:700 12px/1.35 Barlow;letter-spacing:0}/* Build 347: a solo table has nothing to say here any more, and an 18px band of nothing above START GAME is not a quiet screen, it is a gap. */#lbHint:empty{display:none;min-height:0;padding:0}
#lbReady{order:1;min-height:52px;margin:0}
#lbSeats{margin:10px 0 0}
.lbAdvanced{margin-top:0}

@media(max-width:700px){
 #v3lobby .lbCard{padding:12px 11px 14px}
 #v3lobby .lbHead{min-height:46px;padding:0 54px 8px 50px;align-items:center}
 #v3lobby .lbHead span{font-size:var(--fs-16);letter-spacing:var(--ls-eyebrow)}
 #v3lobby .lbHead span small{font-size:var(--fs-11);letter-spacing:var(--ls-eyebrow)}
 #v3lobby .lbHead>#lbSub{max-width:90px;font-size:var(--fs-11);line-height:1.05;letter-spacing:var(--ls-label);white-space:normal}
 .lbSetupIntro{margin:8px 0 4px}
 .lbSetupIntro strong{font-size:var(--fs-24)}
 .lbSetupGrid{gap:7px}
 .lbSetupGrid .lbRow{padding:9px 10px}
 .lbSetupGrid #lbCountRow{min-height:58px}
 .lbSetupGrid .lbLbl{margin-bottom:5px;font-size:var(--fs-12);line-height:1.2;letter-spacing:var(--ls-label)}
 .lbStepper{flex:0 0 150px}
 .lbChoiceNote{font-size:var(--fs-12);line-height:1.3}
 .lbAdvanced summary{min-height:44px;box-sizing:border-box;padding:13px 12px}
 #lbSeats{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin-top:8px}
 .lbSeat{--seatBadgeLane:16px;min-height:88px;padding:var(--seatBadgeLane) 3px 7px}
 .lbSeat img{width:44px;height:44px}
 .lbCred{gap:5px;margin-top:6px;padding-top:5px}
 .lbCred .mRing{min-width:17px;height:17px;font-size:var(--fs-11)}
 .lbCred .crTrophy,.lbCred .crHouse{width:17px;height:17px}
 .lbSeat.founder::before{left:3px;top:3px;width:37px;height:12px;font-size:var(--fs-11)}
 .lbSeat .nm{font-size:var(--fs-11);line-height:1.1}
 .lbSeat .st{font-size:var(--fs-11);line-height:1.1;letter-spacing:0}
 .lbReadyDock{margin-top:8px;gap:6px;padding:0}
 #lbHint{font-size:var(--fs-12);line-height:1.3}
 #lbReady{min-height:52px;padding:10px;font-size:var(--fs-20)}
 .lbBack{margin-top:5px;font-size:var(--fs-12);line-height:1.2}
}
@media(max-width:370px){
 #v3lobby .lbHead>#lbSub{display:none}
 .lbChoiceNote{font-size:var(--fs-11)}
}

/* ══ BUILD 402 — THE TABLE SHEET (FRONT OF HOUSE PLAN D6 / §4.6) ═════════════════════════════
   One composition for THE CLIMB and for HOST step 2: hero, then the SEATS as the largest element
   on the screen, then ONE control strip, then the ready dock. The seat portrait grows with the
   screen - 72px on a tablet, 96px on a wide desktop - and the phone keeps the 44px face Build 376
   freed and Build 347's badge lane protects; that number is pinned in both sheets' 700px blocks
   and is NOT reached around here. */
@media(min-width:701px){
 #lbSeats{grid-template-columns:repeat(auto-fit,minmax(122px,1fr));gap:10px}
 .lbSeat{min-height:126px}
 .lbSeat img{width:72px;height:72px}
 .lbSeat .nm{font-size:var(--fs-14)}
}
@media(min-width:1180px){
 #lbSeats{grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
 .lbSeat{min-height:158px}
 .lbSeat img{width:96px;height:96px}
}
/* the host's share block belongs to the hero, never to the news band above the gold button */
.lbShare{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-3);min-width:0;margin:var(--sp-3) 0 0;padding:var(--sp-3);border:1px solid var(--hairline);border-radius:var(--r-card);background:rgba(5,19,14,.42)}
.lbShare[hidden]{display:none}
.lbShareCode{display:grid;gap:2px;min-width:0}
.lbShareCode>small{color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.lbShareCode>b{color:var(--brass-hi);font:400 32px/1 'Bebas Neue';letter-spacing:var(--ls-eyebrow)}
.lbShareActions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--sp-2);min-width:0}
@media(max-width:700px){.lbShare{grid-template-columns:minmax(0,1fr);gap:var(--sp-2)}.lbShareActions{justify-content:flex-start}.lbShareCode>b{font-size:var(--fs-24)}}
/* ONE control strip: three settings side by side where there is room, stacked where there is not */
.lbControls{margin-top:var(--sp-3)}
@media(min-width:1180px){
 /* THE CLIMB's sheet is 1040px wide and takes all three settings on one line; the hosted sheet is
    760px, where three columns wrapped "$1 MILLION" and the opening-hand label onto second lines -
    so it takes two, with the slider on its own full-width line under them. */
 .lbControls{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
 .lbControls .lbMixRow{grid-column:1/-1}
 body.climbFlow .lbControls{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.climbFlow .lbControls .lbMixRow{grid-column:auto}
 .lbControls .lbRow{display:grid;align-content:start;gap:var(--sp-2)}
 .lbControls #lbCountRow{display:flex}
}

/* v134 Founder reward: speech access plus one irreversible core-character mastery ceremony. */
.founderProfileCard{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin-top:18px;padding:16px;border:1px solid rgba(232,200,122,.72);border-radius:var(--r-card);background:radial-gradient(circle at 92% 10%,rgba(232,200,122,.2),transparent 38%),linear-gradient(135deg,rgba(107,78,20,.7),rgba(10,33,27,.95));box-shadow:0 0 28px rgba(232,200,122,.12),inset 0 1px rgba(255,255,255,.09)}.founderProfileCard span,.founderProfileCard b,.founderProfileCard small{display:block}.founderProfileCard span{font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}.founderProfileCard b{margin-top:4px;font:400 24px 'Bebas Neue';letter-spacing:0;color:var(--ivory)}.founderProfileCard small{margin-top:3px;font:650 14px/1.35 Barlow;color:var(--ivory)}.founderProfileCard>strong{padding:8px 11px;border:1px solid var(--brass-hi);border-radius:var(--r-pill);color:var(--brass-hi);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow)}.founderMasteryPicker,.founderMasteryConfirm{text-align:left}.founderMasteryPicker .dialogKicker,.founderMasteryConfirm .dialogKicker{display:block;color:var(--brass-hi);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow)}.founderMasteryPicker h3,.founderMasteryConfirm h3{margin:5px 0 8px}.founderMasteryPicker p,.founderMasteryConfirm p{margin:0 0 15px;color:var(--ivory);font:650 14px/1.42 Barlow}.founderMasteryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}.founderMasteryChoice{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:10px;min-height:64px;padding:7px 9px;border:1px solid rgba(232,200,122,.32);border-radius:var(--r-card);background:var(--ink-2);color:var(--ivory);text-align:left;cursor:pointer}.founderMasteryChoice:hover{border-color:var(--brass-hi);background:var(--ink-3)}.founderMasteryChoice img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--brass)}.founderMasteryChoice b,.founderMasteryChoice small{display:block}.founderMasteryChoice b{font:400 16px 'Bebas Neue';letter-spacing:0}.founderMasteryChoice small{margin-top:2px;color:var(--muted);font:700 11px Barlow}.founderMasteryConfirm{text-align:center}.founderMasteryConfirm>img{display:block;width:132px;height:132px;margin:14px auto 8px;border:4px solid var(--brass-hi);border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px rgba(232,200,122,.16),0 0 42px rgba(232,200,122,.34)}
/* FRONT-OF-HOUSE END */   /* ceremony block below is out of Build 401A's scope
   (ARCH-MAP §2(d): .founderCeremony .friendshipCeremony .houseCeremony .climbProgressCeremony
   .seatCeremony). Its literals, sizes and radii are left exactly as Build 400 wrote them and
   tokens-test.js does not scan between these two markers. */
.founderMasteryCeremony{position:fixed;z-index:120;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:22px;box-sizing:border-box;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(98,69,10,.72),rgba(2,13,9,.96) 62%);opacity:0;transform:scale(1.04);transition:opacity .32s ease,transform .5s cubic-bezier(.2,.8,.2,1);pointer-events:none}.founderMasteryCeremony.on{opacity:1;transform:none}.founderMasteryCeremony>span,.founderMasteryCeremony>img,.founderMasteryCeremony>strong,.founderMasteryCeremony>small{position:relative;z-index:3}.founderMasteryCeremony>span{margin-bottom:14px;color:#ffe69a;font:900 12px Barlow;letter-spacing:3.2px}.founderMasteryCeremony>img{width:min(42vw,230px);aspect-ratio:1;border:6px solid #f3d87e;border-radius:50%;object-fit:cover;box-shadow:0 0 0 10px rgba(232,200,122,.14),0 0 75px rgba(255,219,104,.55);animation:founderPortraitIn .8s cubic-bezier(.15,.8,.2,1) both}.founderMasteryCeremony>strong{margin-top:20px;color:#fff7d8;font:400 clamp(36px,7vw,70px)/1 'Bebas Neue';letter-spacing:3px;text-align:center;text-shadow:0 3px 0 #755515,0 0 30px rgba(255,225,127,.65)}.founderMasteryCeremony>small{margin-top:8px;color:#e8c87a;font:900 12px Barlow;letter-spacing:2px;text-align:center}.founderMasteryBurst{position:absolute;z-index:1;width:min(75vw,560px);aspect-ratio:1;border:2px solid rgba(255,229,145,.5);border-radius:50%;box-shadow:0 0 0 22px rgba(255,225,127,.055),0 0 0 68px rgba(255,225,127,.035);animation:founderBurst 1.2s ease-out both}.founderMasteryBurst:before,.founderMasteryBurst:after{content:"";position:absolute;inset:14%;border:1px solid rgba(255,241,188,.45);transform:rotate(45deg)}.founderMasteryBurst:after{transform:rotate(22.5deg)}.founderMasteryParticles{position:absolute;z-index:2;inset:0}.founderMasteryParticles i{--angle:calc(var(--i)*22.5deg);position:absolute;left:50%;top:45%;width:7px;height:18px;border-radius:8px;background:linear-gradient(#fff8d4,#d6a52d);box-shadow:0 0 12px #ffe78f;transform:rotate(var(--angle)) translateY(-52px);animation:founderSpark 1.35s calc(var(--i)*.025s) ease-out both}@keyframes founderPortraitIn{from{opacity:0;transform:scale(.45) rotate(-8deg)}60%{transform:scale(1.08) rotate(2deg)}to{opacity:1;transform:none}}@keyframes founderBurst{from{opacity:0;transform:scale(.2) rotate(-18deg)}55%{opacity:1}to{opacity:.45;transform:scale(1.12) rotate(5deg)}}@keyframes founderSpark{0%{opacity:0;transform:rotate(var(--angle)) translateY(-50px) scale(.3)}25%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-42vh) scale(1.2)}}
@media(max-width:700px){.founderProfileCard{grid-template-columns:1fr}.founderProfileCard .metaPrimary{width:100%}.founderMasteryGrid{grid-template-columns:1fr}.founderMasteryChoice{min-height:58px}.founderMasteryCeremony>img{width:min(58vw,210px)}.founderMasteryCeremony>small{max-width:290px;line-height:1.4}.founderMasteryCeremony>strong{font-size:44px}}@media(prefers-reduced-motion:reduce){.founderMasteryCeremony,.founderMasteryCeremony>*{animation:none!important;transition:none!important}.founderMasteryCeremony.on{opacity:1}}

/* ══ THE FOUNDER MOMENT (v142) ══════════════════════════════════════════════════════════
   Same visual family as the mastery ceremony above, so it reads as part of the game.
   The portrait uses the SAME engraved-band treatment as the in-match Founder portrait
   (see drawAvatar in v3.js) so the thing they see here is the thing others will see at
   the table. Interactive, so unlike the mastery flourish it waits for a choice. */
.founderCeremony{position:fixed;z-index:130;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;box-sizing:border-box;overflow:hidden;background:radial-gradient(circle at 50% 40%,rgba(64,46,8,1),rgba(2,13,9,1) 64%);opacity:0;transform:scale(1.04);transition:opacity .34s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.founderCeremony.on{opacity:1;transform:none}
.founderCeremony>*{position:relative;z-index:3}
.founderCeremonyKicker{margin-bottom:16px;color:#ffe69a;font:900 11px Barlow;letter-spacing:3.4px;text-align:center}
.founderPortrait{position:relative;display:grid;place-items:center;animation:founderPortraitIn .85s cubic-bezier(.15,.8,.2,1) both}
.founderPortrait img{width:min(40vw,196px);aspect-ratio:1;border-radius:50%;object-fit:cover;border:5px solid #f3d87e;box-shadow:0 0 0 7px #8c6b22,0 0 0 9px #fff3d6,0 0 78px rgba(255,219,104,.6)}
.founderPortrait b{position:absolute;bottom:-11px;padding:4px 15px;border:1px solid #fff3d6;border-radius:999px;background:#6b4e14;color:#fff3d6;font:900 11px Barlow;letter-spacing:2.4px;box-shadow:0 4px 12px rgba(0,0,0,.6);animation:founderStamp .5s .5s cubic-bezier(.2,1.5,.4,1) both}
.founderCeremony>strong{margin-top:26px;color:#fff7d8;font:400 clamp(34px,7.5vw,66px)/1 'Bebas Neue';letter-spacing:3px;text-align:center;text-shadow:0 3px 0 #755515,0 0 32px rgba(255,225,127,.7)}
.founderCeremonyList{margin:16px 0 22px;padding:0;list-style:none;max-width:390px;text-align:center}
.founderCeremonyList li{margin:7px 0;color:#e8d9ac;font:600 13px/1.45 Barlow}
.founderCeremonyList li:before{content:"◆ ";color:#f3d87e}
.founderCeremony .v2opt{min-width:min(78vw,290px)}
.founderCeremonyHint{margin-top:10px;color:#c9b98c;font:600 11px Barlow;letter-spacing:.4px;text-align:center;opacity:.9}
.founderCeremonyRays{position:absolute;z-index:1;inset:0;pointer-events:none}
.founderCeremonyRays i{--angle:calc(var(--i)*30deg);position:absolute;left:50%;top:44%;width:6px;height:20px;border-radius:8px;background:linear-gradient(#fff8d4,#d6a52d);box-shadow:0 0 14px #ffe78f;transform:rotate(var(--angle)) translateY(-56px);animation:founderSpark 1.5s calc(var(--i)*.03s) ease-out both}
.founderCeremonyBurst{position:absolute;z-index:1;width:min(78vw,580px);aspect-ratio:1;border:2px solid rgba(255,229,145,.5);border-radius:50%;box-shadow:0 0 0 24px rgba(255,225,127,.06),0 0 0 72px rgba(255,225,127,.035);animation:founderBurst 1.3s ease-out both}
@keyframes founderStamp{from{opacity:0;transform:scale(2.2)}to{opacity:1;transform:none}}
@media(max-width:700px){.founderPortrait img{width:min(52vw,176px)}.founderCeremony>strong{font-size:42px}.founderCeremonyList li{font-size:12px}}
@media(prefers-reduced-motion:reduce){.founderCeremony,.founderCeremony *{animation:none!important;transition:none!important}.founderCeremony.on{opacity:1}}
/* FRONT-OF-HOUSE START */


/* ===== v170 THE CARD GUIDE — types, counts and what each does (CLAUDE.md §7b.15).
   Content is generated in v3.js from the ENGINE's own arrays; this file only dresses it. One
   column on a phone, 44px tabs, and the modal body scrolls — the page never scrolls sideways. */
.libraryBox{max-width:980px;width:min(980px,calc(100vw - 24px))}
.cardLibrary h3{margin:6px 0 10px}
.libTabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;position:sticky;top:0;z-index:2;background:linear-gradient(180deg,var(--ink-2) 72%,rgba(10,33,27,0))}
.libTabs button{flex:1 1 auto;min-height:44px;padding:6px 10px;border:1px solid rgba(201,162,75,.34);border-radius:var(--r-card);background:rgba(10,33,27,.9);color:var(--ivory);font:800 11px/1.1 'Barlow Semi Condensed',Barlow,sans-serif;letter-spacing:var(--ls-label);cursor:pointer}
.libTabs button.on{border-color:var(--brass-hi);background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink)}
.libBody{max-height:min(64vh,580px);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-right:2px}
.libLead{font:700 14px/1.5 Barlow;color:var(--ivory);margin:0 0 14px}

/* --- tab 1: the three decks --- */
.libDecks{display:grid;gap:10px}
.libDeck{padding:12px;border:1px solid rgba(201,162,75,.22);border-radius:var(--r-card);background:rgba(5,19,14,.55)}
.libDeck header{display:flex;align-items:center;gap:11px;margin-bottom:8px}
.libDeck h4{margin:0;font:900 14px/1.1 'Bebas Neue',Barlow;letter-spacing:var(--ls-label);color:var(--ivory)}
.libDeck header b{display:block;font:900 12px/1.3 Barlow;color:var(--brass-hi)}
.libBack{width:34px;height:48px;border-radius:var(--r-chip);display:block;flex:0 0 auto;border:1.5px solid}
.libBack.b-c{background:var(--ink-3);border-color:var(--slate)}
.libBack.b-o{background:var(--ink-3);border-color:var(--jade)}
.libBack.b-m{background:var(--ink-2);border-color:var(--market)}
.libDeckBar{height:8px;border-radius:var(--r-chip);background:rgba(255,255,255,.06);overflow:hidden;margin-bottom:8px}
.libDeckBar i{display:block;height:100%;border-radius:var(--r-chip)}
.libDeck.d-c .libDeckBar i{background:var(--slate)}
.libDeck.d-o .libDeckBar i{background:var(--jade)}
.libDeck.d-m .libDeckBar i{background:var(--market)}
.libDeck p{margin:0;font:600 12px/1.5 Barlow;color:var(--ivory)}

/* --- tab 2: the three career types, each with its tier ladder --- */
.libType{padding:12px;border:1px solid rgba(201,162,75,.22);border-radius:var(--r-card);background:rgba(5,19,14,.55);margin-bottom:11px;border-left:4px solid}
.libType.t-sal{border-left-color:var(--slate)}
.libType.t-self{border-left-color:var(--jade)}
.libType.t-crime{border-left-color:var(--crash)}
.libType header{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;margin-bottom:6px}
.libType h4{margin:0;font:900 16px/1.1 'Bebas Neue',Barlow;letter-spacing:var(--ls-label);color:var(--ivory)}
.libType header b{font:900 12px/1 Barlow;color:var(--brass-hi)}
.libType header em{font:700 11px/1 Barlow;font-style:normal;color:var(--muted)}
.libType p{margin:0 0 9px;font:600 12px/1.5 Barlow;color:var(--ivory)}
.libTiers{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.libTiers li{display:grid;grid-template-columns:auto auto auto 1fr;align-items:baseline;gap:8px;padding:6px 8px;border-radius:var(--r-card);background:rgba(255,255,255,.035)}
.libTiers b{font:900 11px/1 'Barlow Semi Condensed',Barlow;letter-spacing:var(--ls-label);color:var(--ivory);white-space:nowrap}
.libTiers em{font:800 11px/1 Barlow;font-style:normal;color:var(--brass-hi);white-space:nowrap}
.libTiers span{font:600 12px/1.4 Barlow;color:var(--ivory)}

/* --- tabs 3 and 4: the four Opportunity types and the eight Market kinds --- */
.libRarity{display:grid;gap:7px;margin:0 0 16px;padding:11px;border:1px solid rgba(201,162,75,.22);border-radius:var(--r-card);background:rgba(5,19,14,.55)}
.libBar{display:grid;grid-template-columns:26px minmax(96px,auto) 1fr 34px;align-items:center;gap:8px}
.libBar b{font:800 11px/1 'Barlow Semi Condensed',Barlow;letter-spacing:var(--ls-label);color:var(--ivory);white-space:nowrap}
.libBar i{height:11px;border-radius:var(--r-chip);display:block;min-width:8px}
.libBar em{font:900 12px/1 Barlow;color:var(--brass-hi);font-style:normal;text-align:right}
.libGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:9px}
.libCard{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px;padding:9px;border:1px solid rgba(201,162,75,.2);border-radius:var(--r-card);background:rgba(5,19,14,.72)}
.libCard img{width:64px;height:64px;object-fit:cover;border-radius:var(--r-card);background:rgba(255,255,255,.05);display:block}
.libCard h4{margin:0 0 4px;font:900 12px/1.15 'Barlow Semi Condensed',Barlow;letter-spacing:0;color:var(--ivory)}
.libMeta{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin-bottom:5px}
.libAcc{display:inline-flex;align-items:center;gap:4px;font:800 11px/1 Barlow;letter-spacing:var(--ls-label);color:var(--muted)}
.libGem{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 4px;border:1.2px solid rgba(245,239,221,.8);border-radius:var(--r-chip);font:900 11px/1 Barlow;font-style:normal;color:var(--ink)}
.libStars{font-size:var(--fs-12);letter-spacing:var(--ls-label);line-height:1;white-space:nowrap}
.libStars i{color:var(--slate);font-style:normal}
.libCard ul{margin:0;padding-left:15px}
.libCard li{font:600 12px/1.4 Barlow;color:var(--ivory);margin-bottom:2px}
@media(max-width:700px){
 .libGrid{grid-template-columns:1fr}
 .libBody{max-height:66vh}
 .libTabs button{flex:1 1 44%;font-size:var(--fs-11)}
 .libBar{grid-template-columns:24px 1fr 30px;row-gap:3px}
 .libBar i{grid-column:1/-1}
 .libTiers li{grid-template-columns:auto auto auto;row-gap:2px}
 .libTiers span{grid-column:1/-1}
}

/* FRONT-OF-HOUSE END */   /* the end-of-match VICTORY CEREMONY on the results box is table-side
   (PLAN §1.1 D9: ceremonies untouched). tokens-test.js does not scan between these markers. */
/* ══ VICTORY CEREMONY ON THE RESULTS SCREEN (v176) ═════════════════════════════════════════
   David's ruling 2026-08-05: "when a player wins a match, just a screen is shown plainly. I
   want it animated in, with glow rim sparkles or something victorious and the music plays."
   Built from the SAME parts as the Founder ceremony above — champagne rim, ray fan, burst ring
   (§4.5, one factory per visual concept) — so a win reads as part of the game and not as a
   second visual language bolted on. WINNER ONLY: a losing table keeps the plain box and stays
   silent, and that contrast is what makes the gold mean anything. The rim lives on the box's own
   box-shadow rather than a ::after overlay because #v2mbox scrolls, and an absolutely positioned
   overlay inside a scrolling box only covers its first screenful. */
.resultbox.victoryWin{border-color:rgba(255,229,145,.82)!important;animation:victoryBoxIn .58s cubic-bezier(.18,1.1,.32,1) both,victoryRim 2.8s .6s ease-in-out infinite}
.resultbox.victoryWin .resultHero{background:radial-gradient(120% 150% at 50% 0,rgba(255,225,127,.34),transparent 66%)}
.resultbox.victoryWin .resultTitle{color:#fff7d8;text-shadow:0 2px 0 #6b4e14,0 0 34px rgba(255,225,127,.72);animation:victoryTitleIn .5s .16s cubic-bezier(.2,1.5,.4,1) both}
.resultbox.victoryWin .resultKicker{color:#e8d9ac}
.victoryRays{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.victoryRays i{--angle:calc(var(--i)*30deg);position:absolute;left:50%;top:54%;width:5px;height:17px;margin:-8px 0 0 -2px;border-radius:8px;background:linear-gradient(#fff8d4,#d6a52d);box-shadow:0 0 12px #ffe78f;transform:rotate(var(--angle)) translateY(-40px);animation:victorySpark 1.7s calc(.14s + var(--i)*.045s) ease-out 2 both}
.victoryBurst{position:absolute;left:50%;top:54%;z-index:0;width:186px;height:186px;margin:-93px 0 0 -93px;border:2px solid rgba(255,229,145,.5);border-radius:50%;pointer-events:none;box-shadow:0 0 0 18px rgba(255,225,127,.06);animation:victoryBurst 1.3s .08s ease-out both}
@keyframes victoryBoxIn{from{opacity:0;transform:scale(.86) translateY(18px)}to{opacity:1;transform:none}}
@keyframes victoryTitleIn{from{opacity:0;transform:scale(1.55)}to{opacity:1;transform:none}}
@keyframes victoryRim{0%,100%{box-shadow:0 30px 80px rgba(0,0,0,.78),inset 0 0 0 1px rgba(255,240,190,.34),0 0 26px rgba(232,200,122,.22)}50%{box-shadow:0 30px 80px rgba(0,0,0,.78),inset 0 0 0 1px rgba(255,247,216,.8),0 0 60px rgba(232,200,122,.5)}}
@keyframes victorySpark{0%{opacity:0;transform:rotate(var(--angle)) translateY(-6px) scaleY(.4)}30%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateY(-104px) scaleY(1.6)}}
@keyframes victoryBurst{from{opacity:.9;transform:scale(.14)}to{opacity:0;transform:scale(2.7)}}
@media(max-width:700px){.victoryBurst{width:150px;height:150px;margin:-75px 0 0 -75px}}
@media(prefers-reduced-motion:reduce){.resultbox.victoryWin,.resultbox.victoryWin *{animation:none!important}.victoryRays,.victoryBurst{display:none}}
/* FRONT-OF-HOUSE START */

/* v180 — Amara hosts the tutorial, SPEAKING the coach card (David 2026-08-06): her portrait
   peeks over the card's top-left like a chat avatar, a small notch points from the card to her
   chin (speech-bubble read), and she pulses gently while a step is showing. All of it is
   absolutely positioned INSET over the card's own edge — it can never disturb the coach grid,
   cover the EXIT button (top-right), the leader line, or any board target (§7b geometry laws).
   Motion honours reduced-motion via the media query, the CSS twin of the RMQ law (§7b.11). */
#coachHost{display:none;position:absolute;left:14px;top:-30px;width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--brass-hi);background:var(--ink-2);box-shadow:0 4px 14px rgba(0,0,0,.55);z-index:2;pointer-events:none}
body.tutorial #coachHost{display:block} /* Amara belongs to the tutorial only; the shared coach card stays plain elsewhere */
body.tutorial #v3coach.on::before{content:'';position:absolute;left:28px;top:-5px;width:11px;height:11px;transform:rotate(45deg);background:var(--ink-2);border-left:1px solid rgba(232,200,122,.72);border-top:1px solid rgba(232,200,122,.72);z-index:1;pointer-events:none}
body.tutorial .coachStep small{padding-left:48px} /* the kicker (AMARA · CHAPTER…) steps aside for her chin; titles and text keep the full width */
@media (prefers-reduced-motion:no-preference){body.tutorial #v3coach.on #coachHost{animation:coachHostSpeak 2.6s ease-in-out infinite}}
@keyframes coachHostSpeak{0%,100%{transform:scale(1);box-shadow:0 4px 14px rgba(0,0,0,.55)}50%{transform:scale(1.06);box-shadow:0 4px 18px rgba(232,200,122,.35)}}
@media(max-width:700px){#coachHost{width:34px;height:34px;left:11px;top:-20px;border-width:1.5px}body.tutorial #v3coach.on::before{left:22px;top:-4px;width:9px;height:9px}body.tutorial .coachStep small{padding-left:36px}}

/* v193: the TABLE NAME card — rename made easy from MEMBER PROFILE (signed in or guest).
   Reuses the accountCard skin; the friendAdd grid supplies the input + button pair. */
/* v198: the equip flourish — one champagne pulse on the card the player just chose to wear.
   Deliberately small: unlock moments get the full ceremony, wardrobe taps get a nod. */
.masteryReward article.justEquipped{animation:justEquipped .9s ease-out}
@keyframes justEquipped{0%{box-shadow:0 0 0 0 rgba(232,200,122,.75)}60%{box-shadow:0 0 0 9px rgba(232,200,122,0)}100%{box-shadow:0 0 0 0 rgba(232,200,122,0)}}
@media (prefers-reduced-motion:reduce){.masteryReward article.justEquipped{animation:none;outline:2px solid rgba(232,200,122,.75);outline-offset:2px}}
.socialAvatar{position:relative;display:block;width:48px;height:48px;border-radius:50%;padding:2px;border:2px solid rgba(232,200,122,.45);background:var(--ink-2);box-sizing:border-box}.socialAvatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.socialAvatar i{position:absolute;right:-5px;bottom:-4px;display:grid;place-items:center;min-width:20px;height:20px;padding:0 3px;box-sizing:border-box;border:1px solid var(--brass-hi);border-radius:var(--r-card);background:var(--ink-2);color:var(--ivory);font:800 11px Barlow;font-style:normal}.socialAvatar.frameSignature{border-color:var(--brass-hi)}.socialAvatar.framePrestige{border-color:var(--jade-bright);box-shadow:0 0 0 2px rgba(47,196,124,.24)}.socialAvatar.frameMaster{border-color:var(--market);box-shadow:0 0 0 2px var(--brass-hi),0 0 14px rgba(142,77,201,.34)}/* Build 294 (David): a Founder friend wears the SAME permanent portrait chrome as the lobby —
   the gold engraved ring plus the FOUNDER pill — not a bare corner diamond. Declared after the
   frame classes so permanent Founder chrome wins the ring when both are equipped. */.socialAvatar.founder{border-color:var(--brass-hi);box-shadow:0 0 0 2px var(--brass-deep),0 0 12px rgba(232,200,122,.4)}.socialAvatar.founder::before{content:'FOUNDER';position:absolute;left:50%;top:-8px;transform:translateX(-50%);z-index:2;display:grid;place-items:center;height:12px;padding:0 6px;box-sizing:border-box;border:1px solid var(--ivory);border-radius:var(--r-pill);background:var(--brass-deep);color:var(--ivory);font:900 11px/1 Barlow;letter-spacing:var(--ls-label);white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.55)}.friendPresence::before{content:'●';margin-right:5px}.friendPresence.online{color:var(--jade-bright)}.friendPresence.offline{color:var(--muted)}.friendActions{display:flex;justify-content:flex-end;gap:7px}.friendActions button{min-width:0;padding-left:12px;padding-right:12px}.requestSent{justify-self:end;align-self:center;color:var(--jade-bright);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);white-space:nowrap}/* v290: honest ADD FRIEND state on Recent Players */.friendInvites{margin-bottom:12px}.friendInvites h4{margin:0 0 6px;color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.friendInvites article{border-color:rgba(47,196,124,.48);background:rgba(47,196,124,.06)}
@media(max-width:700px){.friendActions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.friendActions button:only-child{grid-column:1/-1}}

/* BUILD 252 — ONE COMPACT MATCH TRACKER. The lifetime summary is the only top-level tracker;
   mode splits and receipt rows live inside the same collapsed-by-default disclosure. */
.matchHistory{margin-top:18px;overflow:hidden;border:1px solid rgba(232,200,122,.38);border-radius:var(--r-card);background:radial-gradient(circle at 100% 0,rgba(232,200,122,.12),transparent 38%),linear-gradient(180deg,rgba(10,33,27,.96),rgba(5,19,14,.98));box-shadow:0 12px 30px rgba(0,0,0,.25)}
.matchHistory>summary{display:block;min-height:44px;box-sizing:border-box;padding:12px 16px 14px;cursor:pointer;list-style:none}.matchHistory>summary::-webkit-details-marker{display:none}.matchHistory>summary:focus-visible{outline:2px solid var(--brass-hi);outline-offset:-3px}.matchHistory[open]>summary{border-bottom:1px solid rgba(232,200,122,.2)}
.matchTrackingTop{display:flex;align-items:center;justify-content:space-between;gap:12px}.matchTrackingTop span,.matchTrackingTop b{display:block}.matchTrackingTop span{color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.matchTrackingTop b{margin-top:2px;color:var(--ivory);font:400 20px/1 'Bebas Neue';letter-spacing:var(--ls-label)}.matchTrackingTop em{display:flex;align-items:center;gap:7px;color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);font-style:normal}.matchTrackingTop em::after{content:'⌄';color:var(--brass-hi);font:800 20px/1 Barlow;transition:transform .18s ease}.matchHistory[open] .matchTrackingTop em::after{transform:rotate(180deg)}
.matchHistory .profileStats{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:10px}.matchHistory .statCard{min-width:0;padding:0 9px;border-left:1px solid rgba(232,200,122,.16)}.matchHistory .statCard:first-child{padding-left:0;border-left:0}.matchHistory .statCard:last-child{padding-right:0}.matchHistory .statCard strong{font-size:var(--fs-24);line-height:1}.matchHistory .statCard span{display:block;margin-top:2px;font-size:var(--fs-11);line-height:1.15;letter-spacing:var(--ls-label)}
.matchHistoryBody>header{padding:14px 18px 12px;border-top:1px solid rgba(232,200,122,.14);border-bottom:1px solid rgba(232,200,122,.2)}
.matchHistoryBody>header span{display:block;color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.matchHistoryBody>header h3{margin:3px 0 0;color:var(--ivory);font:400 24px/1 'Bebas Neue';letter-spacing:0}.matchHistoryBody>header p{margin:4px 0 0;color:var(--muted);font:600 12px/1.35 Barlow}.matchBreakdown{padding:12px 18px}.matchBreakdown>span{display:block;margin-bottom:7px;color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.matchBreakdown p{margin:4px 0 0;font-size:var(--fs-11);line-height:1.35}
.matchHistoryRows{padding:0 18px}.matchHistoryRow{display:grid;grid-template-columns:48px minmax(0,1fr) minmax(130px,auto);align-items:center;gap:13px;min-height:72px;padding:11px 0;border-bottom:1px solid rgba(232,200,122,.13)}.matchHistoryRow:last-child{border-bottom:0}
.matchOutcome{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(140,166,154,.42);border-radius:50%;background:var(--ink-2);color:var(--muted);font:400 20px 'Bebas Neue';letter-spacing:0}.matchOutcome.win{border-color:var(--brass-hi);background:radial-gradient(circle,var(--brass-deep),var(--brass-deep));color:var(--ivory);box-shadow:0 0 0 3px rgba(232,200,122,.09)}
.matchHistoryMain b,.matchHistoryMain small,.matchHistoryFinish strong,.matchHistoryFinish small{display:block}.matchHistoryMain b{color:var(--ivory);font:800 14px Barlow;letter-spacing:0}.matchHistoryMain small{margin-top:4px;color:var(--muted);font:700 11px/1.3 Barlow;letter-spacing:var(--ls-label)}.matchHistoryFinish{text-align:right}.matchHistoryFinish strong{color:var(--brass-hi);font:400 24px/1 'Bebas Neue';letter-spacing:0}.matchHistoryFinish small{margin-top:4px;color:var(--muted);font:800 11px/1.25 Barlow;letter-spacing:var(--ls-label)}
.matchHistoryMore{display:block;width:calc(100% - 36px);margin:12px 18px 16px}.matchHistoryNote{margin:0;padding:12px 18px 0;color:var(--muted);font:650 12px/1.4 Barlow}.matchHistoryEmpty{padding:26px 18px;text-align:center}.matchHistoryEmpty b{color:var(--brass-hi);font:400 20px 'Bebas Neue';letter-spacing:0}.matchHistoryEmpty p{max-width:580px;margin:6px auto 0;color:var(--muted);font:600 14px/1.45 Barlow}.matchHistoryEmpty button{margin-top:13px}
.matchHistoryLoading{display:grid;grid-template-columns:repeat(3,8px) minmax(0,1fr);align-items:center;gap:6px;padding:28px 18px;color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-label)}.matchHistoryLoading i{width:7px;height:7px;border-radius:50%;background:var(--brass-hi);animation:historyPulse 1s ease-in-out infinite}.matchHistoryLoading i:nth-child(2){animation-delay:.14s}.matchHistoryLoading i:nth-child(3){animation-delay:.28s}@keyframes historyPulse{50%{opacity:.25;transform:translateY(-3px)}}
@media(max-width:700px){.matchHistory>summary{padding:11px 12px 13px}.matchTrackingTop b{font-size:var(--fs-20)}.matchTrackingTop em{font-size:var(--fs-11)}.matchHistory .statCard{padding:0 5px}.matchHistory .statCard strong{font-size:var(--fs-24)}.matchHistory .statCard span{font-size:var(--fs-11);letter-spacing:0}.matchBreakdown{padding:11px 13px}.matchBreakdown p{font-size:var(--fs-12)}.matchHistoryBody>header{padding:12px 13px 11px}.matchHistoryBody>header p{font-size:var(--fs-12)}.matchHistoryRows{padding:0 13px}.matchHistoryRow{grid-template-columns:44px minmax(0,1fr);gap:10px;min-height:82px}.matchOutcome{grid-row:1/3;width:40px;height:40px}.matchHistoryFinish{grid-column:2;display:flex;align-items:baseline;justify-content:space-between;gap:10px;text-align:left}.matchHistoryFinish strong{font-size:var(--fs-20)}.matchHistoryFinish small{text-align:right}.matchHistoryMain b{font-size:var(--fs-14)}.matchHistoryMain small{font-size:var(--fs-11)}.matchHistoryMore{width:calc(100% - 26px);margin-left:13px;margin-right:13px}.matchHistoryNote{padding-left:13px;padding-right:13px;font-size:var(--fs-14)}.matchHistoryEmpty p{font-size:var(--fs-16)}.matchHistoryLoading{padding-left:13px;padding-right:13px}}
@media(prefers-reduced-motion:reduce){.matchHistoryLoading i{animation:none}.matchTrackingTop em::after{transition:none}}

/* v208 SIGNATURE MOVE row: stacked single-column layout so nothing clips; copy wraps freely */
.masteryReward article.signatureMoveRow{grid-template-columns:minmax(0,1fr);align-items:start;min-height:0}
.masteryReward article.signatureMoveRow b{white-space:normal;line-height:1.35}
.masteryReward article.signatureMoveRow small{white-space:normal;line-height:1.5;grid-column:1}
.masteryReward article.signatureMoveRow p{margin:2px 0 0;font:600 12px Barlow;color:var(--muted);line-height:1.45}

/* BUILD 275 — real table invitations and two-sided friendship acceptance. */
.friendInviteModal{width:min(520px,calc(100vw - 24px))}.tableInviteDialog{text-align:center}.tableInviteFriend{display:flex;align-items:center;justify-content:center;gap:14px;margin:16px 0}.tableInviteFriend img{width:76px;height:76px;border:2px solid var(--brass-hi);border-radius:50%;object-fit:cover;box-shadow:0 0 0 5px rgba(232,200,122,.1)}.tableInviteFriend h3{margin:0;color:var(--ivory);font:400 32px 'Bebas Neue';letter-spacing:0}.tableInviteFriend p{margin:3px 0;color:var(--muted);font:650 14px Barlow}.tableInviteRoom{padding:13px;border:1px solid rgba(232,200,122,.34);border-radius:var(--r-card);background:rgba(5,19,14,.8)}.tableInviteRoom span,.tableInviteRoom b,.tableInviteRoom small{display:block}.tableInviteRoom span{color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.tableInviteRoom b{margin:3px 0;color:var(--brass-hi);font:400 32px 'Bebas Neue';letter-spacing:var(--ls-eyebrow)}.tableInviteRoom small{color:var(--ivory);font:800 11px Barlow;letter-spacing:var(--ls-label)}.tableInviteActions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:13px}.tableInviteActions .v2opt{min-height:48px}.friendInvites.outgoing article{border-color:rgba(232,200,122,.32);background:rgba(232,200,122,.04)}
/* FRONT-OF-HOUSE END */   /* ceremony block below is out of Build 401A's scope
   (ARCH-MAP §2(d): .founderCeremony .friendshipCeremony .houseCeremony .climbProgressCeremony
   .seatCeremony). Its literals, sizes and radii are left exactly as Build 400 wrote them and
   tokens-test.js does not scan between these two markers. */
.friendshipCeremony{position:fixed;z-index:1000;inset:0;display:grid;place-content:center;justify-items:center;pointer-events:none;background:radial-gradient(circle,rgba(18,67,48,.88),rgba(2,13,9,.9));opacity:0;transition:opacity .24s ease}.friendshipCeremony.on{opacity:1}.friendshipRing{position:absolute;left:50%;top:50%;width:270px;height:270px;border:3px solid #e8c87a;border-radius:50%;transform:translate(-50%,-50%) scale(.55);box-shadow:0 0 0 18px rgba(85,214,160,.09),0 0 55px rgba(232,200,122,.28);animation:friendRing .8s cubic-bezier(.16,.8,.2,1) forwards}.friendshipPair{position:relative;z-index:1;display:flex;align-items:center;gap:18px}.friendshipPair>i{color:#55d6a0;font-size:24px;font-style:normal;filter:drop-shadow(0 0 8px rgba(85,214,160,.8))}.friendChip{display:grid;justify-items:center;gap:7px;transform:translateX(var(--friend-shift));animation:friendMeet .8s cubic-bezier(.16,.8,.2,1) forwards}.friendChip.mine{--friend-shift:-95px}.friendChip.theirs{--friend-shift:95px}.friendChip img{width:92px;height:92px;border:3px solid #e8c87a;border-radius:50%;object-fit:cover;background:#071b14}.friendChip b{max-width:125px;color:#f8f1dd;font:800 14px Barlow;text-transform:uppercase}.friendshipCeremony>strong{position:relative;z-index:1;margin-top:24px;color:#f8e4a7;font:400 clamp(38px,8vw,64px)/.9 'Bebas Neue';letter-spacing:2px}.friendshipCeremony>small{position:relative;z-index:1;margin-top:9px;color:#8ce6b5;font:800 11px Barlow;letter-spacing:2px}@keyframes friendMeet{to{transform:translateX(0)}}@keyframes friendRing{to{transform:translate(-50%,-50%) scale(1)}}
/* FRONT-OF-HOUSE START */
@media(max-width:520px){.tableInviteActions{grid-template-columns:1fr}.tableInviteFriend img{width:66px;height:66px}.friendChip img{width:74px;height:74px}.friendshipPair{gap:11px}.friendshipRing{width:230px;height:230px}}.friendshipCeremony.reduced,.friendshipCeremony.reduced *{animation:none;transition:none}.friendshipCeremony.reduced.on{opacity:1}.friendshipCeremony.reduced .friendshipRing{transform:translate(-50%,-50%) scale(1)}.friendshipCeremony.reduced .friendChip{transform:none}@media(prefers-reduced-motion:reduce){.friendshipCeremony,.friendshipCeremony *{animation:none!important;transition:none!important}.friendshipCeremony.on{opacity:1}.friendshipRing{transform:translate(-50%,-50%) scale(1)}.friendChip{transform:none}}

/* Build 321 (David 2026-08-21, desktop screenshot of the FINAL BELL screen: the results box had
   no REMATCH / LEAVE controls visible at all). The actions live INSIDE .resultBody, and that is
   the element that scrolls (max-height:58vh) — so on a laptop-height window the standings, the
   reward block and the House invite filled the whole scrollport and pushed every button below
   the fold, behind a thin scrollbar most players never notice. The match cannot be left from a
   control you cannot see, so the action block is now DOCKED to the bottom of its own scrollport:
   the list still scrolls behind it, the buttons are always on screen, and nothing about the
   markup, the button order or the mobile layout changes. Declared LAST in this sheet so it wins
   over the phone block's own !important padding: a scroll container paints scrolled content
   through its bottom padding, so the body gives that padding to the docked block instead of
   leaving a strip of half-row under the buttons. */
.resultBody{padding-bottom:0!important}
/* Build 323 (found by running the visual gate rather than assuming it): Build 321's docking is
   correct but it was solved against the VIEWPORT twice over. `.resultbox` caps at 92vh and
   `.resultBody` caps at min(58vh,540px) INDEPENDENTLY, so on any laptop height where the hero
   (369px at desktop: cut-in, kicker, title, sub) plus 58vh exceeds 92vh, the body is simply
   taller than the box that holds it - and `.resultbox{overflow:hidden}` CLIPS the difference
   instead of scrolling it. The docked actions were then half outside the box and their centres
   unhittable: measured at 1280x800 the body ran 369->847 inside a box that ends at 769, with the
   window only 800 tall. `tests/victory.spec.js` catches it at 1280x800, 1366x768 and 1440x900 -
   exactly David's own Build 321 report ('the FINAL BELL box had no visible control at all'),
   which the docking fixed for the ordinary case and not for a long standings list.
   The box becomes ONE column that owns its own height: the hero takes what it needs, the body
   takes what is LEFT and scrolls inside it, and the sticky actions dock to the bottom of a
   scrollport that is now guaranteed to be inside the box, and therefore inside the window. The
   two viewport caps stay as upper bounds; they are simply no longer the only thing deciding. */
.resultbox{display:flex;flex-direction:column}
.resultbox .resultHero{flex:0 0 auto}
.resultBody{flex:0 1 auto;min-height:0}
.resultActions{position:sticky;bottom:0;z-index:2;padding:11px 0 14px;background:linear-gradient(180deg,rgba(6,25,19,0),#061913 38%,#061913)}
.resultActions::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(232,200,122,.34),transparent)}

/* ═══ Build 322 NOTIFICATIONS (David, 22 Aug 2026): the bell, its number, and the drop-down
   banner. The menu bell (#metaAlerts) exists only when there is something to read, so the quiet
   header stays exactly the header the snapshots know; the in-game bell (#v2alertB) exists only
   while something is UNREAD, sitting beside SETTINGS in the #v2badge cluster. The banner is the
   chosen NON-INTERRUPTING treatment for a live invitation or friend request during a match —
   an iPhone-style drop from the top edge, 44px touch targets, one at a time, self-dismissing.
   It is a SOCIAL/SYSTEM surface: table events stay on the Floor Wire alone. ═══ */
.metaHeadRight{display:flex;align-items:center;gap:10px;pointer-events:none}
#metaAlerts{position:relative;min-width:52px;min-height:52px;display:grid;place-items:center;padding:0 12px}
#metaAlerts svg{width:20px;height:20px;fill:var(--brass-hi)}
#metaAlerts.hasNew svg{fill:var(--brass-hi);filter:drop-shadow(0 0 6px rgba(232,200,122,.55))}
#metaAlertCount,#v2alertN{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 4px;display:grid;place-items:center;border:1px solid var(--brass-deep);border-radius:var(--r-card);background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink-2);font:800 11px Barlow;font-style:normal;box-shadow:0 2px 6px rgba(0,0,0,.5)}
@keyframes bellNudge{0%,100%{transform:rotate(0)}20%{transform:rotate(-13deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
#metaAlerts.hasNew svg,#v2alertB:not([hidden]) svg{animation:bellNudge 2.6s ease-in-out 2}
@media(prefers-reduced-motion:reduce){#metaAlerts.hasNew svg,#v2alertB:not([hidden]) svg{animation:none}}
#v2badge{display:flex;align-items:center;justify-content:flex-end;gap:8px}
#v2alertB{position:relative;width:34px;min-width:34px;height:36px;display:flex;align-items:center;justify-content:center;padding:7px;border:1px solid rgba(201,162,75,.42);border-radius:var(--r-chip);background:rgba(5,19,14,.9);color:var(--brass,var(--brass));cursor:pointer;box-shadow:0 5px 16px rgba(0,0,0,.3)}
#v2alertB svg{width:16px;height:16px;fill:currentColor}
body.playing #v2alertB{width:34px}
#notifyBanner{position:fixed;z-index:56;top:max(10px,env(safe-area-inset-top));left:50%;width:min(430px,94vw);display:flex;align-items:center;gap:2px;border:1px solid rgba(232,200,122,.55);border-radius:var(--r-card);background:linear-gradient(180deg,rgba(18,53,40,.97),rgba(5,19,14,.97));box-shadow:0 16px 40px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08);transform:translateX(-50%) translateY(calc(-100% - 18px));transition:transform .28s cubic-bezier(.2,.85,.3,1.08)}
#notifyBanner.on{transform:translateX(-50%) translateY(0)}
#notifyBanner.leaving{transform:translateX(-50%) translateY(calc(-100% - 18px))}
@media(prefers-reduced-motion:reduce){#notifyBanner{transition:none}}
#notifyBanner .nbBody{flex:1;min-width:0;min-height:48px;display:flex;align-items:center;gap:11px;padding:8px 4px 8px 11px;background:none;border:0;color:var(--ivory);cursor:pointer;text-align:left}
#notifyBanner .nbBody img{width:36px;height:36px;border-radius:50%;border:1.5px solid rgba(232,200,122,.6);object-fit:cover;flex:none}
#notifyBanner .nbGlyph{width:36px;height:36px;display:grid;place-items:center;border:1.5px solid rgba(232,200,122,.6);border-radius:50%;color:var(--brass-hi);font-size:var(--fs-14);flex:none}
#notifyBanner .nbCopy{flex:1;min-width:0;display:block}
#notifyBanner .nbCopy b{display:block;font:800 12px Barlow;letter-spacing:0;color:var(--ivory);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notifyBanner .nbCopy small{display:block;margin-top:1px;font:650 11px Barlow;letter-spacing:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#notifyBanner .nbBody em{flex:none;padding:6px 11px;border:1px solid var(--brass-deep);border-radius:var(--r-card);background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink-2);font:800 11px Barlow;font-style:normal;letter-spacing:var(--ls-eyebrow)}
#notifyBanner .nbClose{flex:none;min-width:44px;min-height:48px;background:none;border:0;color:var(--muted);font:400 20px/1 Barlow;cursor:pointer}
.tableInviteLeaveNote{margin:10px 2px 0;color:var(--brass-hi);font:700 12px Barlow;letter-spacing:0;text-align:center}
.alertCenterModal{width:min(470px,calc(100vw - 24px))}
.alertCenter .dialogKicker{display:block;text-align:center}
.alertList{max-height:min(52vh,430px);overflow-y:auto;margin-top:6px}
.alertRow{display:flex;align-items:center;gap:11px;padding:10px 4px;border-bottom:1px solid rgba(232,200,122,.14)}
.alertRow:last-child{border-bottom:0}
.alertAv{flex:none;position:relative;width:40px;height:40px}
.alertAv img{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(232,200,122,.5);object-fit:cover}
.alertGlyph{width:40px;height:40px;display:grid;place-items:center;border:1.5px solid rgba(232,200,122,.5);border-radius:50%;color:var(--brass-hi);font-size:var(--fs-14)}
.alertCopy{flex:1;min-width:0}
.alertCopy b{display:block;font:800 12px Barlow;letter-spacing:0;color:var(--ivory)}
.alertRow.new .alertCopy b{color:var(--ivory)}
.alertRow.new .alertAv::after{content:'';position:absolute;right:-2px;top:-2px;width:9px;height:9px;border-radius:50%;background:var(--brass-hi);box-shadow:0 0 7px rgba(232,200,122,.8)}
.alertCopy small{display:block;margin-top:2px;font:650 11px Barlow;letter-spacing:0;color:var(--muted)}
.alertRow .metaPrimary,.alertRow .metaSecondary{min-height:44px;padding:8px 13px;font-size:var(--fs-12);flex:none}
.alertPair{display:flex;gap:6px;flex:none}
.alertEmpty{margin:14px 2px;color:var(--muted);font:600 12px/1.5 Barlow}
.alertFoot{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.alertFoot .v2opt{margin:0;text-align:center}
.alertFoot .v2opt:only-child{grid-column:1/-1}
@media (max-width:700px){
 #metaAlerts{min-width:46px;min-height:46px;padding:0 9px}
 .alertRow .metaPrimary,.alertRow .metaSecondary{padding:8px 10px;font-size:var(--fs-11)}
}

/* Build 323 (found by David's own REBASELINE run, and by the same three responsive.spec.js
   failures in the container that I had wrongly filed as snapshot noise). Build 322 shipped both
   notification bells with the `hidden` ATTRIBUTE and recorded that this kept quiet screens
   byte-identical to the snapshot baselines. It did not: `#metaAlerts{display:grid}` and
   `#v2alertB{display:flex}` are ID selectors (1,0,0) and beat the sheet's own `[hidden]{display:none}`
   (0,1,0), so `hidden` did nothing at all - both bells were laid out on every screen, each
   rendering its empty '0' count, which auditLayout reports as clipped readable copy on title,
   profile, house and mastery at all three sizes. `hidden` is now authoritative for these two by
   SPECIFICITY (1,1,0), not by !important and not by source order, so neither the rules above nor
   any later override can silently un-hide them again. */
#metaAlerts[hidden],#v2alertB[hidden]{display:none}

/* Build 333: keep the new returning-account choice as compact as the original single action,
   and make the identity half of every social row read as one intentional, keyboard-focusable
   profile target without competing visually with ACCEPT / INVITE / REMOVE. */
.accountChoiceActions{display:grid;grid-template-columns:repeat(2,minmax(142px,auto));gap:8px}
.accountChoiceActions button{min-width:0;white-space:nowrap}
.socialIdentityButton{grid-column:1/3;display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;min-width:0;padding:0;border:0;border-radius:var(--r-card);background:transparent;color:inherit;text-align:left;cursor:pointer}
.socialIdentityButton>span:last-child{min-width:0}
.socialIdentityButton:hover b{color:var(--ivory)}
.socialIdentityButton:focus-visible{outline:2px solid var(--brass-hi);outline-offset:4px}
.socialProfileModal{width:min(470px,calc(100vw - 24px))}
.socialProfileDialog .dialogKicker{display:block;text-align:center}
.socialProfileHero{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:13px;margin:10px 0 14px}
.socialProfileHero .socialAvatar{width:58px;height:58px}
.socialProfileHero h3{margin:0;color:var(--ivory);font:400 24px 'Bebas Neue';letter-spacing:0}
.socialProfileHero p{margin:2px 0 0;color:var(--muted);font:700 12px/1.4 Barlow;letter-spacing:0}
.publicFounder{display:inline-block;margin-top:5px;color:var(--brass-hi);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.socialProfileStats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.socialProfileStats article{padding:11px;border:1px solid rgba(232,200,122,.2);border-radius:var(--r-card);background:rgba(10,33,27,.52)}
.socialProfileStats b,.socialProfileStats small{display:block}
.socialProfileStats b{color:var(--ivory);font:400 20px 'Bebas Neue';letter-spacing:0}
.socialProfileStats small{margin-top:2px;color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.socialProfileDialog dl{margin:12px 0 0}
.socialProfileDialog dl>div{display:flex;justify-content:space-between;gap:16px;padding:8px 2px;border-top:1px solid rgba(232,200,122,.13)}
.socialProfileDialog dt{color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.socialProfileDialog dd{margin:0;color:var(--ivory);font:800 11px Barlow;text-align:right}
.socialProfileNote{margin:10px 2px 12px;color:var(--muted);font:600 11px/1.45 Barlow}
@media(max-width:700px){.accountChoiceActions{grid-template-columns:1fr 1fr;width:100%}.accountChoiceActions button{width:100%;font-size:var(--fs-12);padding-left:8px;padding-right:8px}.socialIdentityButton{grid-template-columns:44px minmax(0,1fr)}.socialList article>.socialIdentityButton{grid-column:1/-1}.socialProfileHero .socialAvatar{width:54px;height:54px}}

/* ── Build 348 FRIEND ROW SWIPE + OWN PUBLIC CARD (David 2026-08-29) ─────────────────────────
   Phones swipe a friend row left, iPhone style, to reveal REMOVE — the full-width mobile REMOVE
   button is retired (his screenshot). Desktop mice keep the compact inline REMOVE (his choice).
   The VIEW PUBLIC CARD chip this block once carried is RETIRED by Build 351 — that information
   is the profile page itself now, so there is no chip and no popup to drift from it. */
.socialList article.friendRow{display:block;position:relative;isolation:isolate;overflow:hidden;padding:0;border:0;border-radius:var(--r-card)}
.friendRowSlide{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px;border:1px solid rgba(232,200,122,.2);border-radius:var(--r-card);position:relative;z-index:1;transition:transform .22s ease;touch-action:pan-y;will-change:transform}
.friendRow.swiping .friendRowSlide{transition:none}
.friendRow.open .friendRowSlide{transform:translateX(-92px)}
.socialList article.friendRow>.friendRowDelete{position:absolute;z-index:0;top:0;bottom:0;right:0;width:84px;display:grid;place-items:center;border:1px solid rgba(226,61,61,.65);border-radius:var(--r-card);background:linear-gradient(160deg,var(--crash),var(--crash));color:var(--ivory);font:900 12px Barlow;letter-spacing:var(--ls-label);opacity:0;pointer-events:none;transition:opacity .18s ease;cursor:pointer}
.socialList article.friendRow.open>.friendRowDelete{opacity:1;pointer-events:auto}
.socialList article.friendRow.swiping>.friendRowDelete{opacity:1;pointer-events:none}/* Build 367: match/exceed the base selector's specificity; the old weaker rule left REMOVE at opacity 0 even while the row visibly opened. */
@media(min-width:701px){.socialList article.friendRow>.friendRowDelete{display:none}}
@media(max-width:700px){.friendRemoveBtn{display:none}.friendActions.removeOnly{display:none}.friendRowSlide{grid-template-columns:44px minmax(0,1fr)}.friendRowSlide>.socialIdentityButton{grid-column:1/-1}.friendRowSlide .friendActions{grid-template-columns:1fr}}


/* ══ Build 351 — THE NAME IN THE HERO, AND THE MEMBER CARD IN THE PAGE ═══════════════════════════
   David 2026-08-30: "clear the space of the name to edit, just use the top space where the character
   picture is where the name already is, and put a edit button there ... Then use the newly reclaimed
   space to help players flaunt their achievements."
   Two rules hold this layout together on every screen. (1) The EDIT control sits on the NAME's own
   baseline and never wraps under it: the row is a two-column grid whose second track is sized to the
   button, so a 14-character name simply truncates with an ellipsis rather than pushing the control
   off. (2) The honours rail is an auto-FITTING grid, never a fixed column count — it is two-up on a
   360px phone and as many as fit on a desktop, so a future achievement is one array entry in
   `profileHonours` and needs no CSS at all. Both grids inherit the page's own gold-on-green skin. */
.profileNameRow{display:grid;grid-template-columns:minmax(0,auto) auto;justify-content:start;align-items:center;gap:12px}
.profileNameRow h3{min-width:0;margin:0;font:400 32px/1 'Bebas Neue'}
.profileNameRow h3 strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:inherit;text-transform:uppercase}/* uppercase is a LOOK, not the stored name - assistive tech and the rename gate both read what the player typed */
.profileNameEditBtn i{font-style:normal;font-size:var(--fs-12);line-height:1}
.profileNameEditBtn{display:inline-flex;align-items:center;gap:6px;padding:0 14px;min-height:38px;border:1px solid rgba(232,200,122,.45);border-radius:var(--r-pill);background:rgba(232,200,122,.08);color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-label);cursor:pointer}
.profileNameEditBtn:hover{background:rgba(232,200,122,.16);color:var(--ivory)}
.profileNameEditBtn:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.profileNameRow.editing{display:block}
.profileNameEdit{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px}
.profileNameEdit input{min-width:0;min-height:48px;box-sizing:border-box;padding:10px 13px;border:1px solid rgba(232,200,122,.5);border-radius:var(--r-card);background:var(--ink);color:var(--ivory);font:800 20px Barlow;text-transform:none}
.profileNameEdit button{min-width:96px}
.profileNameHint{display:block;margin-top:7px;color:var(--muted);font:600 12px Barlow}

.memberCard{margin-top:18px;padding:15px 16px 14px;border:1px solid rgba(232,200,122,.42);border-radius:var(--r-card);background:radial-gradient(circle at 100% 0,rgba(232,200,122,.13),transparent 42%),linear-gradient(180deg,rgba(10,33,27,.96),rgba(5,19,14,.98));box-shadow:0 12px 30px rgba(0,0,0,.25)}
.memberCard>header span{display:block;color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.memberCard>header b{display:block;margin-top:3px;font:400 20px 'Bebas Neue';letter-spacing:0}
.honourRail{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}/* FLEX, not a fixed grid: every chip grows to share its row, so a rail of two, five or nine honours always fills the width and a future honour needs no CSS - only a new entry in profileHonours(). */
/* a chip GROWS to share its row but never past maxWidth, so a single wrapped honour reads as a card rather than a full-width bar */
.honour{flex:1 1 190px;max-width:300px;min-width:0;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:10px;min-height:56px;padding:8px 11px;box-sizing:border-box;border:1px solid rgba(232,200,122,.28);border-radius:var(--r-card);background:linear-gradient(140deg,rgba(232,200,122,.11),rgba(5,19,14,.82))}
.honour>i,.honour>img{display:grid;place-items:center;width:34px;height:34px;box-sizing:border-box;border:1px solid rgba(232,200,122,.5);border-radius:50%;background:var(--ink-2);color:var(--brass-hi);font:400 16px/1 'Bebas Neue';font-style:normal}
.honour>img{object-fit:contain;padding:4px}
.honour b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ivory);font:400 20px/1.05 'Bebas Neue';letter-spacing:0}
.honour small{display:block;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-label)}
.honour.founderHonour{border-color:rgba(232,200,122,.62);background:linear-gradient(140deg,rgba(232,200,122,.2),rgba(5,19,14,.82));box-shadow:0 0 14px rgba(232,200,122,.14)}
.honour.founderHonour>i{border-color:var(--brass-hi);color:var(--ivory);background:var(--brass-deep)}
.honourAction{position:relative;color:inherit;text-align:left;font-family:inherit;cursor:pointer}.honourAction>em{position:absolute;right:10px;top:50%;margin-top:-10px;color:var(--brass-hi);font:400 20px/20px 'Bebas Neue';font-style:normal}.honourAction>div{min-width:0;padding-right:12px}.honourAction:hover,.honourAction:focus-visible{border-color:rgba(232,200,122,.78);outline:none;box-shadow:0 0 0 2px rgba(232,200,122,.16),0 8px 20px rgba(0,0,0,.22)}
.memberStatGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(146px,1fr));gap:0;margin-top:14px;padding-top:13px;border-top:1px solid rgba(232,200,122,.16)}
.memberStat{min-width:0;padding:0 11px;border-left:1px solid rgba(232,200,122,.14);text-align:center}
.memberStat:first-child{padding-left:0;border-left:0}
.memberStat strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 32px/1 'Bebas Neue';color:var(--brass-hi)}
.memberStat span{display:block;margin-top:3px;color:var(--ivory);font:800 11px Barlow;letter-spacing:var(--ls-label)}
.memberStat small{display:block;margin-top:2px;color:var(--muted);font:600 11px Barlow;letter-spacing:0}
.memberCardNote{margin:12px 0 0;color:var(--muted);font:600 12px/1.4 Barlow}
@media(max-width:700px){
 .profileNameRow h3{font-size:var(--fs-32)}
 .profileNameEditBtn{min-height:44px}
 .profileNameEdit{grid-template-columns:1fr;gap:8px}
 .profileNameEdit button{width:100%;min-width:0;min-height:48px}
 .honourRail{gap:8px}
 .honour{flex-basis:130px;max-width:none;grid-template-columns:28px minmax(0,1fr);gap:8px;min-height:52px;padding:7px 8px}
 .honour>i,.honour>img{width:26px;height:26px;font-size:var(--fs-14)}
 .honour b{font-size:var(--fs-16);letter-spacing:0}
 .honour small{font-size:var(--fs-11);letter-spacing:0}
 .memberStatGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0}
 .memberStat{padding:0 7px}
 .memberStat:nth-child(odd){padding-left:0;border-left:0}
 .memberStat strong{font-size:var(--fs-24)}
 .memberCardNote{font-size:var(--fs-12)}
}

/* Build 357 — one title-screen House utility family. Influence and Settings previously looked
   borrowed from different games: a rounded ornamental counter beside a short square-edged box.
   They now share one card silhouette, lacquer surface, brass linework, icon scale, type hierarchy
   and interaction language. The selectors deliberately exclude the live table: its compact
   solver-owned Settings dock keeps the geometry established in Build 284. */
body:not(.playing):not(.lobby-open) #metaHeader{right:174px}
body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility,
body:not(.playing):not(.lobby-open) #v2setB.houseUtility{
 box-sizing:border-box;height:52px;min-height:52px;border:1px solid rgba(232,200,122,.48);border-radius:14px;
 background:linear-gradient(180deg,rgba(18,53,40,.98),rgba(5,19,14,.98));
 box-shadow:inset 0 1px 0 rgba(255,255,255,.065),inset 0 -1px 0 rgba(0,0,0,.34),0 8px 24px rgba(0,0,0,.42);
 color:var(--ivory);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease
}
body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility,
body:not(.playing):not(.lobby-open) #v2setB.houseUtility{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:6px 12px;text-align:left}
body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility{min-width:138px}
body:not(.playing):not(.lobby-open) #v2setB.houseUtility{width:146px;min-width:146px}
body:not(.playing):not(.lobby-open) .houseUtility>img,
body:not(.playing):not(.lobby-open) .houseUtility>svg{flex:0 0 34px;width:34px;height:34px;box-sizing:border-box}
body:not(.playing):not(.lobby-open) #v2setB.houseUtility>svg{width:34px;height:34px;padding:8px;border:1px solid rgba(232,200,122,.62);border-radius:50%;background:radial-gradient(circle at 38% 32%,rgba(232,200,122,.2),rgba(5,19,14,.92) 70%);fill:var(--brass-hi);box-shadow:inset 0 0 0 3px rgba(232,200,122,.05)}
body:not(.playing):not(.lobby-open) .houseUtility>span{min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1}
body:not(.playing):not(.lobby-open) .houseUtility small{display:block;margin:0 0 4px;color:var(--muted);font:800 11px/1 Barlow,sans-serif;letter-spacing:var(--ls-eyebrow);white-space:nowrap}
body:not(.playing):not(.lobby-open) .houseUtility b{display:block;margin:0;color:var(--ivory);font:800 16px/1 'Barlow Semi Condensed',Barlow,sans-serif;letter-spacing:var(--ls-label);white-space:nowrap}
body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility b{color:var(--brass-hi);font-size:var(--fs-20);font-variant-numeric:tabular-nums}
body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility:hover,
body:not(.playing):not(.lobby-open) #v2setB.houseUtility:hover{transform:translateY(-1px);border-color:rgba(232,200,122,.82);background:linear-gradient(180deg,rgba(18,53,40,.99),rgba(5,19,14,.99));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 28px rgba(0,0,0,.5),0 0 0 1px rgba(232,200,122,.08)}
body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility:active,
body:not(.playing):not(.lobby-open) #v2setB.houseUtility:active{transform:translateY(1px);box-shadow:inset 0 1px 3px rgba(0,0,0,.4),0 4px 13px rgba(0,0,0,.4)}
body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility:focus-visible,
body:not(.playing):not(.lobby-open) #v2setB.houseUtility:focus-visible{outline:2px solid var(--ivory);outline-offset:3px;border-color:var(--brass-hi)}
@media(max-width:700px){
 body:not(.playing):not(.lobby-open) #metaHeader{right:58px}
 body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility{min-width:0;height:44px;min-height:44px;border-radius:12px;padding:5px 8px;gap:7px}
 body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility>img{flex-basis:30px;width:30px;height:30px}
 body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility small{display:none}
 body:not(.playing):not(.lobby-open) #v2setB.houseUtility{width:44px;min-width:44px;height:44px;min-height:44px;padding:10px;border-radius:12px}
 body:not(.playing):not(.lobby-open) #v2setB.houseUtility>span{display:none}
 body.lobby-open #v2setB.houseUtility{width:44px;min-width:44px;height:44px;min-height:44px;padding:10px}
 body.lobby-open #v2setB.houseUtility>span{display:none}
 body:not(.playing):not(.lobby-open) #v2setB.houseUtility>svg{flex-basis:28px;width:28px;height:28px;padding:6px}
}
@media(prefers-reduced-motion:reduce){body:not(.playing):not(.lobby-open) #metaInfluence.houseUtility,body:not(.playing):not(.lobby-open) #v2setB.houseUtility{transition:none}}

/* ══════════════════════════════════════════════════════════════════════════
   Build 362 — THE WAR ROOM  (David, 30 Aug 2026)
   The House tab's own visual language, built from the parts the game already owns: the
   Founder ceremony's champagne rim, ray fan and burst ring; Bebas for numerals, Barlow for
   copy; the panel's green-black ground. The one new idea is `--house`, set inline per House
   so a single stylesheet reads gold, jade or violet without three copies of anything.
   Every animation is opt-out under prefers-reduced-motion, at the bottom of this block. */
.houseSectionHead{font:400 24px 'Bebas Neue';letter-spacing:0;margin:24px 0 12px;color:var(--ivory)}

/* ─── the crest, alive ─────────────────────────────────────────────────── */
.crestArt{position:relative;display:grid;place-items:center;width:78px;height:78px;flex:0 0 auto}
.crestArt img{width:100%;height:100%;filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)) drop-shadow(0 0 14px color-mix(in srgb,var(--house) 45%,transparent));animation:crestBreathe 5.5s ease-in-out infinite}
.crestArt.big{width:132px;height:132px}
.crestSheen{position:absolute;inset:-6%;border-radius:var(--r-card);overflow:hidden;pointer-events:none}
.crestSheen:after{content:"";position:absolute;top:-40%;left:-70%;width:45%;height:180%;transform:rotate(18deg);
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);animation:crestSweep 5.5s ease-in-out infinite}
@keyframes crestBreathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.025)}}
@keyframes crestSweep{0%{left:-70%}55%{left:130%}100%{left:130%}}

/* ─── the banner ───────────────────────────────────────────────────────── */
.houseBanner{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;
 padding:22px 24px;border-radius:var(--r-card);overflow:hidden;
 border:1px solid color-mix(in srgb,var(--house) 55%,transparent);
 background:radial-gradient(120% 140% at 8% 0%,color-mix(in srgb,var(--house) 26%,transparent),transparent 58%),linear-gradient(150deg,rgba(18,53,40,.97),rgba(5,19,14,.99));
 box-shadow:0 18px 44px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.07)}
.bannerWeave{position:absolute;inset:0;pointer-events:none;opacity:.16;
 background:repeating-linear-gradient(115deg,transparent 0 16px,color-mix(in srgb,var(--house) 70%,transparent) 16px 18px);
 animation:weaveDrift 26s linear infinite}
@keyframes weaveDrift{to{background-position:520px 0}}
.bannerCopy{position:relative;min-width:0}
.bannerCopy small{display:block;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:color-mix(in srgb,var(--house) 82%,white)}
.bannerCopy h2{margin:5px 0 0;font:400 clamp(32px,5vw,48px)/1 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--ivory);text-shadow:0 3px 0 rgba(0,0,0,.42)}
.bannerCopy p{margin:5px 0 0;font:600 14px/1.4 Barlow;color:var(--ivory)}
.bannerCopy .houseFaces{margin-top:12px}

/* ─── the contribution ring ────────────────────────────────────────────── */
.houseRing{position:relative;width:126px;height:126px;flex:0 0 auto}
.houseRing svg{width:100%;height:100%;transform:rotate(-90deg)}
.houseRing .ringBack{fill:none;stroke:rgba(255,255,255,.09);stroke-width:8}
.houseRing .ringFore{fill:none;stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset 1100ms cubic-bezier(.2,.85,.25,1);filter:drop-shadow(0 0 8px currentColor)}
.ringCopy{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center}
.ringCopy strong{font:400 32px/1 'Bebas Neue';color:var(--ivory)}
.ringCopy span{margin-top:1px;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}
.ringCopy small{margin-top:3px;font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted)}

/* ─── the closing bell ─────────────────────────────────────────────────── */
.bellPanel{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:20px;margin-top:14px;padding:18px 22px;
 border:1px solid rgba(232,200,122,.42);border-radius:var(--r-card);
 background:radial-gradient(90% 160% at 0% 50%,rgba(232,200,122,.14),transparent 60%),linear-gradient(180deg,rgba(18,53,40,.96),rgba(5,19,14,.98));
 box-shadow:0 12px 32px rgba(0,0,0,.42)}
.bellPanel.winning{border-color:rgba(232,200,122,.8);box-shadow:0 12px 34px rgba(0,0,0,.42),0 0 34px rgba(232,200,122,.16)}
.bellGlyph{position:relative;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;
 border:1px solid var(--ivory);background:linear-gradient(180deg,var(--brass),var(--brass-deep));box-shadow:0 6px 16px rgba(0,0,0,.55)}
.bellGlyph span{display:grid;place-items:center;width:27px;height:27px;transform-origin:50% 6%;animation:bellSwing 3.6s ease-in-out infinite}
.bellGlyph svg{width:27px;height:27px;fill:var(--ivory);filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.bellGlyph i{position:absolute;inset:-7px;border:1px solid rgba(232,200,122,.45);border-radius:50%;animation:bellRipple 3.6s ease-out infinite}
@keyframes bellSwing{0%,72%,100%{transform:rotate(0)}78%{transform:rotate(13deg)}84%{transform:rotate(-10deg)}90%{transform:rotate(6deg)}95%{transform:rotate(-3deg)}}
@keyframes bellRipple{0%,70%{opacity:0;transform:scale(.8)}80%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.bellClockWrap small{display:block;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted)}
.bellClock{display:flex;align-items:baseline;gap:2px;margin-top:4px;white-space:nowrap}
.bellClock b{font:400 32px/1 'Bebas Neue';letter-spacing:0;color:var(--ivory);font-variant-numeric:tabular-nums}
.bellClock small{margin:0 7px 0 1px;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}
.bellVerdict{min-width:0;padding-left:20px;border-left:1px solid rgba(232,200,122,.22)}
.bellVerdict small{display:block;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted)}
.bellVerdict strong{display:block;margin-top:3px;font:400 24px/1.05 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--brass-hi)}
.bellVerdict p{margin:5px 0 0;font:600 14px/1.4 Barlow;color:var(--ivory)}
.bellVerdict b{color:var(--ivory)}

/* ─── the war board ────────────────────────────────────────────────────── */
.warBoard{margin-top:14px;padding:16px 20px 14px;border:1px solid rgba(232,200,122,.25);border-radius:var(--r-card);background:rgba(5,19,14,.62)}
.warHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.warHead h3{margin:0;font:400 24px 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--ivory)}
.warFeed{font:900 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.warFeed.live{color:var(--jade-bright)}.warFeed.proj{color:var(--muted)}
.warRow{display:grid;grid-template-columns:26px 34px minmax(0,1fr) 54px;align-items:center;gap:12px;padding:7px 0}
.warRank{font:400 24px/1 'Bebas Neue';color:var(--muted);text-align:center}
.warRow.leading .warRank{color:var(--house)}
.warCrest{width:34px;height:34px;filter:drop-shadow(0 0 8px color-mix(in srgb,var(--house) 40%,transparent))}
.warRow:not(.mine):not(.leading) .warCrest{opacity:.62}
.warCopy{min-width:0}
.warCopy b{display:block;font:400 20px/1 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--ivory)}
.warCopy em{font-style:normal;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--house)}
.warTrack{height:11px;margin-top:6px;border-radius:var(--r-card);background:var(--ink);border:1px solid rgba(255,255,255,.08);overflow:hidden}
.warTrack i{display:block;height:100%;border-radius:var(--r-card);width:0;
 background:linear-gradient(90deg,color-mix(in srgb,var(--house) 45%,#000),var(--house));
 transition:width 1150ms cubic-bezier(.2,.85,.25,1)}
.warRow.leading .warTrack{position:relative}
/* the leader's bar keeps its own solid fill and gets a travelling highlight OVER it, so a
   paused frame — a screenshot, a reduced-motion session — still reads as a full clean bar */
.warRow.leading .warTrack::after{content:"";position:absolute;inset:0;border-radius:var(--r-card);pointer-events:none;
 background:linear-gradient(90deg,transparent 0 35%,rgba(255,255,255,.34) 50%,transparent 65% 100%);
 background-size:260% 100%;background-position:160% 0;animation:warShimmer 3.4s ease-in-out infinite}
@keyframes warShimmer{0%{background-position:160% 0}60%,100%{background-position:-160% 0}}
.warPct{font:400 20px/1 'Bebas Neue';color:var(--house);text-align:right;font-variant-numeric:tabular-nums}
.warGap{margin:10px 0 0;font:600 14px/1.45 Barlow;color:var(--muted)}
.warGap b{color:var(--ivory)}

/* ─── the perk ─────────────────────────────────────────────────────────── */
.perkPanel{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px;margin-top:14px;padding:16px 20px;
 border:1px solid color-mix(in srgb,var(--house) 48%,transparent);border-left:4px solid var(--house);border-radius:var(--r-card);
 background:linear-gradient(120deg,color-mix(in srgb,var(--house) 12%,transparent),rgba(5,19,14,.94) 55%)}
.perkSeal{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid color-mix(in srgb,var(--house) 70%,white);
 background:color-mix(in srgb,var(--house) 22%,var(--ink));color:var(--house);font-size:var(--fs-16);
 box-shadow:0 0 18px color-mix(in srgb,var(--house) 34%,transparent)}
.perkCopy{min-width:0}
.perkCopy small{display:block;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted)}
.perkCopy h3{margin:3px 0 0;font:400 24px 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--house)}
.perkCopy h3 em{margin-left:8px;font:800 12px Barlow;letter-spacing:0;font-style:normal;color:var(--ivory);opacity:.85}
.perkCopy p{margin:4px 0 0;font:600 14px/1.4 Barlow;color:var(--ivory)}
.perkCopy>em{display:block;margin-top:5px;font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);font-style:normal;color:var(--muted)}
.perkTally{text-align:right;flex:0 0 auto}
.perkTally strong{display:block;font:400 32px/1 'Bebas Neue';color:var(--ivory)}
.perkTally span{display:block;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted)}
.perkTally small{display:block;margin-top:3px;font:800 11px Barlow;letter-spacing:var(--ls-label);color:var(--house)}

/* ─── the defection ────────────────────────────────────────────────────── */
.defectPanel{margin-top:20px;padding:16px 20px;border:1px dashed rgba(232,200,122,.34);border-radius:var(--r-card);background:rgba(5,19,14,.5)}
.defectPanel.shut{opacity:.62}
.defectHead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.defectHead h3{margin:0;font:400 24px 'Bebas Neue';letter-spacing:var(--ls-label)}
.defectHead span{font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}
.defectPanel.shut .defectHead span{color:var(--muted)}
.defectPanel>p{margin:8px 0 0;font:600 14px/1.45 Barlow;color:var(--muted);max-width:640px}
.defectRow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px}
.defectChoice{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:11px;padding:11px 13px;text-align:left;cursor:pointer;
 border:1px solid color-mix(in srgb,var(--house) 42%,transparent);border-radius:var(--r-card);background:var(--ink-2);color:var(--ivory);font-family:inherit}
.defectChoice:hover:not(:disabled){border-color:var(--house);background:var(--ink-2);box-shadow:0 0 20px color-mix(in srgb,var(--house) 22%,transparent)}
.defectChoice:disabled{cursor:not-allowed;opacity:.5}
/* the crest spans both rows; the name and the motto share the second column — without this the
   motto lands in the 42px crest column and wraps one word per line */
.defectChoice img{width:40px;height:40px;grid-row:1/span 2;align-self:center}
.defectChoice b,.defectChoice small{grid-column:2}
.defectChoice b{display:block;font:400 20px 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--house)}
.defectChoice small{display:block;margin-top:2px;font:600 12px/1.3 Barlow;color:var(--muted)}

/* ─── the pledge shelf ─────────────────────────────────────────────────── */
.houseLoop{display:flex;align-items:center;justify-content:center;gap:12px;margin:18px 0;padding:11px 14px;border:1px solid rgba(232,200,122,.28);border-radius:var(--r-pill);background:rgba(5,19,14,.55);font:900 11px Barlow;letter-spacing:var(--ls-label);color:var(--ivory)}
.houseLoop i{font-style:normal;color:var(--brass-hi)}
.pledgeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pledgeCard{display:flex;flex-direction:column;align-items:center;text-align:center;padding:22px 16px 16px;border-radius:var(--r-card);
 border:1px solid color-mix(in srgb,var(--house) 45%,transparent);
 background:radial-gradient(110% 80% at 50% 0%,color-mix(in srgb,var(--house) 20%,transparent),transparent 62%),linear-gradient(180deg,rgba(18,53,40,.94),rgba(5,19,14,.96));
 transition:transform 180ms ease,box-shadow 180ms ease,border-color 180ms ease}
.pledgeCard:hover{transform:translateY(-4px);border-color:var(--house);box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 34px color-mix(in srgb,var(--house) 22%,transparent)}
.pledgeCard h3{margin:14px 0 0;font:400 24px/1 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--ivory)}
.pledgeMotto{margin:6px 0 0;font:600 14px/1.4 Barlow;color:var(--ivory);min-height:38px}
.pledgePerk{margin-top:12px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--house) 50%,transparent);border-radius:var(--r-card);background:rgba(5,19,14,.6);width:100%;box-sizing:border-box}
.pledgePerk small{display:block;font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--house)}
.pledgePerk b{display:block;margin-top:3px;font:800 12px Barlow;color:var(--ivory)}
.pledgeCard .houseFaces{margin:14px 0 0;justify-content:center}
.pledgeCard .metaPrimary{width:100%;margin-top:14px}
.houseChoiceFoot{margin:15px 0 0;text-align:center;font:700 12px Barlow;color:var(--muted)}

/* ─── the six-week reward, clearly separate from the weekly prize ─────── */
.seasonReward{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:18px;padding:16px 20px;border:1px solid rgba(232,200,122,.28);border-radius:var(--r-card);background:linear-gradient(120deg,rgba(232,200,122,.1),rgba(5,19,14,.7))}
.seasonReward small{font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}
.seasonReward h3{margin:3px 0 0;font:400 24px 'Bebas Neue';letter-spacing:0;color:var(--ivory)}
.seasonReward p{margin:4px 0 0;font:600 14px/1.4 Barlow;color:var(--muted)}
.seasonReward>strong{flex:0 0 auto;padding:8px 12px;border-radius:var(--r-pill);background:rgba(47,196,124,.1);font:900 11px Barlow;letter-spacing:var(--ls-label);color:var(--jade-bright)}

/* ─── the nav pip ──────────────────────────────────────────────────────── */
#metaNav button{position:relative}
.navPip{position:absolute;top:7px;right:20px;width:9px;height:9px;border-radius:50%;background:var(--muted);box-shadow:0 0 0 2px rgba(5,19,14,.9)}
.navPip.bell{background:var(--brass-hi);box-shadow:0 0 0 2px rgba(5,19,14,.9),0 0 12px rgba(232,200,122,.9);animation:pipPulse 1.5s ease-in-out infinite}
.navPip.closing{background:var(--brass);box-shadow:0 0 0 2px rgba(5,19,14,.9),0 0 9px rgba(201,162,75,.7)}
@keyframes pipPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.65}}

/* FRONT-OF-HOUSE END */   /* ceremony block below is out of Build 401A's scope
   (ARCH-MAP §2(d): .founderCeremony .friendshipCeremony .houseCeremony .climbProgressCeremony
   .seatCeremony). Its literals, sizes and radii are left exactly as Build 400 wrote them and
   tokens-test.js does not scan between these two markers. */
/* ═══ THE CEREMONIES ═══════════════════════════════════════════════════════
   Same skeleton as .founderCeremony — fixed overlay, burst ring, ray fan, a Bebas headline
   that lands hard — recoloured per House. Two variants share it: the PLEDGE (crest slams in,
   oath stamps) and the CLOSING BELL (three crests, bars race, winner rises, purse counts up). */
.houseCeremony{position:fixed;z-index:130;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
 padding:24px;box-sizing:border-box;overflow:hidden;
 background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--house) 42%,#0a1c14),rgba(2,13,9,.99) 66%);
 opacity:0;transform:scale(1.04);transition:opacity .34s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.houseCeremony.on{opacity:1;transform:none}
.houseCeremony>*{position:relative;z-index:3}
.houseCeremonyBurst{position:absolute;z-index:1;width:min(78vw,580px);aspect-ratio:1;border-radius:50%;
 border:2px solid color-mix(in srgb,var(--house) 62%,white);
 box-shadow:0 0 0 24px color-mix(in srgb,var(--house) 8%,transparent),0 0 0 72px color-mix(in srgb,var(--house) 5%,transparent);
 animation:founderBurst 1.3s ease-out both}
.houseCeremonyRays{position:absolute;z-index:1;inset:0;pointer-events:none}
.houseCeremonyRays i{--angle:calc(var(--i)*24deg);position:absolute;left:50%;top:44%;width:6px;height:20px;border-radius:8px;
 background:linear-gradient(#fff8d4,var(--house));box-shadow:0 0 14px color-mix(in srgb,var(--house) 80%,white);
 transform:rotate(var(--angle)) translateY(-56px);animation:founderSpark 1.5s calc(var(--i)*.03s) ease-out both}
.houseCeremonyKicker{margin-bottom:15px;font:900 11px Barlow;letter-spacing:3.4px;text-align:center;color:color-mix(in srgb,var(--house) 75%,white)}
.ceremonyCrest{position:relative;display:grid;place-items:center;width:min(38vw,180px);height:min(38vw,180px);
 animation:crestSlam .78s cubic-bezier(.15,.9,.2,1) both}
.ceremonyCrest img{width:100%;height:100%;filter:drop-shadow(0 0 40px color-mix(in srgb,var(--house) 75%,transparent))}
.ceremonyCrest b{position:absolute;bottom:-12px;padding:4px 15px;border:1px solid #fff3d6;border-radius:999px;
 background:color-mix(in srgb,var(--house) 42%,#0a1c14);color:#fff8e4;font:900 11px Barlow;letter-spacing:2.4px;
 box-shadow:0 4px 12px rgba(0,0,0,.6);animation:founderStamp .5s .55s cubic-bezier(.2,1.5,.4,1) both}
@keyframes crestSlam{from{opacity:0;transform:scale(2.1) rotate(-11deg)}62%{transform:scale(.94) rotate(2deg)}to{opacity:1;transform:none}}
.houseCeremony>strong{margin-top:26px;color:#fff7d8;font:400 clamp(34px,7.5vw,64px)/1 'Bebas Neue';letter-spacing:3px;text-align:center;
 text-shadow:0 3px 0 rgba(0,0,0,.5),0 0 32px color-mix(in srgb,var(--house) 70%,transparent)}
.houseCeremonyOath{margin:12px 0 0;max-width:440px;text-align:center;font:600 16px/1.5 Barlow;color:#dfeae4}
.houseCeremonyPurse{margin-top:18px;padding:11px 22px;border:1px solid color-mix(in srgb,var(--house) 65%,white);border-radius:999px;
 background:rgba(3,15,11,.72);font:400 30px/1 'Bebas Neue';letter-spacing:1.6px;color:#fff8e4}
.houseCeremonyPurse span{font:900 11px Barlow;letter-spacing:2px;color:color-mix(in srgb,var(--house) 78%,white);margin-left:9px}
.goalCeremonyList{width:min(92vw,460px);display:grid;gap:7px;margin-top:18px}.goalCeremonyRow{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;padding:9px 12px;border:1px solid color-mix(in srgb,var(--house) 44%,transparent);border-radius:12px;background:rgba(3,15,11,.7)}.goalCeremonyRow>i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#55d6a0;color:#082219;font:900 13px Barlow;font-style:normal;box-shadow:0 0 16px rgba(85,214,160,.45)}.goalCeremonyRow b,.goalCeremonyRow small{display:block}.goalCeremonyRow b{font:400 19px 'Bebas Neue';letter-spacing:.8px;color:#fff8e4}.goalCeremonyRow small{margin-top:2px;color:#bfead4;font:800 11px Barlow}.houseCeremonyPurse.goalPurse{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:8px;padding:10px 18px;text-align:center}.houseCeremonyPurse.goalPurse span{margin:0}.houseCeremonyPurse.goalPurse small{grid-column:1/-1;margin-top:3px;color:#8fe6b4;font:900 10px Barlow;letter-spacing:1.5px}.houseGoalCeremony .ceremonyCrest{width:min(26vw,126px);height:min(26vw,126px)}.houseGoalCeremony>strong{margin-top:20px}
.ceremonyBoard{width:min(92vw,430px);margin-top:22px}
.ceremonyBoard .warRow{grid-template-columns:22px 30px minmax(0,1fr) 48px;gap:10px;padding:5px 0}
.ceremonyBoard .warTrack i{transition:width 900ms cubic-bezier(.2,.85,.25,1)}
/* .v2opt is width:100% by default (v3.html) — inside a full-screen flex column that means the
   whole viewport. Cap it here rather than edit the shared button. */
.houseCeremony .v2opt{width:min(78vw,320px);min-width:0;margin-top:22px;box-sizing:border-box}
.houseCeremonyHint{margin-top:9px;font:600 11px Barlow;letter-spacing:.4px;text-align:center;color:#c9b98c;opacity:.9}
/* FRONT-OF-HOUSE START */

/* ─── the crest at the table ───────────────────────────────────────────── */
.lbSeat[class*="houseCrest-"] .seatAv,.lbIdent[class*="houseCrest-"]{position:relative}
.lbSeat[class*="houseCrest-"] .seatAv::before,.lbIdent[class*="houseCrest-"]::before{
 content:"";position:absolute;z-index:3;background-size:contain;background-repeat:no-repeat;background-position:center;
 filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
.lbSeat[class*="houseCrest-"] .seatAv::before{right:-3px;bottom:0;width:19px;height:19px}
.lbIdent[class*="houseCrest-"]::before{left:1px;top:4px;width:26px;height:26px}
.houseCrest-gilded .seatAv::before,.lbIdent.houseCrest-gilded::before{background-image:url(art/meta/crest-gilded.svg)}
.houseCrest-vanguard .seatAv::before,.lbIdent.houseCrest-vanguard::before{background-image:url(art/meta/crest-vanguard.svg)}
.houseCrest-syndicate .seatAv::before,.lbIdent.houseCrest-syndicate::before{background-image:url(art/meta/crest-syndicate.svg)}
/* Build 376: on a SEAT card the crest and the trophy live in the credential rail, never on the face
   - the crest used to be pinned to the same corner as the mastery coin and drew straight over it.
   The .seatAv marks are retired for .lbSeat ONLY; .lbIdent and .lbJoinIdent are untouched. */
.lbSeat[class*="houseCrest-"] .seatAv::before{content:none}
.lbSeat.trophyEquipped .seatAv::after{content:none}
.lbSeat.houseCrest-gilded .crHouse{background-image:url(art/meta/crest-gilded.svg)}
.lbSeat.houseCrest-vanguard .crHouse{background-image:url(art/meta/crest-vanguard.svg)}
.lbSeat.houseCrest-syndicate .crHouse{background-image:url(art/meta/crest-syndicate.svg)}

/* ─── narrow screens ───────────────────────────────────────────────────── */
@media(max-width:820px){
 .houseBanner{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:18px}
 .houseRing{grid-column:1/-1;justify-self:center;width:112px;height:112px}
 .crestArt.big{width:96px;height:96px}
 .bellPanel{grid-template-columns:auto minmax(0,1fr);gap:14px;padding:16px}
 .bellVerdict{grid-column:1/-1;padding-left:0;padding-top:12px;border-left:0;border-top:1px solid rgba(232,200,122,.2)}
 .bellClock b{font-size:var(--fs-32)}
 .perkPanel{grid-template-columns:auto minmax(0,1fr);gap:12px}
 .perkTally{grid-column:1/-1;text-align:left;padding-top:8px;border-top:1px solid rgba(255,255,255,.08)}
 .pledgeGrid{grid-template-columns:1fr}
 .houseLoop{align-items:stretch;gap:5px;border-radius:var(--r-card);font-size:var(--fs-11);letter-spacing:var(--ls-label);text-align:center}.houseLoop b{flex:1}.houseLoop i{align-self:center}
 .defectRow{grid-template-columns:1fr}
 .seasonReward{align-items:flex-start;flex-direction:column}.houseResultReceipt{grid-template-columns:1fr}.houseResultReceipt span{text-align:left}
 .warRow{grid-template-columns:20px 28px minmax(0,1fr) 44px;gap:9px}
 .warCopy b{font-size:var(--fs-16)}.warPct{font-size:var(--fs-16)}
 .contractGrid,.contractPickerLane .metaGrid{grid-template-columns:1fr}.houseGoalHeading{align-items:flex-start;flex-direction:column}.houseGoalHeading>span{align-self:flex-start}
 .houseGoalCeremony{justify-content:flex-start;overflow-y:auto;padding-top:max(26px,env(safe-area-inset-top))}.houseGoalCeremony .houseCeremonyKicker{margin-bottom:8px}.houseGoalCeremony .houseCeremonyOath{font-size:var(--fs-14)}.houseGoalCeremony .v2opt{margin-top:14px}
}

/* ─── motion, honoured ─────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
 .crestArt img,.crestSheen:after,.bannerWeave,.bellGlyph span,.bellGlyph i,.warRow.leading .warTrack::after,
 .navPip.bell,.houseCeremony,.houseCeremony *,.contractCard.done::after{animation:none!important}
 .warTrack i,.houseRing .ringFore,.pledgeCard{transition:none!important}
 .houseCeremony.on{opacity:1;transform:none}
}

/* Build 369 — the complete attire row is the preview button. The expanded wardrobe view remains
   the only place that can equip or buy, so a broad touch target never becomes an accidental spend. */
article.lookReward{display:block;overflow:hidden;min-height:0;padding:0;border:1px solid rgba(232,200,122,.22);border-radius:var(--r-card);background:rgba(5,19,14,.55);transition:border-color 150ms ease,box-shadow 150ms ease}
article.lookReward.locked{opacity:.78}
.lookRows{display:grid;gap:var(--sp-2)}
.lookRows article.lookReward.locked:not(.expanded) img{filter:saturate(.82) brightness(.82)}
.lookRowToggle{appearance:none;display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:70px;padding:8px 10px;border:0;background:transparent;color:inherit;text-align:left;cursor:pointer}
.lookThumb{position:relative;width:64px;height:54px}
.lookRowCopy{display:grid;gap:4px;min-width:0}.lookRowCopy b,.lookRowCopy small{display:block}.lookRowCopy small{color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-label)}
.lookRowChevron{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(232,200,122,.35);border-radius:50%;color:var(--brass-hi);font:700 20px/1 Barlow}
.lookToggle i{position:absolute;right:3px;bottom:3px;padding:2px 4px;border:1px solid rgba(245,239,221,.55);border-radius:var(--r-pill);background:rgba(5,19,14,.88);color:var(--ivory);font:900 11px Barlow;letter-spacing:var(--ls-label);font-style:normal}
.lookToggle:focus-visible,.wardrobeShortcut:focus-visible{outline:3px solid var(--ivory);outline-offset:3px}
article.lookReward.expanded{opacity:1;border-color:rgba(232,200,122,.78);box-shadow:inset 0 0 0 1px rgba(232,200,122,.22),0 10px 28px rgba(0,0,0,.3)}
.lookReward.equipped .lookRowCopy small{color:var(--brass-hi)}
.masteryLookExpanded{display:grid;grid-template-columns:minmax(220px,390px) minmax(180px,1fr);align-items:center;gap:18px;margin-top:4px;padding:12px;border-top:1px solid rgba(232,200,122,.24);background:radial-gradient(circle at 20% 30%,rgba(232,200,122,.1),transparent 48%)}
.masteryLookExpanded>img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:1px solid rgba(232,200,122,.46);border-radius:var(--r-card);background:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.36)}
.masteryLookExpandedCopy{display:grid;align-content:center;gap:8px;min-width:0}
.masteryLookExpandedCopy>span{font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--brass-hi)}
.masteryLookExpandedCopy h4{margin:0;font:400 clamp(24px,3.2vw,32px)/.98 'Bebas Neue';letter-spacing:0;color:var(--ivory)}
.masteryLookExpandedCopy p{margin:0 0 5px;font:800 11px Barlow;letter-spacing:var(--ls-label);color:var(--muted)}
.masteryLookExpandedCopy button{width:100%;min-height:46px}
.profileHeroPortrait.wardrobeShortcut{appearance:none;display:grid;justify-items:center;gap:7px;width:144px;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:var(--ivory);cursor:pointer;font-family:inherit}
/* Build 401B: the circle is sized to the picture's BORDER box (138px of portrait + 2x3px of
   brass). It used to be 138px square with a 144px picture inside it, which overflowed the
   CHANGE LOOK button by 6px at every width - responsive.spec.js's auditLayout read it as
   clipped copy. The portrait itself is unchanged. */
.profileHeroPortraitCircle{position:relative;display:grid;place-items:center;width:144px;height:144px}.profileHeroPortraitCircle>img{width:138px;height:138px;border:3px solid var(--brass-hi);border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px rgba(232,200,122,.18),0 0 26px rgba(232,200,122,.28)}
.wardrobeHint{position:static;z-index:auto;transform:none;padding:5px 10px;border:1px solid rgba(245,239,221,.65);border-radius:var(--r-pill);background:rgba(5,19,14,.82);color:var(--ivory);font:900 11px Barlow;letter-spacing:var(--ls-eyebrow);white-space:nowrap;opacity:.94}
.wardrobeShortcut:hover .wardrobeHint{background:var(--brass-deep);opacity:1}
@media(max-width:700px){
 .lookRowToggle{grid-template-columns:58px minmax(0,1fr) 30px;min-height:72px;padding:8px 9px}
 .lookThumb{width:52px;height:48px}
 .masteryLookExpanded{grid-template-columns:1fr;gap:12px;padding:10px}
 .masteryLookExpandedCopy h4{font-size:var(--fs-32)}.masteryLookExpandedCopy button{grid-column:auto;width:100%}
 .profileHeroPortrait.wardrobeShortcut{width:98px}.profileHeroPortraitCircle{width:98px;height:98px}.profileHeroPortraitCircle>img{width:92px;height:92px}.wardrobeHint{padding:4px 5px;font-size:var(--fs-11);letter-spacing:0}
}
@media(prefers-reduced-motion:reduce){article.lookReward{transition:none!important}}

/* Build 369 profile account placement: EDIT and account recovery are one restrained identity
   control rail. The old page-width account card is no longer rendered. */
.profileNameRow{grid-template-columns:minmax(0,1fr) auto;justify-content:stretch;width:100%}.profileHeroActions{display:flex;align-items:center;justify-content:flex-end;gap:7px}.profileAccountBtn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border:1px solid rgba(232,200,122,.45);border-radius:var(--r-pill);background:rgba(232,200,122,.08);color:var(--brass-hi);font:900 11px Barlow;letter-spacing:var(--ls-label);white-space:nowrap;cursor:pointer}.profileAccountBtn i{display:grid;place-items:center;width:17px;height:17px;border:1px solid currentColor;border-radius:50%;font-style:normal;font-size:var(--fs-11)}.profileAccountBtn.linked{border-color:rgba(47,196,124,.58);background:rgba(47,196,124,.1);color:var(--jade-bright)}.profileAccountBtn.unavailable{color:var(--muted);border-color:rgba(140,166,154,.32)}.profileAccountBtn:hover{background:rgba(232,200,122,.16);color:var(--ivory)}.profileAccountBtn:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}.profileSaveState{margin:9px 0 0;color:var(--muted);font:700 12px Barlow;letter-spacing:0}.accountHub b{color:var(--ivory)}

/* Recent tablemates keep one compact action at the right edge. Accepted friends retain their
   separate desktop REMOVE / phone swipe contract. */
.socialList article.recentPlayerRow{grid-template-columns:minmax(0,1fr) auto;gap:10px}.recentPlayerRow>.socialIdentityButton{grid-column:1;grid-template-columns:48px minmax(0,1fr)}.socialList article.recentPlayerRow>.recentFriendAction{grid-column:2;justify-self:end;width:auto;min-width:96px;min-height:40px;padding:7px 12px;border-radius:var(--r-pill);font-size:var(--fs-11);letter-spacing:var(--ls-label)}.recentPlayerRow>.requestSent{grid-column:2}

/* A mastery look ceremony uses the unlocked outfit itself, square and uncropped, while keeping
   the existing shared unlock language and reduced-motion behavior. */
.founderMasteryCeremony.unlockMoment.attireUnlock>img{width:min(46vw,300px);border-radius:var(--r-card);object-fit:cover;box-shadow:0 0 0 8px rgba(232,200,122,.13),0 0 75px rgba(232,200,122,.5)}
@media(max-width:700px){.profileNameRow{grid-template-columns:1fr;gap:8px}.profileHeroActions{justify-content:flex-start;flex-wrap:wrap}.profileAccountBtn{min-height:44px;padding:0 10px;font-size:var(--fs-11)}.profileSaveState{font-size:var(--fs-11)}.socialList article.recentPlayerRow{grid-template-columns:minmax(0,1fr) auto;padding:9px;gap:8px}.recentPlayerRow>.socialIdentityButton{grid-column:1;grid-template-columns:44px minmax(0,1fr)}.socialList article.recentPlayerRow>.recentFriendAction{grid-column:2;width:auto;min-width:86px;min-height:45px;padding:7px 9px;font-size:var(--fs-11)}.recentPlayerRow>.requestSent{grid-column:2;font-size:var(--fs-11)}.founderMasteryCeremony.unlockMoment.attireUnlock>img{width:min(68vw,260px)}}

/* ═══ Build 389 THE OLD GUARD - THE SEAT MEDAL ═══════════════════════════════════════════════════════
   The medal card on the profile, the honour on the Member Card rail, and the re-forge inside the Seat Ceremony.
   The medal's language is SIZE and METAL, so the card gives it room and the ceremony lets the old one shrink away
   as the new one grows in. Everything respects prefers-reduced-motion. */
/* ═══ Build 392 THE CLIMB, PHONE-FIRST (David: "this will not pass on mobile ... implement it elegantly") ═══════════════
   Three pieces, one language. THE BEZEL: a ten-segment ring (seven until Build 400) around every medal - the segments reached lit in gold, the
   rest dark - so "III of X" reads at 22px on any seat rail without a word. THE STRIP: one 44px line in the solo lobby
   (medal · CIRCLE III OF X · THE GALLERY · standing hairline · chevron) - the entire lobby footprint. THE TOWER: the ten
   circles stacked as the floors of the Exchange, The Floor at the bottom and The Exchange at the top, opened from the
   strip or the profile medal; a phone is tall, so the one layout it is best at. Reduced motion respected throughout. */
.medalBezel,.lbCred .crCircle{position:relative;--bezelLit:var(--brass-hi);--bezelDim:rgba(255,255,255,.14);overflow:visible}
.medalBezel::after,.lbCred .crCircle::after{content:"";position:absolute;inset:-4px;border-radius:50%;pointer-events:none;
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2.2px));
 filter:drop-shadow(0 0 3px rgba(232,200,122,.45))}
.medalBezel{display:inline-grid;place-items:center}.medalBezel>img{width:100%;height:100%;display:block}
.medalBezel.big::after{inset:-9px;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.6px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4.6px));filter:drop-shadow(0 0 8px rgba(232,200,122,.5))}
/* Build 400: TEN segments (36deg each, a 5deg gap) - "VIII of X" reads on the same ring; every rule is generated from one arithmetic, never hand-tuned */
.medalBezel.circle-1::after,.crCircle.circle-1::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelDim) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelDim) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelDim) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelDim) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelDim) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelDim) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelDim) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelDim) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-2::after,.crCircle.circle-2::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelDim) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelDim) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelDim) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelDim) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelDim) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelDim) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelDim) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-3::after,.crCircle.circle-3::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelLit) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelDim) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelDim) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelDim) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelDim) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelDim) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelDim) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-4::after,.crCircle.circle-4::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelLit) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelLit) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelDim) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelDim) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelDim) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelDim) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelDim) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-5::after,.crCircle.circle-5::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelLit) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelLit) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelLit) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelDim) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelDim) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelDim) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelDim) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-6::after,.crCircle.circle-6::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelLit) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelLit) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelLit) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelLit) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelDim) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelDim) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelDim) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-7::after,.crCircle.circle-7::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelLit) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelLit) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelLit) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelLit) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelLit) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelDim) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelDim) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-8::after,.crCircle.circle-8::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelLit) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelLit) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelLit) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelLit) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelLit) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelLit) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelDim) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-9::after,.crCircle.circle-9::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelLit) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelLit) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelLit) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelLit) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelLit) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelLit) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelLit) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelDim) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
.medalBezel.circle-10::after,.crCircle.circle-10::after{background:conic-gradient(from -90deg,var(--bezelLit) 0.00deg 31.00deg,transparent 31.00deg 36.00deg,var(--bezelLit) 36.00deg 67.00deg,transparent 67.00deg 72.00deg,var(--bezelLit) 72.00deg 103.00deg,transparent 103.00deg 108.00deg,var(--bezelLit) 108.00deg 139.00deg,transparent 139.00deg 144.00deg,var(--bezelLit) 144.00deg 175.00deg,transparent 175.00deg 180.00deg,var(--bezelLit) 180.00deg 211.00deg,transparent 211.00deg 216.00deg,var(--bezelLit) 216.00deg 247.00deg,transparent 247.00deg 252.00deg,var(--bezelLit) 252.00deg 283.00deg,transparent 283.00deg 288.00deg,var(--bezelLit) 288.00deg 319.00deg,transparent 319.00deg 324.00deg,var(--bezelLit) 324.00deg 355.00deg,transparent 355.00deg 360.00deg)}
/* BUILD 396 — THE CLIMB IS THE MODE, NOT A CAPTION BELOW TABLE OPTIONS.
   Slay the Spire's ascension selector, Balatro's material-coded stakes and Monster Train's vertical
   Covenant identity all make the earned level the launch screen's first read. The Exchange keeps its
   own ten architectural crests: held Circle first, next Circle second, full route third, options after. */
.climbStrip{display:grid;grid-template-columns:76px minmax(150px,.88fr) minmax(180px,1fr) auto;grid-template-areas:"crest current progress action" "crest path path path";align-items:center;gap:10px 16px;width:100%;min-height:126px;margin:0 0 12px;padding:13px 15px;box-sizing:border-box;
 border:1px solid rgba(232,200,122,.42);border-radius:var(--r-card);color:var(--ivory);text-align:left;cursor:pointer;font-family:Barlow,sans-serif;
 background:radial-gradient(circle at 8% 50%,rgba(232,200,122,.2),transparent 26%),linear-gradient(100deg,rgba(232,200,122,.13),rgba(10,33,27,.96) 38%,rgba(5,19,14,.99));box-shadow:inset 0 1px rgba(245,239,221,.08),0 10px 26px rgba(0,0,0,.38)}
.climbStrip:hover,.climbStrip:focus-visible{border-color:var(--brass-hi);outline:none;box-shadow:inset 0 1px rgba(245,239,221,.1),0 12px 30px rgba(0,0,0,.44),0 0 0 2px rgba(232,200,122,.09)}
.seatCrestMark{display:inline-grid;place-items:center;position:relative;overflow:visible}.seatCrestMark>img{display:block;width:100%;height:100%;object-fit:contain}
.climbStripCrest{grid-area:crest;display:grid;place-items:center;align-self:stretch;border-right:1px solid rgba(232,200,122,.18)}.climbStripCrest .seatCrestMark{width:68px;height:68px;filter:drop-shadow(0 0 12px rgba(232,200,122,.32)) drop-shadow(0 7px 10px rgba(0,0,0,.72))}
.climbStripCurrent{grid-area:current;display:grid;gap:3px;min-width:0}.climbStripCurrent>small,.climbStripProgress>small{color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.climbStripCurrent>b{color:var(--ivory);font:400 20px/1 'Bebas Neue';letter-spacing:var(--ls-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.climbStripCurrent>span{color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}
.climbStripProgress{grid-area:progress;display:grid;gap:3px;min-width:0;padding-left:14px;border-left:1px solid rgba(232,200,122,.18)}.climbStripProgress>b{color:var(--ivory);font:800 11px/1.15 Barlow;letter-spacing:var(--ls-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.climbStripProgress>i{display:block;width:100%;height:6px;margin-top:3px;border:1px solid rgba(232,200,122,.2);border-radius:var(--r-chip);background:rgba(255,255,255,.07);overflow:hidden}.climbStripProgress>i>em{display:block;height:100%;border-radius:var(--r-chip);background:linear-gradient(90deg,var(--brass-deep),var(--brass-hi));box-shadow:0 0 10px rgba(232,200,122,.5)}
.climbPath{grid-area:path;position:relative;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));align-items:center;gap:4px;min-width:0}/* Build 400: ten crests share the line by dimension - each column is a tenth of whatever width the strip has, so a 360px phone fits all ten without the page ever scrolling sideways */.climbPath::before{content:"";position:absolute;left:5%;right:5%;top:22px;height:1px;background:linear-gradient(90deg,rgba(232,200,122,.72),rgba(232,200,122,.22));z-index:0}.climbPathNode{position:relative;z-index:1;display:grid;justify-items:center;gap:1px;min-width:0}.climbPathNode .seatCrestMark{width:100%;max-width:42px;height:auto;aspect-ratio:1;filter:drop-shadow(0 4px 7px rgba(0,0,0,.7));transition:transform .2s ease,filter .2s ease,opacity .2s ease}.climbPathNode>i{color:var(--muted);font:800 11px Barlow;font-style:normal}.climbPathNode.passed .seatCrestMark{filter:saturate(.72) brightness(.76) drop-shadow(0 3px 5px rgba(0,0,0,.6))}.climbPathNode.sealed .seatCrestMark{opacity:.42;filter:grayscale(1) brightness(.42)}.climbPathNode.here .seatCrestMark{transform:translateY(-2px) scale(1.13);filter:drop-shadow(0 0 8px rgba(232,200,122,.72)) drop-shadow(0 5px 8px rgba(0,0,0,.7))}.climbPathNode.here>i{color:var(--ivory)}.climbPathNode.here::after{content:"";position:absolute;left:50%;bottom:-4px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--ivory);box-shadow:0 0 7px var(--brass-hi)}
.climbStripAction{grid-area:action;align-self:start;color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);white-space:nowrap}.climbStripAction>i{margin-left:4px;color:var(--ivory);font:400 16px/1 'Bebas Neue';font-style:normal;vertical-align:-1px}
/* ══ BUILD 402 — THE PLAY HERO (FRONT OF HOUSE PLAN D5 / §4.1) ═══════════════════════════════
   The title's Climb card grows a hero band UNDER its pinned first row. meta.js paintPlayHero()
   writes it into one aria-hidden span inside the button, so the mode list still contains exactly
   five .ttmode buttons and THE CLIMB still reads <span>THE CLIMB</span><b>ENTER</b>. The band is
   never a control: the whole card is the control, and the route re-uses the .climbPath instrument
   the setup sheet and the profile already own rather than inventing a second one. */
.climbHero{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--sp-3);min-width:0;margin-top:var(--sp-3);padding-top:var(--sp-3);border-top:1px solid var(--hairline)}
.climbHeroCrest{display:grid;place-items:center}
.climbHeroCrest .seatCrestMark{width:88px;height:88px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.6))}
.climbHeroCopy{display:grid;gap:var(--sp-2);min-width:0}
.climbHeroNow{min-width:0;color:var(--ivory);font-family:var(--font-display);font-size:var(--fs-24);font-weight:800;font-style:normal;line-height:1.05;letter-spacing:var(--ls-label)}
.climbHeroPath{grid-area:auto;gap:3px}
.climbHeroPath .seatCrestMark{max-width:30px}
.climbHeroPath::before{top:15px}
.climbHeroBar{display:block;height:4px;border:1px solid var(--hairline);border-radius:var(--r-pill);background:rgba(5,19,14,.7);overflow:hidden}
.climbHeroBar>em{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-hi))}
.climbHeroNext{min-width:0;color:var(--brass-hi);font:800 11px/1.3 Barlow;font-style:normal;letter-spacing:var(--ls-eyebrow)}/* the next Circle and its NAME are the point of the line - it wraps rather than ending in an ellipsis */
/* on a phone the ten numerals cannot share 300px with the ten crests without touching, and the
   crest states (passed / here / sealed) already carry the route - so the numerals stand down and
   the Circle the player is IN is named in full on the line above. */
@media(max-width:700px){.climbHeroCrest .seatCrestMark{width:64px;height:64px}.climbHeroNow{font-size:var(--fs-20)}.climbHeroPath .seatCrestMark{max-width:26px}.climbHeroPath::before{top:13px}.climbHeroPath>.climbPathNode>i{display:none}}
/* Build 402: on the shortest supported phone the hero pays for its own height - a smaller crest
   and tighter bands, never a fact removed. The title scrolls below this point, as it already did. */
@media(max-height:690px) and (max-width:700px){.climbHeroCrest .seatCrestMark{width:48px;height:48px}.climbHero{gap:var(--sp-2);margin-top:var(--sp-2);padding-top:var(--sp-2)}.climbHeroCopy{gap:var(--sp-1)}}
/* THE ONE ACTION IS VISIBLE. <b>ENTER</b> is pinned copy inside the pinned first row, so it is not
   moved or renamed - it is DRESSED as the brass chip the card's one action deserves. The card is
   still the only clickable thing: this is a span of paint inside the button, not a second control.
   Desktop keeps it right-aligned on the top row; a phone puts it full width under the hero, where
   a thumb expects the action. */
.ttmode.climbMode>b{display:grid;place-items:center;min-height:var(--tap);padding:0 var(--sp-5);border:1px solid var(--brass-hi);border-radius:var(--r-card);background:linear-gradient(180deg,var(--brass-hi),var(--brass));color:var(--ink-2);font:800 14px Barlow;letter-spacing:var(--ls-eyebrow);box-shadow:inset 0 1px rgba(255,255,255,.55),0 3px 0 var(--brass-deep)}
.ttmode.climbMode:hover>b{filter:brightness(1.05)}
/* the raised surface is spent on exactly ONE thing on this screen: the hero (PLAN §2.4) */
.ttmode.climbMode.surface.raised{border-color:color-mix(in srgb,var(--brass-hi) 46%,transparent);background:linear-gradient(150deg,var(--ink-3),var(--ink) 78%)}
.ttmode.climbMode.surface.raised:hover{border-color:var(--brass-hi)}
@media(max-width:700px){
 .ttmode.climbMode{grid-template-columns:36px minmax(0,1fr)}
 .ttmode.climbMode>.modeIcon{grid-column:1;grid-row:1}
 .ttmode.climbMode>span:nth-child(2){grid-column:2;grid-row:1}
 .ttmode.climbMode>.climbHero{grid-column:1/-1;grid-row:2}
 .ttmode.climbMode>b{grid-column:1/-1;grid-row:3;width:100%;box-sizing:border-box;margin-top:var(--sp-1)}
}
/* THE TOWER */
.climbTower{position:fixed;inset:0;z-index:132;display:flex;align-items:center;justify-content:center;padding:14px;box-sizing:border-box;overflow:auto;
 background:radial-gradient(circle at 50% 0%,rgba(232,200,122,.16),transparent 48%),rgba(5,19,14,.96);opacity:0;transition:opacity .28s ease}
.climbTower.on{opacity:1}
.climbTowerCard{position:relative;width:min(96vw,560px);max-height:calc(100dvh - 28px);overflow:auto;padding:18px 16px 14px;box-sizing:border-box;border:1px solid rgba(232,200,122,.55);border-radius:var(--r-card);
 background:linear-gradient(180deg,rgba(10,33,27,.98),rgba(5,19,14,.99));box-shadow:0 30px 70px rgba(0,0,0,.6),inset 0 1px rgba(245,239,221,.08);transform:translateY(14px);transition:transform .38s cubic-bezier(.2,.8,.2,1)}
.climbTower.on .climbTowerCard{transform:none}
.climbTowerHead{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;padding-bottom:12px;border-bottom:1px solid rgba(232,200,122,.28)}
.climbTowerHead span{display:block;color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.climbTowerHead b{display:block;margin-top:3px;font:400 24px/1 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--ivory)}
.climbTowerHead small{color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);text-align:right}
.climbFloors{position:relative;list-style:none;margin:6px 0 0;padding:0 0 0 30px}
.climbFloors::before{content:"";position:absolute;left:12px;top:14px;bottom:14px;width:2px;border-radius:var(--r-chip);background:linear-gradient(180deg,rgba(232,200,122,.85),rgba(232,200,122,.25) 55%,rgba(232,200,122,.08))}
.climbFloor{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:64px;padding:8px 10px 8px 6px;margin-top:6px;border:1px solid transparent;border-radius:var(--r-card)}
.climbFloor::before{content:"";position:absolute;left:-23px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--ink-3);border:1px solid rgba(232,200,122,.35)}
.climbFloor img{width:50px;height:50px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.55))}
.climbFloor b{display:block;font:400 16px/1 'Bebas Neue';letter-spacing:var(--ls-label);color:var(--ivory)}.climbFloor b small{margin-left:7px;color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);vertical-align:2px}
.climbFloor p{margin:4px 0 0;font:650 11px/1.38 Barlow;color:var(--ivory)}
.climbFloor>em{font:800 11px Barlow;letter-spacing:var(--ls-eyebrow);color:var(--muted);font-style:normal;white-space:nowrap}
.climbFloor.passed img{filter:saturate(.8) brightness(.8) drop-shadow(0 3px 6px rgba(0,0,0,.5))}.climbFloor.passed::before{background:var(--brass-deep);border-color:var(--brass-hi)}.climbFloor.passed>em{color:var(--brass-hi)}
.climbFloor.sealed img{filter:grayscale(1) brightness(.28) contrast(1.2);opacity:.8}.climbFloor.sealed b{color:var(--muted)}.climbFloor.sealed p{color:var(--muted)}
.climbFloor.here{border-color:rgba(232,200,122,.8);background:linear-gradient(90deg,rgba(232,200,122,.16),rgba(232,200,122,.04));box-shadow:0 0 0 1px rgba(232,200,122,.15),0 10px 26px rgba(0,0,0,.35);grid-template-columns:52px minmax(0,1fr)}
.climbFloor.here::before{background:var(--ivory);border-color:var(--brass-hi);box-shadow:0 0 10px rgba(245,239,221,.9);animation:climbPulse 3s ease-in-out infinite}
.climbFloor.here img{transform:scale(1.12);filter:drop-shadow(0 0 12px rgba(232,200,122,.7)) drop-shadow(0 5px 9px rgba(0,0,0,.6))}
.climbFloor.here b{color:var(--ivory)}.climbFloor.here>em{color:var(--ivory)}
.climbStanding{margin-top:6px}.climbStanding>i{display:block;height:5px;overflow:hidden;border:1px solid rgba(232,200,122,.3);border-radius:var(--r-card);background:var(--ink)}.climbStanding>i>em{display:block;height:100%;border-radius:var(--r-card);background:linear-gradient(90deg,var(--brass-deep),var(--brass-hi));box-shadow:0 0 8px rgba(232,200,122,.45);transition:width .8s cubic-bezier(.2,.85,.25,1)}
.climbStandingEnds{display:flex;justify-content:space-between;gap:10px;margin-top:4px;color:var(--muted);font:750 11px Barlow;letter-spacing:var(--ls-label)}
.climbTowerFoot{margin-top:12px;display:grid;gap:8px}.climbBoundaries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.climbBoundaries>span{display:grid;gap:3px;padding:8px 10px;border:1px solid rgba(232,200,122,.18);background:rgba(5,19,14,.58)}.climbBoundaries small{color:var(--muted);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.climbBoundaries b{color:var(--ivory);font:800 11px/1.2 Barlow;letter-spacing:var(--ls-label)}
.climbTower .v2opt{width:100%;min-width:0;box-sizing:border-box;margin:0}
@keyframes climbPulse{0%,100%{opacity:.6}50%{opacity:1}}
@media(max-width:760px){.climbStrip{grid-template-columns:58px minmax(0,1fr) auto;grid-template-areas:"crest current action" "progress progress progress" "path path path";gap:8px 11px;min-height:0;padding:10px}.climbStripCrest{grid-row:1;border-right:0}.climbStripCrest .seatCrestMark{width:54px;height:54px}.climbStripProgress{padding:8px 0 0;border-left:0;border-top:1px solid rgba(232,200,122,.16)}.climbPathNode .seatCrestMark{max-width:38px}.climbPath::before{top:20px}.climbStripCurrent>b{font-size:var(--fs-20)}}
@media(max-width:400px){.climbStrip{grid-template-columns:52px minmax(0,1fr) auto;gap:7px 8px}.climbStripCrest .seatCrestMark{width:48px;height:48px}.climbStripCurrent>b{font-size:var(--fs-16)}.climbStripAction{font-size:var(--fs-11);letter-spacing:var(--ls-label)}.climbPath{gap:2px}.climbPathNode .seatCrestMark{max-width:34px}.climbPath::before{top:17px}.climbFloor{grid-template-columns:40px minmax(0,1fr) auto;min-height:58px;gap:8px;padding-right:7px}.climbFloor img{width:38px;height:38px}.climbFloor b{font-size:var(--fs-16)}.climbFloor b small{display:block;margin:2px 0 0;font-size:var(--fs-11)}.climbFloor p{font-size:var(--fs-11)}.climbFloor>em{font-size:var(--fs-11);letter-spacing:var(--ls-label)}.climbTowerCard{padding:14px 10px 12px}.climbFloors{padding-left:24px}.climbFloors::before{left:9px}.climbFloor::before{left:-19px}.climbBoundaries{grid-template-columns:1fr}}
/* Build 402: at 390px the compact strip printed "CIRCLE I..." - the Circle's NAME is the whole
   point of this hero, so on a phone it wraps to two lines instead of ending in an ellipsis, and
   the CURRENT CIRCLE eyebrow stands down to pay for the room (the line below it says IV OF X). */
@media(max-width:700px){.climbStripCurrent>small{display:none}.climbStripCurrent>b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.05}}
@media(prefers-reduced-motion:reduce){.climbTower,.climbTowerCard,.climbStanding>i>em{transition:none}.climbFloor.here::before{animation:none}}
.honour.circleHonour img{width:30px;height:30px}
/* FRONT-OF-HOUSE END */   /* ceremony block below is out of Build 401A's scope
   (ARCH-MAP §2(d): .founderCeremony .friendshipCeremony .houseCeremony .climbProgressCeremony
   .seatCeremony). Its literals, sizes and radii are left exactly as Build 400 wrote them and
   tokens-test.js does not scan between these two markers. */
/* Build 398 — A WIN MOVES THE LINE. This is the compact Climb strip's progress instrument recut
   into the shared ceremony shell: one held crest, one honest before→after fill, no visible rating. */
.climbProgressCeremony .houseCeremonyBurst{width:min(64vw,460px)}
.climbProgressCeremony .houseCeremonyRays i{top:39%}
.climbProgressCrest{width:min(25vw,118px);height:min(25vw,118px);animation:climbCrestIn .7s cubic-bezier(.15,.9,.2,1) both}
.climbProgressCeremony>strong{margin-top:18px;font-size:clamp(32px,6vw,52px)}
.climbProgressCeremony .houseCeremonyOath{margin-top:8px;font-size:15px}
.climbProgressPanel{width:min(88vw,520px);margin-top:18px;padding:13px 15px 12px;box-sizing:border-box;border:1px solid rgba(232,200,122,.48);border-radius:12px;background:linear-gradient(150deg,rgba(14,45,33,.94),rgba(3,16,12,.96));box-shadow:inset 0 1px rgba(255,247,217,.07),0 12px 28px rgba(0,0,0,.3)}
.climbProgressPanel>span,.climbProgressPanel>footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.climbProgressPanel>span b,.climbProgressPanel>span small,.climbProgressPanel>footer span,.climbProgressPanel>footer b{font:800 9px Barlow;letter-spacing:1.35px}.climbProgressPanel>span b{color:#fff2c2}.climbProgressPanel>span small{color:#8fe6b4}.climbProgressPanel>i{display:block;height:9px;margin:9px 0 7px;overflow:hidden;border:1px solid rgba(232,200,122,.35);border-radius:8px;background:#06130f;box-shadow:inset 0 2px 5px rgba(0,0,0,.72)}
.climbProgressFill{position:relative;display:block;height:100%;border-radius:7px;background:linear-gradient(90deg,#806122,#d7b861 72%,#fff0b3);box-shadow:0 0 14px rgba(236,208,138,.62);transition:width 1.15s cubic-bezier(.18,.82,.2,1)}
.climbProgressFill::after{content:"";position:absolute;right:0;top:-3px;width:13px;height:15px;border-radius:50%;background:#fff4c9;box-shadow:0 0 14px #ecd08a;animation:climbLinePulse .9s ease-in-out infinite alternate}
.climbProgressPanel>footer span{color:#9db4a9}.climbProgressPanel>footer b{color:#e8c87a;text-align:right}
@keyframes climbCrestIn{from{opacity:0;transform:scale(1.5) translateY(-10px)}65%{transform:scale(.96)}to{opacity:1;transform:none}}@keyframes climbLinePulse{from{opacity:.62;transform:scale(.8)}to{opacity:1;transform:scale(1.08)}}
@media(max-width:420px){.climbProgressCeremony{padding:16px}.climbProgressCeremony .houseCeremonyKicker{margin-bottom:9px}.climbProgressCrest{width:92px;height:92px}.climbProgressCeremony>strong{margin-top:15px}.climbProgressPanel{margin-top:14px;padding:11px 12px}.climbProgressPanel>span small{font-size:8px;letter-spacing:.8px}.climbProgressCeremony .v2opt{margin-top:16px}}
/* the re-forge: the old medal is held for a beat, then shrinks and fades as the new one slams in */
.seatForge{position:relative}.seatForge img{position:absolute;inset:0;width:100%;height:100%}
.seatForge .seatOld{animation:seatOldOut 1.1s .5s cubic-bezier(.4,0,.8,.2) both}
.seatForge .seatNew{opacity:0;animation:seatNewIn .9s 1.35s cubic-bezier(.15,.9,.2,1) both}
.seatCeremony .ceremonyCrest{animation:none}.seatCeremony .ceremonyCrest b{animation-delay:2.05s}
.seatCeremony>strong,.seatCeremony .houseCeremonyOath,.seatCeremony .climbProgressPanel,.seatCeremony .houseCeremonyHint,.seatCeremony .v2opt{opacity:0;animation:seatCopyIn .6s 2.1s ease-out both}
@keyframes seatOldOut{from{opacity:1;transform:scale(.72)}40%{opacity:1;transform:scale(.78) rotate(-3deg)}to{opacity:0;transform:scale(.2) rotate(12deg)}}
@keyframes seatNewIn{from{opacity:0;transform:scale(2.2) rotate(-14deg)}62%{opacity:1;transform:scale(.94) rotate(2deg)}to{opacity:1;transform:none}}
@keyframes seatCopyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Build 399 — the promotion reads in cause-and-effect order: progress first, boundary impact,
   then re-forging and the awarded state. This overrides only winning Circle crossings; ordinary
   progress, non-win demotion and legacy promotion receipts retain their established timing. */
.seatPromotion.hasWinProgress .houseCeremonyKicker{order:1}
.seatPromotion.hasWinProgress .climbProgressPanel{order:2;position:relative;margin-top:0;opacity:0;animation:promotionPanelIn .36s .14s ease-out both}
.seatPromotion.hasWinProgress .ceremonyCrest{order:3;width:min(27vw,130px);height:min(27vw,130px);margin-top:16px;animation:none}
.seatPromotion.hasWinProgress>strong{order:4}.seatPromotion.hasWinProgress .houseCeremonyOath{order:5}.seatPromotion.hasWinProgress .houseCeremonyHint{order:6}.seatPromotion.hasWinProgress .v2opt{order:7}
.seatPromotion.hasWinProgress .climbProgressFill{transition-duration:1.28s;transition-timing-function:cubic-bezier(.22,.7,.18,1)}
.seatPromotion.hasWinProgress .seatForge .seatOld{opacity:1;transform:scale(.76);animation:none}
.seatPromotion.hasWinProgress .seatForge .seatNew{opacity:0;transform:scale(1.8) rotate(-10deg);animation:none}
.seatPromotion.hasWinProgress .ceremonyCrest b,.seatPromotion.hasWinProgress>strong,.seatPromotion.hasWinProgress .houseCeremonyOath,.seatPromotion.hasWinProgress .houseCeremonyHint,.seatPromotion.hasWinProgress .v2opt{opacity:0;animation:none}
.seatPromotion.hasWinProgress .v2opt{pointer-events:none}
.seatPromotion.hasWinProgress.progressHit .climbProgressPanel{animation:promotionBoundaryHit .52s cubic-bezier(.16,.8,.2,1) both}
.seatPromotion.hasWinProgress.progressHit .climbProgressFill::after{animation:promotionBoundaryFlash .62s ease-out both}
.seatPromotion.hasWinProgress.progressHit .seatForge .seatOld{animation:promotionOldOut .58s .16s cubic-bezier(.55,0,.8,.25) both}
.seatPromotion.hasWinProgress.promotionAwarded .seatForge .seatNew{animation:promotionNewIn .82s cubic-bezier(.12,.9,.18,1) both}
.seatPromotion.hasWinProgress.promotionAwarded .ceremonyCrest b{animation:promotionCopyIn .42s .5s ease-out both}
.seatPromotion.hasWinProgress.promotionAwarded>strong{animation:promotionCopyIn .5s .48s ease-out both}
.seatPromotion.hasWinProgress.promotionAwarded .houseCeremonyOath{animation:promotionCopyIn .5s .62s ease-out both}
.seatPromotion.hasWinProgress.promotionAwarded .houseCeremonyHint{animation:promotionCopyIn .5s .75s ease-out both}
.seatPromotion.hasWinProgress.promotionAwarded .v2opt{pointer-events:auto;animation:promotionCopyIn .5s .88s ease-out both}
@keyframes promotionPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes promotionBoundaryHit{0%{opacity:1;transform:scale(1);box-shadow:inset 0 1px rgba(255,247,217,.07),0 12px 28px rgba(0,0,0,.3)}35%{opacity:1;transform:scale(1.025);box-shadow:inset 0 0 18px rgba(255,239,178,.28),0 0 32px rgba(232,200,122,.68)}100%{opacity:1;transform:none;box-shadow:inset 0 1px rgba(255,247,217,.07),0 12px 28px rgba(0,0,0,.3)}}
@keyframes promotionBoundaryFlash{0%{opacity:1;transform:scale(.9);box-shadow:0 0 12px #ecd08a}45%{opacity:1;transform:scale(2.2);box-shadow:0 0 34px 9px #fff0b3}100%{opacity:.78;transform:scale(1);box-shadow:0 0 14px #ecd08a}}
@keyframes promotionOldOut{0%{opacity:1;transform:scale(.76)}35%{opacity:1;transform:scale(.84) rotate(-3deg);filter:brightness(1.45) drop-shadow(0 0 36px #e8c87a)}100%{opacity:0;transform:scale(.18) rotate(14deg);filter:brightness(.7)}}
@keyframes promotionNewIn{0%{opacity:0;transform:scale(2.15) rotate(-13deg);filter:brightness(2.2) drop-shadow(0 0 48px #fff0b3)}58%{opacity:1;transform:scale(.92) rotate(2deg)}78%{transform:scale(1.06) rotate(-1deg)}100%{opacity:1;transform:none;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--house) 78%,transparent))}}
@keyframes promotionCopyIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.seatForge img,.seatCeremony>*,.climbProgressCrest,.climbProgressFill::after{animation:none!important;opacity:1!important;transform:none!important}.climbProgressFill{transition:none!important}.seatForge .seatOld{display:none}}
/* the quiet one: no rays, no burst, a dimmer field, the old medal fades straight into the new - no slam */
.seatDemote .houseCeremonyRays,.seatDemote .houseCeremonyBurst{display:none}
.seatDemote .seatForge .seatOld{animation:seatOldFade 1.6s .4s ease-in-out both}
.seatDemote .seatForge .seatNew{animation:seatNewFade 1.6s .4s ease-in-out both}
.seatDemote>strong{color:#dfe6ea;text-shadow:0 3px 0 rgba(0,0,0,.5)}
.seatDemote>strong,.seatDemote .houseCeremonyOath,.seatDemote .houseCeremonyHint,.seatDemote .v2opt{animation-delay:1.4s}
@keyframes seatOldFade{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}
@keyframes seatNewFade{from{opacity:0;transform:scale(.9);filter:grayscale(.6)}to{opacity:1;transform:none;filter:none}}
/* FRONT-OF-HOUSE START */
/* Build 393: the crest's own seven quote slots carry progression. The Build 392 circular bezel is
   deliberately suppressed, so neither the profile mark nor the 22px public credential reads as a medal. */
.lbCred .crCircle::after{display:none!important}
.publicSeatCrest{display:grid;grid-template-columns:68px minmax(0,1fr);align-items:center;gap:14px;margin:12px 0;padding:11px 13px;border:1px solid rgba(232,200,122,.52);border-radius:var(--r-card);background:linear-gradient(105deg,rgba(232,200,122,.12),rgba(5,19,14,.94) 44%);box-shadow:inset 0 1px rgba(245,239,221,.06),0 8px 20px rgba(0,0,0,.24)}
.publicSeatCrest>img{display:block;width:68px;height:68px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(0,0,0,.7))}.publicSeatCrest span,.publicSeatCrest small{display:block;color:var(--brass-hi);font:800 11px Barlow;letter-spacing:var(--ls-eyebrow)}.publicSeatCrest b{display:block;margin:3px 0 4px;color:var(--ivory);font:400 20px/1 'Bebas Neue';letter-spacing:var(--ls-label)}.publicSeatCrest small{color:var(--muted);font-size:var(--fs-11)}.socialProfileDialog{max-width:min(92vw,560px)}
@media(max-width:420px){.publicSeatCrest{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:9px}.publicSeatCrest>img{width:58px;height:58px}.publicSeatCrest b{font-size:var(--fs-16)}}

/* ══ BUILD 403 — THE FRIENDS PAGE AND THE PROFILE'S THREE TABS ════════════════════════════════
   (FRONT OF HOUSE PLAN D3 / D8 / §4.4 / §4.5). Two compositions from one component set: phone and
   tablet keep the single column they always had, and only at WIDE_DESKTOP_AT does either page
   become two columns. Nothing here carries information a phone cannot reach in one tap. */

/* FRIENDS - friends (with the player code and the ADD field) left, recent players right */
.friendsPanes{display:grid;gap:var(--sp-4);align-items:start}
.friendsPanes>.socialList{margin-top:0;min-width:0}
@media(min-width:1180px){.friendsPanes{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:var(--sp-5)}}

/* THE TAB BAR (PLAN §2.4). One declaration, here; the character sheet takes the same one in 404. */
.tabs{display:flex;gap:var(--sp-2);margin:0 0 var(--sp-4);padding:0 0 var(--sp-3);border-bottom:1px solid var(--hairline)}
.tab{flex:1 1 0;min-width:0;min-height:var(--tap);padding:0 var(--sp-3);border:1px solid var(--hairline);border-radius:var(--r-card);background:var(--ink-2);color:var(--muted);font:900 12px Barlow;letter-spacing:var(--ls-eyebrow);white-space:nowrap;cursor:pointer;transition:color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.tab:hover{color:var(--ivory)}
.tab:focus-visible{outline:2px solid var(--brass-hi);outline-offset:2px}
.tab[aria-selected="true"]{border-color:var(--brass);background:linear-gradient(180deg,rgba(232,200,122,.22),rgba(232,200,122,.05));color:var(--brass-hi)}
.tabPanel{min-width:0}
.tabPanel>.memberCard:first-child,.tabPanel>.matchHistory:first-child{margin-top:0}

/* THE HERO LINE - character, mastery, House, Circle; each printed once on this screen */
.profileLine{margin:6px 0 0;color:var(--ivory);font:700 16px Barlow;letter-spacing:0}
.profileAccountRows{margin:0}
.profileAccountRows>.row{cursor:default}
.profileAccountRows>.row:hover{background:transparent}
.profileAccountRows>.row>b{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;text-align:right;color:var(--brass-hi)}
.profileAccountRows>.row>small{flex:none;margin-left:auto;color:var(--muted);font:700 12px Barlow;letter-spacing:var(--ls-label)}
.profileAccountRows>.row>.profileAccountCode{font:400 20px 'Bebas Neue';letter-spacing:var(--ls-label)}
.profileAccountRows>.row>button{flex:none;min-width:118px}

.profilePage{display:grid;gap:var(--sp-5);align-items:start}
.profileTabsPane{min-width:0}
@media(max-width:700px){
 .profileLine{font-size:var(--fs-14)}
 .tab{padding:0 var(--sp-2);font-size:var(--fs-11)}
 .profileAccountRows>.row{flex-wrap:wrap;padding-top:var(--sp-2);padding-bottom:var(--sp-2)}
 .profileAccountRows>.row>button{width:100%;min-width:0}
}
@media(min-width:1180px){
 /* The hero is a column of its own and STAYS while the panels scroll under it (#metaPanelBody is
    the scrollport, so its own top padding is the whole clearance the sticky offset needs). */
 .profilePage{grid-template-columns:340px minmax(0,1fr);gap:var(--sp-6)}
 .profilePage>.profileHero{position:sticky;top:var(--sp-2);grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--sp-4);text-align:center}
 .profilePage>.profileHero>div{width:100%;min-width:0}
 /* A 200px circle: 194px of portrait plus its 2x3px of brass, sized to the picture's BORDER box -
    the sizing Build 401B fixed the CHANGE LOOK overflow with, scaled up rather than re-derived.
    The phone and tablet sizes above are untouched. */
 .profilePage .profileHeroPortrait.wardrobeShortcut{width:200px}
 .profilePage .profileHeroPortraitCircle{width:200px;height:200px}
 .profilePage .profileHeroPortraitCircle>img{width:194px;height:194px}
 .profilePage .profileNameRow{grid-template-columns:minmax(0,1fr);justify-items:center;gap:var(--sp-2)}
 .profilePage .profileHeroActions{justify-content:center;flex-wrap:wrap}
 .tab{flex:0 1 auto;min-width:132px}
}

/* ═══ Build 404 — THE COLLECTION TWO-PANE AND THE CHARACTER SHEET (PLAN §4.2, D8) ═══════════════
   Phone and tablet: one column, the grid IS the page, a card opens the `character` route.
   Wide desktop (≥1180): the grid keeps a 380px column with its own scroll and the sheet is
   rendered beside it, swapped in place. Four cards across a 380px column would put an 86px card
   under a 96px portrait, so the grid inside the pane is two across; the full-width grid keeps its
   four (desktop) and gains three at tablet. */
.characterSheet{display:grid;gap:var(--sp-5);align-items:start;min-width:0}
.characterXp{margin:var(--sp-2) 0 0}
.characterAction{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-top:var(--sp-3)}
.characterAction button{min-width:220px}
.characterTabsPane{min-width:0}
.tabPanel>.masteryRewards{margin-top:0;border-top:0;padding-top:0}
.collectionPanes{min-width:0}
.collectionGridPane{min-width:0}
.collectionSheetPane{min-width:0}
@media(min-width:1180px){
 .collectionPanes.wide{display:grid;grid-template-columns:380px minmax(0,1fr);gap:var(--sp-5);align-items:start}
 .collectionPanes.wide .collectionGridPane{position:sticky;top:0;max-height:calc(100dvh - 260px);overflow-y:auto;overscroll-behavior:contain;padding-right:var(--sp-2)}
 .collectionPanes.wide .characterGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .collectionPanes.wide .characterCard{min-height:196px}
 .collectionPanes.wide .characterBrowse{max-width:520px}
}
@media(min-width:701px) and (max-width:1179px){
 .characterGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:700px){
 .characterAction button{width:100%;min-width:0}
}