/* ================= TV ================= */
.tv { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
.tv header.top { padding: 14px 0; flex: none; }
.tv .wrap { max-width: none; padding: 0 28px; }
.tv main { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 360px; gap: 22px; padding: 0 28px 24px; }

.side { display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.joinbox { padding: 20px; text-align: center; }
.joinbox h3 { margin: 0 0 10px; font-size: 1.05rem; color: var(--soft); font-weight: 600; }
.joinbox .qr { background: #fff; padding: 10px; border-radius: 14px; display: inline-block; line-height: 0; }
.joinbox .qr img, .joinbox .qr canvas { width: 150px !important; height: 150px !important; }
.joinbox .url { margin: 10px 0 6px; color: var(--soft); font-weight: 700; }
.code {
  font-family: 'Fredoka', sans-serif; font-weight: 700; letter-spacing: 0.25em;
  font-size: 2.6rem; padding: 6px 18px 6px 28px; border-radius: 16px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--line); display: inline-block;
}
.joinbox.small { padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; text-align: left; }
.joinbox.small .qr img, .joinbox.small .qr canvas { width: 92px !important; height: 92px !important; }
.joinbox.small .code { font-size: 1.7rem; padding: 4px 10px 4px 16px; }
.joinbox.small h3 { margin: 0 0 4px; }

.players { padding: 18px; flex: 1; min-height: 0; overflow: auto; }
.players h3 { margin: 0 0 12px; font-size: 1.05rem; color: var(--soft); font-weight: 600; }
.plist { display: grid; gap: 8px; }
.prow {
  display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center;
  padding: 6px 10px 6px 6px; border-radius: 14px; background: rgba(255, 255, 255, 0.04);
}
.prow .av {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(135deg, rgba(79,124,255,.5), rgba(139,92,246,.5)); border: 2px solid rgba(255,255,255,.25);
}
.prow.off { opacity: 0.45; }
.prow .nm { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .wins { color: var(--gold); font-size: 0.85rem; font-weight: 800; }
.need { font-size: 0.8rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--panel-strong); color: var(--soft); white-space: nowrap; }
.need.hot { background: var(--grad); color: #fff; animation: pulse 1s ease-in-out infinite; }
.need.warm { background: rgba(255, 197, 61, 0.2); color: var(--gold); }
@keyframes pulse { 50% { transform: scale(1.08); } }

.empty { color: var(--soft); text-align: center; padding: 20px 0; }

/* lobby setup */
.setup { padding: 28px; overflow: auto; }
.setup h1 { font-size: 3.4rem; margin: 0; line-height: 1; letter-spacing: 0.04em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.setup .sub { color: var(--soft); margin: 6px 0 22px; font-size: 1.15rem; }
.setup h2 { font-size: 1.1rem; margin: 20px 0 10px; color: var(--soft); font-weight: 600; }
.choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.choice {
  appearance: none; font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, 0.05); border: 2px solid var(--line); border-radius: 18px; padding: 14px;
  display: grid; gap: 4px; position: relative;
}
.choice .e { font-size: 1.8rem; line-height: 1; }
.choice b { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; }
.choice small { color: var(--soft); line-height: 1.3; }
.choice.on { border-color: var(--brand); background: rgba(255, 122, 61, 0.12); box-shadow: 0 0 0 4px rgba(255, 122, 61, 0.15); }
.choice .lock { position: absolute; top: 10px; right: 10px; font-size: 0.75rem; font-weight: 800; background: var(--gold); color: #3a2a00; padding: 2px 8px; border-radius: 999px; }
.setup .go { margin-top: 26px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* calling */
.stage { display: grid; grid-template-rows: auto 1fr; gap: 18px; min-height: 0; }
.caller { padding: 22px 26px; display: grid; grid-template-columns: auto 1fr auto; gap: 26px; align-items: center; }
.ball {
  width: 190px; height: 190px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 32% 26%, #ffb48f 0%, var(--brand) 40%, var(--brand2) 100%);
  box-shadow: 0 20px 50px rgba(255, 61, 127, 0.45), inset 0 -10px 30px rgba(0,0,0,.2);
  color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 700; line-height: 1;
}
.ball .l { font-size: 2.2rem; opacity: 0.9; }
.ball .n { font-size: 5.4rem; text-shadow: 0 4px 14px rgba(0,0,0,.25); }
.ball .pic { font-size: 6.2rem; }
.ball.pop { animation: pop 0.6s cubic-bezier(.2, 1.6, .4, 1); }
.ball.idle { background: rgba(255,255,255,.06); box-shadow: none; border: 3px dashed var(--line); }
@keyframes pop { from { transform: scale(0.3) rotate(-30deg); opacity: 0; } }
.callinfo h2 { margin: 0; font-size: 2.6rem; line-height: 1.1; }
.callinfo p { margin: 6px 0 0; color: var(--soft); font-size: 1.1rem; }
.recent { display: flex; gap: 10px; margin-top: 14px; }
.recent span {
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-strong); border: 1px solid var(--line); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.2rem;
}
.controls { display: grid; gap: 10px; justify-items: stretch; }
.controls .row { display: flex; gap: 8px; }

.board { padding: 18px; min-height: 0; overflow: auto; }
.board.nums { display: grid; grid-template-columns: 54px repeat(15, 1fr); gap: 6px; align-content: center; }
.board.nums .lt { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.7rem; display: grid; place-items: center;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.board.pics { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; align-content: center; }
.cell {
  aspect-ratio: 1; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.28);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(0.9rem, 1.5vw, 1.5rem);
  transition: background .3s, color .3s, transform .3s;
}
.board.pics .cell { font-size: clamp(1.4rem, 2.6vw, 2.6rem); filter: grayscale(1) opacity(.35); }
.board .cell.hit { background: linear-gradient(135deg, var(--blue), var(--purple)); color: #fff; filter: none; }
.board .cell.last { background: var(--grad); transform: scale(1.12); box-shadow: 0 6px 18px rgba(255,61,127,.5); }

/* cage spinner + ball */
.drawer { display: flex; align-items: center; gap: 4px; }
.cage { width: 260px; height: 260px; object-fit: contain; margin: -34px -14px -34px -30px; }
.cage.hidden-cage { display: none; }
.ball.wait { opacity: 0; transform: scale(.3); }
.ball.away { visibility: hidden; }

/* winner overlay */
.win {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center;
  background: rgba(8, 6, 30, 0.82); backdrop-filter: blur(6px);
}
.win[hidden] { display: none; }
.win .box { text-align: center; padding: 34px 44px; max-width: 760px; }
.win .who { font-size: 6rem; line-height: 1; }
.win h1 { font-size: 5.5rem; margin: 6px 0 0; line-height: 1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.win h2 { font-size: 2.4rem; margin: 8px 0 18px; }
.win .others { color: var(--soft); margin: 0 0 18px; font-weight: 700; }
.win .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.minicard { display: inline-grid; grid-template-columns: repeat(5, 46px); gap: 5px; margin: 0 auto 22px; }
.minicard div { height: 46px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.08);
  font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.15rem; }
.minicard .w { background: var(--grad); }
.minicard .h { background: rgba(79,124,255,.45); }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 45; overflow: hidden; }
.confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

/* TVs that are narrow (laptop split screen, tablet) */
@media (max-width: 1000px) {
  .tv { height: auto; overflow: visible; }
  .tv main { grid-template-columns: 1fr; }
  .caller { grid-template-columns: auto 1fr; }
  .controls { grid-column: 1 / -1; }
  .ball { width: 140px; height: 140px; }
  .cage { width: 150px; height: 150px; margin: -10px -6px -10px -12px; }
  .ball .n { font-size: 4rem; } .ball .pic { font-size: 4.4rem; }
  .board.pics { grid-template-columns: repeat(8, 1fr); }
}

/* ================= PHONE ================= */
.phone { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.phone header.top { padding: 12px 0; }
.phone main { flex: 1; display: flex; flex-direction: column; padding: 0 16px 20px; gap: 14px; max-width: 520px; width: 100%; margin: 0 auto; }

.joinform { padding: 22px; display: grid; gap: 16px; }
.joinform h1 { margin: 0; font-size: 1.8rem; }
.emojis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.emojis button {
  appearance: none; font-size: 1.7rem; aspect-ratio: 1; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.05); border: 2px solid var(--line);
}
.emojis button.on { border-color: var(--brand); background: rgba(255,122,61,.15); }

.waiting { padding: 28px 20px; text-align: center; }
.waiting .av { font-size: 4.5rem; line-height: 1; }
.waiting h2 { margin: 10px 0 4px; font-size: 1.7rem; }

.nowcall { padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.nowcall .mini {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--grad); font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.6rem; line-height: 1;
}
.nowcall .mini.pic { font-size: 2.2rem; }
.nowcall .mini small { display: block; font-size: 0.8rem; opacity: .9; }
.nowcall .t { font-weight: 800; }
.nowcall .t small { display: block; color: var(--soft); font-weight: 700; }

.mycard { padding: 12px; }
.mycard .head { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 6px; }
.mycard .head span { text-align: center; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.6rem;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.squares { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.sq {
  appearance: none; border: 0; cursor: pointer; aspect-ratio: 1; border-radius: 14px; position: relative;
  background: #fff; color: #1d1650; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: clamp(1.2rem, 6vw, 1.9rem);
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: transform .1s;
}
.sq.pic { font-size: clamp(1.6rem, 9vw, 2.6rem); }
.sq:active { transform: scale(.94); }
.sq.free { background: var(--grad); color: #fff; font-size: 0.9rem; font-weight: 700; }
.sq.on::after {
  content: ''; position: absolute; inset: 12%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(255,61,127,.85) 45%, rgba(255,122,61,.85));
  mix-blend-mode: multiply;
}
.sq.win::after { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.5), rgba(47,209,139,.9) 45%); }
.sq.shake { animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.bingobtn {
  font-size: 2.2rem; padding: 18px; width: 100%; letter-spacing: 0.08em;
}
.bingobtn.done, .bingobtn.done:disabled {
  opacity: 1; font-size: 1.4rem; letter-spacing: 0; background: linear-gradient(135deg, #2fd18b, #18a37a);
  box-shadow: 0 8px 22px rgba(47, 209, 139, .35);
}
.bingobtn.ready { animation: pulse 0.9s ease-in-out infinite; box-shadow: 0 0 0 6px rgba(255,61,127,.25), 0 10px 30px rgba(255,61,127,.5); }
.toggles { display: flex; justify-content: space-between; align-items: center; color: var(--soft); font-weight: 700; font-size: 0.95rem; }
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--brand); }

.result { padding: 26px 20px; text-align: center; }
.result .big { font-size: 4.5rem; line-height: 1; }
.result h2 { margin: 8px 0 4px; font-size: 2rem; }

/* grid children must be allowed to shrink, or long content pushes the page sideways */
.tv main > *, .stage > *, .side > * { min-width: 0; }
@media (max-width: 640px) {
  .tv .wrap, .tv main { padding-left: 16px; padding-right: 16px; }
  .tv #fullBtn { display: none; }
  .setup { padding: 20px; }
  .setup h1 { font-size: 2.6rem; }
  .choices { grid-template-columns: 1fr 1fr; }
  .caller { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .recent { justify-content: center; }
  .board.nums { grid-template-columns: 30px repeat(15, 1fr); gap: 3px; }
  .board.nums .lt { font-size: 1.1rem; }
  .cell { border-radius: 6px; font-size: .7rem; }
}

/* ===== Carnival bingo hall look (Kita, 2026-10-02) — artwork made in ChatGPT ===== */
.bingotv, .bingophone {
  background: linear-gradient(rgba(16, 6, 32, .45), rgba(16, 6, 32, .7)), url(/art/bingo/hall.jpg) center / cover fixed, #160a2c;
}
.bingotv .panel, .bingophone .panel {
  background: rgba(30, 12, 54, .74); border: 3px solid #ffcf4a; border-radius: 22px;
  box-shadow: 0 0 0 4px rgba(255, 170, 40, .16), 0 0 26px rgba(255, 190, 70, .25), 0 14px 40px rgba(0, 0, 0, .5);
  backdrop-filter: blur(3px);
}
.bingotv .logo.igt img { height: 62px; display: block; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .5)); }
.bingotv .setup h2 { color: #ffe08a; font-family: 'Fredoka', sans-serif; font-weight: 600; letter-spacing: .02em; }
.bingotv .setup .sub { color: #fff; font-weight: 700; }
.setup .hero { display: block; width: 100%; max-height: 230px; object-fit: cover; border-radius: 16px; margin: -6px 0 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.setup .hero + .htitle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* the card types as picture tiles */
.bingotv .choices { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.bingotv .choice { padding: 0 0 10px; overflow: hidden; background: #2b1350; border: 3px solid rgba(255, 255, 255, .14); gap: 2px; }
.bingotv .choice .dimg { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; margin-bottom: 6px; }
.bingotv .choice b, .bingotv .choice small { padding: 0 12px; }
.bingotv .choice .e { padding: 12px 12px 0; }
.bingotv .choice.on { border-color: #ffcf4a; background: #3a1966; box-shadow: 0 0 0 4px rgba(255, 207, 74, .25), 0 0 22px rgba(255, 207, 74, .45); }
.bingotv .chip.on, .bingotv .chips .on { box-shadow: 0 0 0 3px rgba(255, 207, 74, .5); }
/* the called ball: ChatGPT shiny balls for numbers, pictures for picture decks */
.ball.art { background: none; box-shadow: none; }
.ball.art .pic { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff, #ffe9f6 60%, #ffc6e4); box-shadow: 0 18px 44px rgba(255, 61, 127, .45), inset 0 -10px 24px rgba(0, 0, 0, .15); }
.ball .pic .ico { width: 74%; height: 74%; object-fit: contain; }
.nball { position: relative; width: 100%; height: 100%; display: block; }
.nball img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .45)); }
.nball .face { position: absolute; left: var(--face-x, 50%); top: var(--face-y, 50%); transform: translate(-50%, -50%);
  display: grid; justify-items: center; line-height: .9; color: #1b1036; font-family: 'Fredoka', sans-serif; font-weight: 700; }
.nball .face b { font-size: .34em; } .nball .face i { font-style: normal; font-size: .62em; }
.nball.big { font-size: 150px; } .nball.small { font-size: 54px; }
.recent span { overflow: hidden; }
.recent span .nball, .recent span .ico { width: 100%; height: 100%; object-fit: contain; }
.recent span .ico { padding: 6px; }
.ico { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.board.pics .cell { padding: 6%; }
.board .cell.hit .ico, .board .cell.last .ico { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.minicard div .ico { width: 80%; height: 80%; }
/* phone: the season's card design with the grid inside its empty middle */
.mycard.framed {
  position: relative; border: 0; box-shadow: none; background: center / 100% 100% no-repeat; border-radius: 18px;
  aspect-ratio: var(--fa); box-sizing: border-box; display: flex; flex-direction: column;
  padding: calc(var(--fy) * 100% / var(--fa)) calc((1 - var(--fx) - var(--fw)) * 100%) calc((1 - var(--fy) - var(--fh)) * 100% / var(--fa)) calc(var(--fx) * 100%);
}
.mycard.framed .head { margin-bottom: 4px; }
.mycard.framed .head span { background: none; color: #c4134e; -webkit-text-fill-color: currentColor; text-shadow: 0 2px 0 #fff; }
.mycard.framed .squares { flex: 1; min-height: 0; grid-auto-rows: 1fr; gap: 4px; }
.mycard.framed .sq { aspect-ratio: auto; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(60, 20, 90, .14); }
.nowcall .mini .ico { width: 78%; height: 78%; }
.nowcall .mini.pic { background: radial-gradient(circle at 34% 28%, #fff, #ffe0f2); }
.nowcall .mini .nball.small { font-size: 64px; }
.sq.pic .ico { width: 82%; height: 82%; }
.mycard { container-type: inline-size; }
.mycard.framed .plaque { position: absolute; left: 22%; right: 22%; top: calc(var(--py) * 100% - 6cqw); height: 12cqw;
  display: grid; place-items: center; text-align: center; font: 700 7.4cqw/1 'Fredoka', sans-serif; color: #ffe27a;
  text-shadow: 0 .5cqw 0 #6a1a00, 0 0 2cqw rgba(255, 200, 60, .8); letter-spacing: .03em; white-space: nowrap; pointer-events: none; }

/* Showtime Shawn, the Bingo host, with his own cage (replaces the small cage picture). Two stacked videos (the smooth
   cross-fade twin from /smooth-video.js) sit on top of each other inside one box. */
.shawnbox { display: none; position: relative; flex: none; height: 250px; aspect-ratio: 730 / 684; margin: -30px 0 -30px -14px; }
.drawer.with-host .shawnbox { display: block; }
.shawnbox video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.drawer.with-host .cage { display: none; }
.win .shawnwin { display: block; width: 300px; aspect-ratio: 730 / 684; margin: -10px auto 0; }
.win .shawnwin[hidden] { display: none; }
@media (max-width: 900px) { .shawnbox { height: 170px; margin: -12px 0 -12px -8px; } }