/* Intuition Hall: Village. Mobile-first (360-430px), no framework, system fonts only. */
:root{
  --ink:#14161f; --ink2:#1b1e2b; --panel:#222638; --panel2:#2a2f45; --line:#353a54;
  --cream:#f3ead8; --muted:#a9a6b8; --brass:#d9a441; --brass2:#f0c56a; --accent:#d9a441;
  --good:#7cc4a0; --bad:#e07a6a; --warn:#f0b35a;
  --r:16px; --tap:48px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --app-h:100dvh; --nav-h:64px; --safe-b:env(safe-area-inset-bottom,0px); --safe-t:env(safe-area-inset-top,0px);
}
/* Skins: every skin JSON (skins/*.json) sets these variables on <body>; classic is the default. */
:root{--accent2:#9d8cff; --hero1:#3b2a7a; --hero2:#ff9f43}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--ink);color:var(--cream);font:16px/1.45 var(--sans);-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
a{color:var(--accent)}
.boot{display:grid;place-items:center;height:100dvh;font:600 28px var(--serif);color:var(--brass)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- app shell ---------- */
.app{display:flex;flex-direction:column;height:var(--app-h);max-width:100vw;overflow:hidden}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.wrap{padding:16px;max-width:760px;margin:0 auto}

/* ---------- top bar ---------- */
.top{flex:none;padding:calc(8px + var(--safe-t)) 12px 8px;background:linear-gradient(180deg,color-mix(in srgb,var(--hero1) 35%,var(--ink2)),var(--ink));border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;position:relative;z-index:5}
body[data-phase="day"] .top{background:linear-gradient(180deg,color-mix(in srgb,var(--hero2) 22%,var(--ink2)),var(--ink2))}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--cream);min-width:0}
.brand img{width:30px;height:30px;flex:none}
.brand b{font:600 17px var(--serif);letter-spacing:.3px;white-space:nowrap}
.top .title{min-width:0;flex:1}
.top .title small{display:block;color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .title b{display:block;font:600 16px var(--serif);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock{flex:none;text-align:right}
.phase-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:var(--panel2);color:var(--brass2)}
body[data-phase="night"] .phase-pill{color:#b9c3ff;background:#262b4a}
.timer{display:block;font:700 22px/1.1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;margin-top:2px}
.timer.low{color:var(--warn)}
.banner{flex:none;margin:0;padding:10px 14px;background:#3a2a1a;border-bottom:1px solid #6a4b23;color:#ffd9a0;font-size:14px;display:flex;gap:8px;align-items:center}
.banner.info{background:#1f2a2a;border-color:#2f4a48;color:#bfe9e2}
.banner b{color:#fff}

/* ---------- bottom nav ---------- */
.nav{flex:none;display:flex;background:#12141c;border-top:1px solid var(--line);padding-bottom:var(--safe-b);z-index:6}
.nav button{flex:1;min-height:var(--nav-h);border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11.5px;font-weight:600;position:relative}
.nav button svg{width:24px;height:24px}
.nav button[aria-current="page"]{color:var(--accent)}
.nav button[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
.nav .dot{position:absolute;top:9px;right:calc(50% - 18px);min-width:18px;height:18px;border-radius:9px;background:var(--bad);color:#fff;font-size:11px;line-height:18px;padding:0 5px}
body.kb .nav{display:none}

/* ---------- compose ---------- */
.compose{flex:none;display:flex;flex-direction:column;gap:6px;padding:8px 10px 6px;background:#171a26;border-top:1px solid var(--line)}
.compose .row{display:flex;gap:8px;align-items:flex-end}
.compose textarea{flex:1;min-height:var(--tap);max-height:160px;resize:none;border-radius:12px;border:1px solid var(--line);background:var(--ink2);padding:12px 14px;font-size:16px;line-height:1.35}
.compose textarea:focus{outline:2px solid var(--accent);outline-offset:0;border-color:transparent}
.compose .post{flex:none;min-width:76px;padding:0 14px}
.compose.team textarea{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.compose.grave textarea{border-color:#555b70}
.cmeta{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);padding:0 4px}
.cmeta .over{color:var(--warn);font-weight:700}
.cx{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;background:color-mix(in srgb,var(--accent) 14%,var(--ink2));border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:10px;padding:0 0 0 12px}
.cx[hidden]{display:none}
.cx .x{min-width:44px;min-height:44px;border:0;background:none;font-size:16px;color:var(--cream)}

/* ---------- generic ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0 0 8px}
h2{font-size:22px} h3{font-size:17px}
.muted{color:var(--muted)} .small{font-size:13px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:0 0 14px}
.btn{min-height:var(--tap);border-radius:14px;border:1px solid var(--line);background:var(--panel2);padding:0 18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;color:var(--cream)}
.btn.primary{background:var(--accent);border-color:transparent;color:#1a1408}
.btn.block{display:flex;width:100%}
.btn:disabled{opacity:.45}
.btn:active,.chip:active,.target:active{transform:scale(.98)}
label.f{display:block;margin:0 0 12px;font-size:14px;color:var(--muted)}
label.f input,label.f select{display:block;width:100%;margin-top:6px;min-height:var(--tap);border-radius:12px;border:1px solid var(--line);background:var(--ink2);padding:0 14px;font-size:16px}
.seg{display:flex;gap:6px;background:var(--ink2);border:1px solid var(--line);border-radius:14px;padding:4px;margin-top:6px}
.seg label{flex:1;position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:44px;border-radius:10px;font-weight:700;color:var(--cream);font-size:14px;text-align:center;padding:4px}
.seg span small{font-weight:500;color:var(--muted);font-size:11.5px}
.seg input:checked+span{background:var(--panel2);box-shadow:inset 0 0 0 2px var(--accent)}
.seg input:focus-visible+span{outline:2px solid var(--accent)}
.switch{display:flex;align-items:center;gap:12px;min-height:var(--tap);font-size:14px}
.switch input{width:24px;height:24px;accent-color:var(--accent);flex:none}
.ai{display:inline-block;font:800 10px/1 var(--sans);letter-spacing:.6px;padding:3px 5px;border-radius:5px;background:#3b4a7a;color:#dfe6ff;vertical-align:2px}
.you{display:inline-block;font:800 10px/1 var(--sans);padding:3px 5px;border-radius:5px;background:var(--accent);color:#1a1408;vertical-align:2px}
.av{flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:15px;color:#14161f}
.av.dead{filter:grayscale(1);opacity:.5}
.empty{padding:28px 12px;text-align:center;color:var(--muted)}

/* ---------- lobby ---------- */
.hero{padding:22px 4px 14px;text-align:left;position:relative}
.hero .emblem{width:72px;height:72px;border-radius:50%;margin-bottom:14px;background:radial-gradient(circle at 35% 35%,var(--brass2),var(--accent) 55%,color-mix(in srgb,var(--accent) 40%,var(--ink)) 100%);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 12%,transparent),0 0 60px color-mix(in srgb,var(--accent) 55%,transparent)}
body[data-theme="gulls_reach"] .hero .emblem{border-radius:22px 22px 30px 30px}
.hero h1 em{background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1{font-size:34px;line-height:1.05;margin-bottom:8px}
.hero h1 em{font-style:normal}
.hero p{color:var(--muted);margin:0;max-width:34ch}
.gamerow{display:flex;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line);min-height:64px;text-decoration:none;color:var(--cream)}
.gamerow:first-of-type{border-top:0}
.gamerow .meta{flex:1;min-width:0}
.gamerow .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;padding:4px 8px;border-radius:8px;background:var(--panel2);color:var(--muted)}
.status.running{color:var(--good)} .status.lobby{color:var(--brass2)}
.seatlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.seatlist li{display:flex;align-items:center;gap:8px;background:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:8px;min-height:52px;min-width:0}
.seatlist li span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seatlist li.open{border-style:dashed;color:var(--muted);justify-content:center}
.invite{display:flex;gap:8px;align-items:center}
.invite code{flex:1;min-width:0;background:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bigcode{font:700 30px ui-monospace,Menlo,monospace;letter-spacing:6px;color:var(--brass2)}

/* ---------- thread ---------- */
.forum{padding:10px 12px 18px;display:flex;flex-direction:column;gap:10px}
.sep{align-self:center;font-size:12px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:6px 12px;border-radius:999px;background:var(--ink2);border:1px solid var(--line)}
.votechip{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:700;color:var(--brass2);background:color-mix(in srgb,var(--accent) 16%,var(--ink2));border-radius:999px;padding:4px 10px}
.voteline{align-self:center;font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;text-align:center}
.voteline b{color:var(--cream)}
.mod{align-self:stretch;background:linear-gradient(180deg,#232741,#1e2236);border:1px solid #3a4170;border-radius:14px;padding:10px 14px;font-size:14.5px}
.mod .lbl{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:#aab4ff;margin-bottom:4px}
.mod .txt{white-space:pre-wrap}

/* ---------- votes ---------- */
.sec{padding:14px 12px}
.sec h3{display:flex;align-items:baseline;gap:8px}
.sec h3 small{font-family:var(--sans);font-size:13px;color:var(--muted);font-weight:500}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.chip{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 10px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-align:left;min-width:0;position:relative}
.chip .nm{flex:1;min-width:0}
.chip .nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:15px}
.chip .nm small{display:block;color:var(--muted);font-size:12px}
.chip .cnt{flex:none;min-width:28px;height:28px;border-radius:14px;background:var(--ink2);display:grid;place-items:center;font-weight:800;font-size:14px}
.chip[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
.chip.self{opacity:.65}
.chip.stand{border-color:var(--warn)}
.board{display:flex;flex-direction:column;gap:10px}
.brow{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.brow .h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-weight:700}
.bar{height:8px;border-radius:4px;background:var(--ink2);margin:8px 0;overflow:hidden;position:relative}
.bar i{display:block;height:100%;background:var(--accent);border-radius:4px}
.bar.maj i{background:var(--warn)}
.voters{display:flex;flex-wrap:wrap;gap:6px}
.voters span{font-size:13px;background:var(--ink2);border-radius:999px;padding:3px 9px}
.grave{display:flex;flex-direction:column;gap:8px}
.grave .g{display:flex;align-items:center;gap:10px;background:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.grave .g .meta{flex:1;min-width:0}
.teamtag{font-size:11px;font-weight:800;text-transform:uppercase;padding:3px 7px;border-radius:6px}
.teamtag.wolf{background:#4a2323;color:#ffb3a6}.teamtag.village{background:#1f3a2e;color:#a9f0cb}

/* ---------- role card ---------- */
.rolecard{margin:14px 12px;border-radius:22px;padding:22px 20px;background:radial-gradient(120% 90% at 85% 0%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),linear-gradient(160deg,var(--panel2),var(--ink2));border:1px solid var(--line);position:relative;overflow:hidden}
.rolecard.wolf{border-color:#7a3d3d}
.rolecard .ico{width:64px;height:64px;color:var(--accent)}
.rolecard h2{font-size:30px;margin:10px 0 4px}
.rolecard p{margin:8px 0 0;color:#e4dccb}
.rolecard .res{margin-top:14px;padding-top:12px;border-top:1px dashed #4a4f70}
.rolecard .res div{padding:6px 0;font-size:15px}

/* ---------- night ---------- */
.targets{display:flex;flex-direction:column;gap:8px}
.target{display:flex;align-items:center;gap:12px;min-height:58px;border-radius:14px;border:1px solid var(--line);background:var(--panel);padding:8px 12px;text-align:left;width:100%}
.target .nm{flex:1;font-weight:700}
.target[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.target .tick{width:26px;height:26px;border-radius:50%;border:2px solid var(--line);flex:none}
.target[aria-pressed="true"] .tick{background:var(--accent);border-color:var(--accent)}
.nightsky{margin:12px;border-radius:20px;padding:18px;background:radial-gradient(80% 60% at 80% 0%,color-mix(in srgb,var(--accent2) 45%,transparent) 0%,transparent 70%),var(--ink2);border:1px solid var(--line)}

/* ---------- replay ---------- */
.tl{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);margin-left:8px}
.tl li{padding:6px 0 10px 14px;position:relative;font-size:14.5px}
.tl li::before{content:"";position:absolute;left:-6px;top:11px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.rolesgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.rolesgrid div{background:var(--ink2);border-radius:12px;padding:8px 10px;border:1px solid var(--line);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(var(--nav-h) + 76px + var(--safe-b));transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;background:#f3ead8;color:#14161f;border-radius:14px;padding:10px 14px;font-weight:700;display:flex;gap:12px;align-items:center;max-width:calc(100vw - 24px);transition:.2s;z-index:50;box-shadow:0 8px 30px rgba(0,0,0,.4)}
.toast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}
.toast button{border:0;background:#14161f;color:#f3ead8;border-radius:10px;min-height:44px;min-width:64px;padding:0 12px;font-weight:800}

.shell{flex:1;display:flex;flex-direction:column;min-height:0}
.mainc{flex:1;display:flex;flex-direction:column;min-height:0}
.top .title small b{display:inline;font:inherit;color:var(--cream)}
@media (max-width:520px){.top.ing .bn{display:none}}
/* ---------- desktop ---------- */
.aside{display:none}
@media (min-width:960px){
  :root{--nav-h:52px}
  .shell{flex:1;display:grid;grid-template-columns:minmax(0,1fr) 380px;min-height:0;max-width:1240px;margin:0 auto;width:100%}
  .shell .mainc{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
  .aside{display:block;overflow-y:auto;min-height:0}
  .nav{order:-1;justify-content:center;border-top:0;border-bottom:1px solid var(--line);background:#151826}
  .nav button{flex:0 0 auto;flex-direction:row;padding:0 22px;font-size:14px;gap:8px}
  .nav button[aria-current="page"]::before{top:auto;bottom:0;border-radius:3px 3px 0 0}
  .nav button[data-tab="votes"]{display:none}
  .chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .toast{bottom:32px}
  .forum{max-width:820px;margin:0 auto;width:100%}
}
@media (min-width:600px){ .rolesgrid,.seatlist{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
#hdr,#ban,.navw{flex:none}
.navw{order:9}
@media (min-width:960px){ .navw{order:-1} }

/* ---------- steering 2: skins, signup, signups room ---------- */
html,body{background:var(--ink)}
.card{background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 92%,var(--accent2)),var(--panel))}
.btn.primary{background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 70%,var(--hero2)));color:#15110a}
.btn.sm{min-height:44px;padding:0 14px;font-size:14px;flex:none}
.seg.skins{flex-direction:column}
.seg.skins span{flex-direction:row;justify-content:flex-start;gap:10px;text-align:left;padding:8px 10px;flex-wrap:wrap}
.seg.skins span small{flex-basis:100%;padding-left:34px;margin-top:-4px}
.sw{width:24px;height:24px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--line)}
.stepper{display:flex;align-items:center;gap:10px;margin-top:6px}
.stepper .btn{width:56px;font-size:24px;padding:0}
.stepper output{flex:1;text-align:center;font:700 30px var(--serif);color:var(--cream)}
.mix{margin-top:8px;color:var(--brass2)}
.rolepills{display:flex;flex-wrap:wrap;gap:6px}
.rolepill{font-size:13px;font-weight:700;padding:6px 10px;border-radius:999px;background:var(--ink2);border:1px solid var(--line)}
.meter{height:8px;border-radius:4px;background:var(--ink2);overflow:hidden;margin:4px 0 12px}
.meter i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.hostbtns{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.who-pill{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:3px 12px 3px 3px;font-weight:700;max-width:50vw}
.who-pill .av{width:36px;height:36px;font-size:13px}
.who-pill span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.mlink{margin-top:12px}
details.mlink summary{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:4px;cursor:pointer;color:var(--accent);font-weight:600;font-size:14px}
.invite input{flex:1;min-width:0;min-height:var(--tap);border-radius:12px;border:1px solid var(--line);background:var(--ink2);padding:0 14px;font-size:16px}
.roster{display:flex;flex-wrap:wrap;gap:6px}
.rp{font-size:13px;font-weight:600;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.rp.out{opacity:.5;text-decoration:line-through}
.ai{background:color-mix(in srgb,var(--accent2) 55%,#1b1f3a);color:#fff}
.sec h3 small.muted, .card h3 small{font-family:var(--sans);font-size:13px;font-weight:500}
.switch span{flex:1}

/* ---------- steering 3: forum posts everywhere (no chat bubbles) ---------- */
.fpost{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px 4px;min-width:0}
.fpost.mine{border-left:3px solid var(--accent)}
.fpost header{display:flex;align-items:flex-start;gap:10px;margin-bottom:6px}
.fpost header .av{width:34px;height:34px;font-size:13px}
.fpost .fh{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:14px}
.fpost .fh b{font-size:15px}
.fpost .fh .role{font-size:12px;font-weight:700;color:var(--muted);background:var(--ink2);border-radius:6px;padding:2px 6px}
.fpost .fwhen{flex-basis:100%;font-size:12px;color:var(--muted)}
.fpost .pn{flex:none;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.fpost .txt{white-space:pre-wrap;overflow-wrap:anywhere;padding:0 0 8px}
.fpost .votechip{margin:0 0 8px}
.fpost footer{display:flex;gap:4px;border-top:1px solid var(--line);margin:2px -6px 0;padding-top:2px}
.fbtn{min-height:44px;min-width:64px;border:0;background:none;color:var(--accent);font-weight:700;font-size:14px;border-radius:10px;padding:0 10px}
.fbtn small{color:var(--muted);font-weight:500}
.fq{margin:0 0 8px;padding:8px 10px;border-left:3px solid var(--accent2);background:var(--ink2);border-radius:0 8px 8px 0;font-size:14px;color:#d9d3c4;white-space:pre-wrap;overflow-wrap:anywhere}
.fq cite{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:2px}
.fq cite a{color:var(--accent2)}
.fnote{font-size:12px;color:var(--muted);text-align:center;margin:6px 12px}
.voteline .muted{font-size:12px}
.rp small{margin-left:6px;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
/* ---------- steering 4: invite-only ---------- */
.err{color:var(--bad);margin:8px 0 0}
.codecard .invite input{text-transform:uppercase;letter-spacing:2px;font-weight:700}
.invlist{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:8px}
.inv{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--ink2);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.inv .ic{flex:1;min-width:150px;display:flex;flex-direction:column}
.inv .ia{display:flex;gap:6px}
.inv.revoked{opacity:.5}
.inv.revoked code{text-decoration:line-through}
.bigcode.sm{font-size:20px;letter-spacing:2px}
.btn.ghost{background:none;color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}

/* ---------- review round: art, board ring, rules ---------- */
.hero{overflow:hidden;padding-top:0}
.hero .scene{display:block;width:calc(100% + 8px);height:140px;margin:0 -4px 12px;border-radius:0 0 22px 22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 30%,var(--ink)) 0%,color-mix(in srgb,var(--accent) 22%,var(--ink2)) 100%)}
.hero .scene + .emblem{display:none}
.top .scene{position:absolute;inset:0;width:100%;height:100%;opacity:.28;pointer-events:none;z-index:-1}
.top{isolation:isolate;overflow:hidden}
.rec{color:var(--good);font-size:12px}
.notice{border-color:color-mix(in srgb,var(--warn) 55%,var(--line))}
.notice h3{color:var(--warn)}
.board{display:flex;flex-direction:column}
.ring{position:relative;width:min(100%,420px);aspect-ratio:1;margin:6px auto 0;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent2) 16%,transparent) 0 42%,transparent 43%),radial-gradient(circle,transparent 0 60%,color-mix(in srgb,var(--accent) 12%,transparent) 61% 62%,transparent 63%)}
.seat{position:absolute;left:var(--x);top:var(--y);z-index:2;transform:translate(-50%,-50%);width:58px;min-height:58px;padding:2px 0;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--cream);border-radius:14px}
.seat .av{width:40px;height:40px;font-size:14px;box-shadow:0 0 0 2px var(--ink)}
.seat .sn{max-width:58px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px var(--ink)}
.seat .ai.sm{position:absolute;top:-2px;left:2px;font-size:8px;padding:2px 3px}
.seat .vc{position:absolute;top:-2px;right:4px;min-width:20px;height:20px;border-radius:10px;background:var(--accent);color:#15110a;font:800 12px/20px var(--sans)}
.seat .sr2{font-size:9.5px;color:var(--muted);max-width:58px;overflow:hidden;white-space:nowrap}
.seat[aria-pressed="true"] .av{box-shadow:0 0 0 3px var(--accent)}
.seat.stand .av{box-shadow:0 0 0 3px var(--warn)}
.seat.self .sn{color:var(--accent)}
.seat.out{opacity:.55}
.seat:disabled{cursor:default}
.ring.nbig .seat{width:48px}.ring.nbig .seat .av{width:34px;height:34px;font-size:12px}.ring.nbig .seat .sn{max-width:50px;font-size:10px}
.hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:46%;text-align:center;display:flex;flex-direction:column;gap:2px}
.hub b{font:600 24px var(--serif)}
.hub span{font-size:12.5px;color:var(--muted)}
.hub .hs{color:var(--brass2);font-weight:700}
.center{min-width:0}
.daylinks{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;padding:6px 12px 14px}
.daylinks button{min-height:44px;min-width:64px;border-radius:999px;border:1px solid var(--line);background:var(--panel);font-weight:700;font-size:14px;padding:0 14px}
.daylinks button[aria-current="page"]{background:var(--accent);color:#15110a;border-color:transparent}
.rules{padding:12px 16px}
.rules h4{margin:14px 0 4px;font:700 13px var(--sans);text-transform:uppercase;letter-spacing:.6px;color:var(--accent)}
.rules p{margin:0 0 6px;font-size:14.5px}
@media (min-width:960px){
  .scroll.main:has(.board){overflow:hidden}
  .board{position:relative;height:100%;min-height:560px}
  .board .ring{position:absolute;inset:8px;width:auto;aspect-ratio:auto;margin:0;border-radius:50%/50%}
  .board .ring .hub{display:none}
  .board .seat{left:var(--sx);top:var(--sy)}
  .board .center{position:absolute;left:15%;right:15%;top:16%;bottom:16%;overflow-y:auto;border-radius:28px;background:color-mix(in srgb,var(--ink2) 88%,transparent);border:1px solid var(--line);box-shadow:0 0 60px color-mix(in srgb,var(--accent2) 18%,transparent)}
  .board .center .daylinks{position:sticky;bottom:0;background:linear-gradient(transparent,var(--ink2) 40%);padding-top:14px}
}