*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
img{max-width:100%}

/* Look: a candlelit Highland castle at night. Parchment text, old gold, and blood red for the Traitors. Deliberately one dark look. */
:root{
  --void:#0b0c0b; --hull:#151815; --hull-2:#1d221d; --line:#38403a;
  --text:#efe6d2; --muted:#a8a08e; --hi:#e2b65c; --warn:#e2b65c;
  --accent:#d6a64d; --accent-glow:rgba(214,166,77,.32);
  --blood:#c0353c; --blood-glow:rgba(192,53,60,.4);
  --faith:#7fb28f;
  --ok:#86c49a; --bad:#ec6b62;
  --f-display:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --f-body:"Source Sans 3",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-label:"Source Sans 3",system-ui,sans-serif;
  color-scheme:dark;
}
html,body{height:100%}
body{background:var(--void);color:var(--text);font-family:var(--f-body);font-size:16px;line-height:1.55}
#embers{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.wrap{position:relative;z-index:1;max-width:820px;margin:0 auto;padding-block:20px 48px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:.01em;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,7vw,56px);line-height:1.05}
.h1s{font-size:clamp(28px,5.4vw,42px)}
h2{font-size:clamp(22px,4vw,28px);line-height:1.2}
h3{font-family:var(--f-label);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
p{margin:0}
.eyebrow{font-family:var(--f-label);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.muted{color:var(--muted)}
.note{font-size:13px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* HUD */
.hud{display:grid;grid-template-columns:1fr auto auto;gap:8px 16px;align-items:center;background:color-mix(in srgb,var(--hull) 90%,transparent);border:1px solid var(--line);border-radius:12px;padding:10px 14px;position:sticky;top:env(safe-area-inset-top,0px);z-index:5;backdrop-filter:blur(6px)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--void)}
.hud .team{min-width:0;font-weight:600}
.hud .tn{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--f-display);font-size:20px}
.hud .tn small{display:block;font-family:var(--f-body);font-weight:400;color:var(--muted);font-size:12px}
.stat{font-variant-numeric:tabular-nums;text-align:right;line-height:1.15}
.stat b{display:block;font-size:21px;font-weight:700}
.stat span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stat.warn b{color:var(--bad)}
.stat.hi b{color:var(--hi)}
.pips{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--muted);letter-spacing:.04em}
.pips span{padding:2px 9px;border:1px solid var(--line);border-radius:20px;white-space:nowrap}
.pips span.on{color:var(--void);background:var(--accent);border-color:var(--accent);font-weight:600}
.pips span.done{color:var(--text);border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.tools{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tools .spacer{flex:1}
.tool{appearance:none;cursor:pointer;border:1px solid var(--line);background:var(--hull-2);color:var(--text);border-radius:8px;padding:6px 12px;font-size:14px;font-weight:600}
.tool b{display:inline-grid;place-items:center;min-width:20px;height:20px;margin-left:4px;padding:0 5px;border-radius:10px;background:var(--accent);color:var(--void);font-size:12px}
.tool.on{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.shields{display:inline-flex;align-items:center;gap:2px;color:var(--faith)}
.shields svg{width:18px;height:18px;fill:var(--faith)}
.shields b{font-size:13px;margin-left:3px}
.traitorcount{display:inline-flex;align-items:center;gap:8px}
.traitorcount small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hoods{display:inline-flex;gap:4px}
.hoods i{width:14px;height:17px;border-radius:7px 7px 3px 3px;border:1.5px solid var(--line);background:transparent;display:inline-block}
.hoods i.on{background:var(--blood);border-color:var(--blood);box-shadow:0 0 8px var(--blood-glow)}

/* Panels */
.panel{background:color-mix(in srgb,var(--hull) 93%,transparent);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:16px}
.panel.hero{padding:30px 26px;gap:18px}
.panel.roundtable{border-color:color-mix(in srgb,var(--blood) 55%,var(--line));box-shadow:0 0 40px rgba(192,53,60,.12)}
.panel.drawer{border-color:var(--accent);gap:12px}
.title{display:flex;align-items:center;gap:16px}
.crest{flex:none;width:54px;height:62px;background:linear-gradient(180deg,var(--blood),#6d1a1f);clip-path:path("M27 0 L54 8 V30 C54 46 42 56 27 62 C12 56 0 46 0 30 V8 Z");box-shadow:inset 0 0 0 2px var(--hi)}
.story{font-size:18px;max-width:64ch}
.story em,.story b{color:var(--hi);font-style:normal}
.qhead{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.tag{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:3px 9px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.tag.bonus{color:var(--void);background:var(--faith);border-color:var(--faith)}
.tag.rt{color:#fff;background:var(--blood);border-color:var(--blood)}
.prompt{font-size:18px;max-width:64ch}
.prompt b{color:var(--hi)}
.btn{appearance:none;border:1px solid var(--accent);background:transparent;color:var(--text);padding:11px 18px;border-radius:9px;cursor:pointer;font-weight:600;letter-spacing:.01em;transition:background .15s,box-shadow .15s}
.btn:hover{box-shadow:0 0 14px var(--accent-glow)}
.btn.primary{background:var(--accent);color:#1a1307}
.btn.blood{background:var(--blood);border-color:var(--blood);color:#fff}
.btn.blood:hover{box-shadow:0 0 16px var(--blood-glow)}
.btn.ghost{border-color:var(--line);color:var(--muted);font-weight:500}
.btn.small{padding:6px 12px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:13px;color:var(--muted)}
input[type=text],input[type=number],input[type=password],input[type=date],select{background:var(--void);border:1px solid var(--line);border-radius:8px;padding:11px 12px;width:100%;min-width:0}
input:focus,select:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-glow)}
.answer-row{display:flex;gap:10px}
.answer-row input{flex:1;letter-spacing:.04em}
.feedback{font-weight:600;min-height:1.4em}
.feedback.bad{color:var(--bad)} .feedback.ok{color:var(--ok)}
.taunt{display:block;margin-top:4px;font-family:var(--f-display);font-style:italic;font-weight:500;font-size:17px;color:#d98c88}
.hintbox{border-left:3px solid var(--hi);padding:8px 12px;color:var(--hi);background:color-mix(in srgb,var(--hi) 8%,transparent);border-radius:0 6px 6px 0;display:flex;flex-direction:column;gap:6px}
.hintbox .replay{color:var(--text);font-size:15px}
.hintbox .replay em{color:var(--hi);font-style:normal}
.hintlab{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.briefbox{border-left:3px solid var(--accent);padding:10px 14px;background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:0 6px 6px 0;display:flex;flex-direction:column;gap:4px}
.briefbox .hintlab{color:var(--accent)}
.briefbox em{color:var(--hi);font-style:normal}
.reveal{border:1px solid var(--accent);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;background:color-mix(in srgb,var(--accent) 7%,transparent)}
.reveal .lab{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.reveal.missed{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 7%,transparent)}
.reveal.missed .lab{color:var(--bad)}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px}
.split .note b{color:var(--text)}

/* Clue cards */
.cluecard,.cluecards li{position:relative;background:#efe4c8;color:#2a2116;border-radius:6px;padding:14px 16px 14px 18px;box-shadow:0 6px 18px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:4px}
.cluecard::before,.cluecards li::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--blood);border-radius:6px 0 0 6px}
.cluecard .cn,.cluecards .cn{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blood)}
.cluecard p,.cluecards p{font-family:var(--f-display);font-size:19px;line-height:1.35}
.cluecard b,.cluecards b{color:#5c1418}
.cluecard .note{color:#6d604b}
.cluecards{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cluecards.compact p{font-size:16px}
.cluecards.compact li{padding:10px 12px 10px 15px}
.log{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--muted)}
.log b{color:var(--text)}
.log .t b{color:var(--blood)}
.shieldwon{display:flex;gap:10px;align-items:center;color:var(--faith)}
.shieldwon .shields svg{width:26px;height:26px}
.shieldwon .shields b{display:none}

/* Guests */
.por{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--pc) 85%,#fff) 0,var(--pc) 45%,color-mix(in srgb,var(--pc) 45%,#000) 100%);display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.por span{font-family:var(--f-display);font-weight:700;font-size:19px;color:#1b1610}
.por.big{width:64px;height:64px}.por.big span{font-size:34px}
.guests{width:100%;border-collapse:collapse;font-size:15px}
.guests th{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
.guests td{padding:7px 8px;border-bottom:1px solid color-mix(in srgb,var(--line) 55%,transparent);white-space:nowrap}
.gname{display:flex;gap:10px;align-items:center}
.gname b{display:block;font-size:15px}
.gname small{display:block;font-size:12px;color:var(--muted)}
.guests tr.out td{color:var(--muted)}
.guests tr.out .por{filter:grayscale(1);opacity:.5}
.guests tr.out.murdered td:not(:last-child){text-decoration:line-through;text-decoration-color:var(--muted)}
.guests tr.out.t td:first-child b{color:var(--blood)}
.guests tr.cleared td{opacity:.55}
.guests tr.suspect td:first-child b{color:#f0a19c}
.mark{appearance:none;cursor:pointer;border:1px dashed var(--line);background:none;color:var(--muted);border-radius:20px;padding:2px 10px;font-size:12px;font-weight:600}
.mark.s{border:1px solid var(--blood);color:#f0a19c;background:color-mix(in srgb,var(--blood) 12%,transparent)}
.mark.c{border:1px solid var(--faith);color:var(--faith)}
.gtag{font-size:11px;font-weight:600;letter-spacing:.04em;padding:2px 8px;border-radius:20px;border:1px solid var(--line)}
.gtag.traitor{border-color:var(--blood);color:#fff;background:var(--blood)}
.gtag.faithful{border-color:var(--faith);color:var(--faith)}
.gtag.dead{color:var(--muted)}
.picker{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:8px}
.gcard{appearance:none;cursor:pointer;text-align:left;display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--hull-2);color:var(--text);position:relative;transition:border-color .15s,box-shadow .15s}
.gcard:hover{border-color:var(--accent)}
.gcard .gc{min-width:0}
.gcard b{display:block;font-family:var(--f-display);font-size:19px;line-height:1.1}
.board .hoods,.pill + .hoods{margin-left:6px;vertical-align:middle}
.gcard small{display:block;font-size:12px;color:var(--muted)}
.gcard.on{border-color:var(--blood);box-shadow:0 0 0 2px var(--blood) inset,0 0 18px var(--blood-glow);background:color-mix(in srgb,var(--blood) 12%,var(--hull-2))}
.gcard.cleared{opacity:.55}
.gcard .gm{position:absolute;top:6px;right:8px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.gcard.suspect .gm{color:#f0a19c}
.rtcols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.rtclues{display:flex;flex-direction:column;gap:8px}
.breakfast{border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;background:color-mix(in srgb,var(--void) 60%,transparent)}
.breakfast .hintlab{color:var(--muted)}
.breakfast .brow{display:flex;gap:14px;align-items:center}
.breakfast .por{filter:grayscale(.9)}
.breakfast b{color:var(--hi)}
.verdict{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 16px;border-radius:12px;border:1px solid var(--line)}
.verdict .lab{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.verdict h2{font-size:clamp(30px,6vw,44px)}
.verdict p{max-width:52ch;font-size:17px}
.verdict.traitor{border-color:var(--blood);background:radial-gradient(circle at 50% 0,rgba(192,53,60,.28),transparent 70%)}
.verdict.traitor .lab{color:#f0a19c}
.verdict.faithful{border-color:var(--faith);background:radial-gradient(circle at 50% 0,rgba(127,178,143,.18),transparent 70%)}
.verdict.faithful .lab{color:var(--faith)}
.verdict .row{justify-content:center}
.unmasked{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.unmasked > span:not(.note){display:inline-flex;gap:8px;align-items:center;padding:4px 12px 4px 4px;border:1px solid var(--blood);border-radius:30px;font-weight:600}

/* Choice grid */
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.choice{appearance:none;text-align:left;background:var(--hull-2);border:1px solid var(--line);border-radius:10px;padding:14px;cursor:pointer;display:flex;gap:12px;align-items:center;color:var(--text);transition:border-color .15s,transform .1s}
.choice:hover{border-color:var(--accent)}
.choice:active{transform:scale(.99)}
.choice .k{font-weight:700;color:var(--accent);flex:none;width:22px}
.choice.wrong{border-color:var(--bad);opacity:.55}
.choice[disabled]{cursor:default}

/* Luggage wall */
.wall{display:flex;flex-direction:column;gap:8px}
.wtiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.wtile{appearance:none;cursor:pointer;min-height:58px;padding:6px;border-radius:8px;border:1px solid #6b5a3a;background:linear-gradient(180deg,#e8dcc0,#d8c8a4);color:#2a2116;font-weight:700;letter-spacing:.06em;font-size:clamp(12px,2.6vw,16px);box-shadow:0 2px 0 #8a7650;transition:transform .08s}
.wtile:active{transform:translateY(1px)}
.wtile.on{background:linear-gradient(180deg,#d6a64d,#b8862e);color:#1a1307;border-color:#f4d38a;box-shadow:0 0 14px var(--accent-glow)}
.grow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;padding:8px;border-radius:8px;color:#14100a;text-align:center}
.grow b{font-family:var(--f-display);font-size:19px}
.grow span{font-size:13px;font-weight:600;letter-spacing:.06em}
.grow.g0{background:#9cc3a8}.grow.g1{background:#e3b26a}.grow.g2{background:#9fb4d8}.grow.g3{background:#e09a95}

/* Seating */
.seatwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:center}
.seating{position:relative;aspect-ratio:1;max-width:340px;width:100%;margin:0 auto}
.tabletop{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#6b4a2b,#3d2814);box-shadow:inset 0 0 0 6px #2a1b0e,0 8px 20px rgba(0,0,0,.4);display:flex;justify-content:center;align-items:flex-start;padding-top:8px}
.tabletop span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#e9c98a;opacity:.8}
.seat{appearance:none;cursor:pointer;position:absolute;transform:translate(-50%,-50%);width:27%;aspect-ratio:1;border-radius:50%;border:2px dashed var(--line);background:var(--hull-2);color:var(--text);font-weight:700;font-size:clamp(12px,2.6vw,15px);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.seat small{font-size:11px;color:var(--muted);font-weight:600}
.seat.full{border-style:solid;border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--hull-2))}
.seat.ready{border-color:var(--accent);box-shadow:0 0 12px var(--accent-glow)}
.seatside{display:flex;flex-direction:column;gap:8px}
.notes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-family:var(--f-display);font-size:18px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{appearance:none;cursor:pointer;border:1px solid #6b5a3a;background:#e8dcc0;color:#2a2116;border-radius:6px;padding:6px 12px;font-family:var(--f-display);font-size:17px;font-weight:700}
.chip.on{background:var(--accent);border-color:#f4d38a;box-shadow:0 0 12px var(--accent-glow)}

/* Word search */
.wsbox{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.ws{display:grid;gap:4px;padding:12px;border-radius:12px;background:linear-gradient(160deg,#4d5249,#2f332d);box-shadow:inset 0 0 30px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.4);width:min(100%,380px)}
.wl{appearance:none;cursor:pointer;aspect-ratio:1;border:0;border-radius:6px;background:rgba(0,0,0,.18);color:#e9e3d2;font-family:var(--f-display);font-weight:700;font-size:clamp(18px,4.6vw,26px);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.wl:hover{background:rgba(255,255,255,.08)}
.wl.found{background:color-mix(in srgb,var(--faith) 55%,transparent);color:#0d140f;text-shadow:none}
.wl.start{background:var(--accent);color:#1a1307;text-shadow:none;box-shadow:0 0 12px var(--accent-glow)}
.wordlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:6px 18px;font-weight:700;letter-spacing:.08em}
.wordlist li.done{color:var(--faith);text-decoration:line-through}

/* Clocks */
.clockpair{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start}
.clockpair .figure{flex:1 1 220px}
.mirror,.setter{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--void);flex:1 1 220px}
.mirror{background:radial-gradient(circle at 30% 20%,#2b302d,#111311);border-color:#5d5747}
.mlab{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.clockface{width:min(100%,190px);height:auto}
.clockface .rim{fill:#5a4524;stroke:#a8843f;stroke-width:3}
.clockface .face{fill:#efe4c8}
.clockface .mk{stroke:#3a2f22;stroke-width:1.2}
.clockface .mk.big{stroke-width:3}
.clockface .mk.top{stroke:#3a2f22;stroke-width:6}
.clockface .hh,.clockface .mh{stroke:#1f1a14}
.clockface .pin{fill:#a8843f}
.clockface .num{font-family:var(--f-display);font-weight:700;font-size:20px;fill:#3a2f22}
.clockface.inmirror{transform:none;filter:sepia(.25) brightness(.92)}
.digital{font-variant-numeric:tabular-nums;font-size:28px;font-weight:700;color:var(--hi)}
.steps{display:grid;grid-template-columns:auto auto auto;gap:6px 8px;align-items:center;font-size:13px;color:var(--muted)}

/* Scales */
.scales{max-width:420px;width:100%}
.scales svg{width:100%;height:auto;display:block}
.scales .post{stroke:#a8843f;stroke-width:5;fill:none;stroke-linecap:round}
.scales .beam{stroke:#d6a64d;stroke-width:6;stroke-linecap:round}
.scales .pivot{fill:#f4d38a}
.scales .chain{stroke:#8f7a52;stroke-width:1.5}
.scales .pan{fill:#b8862e;stroke:#f4d38a;stroke-width:1.5}
.pans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.pancontent{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;min-height:34px}
.stag{padding:4px 10px;border-radius:6px;background:#cfd3d6;color:#1c2125;font-weight:700;font-size:14px}
.wt{display:inline-grid;place-items:center;min-width:34px;height:30px;padding:0 6px;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#d9a94b,#9c7225);color:#1a1307;font-weight:800;font-size:14px}
.weights{display:flex;gap:10px;flex-wrap:wrap}
.weight{appearance:none;cursor:pointer;width:88px;padding:10px 6px;border-radius:10px;border:1px solid var(--line);background:var(--hull-2);color:var(--text);display:flex;flex-direction:column;align-items:center;gap:2px}
.weight b{font-size:24px}
.weight small{font-size:12px;color:var(--muted)}
.weight.s1{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.weight.s2{border-color:#9fb4d8;box-shadow:inset 0 0 0 1px #9fb4d8}
.weight.s1 small{color:var(--accent)} .weight.s2 small{color:#9fb4d8}

/* Pouring */
.jugs{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
.jug{appearance:none;cursor:pointer;border:1px solid transparent;background:none;color:var(--text);display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:12px;transition:transform .15s}
.jug:hover{border-color:var(--line)}
.jug.lift{transform:translateY(-10px) rotate(-6deg);border-color:var(--accent);box-shadow:0 0 14px var(--accent-glow)}
.glass{position:relative;width:64px;height:var(--h);border:2px solid rgba(239,230,210,.6);border-top:0;border-radius:4px 4px 16px 16px;overflow:hidden;background:rgba(255,255,255,.04)}
.glass .wine{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(180deg,#8f1d2a,#5a0f18);transition:height .35s ease}
.glass i{position:absolute;left:0;width:10px;border-top:1px solid rgba(239,230,210,.45)}
.jug b{font-size:18px;font-variant-numeric:tabular-nums}
.jug small{font-size:12px;color:var(--muted)}

/* Padlock */
.padlock{display:flex;flex-direction:column;align-items:center;gap:0;align-self:flex-start;margin-left:8px}
.padlock .shackle{width:110px;height:auto;margin-bottom:-4px}
.padlock .shackle path{fill:none;stroke:#8f8a80;stroke-width:12;stroke-linecap:round}
.dials{display:flex;gap:8px;padding:16px 18px;border-radius:14px;background:linear-gradient(180deg,#3a3630,#24211d);border:2px solid #57514a;box-shadow:0 8px 18px rgba(0,0,0,.45)}
.dial{display:flex;flex-direction:column;align-items:center;gap:4px}
.dial button{appearance:none;cursor:pointer;border:1px solid #57514a;background:#2e2a25;color:var(--muted);width:44px;height:30px;border-radius:6px;font-size:13px}
.dial b{display:grid;place-items:center;width:44px;height:52px;border-radius:6px;background:linear-gradient(180deg,#c9c2b4,#efe9de 45%,#a9a294);color:#1c1a17;font-size:30px;font-variant-numeric:tabular-nums}

/* Spot the difference */
.diffs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.diffs figure{margin:0;display:flex;flex-direction:column;gap:6px}
.diffs figcaption{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.room{width:100%;height:auto;display:block;border-radius:10px;border:3px solid #5a4524}
.room .bgwall{fill:#3a3530}
.room .stones rect{fill:none;stroke:#2b2723;stroke-width:1.2}
.room .floor{fill:#2a231c}
.room .win{fill:#0f1a2e}
.room .winframe{fill:none;stroke:#1d1915;stroke-width:5}
.room .moonc{fill:#f3ecd2}
.room .moonbite{fill:#0f1a2e}
.room .frame{fill:#8a6a2c}
.room .canvas{fill:#3f4b3c}
.room .sitter{fill:none;stroke:#c9b98e;stroke-width:3}
.room .bannercloth{fill:#7a1f25}
.room .bannerbadge{fill:#d6a64d}
.room .wood,.room .mantel{fill:#5a3f24}
.room .book{stroke:#1b1612;stroke-width:1}
.room .clockbox{fill:#4a3420;stroke:#a8843f;stroke-width:2}
.room .clockdial{fill:#efe4c8}
.room .rh{stroke:#1f1a14;stroke-width:2.4;stroke-linecap:round}
.room .wax{fill:#eee6d0}
.room .flame{fill:#ffb648}
.room .smoke{fill:none;stroke:#8f8a80;stroke-width:1.5;opacity:.7}
.room .hook{fill:#8f8a80}
.room .keyg circle{fill:none;stroke:#d6a64d;stroke-width:3}
.room .keyg rect{fill:#d6a64d}
.room .gob{fill:#c7c9cc}
.room .chestbox{fill:#5d3b1e;stroke:#2a1b0e;stroke-width:2}
.room .chestlid{fill:none;stroke:#2a1b0e;stroke-width:2}
.room .lock{fill:#d6a64d}
.room .rugc{fill:#5c1e24}
.room .hit{fill:transparent;cursor:pointer}
.room .hit:hover{fill:rgba(214,166,77,.12)}
.room .hit.done{cursor:default}
.room .hit.miss{fill:rgba(236,107,98,.14)}
.room .foundmark{fill:none;stroke:var(--faith);stroke-width:3.5;pointer-events:none}

/* Board */
.board{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.board th{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
.board td{padding:8px;border-bottom:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.board td.num{text-align:right}
.board tr.me td{color:var(--accent);font-weight:600}
.board .pill{font-size:12px;padding:2px 8px;border-radius:20px;border:1px solid var(--line);white-space:nowrap}
.board .pill.fin{border-color:var(--hi);color:var(--hi)}
.tablebox{overflow-x:auto}
.bigboard .board td{font-size:19px;padding:12px 8px}
.wrap.wide{max-width:980px}
.tag.live{color:var(--void);background:var(--ok);border-color:var(--ok)}
.winner{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;padding:16px 18px;border:1px solid var(--hi);border-radius:12px;background:color-mix(in srgb,var(--hi) 8%,transparent)}
.winner b{font-family:var(--f-display);font-size:clamp(24px,4.6vw,36px);color:var(--hi)}
.winner span{color:var(--muted)}

.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.statgrid div{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--void)}
.statgrid b{display:block;font-size:24px;color:var(--hi);font-variant-numeric:tabular-nums}
.statgrid span{font-size:12px;color:var(--muted);letter-spacing:.04em}

footer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;color:var(--muted);font-size:13px}
.linkbtn{appearance:none;background:none;border:none;color:var(--muted);text-decoration:underline;cursor:pointer;padding:4px}
.linkbtn:hover{color:var(--text)}
a.btn{text-decoration:none;display:inline-block}
a.linkbtn{color:var(--muted)}
.figure{display:flex;flex-direction:column;gap:10px}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-right:6px;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:shake .35s}
@keyframes rise{from{opacity:.001;transform:translateY(8px)}to{opacity:1;transform:none}}
.enter{animation:rise .35s ease-out both}
@media (prefers-reduced-motion:reduce){.enter,.shake,.pulse{animation:none}.jug{transition:none}.glass .wine{transition:none}}

@media (max-width:640px){
  .hud{grid-template-columns:1fr auto auto;gap:6px 10px;padding:8px 10px}
  .hud .tn{font-size:17px}
  .stat b{font-size:17px}
  .traitorcount small{display:none}
  .panel{padding:18px}
  .panel.hero{padding:22px 18px}
  .rtcols{grid-template-columns:1fr}
  .seatwrap{grid-template-columns:1fr}
  .diffs{grid-template-columns:1fr}
  .wtile{min-height:50px;letter-spacing:.02em}
  .guests td,.guests th{padding:6px 5px;font-size:13px}
  .gname small{display:none}
  .gname{gap:6px}
  .por{width:28px;height:28px}.por span{font-size:16px}
}