/* Mafia Night: "The card room after midnight", restyled in a bold transit-app language (DESIGN.md section 18).
   Spec: DESIGN.md (sections 4-10, 15, 16, 18).
   Fonts (all SIL OFL 1.1, self-hosted): Big Shoulders Display, Alegreya Sans, Alegreya italic. */

/* ==================================================================== fonts */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/big-shoulders-display-var.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/alegreya-sans-400.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/alegreya-sans-500.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/alegreya-sans-700.woff2) format("woff2")}
@font-face{font-family:"Alegreya Sans";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/alegreya-sans-800.woff2) format("woff2")}
@font-face{font-family:"Alegreya";font-style:italic;font-weight:400 900;font-display:swap;src:url(/fonts/alegreya-italic-var.woff2) format("woff2")}

/* =================================================================== tokens */
:root{
  /* surfaces */
  --room:#1B1410;
  --room-night:#150F0C;
  --panel:#251C16;
  --panel-2:#31261E;
  --rule:#4A3A2C;
  --rule-strong:#866D52;
  /* text */
  --candle:#F1E6D2;
  --smoke:#BFAE95;
  --faint:#8C7A64;
  /* action */
  --brass:#E0AE52; --brass-hi:#EBBE68; --brass-lo:#B98A35; --on-brass:#1B1410;
  --focus:#F7D58A;
  /* objects */
  --card:#F4E9D3; --card-ink:#1B1410; --card-red:#B3262E;
  --lacquer:#20150F;
  --baize:#1F4A3A; --baize-lit:#2A5E4A; --felt-muted:#DDD1BC; /* muted text that still reads 4.5:1 on the lit felt */ --baize-deep:#143128; --rail:#3A2A1C;
  /* teams */
  --town:#8DB6E8;
  --mafia:#F26B66;
  --third:#B996F0;
  --town-dim:#2A3A4E; --mafia-dim:#4A2224; --third-dim:#3A2E52;
  /* marker dots */
  --d-red:#FF5A5F; --d-orange:#FF9F43; --d-yellow:#FFE066; --d-green:#5BD68A;
  --d-blue:#5AA9FF; --d-purple:#B48CFF; --d-pink:#FF85C8; --d-white:#F4F1EA;

  /* type */
  --font-display:"Big Shoulders Display","Arial Narrow",sans-serif-condensed,sans-serif;
  --font-ui:"Alegreya Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-voice:"Alegreya",Georgia,serif;
  --fs-xs:.875rem;
  --fs-sm:clamp(.9375rem, .9rem + .15vw, 1rem);
  --fs-md:clamp(1.0625rem, 1rem + .25vw, 1.125rem);
  --fs-lg:clamp(1.25rem, 1.12rem + .5vw, 1.5rem);
  --fs-xl:clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem);
  --fs-2xl:clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);
  --fs-3xl:clamp(3.25rem, 2rem + 6vw, 7.5rem);
  --lh-tight:1.02; --lh-head:1.12; --lh-ui:1.45; --lh-voice:1.5;
  --measure:66ch;

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --gutter:clamp(16px, 4vw, 40px);
  --gutter-l:max(var(--gutter), env(safe-area-inset-left));
  --gutter-r:max(var(--gutter), env(safe-area-inset-right));
  --section:var(--s7);

  /* radii */
  --r-control:14px; --r-tag:8px; --r-panel:24px; --r-card:28px; --r-pill:999px;

  /* elevation */
  --lift-1:0 1px 0 rgba(8,5,3,.6), 0 6px 14px -8px rgba(8,5,3,.9);
  --lift-2:0 2px 0 rgba(8,5,3,.5), 0 18px 40px -16px rgba(8,5,3,.95);
  --lamp:0 0 0 1px var(--brass);

  /* motion */
  --ease-out:cubic-bezier(.2,.7,.1,1); --ease-in-out:cubic-bezier(.6,0,.3,1);
  --t-press:90ms; --t-open:200ms; --t-reveal:650ms;
  --spring:cubic-bezier(.34,1.56,.64,1); /* overshoots, then settles: springy buttons and pops */

  /* chrome */
  --appbar-h:56px; --tabbar-h:64px; --dock-h:80px; --table-chrome:140px;

  color-scheme:dark;
}
html[data-phase="night"]{--room:var(--room-night)}

/* Team ink: one custom property per team so components read var(--team). */
.a-town{--team:var(--town);--team-dim:var(--town-dim)}
.a-mafia{--team:var(--mafia);--team-dim:var(--mafia-dim)}
.a-third{--team:var(--third);--team-dim:var(--third-dim)}

/* ===================================================================== base */
*,*::before,*::after{box-sizing:border-box}
*{-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--room);scrollbar-color:var(--rule-strong) transparent}
body{margin:0;min-height:100dvh;background:var(--room);color:var(--candle);
  font:400 var(--fs-md)/var(--lh-ui) var(--font-ui);font-kerning:normal;text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-synthesis:none}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer}
img,svg{max-width:100%}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:var(--lh-head);text-wrap:balance}
h1,h2{font-family:var(--font-display)}
h3,h4{font-family:var(--font-ui);font-size:var(--fs-lg)}
p{margin:0}
p,li{text-wrap:pretty}
ul,ol{margin:0;padding:0}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1px}
b,strong{font-weight:700}
::selection{background:var(--brass);color:var(--on-brass)}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ============================================================ text helpers */
.muted{color:var(--smoke);font-size:var(--fs-sm)}
.meta{color:var(--smoke);font-size:var(--fs-xs);font-weight:500;font-variant-numeric:tabular-nums}
.small{font-size:var(--fs-xs)}
.center{text-align:center}
.say{font-family:var(--font-voice);font-style:italic;font-weight:500;font-size:var(--fs-lg);line-height:var(--lh-voice);max-width:var(--measure);color:var(--candle)}
.code{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.grow{flex:1}

/* =================================================================== icons */
.ui-ico{width:1.25em;height:1.25em;flex:none;fill:currentColor;vertical-align:-.22em}
.ico{display:inline-block;width:1.25em;height:1.25em;flex:none;fill:currentColor;vertical-align:-.25em}
.ico.emo-fb{width:auto;height:auto;font-style:normal;line-height:1;vertical-align:baseline}

/* =================================================================== chrome */
.appbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:var(--s3);min-height:calc(var(--appbar-h) + env(safe-area-inset-top));
  padding:calc(env(safe-area-inset-top) + 10px) var(--gutter-r) 10px var(--gutter-l);
  background:var(--room);
  border-bottom:1px solid var(--rule)}
.appbar-mark{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;height:44px;margin:-6px 0 -6px -10px;padding:0 var(--s1);border-radius:var(--r-control);color:var(--brass);text-decoration:none}
.appbar-mark .ui-ico{width:22px;height:22px;vertical-align:0}
.appbar-mark-label{font-size:10px;font-weight:700;line-height:1;letter-spacing:.02em}
.appbar-title{flex:1;min-width:0;font-weight:700;font-size:var(--fs-md);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar-title .code{font-size:1.15em;letter-spacing:.1em;margin-left:.15em}
.phase-badge{display:inline-flex;align-items:center;gap:var(--s2);flex:none;min-height:32px;padding:2px 12px 2px 10px;border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--rule);font-weight:700;font-size:var(--fs-sm);color:var(--candle);white-space:nowrap}
.phase-badge .ui-ico{width:18px;height:18px;vertical-align:0;color:var(--smoke)}
html[data-phase="night"] .phase-badge .ui-ico{color:var(--town)}

.banner{position:fixed;top:env(safe-area-inset-top);left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:var(--s2);
  padding:var(--s2) var(--gutter);background:var(--panel-2);color:var(--brass);font-weight:700;font-size:var(--fs-sm);border-bottom:1px solid var(--rule)}

/* page wrappers */
.wrap,.console{width:100%;margin-inline:auto;padding:var(--s5) var(--gutter-r) calc(var(--s7) + env(safe-area-inset-bottom)) var(--gutter-l)}
.wrap{max-width:44rem}
.console{max-width:1680px}

/* section pattern: headings + space, no boxes */
.block{margin:0 0 var(--section)}
.block:last-child{margin-bottom:0}
.block-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s3)}
.block-head .block-title{margin:0}
.block-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:var(--lh-head);margin:0 0 var(--s3);color:var(--candle)}
.block > .muted,.block > p{margin-bottom:var(--s3);max-width:var(--measure)}
.phase-head{margin-bottom:var(--s5)}
.phase-head > * + *{margin-top:var(--s2)}
.phase-title{font-family:var(--font-display);font-weight:800;font-size:var(--fs-2xl);line-height:var(--lh-tight);letter-spacing:-.005em}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-panel);padding:var(--s4)}

/* ========================================================== host console */
.pane{display:none;min-width:0}
.console[data-tab="game"] .pane-game,
.console[data-tab="table"] .pane-table,
.console[data-tab="table"] .pane-roster,
.console[data-tab="log"] .pane-log{display:block}
.pane-roster{margin-top:var(--section)}
.side{min-width:0;container:side / inline-size}
/* The seat list already says who is who, so the roster below it would repeat every row. */
@container side (max-width:559px){ .side:has(.board[data-density="sm"]) .pane-roster{display:none} }
@container side (max-width:879px){ .side:has(.board[data-density="xs"]) .pane-roster{display:none} }
/* While setting up, the players list in the game pane is the roster. */
html[data-phase="lobby"] .console .pane-roster{display:none}
/* At game over the final roles in the game pane say who was who. */
html[data-phase="over"] .console .pane-roster{display:none}
/* Markers only matter once play starts; while seating, the legend is noise. */
html[data-phase="lobby"] .legend{display:none}
.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.side-switch{display:none}

.pane-log > .block-title,.pane-roster > .block-title{margin-bottom:var(--s3)}
.pane-log .block{margin-top:var(--section)}

/* action dock: phones = fixed above the tab bar */
.action-dock{position:fixed;left:0;right:0;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));z-index:22;
  display:flex;gap:var(--s2);align-items:stretch;padding:var(--s3) var(--gutter-r) var(--s3) var(--gutter-l);
  background:var(--room);border-top:1px solid var(--rule)}
.action-dock:empty{display:none}
.action-dock .btn{margin:0}
.action-dock .btn.big{flex:1 1 auto;width:auto}
.action-dock .btn.ghost{flex:0 0 auto}
html[data-shell="host"] .console{padding-bottom:calc(var(--tabbar-h) + var(--dock-h) + env(safe-area-inset-bottom) + var(--s5))}

/* tab bar: phones only */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:grid;grid-template-columns:repeat(3,1fr);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:var(--panel);border-top:1px solid var(--rule)}
.tabbar button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:var(--tabbar-h);padding:0;
  background:none;border:0;color:var(--smoke);font-size:var(--fs-xs);font-weight:500;position:relative}
.tabbar button .ui-ico{width:24px;height:24px;vertical-align:0}
.tabbar button[aria-current="page"]{color:var(--brass)}
.tabbar button[aria-current="page"]::before{content:"";position:absolute;top:-1px;left:22%;right:22%;height:2px;background:var(--brass);border-radius:0 0 2px 2px}
.tabbar button:focus-visible{outline-offset:-4px}

/* side switch (768-1439) */
.side-switch{gap:var(--s1);padding:var(--s1);margin-bottom:var(--s4);border-radius:var(--r-control);background:var(--panel);border:1px solid var(--rule);width:max-content;max-width:100%}
.side-switch button{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s4);border:0;border-radius:calc(var(--r-control) - 3px);
  background:transparent;color:var(--smoke);font-weight:700;font-size:var(--fs-sm);position:relative}
.side-switch button[aria-selected="true"]{background:var(--panel-2);color:var(--candle);box-shadow:inset 0 -2px 0 var(--brass)}

/* ================================================================= buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:48px;padding:0 20px;
  border-radius:var(--r-control);border:1.5px solid var(--brass);background:var(--brass);color:var(--on-brass);
  font:700 var(--fs-md)/1.2 var(--font-ui);text-align:center;text-decoration:none;cursor:pointer;
  transition:background-color var(--t-press),border-color var(--t-press),transform var(--t-press)}
.btn .ui-ico{width:20px;height:20px;vertical-align:0}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--candle);border-color:var(--rule-strong)}
.btn.danger{background:var(--mafia);border-color:var(--mafia);color:var(--on-brass)}
.btn.ghost.danger{background:transparent;color:var(--mafia);border-color:var(--mafia)}
.btn.big{display:flex;width:100%;min-height:56px;font-size:var(--fs-md);font-weight:800}
.btn.disabled,.btn[aria-disabled="true"]{background:var(--panel-2);color:var(--faint);border:1.5px dashed var(--rule);cursor:not-allowed}
.btn.disabled:active,.btn[aria-disabled="true"]:active{transform:none}
@media (hover:hover){
  .btn:hover{background:var(--brass-hi);border-color:var(--brass-hi)}
  .btn.ghost:hover{background:transparent;border-color:var(--brass)}
  .btn.danger:hover{background:var(--mafia);filter:brightness(1.06)}
  .btn.ghost.danger:hover{background:var(--mafia-dim);border-color:var(--mafia);filter:none}
  .btn.disabled:hover,.btn[aria-disabled="true"]:hover{background:var(--panel-2);border-color:var(--rule);filter:none}
}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s3)}
.btn-row .btn{flex:0 1 auto}
.row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:flex-end;margin-top:var(--s3)}

.icon-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-control);
  background:transparent;color:var(--smoke);position:relative}
.icon-btn .ui-ico{width:20px;height:20px;vertical-align:0}
@media (hover:hover){.icon-btn:hover{color:var(--candle);background:var(--panel-2)}}
.x-btn{margin-left:auto}

.link{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0;border:0;background:none;color:var(--smoke);
  font:500 var(--fs-sm)/1.3 var(--font-ui);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
@media (hover:hover){.link:hover{color:var(--candle)}}

.mini{display:inline-flex;align-items:center;gap:var(--s1);min-height:44px;padding:0 var(--s3);border-radius:var(--r-pill);
  border:1.5px solid var(--rule-strong);background:transparent;color:var(--candle);font-weight:700;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.mini[aria-pressed="true"],.mini.spent{border-style:dashed;border-color:var(--rule);color:var(--faint)}

/* ================================================================== inputs */
.field{display:grid;gap:var(--s1);margin-top:var(--s3);font-size:var(--fs-sm);font-weight:500;color:var(--smoke)}
.field input,.field select,.field textarea,.search,.code-input{display:block;width:100%;min-height:48px;padding:10px 14px;
  border-radius:var(--r-control);border:1.5px solid var(--rule-strong);background:var(--panel-2);color:var(--candle);
  font:400 max(16px, var(--fs-md))/1.35 var(--font-ui)}
.field textarea{min-height:96px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:linear-gradient(45deg,transparent 50%,var(--smoke) 50%),linear-gradient(135deg,var(--smoke) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
::placeholder{color:var(--faint);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus,.search:focus,.code-input:focus{border-color:var(--brass)}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.search:focus-visible,.code-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.code-input{font:700 var(--fs-xl)/1 var(--font-display);letter-spacing:.3em;text-align:center;padding-inline:var(--s2);font-variant-numeric:tabular-nums}
.search-field{position:relative;display:block;margin-top:var(--s3)}
.search-field > .ui-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--smoke);pointer-events:none}
.search-field .search{padding-left:44px}
.checks label{display:flex;align-items:center;gap:var(--s2);min-height:44px;font-size:var(--fs-md);color:var(--candle)}
.checks input{width:20px;height:20px;accent-color:var(--brass);margin:0}

/* ================================================================== status */
.pill{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 12px;border-radius:var(--r-pill);background:var(--panel);
  border:1px solid var(--rule);font-weight:700;font-size:var(--fs-xs);color:var(--candle);white-space:nowrap;vertical-align:middle}
.pill .ui-ico{width:14px;height:14px;vertical-align:0}
.pill.ok{color:var(--town)}
.pill.warn{color:var(--brass)}
.pill.dead{color:var(--mafia)}
.tally{display:inline-flex;align-items:center;gap:6px;font-weight:500;font-size:var(--fs-sm);color:var(--smoke);font-variant-numeric:tabular-nums}
.tally .ui-ico{width:18px;height:18px;vertical-align:0}
.tally[data-state="ok"]{color:var(--town)}
.tally[data-state="short"]{color:var(--brass)}
.tally[data-state="over"]{color:var(--mafia)}
.note{display:flex;gap:var(--s2);align-items:flex-start;margin-top:var(--s2);font-size:var(--fs-md);max-width:var(--measure)}
.note > .ui-ico{margin-top:.15em;color:var(--smoke);vertical-align:0}
.note.is-warn,.note.warn{color:var(--brass)}
.note.is-warn > .ui-ico{color:var(--brass)}
.note.is-out{color:var(--mafia)}
.note.is-out > .ui-ico{color:var(--mafia)}
.empty{display:grid;justify-items:center;gap:var(--s3);padding:var(--s6) var(--s4);text-align:center;color:var(--smoke);font-size:var(--fs-md)}
.empty > .ui-ico{width:32px;height:32px}

/* =============================================================== team marks */
.team-tag,.al-tag{display:inline-flex;align-items:center;gap:var(--s2);font-weight:700;font-size:var(--fs-sm);color:var(--team,var(--smoke));text-transform:none;letter-spacing:0}
.team-tag::before,.al-tag::before,.team-mark{content:"";display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;border:2px solid var(--team,var(--smoke))}
.a-mafia.team-tag::before,.a-mafia.al-tag::before,.team-mark.a-mafia{border:3px double var(--mafia)}
.a-third.team-tag::before,.a-third.al-tag::before,.team-mark.a-third{border:2px dashed var(--third)}
.team-mark{width:12px;height:12px}
.team-tag:has(.team-mark)::before,.al-tag:has(.team-mark)::before{display:none}
.team-tag .team-mark{width:10px;height:10px}

/* role chip */
.rc{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:2px 10px 2px 6px;border-radius:var(--r-tag);
  font-weight:700;font-size:var(--fs-sm);line-height:1.35;color:var(--team,var(--candle));background:var(--team-dim,var(--panel-2));
  border:1px solid var(--team,var(--rule-strong));vertical-align:middle}
.rc .ico{width:18px;height:18px;vertical-align:0}
.rc.a-mafia{border:3px double var(--mafia);padding:0 8px 0 4px}
.rc.a-third{border-style:dashed}

/* ==================================================================== home */
.wrap.home{max-width:1180px;display:grid;gap:var(--s7);padding-top:var(--s6)}
.home-hero{display:grid;justify-items:center;text-align:center;gap:var(--s4)}
.card-fan{display:flex;justify-content:center;align-items:flex-end;height:clamp(118px, 30vw, 196px);margin-bottom:var(--s2)}
.card-fan .rcard-back{width:clamp(76px, 20vw, 128px);flex:none;box-shadow:var(--lift-2)}
.card-fan .rcard-back:nth-child(1){transform:rotate(-8deg) translate(10%, 5%)}
.card-fan .rcard-back:nth-child(2){position:relative;z-index:1}
.card-fan .rcard-back:nth-child(3){transform:rotate(8deg) translate(-10%, 5%)}
.wordmark{font-family:var(--font-display);font-weight:800;font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:-.005em;color:var(--candle);margin:0}
.lede{font-size:var(--fs-lg);line-height:1.4;color:var(--smoke);max-width:30ch}
.home-paths{display:grid;max-width:440px;width:100%;margin-inline:auto}
.path + .path{border-top:1px solid var(--rule);padding-top:var(--s5);margin-top:var(--s5)}
.path-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:var(--lh-head);margin-bottom:var(--s2)}
.path > .muted{margin-bottom:var(--s4)}
.path .btn.big{margin-top:var(--s2)}
.resume{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;margin:var(--s2) var(--s5) 0 0;color:var(--smoke);font-size:var(--fs-sm)}
.resume .code{color:var(--candle);letter-spacing:.1em}
.join-row{display:flex;gap:var(--s2);align-items:flex-end}
.join-row .field{flex:1;margin:0;min-width:0}
.join-row .btn{flex:none;min-width:96px}
.path-link{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:var(--fs-md);color:var(--candle);text-decoration:underline;text-underline-offset:4px}
@media (hover:hover){.path-link:hover,.resume:hover{color:var(--brass)}}
.credits{grid-column:1/-1;margin-top:var(--s5);text-align:center;font-size:var(--fs-xs);color:var(--smoke);max-width:var(--measure);justify-self:center}
.credits a{color:var(--smoke)}

/* join form */
.wrap.join{max-width:30rem;padding-top:var(--s7)}
.wrap.join .phase-title{margin-bottom:var(--s5)}
.wrap.join .phase-title .code{display:block;font-size:var(--fs-3xl);line-height:var(--lh-tight);letter-spacing:.12em;margin-top:var(--s2)}
.wrap.join .btn.big{margin-top:var(--s5)}

/* =================================================================== lobby */
.join-code{display:grid;justify-items:start;gap:var(--s1)}
.room-code{font-family:var(--font-display);font-weight:800;font-size:clamp(4rem,19vw,7.5rem);line-height:1;letter-spacing:.12em;font-variant-numeric:tabular-nums;color:var(--candle);margin-block:var(--s1)}
.join-link{word-break:break-all}
.join-code .btn{margin-top:var(--s3)}

.people{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s2)}
.person{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 0 0 var(--s4);border-radius:var(--r-pill);
  background:var(--panel);border:1px solid var(--rule);font-weight:500;font-size:var(--fs-md)}
.person-status,.person > .ui-ico{display:inline-grid;place-items:center;color:var(--faint)}
.person-status.is-on{color:var(--town)}
.person-status .ui-ico,.person > .ui-ico{width:16px;height:16px;vertical-align:0}
.person-status[title^="No phone"],.person.is-added .person-status{color:var(--smoke)}
.person.is-offline{color:var(--smoke)}
.person.is-offline .person-status,.person.is-offline > .ui-ico{color:var(--faint)}
.person .icon-btn{width:44px;height:44px;margin:-1px 0 -1px 0;border-radius:var(--r-pill)}
.person:not(:has(.icon-btn)){padding-right:var(--s4)}
.players .btn.ghost{margin-top:var(--s3)}

/* ----- deal setup: guided choice (section 9) ----- */
.deal-setup .block-title{margin-bottom:var(--s4)}
.choices{display:grid;gap:var(--s2);max-width:40rem}
.choice{display:grid;grid-template-columns:24px auto 1fr;gap:var(--s3);align-items:start;width:100%;min-height:64px;padding:var(--s4);
  text-align:left;border-radius:var(--r-control);background:var(--panel);border:1px solid var(--rule);color:var(--candle);
  font:inherit;cursor:pointer;transition:background-color var(--t-press),border-color var(--t-press)}
.choice-mark{width:22px;height:22px;margin-top:2px;border-radius:50%;border:2px solid var(--rule-strong);background:transparent}
.choice-icon{display:inline-grid;place-items:center;width:24px;height:24px;margin-top:1px;color:var(--smoke)}
.choice-icon .ui-ico{width:24px;height:24px;vertical-align:0}
.choice-text{display:grid;gap:2px;min-width:0}
.choice-title{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s2);row-gap:var(--s1);font-weight:700;font-size:var(--fs-md);line-height:1.3;color:var(--candle)}
.choice-desc{font-weight:400;font-size:var(--fs-sm);line-height:1.4;color:var(--smoke);max-width:52ch}
.choice-tag{display:inline-block;padding:1px 8px;border-radius:var(--r-pill);border:1px solid var(--brass-lo);
  color:var(--brass);font-size:var(--fs-xs);font-weight:500;line-height:1.4;vertical-align:.1em;white-space:nowrap}
.choice[aria-checked="true"]{background:var(--panel-2);border:2px solid var(--brass);padding:15px}
.choice[aria-checked="true"] .choice-mark{border-color:var(--brass);background:var(--brass);box-shadow:inset 0 0 0 4px var(--panel-2)}
.choice[aria-checked="true"] .choice-icon{color:var(--brass)}
@media (hover:hover){
  .choice:hover{background:var(--panel-2)}
  .choice:hover .choice-mark{border-color:var(--smoke)}
  .choice[aria-checked="true"]:hover .choice-mark{border-color:var(--brass)}
}
.choice:active{transform:translateY(1px)}
.followup{margin:var(--s2) 0 0 27px;padding:var(--s3) 0 var(--s2) var(--s5);border-left:2px solid var(--brass);max-width:calc(40rem - 27px)}
.followup-q{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-lg);line-height:1.25;color:var(--candle);margin:0 0 var(--s3)}
.followup > .choices{max-width:none}
.followup--top{margin:0;padding:0;border-left:0;max-width:40rem}
.followup--top > .followup-q{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:var(--lh-head);margin-bottom:var(--s4)}
.disclosure-body .followup-q{margin-top:var(--s2)}
.deal-fixed{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s5);font-size:var(--fs-md);color:var(--candle);max-width:40rem}
.deal-fixed > .ui-ico{width:24px;height:24px;margin-top:1px;color:var(--brass);vertical-align:0}
.disclosure{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s2);row-gap:0;min-height:44px;margin-top:var(--s3);padding:var(--s1) 0;
  border:0;background:none;color:var(--smoke);font:500 var(--fs-sm)/1.3 var(--font-ui);text-align:left}
.disclosure > .ui-ico{width:18px;height:18px;vertical-align:0}
.disclosure[aria-expanded="true"] > .ui-ico,.disclosure .ui-ico.is-open{transform:rotate(180deg)}
.disclosure-value{font-size:var(--fs-xs);color:var(--smoke);margin-left:var(--s2);font-weight:400}
.disclosure[aria-expanded="true"] .disclosure-value{display:none}
@media (hover:hover){.disclosure:hover{color:var(--candle)}}
.disclosure-body{margin-top:var(--s2)}

/* ----- roles ----- */
.roles .btn-row{margin:0 0 var(--s4)}
.deck-list{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0 var(--s5);margin-bottom:var(--s5)}
.deck-item{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:52px;border-bottom:1px solid var(--rule);min-width:0}
.deck-item > .rc{min-width:0}
.deck-empty{color:var(--smoke);font-size:var(--fs-sm);max-width:var(--measure);margin-bottom:var(--s5)}
.stepper{display:inline-flex;align-items:center}
.stepper .icon-btn::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--rule-strong)}
.stepper .icon-btn .ui-ico{width:16px;height:16px;position:relative}
.stepper-n{min-width:1.5em;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}

.role-filter{display:flex;flex-wrap:wrap;gap:var(--s1);padding:var(--s1);border-radius:var(--r-control);background:var(--panel);border:1px solid var(--rule);width:max-content;max-width:100%}
.role-filter button{min-height:44px;min-width:44px;padding:0 var(--s3);border:0;border-radius:calc(var(--r-control) - 3px);background:transparent;color:var(--smoke);font-weight:700;font-size:var(--fs-sm)}
.role-filter button[data-v="town"]{color:var(--town)}
.role-filter button[data-v="mafia"]{color:var(--mafia)}
.role-filter button[data-v="third"]{color:var(--third)}
.role-filter button[aria-selected="true"]{background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--brass)}
.role-filter button[aria-selected="true"]:not([data-v="town"]):not([data-v="mafia"]):not([data-v="third"]){color:var(--candle)}
.roles .search-field{max-width:28rem}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,10.5rem),1fr));gap:var(--s2);margin-top:var(--s4)}
.role-tile{position:relative;display:flex;align-items:stretch;min-height:52px;border-radius:var(--r-tag);background:var(--panel);
  border-left:3px solid var(--team,var(--rule-strong));min-width:0}
.role-tile.a-mafia{border-left:4px double var(--mafia)}
.role-tile.a-third{border-left:3px dashed var(--third)}
.role-add{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0 var(--s2) var(--s3);border:0;background:none;
  color:var(--candle);text-align:left;font-weight:500;font-size:var(--fs-sm);line-height:1.25;border-radius:var(--r-tag) 0 0 var(--r-tag)}
.role-glyph{display:inline-grid;place-items:center;flex:none;color:var(--team,var(--smoke))}
.role-glyph .ico{width:24px;height:24px;vertical-align:0}
.role-name{min-width:0;overflow-wrap:break-word;hyphens:auto}
.role-count{align-self:center;flex:none;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-pill);
  background:var(--brass);color:var(--on-brass);font-weight:700;font-size:var(--fs-xs);font-variant-numeric:tabular-nums}
.role-tile.is-picked{background:var(--panel-2);outline:1px solid var(--brass);outline-offset:-1px}
.role-info{align-self:center}
@media (hover:hover){.role-tile:hover{background:var(--panel-2)}}
.role-tile[hidden]{display:none}
.role-group{min-width:0;border-radius:var(--r-tag);background:var(--panel);border-left:3px solid var(--rule-strong)}
.role-group[hidden]{display:none}
.role-group[open]{grid-column:1/-1}
.role-group.is-picked{outline:1px solid var(--brass);outline-offset:-1px}
.role-group > summary{display:flex;align-items:center;gap:var(--s2);min-height:52px;padding:var(--s2) var(--s3);cursor:pointer;list-style:none;
  color:var(--candle);font-weight:500;font-size:var(--fs-sm)}
.role-group > summary::-webkit-details-marker{display:none}
.role-group > summary .role-name{flex:1;display:flex;flex-direction:column}
.role-group > summary::after{content:"+";color:var(--smoke);font-weight:700;margin-left:var(--s1)}
.role-group[open] > summary::after{content:"\2212"}
.role-variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12.5rem),1fr));gap:var(--s2);padding:0 var(--s2) var(--s2)}
.role-variants .role-tile{background:var(--panel-2)}
.variant-team{display:block;font-weight:500;color:var(--smoke);font-size:var(--fs-xs)}
.role-minus{align-self:center}
.group-title{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-md);color:var(--team,var(--smoke));margin:var(--s5) 0 var(--s2)}

/* =================================================================== dealt */
.keygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,11rem),1fr));gap:var(--s2) var(--s4);margin:var(--s3) 0 var(--s4)}
.keyrow{display:flex;align-items:center;gap:var(--s3);min-height:56px;min-width:0;padding:var(--s1) 0;border-bottom:1px solid var(--rule)}
.key-glyph{display:inline-grid;place-items:center;flex:none;color:var(--team,var(--smoke))}
.key-glyph .ico{width:24px;height:24px;vertical-align:0}
.key-name{flex:1;min-width:0;font-weight:700;font-size:var(--fs-md);line-height:1.2;overflow-wrap:anywhere}
.keyrow .team-mark{margin-left:auto}
.pc,.pcb{display:inline-grid;place-items:center;flex:none;font-family:var(--font-display);font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--card);color:var(--card-ink);line-height:1;box-shadow:var(--lift-1)}
.pc{width:44px;height:56px;border-radius:6% / 5%;font-size:1.25rem;letter-spacing:-.01em}
.pc.is-red,.pc.red,.pcb.is-red,.pcb.red{color:var(--card-red)}
.pc .ui-ico,.pcb .ui-ico{width:20px;height:20px;vertical-align:0}
.pc.is-empty{background:transparent;border:1.5px dashed var(--rule-strong);box-shadow:none;color:var(--faint)}

.steps{list-style:none;counter-reset:step;display:grid;gap:var(--s3);margin:var(--s2) 0 var(--s4);max-width:var(--measure)}
.steps > li{counter-increment:step;display:grid;grid-template-columns:2rem 1fr;gap:var(--s2);align-items:baseline}
.steps > li::before{content:counter(step);font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);color:var(--brass);font-variant-numeric:tabular-nums;line-height:1}

.assign{margin-top:var(--s3)}
.arow{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3);min-height:56px;padding:var(--s2) 0;border-bottom:1px solid var(--rule)}
.arow:last-child{border-bottom:0}
.arow-name{font-weight:700;min-width:6ch}
.arow-name .muted{font-weight:400;margin-left:var(--s1)}
.arow-glyph{display:grid;place-items:center;flex:none;width:28px;height:28px;color:var(--team,var(--smoke));font:700 1.15rem/1 var(--font-display)}
.arow-glyph .ico{width:24px;height:24px;vertical-align:0}
.arow:has(.arow-glyph) .arow-name{flex:1;min-width:0}
.arow .icon-btn{margin-left:auto}
.arow select{appearance:none;-webkit-appearance:none;min-height:48px;min-width:11rem;padding:10px 40px 10px 14px;border-radius:var(--r-control);
  border:1.5px solid var(--rule-strong);background-color:var(--panel-2);color:var(--candle);font:400 max(16px, var(--fs-md))/1.35 var(--font-ui);
  background-image:linear-gradient(45deg,transparent 50%,var(--smoke) 50%),linear-gradient(135deg,var(--smoke) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.arow select:focus{border-color:var(--brass)}
.assign .arow-name{flex:0 0 min(38%,10rem);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.arow .meta{margin-left:auto}
.arow.is-winner .arow-name,.arow.is-winner b{color:var(--candle)}

/* =================================================================== night */
.cues{list-style:none;counter-reset:none;display:grid;gap:0}
.cue{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:var(--s4);align-items:start;padding-bottom:var(--s3)}
.cue::before{content:"";position:absolute;left:15px;top:40px;bottom:0;width:2px;background:var(--rule)}
.cue:last-child::before{display:none}
.cue.is-done::before{background:var(--brass)}
.cue-n{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;margin-top:8px;border-radius:50%;
  border:2px solid var(--rule-strong);background:var(--room);color:var(--smoke);
  font:700 var(--fs-lg)/1 var(--font-display);font-variant-numeric:tabular-nums}
.cue-n .ui-ico{width:18px;height:18px;vertical-align:0}
.cue.is-done .cue-n{background:var(--brass);border-color:var(--brass);color:var(--on-brass)}
.cue.is-current .cue-n{border-color:var(--brass);color:var(--brass)}
.cue-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);min-height:48px;min-width:0}
button.cue-line{width:100%;padding:0 var(--s3) 0 0;border:0;background:none;color:var(--candle);text-align:left;border-radius:var(--r-control)}
@media (hover:hover){button.cue-line:hover .rc{filter:brightness(1.1)} button.cue-line:hover .meta{color:var(--candle)}}
.cue-result{font-weight:700;color:var(--candle)}
.cue.is-done .cue-line .link{margin-left:auto}
.cue-body{min-width:0;display:grid;gap:var(--s3);justify-items:start}
.cue.is-current .cue-body{background:var(--panel-2);border-radius:var(--r-panel);box-shadow:var(--lamp);padding:var(--s4) var(--s4) var(--s3);margin-bottom:var(--s2)}
.cue-body > *{max-width:100%}
.cue-body .pick{width:100%;margin:0}
.cue-body .say{font-size:clamp(1.375rem, 1.1rem + 1.2vw, 2rem);line-height:1.38}
.cue-body .btn-row{margin-top:0}
.cue.pending,section.cue{grid-template-columns:minmax(0,1fr);margin-bottom:var(--section)}
section.cue::before{display:none}

.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:var(--s2);margin:var(--s3) 0}
.pk{min-height:48px;padding:var(--s2) var(--s3);border-radius:var(--r-control);border:1px solid var(--rule-strong);background:var(--panel-2);
  color:var(--candle);font:500 var(--fs-md)/1.2 var(--font-ui);text-align:center;overflow-wrap:anywhere;
  transition:background-color var(--t-press),color var(--t-press)}
.cue-body .pk{background:var(--panel)}
.pk[aria-pressed="true"]{background:var(--card);color:var(--card-ink);border-color:var(--card);font-weight:700;box-shadow:var(--lift-1)}
@media (hover:hover){.pk:not([aria-pressed="true"]):hover{border-color:var(--brass)}}
.pk:active{transform:translateY(1px)}

/* ===================================================================== day */
.events{list-style:none;display:grid;gap:var(--s4);margin-bottom:var(--section);max-width:var(--measure)}
.event{display:grid;grid-template-columns:28px minmax(0,1fr);gap:var(--s3);align-items:start;font-size:var(--fs-md)}
.event > .ui-ico{width:24px;height:24px;margin-top:2px;color:var(--smoke)}
.event.is-death > .ui-ico{color:var(--mafia)}
.event.is-save > .ui-ico{color:var(--town)}
.event.is-convert > .ui-ico{color:var(--third)}
.event .meta{margin-top:2px}
.whisper{margin-bottom:var(--section);padding:var(--s4);border-radius:var(--r-panel);background:var(--panel);border:1px dashed var(--rule-strong);max-width:44rem}
.whisper-title{display:flex;align-items:center;gap:var(--s2);font-family:var(--font-ui);font-weight:700;font-size:var(--fs-lg);margin-bottom:var(--s2)}
.whisper-title .ui-ico{color:var(--brass);vertical-align:0}
.whisper-item{padding:var(--s3) 0;border-top:1px solid var(--rule)}
.whisper-item:first-of-type{border-top:0}
.whisper-item p{margin-top:var(--s1)}
.vote .btn-row{margin-top:var(--s4)}

/* ==================================================================== over */
.win{display:grid;justify-items:center;text-align:center;gap:var(--s2);padding:var(--s5) 0 var(--s6);margin-bottom:var(--s5);color:var(--team,var(--brass))}
.win-mark .ui-ico{width:56px;height:56px;vertical-align:0}
.win .phase-title{color:var(--candle)}
.win .muted{max-width:40ch}

/* ============================================================ seating table */
.board{container:board / inline-size;margin-top:var(--s3)}
.table{container:table / inline-size;position:relative;aspect-ratio:1;margin-inline:auto;border-radius:50%;
  width:min(100%, calc(100dvh - var(--appbar-h) - var(--table-chrome)));min-width:min(100%, 300px);
  background:radial-gradient(ellipse at 50% 38%, var(--baize-lit), var(--baize) 55%, var(--baize-deep));
  border:clamp(8px, 2.2cqi, 16px) solid var(--rail);
  box-shadow:inset 0 0 0 2px rgba(255,220,160,.08), inset 0 18px 40px rgba(8,5,3,.55), 0 0 0 1px rgba(8,5,3,.6), var(--lift-2)}
.table-mid{position:absolute;inset:30%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;pointer-events:none}
.table-phase{font-family:var(--font-display);font-weight:800;font-size:clamp(1.25rem, 6cqi, 2.75rem);line-height:1;color:var(--candle)}
.table-alive{font-size:var(--fs-sm);color:var(--felt-muted)}
.seat{--arc:calc(257cqi / var(--n, 10));--seat:clamp(44px, min(calc(165cqi / var(--n, 10)), 15cqi), 96px);
  position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:3px;width:var(--seat);padding:0;border:0;background:none;color:var(--candle);
  border-radius:var(--r-tag)}
.seat-card{position:relative;display:grid;place-items:center;width:var(--seat);aspect-ratio:5/6;border-radius:6% / 5%;
  background:var(--panel);border:2px solid var(--rule-strong);box-shadow:var(--lift-1);overflow:hidden;
  transition:background-color var(--t-press)}
.seat-glyph{display:grid;place-items:center;color:var(--candle);font:700 calc(var(--seat) * .42)/1 var(--font-display)}
.seat-glyph .ico,.seat-glyph .ui-ico{width:calc(var(--seat) * .5);height:calc(var(--seat) * .5);vertical-align:0}
.seat-glyph .emo-fb{font-size:calc(var(--seat) * .4)}
.seat-name{max-width:max(44px, calc(var(--arc) - 6px));overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:700;font-size:var(--fs-md);line-height:1.15;color:var(--candle);text-shadow:0 1px 2px rgba(8,5,3,.9)}
.seat-dots{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:2px;max-width:var(--seat);min-height:0}
.seat-dots:empty{display:none}
.seat-mark{position:absolute;top:-7px;right:-7px;z-index:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--room);border:1.5px solid var(--mafia);color:var(--mafia)}
.seat-mark .ui-ico{width:14px;height:14px;vertical-align:0}
.seat.a-town .seat-card{border:2px solid var(--town)}
.seat.a-mafia .seat-card{border:4px double var(--mafia)}
.seat.a-third .seat-card{border:2px dashed var(--third)}
/* your own seat is the one card you have seen: face up */
.seat.is-me .seat-card{background:var(--card);border-color:var(--card)}
.seat.is-me .seat-glyph{color:var(--card-ink)}
.seat.a-town .seat-glyph,.seat.a-mafia .seat-glyph,.seat.a-third .seat-glyph{color:var(--team)}
.seat.is-dead .seat-card{opacity:.6;background:
  repeating-linear-gradient(45deg, rgba(224,174,82,.16) 0 1px, transparent 1px 7px),
  repeating-linear-gradient(-45deg, rgba(224,174,82,.16) 0 1px, transparent 1px 7px), var(--lacquer)}
.seat.is-dead .seat-glyph{visibility:hidden}
.seat.is-dead .seat-name{color:var(--felt-muted);font-weight:500;text-decoration:line-through;text-decoration-thickness:1px}
.seat.is-selected .seat-card{outline:2px solid var(--brass);outline-offset:3px;box-shadow:var(--lamp)}
@media (hover:hover){.seat:hover .seat-card{background-color:var(--panel-2)} .seat.is-dead:hover .seat-card{opacity:.8}}
.seat:active .seat-card{transform:translateY(1px)}
.board[data-density="md"] .seat-name{font-size:var(--fs-sm)}
.board[data-density="sm"] .seat-name,.board[data-density="xs"] .seat-name{font-size:var(--fs-xs)}
.board[data-density="sm"] .seat-mark,.board[data-density="xs"] .seat-mark{width:20px;height:20px;top:-6px;right:-6px}
.board[data-density="xs"] .dot{width:8px;height:8px}

/* seat list fallback for crowded tables */
.seatlist{display:none;list-style:none;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:var(--s1) var(--s4)}
.seatrow{position:relative;display:grid;grid-template-columns:2rem 28px minmax(0,1fr) auto auto;grid-template-areas:"n g name mark dots" "n g role mark dots";column-gap:var(--s2);align-items:center;align-content:center;
  width:100%;min-height:48px;padding:var(--s1) var(--s2) var(--s1) 0;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--candle);text-align:left}
.seatrow-n{grid-area:n;font:700 var(--fs-lg)/1 var(--font-display);color:var(--smoke);text-align:right;padding-right:var(--s1);font-variant-numeric:tabular-nums}
.seatrow-glyph{grid-area:g;display:grid;place-items:center;width:28px;height:28px;font:700 1.1rem/1 var(--font-display);color:var(--team,var(--candle))}
.seatrow-glyph .ico,.seatrow-glyph .ui-ico{width:24px;height:24px;vertical-align:0}
.seatrow-name{grid-area:name;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatrow-role{grid-area:role;font-size:var(--fs-xs);color:var(--team,var(--smoke));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatrow-role:empty{display:none}
.seatrow .seat-dots{grid-area:dots}
.seatrow .seat-mark{position:static;grid-area:mark;background:none;border:0;width:24px;height:24px}
.seatrow.is-dead .seatrow-name{color:var(--smoke);text-decoration:line-through;text-decoration-thickness:1px}
.seatrow.is-selected{box-shadow:inset 3px 0 0 var(--brass)}
@media (hover:hover){.seatrow:hover{background:var(--panel)}}
@container board (max-width:519px){
  .table{aspect-ratio:4/5;width:min(100%, calc((100dvh - var(--appbar-h) - var(--table-chrome)) * .8))}
}
.board[data-density="md"] .seat-card,.board[data-density="sm"] .seat-card,.board[data-density="xs"] .seat-card{aspect-ratio:1}
@container board (max-width:559px){
  .board[data-density="sm"] .table{display:none}
  .board[data-density="sm"] .seatlist{display:grid}
}
@container board (max-width:879px){
  .board[data-density="xs"] .table{display:none}
  .board[data-density="xs"] .seatlist{display:grid}
}

/* marker dots and legend */
.dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 1px rgba(8,5,3,.7)}
.d-red{background:var(--d-red)}.d-orange{background:var(--d-orange)}.d-yellow{background:var(--d-yellow)}.d-green{background:var(--d-green)}
.d-blue{background:var(--d-blue)}.d-purple{background:var(--d-purple)}.d-pink{background:var(--d-pink)}.d-white{background:var(--d-white)}
.dots{display:inline-flex;flex-wrap:wrap;gap:2px}
.legend{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s4)}
.lg{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s3);border-radius:var(--r-pill);
  border:1px solid var(--rule);background:var(--panel);color:var(--candle);font-weight:500;font-size:var(--fs-xs)}
@media (hover:hover){.lg:hover{border-color:var(--rule-strong)}}

/* =========================================================== roster + log */
.roster{list-style:none}
.rrow{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s3);row-gap:0;
  width:100%;min-height:48px;padding:var(--s1) 0;border:0;border-bottom:1px solid var(--rule);background:none;color:var(--candle);text-align:left}
.rrow-glyph{display:grid;place-items:center;flex:none;width:28px;height:28px;color:var(--team,var(--smoke));font:700 1.15rem/1 var(--font-display)}
.rrow-glyph .ico{width:24px;height:24px;vertical-align:0}
.rrow-name{font-weight:700;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow-role{flex:1;font-size:var(--fs-sm);color:var(--team,var(--smoke));min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow-role.is-unknown{color:var(--smoke)}
.rrow-note{order:9;flex-basis:100%;padding:0 0 var(--s1) 40px;font-size:var(--fs-xs);color:var(--smoke);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rrow-note:empty{display:none}
.rrow .seat-dots{flex:none}
.rrow-mark,.arow-mark{display:inline-grid;place-items:center;flex:none;color:var(--mafia)}
.rrow-mark .ui-ico,.arow-mark .ui-ico{width:18px;height:18px;vertical-align:0}
.rrow.is-dead .rrow-name{color:var(--smoke);text-decoration:line-through;text-decoration-thickness:1px}
.rrow.is-dead .rrow-role,.rrow.is-dead .rrow-glyph{opacity:.7}
@media (hover:hover){.rrow:hover{background:var(--panel)}}

.log{list-style:none;display:grid}
.logl{display:flex;gap:var(--s2);align-items:baseline;padding:var(--s2) 0;
  border-bottom:1px solid var(--rule);font-size:var(--fs-sm);line-height:1.4}
.logl > .ui-ico{width:18px;height:18px;flex:none;color:var(--smoke);align-self:center}
.logl > .meta{flex:none;min-width:2ch}
.logl-text{min-width:0;flex:1}
.logl:last-child{border-bottom:0}
.tools .btn-row{margin-top:var(--s2)}

/* ===================================================== sheet, modal, overlay */
.sheet-bg{position:fixed;inset:0;z-index:40;display:flex;align-items:flex-end;justify-content:center;background:rgba(8,5,3,.6)}
.sheet{width:100%;max-width:640px;max-height:85dvh;overflow:auto;overscroll-behavior:contain;background:var(--panel);
  border-radius:var(--r-panel) var(--r-panel) 0 0;box-shadow:var(--lift-2);border-top:1px solid var(--rule);
  padding:var(--s2) var(--gutter-r) calc(var(--s5) + env(safe-area-inset-bottom)) var(--gutter-l)}
.sheet-grab{width:36px;height:4px;margin:0 auto var(--s3);border-radius:2px;background:var(--rule-strong)}
.sheet-head{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2) var(--s3)}
.sheet-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);line-height:var(--lh-head);min-width:0;overflow-wrap:anywhere}
.sheet-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s2)}
.sheet .btn-row{margin-top:var(--s5)}
.dots-edit{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8.75rem),1fr));gap:var(--s2);margin-top:var(--s4)}
.dotbtn{display:flex;align-items:center;gap:var(--s2);min-height:48px;padding:var(--s1) var(--s3);line-height:1.2;border-radius:var(--r-control);border:1px solid var(--rule);
  background:var(--panel-2);color:var(--candle);text-align:left;font-size:var(--fs-sm);font-weight:500}
.dotbtn .dot{width:16px;height:16px}
.dotbtn[aria-pressed="true"]{border:2px solid var(--candle);padding:3px 11px;font-weight:700}
@media (hover:hover){.dotbtn:hover{border-color:var(--rule-strong)} .dotbtn[aria-pressed="true"]:hover{border-color:var(--candle)}}

.overlay{position:fixed;inset:0;z-index:45;display:flex;align-items:stretch;justify-content:center;background:rgba(8,5,3,.6)}
.modal,.overlay-in{position:relative;width:100%;max-height:100dvh;overflow:auto;overscroll-behavior:contain;background:var(--panel);
  padding:calc(env(safe-area-inset-top) + var(--s5)) var(--gutter-r) calc(var(--s5) + env(safe-area-inset-bottom)) var(--gutter-l)}
.modal h2,.modal .modal-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-xl);margin-bottom:var(--s4)}
.modal .field + .field{margin-top:var(--s4)}
.modal .btn-row{margin-top:var(--s5)}
.modal > .x-btn,.overlay-in > .x-btn{position:absolute;top:calc(env(safe-area-inset-top) + var(--s3));right:var(--s3)}

/* key shown to the table */
.overlay.key-show{background:var(--room);align-items:stretch}
.key-show .overlay-in{max-width:none;background:var(--room);display:flex;flex-direction:column}
.key-show .phase-title,.key-show h2{font-family:var(--font-display);font-weight:800;font-size:var(--fs-2xl);line-height:var(--lh-tight);margin:0 56px var(--s5) 0}
.key-show .keygrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:var(--s3) var(--s5);flex:1;align-content:start}
.key-show .keyrow{min-height:96px}
.key-show .pc{width:64px;height:88px;font-size:1.75rem}
.key-show .key-name{font-size:var(--fs-lg)}
.key-show .key-glyph .ico{width:30px;height:30px}
.key-show .btn.big{margin-top:var(--s5);position:sticky;bottom:0;box-shadow:0 0 0 var(--s5) var(--room)}

/* ======================================================== role card (bold) */
.rcard,.cardart{--c1:#2C4466;--c2:#16233A;--c3:#0C121D;--ray:rgba(141,182,232,.10);--ray2:rgba(141,182,232,.22);--ink:#D7E6FA;--glow:rgba(141,182,232,.55)}
.rcard.a-mafia,.cardart.a-mafia{--c1:#7A1F26;--c2:#33090D;--c3:#12040A;--ray:rgba(242,107,102,.10);--ray2:rgba(242,107,102,.22);--ink:#FFD0CE;--glow:rgba(242,107,102,.55)}
.rcard.a-third,.cardart.a-third{--c1:#523A94;--c2:#241448;--c3:#0E0820;--ray:rgba(185,150,240,.10);--ray2:rgba(185,150,240,.24);--ink:#E8DCFF;--glow:rgba(185,150,240,.55)}

.rcard{container-type:inline-size;position:relative;width:min(100%,360px);margin-inline:auto;perspective:1400px}
.rcard-inner{position:relative;display:grid;aspect-ratio:63/88;transform-style:preserve-3d;transform-origin:50% 50%}
.rcard-face{grid-area:1 / 1;position:relative;overflow:hidden;border-radius:6% / 4.3%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:var(--lift-2)}
.rcard-front{display:flex;flex-direction:column;padding:13% 8% 11%;background:var(--lacquer);color:var(--candle);
  box-shadow:inset 0 0 0 10px var(--lacquer), inset 0 0 0 11px rgba(224,174,82,.55), var(--lift-2)}
.rcard-face.rcard-back{transform:rotateY(180deg)}
.rcard[data-face="back"] .rcard-inner{transform:rotateY(180deg)}
.rcard-index{position:absolute;z-index:2;display:grid;place-items:center;color:var(--team,var(--town));line-height:1}
.rcard-index .ico,.rcard-index .ui-ico{width:22px;height:22px;vertical-align:0}
.rcard-index-tl{top:18px;left:18px}
.rcard-index-br{bottom:18px;right:18px;transform:rotate(180deg)}
.rcard-front .cardart{flex:1 1 0;min-height:7rem;aspect-ratio:auto;border-radius:3px;box-shadow:0 0 0 1px rgba(224,174,82,.28)}
.rcard-body{display:grid;justify-items:center;gap:var(--s1);padding-top:var(--s4);text-align:center}
.rcard-name{font-family:var(--font-display);font-weight:800;font-size:min(var(--fs-2xl), 15cqi);line-height:var(--lh-tight);letter-spacing:-.005em;color:var(--candle);
  overflow-wrap:anywhere;hyphens:auto;margin:0}
.rcard-blurb{font-family:var(--font-voice);font-style:italic;font-weight:500;font-size:var(--fs-md);line-height:1.42;color:var(--smoke);max-width:30ch;margin-top:var(--s1)}
.rcard-body .team-tag{color:var(--team)}

/* procedural art (art.js) */
.cardart{container-type:size;position:relative;aspect-ratio:1/1.08;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 42%, var(--c1), var(--c2) 62%, var(--c3))}
.cardart .bgart{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.cardart .ico.big{position:relative;width:min(58cqw, 66cqh);height:min(58cqw, 66cqh);color:var(--ink);
  filter:drop-shadow(0 0 14px var(--glow)) drop-shadow(0 4px 6px rgba(8,5,3,.7))}
.cardart .ico.big.emo-fb{width:auto;height:auto;font-size:min(40cqw, 48cqh)}
.cardart .portrait{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}

/* card back: the hidden role card, home fan, waiting state */
.rcard-back{display:grid;place-items:center;aspect-ratio:63/88;border-radius:6% / 4.3%;color:var(--brass);
  background:
    repeating-linear-gradient(45deg, rgba(224,174,82,.10) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, rgba(224,174,82,.10) 0 1px, transparent 1px 9px),
    var(--lacquer);
  box-shadow:inset 0 0 0 10px var(--lacquer), inset 0 0 0 11px rgba(224,174,82,.55)}
.rcard-face.rcard-back{aspect-ratio:auto;box-shadow:inset 0 0 0 10px var(--lacquer), inset 0 0 0 11px rgba(224,174,82,.55), var(--lift-2)}
.rcard-back-mark,.rcard-back > .ui-ico{display:grid;place-items:center;width:40%;color:var(--brass)}
.rcard-back-mark .ui-ico,.rcard-back > .ui-ico{width:100%;height:auto;aspect-ratio:1;vertical-align:0}
.rcard-back:empty::after{content:"";width:30%;aspect-ratio:1;transform:rotate(45deg);border:1.5px solid rgba(224,174,82,.75);
  box-shadow:inset 0 0 0 5px var(--lacquer), inset 0 0 0 6.5px rgba(224,174,82,.5)}
.card-fan .rcard-back,.waiting .rcard-back{box-shadow:inset 0 0 0 6px var(--lacquer), inset 0 0 0 7px rgba(224,174,82,.6), 0 0 0 1px rgba(224,174,82,.22), var(--lift-2)}

/* the one orchestrated moment: role-card turn-over */
.rcard.is-flipping .rcard-inner{animation:rc-flip var(--t-reveal) var(--ease-out) both;will-change:transform}
.rcard.is-popping .rcard-inner{animation:rc-pop 520ms var(--ease-out) both;will-change:transform,opacity}
.rcard.is-unflipping .rcard-inner{animation:rc-unflip var(--t-open) var(--ease-in-out) both}
.rcard.is-flipping .rcard-front::after{content:"";position:absolute;inset:-10% 0;z-index:3;pointer-events:none;
  background:linear-gradient(115deg, transparent 35%, rgba(247,213,138,.26) 50%, transparent 65%);
  animation:rc-glint 250ms ease-out calc(var(--t-reveal) - 250ms) both}
@keyframes rc-flip{0%{transform:rotateY(180deg) scale(.94)}55%{transform:rotateY(-10deg) translateZ(50px) scale(1.06)}80%{transform:rotateY(3deg) translateZ(20px) scale(1.02)}100%{transform:rotateY(0deg) scale(1)}}
@keyframes rc-pop{0%{transform:rotateY(180deg) translateY(30px) scale(.7);opacity:0}60%{transform:rotateY(180deg) translateY(-6px) scale(1.07);opacity:1}100%{transform:rotateY(180deg) scale(1);opacity:1}}
@keyframes rc-pop-flat{0%{transform:scale(.88)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes rc-unflip{from{transform:rotateY(0deg)}to{transform:rotateY(180deg)}}
@keyframes rc-glint{from{transform:translateX(-110%)}to{transform:translateX(110%)}}
@keyframes rc-fade{from{opacity:0}to{opacity:1}}

/* ================================================================== player */
.wrap.seat-view{max-width:44rem;display:grid;gap:var(--s7)}
.hand{min-width:0;display:grid;gap:var(--s4);justify-items:center}
.hand > .block,.hand > .card-picker{justify-self:stretch}
.hand .btn.big{width:min(100%,360px)}
.table-side{min-width:0}
.table-side > .block{margin-top:var(--section)}
.waiting{display:grid;justify-items:center;gap:var(--s3);text-align:center;padding:var(--s4) 0}
.waiting .rcard-back{width:120px;margin-bottom:var(--s3)}
.waiting .muted{font-size:var(--fs-md)}
.dossier{display:grid;gap:var(--s1);width:min(100%,360px)}
.dossier .note{margin:0}
.dossier:empty{display:none}

.card-picker .muted{margin-bottom:var(--s4)}
.suit-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:var(--s2);margin-top:var(--s3)}
.suit{display:grid;justify-items:center;align-content:center;gap:2px;min-height:64px;padding:var(--s2) var(--s1);border-radius:var(--r-control);
  border:1.5px solid var(--card);background:var(--card);color:var(--card-ink);font-weight:700;font-size:var(--fs-xs);box-shadow:var(--lift-1)}
.suit b,.suit .suit-sym{font:700 1.75rem/1 var(--font-display)}
.suit[data-v="H"],.suit[data-v="D"],.suit.is-red{color:var(--card-red)}
.suit[aria-pressed="true"]{outline:3px solid var(--brass);outline-offset:2px}
.rank-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:var(--s2);margin-top:var(--s4)}
.pcb{min-height:72px;aspect-ratio:5/7;border:0;border-radius:6% / 5%;font-size:1.375rem;padding:var(--s1);cursor:pointer}
.pcb[aria-pressed="true"]{outline:3px solid var(--brass);outline-offset:2px}
.card-picker .btn.big{margin-top:var(--s5);width:100%}
.card-picker .link{margin-top:var(--s2)}

/* card picker steps (a real sequence: numbered) */
.picker-step{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s5);font-family:var(--font-ui);font-weight:700;font-size:var(--fs-lg)}
.picker-n{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;border:2px solid var(--brass);color:var(--brass);
  font:700 var(--fs-lg)/1 var(--font-display);font-variant-numeric:tabular-nums}
.suit .suit-sym{display:grid;place-items:center;min-height:1.75rem}
.suit .suit-sym .ui-ico{width:28px;height:28px;vertical-align:0}
.suit-name{font-size:var(--fs-xs);font-weight:700}
.pcb.is-joker{grid-column:span 2;aspect-ratio:auto;min-height:72px;display:grid;gap:var(--s1);font:700 var(--fs-sm)/1.2 var(--font-ui)}
.pcb.is-joker .ui-ico{width:28px;height:28px}
.pc .pc-joker{width:18px;height:18px}
.pc:has(.pc-jkr){display:inline-grid;align-content:center;gap:1px}
.pc-jkr{font-size:var(--fs-xs);letter-spacing:0}
.keygrid.is-big .pc .pc-joker{width:26px;height:26px}
.reveal-hint{text-align:center;max-width:32ch}
.find-card .keygrid{margin-top:var(--s4)}
.keygrid.is-big{grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:var(--s3) var(--s5)}
.keygrid.is-big .keyrow{min-height:96px}
.keygrid.is-big .pc{width:64px;height:88px;font-size:1.75rem}
.keygrid.is-big .key-name{font-size:var(--fs-lg)}
.search-empty{margin-top:var(--s4)}
.sheet-sub{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-md);color:var(--smoke);margin:var(--s5) 0 0}
.sheet-sub + .dots-edit{margin-top:var(--s2)}
.modal-head{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
.modal-head .block-title{flex:1;margin:0}
.modal-foot{position:sticky;z-index:1;bottom:calc(-1 * (var(--s5) + env(safe-area-inset-bottom)));margin-bottom:calc(-1 * (var(--s5) + env(safe-area-inset-bottom)));
  padding:var(--s3) 0 calc(var(--s3) + var(--s5) + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--rule)}
.field-group{margin-top:var(--s5)}
.field-group:first-of-type{margin-top:0}
.field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:0 var(--s3);margin-top:var(--s4)}
.field-row > .field,.modal .field-row > .field + .field{margin-top:0}
.check{display:flex;align-items:center;gap:var(--s2);min-height:44px;font-size:var(--fs-md);color:var(--candle);cursor:pointer}
.check input{width:20px;height:20px;margin:0;accent-color:var(--brass)}
.resume-row{margin:0;display:inline}
.event.is-note > .ui-ico,.event.is-quiet > .ui-ico{color:var(--smoke)}
.wrap.fatal{min-height:70dvh;display:grid;place-items:center}
.ui-ico.is-big{width:40px;height:40px}
.empty .phase-title{font-size:var(--fs-xl);color:var(--candle);max-width:24ch}
.tip-glyph{display:inline-grid;place-items:center;color:var(--team,var(--brass))}
.tip-glyph .ico{width:24px;height:24px;vertical-align:0}

/* ================================================================ tooltip */
#tip{position:fixed;z-index:80;max-width:320px;padding:var(--s3) var(--s4);border-radius:var(--r-tag);background:var(--panel-2);border:1px solid var(--rule-strong);
  box-shadow:var(--lift-2);font-size:var(--fs-sm);line-height:1.45;color:var(--candle);opacity:0;pointer-events:none;transform:translateY(4px);
  transition:opacity 120ms,transform 120ms}
#tip.on{opacity:1;transform:none}
#tip .tip-h{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)}
#tip .tip-h .ico{width:24px;height:24px;color:var(--team,var(--brass))}
#tip .tip-h b{font-weight:700;font-size:var(--fs-md)}
#tip .tip-h .al-tag,#tip .tip-h .team-tag{margin-left:auto;font-size:var(--fs-xs)}
#tip:has(.a-town) .tip-h .ico{color:var(--town)}
#tip:has(.a-mafia) .tip-h .ico{color:var(--mafia)}
#tip:has(.a-third) .tip-h .ico{color:var(--third)}
#tip p{margin:0 0 var(--s2)}
#tip p:last-child{margin-bottom:0}
#tip div + div{margin-top:var(--s1);color:var(--smoke)}
#tip div b{color:var(--candle)}

/* =================================================================== toast */
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));z-index:60;max-width:min(90vw,32rem);padding:12px 20px;
  border-radius:var(--r-pill);background:var(--card);color:var(--card-ink);font-weight:700;font-size:var(--fs-md);line-height:1.3;text-align:center;
  box-shadow:var(--lift-2);opacity:0;pointer-events:none;transform:translate(-50%, 12px);transition:opacity var(--t-open),transform var(--t-open) var(--ease-out)}
#toast.on{opacity:1;transform:translate(-50%, 0)}
html[data-shell="host"] #toast{bottom:calc(var(--tabbar-h) + var(--dock-h) + env(safe-area-inset-bottom) + 12px)}

/* ======================================================= entrance motion */
.sheet.is-entering{animation:sheet-up var(--t-open) var(--ease-out) both}
.modal.is-entering,.overlay.is-entering .overlay-in,.overlay-in.is-entering{animation:modal-in var(--t-open) var(--ease-out) both}
@keyframes sheet-up{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheet-left{from{transform:translateX(-100%)}to{transform:none}}
@keyframes modal-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ============================================================ breakpoints */
@media (min-width:640px){
  .wrap.seat-view .rcard,.wrap.seat-view .dossier,.hand .btn.big{max-width:360px}
}

@media (min-width:768px){
  /* host: two columns, script left, table/log right */
  .console{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);column-gap:var(--s5);align-items:start}
  html[data-shell="host"] .console{padding-bottom:calc(var(--s5) + env(safe-area-inset-bottom))}
  .console .pane{display:block}
  .console[data-side="log"] .pane-table,
  .console[data-side="log"] .pane-roster,
  .console:not([data-side="log"]) .pane-log{display:none}
  .pane-game{grid-column:1;grid-row:1;min-height:calc(100dvh - var(--appbar-h) - var(--s7))}
  .side{grid-column:2;grid-row:1;position:sticky;top:calc(var(--appbar-h) + env(safe-area-inset-top) + var(--s4));
    max-height:calc(100dvh - var(--appbar-h) - env(safe-area-inset-top) - var(--s5));overflow:auto;overscroll-behavior:contain;padding:0 2px var(--s4)}
  .side-switch{display:flex}
  .side-switch ~ .pane-table > .block-head,.side-switch ~ .pane-log > .block-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tabbar{display:none}
  :root{--table-chrome:230px}
  .console .pane-game{display:flex;flex-direction:column}
  .pane-game > .action-dock{margin-top:auto}
  .action-dock{position:sticky;left:auto;right:auto;bottom:0;z-index:22;margin-inline:0;
    padding:var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom));margin-top:var(--s5)}
  html[data-shell="host"] #toast{bottom:calc(24px + env(safe-area-inset-bottom))}

  /* sheet docks left over the script column; the table stays visible */
  .sheet-bg{top:calc(var(--appbar-h) + env(safe-area-inset-top));background:transparent;justify-content:flex-start;align-items:stretch}
  .sheet{width:min(420px,46vw);max-width:none;max-height:none;height:100%;border-radius:0 var(--r-panel) var(--r-panel) 0;border-top:0;border-right:1px solid var(--rule);
    padding:var(--s5) var(--s5) calc(var(--s5) + env(safe-area-inset-bottom)) var(--gutter-l)}
  .sheet-grab{display:none}
  .sheet.is-entering{animation-name:sheet-left}
  /* the docked sheet covers the script column; hide what would peek out beside it */
  html:has(.sheet-bg) .pane-game{visibility:hidden}

  /* dialogs centre */
  .overlay{align-items:center;padding:var(--s5)}
  .modal{max-width:600px;max-height:calc(100dvh - 2 * var(--s5));border-radius:var(--r-panel);box-shadow:var(--lift-2);border:1px solid var(--rule);padding:var(--s5) var(--s6)}
  .modal .btn-row{justify-content:flex-end}
  .modal > .x-btn{top:var(--s3)}
  .overlay.key-show{padding:0}
  .key-show .overlay-in{max-height:100dvh;padding:calc(env(safe-area-inset-top) + var(--s6)) var(--gutter-r) var(--s5) var(--gutter-l)}
  .key-show .btn.big{max-width:420px;align-self:center}

  /* player: card left, table right */
  .wrap.seat-view{max-width:1100px;grid-template-columns:minmax(300px,420px) minmax(0,1fr);gap:var(--s7);align-items:start}
  .hand{position:sticky;top:calc(var(--appbar-h) + env(safe-area-inset-top) + var(--s4))}

  /* home: wordmark left, paths right */
  .wrap.home{grid-template-columns:minmax(0,1.1fr) minmax(300px,440px);column-gap:var(--s7);align-items:center;min-height:calc(100dvh - var(--s8));padding-top:var(--s7)}
  .home-hero{justify-items:start;text-align:left;align-self:center}
  .card-fan{justify-content:flex-start;order:3;margin:var(--s4) 0 0 var(--s4)}
  .home-paths{margin:0}
}

@media (min-width:1024px){
  :root{--section:var(--s8)}
  .console{grid-template-columns:minmax(380px,1fr) minmax(440px,1.15fr);column-gap:var(--s6)}
  .rcard,.wrap.seat-view .rcard{width:min(100%,420px);max-width:420px}
  .wrap.seat-view .dossier,.hand .btn.big{max-width:420px;width:min(100%,420px)}
  .sheet-bg{right:auto;width:100%}
  /* setting up is mostly the game pane's work: give it the room */
  html[data-phase="lobby"] .console{grid-template-columns:minmax(0,1.3fr) minmax(400px,1fr)}
}

@media (min-width:1440px){
  .console{grid-template-columns:minmax(380px,1fr) minmax(520px,1.35fr) minmax(300px,.7fr);
    grid-template-areas:"game table roster" "game table log";grid-template-rows:auto 1fr}
  .side{display:contents}
  .side-switch{display:none}
  .console .pane,
  .console[data-side="log"] .pane-table,
  .console[data-side="log"] .pane-roster,
  .console:not([data-side="log"]) .pane-log{display:block}
  .pane-game{grid-area:game}
  .pane-table{grid-area:table;position:sticky;top:calc(var(--appbar-h) + env(safe-area-inset-top) + var(--s4));align-self:start}
  .pane-roster{grid-area:roster;margin-top:0}
  .pane-log{grid-area:log;margin-top:var(--s7)}
  .console .pane-game{display:flex}
  .wrap.seat-view{max-width:1200px}
  .side-switch ~ .pane-table > .block-head,.side-switch ~ .pane-log > .block-title{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
  html[data-phase="lobby"] .console{grid-template-columns:minmax(520px,1.45fr) minmax(440px,1fr) minmax(280px,.6fr)}
  html[data-phase="lobby"] .pane-log,html[data-phase="over"] .pane-log{margin-top:0}
}

/* Showing the key across a room: from a laptop or iPad it has to read from the sofa.
   Cards grow only when the whole key still fits on one screen. */
@media (min-width:768px){
  /* auto margins centre the key when it fits and fall back to 0 when it scrolls */
  .key-show .phase-title,.key-show .btn.big{margin-top:auto}
  /* the key scrolls inside the sheet; title and Done stay put */
  .key-show .keygrid{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;margin-bottom:var(--s4);padding-bottom:var(--s2)}
  .key-show .btn.big{position:static;box-shadow:none}
}
@media (min-width:1024px) and (min-height:860px){
  .key-show .keygrid.fits-9{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--s4) var(--s6)}
  .key-show .fits-9 .keyrow{min-height:132px}
  .key-show .fits-9 .pc{width:84px;height:116px;font-size:2.375rem}
  .key-show .fits-9 .key-name{font-size:1.75rem;overflow-wrap:normal;hyphens:auto}
  .key-show .fits-9 .key-glyph .ico{width:40px;height:40px}
  .key-show .fits-9 .pc .pc-joker{width:36px;height:36px}
  .key-show .fits-9 .pc-jkr{font-size:var(--fs-sm)}
}
@media (min-width:1360px) and (min-height:860px){
  .key-show .keygrid.fits-16{grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:var(--s4) var(--s6)}
  .key-show .fits-16 .keyrow{min-height:132px}
  .key-show .fits-16 .pc{width:84px;height:116px;font-size:2.375rem}
  .key-show .fits-16 .key-name{font-size:1.75rem;overflow-wrap:normal;hyphens:auto}
  .key-show .fits-16 .key-glyph .ico{width:40px;height:40px}
  .key-show .fits-16 .pc .pc-joker{width:36px;height:36px}
  .key-show .fits-16 .pc-jkr{font-size:var(--fs-sm)}
}

/* ============================================================ reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}
  .btn:active,.pk:active,.choice:active,.seat:active .seat-card{transform:none}
  .rcard-inner,.rcard[data-face="back"] .rcard-inner{transform:none!important;animation:none!important}
  .rcard-face,.rcard-face.rcard-back{transform:none;-webkit-backface-visibility:visible;backface-visibility:visible}
  .rcard[data-face="front"] .rcard-back,.rcard[data-face="back"] .rcard-front{visibility:hidden}
  .rcard.is-flipping .rcard-front,.rcard.is-unflipping .rcard-back{animation:rc-fade 120ms linear both!important}
  .rcard.is-flipping .rcard-front::after{display:none}
}

/* ---------- room code: big in the lobby, full screen on demand ---------- */
.join-actions{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s2)}
.join-code .join-actions .btn{margin-top:0}
.appbar-code{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s2);margin-left:calc(-1 * var(--s2));background:none;border:0;border-radius:var(--r-control);color:inherit;font:inherit;cursor:pointer}
.appbar-code .code{color:var(--candle);letter-spacing:.08em}
.appbar-code svg{width:1em;height:1em;opacity:.7}
.overlay.code-show{background:var(--room);padding:0;align-items:stretch}
.code-show .overlay-in{max-width:none;max-height:none;height:100dvh;background:var(--room);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s4);text-align:center;
  padding:calc(env(safe-area-inset-top) + var(--s6)) var(--s4) calc(env(safe-area-inset-bottom) + var(--s5))}
.code-show-site{margin:0;font-size:clamp(1.25rem,4.5vw,2.25rem);color:var(--smoke)}
.code-show-site b{color:var(--ink)}
.code-show-code{font-family:var(--font-display);font-weight:800;line-height:.9;letter-spacing:.06em;color:var(--candle);
  font-size:min(28vw,42vh);font-variant-numeric:tabular-nums;white-space:nowrap}
.code-show-count{margin:0;font-size:clamp(1rem,3.5vw,1.5rem);opacity:.75}

/* ---------- ways out: switch to phones, start over, leave ---------- */
.linkish{background:none;border:0;padding:0;min-height:44px;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:.2em;cursor:pointer;display:inline-flex;align-items:center;gap:var(--s1)}
.linkish svg{width:1em;height:1em}
.deal-switch{margin-top:var(--s2)}
.leave-row{grid-column:1/-1;margin:var(--s5) 0 var(--s3);text-align:center}
.leave-row .linkish{color:var(--smoke)}

/* ---------- seat drag and drop ---------- */
/* Host seats can be dragged round the table (and rows of the crowded seat list); player boards never can. */
.board[data-host="1"] .seat,.board[data-host="1"] .seatrow{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.board[data-host="1"] .seat{touch-action:none;cursor:grab}
@media (hover:hover){.board[data-host="1"] .seatrow{cursor:grab}}
html.is-seat-dragging,html.is-seat-dragging *{cursor:grabbing!important}
.seat.is-dragging{z-index:5;transform:translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)))}
.seat.is-dragging .seat-card{transform:scale(1.08);box-shadow:var(--lift-2)}
/* brass = where it will land */
.seat.is-drop .seat-card{outline:2px dashed var(--brass);outline-offset:4px;box-shadow:var(--lamp)}
.seatrow.is-dragging{z-index:5;transform:translate(var(--dx, 0px), var(--dy, 0px));background:var(--panel-2);border-radius:var(--r-control);box-shadow:var(--lift-2)}
.seatrow.is-drop{outline:2px dashed var(--brass);outline-offset:-2px;border-radius:var(--r-control)}
.sheet .seat-move{margin-top:var(--s2)}
@media (prefers-reduced-motion:reduce){.seat.is-dragging .seat-card{transform:none}}

/* ---------- FAQ ---------- */
.home-faq{margin-top:var(--s5)}
.home-faq a{display:inline-flex;align-items:center;min-height:44px;color:var(--smoke);font-size:var(--fs-sm)}
@media (hover:hover){.home-faq a:hover{color:var(--candle)}}
.wrap.faq > .lede{margin-top:var(--s3);max-width:none}
.faq-group{margin-top:var(--s7)}
.faq-group > .block-title{margin-bottom:var(--s2)}
.faq-q{border-bottom:1px solid var(--rule)}
.faq-q:first-of-type{border-top:1px solid var(--rule)}
.faq-q > summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:56px;padding:var(--s3) 0;
  font-weight:700;font-size:var(--fs-md);line-height:1.3;color:var(--candle);list-style:none;cursor:pointer}
.faq-q > summary::-webkit-details-marker{display:none}
.faq-q > summary .ui-ico{width:20px;height:20px;color:var(--smoke);vertical-align:0;transition:transform var(--t-open) var(--ease-out)}
.faq-q[open] > summary .ui-ico{transform:rotate(180deg)}
@media (hover:hover){.faq-q > summary:hover .ui-ico{color:var(--candle)}}
.faq-a{padding:0 0 var(--s5);max-width:var(--measure)}
.faq-a > * + *{margin-top:var(--s3)}
.faq-a ul,.faq-a ol{display:grid;gap:var(--s2);padding-left:1.4em}
.faq-a li::marker{color:var(--smoke)}
.faq-a a{color:var(--candle)}
.faq-back{margin-top:var(--s7)}

/* ---------- setup advice and balance (lobby) ---------- */
.advice{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s1)}
.advice .note{margin-top:0}
.note.advice-error,.note.advice-error > .ui-ico{color:var(--mafia)}
.note.advice-tip{color:var(--smoke)}
.note.is-ok > .ui-ico{color:var(--baize-lit)}
.balance{margin-top:var(--s4);padding:var(--s3) var(--s4) var(--s4);background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-panel)}
.balance-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--s1) var(--s3)}
.balance-title{font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:.02em}
.balance-text{color:var(--smoke);font-size:var(--fs-sm)}
.balance[data-strength="even"] .balance-text{color:var(--candle)}
.balance[data-strength="strong"][data-verdict="town"] .balance-text{color:var(--town)}
.balance[data-strength="strong"][data-verdict="mafia"] .balance-text{color:var(--mafia)}
.balance-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.balance-end{font-size:var(--fs-xs);color:var(--faint)}
.balance-track{position:relative;height:10px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--mafia-dim),var(--rule) 40%,var(--rule) 60%,var(--town-dim))}
/* the even zone: a quiet band in the middle */
.balance-mid{position:absolute;left:40%;right:40%;top:-3px;bottom:-3px;border-left:1px solid var(--rule-strong);border-right:1px solid var(--rule-strong)}
.balance-dot{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--brass);border:3px solid var(--room);box-shadow:var(--lift-1);transition:left var(--t-open) var(--ease-out)}
.balance .btn{margin-top:var(--s3)}
@media (prefers-reduced-motion:reduce){.balance-dot{transition:none}}

/* ---------- storyteller-only lines and live results (night) ---------- */
.note.is-private{font-size:var(--fs-sm);color:var(--smoke);padding-left:var(--s3);border-left:2px dashed var(--rule-strong)}
.note.is-private > .ui-ico{color:var(--brass)}
.tell-now{margin-top:var(--s2);display:grid;gap:var(--s2);justify-items:start}
.tell-say{display:flex;gap:var(--s2);align-items:flex-start;margin:0;font-size:var(--fs-md);max-width:var(--measure)}
.tell-say > .ui-ico{margin-top:.15em;color:var(--brass);vertical-align:0}
.tell-say b{font-family:var(--font-voice);font-style:italic;font-weight:600;color:var(--brass-hi)}

/* ---------- how to play your role (player phone) ---------- */
.guide{padding:var(--s4);background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-panel);display:grid;gap:var(--s4);text-align:left;max-width:34rem;width:100%;justify-self:center}
.guide-part p{margin:var(--s1) 0 0;font-size:var(--fs-md);line-height:var(--lh-ui);color:var(--candle)}
.guide-title{display:flex;align-items:center;gap:var(--s2);margin:0;font-family:var(--font-display);font-weight:700;font-size:var(--fs-lg);letter-spacing:.02em;color:var(--brass)}
.guide-title .ui-ico{width:20px;height:20px;vertical-align:0}

/* ---------- game style: theme and house rules (lobby) ---------- */
.game-style .disclosure{margin-top:var(--s3)}
.rules{display:grid;gap:var(--s1);margin-top:var(--s2)}
.rule{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);width:100%;min-height:56px;padding:var(--s3) var(--s4);
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-control);color:var(--candle);font:inherit;text-align:left;cursor:pointer}
.rule[aria-disabled="true"]{opacity:.6;cursor:not-allowed}
.rule-text{display:grid;gap:2px}
.rule-title{font-weight:700;font-size:var(--fs-md)}
.rule-desc{font-size:var(--fs-sm);color:var(--smoke)}
.switch{position:relative;flex:none;width:46px;height:28px;border-radius:var(--r-pill);background:var(--rule);transition:background var(--t-open) var(--ease-out)}
.switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--candle);transition:transform var(--t-open) var(--ease-out)}
.rule[aria-checked="true"] .switch{background:var(--brass)}
.rule[aria-checked="true"] .switch i{transform:translateX(18px);background:var(--on-brass)}
@media (hover:hover){.rule:not([aria-disabled="true"]):hover{border-color:var(--rule-strong)}}
@media (prefers-reduced-motion:reduce){.switch,.switch i{transition:none}}

/* ---------- tools: timer, votes, pick, coin, dice ---------- */
.appbar-tools{display:inline-flex;align-items:center;gap:var(--s1);min-height:40px;padding:0 var(--s3);margin-left:var(--s2);
  border:1px solid var(--rule);border-radius:var(--r-pill);background:transparent;color:var(--smoke);font:inherit;font-size:var(--fs-sm);cursor:pointer}
.appbar-tools .ui-ico{width:18px;height:18px;vertical-align:0}
.appbar-tools.is-running{border-color:var(--brass);color:var(--brass)}
.appbar-timer{font-variant-numeric:tabular-nums;font-weight:700}
@media (max-width:420px){.appbar-tools-label{display:none}}
@media (hover:hover){.appbar-tools:hover{color:var(--candle);border-color:var(--rule-strong)}}
.tools.overlay-in{max-width:34rem;margin:auto;padding:var(--s6) var(--gutter) var(--s5);border-radius:var(--r-panel)}
@media (max-width:600px){.tools.overlay-in{border-radius:0;margin:0}}
.tool-tabs{display:flex;gap:var(--s1);margin:var(--s4) 0 var(--s5);overflow-x:auto}
.tool-tabs button{flex:1 0 auto;display:grid;justify-items:center;gap:2px;min-height:56px;padding:var(--s2) var(--s3);border:1px solid var(--rule);
  border-radius:var(--r-control);background:transparent;color:var(--smoke);font:inherit;font-size:var(--fs-xs);cursor:pointer}
.tool-tabs button .ui-ico{width:22px;height:22px;vertical-align:0}
.tool-tabs button[aria-selected="true"]{border-color:var(--brass);color:var(--brass);background:var(--panel-2)}
.tool-center{display:grid;justify-items:center;gap:var(--s4);text-align:center}
.tool-big{margin:0;font-family:var(--font-display);font-weight:800;font-size:clamp(3.5rem,18vw,6.5rem);line-height:1;color:var(--candle);font-variant-numeric:tabular-nums}
.tool-name{font-size:clamp(2.25rem,11vw,4rem);overflow-wrap:anywhere}
.tool-sub{margin:calc(-1 * var(--s2)) 0 0;font-size:var(--fs-lg);color:var(--brass)}
.tool-presets .btn[aria-pressed="true"],.tool-center .btn.ghost[aria-pressed="true"]{border-color:var(--brass);color:var(--brass)}
.vote-list{list-style:none;margin:var(--s3) 0;padding:0;display:grid;gap:var(--s1)}
.vote-row{display:grid;grid-template-columns:1fr auto 2.5ch auto;align-items:center;gap:var(--s2);padding:var(--s1) var(--s2) var(--s1) var(--s3);
  border:1px solid var(--rule);border-radius:var(--r-control)}
.vote-row.is-top{border-color:var(--rule-strong)}
.vote-row.is-majority{border-color:var(--brass);background:var(--panel-2)}
.vote-name{font-weight:700;overflow-wrap:anywhere}
.vote-n{text-align:center;font-size:var(--fs-lg);font-variant-numeric:tabular-nums}

/* ---------- player phone: results and notes ---------- */
.my-results,.my-notes{justify-self:stretch;width:100%;max-width:34rem}
.hand .my-results{justify-self:center}
.my-results .block-title{display:flex;align-items:center;gap:var(--s2)}
.logl-when{color:var(--faint);font-size:var(--fs-xs);margin-right:var(--s1)}
.my-notes .field{margin-top:var(--s2)}
.my-notes textarea{min-height:140px}

/* Local mode: say plainly that the game lives only on this device. */
.appbar-sub{display:block;font-size:var(--fs-xs);font-weight:500;color:var(--smoke);overflow:hidden;text-overflow:ellipsis}
.local-note{margin-bottom:var(--s4)}

/* ======================================================================================
   Transit-style default look (DESIGN.md section 18): flat saturated colour blocks, big rounded cards, pill
   buttons, heavy type, springy presses. Liquid Glass only on overlays, sheets and the main action.
   ====================================================================================== */
.btn{min-height:52px;padding:0 26px;border-radius:var(--r-pill);font-weight:800;box-shadow:0 4px 0 var(--brass-lo);
  transition:background-color var(--t-press),border-color var(--t-press),transform 260ms var(--spring)}
.btn:active{transform:translateY(3px) scale(.96)}
.btn.ghost{box-shadow:none;border-width:2px}
.btn.danger{box-shadow:0 4px 0 var(--card-red)}
.btn.ghost.danger,.btn.disabled,.btn[aria-disabled="true"]{box-shadow:none}
.btn.big{min-height:64px;font-size:var(--fs-lg)}
.pk{min-height:52px;border-radius:var(--r-pill);border-width:2px;font-weight:700;transition:background-color var(--t-press),color var(--t-press),transform 260ms var(--spring)}
.pk:active{transform:scale(.94)}
.pk[aria-pressed="true"]{transform:scale(1.04)}
.mini,.pill,.phase-badge{font-weight:800}
.sheet{border-radius:32px 32px 0 0}
.cue.is-current .cue-body,.whisper,.balance,.guide,.panel{border-radius:var(--r-card)}
.rule{border-radius:var(--r-panel)}

/* colour blocks: the phase says what it is at a glance */
.pane-game .phase-head{padding:var(--s5);border-radius:var(--r-card);background:var(--brass);color:var(--on-brass)}
html[data-phase="night"] .pane-game .phase-head{background:var(--town)}
.pane-game .phase-head .muted,.pane-game .phase-head .note,.pane-game .phase-head .note > .ui-ico{color:var(--on-brass)}
.win{padding:var(--s6) var(--s5);border-radius:var(--r-card);background:var(--team,var(--brass));color:var(--on-brass)}
.win .phase-title,.win .muted{color:var(--on-brass)}
.win .phase-title{font-size:var(--fs-3xl);line-height:.95}

/* big glanceable numbers */
.tally{font-weight:800;font-size:var(--fs-md)}
.vote-row{border-radius:var(--r-panel);padding:var(--s2) var(--s2) var(--s2) var(--s4);border-width:2px}
.vote-n{font:800 var(--fs-2xl)/1 var(--font-display)}
.appbar-timer{font-family:var(--font-display);font-size:1.25em;font-weight:800}
.is-tick{display:inline-block;animation:fx-tick 360ms var(--spring) both;will-change:transform,opacity}
@keyframes fx-tick{0%{transform:translateY(55%) scale(.7);opacity:0}100%{transform:none;opacity:1}}

/* the main action: big, at the bottom, in thumb reach; frosted so the page shows through */
.action-dock{background:linear-gradient(to bottom,transparent,var(--room) 38%);border-top:0;padding-top:var(--s5)}
.tabbar button{isolation:isolate}
.tabbar button[aria-current="page"]{color:var(--on-brass)}
.tabbar button[aria-current="page"]::before{inset:8px 16%;height:auto;top:8px;bottom:8px;border-radius:var(--r-pill);background:var(--brass);z-index:-1}
.anim-toggle{margin-left:var(--s1);border-radius:var(--r-pill);color:var(--smoke)}
.anim-toggle[aria-checked="true"]{color:var(--on-brass);background:var(--brass)}
.reveal-rows .arow{animation:fx-row 420ms var(--spring) both}
@keyframes fx-row{0%{transform:translateY(18px) scale(.96);opacity:0}100%{transform:none;opacity:1}}
.reveal-rows .arow:nth-child(2){animation-delay:0ms}
.reveal-rows .arow:nth-child(3){animation-delay:60ms}
.reveal-rows .arow:nth-child(4){animation-delay:120ms}
.reveal-rows .arow:nth-child(5){animation-delay:180ms}
.reveal-rows .arow:nth-child(6){animation-delay:240ms}
.reveal-rows .arow:nth-child(7){animation-delay:300ms}
.reveal-rows .arow:nth-child(8){animation-delay:360ms}
.reveal-rows .arow:nth-child(9){animation-delay:420ms}
.reveal-rows .arow:nth-child(10){animation-delay:480ms}
.reveal-rows .arow:nth-child(11){animation-delay:540ms}
.reveal-rows .arow:nth-child(12){animation-delay:600ms}

/* ---------------------------------------------------------------- Liquid Glass */
/* Frosted, tinted by --tint, with a thin light edge. blur and saturate are fixed: only transform and opacity ever animate. */
.glass,.sheet,.overlay-in.tools,.fx-victory .btn.big{
  -webkit-backdrop-filter:blur(18px) saturate(1.5);backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 0 0 1px rgba(255,255,255,.05),var(--lift-2)}
.glass,.sheet,.overlay-in.tools{color:var(--candle);
  background:linear-gradient(150deg,color-mix(in srgb,var(--tint,var(--brass)) 24%,rgba(37,28,22,.74)),rgba(27,20,16,.72))}
.fx-victory .btn.big{background:color-mix(in srgb,var(--brass) 88%,transparent);color:var(--on-brass);border-color:rgba(255,255,255,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 4px 0 var(--brass-lo)}
/* soft specular highlight: an oversized sheen that slides with the tilt (transform only) */
.glass{position:relative;overflow:hidden;isolation:isolate}
.glass::after{content:"";position:absolute;inset:-60%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,255,255,.34),rgba(255,255,255,0) 70%);
  transform:translate(calc(var(--tx,0) * -22%),calc(var(--ty,0) * -22% - 18%))}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.sheet,.overlay-in.tools{background:rgba(37,28,22,.96)}
  .fx-victory .btn.big{background:var(--brass)}
}
html[data-lite="1"] .glass,html[data-lite="1"] .sheet,html[data-lite="1"] .overlay-in.tools{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(37,28,22,.96)}
html[data-lite="1"] .fx-victory .btn.big{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--brass)}
html[data-lite="1"] .glass::after{display:none}

/* ---------------------------------------------------------------- effects layer (fx.js) */
#fx{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden}
.fx-scene{position:absolute;inset:0;pointer-events:none}
.fx-scene::before{content:"";position:absolute;inset:0;opacity:0;will-change:opacity}
@keyframes fx-wash{0%{opacity:0}30%,65%{opacity:1}100%{opacity:0}}
/* night falls: dusk wash, moon drops in, stars twinkle on */
.fx-night::before{background:radial-gradient(120% 90% at 50% 0,#243456,#0A0F1E 72%);animation:fx-wash 1100ms ease-in-out both}
.fx-moon{position:absolute;top:14%;left:50%;width:min(34vw,150px);margin-left:calc(min(34vw,150px) / -2);animation:fx-moon 1100ms var(--ease-out) both;will-change:transform,opacity}
.fx-moon svg{display:block;width:100%;height:auto;filter:drop-shadow(0 0 18px rgba(241,230,210,.55))}
@keyframes fx-moon{0%{transform:translateY(-70%) scale(.6);opacity:0}30%{transform:scale(1.08);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:translateY(10%);opacity:0}}
.fx-star{position:absolute;width:14px;height:14px;background:#F7D58A;opacity:0;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:fx-star 950ms ease-out var(--d) both;will-change:transform,opacity}
@keyframes fx-star{0%{opacity:0;transform:scale(0) rotate(0)}35%{opacity:1;transform:scale(var(--s)) rotate(40deg)}100%{opacity:0;transform:scale(calc(var(--s) * .7)) rotate(80deg)}}
/* day breaks: warm wash, sun bursts up, rays fan out */
.fx-day::before{background:radial-gradient(circle at 50% 38%,rgba(255,226,140,.9),rgba(224,174,82,.4) 45%,transparent 78%);animation:fx-wash 1100ms ease-in-out both}
.fx-sun,.fx-v-sun::before{content:"";position:absolute;left:50%;top:38%;width:min(40vw,170px);aspect-ratio:1;margin:calc(min(40vw,170px) / -2) 0 0 calc(min(40vw,170px) / -2);border-radius:50%;
  background:radial-gradient(circle,#FFF4C2 0 38%,#F7D58A 62%,#E0AE52);animation:fx-sun 1100ms var(--spring) both;will-change:transform,opacity}
@keyframes fx-sun{0%{transform:scale(.2);opacity:0}35%{transform:scale(1.18);opacity:1}65%{transform:scale(1);opacity:1}100%{transform:scale(1.1);opacity:0}}
.fx-rays,.fx-v-sun::after{content:"";position:absolute;left:50%;top:38%;width:130vmax;height:130vmax;margin:-65vmax 0 0 -65vmax;
  background:repeating-conic-gradient(rgba(247,213,138,.6) 0 6deg,transparent 6deg 18deg);
  -webkit-mask:radial-gradient(circle,#000,transparent 55%);mask:radial-gradient(circle,#000,transparent 55%);
  animation:fx-rays 1100ms ease-out both;will-change:transform,opacity}
@keyframes fx-rays{0%{transform:scale(.15) rotate(0);opacity:0}30%{opacity:1}100%{transform:scale(1) rotate(28deg);opacity:0}}

/* pop-out reveal: a glass card springs out, a stamp slams on it */
.fx-out{display:grid;place-items:center}
.fx-out::before{background:rgba(8,5,3,.5);animation:fx-wash 1200ms ease-in-out both}
.fx-in{position:relative;width:min(86vw,340px);perspective:900px}
.fx-out .fx-in{animation:fx-spring-out 1200ms ease-out both;will-change:transform,opacity}
@keyframes fx-spring-out{0%{transform:scale(.3) rotateX(38deg);opacity:0}24%{transform:scale(1.13) rotateX(-6deg);opacity:1}38%{transform:scale(.97) rotateX(2deg)}52%,82%{transform:scale(1);opacity:1}100%{transform:scale(.94) translateY(-16px);opacity:0}}
.fx-card,.fx-v-card{display:grid;justify-items:center;gap:var(--s2);padding:30px 22px 26px;border-radius:32px;text-align:center;
  transform:rotateX(calc(var(--ty,0) * -7deg)) rotateY(calc(var(--tx,0) * 9deg));transition:transform 160ms ease-out}
.fx-out.is-vote .fx-card{--tint:var(--brass)}
.fx-out.is-night .fx-card{--tint:var(--mafia)}
.fx-pop-ico .ui-ico{width:56px;height:56px;vertical-align:0;color:var(--candle)}
.fx-pop-name{font:800 clamp(2.25rem,12vw,3.5rem)/1 var(--font-display);overflow-wrap:anywhere}
.fx-pop-why{font-size:var(--fs-lg);font-weight:700;color:var(--candle)}
.fx-pop-role{margin-top:var(--s1);padding:4px 16px;border-radius:var(--r-pill);background:var(--candle);color:var(--card-ink);font-weight:800;font-size:var(--fs-md)}
.fx-stamp{position:absolute;top:14px;right:10px;padding:2px 10px;border:3px solid var(--mafia);border-radius:8px;color:var(--mafia);background:rgba(27,20,16,.55);
  font:800 var(--fs-md)/1.2 var(--font-display);text-transform:uppercase;letter-spacing:.06em;transform:rotate(-8deg);animation:fx-slam 340ms var(--spring) 260ms both;will-change:transform,opacity}
@keyframes fx-slam{0%{transform:rotate(-8deg) scale(2.8);opacity:0}60%{transform:rotate(-8deg) scale(.9);opacity:1}100%{transform:rotate(-8deg) scale(1);opacity:1}}
.fx-shake{animation:fx-shake 320ms ease-out both}
@keyframes fx-shake{0%,100%{transform:none}15%{transform:translate(-5px,2px)}30%{transform:translate(4px,-2px)}45%{transform:translate(-3px,1px)}60%{transform:translate(2px,-1px)}}

/* particles: at most 18 per burst, all on transform + opacity, removed with their parent */
.fx-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.fx-p{position:absolute;left:-5px;top:-7px;width:10px;height:14px;border-radius:2px;background:var(--c);opacity:0;
  animation:fx-p 1000ms cubic-bezier(.15,.7,.3,1) var(--d) both;will-change:transform,opacity}
.fx-burst.is-sparks .fx-p{width:8px;height:8px;border-radius:50%;top:-4px;left:-4px}
@keyframes fx-p{0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)}70%{opacity:1}100%{opacity:0;transform:translate(var(--dx),calc(var(--dy) + 60px)) rotate(var(--r)) scale(1)}}

/* victory card: every screen at once, springs out and stays until closed */
.fx-victory{position:absolute;inset:0;z-index:1;pointer-events:auto;display:grid;place-items:center;padding:var(--s4);overflow:auto;
  background:rgba(8,5,3,.92);animation:rc-fade 250ms linear both}
.fx-victory.is-town{--tint:var(--brass);background:linear-gradient(180deg,rgba(35,52,88,.95),rgba(125,86,30,.95))}
.fx-victory.is-mafia{--tint:var(--mafia);background:radial-gradient(120% 80% at 50% 30%,rgba(122,31,38,.96),rgba(18,4,10,.97))}
.fx-victory.is-third{--tint:var(--third);background:linear-gradient(180deg,rgba(36,20,72,.96),rgba(14,8,32,.97))}
.fx-victory.is-none{--tint:var(--smoke)}
.fx-victory .fx-in{width:min(92vw,400px);animation:fx-spring-stay 760ms ease-out both;will-change:transform,opacity}
@keyframes fx-spring-stay{0%{transform:scale(.3) rotateX(38deg);opacity:0}38%{transform:scale(1.1) rotateX(-5deg);opacity:1}60%{transform:scale(.97) rotateX(2deg)}100%{transform:scale(1);opacity:1}}
.fx-v-sun{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.fx-victory:not(.is-town) .fx-v-sun{display:none}
.fx-v-ico .ui-ico{width:64px;height:64px;vertical-align:0;color:var(--tint)}
.fx-v-you{font:800 clamp(3rem,17vw,5rem)/.95 var(--font-display);animation:fx-slam-flat 380ms var(--spring) 380ms both;will-change:transform,opacity}
.fx-v-you.is-win{color:var(--brass-hi)}
.fx-v-you.is-loss{color:var(--smoke)}
@keyframes fx-slam-flat{0%{transform:scale(2.6) rotate(-6deg);opacity:0}60%{transform:scale(.92) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-3deg);opacity:1}}
.fx-v-team{font:800 clamp(1.75rem,9vw,2.5rem)/1.05 var(--font-display);color:var(--candle)}
.fx-v-reason{color:var(--candle);font-size:var(--fs-md);max-width:30ch}
.fx-v-actions{display:grid;gap:var(--s2);width:100%;margin-top:var(--s3)}

/* low-end: flat 2D pops, no 3D, no rays */
html[data-lite="1"] .fx-card,html[data-lite="1"] .fx-v-card,html[data-lite="1"] .rcard[data-tilt]{transform:none;transition:none}
html[data-lite="1"] .fx-rays,html[data-lite="1"] .fx-v-sun{display:none}
html[data-lite="1"] .fx-out .fx-in,html[data-lite="1"] .fx-victory .fx-in{animation-name:fx-pop-flat}
html[data-lite="1"] .rcard.is-flipping .rcard-inner{animation:rc-pop-flat 300ms var(--ease-out) both}
@keyframes fx-pop-flat{0%{transform:scale(.6);opacity:0}45%{transform:scale(1.08);opacity:1}70%{transform:scale(1)}100%{transform:scale(1);opacity:1}}
html[data-lite="1"] .fx-out .fx-in{animation-name:fx-pop-flat-out}
@keyframes fx-pop-flat-out{0%{transform:scale(.6);opacity:0}25%{transform:scale(1.08);opacity:1}40%{transform:scale(1)}80%{transform:scale(1);opacity:1}100%{transform:scale(.96);opacity:0}}

/* pointer / device tilt on the role card (set by fx.js, no idle loop) */
.rcard[data-tilt]{transform:perspective(1400px) rotateX(calc(var(--ty,0) * -5deg)) rotateY(calc(var(--tx,0) * 7deg));transition:transform 160ms ease-out}

/* animations off (host toggle) or reduced motion: everything lands in its final state */
html[data-fx="off"] *,html[data-fx="off"] *::before,html[data-fx="off"] *::after{animation-duration:0s!important;animation-delay:0s!important;transition-duration:0s!important}
html[data-fx="off"] [data-tilt]{transform:none!important}
html[data-fx="off"] .rcard-inner,html[data-fx="off"] .rcard[data-face="back"] .rcard-inner{transform:none!important;animation:none!important}
html[data-fx="off"] .rcard-face,html[data-fx="off"] .rcard-face.rcard-back{transform:none;-webkit-backface-visibility:visible;backface-visibility:visible}
html[data-fx="off"] .rcard[data-face="front"] .rcard-back,html[data-fx="off"] .rcard[data-face="back"] .rcard-front{visibility:hidden}
html[data-fx="off"] .rcard.is-flipping .rcard-front::after{display:none}
html[data-fx="off"] .fx-scene{display:none}
@media (prefers-reduced-motion:reduce){
  [data-tilt]{transform:none!important}
  .fx-scene{display:none}
  .btn:active,.pk:active{transform:none}.pk[aria-pressed="true"]{transform:none}
}

/* ======================================================================================
   Transit v2: matches the Game Night home page. Dark base, bold full-colour cards stacked like a route list,
   Rubik titles, big numbers, one full-width pill at the bottom. Tilt/lift is transform only (fx.js, rAF).
   Glass stays on sheets, pop-outs and overlays. Flat fallbacks: html[data-fx="off"], html[data-lite="1"].
   ====================================================================================== */
@font-face{font-family:"Rubik";src:url("/fonts/rubik-var.woff2") format("woff2");font-weight:500 900;font-style:normal;font-display:swap}
:root{--font-display:"Rubik",system-ui,sans-serif;--font-ui:"Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --room:#0B0B0D;--room-night:#07070A;--panel:#1A1A20;--panel-2:#26262E;--rule:#3A3A46;--rule-strong:#8A8A9A;--faint:#A9A9B8;
  --smoke:#C9C9D6;--candle:#FFF4E6;--brass:#F2C14E;--brass-hi:#FFD36B;--brass-lo:#B58A22;--on-brass:#2A0508;--ease-pop:cubic-bezier(.34,1.56,.64,1)}
html{background:var(--room)}
body{background:var(--room);font-weight:500}
h1,h2,.block-title,.phase-title,.wordmark,.path-title,.sheet-title,.balance-title,.guide-title,.table-phase,.room-code{font-family:var(--font-display);font-weight:900;letter-spacing:-.025em}
.block-title,.path-title{font-size:clamp(1.6rem,7vw,2.1rem);line-height:1.05}
.phase-title{letter-spacing:-.03em}
.wordmark{font-size:clamp(2.75rem,15vw,4.5rem);line-height:.95}
.code,.vote-n,.appbar-timer,.tally,.room-code,.table-alive{font-family:var(--font-display);font-weight:900;font-variant-numeric:tabular-nums}
.vote-n{font-size:clamp(2.5rem,12vw,3.5rem)}

/* cards: each panel is a bold colour block in the Mafia palette (red, gold, wine) */
.block,.whisper,.guide,.win,.path,.wrap.faq > .faq-group{--cb:#A3101D;--candle:#FFF4E6;--smoke:#F6D9CF;--faint:#F0CFC4;--brass:#FFD36B;--brass-hi:#FFE19A;--brass-lo:#B58A22;--on-brass:#2A0508;
  --panel:rgba(0,0,0,.28);--panel-2:rgba(0,0,0,.4);--rule:rgba(255,255,255,.3);--rule-strong:rgba(255,255,255,.6);--focus:#fff;
  --town:#D3E4FF;--mafia:#FFD0C8;--third:#E8DBFF;--team:#FFE19A}
.block:nth-of-type(3n+2),.path-join{--cb:#F2C14E;--candle:#2A0508;--smoke:#4A1A12;--faint:#5A2A1C;--brass:#7A0A14;--brass-hi:#7A0A14;--brass-lo:#3A0509;--on-brass:#FFF4E6;
  --panel:rgba(42,5,8,.1);--panel-2:rgba(42,5,8,.18);--rule:rgba(42,5,8,.35);--rule-strong:rgba(42,5,8,.7);--focus:#2A0508;
  --town:#17317E;--mafia:#8A0C18;--third:#4B2A8A;--team:#7A0A14}
.block:nth-of-type(3n),.whisper,.path-local{--cb:#6E0A14}
.block,.whisper,.guide,.path,.wrap.faq > .faq-group{position:relative;isolation:isolate;overflow:clip;margin:0 0 14px;padding:22px 20px;border:0;border-radius:28px;
  background:var(--cb);color:var(--candle);box-shadow:0 22px 34px -18px rgba(0,0,0,.75);max-width:none}
.block::before,.whisper::before,.guide::before,.path::before,.wrap.faq > .faq-group::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 240' preserveAspectRatio='xMidYMid slice'%3E%3Ccircle cx='330' cy='40' r='140' fill='%23fff' opacity='.07'/%3E%3Cpath d='M-20 40L120-20H190L-20 120Z M-20 150L260-20H330L-20 230Z' fill='%23000' opacity='.14'/%3E%3C/svg%3E") center/cover no-repeat}
.block:last-child{margin-bottom:14px}
.pane-log .block{margin-top:0}
.path + .path{border-top:0;padding-top:22px;margin-top:0}
.path-link{color:var(--candle)}
.pane-game .phase-head{background:#A3101D;color:#FFF4E6;box-shadow:0 22px 34px -18px rgba(0,0,0,.75)}
html[data-phase="night"] .pane-game .phase-head{background:#17317E}
.pane-game .phase-head .muted,.pane-game .phase-head .note,.pane-game .phase-head .note > .ui-ico{color:#FFF4E6}
.win{--cb:var(--team,#F2C14E)}
.faq-q{border-color:var(--rule)}
.wrap.faq > .field{margin-bottom:14px}


/* lift on press: one transform */
.block,.whisper,.guide,.path,.wrap.faq > .faq-group{transform:perspective(900px) translateY(var(--lift,0px)) rotateX(var(--rx,calc(var(--ogy,0) * -4deg))) rotateY(var(--ry,calc(var(--ogx,0) * 5deg)));
  transition:transform 380ms var(--ease-pop),box-shadow 380ms var(--ease-pop);touch-action:pan-y}
.block[data-tilting],.whisper[data-tilting],.guide[data-tilting],.path[data-tilting]{transition:transform 90ms linear}
.block:active,.whisper:active,.guide:active,.path:active{--lift:-3px}

/* the main action: a big full-width pill, fixed at the bottom. No glass here. */
.action-dock{background:linear-gradient(to bottom,transparent,var(--room) 42%);padding:var(--s5) 16px var(--s3)}
.action-dock .btn.big{min-height:72px;border-radius:var(--r-pill);font-size:clamp(1.4rem,6vw,1.85rem);font-weight:900;background:var(--brass);color:var(--on-brass);
  border:0;box-shadow:0 8px 0 var(--brass-lo),0 18px 24px -10px rgba(0,0,0,.7)}
.action-dock .btn.big:active{transform:translateY(5px) scale(.98);box-shadow:0 3px 0 var(--brass-lo)}
.action-dock .btn.big.disabled,.action-dock .btn.big[aria-disabled="true"]{background:var(--panel-2);color:var(--smoke);border:2px dashed var(--rule-strong);box-shadow:none}
.wrap.join .btn.big,.card-picker .btn.big{position:sticky;bottom:max(14px,env(safe-area-inset-bottom));z-index:5;min-height:72px;font-weight:900;font-size:clamp(1.4rem,6vw,1.85rem)}
.tabbar{background:var(--room);border-top:1px solid var(--rule)}

/* flat fallbacks: animations off, reduced motion, low-end */
html[data-fx="off"] .block,html[data-fx="off"] .whisper,html[data-fx="off"] .guide,html[data-fx="off"] .path,html[data-fx="off"] .wrap.faq > .faq-group,
html[data-lite="1"] .block,html[data-lite="1"] .whisper,html[data-lite="1"] .guide,html[data-lite="1"] .path,html[data-lite="1"] .wrap.faq > .faq-group{transform:none;transition:none;box-shadow:none}
html[data-lite="1"] .block::before,html[data-lite="1"] .whisper::before,html[data-lite="1"] .guide::before,html[data-lite="1"] .path::before{display:none}
@media (prefers-reduced-motion:reduce){
  .block,.whisper,.guide,.path,.wrap.faq > .faq-group{transform:none!important;transition:none}
  .action-dock .btn.big:active{transform:none}
}

/* ======================================================================================
   Polish pass. One primary action per screen carries the brand yellow; colour blocks are kept for
   the card that matters, everything else is a flat dark panel. Stripes and shadows only where they
   carry meaning.
   ====================================================================================== */

/* buttons: the lip shadow belongs to the main action only; others are quiet fills or outlines */
.btn,.btn.danger{box-shadow:none}
.btn.big,.modal-foot .btn:not(.ghost){box-shadow:0 4px 0 var(--brass-lo)}
.action-dock .btn.big{box-shadow:0 8px 0 var(--brass-lo),0 18px 24px -10px rgba(0,0,0,.7)}
.btn.big.danger{box-shadow:0 4px 0 var(--card-red)}
.block .btn:not(.ghost):not(.big):not(.danger),.whisper .btn:not(.ghost):not(.big),.guide .btn:not(.ghost):not(.big),.cue-body .btn:not(.ghost):not(.danger){
  background:var(--panel-2);border-color:transparent;color:var(--candle)}
.block .btn.ghost,.whisper .btn.ghost,.guide .btn.ghost,.cue-body .btn.ghost{border-color:var(--rule-strong);color:var(--candle)}
@media (hover:hover){
  .block .btn:not(.ghost):not(.big):not(.danger):hover,.whisper .btn:not(.ghost):not(.big):hover,.guide .btn:not(.ghost):not(.big):hover,.cue-body .btn:not(.ghost):not(.danger):hover{background:var(--panel);border-color:var(--candle)}
}

/* cards by role: stripes go (flat Transit colour), colour blocks only for the focal card */
.block::before,.whisper::before,.guide::before,.path::before,.wrap.faq > .faq-group::before{display:none}
.block:not(.join-code),.wrap.faq > .faq-group{--cb:#1A1A20;--candle:#FFF4E6;--smoke:#C9C9D6;--faint:#A9A9B8;--brass:#F2C14E;--brass-hi:#FFD36B;--brass-lo:#B58A22;--on-brass:#2A0508;
  --panel:#26262E;--panel-2:#31313B;--rule:#3A3A46;--rule-strong:#8A8A9A;--focus:#F7D58A;
  --town:#8DB6E8;--mafia:#F26B66;--third:#B996F0;--team:#C9C9D6;
  padding:var(--s5) var(--s4);border-radius:18px;box-shadow:none;transform:none}
.block:not(.join-code) .block-title{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.015em}
.block:not(.join-code) .block-head{margin-bottom:var(--s4)}
.whisper,.guide{box-shadow:none}
.join-code{border-radius:28px}

/* lobby: the room code is the focal point and has to fit at 390px */
.room-code{font-size:clamp(2.5rem,14vw,7.5rem);letter-spacing:.05em;white-space:nowrap;max-width:100%;margin-block:var(--s2) var(--s3)}
.join-code .muted{font-weight:700}

/* home: left-aligned masthead, one card back, one primary card */
.wrap.home{gap:var(--s6)}
.home-hero{grid-template-columns:minmax(0,1fr) auto;justify-items:start;align-items:end;text-align:left;gap:var(--s4) var(--s3)}
.home-hero .wordmark{grid-column:1;grid-row:1}
.home-hero .card-fan{grid-column:2;grid-row:1;height:auto;margin:0 var(--s2) var(--s2) 0;order:0;justify-content:flex-end}
.card-fan .rcard-back{width:clamp(72px,20vw,112px);transform:rotate(7deg)}
.home-hero .lede{grid-column:1/-1;max-width:28ch;font-size:var(--fs-md);font-weight:500}
.home-paths{margin-inline:0;max-width:none;gap:var(--s3)}
.home-paths .path{margin:0}
.path-host{padding:var(--s6) var(--s5) var(--s5)}
.path-host .path-title{font-size:clamp(2rem,9.5vw,2.75rem);line-height:1;margin-bottom:var(--s3)}
.path-host > .muted{margin-bottom:var(--s5);max-width:30ch}
.path-host .btn.big{margin-top:0}
.home-paths .path-join{--cb:#1A1A20;--candle:#FFF4E6;--smoke:#C9C9D6;--faint:#A9A9B8;--brass:#F2C14E;--brass-hi:#FFD36B;--brass-lo:#B58A22;--on-brass:#2A0508;
  --panel:#26262E;--panel-2:#31313B;--rule:#3A3A46;--rule-strong:#8A8A9A;--focus:#F7D58A;--town:#8DB6E8;--mafia:#F26B66;--third:#B996F0;
  padding:var(--s5) var(--s4);border-radius:18px;box-shadow:none;transform:none}
.path-join .path-title{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.015em;margin-bottom:var(--s2)}
.home-paths .path-local{--cb:transparent;--candle:#FFF4E6;--smoke:#C9C9D6;--faint:#A9A9B8;
  background:none;box-shadow:none;transform:none;padding:var(--s4) var(--s1) 0;border-radius:0}
.path-local .muted{max-width:34ch}
.home-faq{margin-top:0}
.home-faq a{padding-inline:var(--s1)}
.credits{text-align:left;justify-self:start}
@media (min-width:768px){
  .home-hero .card-fan{margin:0}
  .home-hero .wordmark{font-size:clamp(4.5rem,9vw,7.5rem)}
}

/* night: Say / Gesture are typographic tags, not icons; only the dock button is yellow */
.tell-say{display:block}
.tell-tag{margin-right:var(--s1);font-weight:900;font-size:var(--fs-sm);color:var(--brass)}
.tell-say.is-gesture .tell-tag{color:var(--smoke)}
.tell-say.is-gesture b{font-family:var(--font-ui);font-style:normal;font-weight:700;color:var(--candle)}
.cue.is-current .cue-body{border-radius:20px}

/* follow-up: flat pills (no bottom lip anywhere; pressed state is transform only) */
.btn,.btn.big,.btn.danger,.btn.big.danger,.modal-foot .btn:not(.ghost),.action-dock .btn.big,.fx-victory .btn.big{box-shadow:none}
.action-dock .btn.big:active,.btn.big:active{box-shadow:none}
.action-dock .btn.big:active{transform:scale(.97)}

/* join row: input and button share one height and one pill language */
.join-row{align-items:flex-end}
.join-row .code-input{min-height:52px;height:52px;border-radius:var(--r-pill)}
.join-row .btn{min-height:52px;height:52px;padding:0 var(--s5);background:var(--candle);border-color:var(--candle);color:#1A1A20}
@media (hover:hover){.join-row .btn:hover{background:var(--smoke);border-color:var(--smoke)}}

/* home link: bold with a drawn arrow instead of an underline */
.path-link{text-decoration:none;font-weight:800;gap:var(--s2)}
.path-link::after{content:"";flex:none;width:.5em;height:.5em;border:solid currentColor;border-width:2.5px 2.5px 0 0;transform:rotate(45deg) translate(-1px,1px);transition:transform 200ms var(--ease-out)}
@media (hover:hover){.path-link:hover::after{transform:rotate(45deg) translate(1px,-1px)}}

/* hero card back: flat graphic block */
.card-fan .rcard-back{box-shadow:inset 0 0 0 6px var(--lacquer),inset 0 0 0 7px rgba(224,174,82,.6)}

/* lead block rounder than the supporting panel */
.path-host{border-radius:36px}
.home-paths .path-join{border-radius:14px}

/* Confused Cop coin flip (host night screen): transform + opacity only; fx off / reduced motion = no flip, result fades in */
.coin-stage{display:grid;justify-items:center;gap:var(--s2);margin-top:var(--s3);perspective:600px}
.coin3d{position:relative;width:76px;height:76px;transform-style:preserve-3d;will-change:transform;transform:rotateY(0)}
.coin3d[data-face="tails"]{transform:rotateY(180deg)}
.coin3d.is-flipping{animation:coinflip 1.2s var(--ease-out) both}
.coin-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;border:3px solid var(--brass-lo);background:var(--brass);color:var(--on-brass);
  font-family:var(--font-display);font-weight:900;font-size:var(--fs-xl,2rem);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.coin-tails{transform:rotateY(180deg);background:var(--brass-hi)}
.coin-label{margin:0;font-weight:800;color:var(--brass-hi)}
.cue-after{grid-column:1/-1;min-width:0;display:grid;gap:var(--s2)}
.coin-after.is-waiting,.coin-label.is-waiting{opacity:0;animation:coinfade .3s var(--ease-out) forwards}
@keyframes coinflip{from{transform:rotateY(0)}to{transform:rotateY(var(--coin-end))}}
@keyframes coinfade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .coin3d.is-flipping{animation:none}
  .coin-after.is-waiting,.coin-label.is-waiting{opacity:1;animation:none}
}
html[data-fx="off"] .coin3d.is-flipping{animation:none}
html[data-fx="off"] .coin-after.is-waiting,html[data-fx="off"] .coin-label.is-waiting{opacity:1;animation:none}