/* Shared by every page: the "gambling den" look — ink table, bone paper, blood red only for lies,
   betrayal and elimination. Fonts come from Google Fonts with local fallbacks, so offline still works. */
:root{
  --bg:#0B0B0C;--panel:#141416;--panel2:#1B1B1E;--raise:#1B1B1E;--line:#2A2A2E;--line2:#222226;
  --text:#EDE8DF;--dim:#B8B2A7;--muted:#8A8680;
  --acid:#EDE8DF;--bone:#EDE8DF;--ink:#0B0B0C;--blood:#D7263D;--red:#F0525F;--orange:#E0A458;--blue:#A9B4BE;
  --lie-bg:#1E1416;
  /* ballots: YES is a white card, NO a black one; further options step through greys */
  --opt1:#EDE8DF;--opt1t:#0B0B0C;--opt2:#0B0B0C;--opt2t:#EDE8DF;--opt3:#8A8680;--opt3t:#0B0B0C;--opt4:#3A3A40;--opt4t:#EDE8DF;
  --serif:'Noto Serif SC','Songti SC','STSong',serif;
  --sans:'Noto Sans SC','PingFang SC','Microsoft YaHei',-apple-system,sans-serif;
  --num:'Bebas Neue','Oswald','DIN Condensed',Impact,sans-serif;
  --mono-f:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --font:var(--sans);color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 var(--font)}
button,input,select,textarea{font:inherit}
button{cursor:pointer;border:1px solid var(--line);color:var(--text);background:transparent;border-radius:6px;padding:7px 13px}
button:hover:not(:disabled){background:#222226}
button:disabled{cursor:default;opacity:.4}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
.primary{background:var(--bone);color:var(--ink);border-color:var(--bone);font-weight:700}
.primary:hover:not(:disabled){background:#fff}
.danger{color:var(--red);border-color:#5a2a30}
.small{font-size:12px}.dim{color:var(--dim)}.muted{color:var(--muted)}
.mono{font-family:var(--mono-f);font-variant-numeric:tabular-nums}
.num{font-family:var(--num);letter-spacing:1px;font-weight:400}
.eyebrow{font:600 11px/1.6 var(--mono-f);color:var(--muted);letter-spacing:.24em;text-transform:uppercase}
/* .eyebrow spaces out Latin caps; Chinese labels use .kicker, which keeps CJK glyphs together */
.kicker{font:600 11px/1.6 var(--mono-f);color:var(--muted);letter-spacing:.2em}
.hidden,[hidden]{display:none!important}
.shell{max-width:1640px;margin:auto;display:grid;grid-template-columns:178px minmax(0,1fr);min-height:100vh}
.sidebar{border-right:1px solid var(--line);padding:28px 20px;display:flex;flex-direction:column;gap:40px}
.brand{display:flex;align-items:center;gap:10px;font:900 19px/1.2 var(--serif);letter-spacing:.5px;white-space:nowrap}
.brand-mark{display:inline-flex}
.brand-mark svg{width:30px;height:30px}
.nav-label{font:600 10px var(--mono-f);letter-spacing:.2em;color:var(--muted);margin-bottom:12px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{color:var(--dim);text-decoration:none;padding:10px 12px;border-radius:4px;display:flex;justify-content:space-between;border-left:2px solid transparent}
.nav a:hover{background:#18181b;color:var(--text)}
.nav a.active{color:var(--text);background:#18181b;border-left-color:var(--blood);font-weight:700}
.side-bottom{margin-top:auto;color:var(--muted);font-size:11px}
.main{min-width:0;padding:27px 34px 48px}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:6px 0 24px}
.page-head h1{font:900 32px/1.25 var(--serif);margin:6px 0 8px;letter-spacing:1px}
.page-head p{margin:0;color:var(--dim)}
.panel{border:1px solid var(--line);border-radius:8px;background:var(--panel);min-width:0}
.panel-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel-head h2{font-size:15px;font-weight:700;margin:0}
.panel-body{padding:16px 18px}
.tag{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:3px;background:var(--panel2);color:var(--dim);font-size:11px;white-space:nowrap}
.tag.ok{color:var(--text);box-shadow:inset 0 0 0 1px var(--bone)}.tag.bad{color:var(--red)}
.vote-chip{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:3px;border:1px solid var(--bone);background:var(--c);color:var(--ct,var(--ink));font:16px/1 var(--num);letter-spacing:1px;vertical-align:-3px}
.avatar{width:36px;height:36px;display:inline-grid;place-items:center;flex:0 0 auto}
.avatar svg{width:100%;height:100%}
.field{display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--dim)}
.field input,.field select,.field textarea,select.inline,textarea.inline{background:#0f0f11;border:1px solid var(--line);border-radius:6px;color:var(--text);padding:8px 10px;width:100%}
textarea.inline{resize:vertical;min-height:38px;font-size:12px;line-height:1.5}
.notice{padding:11px 14px;margin-bottom:14px;border:1px solid #5a2a30;background:#1e1416;color:#f6c1c6;border-radius:6px;font-size:12px}
.notice.ok{border-color:#4a4843;background:#1a1a1c;color:var(--text)}
.empty{padding:40px 20px;text-align:center;color:var(--muted)}
/* the red rubber stamp: only for lies, eliminations, last-second vote changes */
.stamp{display:inline-flex;padding:3px 11px;border:3px solid var(--blood);border-radius:4px;color:var(--blood);font:900 22px/1.1 var(--serif);letter-spacing:6px;padding-right:5px;transform:rotate(-9deg);background:rgba(11,11,12,.6);white-space:nowrap;pointer-events:none}
.stamp.sm{font-size:14px;border-width:2px;padding:1px 6px 1px 8px;letter-spacing:4px}
@keyframes thud{0%{transform:rotate(var(--rot,-9deg)) scale(2.4);opacity:0}60%{transform:rotate(var(--rot,-9deg)) scale(.92);opacity:1}100%{transform:rotate(var(--rot,-9deg)) scale(1)}}
.ico{display:inline-block;width:14px;height:14px;flex:0 0 auto;vertical-align:-2px}
@media(max-width:900px){.shell{display:block}.sidebar{border:0;border-bottom:1px solid var(--line);padding:13px 16px;flex-direction:row;align-items:center;justify-content:space-between;gap:12px}.sidebar .nav-label,.side-bottom,.sidebar .eyebrow{display:none}.nav{flex-direction:row}.nav a{padding:7px 10px;font-size:13px;border-left:0;border-bottom:2px solid transparent}.nav a.active{border-bottom-color:var(--blood)}.main{padding:18px 16px 40px}.page-head{flex-direction:column;align-items:flex-start}.page-head h1{font-size:26px}}
@media(max-width:560px){.brand{font-size:16px}.brand-mark svg{width:24px;height:24px}.nav a{padding:6px 7px;font-size:12px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* Current account stays visible on every protected page. */
.account-bar{position:fixed;right:12px;bottom:12px;z-index:90;display:flex;flex-wrap:wrap;max-width:calc(100vw - 24px);align-items:center;gap:10px;padding:8px 12px;background:#17171a;border:1px solid var(--line);border-radius:6px;box-shadow:0 8px 30px #0008;color:var(--dim);font-size:12px}
.account-bar button{padding:4px 8px;font-size:12px}
.account-bar a{color:var(--text);text-decoration:none}
@media(max-width:900px){.sidebar{flex-wrap:wrap}.sidebar nav{max-width:100%}.nav{flex-wrap:wrap}}
.player-account label:has(#externalSeat),.player-account label:has(#commentator),.player-account label:has(#voice),.player-account label:has(#voice)+p{display:none!important}