/* The Gilded Chamber redesign layer. Loaded last. Same structure as Mafia Night (actions left, logo and title right on desktop,
   step transitions, footer), in the Chamber's own orange/ink colours and its own Big Shoulders Display type (the art deco face stays in Mafia only).
   Motion: transform and opacity only, one easing, no layout shift. Off for reduced motion and html.fx-off. */
@font-face{font-family:"Big Shoulders Display";font-weight:100 900;font-style:normal;font-display:swap;src:url(/fonts/big-shoulders-display-core.woff2) format("woff2");unicode-range:U+20-7E,U+A0,U+B7,U+D7,U+200B,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026}@font-face{font-family:"Big Shoulders Display";font-weight:100 900;font-style:normal;font-display:swap;src:url(/fonts/big-shoulders-display-ext.woff2) format("woff2");unicode-range:U+A1-B6,U+B8-D6,U+D8-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+300-301,U+303-304,U+308-309,U+323,U+2009,U+201A,U+201E,U+2032-2033,U+2039-203A,U+2044,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
:root{--gc-ease:cubic-bezier(.2,.8,.2,1);--display-gilded:"Big Shoulders Display","Rubik","Rubik Fallback",system-ui,sans-serif;
  --paper:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ---- type: Big Shoulders Display (condensed 1920s Chicago poster face) for the title and headings, Rubik stays for reading */
.wordmark,.phase-title,.block-title,.path-title{font-family:var(--display-gilded);font-weight:800;letter-spacing:.01em;hyphens:none;overflow-wrap:normal;text-wrap:balance}
.wordmark{line-height:1.04;text-transform:none}
.home .wordmark{font-size:clamp(2.3rem,10.5vw,4rem)}
.block-title,.path-title{line-height:1.12}
.side b,.how h3{hyphens:none}

/* ---- background art: a slowly turning sun and gilded columns, fills the desktop gaps */
#app{position:relative;z-index:1}
.bg-art{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:radial-gradient(90% 60% at 85% 0%,rgba(240,122,34,.10),transparent 60%),radial-gradient(70% 50% at 0% 100%,rgba(226,176,74,.06),transparent 60%)}
.bg-sun{position:absolute;right:-18vmin;top:-14vmin;width:min(90vmin,820px);height:auto;opacity:.16;transform-origin:50% 50%}
/* the sun behind the page turns one full revolution, easing to a stop where it started (no looping motion: design review, Oct 28);
   the final frame is the resting pose, which is also what reduced motion and effects-off show */
.sun-spin{transform-origin:400px 400px;animation:none} /* holds its resting pose: a two-minute turn does not fit the 400ms budget (2026-10-29) */
.sun-rays{transform-origin:400px 400px}
.bg-columns{position:absolute;left:0;bottom:0;width:min(100vw,900px);height:min(34vh,300px);opacity:.07}
@media (max-width:640px){.bg-sun{width:120vw;right:-40vw;top:-18vw;opacity:.14}.bg-columns{opacity:.05}}
html[data-screen="1"] .bg-art{display:none}
@keyframes gc-turn{to{transform:rotate(360deg)}}
/* the rays spiral in once on first load (they start rotated and shrunk, then unwind into place) */
.boot .sun-rays{animation:gc-spiral 400ms var(--gc-ease) both}
@keyframes gc-spiral{from{opacity:0;transform:rotate(-200deg) scale(.35)}to{opacity:1;transform:none}}

/* ---- home: Mafia structure. Back link on top, logo and title, then the actions, suggestions and footer */
.home-brand{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:var(--s4)}
.logo-mark{display:grid;place-items:center;width:72px;height:72px;border-radius:var(--f-r-card);background:var(--orange);color:var(--ink);box-shadow:0 10px 24px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.35);transform:rotate(-4deg)}
.logo-mark .ico,.logo-mark svg{width:48px;height:48px}
.logo-mark .ico{transform-origin:50% 50%}
.boot .logo-mark .ico{animation:gc-spiral 280ms var(--gc-ease) 120ms both}
.home-nav{display:flex}
.home-head{padding:0}
.home-meta{margin:0 0 var(--s1)}
.wrap.home .btn.big{width:100%;min-height:60px;margin-top:var(--s3);background:var(--go);color:var(--on-go);font-size:1.25rem;box-shadow:none}
@media (min-width:900px){
  .wrap.home{max-width:1180px;grid-template-columns:minmax(0,480px) minmax(0,1fr);column-gap:var(--s9,72px);align-items:start}
  .wrap.home .home-nav{grid-column:1/-1}
  .wrap.home .home-head{grid-column:2;grid-row:2;align-self:end}
  .wrap.home .home-hero{grid-column:2;grid-row:3;margin:0}
  .wrap.home .home-paths{grid-column:1;grid-row:2/span 3}
  .home .wordmark{font-size:clamp(3rem,5vw,4.8rem)}
  .home-brand{gap:var(--s5)}
  .logo-mark{width:92px;height:92px;border-radius:var(--f-r-card)}.logo-mark .ico{width:62px;height:62px}
  .more-games{grid-column:1/-1}.site-foot{grid-column:1/-1}
}
/* the bottom action bar is gone from home: the Open Chamber button now sits in the Host card */
.wrap.home{padding-bottom:var(--s6)}
.wrap:has(.sticky-act) .sticky-act::before{border-top:0}

/* ---- more games */
.more-games{display:grid;gap:var(--s3);max-width:100%}
.more-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.more-card{display:flex;align-items:center;gap:var(--s4);min-height:96px;padding:var(--s4);border-radius:var(--f-r-sheet);background:#1B1B22;color:#fff;text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.08),0 8px 22px rgba(0,0,0,.35);hyphens:none;overflow-wrap:normal}
.more-logo{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:var(--f-r-round);background:var(--tok,#2F6BD6);color:#fff}
.more-logo svg{width:32px;height:32px}
.more-mafia{--tok:#8E1620}.more-quest{--tok:#2C3B8F}.more-hub{--tok:#2F6BD6}
.more-text{display:grid;gap:2px;min-width:0}
.more-text b{font:800 1.1rem/1.15 var(--font-display);text-wrap:balance}
.more-text small{font-size:.85rem;line-height:1.35;color:rgba(255,255,255,.78)}
.more-card:focus-visible{outline:3px solid var(--focus,#fff);outline-offset:3px}

/* ---- footer: game links, then the low-light switch and a quiet Credits expander */
.site-foot{width:min(100%,46rem);margin-inline:auto;padding-inline:var(--gutter,16px);display:grid;gap:var(--s3);padding-block:var(--s5) var(--s6);margin-top:var(--s4);border-top:1px solid var(--divider);max-width:100%}
.site-foot nav{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5)}
.site-foot nav a{display:inline-flex;align-items:center;min-height:44px;color:#fff;font-weight:700;text-decoration:none}
.site-foot nav a[aria-current]{color:var(--brass)}
@media (hover:hover){.site-foot nav a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}}
.foot-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5)}
.credits-box{color:var(--smoke);font-size:.85rem}
.credits-box summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--smoke);font-weight:600}
.credits-box p{max-width:70ch;line-height:1.55;margin:var(--s2) 0 0}
.credits-box a{color:inherit}
.wrap.home .site-foot{width:auto;padding-inline:0;margin-inline:0}

/* ---- cards: tilt with the mouse (gentle on touch), crafted surface, no side stripes anywhere */
[data-card],.path,.side,.more-card,.stat,.how li,.gal-card,.pile > span{--crx:0deg;--cry:0deg;transform:perspective(900px) rotateX(var(--crx)) rotateY(var(--cry));transition:transform 400ms var(--gc-ease);transform-style:flat;backface-visibility:hidden}
[data-tilting]{transition:transform 180ms linear!important}
@media (hover:hover) and (pointer:fine){.more-card:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 30px rgba(0,0,0,.45)}}
.path,.more-card{position:relative}
.path::after,.more-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--paper);background-size:160px;opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.msg.k-claim,.msg.k-tool,.msg.k-host{box-shadow:none}
.history li,.history li.ok,.history li.bad{border-left:0;border-radius:0;background:rgba(255,255,255,.05)}
.slot small,.gal-card figcaption,.stat,.side small,.how p,.faq-q summary{hyphens:none;overflow-wrap:normal;text-wrap:balance}
.how p,.side small{text-wrap:pretty}
.stat,.gal-card{border-radius:var(--f-r-field)}

/* ---- FAQ: scannable answers, role entries read as short cards */
.faq-a{line-height:1.6}
.faq-a h4{margin:var(--s4) 0 var(--s1);font:800 .78rem/1.2 var(--font-ui,var(--font-display));letter-spacing:.1em;text-transform:uppercase}
.faq-a h4:first-child{margin-top:var(--s1)}
.faq-a ul,.faq-a ol{display:grid;gap:var(--s2);padding-left:1.25em;margin:var(--s2) 0}
.faq-a li{line-height:1.5}
.faq-a p{margin:var(--s2) 0}
.faq-group,.faq-q summary{hyphens:none}

/* ---- game log: the header and filter stay put while the entries scroll; entries are spaced and scannable */
.pane-sec[aria-label="Game log"]{position:relative}
.pane-sec[aria-label="Game log"] > .block-title,.pane-sec[aria-label="Game log"] > .seg{position:sticky;z-index:3;background:var(--orange)}
.pane-sec[aria-label="Game log"] > .block-title{top:var(--stk-top,0px);margin:0;padding:var(--s3) 0 var(--s2)}
.pane-sec[aria-label="Game log"] > .seg{top:calc(var(--stk-top,0px) + 3.2rem);padding-bottom:var(--s2);border-radius:0}
@media (max-width:1099px){.pane-sec[aria-label="Game log"]{--stk-top:var(--appbar-h,56px)}}
.msgs.log{gap:var(--s2)}
.msgs.log > .msg{display:grid;grid-template-columns:24px 1fr auto;align-items:start;gap:var(--s1) var(--s3);padding:var(--s3);line-height:1.5}
.msgs.log > .msg .log-ico{grid-row:1;grid-column:1;display:grid;place-items:center;width:24px;height:24px;opacity:.85}
.msgs.log > .msg .log-ico .ui-ico{width:18px;height:18px}
.msgs.log > .msg .txt{grid-column:2;flex:none}
.msgs.log > .msg time{grid-column:3;white-space:nowrap}
.msgs.log > .msg .tag{grid-column:2;justify-self:start}
.msg .pn{font-weight:800}

/* ---- host close-room */
.btn.danger{min-height:48px}
.resume-row{display:flex;align-items:center;gap:var(--s2)}
.resume-row .resume{flex:1;min-width:0}
.resume-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--f-r-round);background:rgba(255,255,255,.14);color:inherit;cursor:pointer}
.resume-x .ui-ico{width:18px;height:18px}
@media (hover:hover){.resume-x:hover{background:rgba(255,255,255,.26)}}
.ended{text-align:center;justify-items:center}
.ended .ico{width:72px;height:72px;color:var(--brass)}

/* ---- page transitions (Mafia's slide, in the Chamber's easing): the old screen slips left, the new one glides in */
@supports (view-transition-name:none){
  #app > main.wrap{view-transition-name:step}
  ::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
  ::view-transition-old(step){animation:gc-step-out 100ms var(--gc-ease) both}
  ::view-transition-new(step){animation:gc-step-in var(--t-enter) var(--gc-ease) both}
}
@keyframes gc-step-out{to{opacity:0;transform:translateX(-8px)}}
@keyframes gc-step-in{from{opacity:0;transform:translateX(16px)}}
/* the FAQ page opens on opacity + transform only, 220 ms, no view transition (app.js render) */
.faq-in{animation:gc-step-in 220ms var(--gc-ease) both}
.fx-off .faq-in{animation:none}
@media (prefers-reduced-motion:reduce){.faq-in{animation:none}}

/* ---- first-load entrance on the home screen only (html.boot is removed shortly after load) */
.boot .home-head,.boot .home-hero,.boot .home-paths > *,.boot .more-games{animation:gc-rise var(--t-enter) var(--gc-ease) both}
.boot .home-hero{animation-delay:30ms}.boot .home-paths > :nth-child(1){animation-delay:50ms}.boot .home-paths > :nth-child(2){animation-delay:80ms}.boot .home-paths > :nth-child(n+3){animation-delay:110ms}.boot .more-games{animation-delay:150ms}
@keyframes gc-rise{from{opacity:0;transform:translateY(8px)}}

/* ---- reduced motion and the Animations switch */
@media (prefers-reduced-motion:reduce){
  .sun-spin,.boot .sun-rays,.boot .logo-mark .ico,.boot .home-head,.boot .home-hero,.boot .home-paths > *,.boot .more-games{animation:none!important}
  [data-card],.path,.side,.more-card,.stat,.how li,.gal-card,.pile > span{transform:none!important;transition:none}
  ::view-transition-old(step),::view-transition-new(step){animation:none!important}
}
.fx-off .sun-spin,.fx-off.boot .sun-rays,.fx-off.boot .logo-mark .ico,.fx-off.boot .home-head,.fx-off.boot .home-hero,.fx-off.boot .home-paths > *,.fx-off.boot .more-games{animation:none!important}
.fx-off [data-card],.fx-off .path,.fx-off .side,.fx-off .more-card,.fx-off .stat,.fx-off .how li,.fx-off .gal-card,.fx-off .pile > span{transform:none!important}
.fx-off ::view-transition-old(step),.fx-off ::view-transition-new(step){animation:none!important}

/* ---- arriving from the hub (game end of the handoff): ONE opacity fade of the page, 300ms.
   Nothing moves: no logo overlay flying in from the handoff pose (design review, Oct 28: "That logo moving on game night is kinda
   janky") and the first-load entrance is skipped. html.handoff is set by the inline <head> script, never under reduced
   motion, and stays for the page's life, so nothing replays when html.boot goes. */
html.handoff #app,html.handoff .bg-art{animation:gc-hub-fade 300ms var(--gc-ease) both}
html.handoff.boot .sun-rays,html.handoff.boot .home-head,html.handoff.boot .home-hero,html.handoff.boot .home-paths > *,html.handoff.boot .more-games,html.handoff.boot .logo-mark .ico{animation:none}
@keyframes gc-hub-fade{from{opacity:0}to{opacity:1}}

/* ---- error pages (shared with src/error-page.js): Big Shoulders title under a gold deco rule, Rubik sentence-case body, two ways out */
.err-orn{display:block;position:relative;width:min(14rem,60%);height:2px;margin-block:var(--s2);background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent)}
.err-orn i{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--gold);transform:rotate(45deg)}
.err-title{font-family:var(--display-gilded);font-weight:800;font-size:clamp(1.7rem,1.3rem + 1.8vw,2.2rem);line-height:1.15;letter-spacing:.01em;text-transform:none;text-wrap:balance;hyphens:none;color:var(--orange)}
.err-page .muted{font-family:var(--font-ui);font-size:var(--fs-md);text-transform:none;letter-spacing:0;max-width:26rem}
.err-actions{display:grid;gap:var(--s3);width:100%;max-width:20rem;margin-top:var(--s3);justify-items:center}
.err-actions .btn{min-height:52px;width:100%;white-space:nowrap;font-size:var(--fs-md);background:var(--gold);border-color:var(--gold);color:var(--on-brass);box-shadow:none}
.err-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--s2);font:500 var(--fs-md)/1.2 var(--font-ui);color:var(--brass);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;white-space:nowrap}
.banner.banner-lost{flex-wrap:wrap}
.banner.banner-lost .err-actions{justify-items:stretch;align-items:center;gap:0;max-width:none;margin-top:0;flex-basis:100%}
.banner.banner-lost .err-actions .btn{min-height:48px;padding:0 12px;font-size:var(--fs-sm)}
.banner.banner-lost .err-link{min-height:44px;padding:0 var(--s1);font-size:var(--fs-sm);justify-self:center}

/* 390px check: the room code in the app bar must never be cut off by the phase badge; dice sizes are 44px targets; the power labels sit inside their slots. */
@media (max-width:430px){.appbar-title .ab-word{display:none}}
.seg.mini button{min-height:44px;min-width:44px}
.slot-power small{font-size:.5rem;letter-spacing:0;overflow-wrap:normal;hyphens:none}
/* Polish sweep (Oct 28). Long action-bar labels wrap onto two lines instead of running off both edges. */
.dock .btn{white-space:normal;text-overflow:clip;line-height:1.15;text-wrap:balance;padding-block:var(--s2)}
/* A one-word answer sits in the middle of its button, level with a two-line one beside it. */
.choice{align-content:center}
/* 44px targets: carousel dots (the dot itself stays small), log filters and side tabs, short text links. */
.car-dot{width:44px;height:44px}
.car-dot::before{inset:17px}
.seg button{min-height:44px}
a.link{min-width:44px;justify-content:center}
/* Phones: the tab bar and the game screen's fixed action button step aside while a field has focus, so they can't cover it above the
   keyboard. A form's own submit button (Take Seat) stays. */
@media (pointer:coarse) and (max-width:1099px){
  html:has(input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,textarea:focus) :is(.tabbar,.layout .sticky-act){display:none!important}
  html:has(input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,textarea:focus) .chat-form{bottom:env(safe-area-inset-bottom)}
}

/* ---- Rules & FAQ readability (design review, Oct 28: the FAQ is "super hard to read").
   The answer box was display:grid, so every inline <b>, <i> or bare text run in an answer became its own grid row and
   sentences broke apart mid-line ("The last / elected / Chancellor..."). Answers are normal flowing text again, the
   questions are a size up from the answers, and the FAQ cards drop the decorative rays that ran behind the text.
   Colours are unchanged (dark ink on Gilded orange, 6.66:1). */
.faq .faq-group{background-image:none}
.faq-q summary{font-size:1.1875rem;line-height:1.3;padding:var(--s3) 0;text-wrap:pretty}
.faq-a{display:block;font-size:var(--fs-md);line-height:1.6;padding:0 0 var(--s4) 1.4em}
.faq-a > :is(p,ul,ol,h4,table){margin:var(--s3) 0 0}
.faq-a > :is(p,ul,ol,h4,table):first-child{margin-top:0}
.faq-a li{line-height:1.55}
.faq-a .muted{font-size:inherit}
.faq-a h4{font-size:1rem;letter-spacing:.06em}