/* PUFFBOX! — puffy, bright, kid-friendly. TV scales with vw; phones use px. */
:root {
  --ink: #fff;
  --bg1: #2b1055;
  --bg2: #4b2a9a;
  --card: rgba(255, 255, 255, .12);
  --card2: rgba(255, 255, 255, .2);
  --sun: #ffb703;
  --orange: #fb8500;
  --good: #7CFC9a;
  --bad: #ff8a8a;
  --o0: #e63946; --o1: #3a86ff; --o2: #f5b700; --o3: #2ec27e;
  --font: "Avenir Next Rounded", "Nunito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-weight: 700;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 12%, rgba(255,255,255,.10) 0 9%, transparent 9.2%),
    radial-gradient(circle at 22% 14%, rgba(255,255,255,.10) 0 7%, transparent 7.2%),
    radial-gradient(circle at 84% 82%, rgba(255,255,255,.08) 0 10%, transparent 10.2%),
    radial-gradient(circle at 92% 86%, rgba(255,255,255,.08) 0 6%, transparent 6.2%),
    linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  overflow-x: hidden;
}
body.tv { font-size: clamp(14px, 1.8vw, 42px); overflow: hidden; }
body.phone { font-size: 17px; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
#app { min-height: 100%; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 2.2em; line-height: 1.1; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.1em; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; }
.muted { opacity: .72; font-weight: 600; }
.good { color: var(--good); }
.bad h2 { color: var(--bad); }
.err { background: #ff4d6d; padding: .5em .8em; border-radius: 12px; }
.dim { opacity: .75; }

#offline {
  display: none; position: fixed; top: 0; left: 0; right: 0; z-index: 99; text-align: center;
  padding: .4em; background: #ff4d6d; font-size: .9em;
}
.toast {
  position: fixed; left: 50%; bottom: 8%; transform: translateX(-50%); z-index: 98;
  background: #fff; color: #2b1055; padding: .6em 1.1em; border-radius: 999px; max-width: 90vw;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: pop .25s ease-out;
}
@keyframes pop { from { transform: translateX(-50%) scale(.8); opacity: 0; } }

.center { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6em; text-align: center; padding: 1.2em; }
.stack { display: flex; flex-direction: column; gap: .8em; padding: 1em; max-width: 520px; margin: 0 auto; }
.stack.tight { gap: .5em; padding: .6em; }
.emoji-big { font-size: 4.5em; line-height: 1; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-.12em); } }
.bigcount { font-size: 6em; line-height: 1; color: var(--sun); }
.bigword { font-size: 3.6em; color: var(--sun); }

/* logo */
.logo { display: flex; align-items: center; gap: .3em; font-size: 2.6em; letter-spacing: .02em; justify-content: center; text-shadow: 0 .06em 0 rgba(0,0,0,.25); }
.logo img { width: 1.15em; height: 1.15em; filter: drop-shadow(0 .05em .08em rgba(0,0,0,.35)); }
.logo span { color: var(--sun); }
.tagline { opacity: .8; margin-top: -.2em; text-align: center; font-weight: 600; }

.logo-img { display: block; width: 100%; max-width: 26em; margin: 0 auto; filter: drop-shadow(0 .08em .16em rgba(0,0,0,.35)); }
.phone .logo-img { max-width: 340px; }

/* shared pieces */
.chip {
  display: inline-flex; align-items: center; gap: .45em; padding: .3em .8em .3em .4em; border-radius: 999px;
  background: var(--c, #888); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.25);
  box-shadow: 0 .12em 0 rgba(0,0,0,.25); align-self: center;
}
.chip .em { font-size: 1.4em; background: rgba(255,255,255,.3); border-radius: 50%; width: 1.6em; height: 1.6em; display: grid; place-items: center; }
.chip b { background: rgba(0,0,0,.25); padding: 0 .5em; border-radius: 999px; }
.chip.off { opacity: .4; }
.big-btn {
  background: linear-gradient(var(--sun), var(--orange)); color: #3a1c00; border-radius: 18px;
  padding: .75em 1em; font-size: 1.15em; box-shadow: 0 .2em 0 #b35f00; width: 100%;
}
.big-btn:active { transform: translateY(.12em); box-shadow: 0 .08em 0 #b35f00; }
.big-btn:disabled { opacity: .45; }
.link-btn { background: none; text-decoration: underline; opacity: .8; padding: .6em; }
.game-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.1em; }
.secs { background: rgba(0,0,0,.3); border-radius: 999px; padding: 0 .7em; min-width: 2em; text-align: center; }
.bar { height: .6em; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; margin: .4em 0; }
.bar > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--sun), var(--orange)); border-radius: 999px; }
.hint { font-size: 2.2em; letter-spacing: .12em; text-align: center; font-family: ui-monospace, Menlo, monospace; }
.theword { color: var(--sun); }

/* option tiles (trivia) */
.opt {
  display: flex; align-items: center; gap: .6em; padding: .7em .9em; border-radius: 20px; color: #fff;
  box-shadow: 0 .14em 0 rgba(0,0,0,.28); text-align: left; position: relative;
}
.opt .shape { font-size: 1.3em; opacity: .9; width: 1.2em; text-align: center; }
.opt.o0 { background: var(--o0); } .opt.o1 { background: var(--o1); }
.opt.o2 { background: var(--o2); color: #3a2a00; } .opt.o3 { background: var(--o3); }
.opt.wrong { opacity: .3; }
.opt.right { outline: .18em solid #fff; transform: scale(1.03); }
.opt .cnt { margin-left: auto; background: rgba(0,0,0,.3); color: #fff; border-radius: 999px; padding: 0 .6em; }
.opts4 { display: grid; grid-template-columns: 1fr 1fr; gap: .7em; }
.opts4 .opt { min-height: 24vh; flex-direction: column; justify-content: center; text-align: center; font-size: 1.05em; }
.opts4 .opt:active { transform: scale(.97); }

/* results rows */
.reslist { display: flex; flex-direction: column; gap: .4em; width: min(34em, 92vw); }
.res {
  display: flex; align-items: center; gap: .6em; padding: .35em .9em .35em .5em; border-radius: 999px;
  background: var(--card); border-left: .5em solid var(--c, #fff);
}
.res .em { font-size: 1.3em; }
.res .nm { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res .sub { opacity: .7; font-weight: 600; }
.res .rank { width: 1.8em; text-align: center; }
.res.ok b { color: var(--good); }
.res.no b { opacity: .6; }
.res.first { background: rgba(255, 183, 3, .3); }

/* ---------- TV ---------- */
.lobby { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2em; height: 100vh; padding: 1.5em 2.2em; align-items: center; font-size: min(1.4vw, 1.9vh); }
.lobby-left { display: flex; flex-direction: column; gap: 1.2em; }
.join-card { display: flex; gap: 1.4em; align-items: center; background: var(--card); border-radius: 28px; padding: 1.1em; }
.qr { background: #fff; border-radius: 16px; padding: .3em; width: 9em; height: 9em; flex: none; }
.qr svg { width: 100%; height: 100%; display: block; }
.small { opacity: .7; font-weight: 600; font-size: .8em; }
.url { font-size: 1.1em; word-break: break-all; }
.code { font-size: 3.4em; letter-spacing: .12em; color: var(--sun); line-height: 1.1; }
.locked { text-align: center; opacity: .85; }
.lobby-right { display: flex; flex-direction: column; gap: .8em; }
.players { display: flex; flex-wrap: wrap; gap: .5em; min-height: 3em; }
.players .chip { align-self: auto; font-size: 1.05em; }
.gamelist { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.game-tile { display: flex; gap: .6em; align-items: center; background: var(--card); border-radius: 18px; padding: .5em .7em; }
.game-tile .gi { font-size: 1.8em; }
.game-tile small { display: block; font-weight: 600; opacity: .7; font-size: .6em; line-height: 1.2; }

.screen { padding: 1.6em 2.4em; height: 100vh; display: flex; flex-direction: column; gap: .5em; }
.screen.split { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2em; }
.question { font-size: 2.4em; text-align: center; margin: .5em 0 .6em; }
.screen .opts { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.screen .opt { font-size: 1.3em; padding: 1em 1.2em; }
.progress { text-align: center; opacity: .75; margin-top: auto; }
.side { background: var(--card); border-radius: 24px; padding: 1em; display: flex; flex-direction: column; gap: .4em; align-content: start; }
.side h2 { margin-bottom: .3em; }

.draw-wrap { display: grid; grid-template-columns: 1fr 17em; gap: 1.5em; height: 100vh; padding: 1.2em 2em; }
.draw-main { display: flex; flex-direction: column; gap: .3em; min-height: 0; }
.draw-main canvas { background: #fff; border-radius: 22px; width: 100%; max-height: calc(100vh - 11em); aspect-ratio: 4/3; object-fit: contain; align-self: center; box-shadow: 0 .2em 0 rgba(0,0,0,.25); }
.feed { background: var(--card); border-radius: 24px; padding: .8em; display: flex; flex-direction: column; gap: .35em; overflow: hidden; align-content: start; font-size: .8em; }
.feed-item { background: rgba(255,255,255,.12); padding: .35em .7em; border-radius: 14px; animation: pop2 .25s ease-out; word-break: break-word; }
@keyframes pop2 { from { transform: translateY(.6em); opacity: 0; } }

.tap-rows { display: flex; flex-direction: column; gap: .7em; margin-top: 1em; }
.tap-row { display: flex; align-items: center; gap: .6em; font-size: 1.1em; }
.tap-row .nm { width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tap-row .em { font-size: 1.5em; }
.tap-row .track { flex: 1; height: 1.6em; background: rgba(255,255,255,.15); border-radius: 999px; overflow: hidden; }
.tap-row .track i { display: block; height: 100%; width: 0; background: var(--c); border-radius: 999px; transition: width .25s linear; }
.tap-row b { width: 2.6em; text-align: right; }

/* ---------- phone ---------- */
.join { display: flex; flex-direction: column; gap: 1em; padding: 1.4em; max-width: 420px; margin: 0 auto; min-height: 100vh; justify-content: center; }
.join .logo { font-size: 2em; }
.join label { display: flex; flex-direction: column; gap: .3em; opacity: .95; }
.join input, .guess input {
  background: #fff; color: #2b1055; border: 0; border-radius: 16px; padding: .7em .9em; font-size: 1.2em; font-weight: 800; width: 100%;
  -webkit-user-select: text; user-select: text;
}
#rc { text-transform: uppercase; letter-spacing: .3em; text-align: center; }
.gbtn { display: flex; gap: .8em; align-items: center; text-align: left; background: var(--card2); border-radius: 20px; padding: .7em .9em; box-shadow: 0 .14em 0 rgba(0,0,0,.25); }
.gbtn:active { transform: translateY(.1em); }
.gbtn .gi { font-size: 2em; }
.gbtn small { display: block; font-weight: 600; opacity: .75; font-size: .75em; line-height: 1.25; }
.picks { display: flex; flex-direction: column; gap: .5em; }
.pick { display: flex; align-items: center; gap: .6em; padding: .6em .9em; border-radius: 16px; background: var(--card); border: .15em solid transparent; text-align: left; }
.pick.on { background: var(--c); border-color: #fff; }
.pick .em { font-size: 1.5em; }
.word { text-transform: capitalize; }
.guess { display: flex; flex-direction: column; gap: .6em; }
.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

#pcv { width: 100%; aspect-ratio: 4/3; background: #fff; border-radius: 16px; touch-action: none; display: block; }
.tools { display: flex; flex-direction: column; gap: .5em; }
.swatches { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.sw { aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); padding: 0; }
.sw.on { border-color: #fff; transform: scale(1.2); box-shadow: 0 0 0 2px var(--sun); }
.sizes { display: flex; gap: .5em; align-items: center; }
.sz { width: 44px; height: 44px; border-radius: 12px; background: var(--card); display: grid; place-items: center; }
.sz.on { background: var(--card2); box-shadow: 0 0 0 2px var(--sun); }
.sz i { display: block; background: #fff; border-radius: 50%; }
.clear { margin-left: auto; width: 44px; height: 44px; border-radius: 12px; background: var(--card); font-size: 1.3em; }

.tapwrap { display: flex; flex-direction: column; gap: .5em; padding: .8em; height: 100vh; }
.tapcount { text-align: center; font-size: 3.2em; line-height: 1; color: var(--sun); }
.tapbtn {
  flex: 1; border-radius: 40px; font-size: 3em; color: #fff; touch-action: manipulation;
  background: radial-gradient(circle at 35% 30%, #ff8fa3, #e63946 60%, #b3202c); box-shadow: 0 .12em 0 #7d1119;
}
.tapbtn.hit { transform: scale(.97); filter: brightness(1.15); }

/* ---------- board games ---------- */
.board-screen { align-items: center; }
.board-title { text-align: center; }
.duel-top { display: flex; flex-direction: column; align-items: center; gap: .4em; width: 100%; }
.duel-vs { display: flex; align-items: center; justify-content: center; gap: .6em; flex-wrap: wrap; }
.vs { opacity: .6; }
.duel-p { display: flex; align-items: center; gap: .4em; padding: .25em .8em; border-radius: 999px; background: var(--card); border: .15em solid transparent; }
.duel-p .dot { width: 1em; height: 1em; border-radius: 50%; background: var(--pc); box-shadow: inset 0 -.1em 0 rgba(0,0,0,.25); }
.duel-p.active { border-color: #fff; background: var(--card2); }
.duel-p.won { background: rgba(255,183,3,.35); border-color: var(--sun); }
.banner { padding: .25em 1em; border-radius: 999px; background: var(--card); }
.banner.mine { background: var(--sun); color: #3a1c00; animation: bob 1.4s ease-in-out infinite; }
.banner.win { background: var(--sun); color: #3a1c00; font-size: 1.2em; }
.banner.dim { background: transparent; }

.board-wrap { margin: .4em auto; width: min(94vw, 62vh); }
.tv .board-wrap { width: min(60vh, 56vw); }
.ttt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; aspect-ratio: 1; background: transparent; }
.ttt .cell { background: var(--card2); border-radius: 18px; display: grid; place-items: center; font-size: 5em; line-height: 1; }
.tv .ttt .cell { font-size: 6em; }
.ttt .cell.tap { cursor: pointer; background: rgba(255,255,255,.3); }
.ttt .cell.win { background: rgba(255,183,3,.45); animation: bob 1s ease-in-out infinite; }

.c4 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2%; background: #1d4ed8; padding: 2.5%; border-radius: 22px; box-shadow: 0 .2em 0 #12327f; aspect-ratio: 7/6.2; }
.c4col { display: grid; grid-template-rows: repeat(6, 1fr); gap: 2%; border-radius: 999px; }
.c4col.tap { background: rgba(255,255,255,.14); cursor: pointer; }
.disc { border-radius: 50%; background: #0b1f5e; aspect-ratio: 1; box-shadow: inset 0 .08em .15em rgba(0,0,0,.45); }
.disc.last { animation: drop .45s ease-out; }
.disc.win { outline: .14em solid #fff; animation: bob 1s ease-in-out infinite; }
@keyframes drop { from { transform: translateY(-300%); } }

.ck { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; border-radius: 14px; overflow: hidden; box-shadow: 0 .2em 0 rgba(0,0,0,.3); }
.sq { display: grid; place-items: center; position: relative; }
.sq.light { background: #f3e2c2; }
.sq.dark { background: #8b5a2b; }
.sq.last { background: #a8742f; }
.sq.movable { box-shadow: inset 0 0 0 .18em rgba(255,255,255,.7); cursor: pointer; }
.sq.sel { box-shadow: inset 0 0 0 .22em var(--sun); background: #b8803a; }
.sq.target { background: #3f8f5a; cursor: pointer; }
.hint-dot { width: 28%; height: 28%; border-radius: 50%; background: rgba(255,255,255,.7); }
.pc {
  width: 78%; height: 78%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), var(--pc) 45%);
  border: .12em solid rgba(0,0,0,.25); box-shadow: 0 .1em 0 rgba(0,0,0,.4); display: grid; place-items: center; color: #fff6c0; font-size: 1.4em; line-height: 1;
}
.pc.king { box-shadow: 0 .1em 0 rgba(0,0,0,.4), inset 0 0 0 .14em #ffe066; }

/* ---------- more games ---------- */
.question.emoji-q { font-size: 5em; letter-spacing: .1em; }
.blank { display: inline-block; min-width: 2.5em; border-bottom: .12em solid var(--sun); color: transparent; line-height: .8; }
.prompt-big { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .5em; padding: 0 5%; }
.prompt-big h1 { font-size: 2.8em; }
.cat { margin-top: .8em; opacity: .85; }
.center-txt { text-align: center; }

.vs-tiles { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1em; align-items: stretch; margin: .6em 0; }
.vs-mid { align-self: center; font-size: 1.4em; opacity: .8; }
.answer-tile { border-radius: 24px; padding: 1.2em; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .6em; text-align: center; font-size: 1.5em; box-shadow: 0 .14em 0 rgba(0,0,0,.28); min-height: 5em; word-break: break-word; }
.answer-tile.a0 { background: var(--o0); }
.answer-tile.a1 { background: var(--o1); }
.answer-tile.winner { outline: .15em solid #fff; transform: scale(1.04); }
.answer-tile.loser { opacity: .45; }
.answer-tile .votes { font-size: .9em; }
.answer-tile .by { display: flex; gap: .6em; align-items: center; font-size: .6em; }
.who { background: rgba(0,0,0,.25); padding: .15em .7em .15em .3em; border-radius: 999px; display: inline-flex; gap: .3em; align-items: center; }
.clash { text-align: center; font-size: 1.6em; color: var(--sun); animation: bob 1s ease-in-out infinite; }

.reslist.wide { width: min(46em, 94vw); }
.bluff-row { border-radius: 20px; flex-wrap: wrap; }
.bluff-row .nm { flex: 1 1 40%; font-size: 1.2em; }
.voters { display: flex; gap: .15em; font-size: 1.3em; }

.faces { display: flex; flex-wrap: wrap; justify-content: center; gap: .6em; }
.face { display: inline-flex; align-items: center; gap: .4em; background: var(--c); padding: .3em .9em .3em .4em; border-radius: 999px; box-shadow: 0 .12em 0 rgba(0,0,0,.25); }
.face .em { font-size: 1.5em; }
.mlt-row { display: flex; align-items: center; gap: .6em; padding: .3em .8em; background: var(--card); border-radius: 999px; }
.mlt-row .em { font-size: 1.5em; }
.mlt-row .nm { width: 6em; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlt-row .track { flex: 1; height: 1.2em; background: rgba(255,255,255,.12); border-radius: 999px; overflow: hidden; }
.mlt-row .track i { display: block; height: 100%; background: var(--c); border-radius: 999px; }
.mlt-row.winner { background: rgba(255,183,3,.3); }

/* phone: write + vote */
.witem { background: var(--card); border-radius: 20px; padding: .8em; display: flex; flex-direction: column; gap: .6em; }
.wprompt { font-size: 1.1em; }
.wrow { display: flex; gap: .5em; }
.wrow input { flex: 1; min-width: 0; background: #fff; color: #2b1055; border: 0; border-radius: 14px; padding: .65em .8em; font-size: 1.05em; font-weight: 800; -webkit-user-select: text; user-select: text; }
.send { background: linear-gradient(var(--sun), var(--orange)); color: #3a1c00; border-radius: 14px; padding: 0 1em; font-weight: 800; }
.sentok { color: var(--good); font-weight: 800; padding: .3em 0; }
.vtitle { text-align: center; }
.vlist { display: flex; flex-direction: column; gap: .6em; }
.vbtn { display: flex; align-items: center; gap: .7em; justify-content: center; padding: .9em 1em; border-radius: 18px; color: #fff; font-size: 1.1em; box-shadow: 0 .14em 0 rgba(0,0,0,.28); word-break: break-word; }
.vbtn.o0 { background: var(--o0); } .vbtn.o1 { background: var(--o1); }
.vbtn.o2 { background: var(--o2); color: #3a2a00; } .vbtn.o3 { background: var(--o3); }
.vbtn:active { transform: translateY(.1em); }
.vbtn .em { font-size: 1.5em; }

@media (max-height: 800px) { .tv .game-tile small { display: none; } }

/* no-TV rooms */
.or { text-align: center; opacity: .6; }
.big-btn.alt { background: var(--card2); color: #fff; box-shadow: 0 .2em 0 rgba(0,0,0,.3); }
.invite { display: flex; flex-direction: column; align-items: center; gap: .3em; background: var(--card); border-radius: 22px; padding: .8em; }
.invite .qr { width: 9em; height: 9em; }
.invite .code { font-size: 2.6em; letter-spacing: .12em; color: var(--sun); line-height: 1.1; }
.invite .url { font-size: 1em; }
.phone .qr { background: #fff; border-radius: 14px; padding: .25em; }
.phone .qr svg { width: 100%; height: 100%; display: block; }

.invite-actions { display: flex; gap: .5em; width: 100%; }
.invite-actions .big-btn { flex: 1; font-size: 1em; padding: .65em .4em; text-align: center; text-decoration: none; display: block; }

/* scripture / source reference */
.ref { text-align: center; margin-top: .6em; padding: .3em .9em; background: rgba(255,255,255,.14); border-radius: 999px; display: inline-block; align-self: center; font-weight: 700; }

/* more board games */
.scoreline { display: flex; gap: .5em; font-size: 1.6em; line-height: 1; }
.scoreline span { opacity: .5; }

.rv { display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1; background: #1b7a4a; border-radius: 14px; padding: 1.5%; gap: 1%; box-shadow: 0 .2em 0 #0e4a2c; }
.rsq { background: #23915a; border-radius: 6px; display: grid; place-items: center; }
.rsq.last { box-shadow: inset 0 0 0 .14em var(--sun); }
.rsq.tap { cursor: pointer; background: #2aa86a; }
.rdisc { width: 82%; height: 82%; border-radius: 50%; border: .08em solid rgba(0,0,0,.3); box-shadow: 0 .08em 0 rgba(0,0,0,.35); }
.rsq .hint-dot { background: rgba(255,255,255,.55); }

.mancala { display: grid; grid-template-columns: 1.15fr repeat(6, 1fr) 1.15fr; grid-template-rows: 1fr 1fr; gap: 2.5%; background: #8b5a2b; border-radius: 22px; padding: 3%; aspect-ratio: 8/3.4; box-shadow: 0 .2em 0 #5c3a17; }
.mancala > .store { grid-row: 1 / 3; }
.pit, .store { background: #5c3a17; border-radius: 999px; box-shadow: inset 0 .12em .3em rgba(0,0,0,.55); border: .12em solid var(--pc); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pit b, .store b { position: relative; z-index: 1; font-size: 1.3em; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.pit.tap { cursor: pointer; background: #7a4e22; box-shadow: inset 0 0 0 .14em #fff, inset 0 .12em .3em rgba(0,0,0,.4); }
.pit.last, .store.last { outline: .12em solid var(--sun); }
.stones { position: absolute; inset: 14%; display: flex; flex-wrap: wrap; gap: 6%; align-content: center; justify-content: center; opacity: .75; }
.stones i { width: 22%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #ffd166 60%, #c98a1c); }
.store .stones i { width: 28%; }

.dots { width: 100%; display: block; background: var(--card); border-radius: 18px; }
.dots .hit { fill: transparent; cursor: pointer; }
.dots .hit:hover { fill: rgba(255,255,255,.35); }
.dots .lastline { filter: drop-shadow(0 0 1.5px #fff); }

.pig { display: flex; flex-direction: column; align-items: center; gap: .6em; width: 100%; }
.pig-scores { display: flex; gap: 1em; }
.pig-score { background: var(--card); border-radius: 18px; padding: .4em 1.2em; text-align: center; border: .15em solid transparent; min-width: 5.5em; }
.pig-score b { display: block; font-size: 2.2em; line-height: 1.1; color: var(--pc); filter: brightness(1.4); }
.pig-score small { opacity: .7; }
.pig-score.on { border-color: #fff; background: var(--card2); }
.die { font-size: 7em; line-height: 1; background: #fff; color: #222; border-radius: 22px; width: 1.15em; height: 1.15em; display: grid; place-items: center; box-shadow: 0 .06em 0 rgba(0,0,0,.3); animation: tumble .5s ease-out; }
.die.bust { background: #ffe0e0; color: #e63946; }
@keyframes tumble { from { transform: rotate(-200deg) scale(.6); } }
.pig-msg { font-size: 1.15em; min-height: 1.4em; text-align: center; }
.pig-btns { display: flex; gap: .6em; width: 100%; }
.pig-btns .big-btn { flex: 1; }
.tv .pig .die { font-size: 8em; }
.tv .board-wrap.game-pig, .tv .board-wrap.game-mancala, .tv .board-wrap.game-dots { width: min(70vh, 62vw); }
.tv .board-wrap.game-mancala { width: min(110vh, 80vw); }
.board-wrap.game-mancala { width: min(98vw, 100vh); }
.board-wrap.game-pig { width: 100%; max-width: 480px; }

/* lobby sections and player-count badges */
.cat small { display: block; font-weight: 600; opacity: .65; font-size: .7em; }
.gbtn .pcount { margin-left: auto; flex: none; background: rgba(0,0,0,.28); border-radius: 999px; padding: .15em .7em; font-size: .72em; white-space: nowrap; }
.gbtn .pcount.two { background: var(--o1); }
.tv .gamelist { grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: .35em; }
.tv .game-tile { padding: .3em .6em; }
.tv .game-tile .gi { font-size: 1.5em; }
.tv .game-tile small { display: block; }
.tv .lobby-right { gap: .35em; }
.tv .lobby-right .cat { margin-top: .5em; }

/* TV lobby: the games list must always fit, so size it by screen height too */
.tv .lobby-right { max-width: 100%; }
.tv .lobby .game-tile { padding: .22em .55em; }
.tv .lobby .players { min-height: 0; }

/* TV music hint */
.music-hud { position: fixed; left: 1.2em; bottom: 1em; background: rgba(0,0,0,.5); color: #fff; padding: .4em 1em; border-radius: 999px; font-size: .7em; opacity: 0; transition: opacity .4s; pointer-events: none; z-index: 50; max-width: 70vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-hud.show { opacity: 1; }