/* Deal or Door? — TV and phones (Kita 2026-10-06). Purple, gold, teal and pink, light bulbs; big text for every age. */
:root { --gold: #ffcf3d; --pink: #ff4fb0; --purple: #6b2bd8; --teal: #22d3c5; }

/* a player in costume (avatar.js): the emoji circle + the costume frame around it */
.dav { position: relative; display: inline-block; width: 1em; height: 1em; flex: none; }
.dav .face { position: absolute; left: 20%; top: 20%; width: 60%; height: 60%; border-radius: 50%; display: grid; place-items: center;
  font-size: .4em; line-height: 1; background: radial-gradient(circle at 40% 35%, #fff6d8, #ffd6ec); box-shadow: inset 0 0 0 .04em rgba(0,0,0,.15); }
.dav .frame { position: absolute; pointer-events: none; filter: drop-shadow(0 .03em .05em rgba(0,0,0,.35)); }

/* ================= TV ================= */
.dtv { margin: 0; background: #12062e; overflow: hidden; color: #fff; font-family: 'Nunito', sans-serif; }
.stage { position: relative; width: min(100vw, 177.78vh); aspect-ratio: 16 / 9; margin: 0 auto; overflow: hidden; container-type: inline-size;
  background: url(/art/deal/background.jpg) center / cover, radial-gradient(80% 70% at 50% 30%, #7a2bff, #2a0c6b 60%, #12062e); }
.stage [hidden] { display: none !important; }
.stage .top { position: absolute; left: 1.2%; right: 1.2%; top: 1.6%; display: flex; align-items: center; gap: 1.2cqw; z-index: 20; }
.stage .codechip { margin-left: auto; display: flex; align-items: center; gap: .8cqw; padding: .5cqw .9cqw; border-radius: 1cqw; background: rgba(30,8,70,.9); border: .2cqw solid var(--gold); font-weight: 800; font-size: 1cqw; line-height: 1.2; }
.stage .codechip .qrmini { background: #fff; padding: .35cqw; border-radius: .6cqw; line-height: 0; }
.stage .codechip .qrmini img, .stage .codechip .qrmini canvas { width: 4.8cqw !important; height: 4.8cqw !important; }
.stage .codechip b { font-family: 'Fredoka', sans-serif; font-size: 2.2cqw; letter-spacing: .2em; color: var(--gold); }
.round { padding: .5cqw 1.4cqw; border-radius: 99px; background: rgba(30,8,70,.9); border: .2cqw solid var(--gold); font: 700 1.5cqw 'Fredoka', sans-serif; color: var(--gold); }
.glass { background: rgba(30, 8, 70, .85); border: .22cqw solid var(--gold); border-radius: 1.4cqw; box-shadow: 0 0 1.6cqw rgba(255,207,61,.45); }
.banner { position: absolute; left: 50%; top: 12%; transform: translateX(-50%); z-index: 8; padding: .8cqw 3cqw; border-radius: 1.4cqw; white-space: nowrap;
  background: linear-gradient(180deg, #8a2bff, #4a0fa8); border: .3cqw solid var(--gold); box-shadow: 0 0 2.4cqw rgba(255,207,61,.7);
  font: 700 2.8cqw/1 'Fredoka', sans-serif; letter-spacing: .05em; color: var(--gold); text-shadow: 0 .3cqw 0 #5a2b00; animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: translateX(-50%) scale(.4); opacity: 0; } }

.host { position: absolute; right: -1%; bottom: 0; height: 70%; z-index: 9; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.5)); }
.host.bounce { animation: hb .5s; } @keyframes hb { 40% { transform: scale(1.04) translateY(-1%); } }
.bubble { position: absolute; right: 2%; top: 13%; z-index: 12; max-width: 22%; padding: 1cqw 1.4cqw; border-radius: 1.6cqw; background: #fff; color: #2a0c6b;
  font: 700 1.7cqw/1.25 'Fredoka', sans-serif; box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.4); }
.bubble.pop { animation: bpop .35s cubic-bezier(.2,1.6,.4,1); } @keyframes bpop { from { transform: scale(.4); opacity: 0; } }

/* the doors in the arches (arch centres 23.3%, 50%, 76.7%; openings from 24% to 55% of the height) */
.doors { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.door { position: absolute; top: 24%; height: 31%; width: 11.4%; transform: translateX(-50%); display: grid; justify-items: center; }
.door img.shut, .door img.open { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.door .inside { position: absolute; left: 12%; right: 12%; top: 10%; bottom: 6%; display: grid; place-items: center; }
.door .inside img { max-width: 115%; max-height: 92%; object-fit: contain; filter: drop-shadow(0 .6cqw .8cqw rgba(0,0,0,.5)); animation: grow .6s cubic-bezier(.2,1.5,.4,1); }
@keyframes grow { from { transform: scale(.2); opacity: 0; } }
.door .label { position: absolute; top: 102%; white-space: nowrap; padding: .3cqw 1cqw; border-radius: 99px; background: rgba(30,8,70,.92); border: .18cqw solid var(--gold);
  font-weight: 900; font-size: 1.3cqw; animation: grow .5s .2s backwards; }
.door .label.dud { background: #c2183a; border-color: #fff; }
.door .who { position: absolute; bottom: -3.2cqw; display: flex; gap: .2cqw; }
.door.solo { width: 15%; top: 26%; height: 27%; }
.door.best .label { background: linear-gradient(90deg, #ffde4a, #ff9a1f); color: #3a1a00; }
.door.shake img.shut { animation: wiggle .5s ease-in-out infinite; } @keyframes wiggle { 50% { transform: rotate(1.5deg) scale(1.02); } }

.timer { position: absolute; left: 3%; top: 13%; z-index: 8; width: 9cqw; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; align-content: center;
  background: rgba(30,8,70,.9); border: .35cqw solid var(--teal); box-shadow: 0 0 1.4cqw var(--teal); }
.timer b { font: 700 3.6cqw/1 'Fredoka', sans-serif; } .timer small { font-weight: 900; font-size: .9cqw; letter-spacing: .08em; }
.timer.low { border-color: #ff4f6a; box-shadow: 0 0 1.4cqw #ff4f6a; }

/* the players making a deal, along the bottom */
.traders { position: absolute; left: 3%; right: 22%; bottom: 3%; z-index: 7; display: flex; justify-content: center; gap: 1.6cqw; }
.trader { display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.4cqw .8cqw .8cqw; border-radius: 1.6cqw; background: rgba(30,8,70,.9); border: .25cqw solid var(--gold);
  box-shadow: 0 0 1.8cqw rgba(255,207,61,.5); animation: grow .5s cubic-bezier(.2,1.5,.4,1); max-width: 34%; }
.trader .nm { font: 700 1.8cqw/1.1 'Fredoka', sans-serif; } .trader .st { font-weight: 900; font-size: 1.3cqw; color: #ffe9a8; }
.trader .got { font: 700 1.6cqw 'Fredoka', sans-serif; color: var(--gold); } .trader.dud .got { color: #ff7a8a; }
.guesses { position: absolute; left: 2%; top: 26%; z-index: 7; width: 15%; padding: 1cqw; text-align: center; font-weight: 900; font-size: 1.3cqw; }
.guesses b { display: block; font: 700 2.4cqw 'Fredoka', sans-serif; color: var(--gold); }

/* the audience wall + spotlight */
.audience { position: absolute; left: 3%; right: 21%; top: 58%; bottom: 3%; z-index: 6; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: .6cqw 1.2cqw; }
.aud { display: grid; justify-items: center; gap: .2cqw; transition: transform .3s, filter .3s; }
.aud small { font-weight: 900; font-size: 1cqw; text-shadow: 0 .1cqw .3cqw #000; max-width: 8cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aud.lit { transform: scale(1.35); filter: drop-shadow(0 0 1.2cqw #fff3b0); z-index: 2; }
.audience.dim .aud:not(.lit) { filter: brightness(.45); }
.spot { position: absolute; top: -4%; height: 104%; width: auto; z-index: 7; pointer-events: none; mix-blend-mode: screen; transform: translateX(-50%); opacity: .95; transition: left .25s linear; }

.money { position: absolute; left: 2%; top: 13%; width: 18%; z-index: 7; padding: 1cqw; }
.money h3 { margin: 0 0 .4cqw; text-align: center; font: 700 1.7cqw 'Fredoka', sans-serif; color: var(--gold); }
.money .r { display: flex; align-items: center; gap: .6cqw; font-weight: 900; font-size: 1.2cqw; padding: .2cqw .3cqw; }
.money .r b { margin-left: auto; color: var(--gold); }
.ctl { position: absolute; right: 1.2%; bottom: 2%; z-index: 21; }

/* lobby + winner panels */
.panel { position: absolute; left: 7%; right: 22%; top: 12%; bottom: 5%; z-index: 15; padding: 1.6cqw 2.4cqw; border-radius: 2cqw;
  background: rgba(30, 8, 70, .92); border: .3cqw solid var(--gold); box-shadow: 0 0 3cqw rgba(255,207,61,.45); display: grid; align-content: start; gap: 1cqw; }
.panel .title { width: 46%; justify-self: center; border-radius: 1cqw; margin-top: -.6cqw; }
.panel h1 { margin: 0; text-align: center; font: 700 4cqw 'Fredoka', sans-serif; color: var(--gold); }
.panel .cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2cqw; }
.how { margin: 0; padding-left: 2.2cqw; display: grid; gap: .7cqw; font-size: 1.5cqw; line-height: 1.3; } .how b { color: var(--gold); }
.join { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1cqw; }
.join .qr { background: #fff; padding: .6cqw; border-radius: .8cqw; width: 11cqw; } .join .qr img, .join .qr canvas { width: 100% !important; height: auto !important; display: block; }
.bigcode { font: 700 5.2cqw/1 'Fredoka', sans-serif; letter-spacing: .12em; color: var(--gold); }
.muted { color: #e2d4ff; font-weight: 800; font-size: 1.3cqw; }
.seats { display: flex; flex-wrap: wrap; gap: .9cqw; align-content: start; min-height: 12cqw; }
.seat { display: grid; justify-items: center; gap: .2cqw; font-weight: 900; font-size: 1.1cqw; }
.panel .btn { font-size: 1.8cqw; justify-self: center; }
.won { align-content: center; justify-items: center; }
.won .podium { display: flex; gap: 2cqw; align-items: end; } .won .place { display: grid; justify-items: center; gap: .4cqw; font-weight: 900; font-size: 1.4cqw; }
.won .stand { width: 13cqw; border-radius: 1cqw 1cqw 0 0; display: grid; place-items: center; font: 700 2.1cqw 'Fredoka', sans-serif; color: #3a1a00; background: linear-gradient(180deg, #ffe48a, #ff9a1f); }
.won .row { display: flex; gap: 1cqw; }

/* ================= PHONE ================= */
.dphone { margin: 0; min-height: 100dvh; color: #fff; font-family: 'Nunito', sans-serif; background: radial-gradient(120% 60% at 50% 0%, #8a2bff, #3a0c8a 50%, #14052e); }
.dphone .phud { display: flex; align-items: center; gap: 10px; padding: 10px 16px; font-weight: 900; font-size: 1.1rem; }
.dphone .phud .pill { margin-left: auto; background: rgba(0,0,0,.35); padding: 6px 12px; border-radius: 99px; color: var(--gold); font: 700 1.2rem 'Fredoka', sans-serif; }
.dphone main { padding: 4px 14px 20px; display: grid; gap: 10px; max-width: 480px; margin: 0 auto; }
.dphone h1 { margin: 4px 0 0; text-align: center; font: 700 1.9rem/1.1 'Fredoka', sans-serif; color: var(--gold); text-shadow: 0 3px 0 #5a2b00; }
.dphone p { margin: 0; text-align: center; font-size: 1.12rem; line-height: 1.4; }
.dphone .card { padding: 14px; border-radius: 20px; background: rgba(30,8,70,.7); border: 2px solid rgba(255,207,61,.6); display: grid; gap: 10px; justify-items: center; }
.costumes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.costumes button { border: 3px solid transparent; border-radius: 18px; background: rgba(255,255,255,.08); padding: 6px 2px 4px; color: #fff; font: 800 .95rem Nunito, sans-serif; display: grid; justify-items: center; gap: 2px; cursor: pointer; }
.costumes button.on { border-color: var(--gold); background: rgba(255,207,61,.18); box-shadow: 0 0 14px rgba(255,207,61,.5); }
.choice { width: 100%; padding: 16px; border: 0; border-radius: 18px; font: 700 1.5rem 'Fredoka', sans-serif; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; }
.choice img { height: 52px; }
.choice.keep { background: linear-gradient(180deg, #4be37a, #12a84a); box-shadow: 0 6px 0 #0a6b2e; }
.choice.door1 { background: linear-gradient(180deg, #ff5a5a, #c2183a); box-shadow: 0 6px 0 #7a0f22; }
.choice.door2 { background: linear-gradient(180deg, #4f8bff, #2350d8); box-shadow: 0 6px 0 #0d2a86; }
.choice.door3 { background: linear-gradient(180deg, #ffd23d, #e09a00); box-shadow: 0 6px 0 #8a5a00; color: #3a1a00; }
.choice.box, .choice.envelope { background: linear-gradient(180deg, #b46bff, #6b2bd8); box-shadow: 0 6px 0 #3a0c8a; }
.choice:active { transform: translateY(3px); }
.bigwait { font-size: 4rem; text-align: center; }
.choices { display: grid; gap: 10px; width: 100%; }
.choice.on { outline: 4px solid #fff; }
.dphone .phud .dav { margin: -6px 0; }
/* who picked this door: a badge on the door's top corner, so it never covers the prize label */
.door .who { bottom: auto; top: -1.4cqw; left: -2cqw; z-index: 2; }
/* the lights go down while the spotlight hunts for the best costume */
.stage::after { content: ''; position: absolute; inset: 0; z-index: 5; background: rgba(6,2,24,.62); opacity: 0; transition: opacity .6s; pointer-events: none; }
.stage.spotting::after { opacity: 1; }
.spot { mix-blend-mode: normal; filter: brightness(1.5) saturate(1.2); opacity: 1; }

/* ---- the ChatGPT kit, wired in (Kita 2026-10-07: "nothing can look generic") ---- */
.signimg { position: absolute; left: 50%; top: 9.5%; width: 28cqw; transform: translateX(-50%); z-index: 8; filter: drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.5)); animation: signpop .55s cubic-bezier(.2,1.5,.4,1); }
@keyframes signpop { from { transform: translateX(-50%) scale(.4); opacity: 0; } }

/* the countdown: a gold bulb clock with a bow */
.timer { width: 10cqw; aspect-ratio: 1054 / 1147; border-radius: 0; border: 0; box-shadow: none; top: 12%;
  background: url(/art/deal/kit/timer.png) center / 100% 100% no-repeat; filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.5)); padding-top: 2.2cqw; box-sizing: border-box; }
.timer b { font-size: 3.4cqw; text-shadow: 0 .2cqw .4cqw #000; } .timer small { font-size: .75cqw; }
.timer.low { border: 0; box-shadow: none; animation: tpulse .5s infinite alternate; } .timer.low b { color: #ff8a9a; }
@keyframes tpulse { to { transform: scale(1.06); } }

/* the people making a deal: light-up name plates, their costume avatar in the gold ring */
.trader { position: relative; width: 26cqw; max-width: none; aspect-ratio: 684 / 357; padding: 0; border: 0; border-radius: 0; box-shadow: none; gap: 0;
  background: center / 100% 100% no-repeat; filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.45)); }
.trader > .dav { position: absolute; left: 21%; top: 47%; transform: translate(-50%, -50%); }
.trader .txt { position: absolute; left: 39%; right: 8%; top: 18%; bottom: 20%; display: grid; align-content: center; gap: .1cqw; }
.trader .nm { font-size: 1.7cqw; } .trader .st { font-size: 1.1cqw; } .trader .got { font-size: 1.3cqw; line-height: 1.1; }
.traders { gap: 1cqw; }

/* IT'S A DEAL! */
.burst { position: absolute; left: 50%; top: 42%; width: 22cqw; z-index: 14; pointer-events: none; transform: translate(-50%, -50%); }
.burst.popin { animation: burst 1.6s cubic-bezier(.2,1.5,.4,1) forwards; }
@keyframes burst { 0% { transform: translate(-50%, -50%) scale(.2) rotate(-20deg); opacity: 0; } 20% { transform: translate(-50%, -50%) scale(1.1) rotate(4deg); opacity: 1; }
  80% { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }

/* the WINNINGS board */
.money { width: 17cqw; aspect-ratio: 881 / 1446; top: 12%; padding: 0; background: url(/art/deal/kit/winnings-board.png) center / 100% 100% no-repeat; border: 0; box-shadow: none;
  filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.45)); }
.money .list { position: absolute; left: 13%; right: 13%; top: 21%; bottom: 8%; overflow: hidden; display: grid; align-content: start; gap: .2cqw; }
.money .r { font-size: 1.05cqw; } .money .r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the winner's screen */
.wonshow { position: absolute; inset: 0; z-index: 15; background: url(/art/deal/kit/winner-stage.jpg) center / cover; }
.wonshow .wsign { position: absolute; left: 50%; top: 9%; width: 32cqw; transform: translateX(-50%); filter: drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.5)); animation: signpop .7s cubic-bezier(.2,1.5,.4,1); }
.wonshow h1 { position: absolute; left: 0; right: 0; top: 25%; margin: 0; text-align: center; font: 700 3cqw 'Fredoka', sans-serif; color: #fff; text-shadow: 0 .3cqw 0 #5a2b00, 0 0 1.4cqw rgba(255,79,176,.9); }
.podium3 { position: absolute; left: 50%; transform: translateX(-50%); width: 44cqw; bottom: 12%; aspect-ratio: 1633 / 858; background: url(/art/deal/kit/winner-podium.png) center / 100% 100% no-repeat; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.45)); }
.podium3 .pp { position: absolute; transform: translate(-50%, -100%); display: grid; justify-items: center; text-align: center; animation: grow .6s ease-out backwards; }
.podium3 .pp b { font-weight: 900; font-size: 1.4cqw; text-shadow: 0 .2cqw .5cqw #000; white-space: nowrap; }
.podium3 .pp small { font: 700 1.6cqw 'Fredoka', sans-serif; color: var(--gold); text-shadow: 0 .2cqw .5cqw #000; }
.podium3 .p1 { left: 50%; top: 4%; } .podium3 .p2 { left: 17%; top: 24%; animation-delay: .3s; } .podium3 .p3 { left: 83%; top: 28%; animation-delay: .6s; }
.wonshow .row { position: absolute; left: 0; right: 0; bottom: 3%; display: flex; justify-content: center; gap: 1cqw; }
.wonshow .btn { font-size: 1.6cqw; }
.stage:has(.wonshow:not([hidden])) .host { z-index: 16; } .stage:has(.wonshow:not([hidden])) .bubble { z-index: 17; }
.timer { top: 27%; left: 2.5%; }
.guesses { top: 50%; }
.stage > .round { position: absolute; left: 1.2%; bottom: 10%; z-index: 20; }
.money { top: 24%; width: 15cqw; }
/* the clock stands on the pillar between door 1 and door 2; the winnings board + audience guesses down the left */
.timer { left: 31.6%; top: 21%; width: 9cqw; }
.money { top: 21%; width: 12cqw; left: 1.5%; }
.money .r { font-size: .9cqw; }
.guesses { top: 57%; left: 1.5%; width: 12cqw; font-size: 1cqw; padding: .6cqw; }
.guesses b { font-size: 1.8cqw; }
.podium3 { width: 33cqw; bottom: 13%; }
.podium3 .pp b { font-size: 1.2cqw; } .podium3 .pp small { font-size: 1.4cqw; }
.bubble { top: 17%; }
/* phones: the show's stage behind everything, light-up signs on the cards */
.dphone { background: linear-gradient(180deg, rgba(20,5,46,.55), rgba(20,5,46,.92) 55%), url(/art/deal/background.jpg) center top / cover fixed, #14052e; }
.dphone .card { background: rgba(30,8,70,.78); backdrop-filter: blur(4px); }
.psign { width: 92%; max-width: 360px; justify-self: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
.dphone #dress .psign { width: 70%; border-radius: 14px; }
.dphone .dav .face { font-size: .4em; }
.trader .txt { left: 41%; }

/* ---- WINNINGS board + countdown fitted to their art (2026-10-07: "information hanging off… timer hanging out") ---- */
.money { top: 15%; left: 1.2%; width: 17cqw; }
.money .list { left: 14%; right: 12%; top: 22%; bottom: 7%; gap: .25cqw; }
.money .r { display: grid; grid-template-columns: 2.2cqw 1fr auto; align-items: center; gap: .45cqw; font-size: .95cqw; padding: .1cqw 0; min-width: 0; }
.money .r .dav { font-size: 2.2cqw !important; overflow: visible; }
.money .r .dav .frame { display: none; }   /* just the face here — the costume frames don't fit a scoreboard row */
.money .r span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.money .r b { font: 700 1.05cqw 'Fredoka', sans-serif; color: var(--gold); white-space: nowrap; }
.guesses { top: 66%; left: 1.2%; width: 15cqw; }
/* the clock: the number sits inside the purple face */
.timer { display: block; width: 8.4cqw; padding: 0; }
.timer b { position: absolute; left: 0; right: 0; top: 41%; text-align: center; font-size: 2.5cqw; line-height: 1; }
.timer small { position: absolute; left: 0; right: 0; top: 66%; text-align: center; font-size: .62cqw; letter-spacing: .06em; }
.money .r { grid-template-columns: 1.7cqw 1fr auto; } .money .r .em { font-style: normal; font-size: 1.45cqw; line-height: 1; }
/* phone costume picker: the costume pictures stick out past their square, so give each one room */
.costumes { gap: 16px 8px; margin-top: 10px; }
.costumes button { padding: 16px 2px 6px; overflow: visible; }
.costumes button > span:last-child { position: relative; z-index: 1; margin-top: 4px; }
.money .list { left: 20%; right: 19%; top: 27%; bottom: 12%; } .money .r { font-size: .9cqw; grid-template-columns: 1.5cqw 1fr auto; gap: .35cqw; } .money .r .em { font-size: 1.25cqw; } .money .r b { font-size: .95cqw; }
.wonshow h1 { top: 23%; } .podium3 { bottom: 11%; width: 31cqw; } .podium3 .p1 { top: 10%; }