/* ---------------------------------------------------------------
   Secret Hitler (family web edition) - styles for TV + phones
   Vintage 1930s look. Fonts are included (free open licenses).
   --------------------------------------------------------------- */
@font-face { font-family: 'Limelight'; font-weight: 400; font-display: swap; src: url('fonts/limelight-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Special Elite'; font-weight: 400; font-display: swap; src: url('fonts/special-elite-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 400; font-display: swap; src: url('fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-display: swap; src: url('fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-display: swap; src: url('fonts/inter-latin-700-normal.woff2') format('woff2'); }

:root {
  --bg: #17120f;
  --bg2: #221b16;
  --panel: #2a221c;
  --panel2: #362c24;
  --line: #4a3d31;
  --paper: #efe2c4;
  --paper2: #e3d2ab;
  --ink: #2a1f18;
  --text: #f2e6cc;
  --muted: #b3a283;
  --gold: #d9a441;
  --gold-d: #9c7224;
  --lib: #3d7192;
  --lib-l: #7fb2d1;
  --lib-d: #24475e;
  --fas: #b5442e;
  --fas-l: #e98a6e;
  --fas-d: #6f2618;
  --good: #8fbf6a;

  --f-deco: 'Limelight', 'Georgia', serif;
  --f-type: 'Special Elite', 'Courier New', monospace;
  --f-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --f-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(217,164,65,.10), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(181,68,46,.12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 2px, transparent 2px 6px),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--f-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.lib-text { color: var(--lib-l); }
.fas-text { color: var(--fas-l); }
.gold-text { color: var(--gold); }

.logo {
  font-family: var(--f-deco);
  color: var(--gold);
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 2px 0 rgba(0,0,0,.5);
}
.logo small { display: block; font-family: var(--f-cond); font-weight: 600; letter-spacing: .4em; font-size: .28em; color: var(--muted); margin-top: .5em; text-transform: uppercase; }
.deco-rule { height: 0; border-top: 3px double var(--gold-d); margin: 0; opacity: .8; }

/* ---------- buttons & inputs ---------- */
.btn {
  border: 0; border-radius: 6px;
  padding: 14px 20px;
  font-family: var(--f-cond); font-weight: 700; font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text); background: var(--panel2);
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.3);
  transition: transform .08s ease, filter .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.gold { background: var(--gold); color: #24180a; }
.btn.lib { background: var(--lib); color: #fff; }
.btn.fas { background: var(--fas); color: #fff; }
.btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--text); box-shadow: none; }
.btn.small { padding: 8px 12px; font-size: 15px; }
.btn.block { display: block; width: 100%; }

.input {
  width: 100%; padding: 14px 16px; border-radius: 6px;
  border: 1px solid var(--line); background: #100c0a; color: var(--text);
  font-size: 18px; font-family: inherit; outline: none;
}
.input:focus { border-color: var(--gold); }
.input.code { text-transform: uppercase; letter-spacing: .3em; font-weight: 700; text-align: center; font-size: 26px; font-family: var(--f-cond); }

/* ---------- policy cards ---------- */
.policy {
  --c: var(--lib); --cl: var(--lib-l);
  aspect-ratio: 5 / 7;
  background: var(--paper);
  border-radius: 6%/4.5%;
  border: .5em solid var(--c);
  outline: 2px solid rgba(0,0,0,.25); outline-offset: -.9em;
  color: var(--c);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 17% 8% 14%;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
  font-size: 14px;
  position: relative;
}
.policy.F { --c: var(--fas); --cl: var(--fas-l); }
.policy .pc-top, .policy .pc-bot { font-family: var(--f-deco); text-transform: uppercase; letter-spacing: .06em; font-size: 1.05em; line-height: 1; }
.policy .pc-bot { font-family: var(--f-cond); font-weight: 700; letter-spacing: .3em; font-size: .8em; opacity: .8; }
.policy .pc-icon { width: 58%; }
.policy .pc-icon svg { width: 100%; height: auto; display: block; }

/* ---------- role & party cards ---------- */
.rolecard {
  --c: var(--lib); --cd: var(--lib-d);
  background: var(--paper);
  color: var(--ink);
  border: 6px solid var(--c);
  outline: 2px solid var(--c); outline-offset: -14px;
  border-radius: 10px;
  padding: 22px 18px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
}
.rolecard.F { --c: var(--fas); --cd: var(--fas-d); }
.rolecard.H { --c: #1b1410; --cd: #000; background: linear-gradient(180deg, var(--paper), #e2c9a6); }
.rolecard .rc-label { font-family: var(--f-cond); font-weight: 700; letter-spacing: .35em; text-transform: uppercase; font-size: 13px; color: var(--cd); }
.rolecard .rc-icon { width: 96px; margin: 12px auto 6px; color: var(--c); }
.rolecard.H .rc-icon { color: var(--fas); }
.rolecard .rc-icon svg { width: 100%; height: auto; display: block; }
.rolecard .rc-title { font-family: var(--f-deco); font-size: 46px; color: var(--c); line-height: 1.05; text-transform: uppercase; }
.rolecard.H .rc-title { color: #1b1410; }
.rolecard .rc-party { font-family: var(--f-type); margin-top: 6px; font-size: 15px; color: var(--cd); }
.rolecard.small { padding: 10px 8px; border-width: 4px; outline-offset: -9px; }
.rolecard.small .rc-label { font-size: 9px; letter-spacing: .2em; }
.rolecard.small .rc-icon { width: 46px; margin: 6px auto 2px; }
.rolecard.small .rc-title { font-size: 22px; }

/* ---------- ballots ---------- */
.ballot {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2;
  border-radius: 8px;
  font-family: var(--f-deco); font-size: 40px; text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.ballot.ja { background: var(--paper); color: var(--ink); border: 4px solid var(--ink); outline: 2px solid var(--ink); outline-offset: -10px; }
.ballot.nein { background: #1b1410; color: var(--paper); border: 4px solid var(--paper2); outline: 2px solid var(--paper2); outline-offset: -10px; }
.ballot.small { font-size: 16px; border-width: 2px; outline-offset: -5px; outline-width: 1px; border-radius: 4px; }

/* ---------- misc ---------- */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--good); }
.dot.away { background: #6b6259; }
.conn-banner { position: fixed; top: 0; left: 0; right: 0; background: #a0521c; color: #fff; text-align: center; font-weight: 700; font-size: 14px; padding: 6px; z-index: 100; }
.badge { display: inline-block; font-family: var(--f-cond); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; padding: 2px 7px; border-radius: 3px; vertical-align: middle; }
.badge.pres { background: var(--gold); color: #24180a; }
.badge.chan { background: #120d0a; color: var(--gold); border: 1px solid var(--gold-d); }
.badge.tl { background: transparent; color: var(--muted); border: 1px dashed var(--line); }
.badge.dead { background: #4b1b12; color: #f0b4a5; }
.badge.lib { background: var(--lib); color: #fff; }
.badge.fas { background: var(--fas); color: #fff; }

/* ===============================================================
   TV
   =============================================================== */
body.tv { height: 100vh; overflow: hidden; }
.tv .screen { height: 100vh; padding: 2.4vh 2.2vw; }
.center-msg { height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; text-align: center; padding: 4vw; font-size: 2.6vh; }

/* lobby */
#lobby { display: flex; flex-direction: column; align-items: center; gap: 3vh; justify-content: center; }
#lobby .logo { font-size: 10vh; text-align: center; }
.lobby-main { display: flex; gap: 3vw; align-items: stretch; justify-content: center; width: 100%; max-width: 1700px; }
.frame { background: var(--panel); border: 1px solid var(--line); outline: 3px double var(--gold-d); outline-offset: -10px; border-radius: 6px; padding: 3vh 2.4vw; }
.join-card { display: flex; flex-direction: column; align-items: center; gap: 2vh; text-align: center; }
#qr { background: #f6ecd6; padding: 1.2vh; border-radius: 6px; line-height: 0; }
#qr svg { width: 28vh; height: 28vh; display: block; }
.join-steps { font-size: 2.1vh; color: var(--muted); line-height: 1.5; }
.join-steps b { color: var(--text); }
.room-code { font-family: var(--f-cond); font-weight: 700; font-size: 9vh; letter-spacing: .3em; padding-left: .3em; color: var(--gold); line-height: 1; }
.lobby-players { min-width: 46vw; display: flex; flex-direction: column; }
.lobby-players h2 { margin: 0 0 1.4vh; font-family: var(--f-deco); font-weight: 400; color: var(--gold); font-size: 4vh; }
.plist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1vh 2vw; font-size: 2.6vh; }
.plist li { display: flex; align-items: center; gap: .8vw; padding: .8vh 1vw; background: var(--bg2); border-radius: 4px; }
.plist li .x { margin-left: auto; background: transparent; border: 1px solid var(--line); color: var(--muted); border-radius: 4px; font-size: 1.7vh; padding: .3vh .8vw; }
.lobby-info { margin-top: auto; padding-top: 2vh; font-size: 2.1vh; color: var(--muted); line-height: 1.6; }
.lobby-info b { color: var(--text); }
.lobby-info label { display: inline-flex; gap: .6vw; align-items: center; cursor: pointer; }
.lobby-info input { width: 2.2vh; height: 2.2vh; accent-color: var(--gold); }
.lobby-actions { text-align: center; }
.lobby-actions .btn { font-size: 3.2vh; padding: 1.8vh 5vw; }
.credit { font-size: 1.6vh; color: var(--muted); text-align: center; opacity: .8; }

/* game */
#game { display: grid; grid-template-columns: 1fr 29vw; grid-template-rows: auto auto 1fr; gap: 1.8vh 1.8vw; }
.tv-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 2vw; }
.tv-head .logo { font-size: 4.2vh; }
.tv-head .join { font-size: 1.9vh; color: var(--muted); text-align: right; }
.tv-head .join b { color: var(--text); }
.tv-head .join .code { color: var(--gold); letter-spacing: .15em; font-family: var(--f-cond); font-size: 2.6vh; }
.tv-head .tools { display: flex; gap: .8vw; align-items: center; }
.tv-head .btn.small { font-size: 1.7vh; padding: .8vh 1vw; }

.banner {
  grid-column: 1 / 2;
  background: var(--paper); color: var(--ink);
  border-radius: 6px; padding: 1.6vh 2vw;
  border-left: 1.2vh solid var(--gold);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.banner .b-title { font-family: var(--f-deco); font-size: 4.4vh; line-height: 1.1; }
.banner .b-sub { font-family: var(--f-type); font-size: 2.2vh; margin-top: .6vh; color: #5a4636; }
.banner.alert { border-left-color: var(--fas); }
.banner.lib { border-left-color: var(--lib); }

.boards { grid-column: 1 / 2; display: flex; flex-direction: column; gap: 1.6vh; min-height: 0; }
.track {
  position: relative;
  border-radius: 8px; padding: 1.4vh 1.6vw 1.2vh;
  display: flex; flex-direction: column; gap: 1vh;
}
.track.L { background: linear-gradient(180deg, #2f5a75, #24475e); border: 2px solid var(--lib-l); }
.track.F { background: linear-gradient(180deg, #8e3423, #6f2618); border: 2px solid var(--fas-l); }
.track h3 { margin: 0; font-family: var(--f-deco); font-weight: 400; font-size: 2.6vh; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); display: flex; justify-content: space-between; align-items: baseline; }
.track h3 small { font-family: var(--f-type); text-transform: none; letter-spacing: 0; font-size: 1.7vh; opacity: .9; }
.slots { display: flex; gap: 1vw; justify-content: center; }
.slot {
  height: 20vh; aspect-ratio: 5 / 7;
  border: 2px dashed rgba(239,226,196,.45);
  border-radius: 6%/4.5%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6vh;
  color: rgba(239,226,196,.85); text-align: center;
  font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1.6vh; line-height: 1.15;
  padding: .6vh;
  position: relative;
}
.slot .s-icon { width: 4.6vh; color: var(--paper); opacity: .9; }
.slot .s-icon svg { width: 100%; height: auto; display: block; }
.slot.win { border-style: solid; border-color: var(--gold); color: var(--gold); }
.slot.hz { background: rgba(0,0,0,.18); }
.slot .policy { position: absolute; inset: -2px; font-size: 1.7vh; border-width: .7vh; }
.slot .policy.new { animation: drop .7s cubic-bezier(.2,1.4,.4,1); }
@keyframes drop { 0% { transform: translateY(-40vh) rotate(-8deg) scale(1.4); opacity: 0; } 100% { transform: none; opacity: 1; } }
.hz-note { font-family: var(--f-type); font-size: 1.7vh; color: var(--paper); text-align: center; opacity: .95; }
.hz-note b { color: #ffd38a; }

.lower { display: flex; gap: 1.6vw; align-items: stretch; }
.tracker { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1.2vh 1.4vw; display: flex; align-items: center; gap: 1.4vw; }
.tracker .t-label { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.9vh; color: var(--muted); line-height: 1.2; }
.tracker .dots { display: flex; gap: 1.2vw; align-items: center; }
.tracker .tdot { width: 4.6vh; height: 4.6vh; border-radius: 50%; border: 3px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--f-cond); font-weight: 700; font-size: 1.6vh; color: var(--muted); }
.tracker .tdot.on { background: var(--gold); border-color: var(--gold); color: #24180a; box-shadow: 0 0 2vh rgba(217,164,65,.6); }
.tracker .tdot.chaos { border-color: var(--fas); color: var(--fas-l); }
.piles { display: flex; gap: 1vw; }
.pile { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1vh 1.2vw; text-align: center; min-width: 8vw; }
.pile .n { font-family: var(--f-cond); font-weight: 700; font-size: 4vh; line-height: 1; color: var(--paper); }
.pile .l { font-size: 1.5vh; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

.side { grid-column: 2 / 3; grid-row: 2 / 4; display: flex; flex-direction: column; gap: 1.6vh; min-height: 0; }
.side h4 { margin: 0 0 .8vh; font-family: var(--f-deco); font-weight: 400; color: var(--gold); font-size: 2.4vh; }
.players-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1.2vh 1vw; }
.prow { display: flex; align-items: center; gap: .6vw; padding: .55vh .5vw; border-radius: 4px; font-size: 2.2vh; min-height: 4.4vh; }
.prow:nth-child(odd) { background: rgba(255,255,255,.025); }
.prow .seat { font-family: var(--f-cond); font-weight: 700; color: var(--muted); width: 1.8vw; text-align: right; }
.prow .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 11vw; }
.prow .tags { margin-left: auto; display: flex; gap: .4vw; align-items: center; }
.prow .badge { font-size: 1.4vh; padding: .2vh .5vw; }
.prow.dead .nm { text-decoration: line-through; color: var(--muted); }
.prow.away .nm { opacity: .55; }
.prow .ok { color: var(--good); font-weight: 800; }
.prow .wait { color: var(--muted); }
.prow .inv { width: 2vh; color: var(--muted); display: inline-block; }
.prow .inv svg { width: 100%; height: auto; display: block; }
.prow .mini-ballot { font-family: var(--f-deco); font-size: 1.6vh; padding: .1vh .5vw; border-radius: 3px; }
.prow .mini-ballot.ja { background: var(--paper); color: var(--ink); }
.prow .mini-ballot.nein { background: #000; color: var(--paper); border: 1px solid var(--paper2); }

.history { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 1.2vh 1vw; flex: 1; min-height: 0; overflow: hidden; }
.hrow { display: grid; grid-template-columns: 1fr auto; gap: .4vh .6vw; font-size: 1.75vh; padding: .7vh 0; border-bottom: 1px solid rgba(255,255,255,.06); align-items: center; }
.hrow .who b { color: var(--text); }
.hrow .who { color: var(--muted); }
.hrow .res { font-family: var(--f-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 1.6vh; }
.hrow .votes { grid-column: 1 / -1; font-size: 1.5vh; color: var(--muted); }
.res.L { color: var(--lib-l); } .res.F { color: var(--fas-l); } .res.fail { color: var(--muted); } .res.veto { color: var(--gold); }

/* announcements */
.overlay {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,7,5,.9);
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.overlay.show { opacity: 1; }
.ov-box { text-align: center; max-width: 80vw; transform: scale(.94); transition: transform .3s ease; }
.overlay.show .ov-box { transform: none; }
.ov-title { font-family: var(--f-deco); font-size: 7vh; color: var(--gold); line-height: 1.1; text-shadow: 0 3px 0 #000; }
.ov-sub { font-family: var(--f-type); font-size: 3vh; color: var(--paper); margin-top: 1.6vh; }
.ov-art { margin: 3vh auto 0; display: flex; gap: 1.4vw; justify-content: center; flex-wrap: wrap; }
.ov-art .policy { height: 36vh; font-size: 3.4vh; border-width: 1.4vh; }
.ov-art .big-icon { width: 22vh; color: var(--paper); }
.ov-art .big-icon svg { width: 100%; height: auto; display: block; }
.ov-votes { display: flex; flex-wrap: wrap; gap: 1.6vh 1.1vw; justify-content: center; margin-top: 3vh; max-width: 86vw; }
.ov-vote { width: 12vh; text-align: center; animation: pop .4s ease backwards; }
.ov-vote .ballot { font-size: 3vh; border-width: .4vh; outline-offset: -1vh; }
.ov-vote .vn { font-size: 2vh; margin-top: .8vh; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes pop { 0% { transform: scale(.4) rotate(-10deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.ov-title.lib { color: var(--lib-l); }
.ov-title.fas { color: var(--fas-l); }

/* game over */
#over { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh; }
#over .w-title { font-family: var(--f-deco); font-size: 11vh; line-height: 1; }
#over .w-title.liberal { color: var(--lib-l); }
#over .w-title.fascist { color: var(--fas-l); }
#over .w-sub { font-family: var(--f-type); font-size: 3vh; color: var(--paper); }
.reveal-grid { display: flex; flex-wrap: wrap; gap: 2vh 1.6vw; justify-content: center; max-width: 92vw; }
.reveal-grid .who { width: 19vh; text-align: center; }
.reveal-grid .rolecard.small { padding: 1vh .6vh; }
.reveal-grid .rolecard.small .rc-icon { width: 8vh; }
.reveal-grid .rolecard.small .rc-title { font-size: 3.2vh; }
.reveal-grid .rolecard.small .rc-label { font-size: 1.1vh; }
.reveal-grid .nm { margin-top: 1vh; font-size: 2.2vh; font-weight: 600; }
.reveal-grid .dead .nm { text-decoration: line-through; color: var(--muted); }
.over-actions { display: flex; gap: 1.4vw; }
.over-actions .btn { font-size: 2.6vh; padding: 1.5vh 3vw; }

/* ===============================================================
   Phone
   =============================================================== */
body.phone { min-height: 100vh; }
.phone .wrap { max-width: 560px; margin: 0 auto; padding: 14px 14px 120px; }
.phone .logo { font-size: 40px; text-align: center; margin: 22px 0 8px; }
.phone label { display: block; font-family: var(--f-cond); font-weight: 700; font-size: 15px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin: 18px 0 6px; }
.phone .error { color: #ff9c86; font-weight: 600; margin-top: 12px; min-height: 1.2em; text-align: center; }
.phone h2 { font-family: var(--f-deco); font-weight: 400; color: var(--gold); font-size: 26px; margin: 8px 0 12px; text-align: center; line-height: 1.15; }
.phone p.lead { font-family: var(--f-type); text-align: center; color: var(--paper); font-size: 16px; line-height: 1.5; margin: 0 0 14px; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 12px; }
.topbar .who { font-weight: 700; font-size: 17px; }
.topbar .seat { color: var(--muted); font-size: 13px; }
.topbar .tags { margin-left: auto; display: flex; gap: 6px; }

.mini-board { display: flex; gap: 6px; margin-bottom: 14px; }
.mini-board > div { flex: 1; text-align: center; background: var(--panel); border-radius: 6px; padding: 7px 4px; font-family: var(--f-cond); font-weight: 700; font-size: 15px; letter-spacing: .03em; text-transform: uppercase; border-top: 3px solid var(--line); }
.mini-board .L { border-color: var(--lib); color: var(--lib-l); }
.mini-board .F { border-color: var(--fas); color: var(--fas-l); }
.mini-board .T { border-color: var(--gold-d); color: var(--gold); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin-bottom: 14px; }
.card.paper { background: var(--paper); color: var(--ink); border: 0; outline: 3px double var(--gold-d); outline-offset: -8px; }
.card.paper h2 { color: var(--ink); }
.card.paper p.lead { color: #4a3a2c; }

.pick-list { display: flex; flex-direction: column; gap: 8px; }
.pick { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 6px; border: 2px solid var(--line); background: var(--bg2); color: var(--text); font-size: 18px; font-weight: 600; text-align: left; }
.pick.sel { border-color: var(--gold); background: #3a2d18; }
.pick .sub { margin-left: auto; font-size: 12px; color: var(--muted); font-weight: 400; }
.pick:disabled { opacity: .4; }

.hand { display: flex; gap: 12px; justify-content: center; margin: 6px 0 14px; }
.hand .policy { width: 30%; max-width: 140px; font-size: 13px; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; }
.hand.two .policy { width: 40%; max-width: 160px; }
.hand .policy.sel { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 0 4px var(--gold), 0 10px 24px rgba(0,0,0,.6); }
.hand .policy.away { opacity: .45; transform: scale(.95); }
.hand .policy.static { cursor: default; }
.hand .policy.stamp-discard { opacity: .8; }
.hand .policy.stamp-discard::after, .hand .policy.stamp-enact::after {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-14deg);
  font-family: var(--f-cond); font-weight: 700; letter-spacing: .12em; font-size: 15px;
  padding: 3px 8px; border: 3px solid; border-radius: 4px; background: rgba(239,226,196,.92);
}
.hand .policy.stamp-discard::after { content: 'DISCARD'; color: #8a1c10; }
.hand .policy.stamp-enact::after { content: 'ENACT'; color: #1e5b2a; }
.hand .tag { text-align: center; font-family: var(--f-cond); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--muted); margin-top: 4px; }

.ballots { display: flex; gap: 14px; }
.ballots button { flex: 1; padding: 0; border: 0; background: transparent; border-radius: 10px; }
.ballots .ballot { font-size: 46px; }
.ballots button.sel .ballot { box-shadow: 0 0 0 5px var(--gold), 0 10px 24px rgba(0,0,0,.5); transform: scale(1.03); }
.ballots button.dim { opacity: .45; }

.actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.waiting { font-family: var(--f-type); color: var(--muted); text-align: center; font-size: 15px; line-height: 1.5; margin-top: 10px; }

.role-hold {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(10,7,5,.95) 30%);
}
.role-hold button {
  display: block; width: 100%; max-width: 560px; margin: 0 auto;
  padding: 16px; border-radius: 8px; border: 2px solid var(--gold-d);
  background: #120d0a; color: var(--gold);
  font-family: var(--f-cond); font-weight: 700; font-size: 18px; letter-spacing: .1em; text-transform: uppercase;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.role-hold button:active { background: #2a1d10; }
.secret {
  position: fixed; inset: 0; z-index: 25;
  background: rgba(10,7,5,.97);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 20px 100px; gap: 14px;
  user-select: none; -webkit-user-select: none;
}
.secret .rolecard { width: 100%; max-width: 330px; }
.secret .goal { font-family: var(--f-type); color: var(--paper); text-align: center; font-size: 15px; line-height: 1.5; max-width: 360px; }
.secret .team { text-align: center; color: var(--paper); font-size: 15px; line-height: 1.6; max-width: 360px; }
.secret .team b { color: var(--fas-l); }

.hist { font-size: 13px; color: var(--muted); }
.hist .hrow { font-size: 13px; }
.hist .hrow .res { font-size: 13px; }
.hist .hrow .votes { font-size: 12px; }

.lobby-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lobby-list li { background: var(--bg2); padding: 8px 10px; border-radius: 5px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.row-links { display: flex; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.big-result { font-family: var(--f-deco); font-size: 40px; text-align: center; line-height: 1.1; margin: 6px 0; }
.big-result.liberal { color: var(--lib-l); }
.big-result.fascist { color: var(--fas-l); }
.roles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.roles-grid .nm { text-align: center; font-size: 13px; margin-top: 4px; font-weight: 600; }