/* ================= TV: the fair booth ================= */
.wtv { height: 100vh; overflow: hidden; background: #08061c; display: grid; place-items: center; }
/* A 16:9 stage that always fits the screen, so the booth art and the tubes line up on any TV. */
.booth {
  position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; overflow: hidden;
  container-type: inline-size;
  /* drawn booth — shows if the artwork is missing */
  background:
    repeating-linear-gradient(90deg, #e8323f 0 6%, #fff4ec 6% 12%) top / 100% 13% no-repeat,
    linear-gradient(#5a3216, #3a1f0c) bottom / 100% 22% no-repeat,
    radial-gradient(60% 50% at 50% 45%, #1d2a6b, #0c1240 70%) center / 70% 62% no-repeat,
    linear-gradient(#150f3d, #0b0826);
}
.booth.has-art { background: url(/art/water/booth.jpg) center / cover no-repeat, #0b0826; }
.booth::after { /* marquee bulbs for the drawn version */
  content: ''; position: absolute; left: 0; right: 0; top: 12.5%; height: 2%;
  background: radial-gradient(circle, #ffe9a8 0 30%, rgba(255,200,90,.35) 45%, transparent 60%) 0 0 / 3% 100% repeat-x;
}
.booth.has-art::after { display: none; }

.wtop { position: absolute; top: 1.2cqw; left: 1.4cqw; right: 1.4cqw; display: flex; justify-content: space-between; align-items: center; z-index: 5; }
.wtop .logo { font-size: 1.6cqw; }
.codechip {
  display: flex; align-items: center; gap: .8cqw; padding: .5cqw .5cqw .5cqw 1.1cqw; border-radius: 1.2cqw;
  background: rgba(8, 6, 30, .78); border: 1px solid rgba(255,255,255,.18); font-weight: 800; font-size: 1.05cqw;
}
.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; }

/* the board area inside the booth where the tubes stand */
.lanes {
  position: absolute; left: 19.5%; right: 19.5%; top: 19.5%; bottom: 30.5%; /* = the blue board in the ChatGPT booth */
  display: flex; justify-content: space-evenly; align-items: stretch; gap: 1cqw; z-index: 2;
}
.lane { flex: 1; max-width: 9cqw; display: flex; flex-direction: column; align-items: center; position: relative; }
.lanes.team .lane { max-width: 16cqw; }
.sky { height: 18%; width: 100%; position: relative; }
.target {
  position: absolute; left: 50%; top: 20%; transform: translateX(-50%); width: 3.6cqw; height: 3.6cqw; border-radius: 50%;
  background: radial-gradient(circle, #ff3d5a 0 18%, #fff 19% 36%, #ff3d5a 37% 55%, #fff 56% 72%, #ff3d5a 73%);
  box-shadow: 0 0 1.2cqw rgba(255,255,255,.25);
}
.lane.on .target { animation: wobble .25s infinite alternate; box-shadow: 0 0 2cqw rgba(140,220,255,.9); }
@keyframes wobble { to { transform: translateX(-50%) rotate(8deg) scale(1.06); } }
.tube {
  flex: 1; width: 62%; position: relative; border-radius: 3cqw 3cqw 1.2cqw 1.2cqw;
  background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.06) 30%, rgba(255,255,255,.04) 70%, rgba(255,255,255,.2));
  border: .25cqw solid rgba(220,240,255,.55); box-shadow: inset 0 0 1.5cqw rgba(160,220,255,.25), 0 .6cqw 1.6cqw rgba(0,0,0,.4);
  overflow: visible;
}
.lanes.team .tube { width: 70%; }
.water {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%; border-radius: 0 0 1cqw 1cqw;
  background: linear-gradient(180deg, #7fd6ff, #2a8cff 60%, #1b5fd6);
  transition: height .12s linear; overflow: hidden;
}
.water::before { /* little wave on top */
  content: ''; position: absolute; left: -50%; top: -.6cqw; width: 200%; height: 1.2cqw;
  background: radial-gradient(circle at 50% 100%, transparent .6cqw, #7fd6ff .65cqw) 0 0 / 2.4cqw 100% repeat-x;
  animation: wave 1.2s linear infinite;
}
@keyframes wave { to { transform: translateX(2.4cqw); } }
.lane.on .water { box-shadow: 0 0 1.5cqw rgba(127,214,255,.7); }
.toy {
  position: absolute; left: 50%; transform: translate(-50%, 50%); bottom: 0%; font-size: 3.4cqw; line-height: 1;
  transition: bottom .12s linear; filter: drop-shadow(0 .3cqw .4cqw rgba(0,0,0,.4)); z-index: 3;
}
.lanes.team .toy { font-size: 5cqw; }
.lane.won .toy { animation: blastoff 1.4s cubic-bezier(.5, 0, .8, .3) forwards; }
@keyframes blastoff { to { bottom: 260%; transform: translate(-50%, 50%) rotate(-12deg) scale(1.3); } }
.pct { position: absolute; bottom: -1.9cqw; left: 50%; transform: translateX(-50%); font-weight: 800; font-size: 1cqw; color: #cfeaff; text-shadow: 0 1px 4px #000; }

/* players stand at the counter */
.counter {
  position: absolute; left: 16%; right: 16%; bottom: 14.5%; height: 12%; /* = the wooden counter */
  display: flex; justify-content: space-evenly; align-items: center; gap: .6cqw; z-index: 3;
}
.gun { flex: 1; max-width: 9cqw; text-align: center; position: relative; }
.counter.team .gun { max-width: 16cqw; }
.gun .pistol { font-size: 2.6cqw; display: inline-block; transform: rotate(-60deg) scaleX(-1); transition: transform .15s; }
.gun.on .pistol { transform: rotate(-70deg) scaleX(-1) scale(1.12); filter: drop-shadow(0 0 .8cqw rgba(127,214,255,.9)); }
.nametag {
  margin-top: .2cqw; display: inline-flex; align-items: center; gap: .3cqw; max-width: 100%;
  padding: .2cqw .7cqw; border-radius: 99px; background: rgba(8,6,30,.8); font-weight: 800; font-size: 1cqw;
  border: .15cqw solid rgba(255,255,255,.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gun.on .nametag { border-color: #7fd6ff; box-shadow: 0 0 .8cqw rgba(127,214,255,.8); }
.gun.off { opacity: .45; }
.members { display: flex; flex-wrap: wrap; justify-content: center; gap: .3cqw; }
.members span { font-size: 1.6cqw; padding: .1cqw; border-radius: 50%; border: .15cqw solid transparent; }
.members span.on { border-color: #7fd6ff; box-shadow: 0 0 .7cqw rgba(127,214,255,.8); }
.teamname { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.4cqw; }

/* the live water graphics are painted on one canvas over the booth (fx.js);
   the lane boxes below only give it the layout */
.fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.lanes .target, .lanes .tube, .lanes .water, .lanes .toy { visibility: hidden; }
.lanes .tube { overflow: visible; }
.lanes .target { width: 4.6cqw; height: 4.6cqw; top: 6%; }
.gunbox { width: 6cqw; height: 6.5cqw; margin: -5.5cqw auto 0; }
.counter.team .gunbox { width: 8cqw; height: 8.5cqw; margin-top: -7cqw; }
.gun .pistol { display: none; }
.counter { z-index: 5; }

/* lobby + overlays inside the booth */
.wpanel {
  position: absolute; left: 20%; right: 20%; top: 18.5%; bottom: 12%; z-index: 6;
  background: rgba(8, 6, 30, .82); border: 1px solid rgba(255,255,255,.16); border-radius: 1.6cqw;
  padding: 1.6cqw 2cqw; display: flex; flex-direction: column; gap: .9cqw; overflow: auto;
}
.wpanel h1 { margin: 0; font-size: 3.4cqw; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wpanel p { margin: 0; font-size: 1.15cqw; }
.wpanel .chips .chip { font-size: 1.05cqw; padding: .5cqw 1cqw; }
.wpanel .btn { font-size: 1.4cqw; padding: .9cqw 2cqw; align-self: flex-start; }
.wplayers { display: flex; flex-wrap: wrap; gap: .5cqw; }
.wplayers span { padding: .3cqw .8cqw; border-radius: 99px; background: rgba(255,255,255,.08); font-weight: 800; font-size: 1.05cqw; cursor: pointer; }
.wplayers span.orange { background: rgba(255,122,61,.35); }
.wplayers span.blue { background: rgba(79,124,255,.4); }
.wjoin { display: flex; gap: 1.4cqw; align-items: center; }
.wjoin .qr { background: #fff; padding: .5cqw; border-radius: .8cqw; line-height: 0; }
.wjoin .qr img, .wjoin .qr canvas { width: 8cqw !important; height: 8cqw !important; }
.wjoin .bigcode { font-family: 'Fredoka', sans-serif; font-size: 3.2cqw; letter-spacing: .25em; font-weight: 700; }

.bigcount {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 8; pointer-events: none;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 14cqw; color: #fff;
  text-shadow: 0 .6cqw 2cqw rgba(0,0,0,.6), 0 0 3cqw rgba(255,122,61,.8);
}
.bigcount.pop { animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.wwin { left: 26%; right: 26%; text-align: center; align-items: center; justify-content: center; }
.wwin .who { font-size: 6cqw; line-height: 1; }
.wwin h2 { margin: 0; font-size: 2.6cqw; }
.wwin .btn { align-self: center; }
.wwin .row { display: flex; gap: 1cqw; }
.scores { font-weight: 800; font-size: 1.1cqw; color: var(--gold); }

/* ================= PHONE ================= */
.wphone { height: 100vh; height: 100dvh; overflow: hidden; background: #000; touch-action: none; }
.arena { position: fixed; inset: 0; }
.arena video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); opacity: .9; }
.wphone:not(.camon) .arena video { opacity: 0; }
.wphone:not(.camon) .arena { background: radial-gradient(circle at 50% 40%, #1d2a6b, #08061c); }
.arena canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.whud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px; background: linear-gradient(rgba(0,0,0,.6), transparent);
}
.whud .me { font-weight: 800; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.teamtag { padding: 5px 10px; border-radius: 99px; font-weight: 800; font-size: .85rem; }
.meter {
  position: fixed; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 5; height: 26px;
  border-radius: 99px; background: rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.35); overflow: hidden;
}
.meter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--grad); transition: width .12s linear; }
.meter span { position: relative; display: block; text-align: center; font-weight: 800; line-height: 22px; }
.wcard {
  position: fixed; left: 16px; right: 16px; top: 50%; transform: translateY(-50%); z-index: 6;
  padding: 22px; text-align: center; display: grid; gap: 12px; max-width: 480px; margin: 0 auto;
  background: rgba(14, 10, 44, .9);
}
.wcard .big { font-size: 3.6rem; line-height: 1; }
.wcard h1 { margin: 0; font-size: 1.7rem; }
.wcard p { margin: 0; }
.wcard .small { font-size: .9rem; }
.teampick { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.camstatus {
  position: fixed; left: 50%; transform: translateX(-50%); top: calc(max(10px, env(safe-area-inset-top)) + 44px); z-index: 7;
  appearance: none; border: 0; font: inherit; font-weight: 800; font-size: .95rem; color: #fff;
  padding: 8px 14px; border-radius: 99px; background: rgba(0,0,0,.6); white-space: nowrap;
}
.camstatus.good { background: rgba(47,209,139,.85); }
.camstatus.warn { background: rgba(255,122,61,.9); }
.count {
  position: fixed; inset: 0; z-index: 7; display: grid; place-items: center; pointer-events: none;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 7rem; color: #fff; text-shadow: 0 4px 30px rgba(0,0,0,.7);
}

.booth.lobbying .lanes, .booth.lobbying .counter, .booth.lobbying .fx { visibility: hidden; }

.wtop .soundpill { margin-right: auto; margin-left: 1.2cqw; font-size: 1cqw; padding: .5cqw 1cqw; cursor: pointer; background: rgba(8,6,30,.7); }

/* Once the camera (or touch) is ready, the waiting card becomes a small bar at the bottom
   so you can see yourself and practise on the target before the race. */
body.camon #lobby, body.touchmode #lobby {
  top: auto; bottom: max(14px, env(safe-area-inset-bottom)); transform: none;
  padding: 12px 14px; gap: 6px; background: rgba(14, 10, 44, .78);
}
body.camon #lobby .big, body.touchmode #lobby .big,
body.camon #lobby #camBtn, body.touchmode #lobby #camBtn,
body.camon #lobby #camNote:empty { display: none; }
body.camon #lobby h1, body.touchmode #lobby h1 { font-size: 1.15rem; }
body.camon #lobby p, body.touchmode #lobby p { font-size: .9rem; }

/* ---- the 8-station booth (Kita's ChatGPT art) ---- */
.booth.has-art::after { display: none; }
.seats { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.seat {   /* each lane: a circle with the player's camera face (or their emoji) and their name under it (Kita 2026-10-09) */
  position: absolute; bottom: 1%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .25cqw; max-width: 11.5cqw;
  transition: transform .15s; font-weight: 800;
}
.seat .face { position: relative; width: 5.2cqw; height: 5.2cqw; border-radius: 50%; overflow: visible; display: grid; place-items: center;
  background: rgba(8, 6, 30, .85); border: .3cqw solid rgba(255,255,255,.7); box-shadow: 0 .4cqw 1cqw rgba(0,0,0,.45); }
.seat .face .em { font-size: 2.9cqw; line-height: 1; }
.seat .face img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.seat .num { position: absolute; left: -.4cqw; top: -.4cqw; display: grid; place-items: center; width: 1.7cqw; height: 1.7cqw; border-radius: 50%;
  background: #ffc53d; color: #3a2a00; font-family: 'Fredoka', sans-serif; font-size: 1cqw; box-shadow: 0 .2cqw .5cqw rgba(0,0,0,.4); }
.seat .who { max-width: 11cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: .15cqw .8cqw; border-radius: 99px;
  background: rgba(8, 6, 30, .85); border: .15cqw solid rgba(255,255,255,.35); font-size: 1.1cqw; }
.seat.on { transform: translateX(-50%) scale(1.06); }
.seat.on .face { border-color: #7fd6ff; box-shadow: 0 0 1.4cqw rgba(127,214,255,.95); }
.seat.off { opacity: .5; }
.seat.won .face { border-color: #ffc53d; box-shadow: 0 0 1.6cqw rgba(255,197,61,.95); }
.seat.won .who { background: linear-gradient(135deg, #ffc53d, #ff7a3d); color: #2b1600; }

.carl { position: absolute; left: 0; bottom: 0; height: 46%; z-index: 7; pointer-events: none;
  filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.5)); transform-origin: bottom left; animation: carlbob 2.4s ease-in-out infinite; }
.carl.hello { height: 40%; left: -.5%; }
@keyframes carlbob { 50% { transform: translateY(-1.2%) rotate(-1deg); } }
.bubble {
  position: absolute; left: 11.5%; bottom: 40%; z-index: 8; max-width: 20%;
  background: #fff; color: #1d2a8f; border-radius: 1.6cqw; padding: .8cqw 1.3cqw;
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.7cqw; line-height: 1.15;
  box-shadow: 0 .5cqw 1.4cqw rgba(0,0,0,.35); border: .25cqw solid #4f7cff;
}
.bubble::after { content: ''; position: absolute; left: 1.2cqw; 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); }
.booth:has(.carl.hello) .bubble { left: 17%; }
.banner { position: absolute; left: 50%; top: 32%; width: 34%; transform: translate(-50%, -50%); z-index: 9; pointer-events: none;
  filter: drop-shadow(0 .8cqw 1.6cqw rgba(0,0,0,.5)); }
.podium { display: flex; flex-direction: column; gap: .4cqw; align-items: flex-start; font-weight: 800; font-size: 1.3cqw; }
.podium span { display: flex; align-items: center; gap: .6cqw; }
.podium img { height: 2.6cqw; }
.carl.corner { height: 30%; bottom: auto; top: 9%; left: -1%; }
.booth.carl-corner .bubble { bottom: auto; top: 12%; left: 9%; }

.intro { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 20; background: #000; }

/* Carl on video: keyed out (see-through) where the browser can, a little screen on Safari */
.carlvid { position: absolute; left: -1%; bottom: 0; height: 42%; aspect-ratio: 1; z-index: 7; pointer-events: none;
  filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.45)); }
.carlvid.boxed { border-radius: 1.4cqw; border: .3cqw solid #ffc53d; left: .8%; bottom: 1.5%; height: 34%; filter: none; }
.booth.carl-corner .carlvid { bottom: auto; top: 8%; height: 30%; }
.bubble { left: 13%; }
.booth.carl-corner .bubble { left: 10%; }
.carlvid { height: 38%; left: -2.5%; }
.seats { z-index: 8; }

/* the winner, live from their phone camera */
.wincams { display: flex; gap: 1cqw; justify-content: center; }
.wincams:empty { display: none; }
.wincams img { width: 17cqw; aspect-ratio: 4 / 3; object-fit: cover; transform: scaleX(-1); border-radius: 1.2cqw;
  border: .4cqw solid #ffc53d; box-shadow: 0 0 2cqw rgba(255,197,61,.6); background: #000; }
.wincams img:only-child { width: 26cqw; }
/* a big lobby (Kita 2026-10-06: up to 50 names) — shared by the carnival games */
.wplayers.many { gap: .25cqw; max-height: 9.5cqw; overflow: hidden; justify-content: center; }
.wplayers.many span { font-size: .72cqw; padding: .15cqw .5cqw; }