/* Stop the Light — TV and phone. Navy-and-gold game show, from Kita's artwork. */

/* ===== TV ===== */
.stv { height: 100vh; overflow: hidden; background: #050a2a; display: grid; place-items: center; margin: 0; }
.sstage {
  position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size;
  background: radial-gradient(ellipse at 50% 55%, rgba(30, 60, 200, .35), transparent 60%), #060b30;
}
.sstage::before { /* the studio, softly out of focus behind everything */
  content: ''; position: absolute; inset: -2%; z-index: 0;
  background: url(/art/stoplight/studio.jpg) center 30% / cover no-repeat;
  filter: blur(.5cqw) brightness(.42) saturate(1.2);
}
.sstage > * { position: absolute; z-index: 2; }

.stop { top: 1.1cqw; left: 1.4cqw; right: 1.4cqw; display: flex; align-items: center; gap: 1cqw; z-index: 6; }
.stop .logo { font-size: 1.6cqw; color: #fff; }
.soundpill { margin-right: auto; font-size: 1cqw; padding: .5cqw 1cqw; cursor: pointer; background: rgba(6, 11, 48, .75); }
.hud { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; align-items: center; gap: .8cqw;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.9cqw; color: #ffd76a; text-shadow: 0 .2cqw .6cqw #000; white-space: nowrap; }
.hud img { height: 3.2cqw; }
.codechip {
  display: flex; align-items: center; gap: .8cqw; padding: .5cqw .5cqw .5cqw 1.1cqw; border-radius: 1.2cqw;
  background: rgba(6, 11, 48, .8); border: .15cqw solid #e7b53c; font-weight: 800; font-size: 1.05cqw; color: #fff;
}
.codechip .qrmini { background: #fff; padding: .35cqw; border-radius: .6cqw; line-height: 0; }
.codechip .qrmini img, .codechip .qrmini canvas { width: 4.8cqw !important; height: 4.8cqw !important; }
.codechip b { font-family: 'Fredoka', sans-serif; font-size: 2.2cqw; letter-spacing: .2em; }

.host { left: -1%; bottom: -1%; height: 80%; z-index: 4; filter: drop-shadow(0 .6cqw 1.4cqw rgba(0,0,0,.6)); transition: opacity .3s; pointer-events: none; }
/* her video clips (KIE / Grok): the frame has green margin round her, so it's drawn bigger to line her up with the still */
.hostvid { left: -11.5%; bottom: -8.2%; height: 98%; aspect-ratio: 2 / 3; z-index: 4; pointer-events: none; filter: drop-shadow(0 .6cqw 1.4cqw rgba(0,0,0,.6)); }
.hostvid.boxed { left: 1%; bottom: 4%; height: 62%; border-radius: 1.2cqw; border: .25cqw solid #e7b53c; filter: none; }
.host.half { height: 62%; left: 0; }
.host.bounce { animation: hostbounce .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes hostbounce { from { transform: translateY(6%) scale(.96); } to { transform: none; } }
.bubble {
  left: 13.5%; top: 17%; z-index: 8; max-width: 17%;
  background: #fff; color: #10208a; border-radius: 1.6cqw; padding: .8cqw 1.2cqw;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.55cqw; line-height: 1.15; box-shadow: 0 .5cqw 1.5cqw rgba(0,0,0,.4);
}
.bubble::after { content: ''; position: absolute; left: 1.4cqw; bottom: -1.1cqw; border: .7cqw solid transparent; border-top: 1cqw solid #fff; }
.bubble.pop, .banner.pop { animation: pop .45s cubic-bezier(.2, 1.6, .4, 1); }

.wheel { left: 50%; top: 6.5%; height: 92%; aspect-ratio: 1; transform: translateX(-50%); z-index: 3; }

.board {
  right: 1.2%; top: 13%; width: 20%; z-index: 6; display: flex; flex-direction: column; gap: .45cqw;
  background: rgba(6, 11, 48, .86); border: .2cqw solid #e7b53c; border-radius: 1.2cqw; padding: .9cqw;
}
.board h3 { margin: 0 0 .2cqw; font-family: 'Fredoka', sans-serif; font-size: 1.5cqw; color: #ffd76a; display: flex; justify-content: space-between; align-items: center; }
.board h3 img { height: 1.9cqw; }
.srow { display: grid; grid-template-columns: 1.3cqw 1fr auto; gap: .6cqw; align-items: center; font-weight: 800; font-size: 1.15cqw; color: #fff;
  padding: .35cqw .6cqw; border-radius: .7cqw; background: rgba(255,255,255,.06); border-left: .45cqw solid var(--c); transition: background .3s; }
.srow .dot { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: var(--c); box-shadow: 0 0 .6cqw var(--c); }
.srow .w { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srow .s { font-family: 'Fredoka', sans-serif; font-size: 1.45cqw; color: #ffd76a; }
.srow.flash { background: rgba(255, 215, 106, .4); }
.srow.miss { animation: shake .4s; }
.srow.off { opacity: .45; }
@keyframes shake { 25% { transform: translateX(-.4cqw); } 75% { transform: translateX(.4cqw); } }

.banner { left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%); z-index: 9; pointer-events: none; filter: drop-shadow(0 .8cqw 1.6cqw rgba(0,0,0,.6)); }
.bigcount {
  inset: 0; display: grid; place-items: center; z-index: 8; pointer-events: none;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 11cqw; color: #fff; text-align: center; line-height: 1;
  text-shadow: 0 .6cqw 2cqw rgba(0,0,0,.7), 0 0 3cqw rgba(60, 130, 255, .9);
}
.bigcount small { display: block; font-size: 3.4cqw; color: #ffd76a; }
.bigcount.pop { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.banner.pop { animation: bannerpop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes bannerpop { from { transform: translate(-50%, -50%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }

.spanel {
  left: 22%; right: 2.5%; top: 11%; bottom: 4%; z-index: 6; color: #fff;
  background: rgba(6, 11, 48, .88); border: .2cqw solid #e7b53c; border-radius: 1.6cqw;
  padding: 1.2cqw 2cqw 1.6cqw; display: flex; flex-direction: column; gap: 1cqw; box-shadow: 0 0 3cqw rgba(40, 90, 255, .35);
}
.spanel .title { width: 52%; align-self: center; margin-top: -.4cqw; }
.spanel .cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 2cqw; flex: 1; min-height: 0; }
.spanel .col { display: flex; flex-direction: column; gap: 1.1cqw; min-height: 0; }
.how { margin: 0; padding-left: 1.6cqw; font-size: 1.35cqw; line-height: 1.35; display: flex; flex-direction: column; gap: .5cqw; }
.how b { color: #ffd76a; }
.sjoin { display: flex; gap: 1.4cqw; align-items: center; margin-top: auto; }
.sjoin .qr { background: #fff; padding: .5cqw; border-radius: .8cqw; line-height: 0; }
.sjoin .qr img, .sjoin .qr canvas { width: 9cqw !important; height: 9cqw !important; }
.sjoin .muted { font-size: 1.15cqw; }
.sjoin .bigcode { font-family: 'Fredoka', sans-serif; font-size: 3.6cqw; letter-spacing: .25em; font-weight: 700; color: #ffd76a; }
.seats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8cqw .6cqw; align-content: start; min-height: 13cqw; }
.seats .muted { grid-column: 1 / -1; font-size: 1.2cqw; }
.seat { display: flex; flex-direction: column; align-items: center; gap: .2cqw; font-weight: 800; font-size: 1.05cqw; text-align: center; cursor: pointer; }
.seat img { width: 7.4cqw; filter: drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.5)); animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.seat .nm { max-width: 9cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.off { opacity: .45; }
.spanel .chips .chip { font-size: 1.1cqw; padding: .5cqw 1.1cqw; color: #fff; }
.spanel .btn { font-size: 1.5cqw; padding: .9cqw 2.2cqw; align-self: flex-start; }
.swin { left: 27%; right: 27%; top: 12%; bottom: 8%; text-align: center; align-items: center; justify-content: center; }
.swin .crown { width: 9cqw; animation: pop .6s cubic-bezier(.2, 1.6, .4, 1); }
.swin h1 { margin: 0; font-family: 'Fredoka', sans-serif; font-size: 4cqw; color: #ffd76a; line-height: 1; }
.swin h2 { margin: 0; font-size: 2.3cqw; }
.swin .btn { align-self: center; }
.swin .row { display: flex; gap: 1cqw; }
.podium { display: flex; flex-direction: column; gap: .45cqw; width: 80%; }
.podium > span { display: grid; grid-template-columns: 2cqw 1fr auto; gap: .6cqw; align-items: center; font-weight: 800; font-size: 1.3cqw;
  padding: .3cqw .7cqw; border-radius: .7cqw; background: rgba(255,255,255,.07); border-left: .45cqw solid var(--c); text-align: left; }
.podium b { font-family: 'Fredoka', sans-serif; color: #ffd76a; }

/* ===== phone ===== */
.sphone { height: 100vh; height: 100dvh; overflow: hidden; margin: 0; color: #fff; touch-action: manipulation; -webkit-user-select: none; user-select: none;
  background: radial-gradient(ellipse at 50% 30%, #1a2f9a 0%, #070c3a 55%, #040622 100%); display: flex; flex-direction: column; }
.sphone .phud { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px 8px; font-weight: 800; }
.sphone .phud .me { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; }
.sphone .phud .pill { background: rgba(255,255,255,.1); }
.mycol { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 99px; font-weight: 800;
  background: color-mix(in srgb, var(--c) 30%, transparent); border: 2px solid var(--c); text-transform: uppercase; font-size: .85rem; letter-spacing: .04em; }
.mycol i { width: 16px; height: 16px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); }
.pstage { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vh; padding: 0 16px; }
.pstage canvas { width: 100%; max-width: 520px; flex: 1; min-height: 0; }
.status { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(1.4rem, 6.5vw, 2.2rem); text-align: center; min-height: 1.3em; line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.status.hot { color: #fff; animation: throb .35s infinite alternate; }
.status.bad { color: #ff7b7b; }
.status.good { color: #ffd76a; }
@keyframes throb { to { transform: scale(1.08); } }
.bigbtn {
  appearance: none; border: 0; cursor: pointer; position: relative; flex: none;
  width: min(62vw, 34vh, 300px); aspect-ratio: 1; border-radius: 50%; margin: 1vh auto max(22px, env(safe-area-inset-bottom));
  background: radial-gradient(circle at 38% 30%, color-mix(in srgb, var(--c) 40%, #fff) 0 12%, var(--c) 45%, color-mix(in srgb, var(--c) 55%, #000) 100%);
  box-shadow: 0 0 0 10px #c99a2e, 0 0 0 16px #6b4a10, 0 14px 0 16px #3d2a08, 0 24px 40px rgba(0,0,0,.6);
  color: #fff; font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: clamp(1.6rem, 9vw, 2.6rem); text-shadow: 0 3px 8px rgba(0,0,0,.5);
  transition: filter .15s, transform .08s; -webkit-tap-highlight-color: transparent;
}
.bigbtn.wait { filter: saturate(.35) brightness(.55); }
.bigbtn.live { animation: live .3s infinite alternate; }
.bigbtn.live::after { content: ''; position: absolute; inset: -26px; border-radius: 50%; border: 6px solid var(--c); opacity: .8; animation: ring .6s infinite; }
.bigbtn:active, .bigbtn.pressed { transform: translateY(8px); box-shadow: 0 0 0 10px #c99a2e, 0 0 0 16px #6b4a10, 0 6px 0 16px #3d2a08, 0 12px 26px rgba(0,0,0,.6); }
@keyframes live { to { filter: brightness(1.25) drop-shadow(0 0 22px var(--c)); } }
@keyframes ring { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.12); opacity: 0; } }
.pcard { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 24px; text-align: center; z-index: 5;
  background: radial-gradient(ellipse at 50% 30%, rgba(26, 47, 154, .97), rgba(4, 6, 34, .98)); }
.pcard h1 { margin: 0; font-family: 'Fredoka', sans-serif; font-size: 2rem; line-height: 1.1; }
.pcard p { margin: 0; font-size: 1.05rem; max-width: 22em; }
.pcard .chair { width: min(46vw, 200px); filter: drop-shadow(0 8px 16px rgba(0,0,0,.5)); }
.pcard .bigimg { width: min(70vw, 300px); }
.pcard .you { font-family: 'Fredoka', sans-serif; font-size: 2.4rem; color: var(--c); text-shadow: 0 0 18px var(--c); text-transform: uppercase; }
/* a big group (Kita 2026-10-06): smaller rows, team rows on top */
#rows.many .srow { font-size: .8cqw; gap: .4cqw; }
.srow.team { font-weight: 900; font-size: 1.05cqw; }
/* a big lobby (more than 8 → colour teams at the start): name chips instead of chairs */
.seats.many { display: flex; flex-wrap: wrap; gap: .25cqw; max-height: 15cqw; min-height: 0; overflow: hidden; justify-content: center; align-content: flex-start; }
.seats.many .seat { flex-direction: row; font-size: .75cqw; padding: .15cqw .5cqw; border-radius: 99px; background: rgba(255,255,255,.1); }
.seats.many .seat img { display: none; }
.seats.many::before { content: 'More than 8 players — you’ll play in colour teams!'; width: 100%; text-align: center; font-weight: 900; font-size: .95cqw; color: #ffd23d; margin-bottom: .2cqw; }