/* Price Party — TV and phones (Kita 2026-10-06). Bright retro-modern daytime game show: orange, hot pink, sunny yellow,
   turquoise, royal blue, light bulbs. Big text everywhere (made with 55+ players in mind). */
:root { --pink: #ff3fa4; --yellow: #ffd23d; --orange: #ff8a1f; --teal: #22d3c5; --blue: #2a5cff; --navy: #0b1450; }

/* ================= TV ================= */
.pptv { margin: 0; background: #070b30; 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/priceparty/background.jpg) center / cover, radial-gradient(80% 70% at 50% 30%, #3a52ff 0%, #1a1f8f 45%, #0b0d45 100%); }
.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; }
.round { padding: .5cqw 1.4cqw; border-radius: 99px; background: rgba(10,14,70,.85); border: .2cqw solid var(--yellow); font: 700 1.5cqw 'Fredoka', sans-serif; color: var(--yellow); }
.glass { background: rgba(10, 16, 80, .82); border: .22cqw solid var(--yellow); border-radius: 1.4cqw; box-shadow: 0 0 1.6cqw rgba(255,210,61,.45); }
.banner { position: absolute; left: 50%; top: 2.5%; transform: translateX(-50%); z-index: 6; padding: .8cqw 3.4cqw; border-radius: 1.4cqw;
  background: linear-gradient(180deg, #1c2bb0, #0b1260); border: .3cqw solid var(--yellow); box-shadow: 0 0 2.4cqw rgba(255,210,61,.7), inset 0 0 1cqw rgba(255,255,255,.2);
  font: 700 3.2cqw/1 'Fredoka', sans-serif; letter-spacing: .06em; color: var(--yellow); text-shadow: 0 .3cqw 0 #8a4b00; white-space: nowrap; }
.view { position: absolute; inset: 0; }
.view[hidden], .stage [hidden] { display: none !important; }

/* the host */
.host { position: absolute; right: -1%; bottom: 0; height: 74%; z-index: 5; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.5)); transform-origin: 50% 100%; transition: transform .25s; }
.host.bounce { animation: hbounce .5s; }
@keyframes hbounce { 40% { transform: scale(1.04) translateY(-1%); } }
.bubble { position: absolute; right: 17%; top: 18%; z-index: 9; max-width: 30%; padding: 1cqw 1.6cqw; border-radius: 1.6cqw; background: #fff; color: #10154d;
  font: 700 1.9cqw/1.25 'Fredoka', sans-serif; box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.4); }
.bubble.pop { animation: pop .35s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { from { transform: scale(.4); opacity: 0; } }

/* ---- item up for bid ---- */
.timer { position: absolute; left: 3%; top: 17%; width: 13cqw; aspect-ratio: 1; display: grid; place-items: center; z-index: 6; }
.timer svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.timer circle { fill: rgba(8,12,60,.9); stroke-width: 7; } .timer .bg { stroke: rgba(255,255,255,.15); }
.timer .fg { fill: none; stroke: #4fe3ff; stroke-linecap: round; stroke-dasharray: 276.5; transition: stroke-dashoffset .9s linear; filter: drop-shadow(0 0 4px #4fe3ff); }
.timer b { position: relative; font: 700 5.2cqw/1 'Fredoka', sans-serif; margin-top: -1cqw; } .timer small { position: absolute; bottom: 24%; font-weight: 900; font-size: 1.05cqw; letter-spacing: .08em; }
.timer.low .fg { stroke: #ff4f6a; filter: drop-shadow(0 0 4px #ff4f6a); }
.prize { position: absolute; left: 30%; width: 40%; top: 15%; height: 47%; display: grid; place-items: center; }
.turntable { position: absolute; bottom: 0; left: 8%; right: 8%; height: 22%; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 40%, #fff6c8, #ffc83d 45%, #b06a00 100%); box-shadow: 0 0 3cqw rgba(255,210,61,.8), 0 1cqw 0 #7a4200; }
.item { position: relative; max-height: 88%; max-width: 70%; object-fit: contain; filter: drop-shadow(0 1.4cqw 1.4cqw rgba(0,0,0,.45)); animation: spinin .7s ease-out; z-index: 1; }
@keyframes spinin { from { transform: scale(.3) rotate(-12deg); opacity: 0; } }
.tag { position: absolute; right: -14%; top: 8%; z-index: 2; padding: 1cqw 2cqw 1.2cqw 2.6cqw; min-width: 15cqw; text-align: center; transform: rotate(7deg);
  background: #fff7e0; color: #b3122e; border-radius: .8cqw 1.6cqw 1.6cqw .8cqw; box-shadow: 0 .8cqw 1.8cqw rgba(0,0,0,.4); clip-path: polygon(14% 0, 100% 0, 100% 100%, 14% 100%, 0 50%); }
.tag small { display: block; color: #10154d; font: 800 1.2cqw 'Nunito', sans-serif; }
.tag b { font: 700 4cqw/1 'Fredoka', sans-serif; }
.tag.show { animation: tagflip .6s ease-out; background: #fff; }
@keyframes tagflip { 0% { transform: rotate(7deg) rotateY(90deg); } 100% { transform: rotate(7deg); } }
.podiums { position: absolute; left: 2%; right: 18%; bottom: 3%; display: flex; justify-content: center; gap: .9cqw; z-index: 7; flex-wrap: wrap; }
.pod { width: 10.5cqw; display: grid; justify-items: center; }
.pod .face { width: 5.4cqw; height: 5.4cqw; border-radius: 50%; display: grid; place-items: center; font-size: 3.3cqw; background: rgba(255,255,255,.18);
  border: .3cqw solid var(--c, var(--yellow)); box-shadow: 0 0 1.4cqw var(--c, var(--yellow)); margin-bottom: -.8cqw; z-index: 1; background-size: cover; }
.pod .box { width: 100%; padding: 1cqw .4cqw .6cqw; border-radius: 1cqw; text-align: center; background: linear-gradient(180deg, #121a78, #070b3d);
  border: .25cqw solid var(--c, var(--yellow)); box-shadow: 0 0 1.4cqw color-mix(in srgb, var(--c, var(--yellow)) 70%, transparent); }
.pod .nm { font-weight: 900; font-size: 1.3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .bid { font: 700 2.4cqw/1.1 'Fredoka', monospace; color: #fff; text-shadow: 0 0 .8cqw var(--c, var(--yellow)); }
.pod .bid.wait { opacity: .45; }
.pod.over .bid { color: #ff7a8a; text-decoration: line-through; }
.pod.win { transform: translateY(-1cqw) scale(1.08); } .pod.win .box { background: linear-gradient(180deg, #ffde4a, #ff9a1f); color: #3a1a00; } .pod.win .bid { color: #3a1a00; text-shadow: none; }
.podiums.many .pod { width: 7.4cqw; } .podiums.many .pod .face { width: 3.8cqw; height: 3.8cqw; font-size: 2.3cqw; } .podiums.many .pod .bid { font-size: 1.7cqw; } .podiums.many .pod .nm { font-size: 1cqw; }

/* ---- chip drop ---- */
.board { position: absolute; left: 25%; top: 13%; width: 46%; height: 85%; }
.dropview .side { position: absolute; left: 2%; top: 16%; width: 20%; max-height: 64%; overflow: hidden; padding: 1cqw; }
.side h3 { margin: 0 0 .6cqw; text-align: center; font: 700 2cqw 'Fredoka', sans-serif; color: var(--yellow); }
.side .r { display: flex; align-items: center; gap: .8cqw; padding: .45cqw .6cqw; margin-bottom: .4cqw; border-radius: .8cqw; background: rgba(255,255,255,.08); font-weight: 900; font-size: 1.35cqw; }
.side .r b { margin-left: auto; color: var(--yellow); font: 700 1.6cqw 'Fredoka', sans-serif; }
.side .r.big { background: linear-gradient(90deg, rgba(255,210,61,.45), rgba(255,63,164,.35)); }
.hint { position: absolute; left: 2%; bottom: 5%; width: 20%; text-align: center; font: 700 1.6cqw 'Fredoka', sans-serif; color: #fff; text-shadow: 0 .2cqw .6cqw #000; }

/* ---- big wheel ---- */
.drum { position: absolute; left: 34%; top: 12%; width: 20%; height: 84%; }
.drum canvas { width: 100%; height: 100%; }
.drum .pointer { position: absolute; right: -9%; top: 50%; transform: translateY(-50%); width: 0; height: 0;
  border-top: 2.2cqw solid transparent; border-bottom: 2.2cqw solid transparent; border-right: 3.6cqw solid #ff3b4e; filter: drop-shadow(0 0 1cqw rgba(255,60,80,.9)); }
.spinners { position: absolute; left: 58%; top: 18%; width: 24%; display: grid; gap: 1cqw; z-index: 6; }
.sp { display: flex; align-items: center; gap: 1cqw; padding: .8cqw 1.2cqw; border-radius: 1.2cqw; background: rgba(10,16,80,.88); border: .22cqw solid var(--c, var(--teal)); }
.sp .face { font-size: 3cqw; } .sp .nm { font-weight: 900; font-size: 1.6cqw; } .sp .spins { font-size: 1.15cqw; opacity: .85; }
.sp .tot { margin-left: auto; font: 700 3.2cqw/1 'Fredoka', sans-serif; color: var(--yellow); }
.sp.now { box-shadow: 0 0 2cqw var(--yellow); transform: scale(1.04); } .sp.over .tot { color: #ff6a7a; } .sp.best { background: linear-gradient(90deg, #ffde4a, #ff9a1f); color: #3a1a00; } .sp.best .tot { color: #3a1a00; }
.rule { position: absolute; left: 58%; bottom: 8%; width: 24%; padding: 1cqw; text-align: center; font: 700 1.6cqw 'Fredoka', sans-serif; }
.rule b { color: var(--yellow); font-size: 2.2cqw; }

/* ---- showcase ---- */
.showprizes { position: absolute; left: 5%; right: 20%; top: 15%; height: 42%; display: flex; justify-content: center; align-items: end; gap: 2cqw; }
.showprizes figure { margin: 0; width: 30%; display: grid; justify-items: center; gap: .6cqw; animation: spinin .7s ease-out backwards; }
.showprizes figure:nth-child(2) { animation-delay: .5s; } .showprizes figure:nth-child(3) { animation-delay: 1s; }
.showprizes img { width: 100%; max-height: 21cqw; object-fit: contain; filter: drop-shadow(0 1cqw 1.4cqw rgba(0,0,0,.45)); }
.showprizes figcaption { padding: .4cqw 1.2cqw; border-radius: 99px; background: rgba(10,16,80,.85); font-weight: 900; font-size: 1.4cqw; text-align: center; }
.finalists { position: absolute; left: 4%; right: 20%; bottom: 4%; display: flex; justify-content: space-between; align-items: end; }
.finalists .pod { width: 17cqw; } .finalists .pod .face { width: 7cqw; height: 7cqw; font-size: 4.4cqw; } .finalists .pod .bid { font-size: 3cqw; } .finalists .pod .nm { font-size: 1.7cqw; }
.actual { position: absolute; left: 32%; width: 22%; bottom: 6%; padding: 1cqw; text-align: center; animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
.actual small { display: block; font-weight: 900; font-size: 1.3cqw; color: #fff; } .actual b { font: 700 4cqw/1 'Fredoka', sans-serif; color: var(--yellow); }
.audience { position: absolute; left: 4%; top: 64%; font-weight: 900; font-size: 1.4cqw; color: #fff; text-shadow: 0 .2cqw .6cqw #000; }

/* host controls + the money board (between rounds) */
.ctl { position: absolute; right: 1.2%; bottom: 2%; z-index: 21; display: flex; gap: .6cqw; }
.money { position: absolute; left: 2%; top: 14%; width: 22%; z-index: 8; padding: 1cqw; }
.money h3 { margin: 0 0 .5cqw; text-align: center; font: 700 1.8cqw 'Fredoka', sans-serif; color: var(--yellow); }
.money .r { display: flex; gap: .8cqw; align-items: center; font-weight: 900; font-size: 1.3cqw; padding: .3cqw .4cqw; }
.money .r b { margin-left: auto; color: var(--yellow); }

/* lobby + winner panels */
.panel { position: absolute; left: 9%; right: 22%; top: 12%; bottom: 6%; z-index: 15; padding: 2cqw 2.4cqw; border-radius: 2cqw;
  background: rgba(10, 14, 70, .9); border: .3cqw solid var(--yellow); box-shadow: 0 0 3cqw rgba(255,210,61,.45); display: grid; align-content: start; gap: 1.2cqw; }
.panel .title { width: 52%; justify-self: center; margin-top: -1cqw; } .panel h1 { margin: 0; text-align: center; font: 700 4cqw 'Fredoka', sans-serif; color: var(--yellow); }
.panel .cols { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2cqw; }
.how { margin: 0; padding-left: 2.2cqw; display: grid; gap: .8cqw; font-size: 1.55cqw; line-height: 1.3; }
.how b { color: var(--yellow); }
.join { display: flex; align-items: center; gap: 1.6cqw; margin-top: 1.4cqw; }
.join .qr { background: #fff; padding: .6cqw; border-radius: .8cqw; width: 12cqw; } .join .qr img, .join .qr canvas { width: 100% !important; height: auto !important; display: block; }
.bigcode { font: 700 5.4cqw/1 'Fredoka', sans-serif; letter-spacing: .12em; color: var(--yellow); }
.muted { color: #c8cff5; font-weight: 800; font-size: 1.3cqw; }
.seats { display: flex; flex-wrap: wrap; gap: .6cqw; align-content: start; min-height: 12cqw; }
.seat { display: flex; align-items: center; gap: .5cqw; padding: .4cqw .9cqw; border-radius: 99px; background: rgba(255,255,255,.12); font-weight: 900; font-size: 1.35cqw; }
.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; } .won .place .face { font-size: 5cqw; }
.won .place .stand { width: 13cqw; border-radius: 1cqw 1cqw 0 0; display: grid; place-items: center; font: 700 2.2cqw 'Fredoka', sans-serif; color: #3a1a00;
  background: linear-gradient(180deg, #ffe48a, #ff9a1f); }
.won .row { display: flex; gap: 1cqw; }

/* ================= PHONE ================= */
.ppphone { margin: 0; min-height: 100dvh; color: #fff; font-family: 'Nunito', sans-serif; background: radial-gradient(120% 60% at 50% 0%, #3446ff, #141a8a 50%, #070b3d); }
.ppphone .phud { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-weight: 900; font-size: 1.1rem; }
.ppphone .phud .pill { margin-left: auto; background: rgba(0,0,0,.35); padding: 6px 12px; border-radius: 99px; color: var(--yellow); font: 700 1.2rem 'Fredoka', sans-serif; }
.ppphone main { padding: 4px 16px 24px; display: grid; gap: 14px; max-width: 480px; margin: 0 auto; }
.ppphone h1 { margin: 6px 0 0; text-align: center; font: 700 2rem/1.1 'Fredoka', sans-serif; color: var(--yellow); text-shadow: 0 3px 0 #7a3c00; }
.ppphone h2 { margin: 0; text-align: center; font: 700 1.3rem 'Fredoka', sans-serif; }
.ppphone p { margin: 0; text-align: center; font-size: 1.15rem; line-height: 1.4; }
.ppphone .card { padding: 16px; border-radius: 20px; background: rgba(8,12,60,.7); border: 2px solid rgba(255,210,61,.55); display: grid; gap: 12px; }
.ppphone .item { width: 70%; max-height: 28vh; object-fit: contain; justify-self: center; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.display { text-align: center; padding: 12px; border-radius: 16px; background: #050a33; border: 3px solid var(--yellow); font: 700 2.8rem/1 'Fredoka', monospace; letter-spacing: .04em; }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.keys button { padding: 16px 0; border: 0; border-radius: 16px; font: 700 2rem 'Fredoka', sans-serif; color: #fff; background: linear-gradient(180deg, #3d6bff, #1d3fd0);
  box-shadow: 0 5px 0 #0d2386; cursor: pointer; } .keys button:active { transform: translateY(3px); box-shadow: 0 2px 0 #0d2386; }
.keys .del { background: linear-gradient(180deg, #ff6a7a, #d8233c); box-shadow: 0 5px 0 #8a1020; }
.go { width: 100%; padding: 18px; border: 0; border-radius: 20px; font: 700 1.7rem 'Fredoka', sans-serif; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #4be37a, #12a84a); box-shadow: 0 6px 0 #0a6b2e, 0 0 20px rgba(75,227,122,.5); }
.go:disabled { filter: grayscale(.8); opacity: .6; } .go.alt { background: linear-gradient(180deg, #ff6ac2, #d8239b); box-shadow: 0 6px 0 #8a0f60; }
.go.blue { background: linear-gradient(180deg, #4f8bff, #2350d8); box-shadow: 0 6px 0 #0d2a86; }
.slider { width: 100%; accent-color: var(--yellow); height: 44px; }
.mini { position: relative; height: 150px; border-radius: 16px; background: linear-gradient(180deg, #2350d8, #102a9a); overflow: hidden; border: 3px solid var(--yellow); }
.mini .peg { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #ffd23d; transform: translate(-50%, -50%); }
.mini .chip { position: absolute; top: 10px; width: 30px; height: 30px; border-radius: 50%; background: #ff3fa4; border: 3px solid #fff; transform: translateX(-50%); display: grid; place-items: center; font-size: 16px; transition: left .15s; }
.chipcount { text-align: center; font: 700 1.3rem 'Fredoka', sans-serif; color: var(--yellow); }
.bigwait { text-align: center; font-size: 4rem; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.result { text-align: center; font: 700 2.2rem/1.2 'Fredoka', sans-serif; color: var(--yellow); }

/* the small join box in the corner (same as the other games) */
.stage .codechip { display: flex; align-items: center; gap: .8cqw; padding: .5cqw .9cqw; border-radius: 1cqw; background: rgba(10,14,70,.88); border: .2cqw solid var(--yellow);
  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(--yellow); }
.timer { top: 20%; }
/* the title banner sits under the top bar (logo · round · join box) */
.banner { top: 12%; font-size: 2.8cqw; }
.prize { top: 23%; height: 42%; }
.timer { top: 24%; }
.board { top: 21%; height: 77%; }
.dropview .side { top: 24%; }
.drum { top: 21%; height: 76%; }
.spinners { top: 26%; }
.showprizes { top: 23%; height: 38%; }
.bubble { top: auto; bottom: 34%; right: 17%; }
/* phone: the whole bid screen fits without scrolling */
.ppphone main { gap: 10px; }
.ppphone .card { padding: 12px; gap: 8px; }
.ppphone .item { max-height: 17vh; animation: none; }
.ppphone #bid p { font-size: 1rem; }
.display { font-size: 2.3rem; padding: 8px; }
.keys { gap: 8px; } .keys button { padding: 10px 0; font-size: 1.7rem; }
.go { padding: 14px; font-size: 1.5rem; }
.item { max-height: 74%; }
.finalists { right: 26%; bottom: 6%; }

/* ChatGPT art kit (Kita 2026-10-07: "nothing can look generic") — the gold-ring price tag */
.tag { background: url(/art/priceparty/kit/tag.png) center/100% 100% no-repeat; clip-path: none; box-shadow: none; border-radius: 0;
  width: 24cqw; aspect-ratio: 778/326; min-width: 0; padding: 0 2.4cqw 0 8cqw; box-sizing: border-box; display: grid; align-content: center;
  filter: drop-shadow(0 .8cqw 1.4cqw rgba(0,0,0,.45)); }
.tag.show { background: url(/art/priceparty/kit/tag.png) center/100% 100% no-repeat; }

/* ---- the ChatGPT kit, wired in (2026-10-07) ---- */
/* light-up round signs instead of text banners; the small pill under it says the round / the reveal */
.banner.signed { background: none; border: 0; box-shadow: none; padding: 0; top: 10.5%; display: grid; justify-items: center; gap: .2cqw; animation: signpop .55s cubic-bezier(.2,1.5,.4,1); }
.banner.signed img { width: 30cqw; filter: drop-shadow(0 .6cqw 1.2cqw rgba(0,0,0,.5)); }
.banner.signed span { font-size: 1.5cqw; padding: .3cqw 1.2cqw; border-radius: 99px; background: rgba(10,14,70,.9); border: .18cqw solid var(--yellow); text-shadow: none; }
.banner.signed span:empty { display: none; }
@keyframes signpop { from { transform: translateX(-50%) scale(.4); opacity: 0; } }
.prize { top: 27%; height: 38%; }
.timer { top: 26%; }

/* contestant podiums (ChatGPT): name + bid on the podium's screen, the podium runs off the bottom like on TV */
.pod { width: 10.5cqw; aspect-ratio: 391 / 680; position: relative; display: block; margin-bottom: -9cqw;
  background: url(/art/priceparty/kit/podium-1.png) top / 100% 100% no-repeat; filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.45)); }
.pod:nth-child(4n+2) { background-image: url(/art/priceparty/kit/podium-2.png); }
.pod:nth-child(4n+3) { background-image: url(/art/priceparty/kit/podium-3.png); }
.pod:nth-child(4n+4) { background-image: url(/art/priceparty/kit/podium-4.png); }
.pod .face { position: absolute; left: 50%; top: -3.6cqw; transform: translateX(-50%); margin: 0; background: radial-gradient(circle at 40% 35%, #fff6d8, #ffd6ec); }
.pod .box { position: absolute; left: 12%; right: 12%; top: 17.5%; height: 15.4%; padding: 0; border: 0; box-shadow: none; background: none; border-radius: 0;
  display: grid; align-content: center; justify-items: center; }
.pod .nm { font-size: 1.05cqw; max-width: 100%; } .pod .bid { font-size: 1.7cqw; }
.pod.win .box { background: linear-gradient(180deg, #ffde4a, #ff9a1f); border-radius: .5cqw; }
.podiums { bottom: 0; gap: 1.2cqw; }
.podiums.many .pod { width: 7.4cqw; margin-bottom: -7cqw; } .podiums.many .pod .face { top: -2.8cqw; } .podiums.many .pod .bid { font-size: 1.2cqw; } .podiums.many .pod .nm { font-size: .8cqw; }
.finalists .pod { width: 15cqw; margin-bottom: -12cqw; } .finalists .pod .face { top: -5.4cqw; } .finalists .pod .bid { font-size: 2.4cqw; } .finalists .pod .nm { font-size: 1.4cqw; }
.finalists { bottom: 0; }

/* chip drop: the ChatGPT board is tall, so the canvas keeps its shape */
.board { left: 30%; width: auto; height: 78%; top: 20%; aspect-ratio: 1071 / 1416; }

/* the big wheel: the gold casing around the spinning numbers, the red pointer on the window */
.drum { left: 31%; top: 20%; height: 79%; width: auto; aspect-ratio: .6516; }
.drum canvas { position: absolute; left: 30.34%; top: 9.68%; width: 39.11%; height: 78.08%; }
.drum .casing { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.5)); }
.drum .pointer { position: absolute; left: 62%; right: auto; top: 50%; width: 9cqw; height: auto; transform: translateY(-50%); border: 0; filter: drop-shadow(0 0 1cqw rgba(255,60,80,.7)); }
.spinners { left: 60%; }
.rule { left: 60%; }

/* lobby title */
.panel .title { width: 40%; margin-top: -1.4cqw; filter: drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.5)); }

/* the winner's screen */
.wonshow { position: absolute; inset: 0; z-index: 15; background: url(/art/priceparty/kit/winner-stage.jpg) center / cover; }
.wonshow .wsign { position: absolute; left: 50%; top: 9%; width: 34cqw; 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: 26%; margin: 0; text-align: center; font: 700 3.4cqw 'Fredoka', sans-serif; color: #fff; text-shadow: 0 .3cqw 0 #8a2b00, 0 0 1.4cqw rgba(255,63,164,.9); }
.cheque { position: absolute; left: 3%; top: 39%; width: 34cqw; aspect-ratio: 900 / 457; transform: rotate(-5deg); background: url(/art/priceparty/kit/cheque.png) center / 100% 100% no-repeat;
  filter: drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.5)); animation: chequein .9s .4s cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes chequein { from { transform: rotate(-30deg) scale(.2); opacity: 0; } }
.cheque .payee { position: absolute; left: 9%; width: 54%; top: 54%; text-align: center; font: 700 2.2cqw/1 'Fredoka', sans-serif; color: #10154d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cheque .amt { position: absolute; left: 72.5%; width: 20%; top: 45%; height: 14%; display: grid; place-items: center; font: 700 2cqw/1 'Fredoka', sans-serif; color: #0a6b2e; }
.cheque .sig { position: absolute; left: 56%; width: 30%; top: 70%; text-align: center; font: italic 700 1.5cqw/1 'Brush Script MT', cursive; color: #10154d; transform: rotate(-3deg); }
.podium3 { position: absolute; left: 41%; width: 38cqw; bottom: 12%; aspect-ratio: 900 / 503; background: url(/art/priceparty/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: spinin .6s ease-out backwards; }
.podium3 .pp .face { width: 6cqw; height: 6cqw; border-radius: 50%; display: grid; place-items: center; font-size: 3.8cqw; background: radial-gradient(circle at 40% 35%, #fff6d8, #ffd6ec); border: .3cqw solid #ffd23d; box-shadow: 0 0 1.4cqw rgba(255,210,61,.8); }
.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.5cqw 'Fredoka', sans-serif; color: var(--yellow); text-shadow: 0 .2cqw .5cqw #000; }
.podium3 .p1 { left: 50%; top: 1%; } .podium3 .p1 .face { width: 8cqw; height: 8cqw; font-size: 5cqw; }
.podium3 .p2 { left: 17%; top: 42%; animation-delay: .3s; } .podium3 .p3 { left: 83%; top: 42%; 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; }
.podiums .pod { margin-bottom: -6cqw; } .podiums .pod .nm { font-size: 1.2cqw; } .podiums .pod .bid { font-size: 1.9cqw; }
.board { top: 12%; height: 88%; left: 29%; }
.dropview .side { top: 26%; }
.money { top: 24%; }
.showprizes { top: 25%; height: 32%; align-items: center; }
.showprizes img { max-height: 15cqw; }
.audience { left: 22%; right: 30%; top: auto; bottom: 22%; text-align: center; }
.podium3 { width: 34cqw; bottom: 12%; left: 42%; }
.podium3 .p1 { top: 16%; }
.wonshow h1 { top: 24%; font-size: 3cqw; }
/* phones: the show's stage behind everything, light-up signs on the cards */
.ppphone { background: linear-gradient(180deg, rgba(7,11,61,.5), rgba(7,11,61,.92) 55%), url(/art/priceparty/background.jpg) center top / cover fixed, #070b3d; }
.ppphone .card { background: rgba(8,12,60,.78); backdrop-filter: blur(4px); }
.psign { width: 90%; max-width: 360px; justify-self: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
#waitSign[src*="title"] { width: 70%; }
.ppphone #bid .psign { width: 72%; }
.mini { background: linear-gradient(180deg, #2350d8, #102a9a); border: 4px solid #ffd23d; box-shadow: 0 0 0 3px #b8860b, 0 0 18px rgba(255,210,61,.6); }
.mini .peg { width: 10px; height: 10px; background: radial-gradient(circle at 35% 30%, #fff6c8, #ffd23d 45%, #a86b00); }
.mini .chip { background: url(/art/priceparty/kit/chips/red.png) center / contain no-repeat; border: 0; width: 38px; height: 38px; }

/* ==== tidy-up (Kita 2026-10-07: "messy… not fitting") — the podium screen shows the bid big; the name is a tag ==== */
.podiums .pod, .finalists .pod { width: 11cqw; }
.pod .box { top: 17%; height: 16%; }
.pod .nm { position: absolute; left: 50%; top: -1.6cqw; transform: translateX(-50%); max-width: 12cqw; padding: .15cqw .7cqw; border-radius: 99px;
  background: rgba(10,14,70,.92); box-shadow: 0 0 0 .12cqw var(--c, var(--yellow)); font-size: 1.05cqw !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.pod .face { top: -5.4cqw; width: 4.4cqw; height: 4.4cqw; font-size: 2.8cqw; }
.pod .bid { font-size: 2.1cqw !important; }
.podiums .pod { margin-bottom: -5cqw; }
.podiums.many .pod { width: 8cqw; } .podiums.many .pod .bid { font-size: 1.5cqw !important; } .podiums.many .pod .face { top: -4.4cqw; width: 3.4cqw; height: 3.4cqw; font-size: 2.1cqw; }
.finalists .pod { width: 15cqw; } .finalists .pod .bid { font-size: 2.6cqw !important; } .finalists .pod .face { top: -7cqw; width: 5.6cqw; height: 5.6cqw; font-size: 3.6cqw; } .finalists .pod .nm { font-size: 1.3cqw !important; top: -1.9cqw; }
.money { top: 15%; }
.dropview .side { top: 15%; }

/* "Found on Amazon.com" card at the reveal (Kita 2026-10-07) */
.amz { position: absolute; left: -16%; bottom: 4%; z-index: 3; width: 21cqw; display: grid; gap: .5cqw; padding: 1cqw 1.3cqw; border-radius: 1.2cqw;
  background: #fff; color: #131a22; box-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.45), 0 0 0 .3cqw #ff9900; transform: rotate(-4deg); animation: amzin .6s cubic-bezier(.2,.9,.3,1.3) both; }
.amz-h { font: 800 1.15cqw 'Nunito', sans-serif; color: #565959; } .amz-h b { color: #131a22; }
.amz-t { font: 700 1.25cqw/1.25 'Nunito', sans-serif; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.amz-p { display: flex; align-items: baseline; justify-content: space-between; gap: 1cqw; }
.amz-p b { font: 700 2.2cqw/1 'Fredoka', sans-serif; color: #b12704; } .amz-p small { font: 700 .95cqw 'Nunito', sans-serif; color: #565959; }
@keyframes amzin { from { transform: rotate(-4deg) translateY(3cqw) scale(.8); opacity: 0; } to { transform: rotate(-4deg); opacity: 1; } }

/* Kita 2026-10-09: "the picture of the hot tub is kind of cut off" — nothing sits on the prize any more:
   the Amazon card moves to the empty stage on the left, Shawn's bubble stays to the right of the price tag,
   and the winner's name stays readable on the gold podium. */
.amz { left: -66%; bottom: 6%; width: 19cqw; }
.bubble { right: 15%; bottom: 30%; max-width: 18%; }
.pod.win .nm { color: #fff; }

/* Kita 2026-10-09: "you have to scroll down to see the [green] button … it should all fit on the screen without
   scrolling on your phone". The bid card is sized to the screen (dvh = the visible height, browser bars included),
   the picture and sign shrink to fit, and LOCK IN BID is always on screen. */
.ppphone #bid { gap: 1dvh; padding: 1.2dvh 12px; }
.ppphone #bid .psign { max-height: 7dvh; width: auto; justify-self: center; }
.ppphone #bid h2 { font-size: 1.05rem; }
.ppphone #bid .item { max-height: 13dvh; }
.ppphone #bid p { font-size: .95rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ppphone #bid .display { font-size: 2rem; padding: .8dvh 8px; }
.ppphone #bid .keys { gap: 1dvh 8px; }
.ppphone #bid .keys button { padding: 0; height: clamp(40px, 6.6dvh, 64px); font-size: 1.55rem; }
.ppphone #bid .go { padding: 1.5dvh; font-size: 1.4rem; position: sticky; bottom: max(8px, env(safe-area-inset-bottom)); z-index: 2; }
@media (max-height: 620px) { .ppphone #bid .psign { display: none; } }
.podium3 .pp.p1 .face { width: 9cqw; height: 9cqw; font-size: 5.6cqw; }   /* the winner's camera sits here — bigger (Kita 2026-10-09) */
.hostvid { width: auto; aspect-ratio: 448 / 672; }   /* Shawn's video clips (same spot as his still pictures) */