/* ═══════════════════════ CLONE CAH — "riso-printed table" ═══════════════════════
   Bone cardstock surface · brutalist black/white cards with hard offset shadows ·
   one screaming vermillion accent · deadpan heavy type + mono form-labels.
================================================================================== */
:root{
  --ink:#181410;            /* warm near-black */
  --paper:#f4eddd;          /* bone cardstock */
  --paper-2:#e8dec8;
  --card:#f9f4e8;           /* white card */
  --accent:#e4002b;         /* fire-engine red */
  --accent-deep:#b00020;
  --line:#181410;
  --good:#1c8d4e;
  --shadow:6px 6px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
}
*{box-sizing:border-box}
[hidden]{display:none !important}   /* beat id/class display rules below */
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  font-family:"Hanken Grotesk",system-ui,sans-serif; font-weight:500;
  background-color:var(--paper);
  overflow-x:hidden;
}
h1,h2,h3,.brand,.bigtitle,.bigmsg,.winner,.btn{font-family:"Archivo Black",system-ui,sans-serif; font-weight:400}
.mono,.formlabel,.kicker,.phase,.tag,.cnt,.conn,.timer-num{font-family:"Space Mono",monospace}

/* film grain overlay */
.grain{position:fixed; inset:0; z-index:200; pointer-events:none; opacity:.04; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ── topbar ───────────────────────────────────────────────────────────────── */
.topbar{display:flex; align-items:center; gap:14px; padding:12px 20px; background:var(--ink); color:var(--paper);
  position:sticky; top:0; z-index:30; border-bottom:3px solid var(--accent)}
.brand{font-size:1.35rem; letter-spacing:.04em; display:flex; gap:6px; align-items:center}
.brand .cah{background:var(--accent); color:var(--paper); padding:0 8px; transform:rotate(-2deg); display:inline-block}
.spacer{flex:1}
.conn{display:flex; align-items:center; gap:7px; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--paper)}
.conn .dot{width:9px; height:9px; border-radius:50%; background:#caa; box-shadow:0 0 0 2px var(--ink)}
.conn.on .dot{background:var(--good)} .conn.off .dot{background:var(--accent)}
.me{font-family:"Space Mono",monospace; font-weight:700; font-size:.85rem; color:var(--paper)}
.iconbtn{background:var(--paper); color:var(--ink); border:2.5px solid var(--paper); border-radius:2px;
  font-family:"Archivo Black"; font-size:.66rem; letter-spacing:.08em; padding:.45rem .7rem; cursor:pointer;
  box-shadow:3px 3px 0 var(--accent); transition:transform .08s, box-shadow .08s}
.iconbtn:hover{transform:translate(2px,2px); box-shadow:1px 1px 0 var(--accent)}

/* ── buttons ──────────────────────────────────────────────────────────────── */
.btn{background:var(--ink); color:var(--paper); border:2.5px solid var(--ink); border-radius:3px;
  font-size:.82rem; letter-spacing:.05em; text-transform:uppercase; padding:.72rem 1.2rem; cursor:pointer;
  box-shadow:5px 5px 0 var(--accent); transition:transform .08s, box-shadow .08s}
.btn:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--accent)}
.btn:active{transform:translate(5px,5px); box-shadow:0 0 0 var(--accent)}
.btn:disabled{opacity:.35; cursor:not-allowed; transform:none; box-shadow:3px 3px 0 var(--ink)}
.btn.big{font-size:1rem; padding:.85rem 1.5rem; width:100%}
.btn.ghost{background:var(--paper); color:var(--ink); box-shadow:5px 5px 0 var(--ink)}
.btn.ghost:hover{box-shadow:3px 3px 0 var(--ink)}
.btn.gold{background:var(--accent); color:var(--paper); border-color:var(--ink); box-shadow:5px 5px 0 var(--ink)}
.btn.gold:hover{box-shadow:3px 3px 0 var(--ink)}

/* ── join ─────────────────────────────────────────────────────────────────── */
.join{display:flex; align-items:center; justify-content:center; min-height:calc(100vh - 60px); padding:20px}
.join-card{background:var(--card); border:3px solid var(--ink); box-shadow:12px 12px 0 var(--ink);
  padding:40px 34px; width:min(440px,93vw); position:relative}
.join-card::before{content:"♠ ♣"; position:absolute; top:-18px; right:18px; background:var(--accent); color:var(--paper);
  font-family:"Space Mono"; font-weight:700; padding:3px 10px; border:2.5px solid var(--ink); transform:rotate(3deg)}
.kicker{font-size:.72rem; text-transform:uppercase; letter-spacing:.16em; color:var(--accent-deep)}
.bigtitle{font-size:3.1rem; line-height:.92; margin:.4rem 0 1.4rem; letter-spacing:-.01em}
.bigtitle span{display:inline-block; background:var(--ink); color:var(--card); padding:0 .12em; transform:rotate(-1.5deg)}
.formlabel{font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--ink); opacity:.7; margin-bottom:6px}
.join-card input{width:100%; margin:0 0 16px; padding:.85rem 1rem; background:var(--paper); border:2.5px solid var(--ink);
  border-radius:2px; color:var(--ink); font-family:"Space Mono",monospace; font-size:1.05rem; letter-spacing:.05em}
.join-card input:focus{outline:none; box-shadow:inset 0 0 0 2px var(--accent)}
.join-card input::placeholder{color:#a89c84}
.err{color:var(--accent-deep); font-family:"Space Mono"; font-size:.82rem; min-height:1.2em; margin:.7rem 0 0}

/* ── layout ───────────────────────────────────────────────────────────────── */
main#game{display:grid; grid-template-columns:250px 1fr; grid-template-rows:1fr auto;
  grid-template-areas:"players table" "players hand"; gap:20px; padding:22px; min-height:calc(100vh - 60px)}
@media(max-width:780px){ main#game{grid-template-columns:1fr; grid-template-areas:"players" "table" "hand"} }

/* scoreboard */
.players{grid-area:players; background:var(--card); border:3px solid var(--ink); box-shadow:var(--shadow);
  padding:14px; height:fit-content}
.players h3{margin:0 0 .8rem; font-size:.74rem; text-transform:uppercase; letter-spacing:.12em;
  font-family:"Space Mono"; border-bottom:2.5px solid var(--ink); padding-bottom:8px}
.pl{display:flex; align-items:center; gap:8px; padding:9px 8px; margin-bottom:7px; background:var(--paper);
  border:2.5px solid var(--ink); box-shadow:3px 3px 0 var(--ink); position:relative}
.pl.judge{background:var(--accent); color:var(--paper)}
.pl.you{box-shadow:3px 3px 0 var(--accent)}
.pl.away{opacity:.4}
.pl.away::after{content:"AWAY"; position:absolute; right:8px; font-family:"Space Mono"; font-size:.6rem; letter-spacing:.1em}
.pl .nm{flex:1; font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pl .sc{font-family:"Archivo Black"; font-size:1.15rem; min-width:1.3em; text-align:center}
.pl .badges{display:flex; gap:3px}
.tag{font-size:.58rem; padding:.1rem .4rem; border:1.5px solid var(--ink); text-transform:uppercase; letter-spacing:.05em; background:var(--card); color:var(--ink)}
.tag.judge{background:var(--ink); color:var(--accent); border-color:var(--paper)}
.tag.host{background:var(--accent); color:var(--paper); border-color:var(--ink)}
.tag.done{background:var(--good); color:var(--paper); border-color:var(--ink)}

/* table / stage */
.table{grid-area:table; display:flex; flex-direction:column; align-items:center; gap:16px}
.timerrow{display:flex; align-items:center; gap:12px; width:min(560px,92%)}
.timerbar{flex:1; height:14px; background:var(--card); border:2.5px solid var(--ink); box-shadow:var(--shadow-sm); overflow:hidden}
.timer-num{font-family:"Space Mono"; font-weight:700; font-size:.95rem; min-width:3ch; text-align:right; color:var(--ink)}
.timerbar span{display:block; height:100%; width:100%; background:var(--good);
  background-image:repeating-linear-gradient(45deg, transparent 0 6px, rgba(0,0,0,.12) 6px 12px)}
.timerbar.low span{background:var(--accent)}
.stage{width:100%; display:flex; flex-direction:column; align-items:center; gap:18px; padding-top:4px}
.phase{font-size:.74rem; text-transform:uppercase; letter-spacing:.22em; color:var(--accent-deep);
  background:var(--card); border:2px solid var(--ink); padding:4px 12px; transform:rotate(-1deg)}

/* ── cards ────────────────────────────────────────────────────────────────── */
.card{border:2.5px solid var(--ink); border-radius:7px; padding:18px 16px 42px; width:208px; min-height:270px;
  position:relative; font-size:1.05rem; line-height:1.3; font-weight:600; box-shadow:var(--shadow); user-select:none}
.card .pick{position:absolute; left:15px; bottom:13px; font-family:"Space Mono"; font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; opacity:.7}
.card .pack{position:absolute; right:14px; bottom:12px; font-family:"Space Mono"; font-size:.57rem; letter-spacing:.03em;
  opacity:.5; max-width:60%; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card.black{background:var(--ink); color:var(--card)}
/* per-card tilt lives in --r so re-renders keep it; only the selected card straightens */
.card.white{background:var(--card); color:var(--ink); cursor:pointer; transition:transform .12s, box-shadow .12s; transform:rotate(var(--r,0deg))}
.card.white:hover{transform:translateY(-10px) rotate(var(--r,0deg)); box-shadow:8px 14px 0 var(--ink)}
.card.white.sel{transform:translateY(-14px) rotate(0deg); box-shadow:8px 14px 0 var(--accent); border-color:var(--accent)}
.card.white.disabled{cursor:default; opacity:.5; filter:grayscale(.4)}
.card.white.disabled:hover{transform:rotate(var(--r,0deg)); box-shadow:var(--shadow)}
.card.white.static{cursor:default; transform:rotate(0deg)}
.card.white.static:hover{transform:rotate(0deg); box-shadow:var(--shadow)}
.card.big{width:268px; min-height:300px; font-size:1.22rem}
.blank{display:inline-block; min-width:1.7em; border-bottom:3px solid var(--accent); margin:0 .12em; transform:translateY(2px)}

.pile{display:flex; flex-wrap:wrap; gap:18px; justify-content:center}
.slot{display:block}
.sub{cursor:default; position:relative}
.sub .stack{display:flex; flex-direction:column; gap:7px}
.sub.pickable .card{cursor:pointer; transition:transform .12s, box-shadow .12s}
.sub.pickable:hover .card{transform:translateY(-8px); box-shadow:8px 12px 0 var(--accent); border-color:var(--accent)}
.sub .who{margin-top:9px; text-align:center; font-family:"Space Mono"; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink); min-height:1.1em}
.sub.win .card{border-color:var(--accent); box-shadow:6px 6px 0 var(--accent)}
.sub.win .who{color:var(--accent-deep); font-weight:700}

/* WINNER rubber stamp */
.stamp-wrap{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:5; pointer-events:none}
.stamp{font-family:"Archivo Black"; font-size:1.6rem; color:var(--accent); border:4px solid var(--accent);
  padding:2px 10px; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; opacity:.92}

/* hand */
.hand{grid-area:hand; display:flex; flex-direction:column; align-items:center; gap:14px; padding-bottom:8px}
.hand .handcards{display:flex; flex-wrap:wrap; gap:14px; justify-content:center}
.hand .bar{display:flex; align-items:center; gap:14px}
.hint{font-family:"Space Mono"; font-size:.92rem; color:var(--ink); opacity:.75; text-align:center}

.bigmsg{font-size:1.5rem; text-align:center}
.winner{font-size:1.9rem; text-align:center; color:var(--accent-deep); transform:rotate(-1.5deg)}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center}

/* ── modal ────────────────────────────────────────────────────────────────── */
.backdrop{position:fixed; inset:0; background:rgba(24,20,16,.55); display:flex; align-items:center; justify-content:center; z-index:60; padding:20px}
.sheet{background:var(--card); border:3px solid var(--ink); box-shadow:12px 12px 0 var(--ink); padding:26px; width:min(820px,96vw); max-height:90vh; overflow:auto}
.sheet h2{margin:.1rem 0 1.1rem; font-size:1.4rem}
.sheet h3{font-family:"Space Mono"; font-size:.78rem; text-transform:uppercase; letter-spacing:.12em}
.field{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:2px solid var(--ink)}
.field label{font-weight:700}
.field input[type=number]{width:92px; padding:.45rem; background:var(--paper); border:2.5px solid var(--ink); border-radius:2px; color:var(--ink); font-family:"Space Mono"}
.field input[type=checkbox]{width:22px; height:22px; accent-color:var(--accent)}
.sets{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:7px; margin:6px 0}
.setrow{display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--paper); border:2.5px solid var(--ink); font-size:.84rem; cursor:pointer; font-weight:600}
.setrow input{accent-color:var(--accent); width:18px; height:18px}
.setrow .cnt{margin-left:auto; font-size:.7rem; opacity:.65}
.modal-actions{display:flex; gap:10px; margin-top:18px}

/* toasts */
.toasts{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:80}
.toast{background:var(--ink); color:var(--paper); border:2.5px solid var(--ink); border-left:6px solid var(--accent);
  padding:11px 18px; font-family:"Space Mono"; font-size:.84rem; text-transform:uppercase; letter-spacing:.05em; box-shadow:var(--shadow-sm)}
.toast.good{border-left-color:var(--good)}
.toast.bad{border-left-color:var(--accent)}