/* ===== Gameshow shared styles ===== */
:root {
  --bg: #0f1226;
  --bg2: #1a1f3d;
  --panel: #232a52;
  --ink: #f4f6ff;
  --muted: #9aa3d0;
  --accent: #ffd23f;
  --good: #2ecc71;
  --bad: #e74c3c;
  --a: #e84855;  /* red    */
  --b: #2d76f7;  /* blue   */
  --c: #f4b400;  /* yellow */
  --d: #1aa55a;  /* green  */
  --radius: 16px;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 800px at 70% -10%, #2a2f63 0%, var(--bg) 55%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 20px; }
.center { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }

h1, h2, h3 { margin: 0 0 .4em; }
.muted { color: var(--muted); }
.big { font-size: clamp(28px, 6vw, 64px); font-weight: 800; line-height: 1.1; }
.huge { font-size: clamp(40px, 12vw, 160px); font-weight: 900; }

.card {
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  width: 100%;
}

input[type=text] {
  width: 100%; padding: 16px; font-size: 20px; border-radius: 12px;
  border: 2px solid #3a4280; background: #161a36; color: var(--ink); outline: none;
}
input[type=text]:focus { border-color: var(--accent); }

button {
  font-family: inherit; cursor: pointer; border: none; border-radius: 12px;
  padding: 16px 20px; font-size: 18px; font-weight: 700; color: #fff;
  background: #3a4280; transition: transform .05s ease, filter .15s ease;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #1a1530; }
.btn-ghost { background: transparent; border: 2px solid #3a4280; }
.btn-danger { background: var(--bad); }
.btn-block { width: 100%; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > * { flex: 1; }

.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: #2a3160; color: var(--muted); font-size: 14px; font-weight: 700; }
.code { letter-spacing: .15em; font-weight: 900; color: var(--accent); }

/* ===== Answer grid (player + TV) ===== */
.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.answers.cols1 { grid-template-columns: 1fr; }
.ans {
  min-height: 84px; display: flex; align-items: center; gap: 14px;
  font-size: 20px; text-align: left; color: #fff; border-radius: 14px; padding: 18px;
}
.ans .shape { font-size: 26px; }
.ans.a { background: var(--a); }
.ans.b { background: var(--b); }
.ans.c { background: var(--c); color: #2a2300; }
.ans.d { background: var(--d); }
.ans.dim { opacity: .28; }
.ans.correct { outline: 5px solid #fff; box-shadow: 0 0 0 5px var(--good); }
.ans.chosen { outline: 5px solid var(--accent); }

/* ===== Variable-count answer tiles (2..20 options) ===== */
.answers.tiles { display: grid; gap: 10px; margin-top: 16px; }
.tile {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 14px 16px; border-radius: 14px; color: #fff;
  font-size: 18px; text-align: center; border: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
button.tile { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.tile:disabled { cursor: default; }
.tile .ttext { font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.tile .tcount {                       /* vote tally badge, corner-pinned so text stays centered */
  position: absolute; top: 6px; right: 8px;
  font-size: 14px; font-weight: 900; background: rgba(0,0,0,.3);
  padding: 1px 8px; border-radius: 9px;
}
.tile.dim { opacity: .28; }
.tile.has-pile { flex-direction: column; gap: 12px; min-height: auto; padding: 16px 14px; }
.pile { display: flex; flex-wrap: wrap; justify-content: center; padding-left: 14px; }
.pile .avatar { margin-left: -14px; border: 3px solid rgba(0,0,0,.4); margin-bottom: 4px; }
.pile-more { align-self: center; margin-left: 6px; font-weight: 900; font-size: 22px; }
.tv .answers.tiles .tile.has-pile { min-height: auto; }
/* Larger pile faces (bigger on the TV) */
.avatar.pileav { width: 40px; height: 40px; font-size: 16px; }
.tv .avatar.pileav { width: 72px; height: 72px; font-size: 30px; }
/* Drop in from the top of the screen and settle into the pile (staggered) */
.pile.drop .avatar { animation: drop .85s cubic-bezier(.2,1.25,.4,1) both; }
@keyframes drop {
  0%   { transform: translateY(-95vh) rotate(-12deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}
.tile.correct { outline: 4px solid #fff; box-shadow: 0 0 0 4px var(--good); opacity: 1; }
.tile.chosen { outline: 4px solid var(--accent); }
.tv .answers.tiles .tile { min-height: 10vh; font-size: clamp(20px, 2.2vw, 36px); }

/* ===== Avatars ===== */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; object-fit: cover; flex: none;
  background: #3a4280; color: #fff; font-weight: 900;
  width: 40px; height: 40px; overflow: hidden;
}
.avatar.ph { background: linear-gradient(135deg, #5b6bd6, #9b59b6); }
.avatar.xs { width: 32px; height: 32px; font-size: 13px; }
.avatar.sm { width: 34px; height: 34px; font-size: 16px; }
.avatar.md { width: 52px; height: 52px; font-size: 22px; }
.avatar.lg { width: 104px; height: 104px; font-size: 44px; }
.avatar.xl { width: 160px; height: 160px; font-size: 72px; border: 4px solid var(--accent); margin-bottom: 10px; }
.avatar-pick { background: transparent; padding: 0; border: none; cursor: pointer; }
.avatar-pick:hover { filter: brightness(1.1); }

/* ===== Timer ===== */
.timerbar { height: 14px; background: #161a36; border-radius: 999px; overflow: hidden; margin: 14px 0; }
.timerbar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--good), var(--accent), var(--bad)); width: 100%; }
.timer-num { font-weight: 900; font-size: clamp(40px, 10vw, 120px); }

/* ===== Leaderboard ===== */
.lb { list-style: none; padding: 0; margin: 16px 0 0; width: 100%; }
.lb li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: var(--panel); border-radius: 12px; margin-bottom: 8px; font-size: clamp(18px,2.4vw,26px); }
.lb .rank { font-weight: 900; width: 1.6em; text-align: right; color: var(--accent); }
.lb .nm { flex: 1; font-weight: 700; }
.lb .sc { font-weight: 900; }
.lb li.top1 { background: linear-gradient(90deg, #4a3b00, var(--panel)); }
.lb li.me { outline: 2px solid var(--accent); }

/* ===== Host panel ===== */
.host-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.statbox { background: var(--bg2); border-radius: 12px; padding: 14px; text-align: center; }
.statbox .n { font-size: 34px; font-weight: 900; }
.statbox .l { color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.controls button { width: 100%; margin-bottom: 10px; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.flash { padding: 10px 14px; border-radius: 10px; background: #2a3160; margin: 10px 0; }
.flash.err { background: #5a1f24; }

/* ===== Host tabs / mode cards / roster ===== */
.tabbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; border-bottom: 2px solid #2a3160; padding-bottom: 8px; }
.tabbtn { background: transparent; color: var(--muted); padding: 10px 16px; border-radius: 10px 10px 0 0; font-size: 16px; }
.tabbtn.on { background: var(--panel); color: var(--ink); }
.mode-card { transition: transform .08s ease, box-shadow .15s ease; border: 2px solid transparent; }
.mode-card:hover { transform: translateY(-3px); }
.mode-card.active { border-color: var(--accent); }

.rosterrow { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--panel); border-radius: 12px; margin-bottom: 8px; }
.rosterrow.off { opacity: .5; }
.rosterrow .nm { flex: 1; font-weight: 700; }
.rosterrow .rank { width: 1.6em; text-align: right; color: var(--accent); font-weight: 900; }
.rosterrow .code { background: #2a3160; padding: 2px 10px; border-radius: 8px; letter-spacing: .12em; }
button.rm { padding: 8px 12px; font-size: 14px; }
.fld { padding: 12px; border-radius: 10px; background: #161a36; color: #fff; border: 2px solid #3a4280; font-size: 16px; width: 100%; max-width: 320px; }
.optrow { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.optrow input[type=text] { flex: 1; padding: 12px; }
.optrow input[type=radio] { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.catsel { min-width: 0; }

.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
.modal-card { background: var(--panel); border-radius: 18px; padding: 24px; text-align: center; max-width: 360px; box-shadow: var(--shadow); }
.modal-card h2 { margin: 14px 0 6px; }
.modal-card button { margin-top: 16px; }
.modal-img { width: 300px; height: 300px; max-width: 80vw; max-height: 80vw; object-fit: cover; border-radius: 18px; display: block; }

/* ===== TV big screen ===== */
.tv { padding: 4vh 5vw; height: 100%; display: flex; flex-direction: column; }
.tv-head { display: flex; justify-content: space-between; align-items: baseline; }
.tv-q { font-size: clamp(36px, 5vw, 80px); font-weight: 900; margin: 4vh 0; }
.tv .answers .ans { min-height: 14vh; font-size: clamp(22px, 3vw, 44px); }

/* TV header pills (category + answered count) — readable from across a room */
.tv .tv-head .pill { font-size: clamp(18px, 1.8vw, 30px); padding: 8px 20px; }

/* Live "locked in" counter, pinned bottom-right on the TV */
.ansbubble {
  position: fixed; bottom: 3vh; right: 3vw; z-index: 55;
  background: var(--panel); border: 2px solid #3a4280; border-radius: 999px;
  padding: 12px 24px; font-size: clamp(18px, 1.8vw, 30px); font-weight: 700;
  box-shadow: var(--shadow);
}
.ansbubble b { color: var(--accent); }

/* "First to lock in" spotlight popup on the TV */
.first-pop { position: fixed; top: 3vh; right: 3vw; z-index: 60; animation: pop .4s cubic-bezier(.2,1.3,.4,1); }
.first-card { background: linear-gradient(160deg, #2a2350, var(--panel)); border: 4px solid var(--accent); border-radius: 20px; padding: 18px 26px; text-align: center; }
.first-card.glow { animation: glow 1.4s ease-in-out infinite; }
.first-card.glow .avatar { box-shadow: 0 0 22px 4px var(--accent); border: 3px solid #fff; }
.first-label { color: var(--accent); font-weight: 900; font-size: clamp(18px,1.6vw,26px); margin-bottom: 10px; letter-spacing: .04em; text-shadow: 0 0 12px rgba(255,210,63,.7); }
.first-name { font-weight: 900; font-size: clamp(22px,2vw,34px); margin-top: 10px; }
@keyframes pop { from { opacity: 0; transform: scale(.6) translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 18px 2px rgba(255,210,63,.55), inset 0 0 12px rgba(255,210,63,.15); transform: scale(1); }
  50%      { box-shadow: 0 0 42px 10px rgba(255,210,63,.9), inset 0 0 18px rgba(255,210,63,.3); transform: scale(1.035); }
}

/* Fastest-player splash screen */
.splash-wrap { text-align: center; }
.splash-label { color: var(--accent); font-weight: 900; letter-spacing: .08em; font-size: clamp(22px, 4vw, 60px); text-shadow: 0 0 20px rgba(255,210,63,.85); animation: pop .5s; }
.splash-name { font-weight: 900; font-size: clamp(34px, 7vw, 110px); margin-top: 2vh; }
.splash-time { color: var(--muted); font-size: clamp(18px, 3vw, 44px); margin-top: 1vh; }
.avatar.splashav { width: clamp(150px, 28vh, 340px); height: clamp(150px, 28vh, 340px); font-size: clamp(70px, 14vh, 160px); border: 6px solid var(--accent); box-shadow: 0 0 55px 12px rgba(255,210,63,.7); animation: glow 1.4s ease-in-out infinite; margin: 3vh 0; }
.confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 40; }
.confetti i { position: absolute; top: -24px; width: 11px; height: 16px; border-radius: 2px; animation: fall linear infinite; }
@keyframes fall { to { transform: translateY(112vh) rotate(900deg); } }

/* ===== Mega Connect 4 ===== */
/* Player */
.c4timer { font-variant-numeric: tabular-nums; font-weight: 900; font-size: 3rem; text-align: center; margin: 6px 0; }
.c4tokens { text-align: center; font-weight: 800; font-size: 1.15rem; margin-bottom: 10px; }
.c4tokens b { font-size: 1.6rem; color: var(--accent); }
.c4grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 8px; }
.c4col { aspect-ratio: 1/1; border: none; border-radius: 14px; font-size: 1.3rem; font-weight: 800;
  color: #fff; background: #2d76f7; box-shadow: 0 4px 0 #1b50b8; cursor: pointer; transition: transform .05s; }
.c4col:active { transform: translateY(3px); box-shadow: 0 1px 0 #1b50b8; }
.c4col:disabled { opacity: .35; box-shadow: none; cursor: default; }
.c4col .cn { display: block; font-size: .7rem; opacity: .8; font-weight: 600; }
.c4hist { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.c4chip { background: #ffffff18; border-radius: 999px; padding: 3px 10px; font-size: .85rem; font-weight: 700; }
/* TV board */
.c4-bigcount { font-size: 13vw; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1; text-align: center; }
.c4-live { display: flex; gap: 40px; margin-top: 18px; justify-content: center; }
.c4-stat { text-align: center; } .c4-stat b { display: block; font-size: 4vw; font-weight: 900; } .c4-stat span { opacity: .7; }
.c4-boardwrap { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; justify-content: center; }
.c4-board { display: grid; gap: 6px; background: #0b1f4d; padding: 12px; border-radius: 18px; box-shadow: inset 0 0 0 4px #08163a; }
.c4-bcol { display: grid; gap: 6px; }
.c4-cell { border-radius: 50%; background: #0a1a40; box-shadow: inset 0 0 0 2px #16306e; position: relative; overflow: hidden; }
.c4-cell.filled { background: #16306e; }
.c4-cell img, .c4-cell .c4-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
  transition: transform .5s cubic-bezier(.3,1.4,.5,1); }
.c4-cell .c4-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; background: #3a4cff; color: #fff; }
.c4-cell.win { box-shadow: 0 0 0 3px var(--accent), 0 0 18px var(--accent); animation: c4pulse 1s ease-in-out infinite; }
@keyframes c4pulse { 0%,100% { box-shadow: 0 0 0 3px var(--accent), 0 0 12px var(--accent); } 50% { box-shadow: 0 0 0 5px #fff0a8, 0 0 26px var(--accent); } }
.c4-lb { min-width: 300px; max-width: 32vw; }
.c4-lb h3 { font-size: 1.6rem; margin: 0 0 10px; }
.c4-lbrow { display: flex; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid #ffffff14; }
.c4-lbrow .nm { flex: 1; font-weight: 700; }
.c4-pt { font-weight: 900; color: var(--accent); } .c4-ln { opacity: .6; font-size: .85rem; }

.fade { animation: fade .35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.spin { display:inline-block; animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }

/* ===== Color Clash (wager game) ===== */
.cc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.cc-grid-tv { grid-template-columns: repeat(5, 1fr); gap: 1.2vw; }
.cc-sw {
  position: relative; border: none; border-radius: 14px; padding: 16px 12px;
  min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-weight: 800; cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15); transition: transform .06s ease, box-shadow .12s ease;
}
button.cc-sw:active { transform: scale(.97); }
.cc-sw .cc-name { font-size: 18px; }
.cc-sw .cc-tag { font-size: 12px; font-weight: 700; opacity: .85; min-height: 1em; }
.cc-sw.sel { box-shadow: 0 0 0 4px var(--accent), inset 0 0 0 2px rgba(255,255,255,.4); transform: scale(1.02); }
.cc-sw.win { box-shadow: 0 0 0 5px #fff, 0 0 30px 4px rgba(255,255,255,.5); }
.cc-sw.lose { opacity: .4; }
.tv .cc-grid-tv .cc-sw { min-height: 11vh; }
.tv .cc-grid-tv .cc-sw .cc-name { font-size: clamp(20px, 1.8vw, 34px); }
.tv .cc-grid-tv .cc-sw .cc-tag { font-size: clamp(13px, 1.1vw, 22px); }

.cc-amt { font-size: 26px; font-weight: 900; color: var(--accent); }
.cc-slider { width: 100%; margin: 14px 0 10px; accent-color: var(--accent); height: 28px; }
.cc-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-chip { background: #2a3160; padding: 10px 14px; font-size: 15px; border-radius: 10px; flex: 1; min-width: 64px; }
.cc-winner { display: inline-block; margin-top: 8px; padding: 10px 26px; border-radius: 14px; font-weight: 900; font-size: clamp(28px, 6vw, 54px); box-shadow: 0 0 24px rgba(255,255,255,.3); }
.cc-inline { display: inline-block; padding: 2px 12px; border-radius: 8px; font-weight: 800; }

/* TV play stage + canvas */
.cc-stage { position: relative; flex: 1; margin-top: 1.5vh; border-radius: 16px; overflow: hidden;
  background: radial-gradient(1000px 600px at 50% -20%, #20254d, #0c0f22); box-shadow: inset 0 0 60px rgba(0,0,0,.5); }
.cc-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cc-tvfoot { text-align: center; margin-top: 2vh; font-size: clamp(18px, 1.8vw, 30px); color: var(--muted); font-weight: 700; }
.cc-topwin { margin: 2vh 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cc-topwin .avatar { border: 4px solid var(--accent); box-shadow: 0 0 30px rgba(255,210,63,.6); }

/* Host tally list */
.cc-host-tally { margin: 10px 0; }
.cc-host-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; }
.cc-host-row.win { background: rgba(46,204,113,.18); outline: 2px solid var(--good); }
.cc-host-row .nm { flex: 1; font-weight: 700; }
.cc-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }

@media (max-width: 480px) {
  .host-grid { grid-template-columns: 1fr; }
}