/* Kicker Live: the Lower Ward inn card table. Pixel style shared with nonplayer.ai. */
:root{
  --night:#17122b; --panel:#241c40; --panel2:#2f2655; --ink:#0b0818; --line:#4c4182;
  --text:#f4f1ff; --muted:#bdb4e0; --pop:#ff5e7e; --mint:#44e5b5; --sun:#ffd447;
  --display:'Silkscreen','Courier New',monospace;
  --body:'Pixelify Sans','Trebuchet MS',system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--night)}
body{margin:0; background:var(--night); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.45; padding-inline:16px}
a{color:var(--sun)}
a:focus-visible,button:focus-visible{outline:3px solid var(--mint); outline-offset:2px}
.wrap{max-width:1240px; margin:0 auto; padding-block:16px 32px}
.px{border:3px solid var(--ink); box-shadow:5px 5px 0 var(--ink)}
.label{font-family:var(--display); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0}

.top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.back{font-family:var(--display); font-size:13px; text-decoration:none}
.status{font-family:var(--display); font-size:12px; padding:5px 10px; border:2px solid var(--ink); background:var(--panel2); color:var(--muted)}
.status::before{content:""; display:inline-block; width:8px; height:8px; margin-right:8px; background:var(--muted)}
.status[data-state="live"]{color:var(--mint)}
.status[data-state="live"]::before{background:var(--mint); animation:blink 1.2s steps(1) infinite}
.status[data-state="starting"]::before,.status[data-state="reconnecting"]::before{background:var(--sun)}
@keyframes blink{50%{opacity:.2}}

.intro{padding-block:22px 18px; max-width:860px}
.eyebrow{font-family:var(--display); font-size:13px; color:var(--sun); margin:0 0 10px}
.intro h1{font-family:var(--display); font-size:clamp(26px,4.2vw,46px); line-height:1.05; margin:0; text-wrap:balance}
.lede{color:var(--muted); margin:14px 0 0; max-width:70ch}

.stage{display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start}
.room{flex:999 1 620px; min-width:0; background:var(--panel)}
.roombar{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 14px; background:var(--panel2); border-bottom:3px solid var(--ink); font-family:var(--display); font-size:12px}
.scene{position:relative; background:#100c20; overflow:hidden}
#table{display:block; width:100%; height:auto; image-rendering:pixelated}
.bubbles{position:absolute; inset:0; pointer-events:none}
.bubble{position:absolute; transform:translate(-50%,-100%); max-width:min(240px,46%); background:#fff; color:var(--ink); border:3px solid var(--ink); padding:3px 9px 4px; font-size:14px; line-height:1.25; box-shadow:3px 3px 0 rgba(11,8,24,.6); transition:opacity .4s}
.bubble b{margin-right:5px}
.bubble.act{background:var(--panel2); color:var(--text); border-color:var(--ink); font-size:13px}
.bubble.thought{background:#e7e2ff; color:#3b3366; border-style:dashed; font-style:italic}
.bubble.fade{opacity:0}
.board{display:flex; gap:12px; align-items:center; padding:10px 14px; border-top:3px solid var(--ink); background:var(--panel2)}
.cards{font-family:var(--display); font-size:15px; letter-spacing:.04em}
.cards .r{color:#ff8fa3}
.log{list-style:none; margin:0; padding:10px 14px 14px; display:flex; flex-direction:column; gap:4px; max-height:188px; overflow-y:auto; font-size:15px; border-top:3px solid var(--ink)}
.log li{color:var(--muted)}
.log li b{color:var(--text)}
.log li.talk{color:var(--text)}
.log li.thought{font-style:italic; color:#d9d2ff}
.log li.hand{font-family:var(--display); font-size:12px; color:var(--sun); margin-top:6px}

.side{flex:1 1 340px; min-width:0; display:flex; flex-direction:column; gap:20px}
.panel{background:var(--panel); padding:14px 16px}
.seats{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.seat{display:grid; grid-template-columns:28px minmax(0,1fr) auto; gap:10px; align-items:center; width:100%; text-align:left; background:var(--panel2); border:2px solid var(--ink); color:var(--text); font:inherit; padding:5px 8px; cursor:pointer}
.seat[aria-pressed="true"]{border-color:var(--sun)}
.seat canvas{width:28px; height:36px; image-rendering:pixelated}
.seat .who b{display:block}
.seat .who small{color:var(--muted); font-size:13px}
.seat .stack{font-family:var(--display); font-size:12px; text-align:right; white-space:nowrap}
.seat .stack small{display:block; color:var(--muted); font-family:var(--body); font-size:12px}
.seat.out{opacity:.55}
.seat.won .stack{color:var(--mint)}
.style{margin:10px 0; color:var(--muted); font-size:15px}
.pbot{margin:0; padding:10px 0; background:#100c20; border:2px solid var(--ink); font-family:'Courier New',monospace; font-size:13px; line-height:1.55; overflow-x:auto; white-space:pre}
.pbot span{display:block; padding:0 10px}
.pbot span.note{color:#8f86b8}
.pbot span.fired{background:rgba(255,212,71,.18); box-shadow:inset 3px 0 0 var(--sun)}
.why{margin:10px 0 0; font-size:14px; color:var(--muted)}
.why b{color:var(--text)}

.proof{margin-top:20px; background:var(--panel); padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px 18px; align-items:baseline; font-size:15px}
.proof code{font-family:'Courier New',monospace; font-size:13px; color:var(--mint)}
.foot{color:var(--muted); font-size:15px; padding-top:24px; max-width:80ch}

@media (prefers-reduced-motion:reduce){ .status[data-state="live"]::before{animation:none} .bubble{transition:none} }

/* HUD over the pixel table: --u is one picture pixel in CSS pixels (set by live.js). */
.hud{position:absolute; inset:0; pointer-events:none; --u:2.5px}
.hud > *{position:absolute; transform:translate(-50%,-50%)}
.hboard{display:flex; gap:calc(var(--u)*2)}
.pcard{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:calc(var(--u)*20); height:calc(var(--u)*28); background:#fbf8ff; color:#17122b; border:calc(var(--u)*0.8) solid var(--ink); border-radius:calc(var(--u)*2); box-shadow:calc(var(--u)*1) calc(var(--u)*1) 0 rgba(11,8,24,.55); font-family:var(--display); line-height:1}
.pcard b{font-size:calc(var(--u)*9); font-weight:700}
.pcard i{font-style:normal; font-size:calc(var(--u)*9)}
.pcard.red{color:#d43a5c}
.pcard.empty{background:rgba(11,8,24,.18); border-style:dashed; border-color:rgba(11,8,24,.45); box-shadow:none}
.pcard.sm{width:calc(var(--u)*13); height:calc(var(--u)*18); border-width:calc(var(--u)*0.6)}
.pcard.sm b,.pcard.sm i{font-size:calc(var(--u)*6.5)}
.hhole{display:flex; gap:calc(var(--u)*1)}
.hhole.out{opacity:.5}
.hpot{font-family:var(--display); font-size:calc(var(--u)*6); color:var(--sun); background:rgba(11,8,24,.75); padding:calc(var(--u)*1) calc(var(--u)*4); border:calc(var(--u)*0.6) solid var(--ink); white-space:nowrap}
.hpot:empty{display:none}
.hbet{font-family:var(--display); font-size:calc(var(--u)*4.5); color:var(--text); text-shadow:0 1px 0 var(--ink); white-space:nowrap}
.plate{position:absolute; display:grid; grid-template-columns:auto auto; column-gap:calc(var(--u)*3); align-items:baseline; background:rgba(23,18,43,.92); border:calc(var(--u)*0.7) solid var(--ink); padding:calc(var(--u)*1.2) calc(var(--u)*3); white-space:nowrap; min-width:calc(var(--u)*40)}
.plate:empty{display:none}
.plate b{font-size:calc(var(--u)*5.5); color:var(--text)}
.plate span{font-family:var(--display); font-size:calc(var(--u)*4.5); color:var(--sun); text-align:right}
.plate em{position:absolute; left:calc(var(--u)*-4); top:calc(var(--u)*-4); font-style:normal; border:calc(var(--u)*0.6) solid var(--ink); font-family:var(--display); font-size:calc(var(--u)*4); width:calc(var(--u)*7); height:calc(var(--u)*7); line-height:calc(var(--u)*7); text-align:center; border-radius:50%; background:#f4f1ff; color:var(--ink)}
.plate small{grid-column:1 / -1; font-size:calc(var(--u)*4.2); color:var(--muted)}
.plate.acting{border-color:var(--sun); box-shadow:0 0 0 calc(var(--u)*0.8) var(--sun)}
.plate.won{border-color:var(--mint); box-shadow:0 0 0 calc(var(--u)*0.8) var(--mint)}
.plate.out{opacity:.55}
@media (max-width:640px){ .plate small{display:none} }