/* Pour Decisions. Art direction: last orders in a dive bar. Old wood, green felt, brass, beer mats, cream card stock
   printed in two inks. Physical materials, no glass panels, no gradient blobs. Each game sets its own palette on
   body[data-theme]; the shell defaults to the King's Cup bar. */
@font-face { font-family: 'Alfa Slab One'; src: url(/fonts/alfa-slab-one-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/barlow-condensed-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/barlow-condensed-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Barlow Condensed'; src: url(/fonts/barlow-condensed-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --night: #140d0a; --wood: #2a1810; --ink: #231a14; --paper: #f4ead3; --paper-2: #e8d9b8;
  --oxblood: #8c1c22; --oxblood-2: #6e1519; --brass: #c8963e; --brass-2: #e7c27a; --felt: #1f4b33; --chalk: #efe8d8;
  --sq-gold: #ffc53d;
  --display: 'Alfa Slab One', Georgia, serif;
  --ui: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--paper); font: 500 18px/1.3 var(--ui); overscroll-behavior: none; }
body { overflow: hidden; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input { font: inherit; user-select: text; -webkit-user-select: text; }
#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ---------- surfaces */
.woodbg { background: linear-gradient(rgba(20, 13, 10, .55), rgba(20, 13, 10, .8)), url(/art/table/wood.webp) center / 520px; }
.paper { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 10px 30px rgba(0, 0, 0, .45); }

/* ---------- buttons: brass plates and inked stamps */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 6px;
  font: 700 21px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(#e2bb6c, #b9873a); color: #2b1a0c; box-shadow: 0 2px 0 #7a5420, 0 6px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 #7a5420, 0 3px 8px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .45); }
.btn.ink { background: var(--oxblood); color: var(--paper); box-shadow: 0 2px 0 #4a0d10, 0 6px 14px rgba(0, 0, 0, .35); }
.btn.ghost { background: none; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn[disabled] { opacity: .45; pointer-events: none; }
.link { text-decoration: underline; text-underline-offset: 3px; opacity: .85; font-weight: 600; }

/* ---------- home */
.home { overflow-y: auto; padding: calc(18px + var(--safe-t)) 18px calc(28px + var(--safe-b)); align-items: center; }
.sign { margin: 64px 0 6px; text-align: center; }
.sign h1 { margin: 0; font: 400 clamp(44px, 13vw, 76px)/.92 var(--display); color: var(--paper); text-shadow: 3px 3px 0 var(--oxblood), 6px 6px 0 rgba(0, 0, 0, .35); letter-spacing: .01em; }
.sign .est { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 12px; font: 700 15px var(--ui); letter-spacing: .32em; text-transform: uppercase; color: var(--brass-2); }
.sign .est::before, .sign .est::after { content: ''; height: 2px; width: 34px; background: var(--brass); }
.shelf-label { align-self: stretch; max-width: 520px; margin: 34px auto 12px; font: 700 15px var(--ui); letter-spacing: .28em; text-transform: uppercase; color: var(--chalk); opacity: .7; text-align: center; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px; width: 100%; max-width: 520px; }
.deckbox { position: relative; aspect-ratio: 63 / 88; border-radius: 9px; background: var(--paper); box-shadow: 0 2px 0 #c9b893, 0 4px 0 #b5a27a, 0 6px 0 #9f8c63, 0 16px 26px rgba(0, 0, 0, .55); transform: rotate(-3deg); transition: transform .2s; overflow: hidden; text-align: left; }
.deckbox:active { transform: rotate(-3deg) scale(.97); }
.deckbox .art { position: absolute; inset: 7% 8% 30%; background: center top / cover; border: 2px solid var(--oxblood); }
.deckbox .plate { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 8px 12px; background: var(--oxblood); color: var(--paper); text-align: center; }
.deckbox .plate b { display: block; font: 400 22px/1 var(--display); }
.deckbox .plate small { display: block; margin-top: 4px; font: 600 13px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-2); }
.soon { aspect-ratio: 63 / 88; border-radius: 9px; border: 2px dashed rgba(239, 232, 216, .35); display: grid; place-items: center; text-align: center; padding: 18px; color: var(--chalk); opacity: .6; font: 600 17px var(--ui); letter-spacing: .06em; transform: rotate(2deg); }
.homefoot { margin-top: auto; padding-top: 34px; font: 600 14px var(--ui); letter-spacing: .1em; color: var(--chalk); opacity: .5; text-align: center; }

/* ---------- sheets (paper menus sliding up) */
.scrim { position: absolute; inset: 0; background: rgba(8, 5, 3, .6); opacity: 0; transition: opacity .25s; z-index: 30; }
.scrim.on { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; overflow-y: auto; z-index: 31; border-radius: 14px 14px 0 0;
  padding: 22px 20px calc(22px + var(--safe-b)); transform: translateY(105%); transition: transform .32s cubic-bezier(.2, .9, .25, 1); max-width: 620px; margin: 0 auto; }
.sheet.on { transform: none; }
.sheet h2 { margin: 0 0 4px; font: 400 32px/1 var(--display); color: var(--oxblood); }
.sheet .tag { margin: 0 0 18px; font: 600 18px var(--ui); color: #5a4636; }
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: rgba(35, 26, 20, .25); margin: -8px auto 14px; }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mat { position: relative; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 16%;
  background: radial-gradient(circle, #f7efdc 58%, #eadbbb 59%, #eadbbb 62%, #f7efdc 63%); color: var(--ink);
  box-shadow: 0 0 0 3px var(--oxblood) inset, 0 0 0 7px #f7efdc inset, 0 0 0 8px var(--oxblood) inset, 0 8px 18px rgba(0, 0, 0, .3); }
.mat:active { transform: scale(.97) rotate(-2deg); }
.mat b { display: block; font: 400 clamp(20px, 6vw, 26px)/1 var(--display); color: var(--oxblood); }
.mat small { display: block; margin-top: 6px; font: 600 15px/1.15 var(--ui); color: #5a4636; }
.howto { margin-top: 20px; }
.howto summary { font: 700 17px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--oxblood); cursor: pointer; list-style: none; }
.howto ol { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.howto li { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; font: 500 17px/1.2 var(--ui); }
.howto li img { width: 44px; height: 44px; }
.howto li b { color: var(--oxblood); }

/* ---------- the table */
.table { background: var(--night); }
.table canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.table .vig { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 30%, transparent 45%, rgba(8, 5, 3, .55) 100%); }
.hud { position: absolute; left: 0; right: 0; top: 0; padding: calc(10px + var(--safe-t)) 12px 0; display: flex; align-items: flex-start; gap: 10px; pointer-events: none; z-index: 5; }
.hud > * { pointer-events: auto; }
.hud .spacer { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 17px; background: rgba(20, 13, 10, .78); color: var(--paper);
  font: 700 15px var(--ui); letter-spacing: .08em; text-transform: uppercase; box-shadow: inset 0 0 0 1px rgba(200, 150, 62, .45); }
.cupmeter { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px 0 6px; border-radius: 23px; background: rgba(20, 13, 10, .78); box-shadow: inset 0 0 0 1px rgba(200, 150, 62, .45); }
.cupmeter img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .6)); }
.cupmeter .crowns { display: flex; gap: 3px; }
.cupmeter .crowns i { width: 14px; height: 11px; background: rgba(239, 232, 216, .2); clip-path: polygon(0 100%, 0 25%, 25% 60%, 50% 0, 75% 60%, 100% 25%, 100% 100%); }
.cupmeter .crowns i.on { background: var(--brass-2); }
.cupmeter .left { font: 700 15px var(--ui); color: var(--chalk); letter-spacing: .06em; min-width: 3.2em; }
.turnpill { position: absolute; left: 50%; top: calc(66px + var(--safe-t)); transform: translateX(-50%); z-index: 5; white-space: nowrap; pointer-events: none; }
.turnpill .chip { height: 38px; font-size: 17px; background: var(--paper); color: var(--ink); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
.turnpill .chip.me { background: var(--brass-2); }
.turnpill:empty { display: none; }
.hint { position: absolute; left: 0; right: 0; top: 47%; text-align: center; font: 700 16px var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--chalk); opacity: .6; pointer-events: none; transition: opacity .3s; }
.hint.off { opacity: 0; }
.corner { position: absolute; right: 12px; bottom: calc(14px + var(--safe-b)); z-index: 5; display: flex; gap: 8px; }
.corner .chip { height: 42px; font-size: 16px; }
.thumbbtn { position: absolute; left: 12px; bottom: calc(150px + var(--safe-b)); z-index: 6; width: 70px; height: 70px; border-radius: 50%; background: var(--brass-2); color: var(--ink); font: 400 13px/1 var(--display); box-shadow: 0 4px 0 #7a5420, 0 8px 16px rgba(0, 0, 0, .4); display: grid; place-items: center; }

/* rule panel: a beer mat and a printed card slip */
.panel { position: absolute; left: 10px; right: 10px; bottom: calc(10px + var(--safe-b)); z-index: 10; max-width: 560px; margin: 0 auto; border-radius: 12px; padding: 16px 16px 16px 18px;
  transform: translateY(130%); transition: transform .38s cubic-bezier(.2, .9, .25, 1); max-height: 70%; overflow-y: auto; }
.panel.on { transform: none; }
.panel .top { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; }
.panel .mati { width: 92px; height: 92px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); transform: rotate(-8deg); animation: matIn .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes matIn { from { transform: rotate(-40deg) scale(.4); opacity: 0; } }
.panel .rank { font: 700 15px var(--ui); letter-spacing: .2em; text-transform: uppercase; }
.panel h3 { margin: 2px 0 4px; font: 400 30px/1 var(--display); color: var(--oxblood); }
.panel p { margin: 0; font: 500 18px/1.22 var(--ui); color: #3b2c21; }
.panel .prompt { margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--brass); background: rgba(200, 150, 62, .14); font: 600 19px/1.2 var(--ui); color: var(--ink); }
.panel .prompt small { display: block; font: 700 12px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #8a6a3a; margin-bottom: 2px; }
.panel .result { margin-top: 12px; font: 700 20px var(--ui); color: var(--oxblood); }
.panel .actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.panel .actions .btn { flex: 1; }
.panel .people { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.panel .people button { min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--paper-2); color: var(--ink); font: 700 18px var(--ui); box-shadow: inset 0 0 0 2px rgba(140, 28, 34, .35); }
.panel .people button:active { background: var(--brass-2); }
.panel input.rule { width: 100%; margin-top: 12px; min-height: 48px; padding: 0 12px; border: 2px solid rgba(35, 26, 20, .3); border-radius: 6px; background: #fffaf0; color: var(--ink); font-size: 19px; }
.panel .wait { margin-top: 12px; font: 600 17px var(--ui); color: #6b5645; }
.race { display: grid; place-items: center; margin-top: 14px; }
.race button { width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #c2343b, var(--oxblood) 60%, #5a1013); color: var(--paper);
  font: 400 28px/1 var(--display); box-shadow: 0 6px 0 #3f0a0d, 0 14px 28px rgba(0, 0, 0, .45), inset 0 2px 0 rgba(255, 255, 255, .25); }
.race button:active, .race button.done { transform: translateY(5px); box-shadow: 0 1px 0 #3f0a0d, 0 6px 14px rgba(0, 0, 0, .45); }
.race .bar { width: 100%; height: 6px; margin-top: 14px; background: rgba(35, 26, 20, .15); border-radius: 3px; overflow: hidden; }
.race .bar i { display: block; height: 100%; background: var(--oxblood); transform-origin: left; animation: drain linear forwards; }
@keyframes drain { to { transform: scaleX(0); } }

/* drink toast: a stamped ticket that drops in */
.toast { position: absolute; left: 50%; top: 30%; z-index: 20; transform: translate(-50%, -30px) rotate(-4deg); opacity: 0; pointer-events: none;
  padding: 12px 22px; background: var(--paper); color: var(--oxblood); border: 3px solid var(--oxblood); border-radius: 4px;
  font: 400 30px/1.05 var(--display); text-align: center; text-transform: uppercase; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); transition: transform .35s cubic-bezier(.2, 1.5, .4, 1), opacity .25s; max-width: 86%; }
.toast.on { opacity: 1; transform: translate(-50%, 0) rotate(-4deg); }
.toast small { display: block; font: 700 16px var(--ui); letter-spacing: .12em; color: var(--ink); margin-top: 4px; }

/* the house rules book (dashboard) */
.book h4 { margin: 18px 0 6px; font: 700 14px var(--ui); letter-spacing: .22em; text-transform: uppercase; color: #8a6a3a; }
.book ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.book li { font: 600 18px/1.2 var(--ui); padding: 8px 10px; background: rgba(200, 150, 62, .12); border-radius: 4px; }
.book li em { font-style: normal; color: #7a6250; font-weight: 500; }
.book .empty { color: #8a7666; font-style: italic; font-weight: 500; }
.book .names { display: grid; gap: 8px; }
.book .names .row { display: flex; gap: 8px; }
.book .names input { flex: 1; min-height: 46px; padding: 0 12px; border: 2px solid rgba(35, 26, 20, .25); border-radius: 6px; background: #fffaf0; color: var(--ink); }
.book .names button.x { width: 46px; border-radius: 6px; background: var(--paper-2); color: var(--oxblood); font: 700 22px var(--ui); }
.book .order li.now { background: var(--brass-2); }
.lastcards { display: flex; gap: 6px; flex-wrap: wrap; }
.lastcards img { width: 44px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); }

/* finale */
.finale { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; align-content: center; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 40%, rgba(110, 21, 25, .85), rgba(10, 6, 4, .95)); opacity: 0; transition: opacity .4s; }
.finale.on { opacity: 1; }
.finale img { width: min(62vw, 300px); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .6)); animation: cupIn 1.1s cubic-bezier(.2, 1.3, .4, 1), cupWobble 2.6s 1.1s ease-in-out infinite; }
@keyframes cupIn { from { transform: translateY(40vh) rotate(-30deg) scale(.4); } }
@keyframes cupWobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.finale h2 { margin: 10px 0 4px; font: 400 clamp(36px, 11vw, 64px)/.95 var(--display); color: var(--paper); text-shadow: 3px 3px 0 var(--oxblood); }
.finale p { margin: 0 0 22px; font: 700 22px var(--ui); color: var(--brass-2); letter-spacing: .06em; }
.finale .actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* lobby */
.lobby { overflow-y: auto; align-items: center; padding: calc(70px + var(--safe-t)) 18px calc(24px + var(--safe-b)); }
.lobby .card { width: 100%; max-width: 440px; border-radius: 10px; padding: 22px; text-align: center; }
.lobby h2 { margin: 0 0 6px; font: 400 30px/1 var(--display); color: var(--oxblood); }
.lobby .qr { width: min(62vw, 240px); margin: 6px auto 10px; }
.lobby .qr svg { width: 100%; display: block; }
.lobby .code { font: 400 54px/1 var(--display); letter-spacing: .12em; color: var(--oxblood); }
.lobby .url { font: 600 16px var(--ui); color: #6b5645; }
.lobby ul { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 6px; text-align: left; }
.lobby li { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 6px; background: rgba(200, 150, 62, .14); font: 700 19px var(--ui); color: var(--ink); }
.lobby li.off { opacity: .45; }
.lobby li .host { margin-left: auto; font: 700 12px var(--ui); letter-spacing: .18em; color: #8a6a3a; text-transform: uppercase; }
.lobby input { width: 100%; min-height: 50px; margin: 10px 0; padding: 0 12px; border: 2px solid rgba(35, 26, 20, .3); border-radius: 6px; background: #fffaf0; color: var(--ink); font-size: 20px; text-align: center; }
.lobby .err { color: var(--oxblood); font-weight: 700; min-height: 1.3em; }

/* hand: the cards you drew, fanned along the bottom (multi) */
.hand { position: absolute; left: 0; right: 0; bottom: calc(64px + var(--safe-b)); height: 76px; z-index: 4; display: flex; padding: 4px 0 0 14px; overflow-x: auto; scrollbar-width: none; }
.hand img { flex: none; width: 50px; height: 70px; margin-right: -24px; border-radius: 4px; box-shadow: -2px 2px 6px rgba(0, 0, 0, .5); transform: rotate(var(--r, 0deg)); transform-origin: bottom center; transition: transform .2s; }
.hand img:active { transform: translateY(-10px) rotate(0); }

.back { position: absolute; left: 12px; bottom: calc(14px + var(--safe-b)); z-index: 5; }
.back .chip { height: 42px; }
.nogl { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; text-align: center; }
@media (min-width: 700px) { .panel { left: 50%; right: auto; width: 540px; transform: translate(-50%, 130%); } .panel.on { transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .01s !important; transition-duration: .01s !important; } }

/* Lenny: round portrait badge + paper caption slip */
.hostslot { position: relative; display: flex; align-items: flex-start; gap: 8px; z-index: 6; }
.lenny { position: relative; flex: none; width: 66px; height: 66px; border-radius: 50%; overflow: hidden; background: #2a1810 url(/hosts/lenny.webp) center / cover; box-shadow: 0 0 0 3px var(--brass), 0 0 0 5px #3a230f, 0 8px 18px rgba(0, 0, 0, .5); }
.lenny video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .18s; }
.lenny .talk { opacity: 0; }
.lenny.talking .talk { opacity: 1; }
.lenny.talking { animation: bob .5s ease-in-out infinite alternate; }
@keyframes bob { to { transform: translateY(-2px) rotate(2deg); } }
.lenny .mute { display: none; position: absolute; left: 0; right: 0; bottom: 6px; font: 700 10px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); background: rgba(140, 28, 34, .9); font-style: normal; }
.lenny.off { filter: grayscale(.8) brightness(.7); }
.lenny.off .mute { display: block; }
.lennycap { position: relative; max-width: min(52vw, 300px); margin-top: 6px; padding: 8px 12px; border-radius: 4px; background: var(--paper); color: var(--ink); font: 600 16px/1.2 var(--ui);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .45); opacity: 0; transform: translateY(-6px) rotate(-1deg); transition: opacity .2s, transform .25s; pointer-events: none; }
.lennycap::before { content: ''; position: absolute; left: -7px; top: 14px; border: 7px solid transparent; border-left: 0; border-right-color: var(--paper); }
.lennycap.on { opacity: 1; transform: none; }
.thumbbtn[hidden] { display: none; }
.lennycap { width: max-content; }
.lennycap { position: absolute; left: 76px; top: 2px; margin: 0; }

/* sound settings: paper switches */
.switches { display: grid; gap: 10px; margin-top: 10px; }
.switch { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 8px; background: rgba(200, 150, 62, .12); cursor: pointer; }
.switch span { flex: 1; }
.switch b { display: block; font: 700 20px var(--ui); color: var(--ink); }
.switch small { display: block; font: 500 15px var(--ui); color: #6b5645; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch i { flex: none; width: 54px; height: 30px; border-radius: 15px; background: #cdbd9b; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .2); position: relative; transition: background .2s; }
.switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fffaf0; box-shadow: 0 2px 4px rgba(0, 0, 0, .3); transition: transform .2s; }
.switch input:checked + i { background: var(--oxblood); }
.switch input:checked + i::after { transform: translateX(24px); }
.switch input:focus-visible + i { outline: 3px solid var(--brass); outline-offset: 2px; }
.homesound { position: absolute; right: 14px; top: calc(14px + var(--safe-t)); }

/* game options: chips on paper */
.options { display: grid; gap: 12px; margin: 4px 0 18px; text-align: left; }
.optlabel { font: 700 13px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: #8a6a3a; margin-bottom: 6px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { min-height: 40px; padding: 0 14px; border-radius: 20px; background: var(--paper-2); color: var(--ink); font: 700 17px var(--ui); box-shadow: inset 0 0 0 2px rgba(140, 28, 34, .25); }
.opt.on { background: var(--oxblood); color: var(--paper); box-shadow: none; }
.opt:disabled { opacity: .75; cursor: default; }
.lobbyopts:empty { display: none; }

/* shared panel widgets */
.panel .cardthumb { width: 70px; border-radius: 6px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35); transform: rotate(-4deg); }
.panel .top:has(.cardthumb) { grid-template-columns: 70px 1fr; }
.panel .people button.chosen { background: var(--oxblood); color: var(--paper); }
.panel .voted { margin: 8px 0 0; font: 600 15px var(--ui); color: #6b5645; }
.panel .tally { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.panel .tally li { padding: 6px 10px; border-radius: 4px; background: rgba(200, 150, 62, .12); font: 600 17px var(--ui); }
.panel .tally li.top { background: var(--brass-2); }
.panel .tally li:has(> button.x) { display: flex; align-items: center; gap: 8px; padding-right: 4px; }
.panel .tally li > button.link { flex: 1; text-align: left; font: inherit; color: inherit; text-decoration: none; min-height: 36px; }
.panel .tally li > button.x { width: 36px; height: 36px; border-radius: 4px; color: var(--oxblood); font: 700 22px var(--ui); }
.panel .yesno { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.panel .yesno .chosen { outline: 3px solid var(--brass); outline-offset: 2px; }
.panel .bar { width: 100%; height: 6px; margin-top: 12px; background: rgba(35, 26, 20, .15); border-radius: 3px; overflow: hidden; }
.panel .bar i { display: block; height: 100%; background: var(--oxblood); transform-origin: left; animation: drain linear forwards; }

/* dark themes (King's Cup Extreme: the neon back room) */
.deckbox.dark { background: #0d0a12; box-shadow: 0 2px 0 #2a1a38, 0 4px 0 #22152e, 0 6px 0 #1a1024, 0 16px 26px rgba(0, 0, 0, .55), 0 0 18px rgba(255, 61, 154, .35); }
.deckbox.dark .art { border-color: #ff3d9a; box-shadow: 0 0 12px rgba(255, 61, 154, .6); }
.deckbox.dark .plate { background: #160d20; color: #ffd1ec; text-shadow: 0 0 8px #ff3d9a; }
.table.dark .panel, .table.dark .sheet { background: #120a1a; color: #f6eaff; box-shadow: 0 0 0 1.5px rgba(255, 61, 154, .55), 0 0 24px rgba(154, 107, 255, .35), 0 10px 30px rgba(0, 0, 0, .6); }
.table.dark .panel h3, .table.dark .sheet h2 { color: #ff6fb5; text-shadow: 0 0 10px rgba(255, 61, 154, .7); font-family: 'Barlow Condensed', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.table.dark .panel p, .table.dark .panel .wait, .table.dark .panel .voted, .table.dark .book li em { color: #cdb8e6; }
.table.dark .panel .prompt { background: rgba(154, 107, 255, .14); border-left-color: #5ff2ff; color: #f6eaff; }
.table.dark .panel .prompt small, .table.dark .book h4 { color: #5ff2ff; }
.table.dark .panel .result { color: #ff6fb5; }
.table.dark .panel .people button, .table.dark .book li, .table.dark .panel .tally li { background: rgba(154, 107, 255, .16); color: #f6eaff; box-shadow: inset 0 0 0 1.5px rgba(154, 107, 255, .5); }
.table.dark .panel .tally li.top, .table.dark .panel .people button.chosen { background: #ff3d9a; color: #12060e; }
.table.dark .btn { background: linear-gradient(#ff5fae, #d4237c); color: #fff; box-shadow: 0 2px 0 #7a0f45, 0 0 16px rgba(255, 61, 154, .5); }
.table.dark .btn.ink { background: linear-gradient(#a983ff, #6f42e8); box-shadow: 0 2px 0 #3d1f8f, 0 0 16px rgba(154, 107, 255, .5); }
.table.dark .btn.ghost { background: none; color: #f6eaff; box-shadow: inset 0 0 0 2px #9a6bff; }
.table.dark .toast { background: #120a1a; color: #ff6fb5; border-color: #ff3d9a; box-shadow: 0 0 22px rgba(255, 61, 154, .6); }
.table.dark .toast small { color: #f6eaff; }
.table.dark .panel input.rule { background: #1d1128; color: #f6eaff; border-color: #9a6bff; }
.table.dark .finale { background: radial-gradient(circle at 50% 40%, rgba(120, 30, 110, .85), rgba(6, 3, 10, .96)); }
.table.dark .finale h2 { text-shadow: 0 0 18px #ff3d9a, 3px 3px 0 #6f42e8; }
.table.dark .race button { background: radial-gradient(circle at 40% 35%, #ff7cc0, #e0207e 60%, #7a0f45); box-shadow: 0 6px 0 #4a0629, 0 0 26px rgba(255, 61, 154, .6); }
.table.dark .panel .bar i { background: #ff3d9a; box-shadow: 0 0 8px #ff3d9a; }
.panel h3.confession { font-size: 26px; line-height: 1.12; }
.tallychip { height: 40px; }
.finale .finalrank { list-style: none; padding: 0; margin: 0 0 18px; color: var(--paper); font: 700 20px var(--ui); }
.panel .gavel { font-size: 46px; text-align: center; margin-top: 6px; animation: gavel .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes gavel { from { transform: rotate(-60deg) translateY(-20px); opacity: 0; } }
/* Ride the Bus */
.panel .minis, .book .minis { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
img.mini { width: 40px; height: 56px; border-radius: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.panel .guesses button { min-width: 64px; font-size: 20px; }
.panel .guesses button.redpick { color: #8c1c22; }
.panel .guesses button.redpick.chosen { color: var(--paper); }
.lights { display: flex; gap: 8px; margin-top: 8px; }
.lights i { width: 18px; height: 18px; border-radius: 50%; background: rgba(35, 26, 20, .15); box-shadow: inset 0 0 0 2px rgba(35, 26, 20, .3); }
.lights i.on { background: #4caf50; box-shadow: 0 0 8px #4caf50; }
.lights i.bad { background: #c62828; box-shadow: 0 0 8px #c62828; }
.pyramid { position: absolute; right: 8px; top: calc(66px + var(--safe-t)); z-index: 4; padding: 6px; border-radius: 8px; background: rgba(12, 10, 8, .55); display: grid; gap: 4px; justify-items: center; pointer-events: none; }
.pyramid .prow { display: flex; gap: 4px; align-items: center; }
.pyramid .psips { width: 18px; font: 700 13px var(--ui); color: var(--chalk); opacity: .8; }
.pyramid img.mini { width: 26px; height: 36px; transition: transform .4s; }
.pyramid img.mini.up { transform: rotateY(360deg); }
/* Horse Race board */
.raceboard { position: absolute; left: 8px; right: 8px; bottom: calc(62px + var(--safe-b)); z-index: 4; padding: 8px 10px; border-radius: 10px; background: linear-gradient(rgba(20, 40, 16, .88), rgba(12, 26, 10, .92)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .25) inset, 0 10px 24px rgba(0, 0, 0, .5); max-width: 560px; margin: 0 auto; pointer-events: none; }
.raceboard .lbl { width: 24px; font: 700 18px var(--ui); color: #fff; text-align: center; }
.raceboard .siderow { display: grid; grid-template-columns: 24px repeat(9, 1fr); align-items: center; margin-bottom: 6px; }
.raceboard .siderow img.mini { width: 24px; height: 34px; justify-self: center; }
.raceboard .lane { display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 6px; height: 46px; position: relative; }
.raceboard .lane .track { position: relative; height: 100%; border-bottom: 2px solid rgba(255, 255, 255, .5); background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 9 - 1px), rgba(255, 255, 255, .15) calc(100% / 9 - 1px) calc(100% / 9)); }
.raceboard .lane .finish { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; background: repeating-linear-gradient(0deg, #fff 0 6px, #111 6px 12px); }
.raceboard img.horse { position: absolute; bottom: 2px; width: 34px; height: 46px; object-fit: cover; border-radius: 3px; box-shadow: 0 3px 6px rgba(0, 0, 0, .5); transition: left .7s cubic-bezier(.3, 1.5, .5, 1); }
.raceboard .bettors { position: absolute; right: 14px; top: 2px; font: 600 12px var(--ui); color: #e8f5d0; opacity: .85; pointer-events: none; }
.raceboard .lane.won .track { background-color: rgba(255, 215, 90, .25); }
.panel .people.suits button { min-width: 110px; }
.howto .howtext p { margin: 10px 0 0; font: 500 17px/1.3 var(--ui); color: #3b2c21; }

/* the TV: watch-only table, bigger type for the sofa, no controls */
.table.tv .back, .table.tv .corner, .table.tv .hint, .table.tv .hand { display: none; }
.table.tv .panel button, .table.tv .panel input, .table.tv .panel .actions, .table.tv .finale .actions { display: none; }
.table.tv .panel { font-size: 1.35em; max-width: 46vw; }
.table.tv .toast { font-size: 1.6em; }
.table.tv .lennycap { font-size: 1.5em; max-width: 50vw; }
.table.tv .raceboard, .table.tv .pyramid { transform: scale(1.35); transform-origin: top center; }
.tvwait { display: grid; place-content: center; justify-items: center; gap: 18px; text-align: center; color: #f3e6cc; }
.tvwait .tvcode { font: 400 min(22vw, 220px)/1 "Alfa Slab One", serif; letter-spacing: .08em; color: #e7c27a; }
.tvwait .tvhow { font: 700 32px var(--ui); margin: 0; }
.tvwait .tvnote { opacity: .7; font-size: 20px; margin: 0; }
.tvwait .tvsoundbtn:focus { outline: 4px solid #e7c27a; }