/* Plate Bingo party mode: car (1920×1200, 1rem = 10px of the mockup) and phone (1rem = 10px of 1170×2532).
   Structure + Voltage Vixen (Night Charge) look. Open Road and Pure Play overrides live in party-themes.css.
   Player colour = --c, set per avatar by .c0–.c3 from the theme's --s0–--s3. */
:root, [data-theme=vixen] { --s0: #00E5FF; --s1: #B6FF3B; --s2: #FFB020; --s3: #FF4FD8; --plate-cap: 'VOLTAGE · VIXEN'; --c-ink: #04101a; }
.c0 { --c: var(--s0); } .c1 { --c: var(--s1); } .c2 { --c: var(--s2); } .c3 { --c: var(--s3); }

html.pcar { font-size: calc(min(100vw / 1920, 100dvh / 1200) * 10) !important; }
html.pphone { font-size: calc(100vw / 117) !important; }
@media (orientation: landscape) { html.pphone { font-size: min(calc(100vw / 117), calc(100dvh / 253.2)) !important; } }
.party .pstage { position: absolute; left: 50%; top: 50%; width: 192rem; height: 120rem; transform: translate(-50%, -50%); }
.party.car .bg { filter: blur(8px) brightness(.55) saturate(1.2); }
.party.car.win .bg { filter: blur(10px) brightness(.45) saturate(1.3); }
.party button:disabled { opacity: .45; pointer-events: none; }

/* ---------- shared bits ---------- */
.p-top { position: absolute; left: 5.6rem; right: 5.6rem; top: 3.6rem; height: 12rem; display: flex; align-items: center; gap: 2.2rem; z-index: 5; }
.p-top .sp { flex: 1; }
.p-top > .btn { height: 12rem; min-width: 12rem; padding: 0 4.2rem; font-size: 3.6rem; display: flex; align-items: center; gap: 1rem; }
.p-ttl { position: absolute; left: 50%; top: 0; height: 12rem; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; white-space: nowrap; z-index: 6; }
.p-ttl .ttl-text { font-family: var(--font-display); font-weight: 900; font-size: 5rem; letter-spacing: .8rem; text-transform: uppercase; margin: 0; }
.p-ttl .ttl-sub { font-size: 2.4rem; letter-spacing: .3rem; margin-top: .6rem; font-weight: 600; color: var(--muted); }
.p-chip { height: 11rem; padding: 0 3.4rem; display: flex; align-items: center; gap: 1.4rem; font-size: 3.6rem; font-weight: 600; white-space: nowrap; }
.p-chip small { font-family: var(--font-display); font-size: 1.8rem; letter-spacing: .3rem; color: var(--muted); }
.p-chip .rcode { font-family: var(--font-display); font-weight: 900; font-size: 4.4rem; letter-spacing: .8rem; color: var(--accent); text-shadow: 0 0 1.8rem color-mix(in srgb, var(--accent) 80%, transparent); }
.p-bolt { position: absolute; z-index: 8; pointer-events: none; filter: drop-shadow(0 0 3rem rgba(0,229,255,.4)) drop-shadow(0 2rem 2rem rgba(0,0,0,.6)); }
.p-msg { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); width: 110rem; padding: 6rem; display: flex; flex-direction: column; align-items: center; gap: 2.4rem; text-align: center; }
.p-msg h2 { font-family: var(--font-display); font-size: 5rem; margin: 0; }
.p-msg p { font-size: 3.2rem; margin: 0; color: var(--muted); }
.p-msg .btn { height: 13rem; padding: 0 5rem; font-size: 3.8rem; }
.pdots { display: inline-flex; gap: .8rem; margin-left: 1rem; vertical-align: middle; }
.pdots i { width: 1rem; height: 1rem; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite both; }
.pdots i:nth-child(2) { animation-delay: .2s; } .pdots i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* avatar */
.party .av { position: relative; flex: none; width: 11.8rem; height: 11.8rem; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #1d2a44, #05070d 75%); box-shadow: 0 0 2.8rem color-mix(in srgb, var(--c) 55%, transparent), 0 1rem 2.2rem rgba(0,0,0,.55); }
.party .av img { display: block; width: 118%; height: 118%; margin: -4% 0 0 -9%; object-fit: cover; }
.party .av::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 .4rem var(--c); }
.party .av.avbig { width: 12.8rem; height: 12.8rem; } .party .av.sm { width: 5.2rem; height: 5.2rem; box-shadow: none; } .party .av.sm::after { box-shadow: inset 0 0 0 .25rem var(--c); }
.party .av.sm2 { width: 8rem; height: 8rem; } .party .av.huge { width: 25rem; height: 25rem; } .party .av.huge::after { box-shadow: inset 0 0 0 .7rem var(--c); }

/* licence plate (Night Charge: smoked glass, neon rim) */
.pplate { position: relative; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 1.8rem; white-space: nowrap;
  font-family: 'Big Shoulders', 'Oswald', sans-serif; font-weight: 800; letter-spacing: .4rem; color: #fff;
  background: linear-gradient(180deg, #1b2740, #0c1322 60%, #070b14);
  box-shadow: inset 0 0 0 .3rem var(--accent), inset 0 0 0 .7rem rgba(7,11,20,.9), inset 0 0 0 .9rem rgba(140,200,255,.25), 0 0 3rem color-mix(in srgb, var(--accent) 45%, transparent), 0 1.6rem 3rem rgba(0,0,0,.6); }
.pplate .txt { position: relative; top: .6rem; text-shadow: 0 0 1.4rem color-mix(in srgb, var(--accent) 70%, transparent), 0 .2rem 0 rgba(0,0,0,.6); }
.pplate .cap { position: absolute; top: 1rem; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: .5rem; color: var(--accent); font-weight: 700; }
.pplate .cap::before { content: var(--plate-cap); }
.pplate i { position: absolute; top: 1.6rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #cfe9ff, #3a4d6e); box-shadow: 0 .1rem .2rem rgba(0,0,0,.6); }
.pplate i.l { left: 2.2rem; } .pplate i.r { right: 2.2rem; }
.pplate.tp { width: 35rem; height: 15rem; font-size: 7.6rem; }
.pplate.tp.empty .txt, .pplate.pbig.empty .txt { opacity: .35; }
.pplate.wp { width: 45rem; height: 16rem; font-size: 9.2rem; }
.pplate.nope { animation: nope .4s ease; }
@keyframes nope { 20%, 60% { transform: translateX(-2rem); } 40%, 80% { transform: translateX(2rem); } }

/* bingo card */
.mc { --cw: 37.2rem; --g: .8rem; width: var(--cw); display: flex; flex-direction: column; gap: var(--g); }
.mc .bh { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--g); }
.mc .bh b { text-align: center; font-family: var(--font-display); font-weight: 900; color: var(--muted); font-size: calc(var(--cw) / 5 * .41); line-height: 1.1; }
.mc .grid { position: relative; display: grid; grid-template-columns: repeat(var(--n), 1fr); grid-template-rows: repeat(var(--n), 1fr); gap: var(--g); aspect-ratio: 1; }
.cl { position: relative; border-radius: calc(var(--cw) / var(--n) * .2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: calc(var(--cw) / var(--n) * .42); color: #c9d6ee;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)); box-shadow: inset 0 0 0 .2rem rgba(120,160,220,.22), inset 0 .2rem 0 rgba(255,255,255,.07); }
.cl > span { position: relative; z-index: 2; }
.cl .ink { display: none; }
.cl.on { color: var(--c-ink); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--c) 40%, #fff), var(--c) 55%, color-mix(in srgb, var(--c) 55%, #000));
  box-shadow: inset 0 .2rem 0 rgba(255,255,255,.6), inset 0 -.4rem .8rem rgba(0,0,0,.3), 0 0 1.6rem color-mix(in srgb, var(--c) 60%, transparent); }
.cl.need { color: #fff; box-shadow: inset 0 0 0 .3rem var(--c), inset 0 0 1.8rem color-mix(in srgb, var(--c) 40%, transparent); }
.cl.free { background: rgba(0,0,0,.25); box-shadow: inset 0 0 0 .25rem color-mix(in srgb, var(--c) 66%, transparent), 0 0 1.6rem color-mix(in srgb, var(--c) 33%, transparent); }
.cl.free .fico { width: 40%; height: 52%; background: var(--c); clip-path: polygon(58% 0, 8% 57%, 46% 57%, 33% 100%, 92% 37%, 54% 37%); filter: drop-shadow(0 0 .6rem var(--c)); }
.cl.new { outline: .3rem solid #fff; outline-offset: .2rem; }
/* stamp lands: pop 1.6 → 1.32, hold 600ms, settle to 1.0 at −6°, two rings expand (then ease upright so the grid stays square) */
.cl.land { z-index: 5; will-change: transform; animation: stampland 1.25s cubic-bezier(.3,1.2,.4,1) both; }
.cl.land::before, .cl.land::after { content: ''; position: absolute; inset: -1.2rem; border-radius: 2.2rem; border: .3rem solid var(--c); opacity: 0; pointer-events: none; will-change: transform, opacity; animation: ring .5s ease-out .76s both; }
.cl.land::after { inset: -2.4rem; border-radius: 3rem; border-width: .2rem; animation-delay: .88s; }
@keyframes stampland {
  0% { transform: scale(1.6); opacity: 0; }
  12% { transform: scale(1.32) rotate(-6deg); opacity: 1; }
  60% { transform: scale(1.32) rotate(-6deg); }
  80% { transform: scale(1) rotate(-6deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes ring { 0% { transform: scale(.7); opacity: .75; } 100% { transform: scale(1.35); opacity: 0; } }
/* one square from bingo: the row glows every 1.2s */
.band { position: absolute; pointer-events: none; z-index: 1; }
.band::before { content: ''; position: absolute; inset: -.6rem; border-radius: 1.8rem; box-shadow: 0 0 0 .3rem var(--c), 0 0 2.6rem var(--c); will-change: opacity; animation: hot 1.2s ease-in-out infinite; }
.cl.hotc::after { content: ''; position: absolute; inset: -.4rem; border-radius: 1.8rem; box-shadow: 0 0 0 .3rem var(--c), 0 0 2rem var(--c); will-change: opacity; animation: hot 1.2s ease-in-out infinite; pointer-events: none; }
@keyframes hot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.band.winb::before { inset: -.8rem; border-radius: 2rem; animation: none; box-shadow: 0 0 0 .4rem var(--c), 0 0 4rem var(--c), inset 0 0 3rem var(--c); }
.cl.winc { box-shadow: 0 0 0 .3rem #fff, 0 0 2.4rem var(--c); }
/* win: strike line draws across in 400ms */
.strike { position: absolute; z-index: 6; height: .7rem; margin-top: -.35rem; border-radius: .7rem; pointer-events: none; transform-origin: 0 50%; transform: rotate(var(--a)) scaleX(0);
  background: linear-gradient(90deg, transparent, #fff 8%, #fff 92%, transparent); box-shadow: 0 0 1.8rem #fff, 0 0 4rem var(--c); will-change: transform; animation: strike .4s ease-out .15s forwards; }
@keyframes strike { to { transform: rotate(var(--a)) scaleX(1); } }

/* ---------- car: join ---------- */
.party.join .bg { filter: blur(6px) brightness(.6) saturate(1.2); }
.qp { position: absolute; left: 5.6rem; top: 18.4rem; width: 70rem; bottom: 5.6rem; display: flex; flex-direction: column; align-items: center; padding: 3.4rem 4rem; }
.qp h2 { font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; letter-spacing: .7rem; color: var(--accent); margin: 0; text-shadow: 0 0 1.8rem color-mix(in srgb, var(--accent) 80%, transparent); }
.qr { position: relative; margin-top: 2.6rem; width: 50rem; height: 50rem; flex: none; border-radius: 3rem; background: #fff; padding: 1.4rem;
  box-shadow: 0 0 0 .4rem var(--accent), 0 0 5rem color-mix(in srgb, var(--accent) 55%, transparent), 0 2.4rem 4rem rgba(0,0,0,.6); }
.qr svg { display: block; width: 100%; height: 100%; }
.qlg { position: absolute; left: 50%; top: 50%; width: 9.6rem; height: 9.6rem; margin: -4.8rem 0 0 -4.8rem; border-radius: 2.4rem; background: var(--page); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 .8rem #fff; }
.qlg .logo-mark { width: 4.6rem; height: 5.8rem; }
.url { margin-top: 2.8rem; font-size: 2.8rem; color: var(--muted); } .url b { color: var(--text); }
.cl2 { margin-top: 3rem; font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: .6rem; color: var(--muted); }
.pcode { display: flex; gap: 1.8rem; margin-top: 1.4rem; }
.ct { width: 12rem; height: 14rem; border-radius: 2.4rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 900; font-size: 9.2rem; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 18%, transparent), color-mix(in srgb, var(--accent) 4%, transparent));
  text-shadow: 0 0 2rem var(--accent); box-shadow: inset 0 0 0 .3rem color-mix(in srgb, var(--accent) 75%, transparent), inset 0 .2rem 0 rgba(255,255,255,.3), 0 0 2.6rem color-mix(in srgb, var(--accent) 35%, transparent); }
.join-bolt { left: 70.6rem; top: 15rem; width: 16rem; transform: rotate(6deg); }
.prc { position: absolute; left: 88rem; right: 5.6rem; top: 18.4rem; bottom: 5.6rem; display: flex; flex-direction: column; gap: 1.8rem; }
.plab { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; letter-spacing: .5rem; color: var(--muted); margin-bottom: -.6rem; }
.lvs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.lv { height: 15rem; border-radius: 3rem !important; padding: 2rem 2.8rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; text-align: left; }
.lv .l1 { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; letter-spacing: .4rem; color: var(--muted); }
.lv .l2 { font-size: 5.2rem; font-weight: 700; line-height: 1.05; margin-top: .4rem; } .lv .l3 { font-size: 2.4rem; color: var(--muted); margin-top: .2rem; }
.lv.sel { box-shadow: inset 0 .15rem 0 rgba(255,255,255,.35), inset 0 0 0 .3rem var(--accent), 0 0 4rem color-mix(in srgb, var(--accent) 45%, transparent), 0 2.4rem 4rem rgba(0,0,0,.5) !important; }
.lv.sel .l1 { color: var(--accent); }
.slots { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem; }
.slot { position: relative; height: 17rem; border-radius: 3.2rem !important; display: flex; align-items: center; gap: 2.6rem; padding: 0 3rem 0 2.2rem; }
.slot .nm { font-size: 5rem; font-weight: 700; line-height: 1; } .slot .rd { font-size: 2.8rem; font-weight: 600; margin-top: 1rem; }
.slot .rd.ok { color: var(--c); } .slot .rd.jst { color: var(--amber); } .slot .rd.off { color: var(--bad); }
.slot .pno { position: absolute; right: 2.6rem; top: 2.2rem; font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: .2rem; color: var(--muted); opacity: .7; }
.slot.jj { box-shadow: inset 0 .15rem 0 rgba(255,255,255,.3), inset 0 0 0 .3rem var(--c), 0 0 4.6rem color-mix(in srgb, var(--c) 55%, transparent), 0 2.4rem 4rem rgba(0,0,0,.5) !important; }
.slot.jj::after { content: ''; position: absolute; inset: -1rem; border-radius: 4rem; border: .2rem solid var(--c); pointer-events: none; animation: ringfade 1.4s ease-out both; }
@keyframes ringfade { 0% { opacity: .8; transform: scale(.96); } 100% { opacity: 0; transform: scale(1.04); } }
.slot.pop { animation: slotpop .4s cubic-bezier(.3,1.5,.5,1) both; }
@keyframes slotpop { from { transform: scale(.9); opacity: .3; } to { transform: scale(1); opacity: 1; } }
.slot.empty { border: .3rem dashed color-mix(in srgb, var(--muted) 45%, transparent); background: color-mix(in srgb, var(--page) 35%, transparent); }
.slot.empty .nm { color: var(--muted); }
.jplus { width: 12.8rem; height: 12.8rem; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 7.6rem; font-weight: 300; color: var(--muted); border: .3rem dashed color-mix(in srgb, var(--muted) 50%, transparent); }
.pseg { display: flex; gap: 1.6rem; }
.pseg .o { flex: 1; height: 12rem; border-radius: 3rem !important; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 3.6rem; font-weight: 700; }
.pseg .o small { font-size: 2.2rem; font-weight: 500; color: var(--muted); margin-top: .4rem; }
.pseg .o.sel { box-shadow: inset 0 .15rem 0 rgba(255,255,255,.35), inset 0 0 0 .3rem var(--lime), 0 0 3rem color-mix(in srgb, var(--lime) 35%, transparent), 0 2rem 4rem rgba(0,0,0,.5) !important; }
.pcta { margin-top: auto; height: 13rem; border-radius: 3.6rem; display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: 4.6rem; font-weight: 700; }
.pcta small { font-size: 3rem; font-weight: 600; opacity: .75; } .pcta .chev { margin-left: 1.4rem; font-size: 5.4rem; line-height: 1; }

/* ---------- car: leaderboard ---------- */
.cols { position: absolute; left: 5.6rem; right: 5.6rem; top: 18.4rem; height: 78rem; display: grid; grid-template-columns: repeat(var(--np), minmax(0, 43.2rem)); justify-content: center; gap: 2.6rem; }
.pc { padding: 2.6rem 2rem 2.4rem; display: flex; flex-direction: column; align-items: center; border-radius: 3.6rem; }
.pc.lead { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, rgba(6,20,32,.7)), rgba(6,20,32,.72)) !important;
  box-shadow: inset 0 .15rem 0 rgba(255,255,255,.35), inset 0 0 0 .3rem var(--c), 0 0 5rem color-mix(in srgb, var(--c) 35%, transparent), 0 3rem 6rem rgba(0,0,0,.55) !important; }
.ph { width: 100%; display: flex; align-items: center; gap: 1.8rem; }
.pn { flex: 1; min-width: 0; } .pc .nm { font-size: 4.4rem; font-weight: 700; line-height: 1; letter-spacing: .05rem; }
.pc .st { font-size: 2.4rem; color: var(--muted); margin-top: .8rem; white-space: nowrap; } .offl { color: var(--bad); }
.rk { align-self: flex-start; font-family: var(--font-display); font-weight: 900; font-size: 2.6rem; letter-spacing: .2rem; padding: 1rem 1.4rem; border-radius: 1.4rem; color: var(--muted); border: .2rem solid color-mix(in srgb, var(--muted) 40%, transparent); }
.lead .rk { color: var(--c-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 45%, #fff), var(--c)); border-color: transparent; box-shadow: 0 0 2rem var(--c); }
.aw { width: 100%; display: flex; align-items: center; gap: 1.8rem; margin: 2rem 0; padding: 1.2rem 2.2rem; min-height: 11.4rem; border-radius: 2.4rem; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 .15rem rgba(140,200,255,.12); }
.aw .n { font-family: var(--font-display); font-weight: 900; font-size: 8.4rem; line-height: 1; color: var(--c); text-shadow: 0 0 2.4rem var(--c); }
.aw .t { font-family: var(--font-display); font-weight: 800; font-size: 2.6rem; letter-spacing: .2rem; line-height: 1.2; }
.aw .t em { display: block; font-style: normal; font-family: var(--font-body); font-weight: 600; font-size: 2.4rem; letter-spacing: 0; color: var(--c); }
.lead .aw { background: color-mix(in srgb, var(--c) 12%, transparent); box-shadow: inset 0 0 0 .2rem color-mix(in srgb, var(--c) 50%, transparent); }
.tick { position: absolute; left: 5.6rem; right: 5.6rem; bottom: 4rem; height: 18rem; display: flex; align-items: center; gap: 2.8rem; padding: 0 3.4rem; border-radius: 3.6rem; overflow: hidden; }
.tick .lb { font-family: var(--font-display); font-weight: 800; font-size: 2rem; letter-spacing: .4rem; color: var(--accent); writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.tick .who { display: flex; align-items: center; gap: 1.8rem; flex: none; }
.tick .who .av { width: 9rem; height: 9rem; }
.tick .w1 { font-size: 4rem; font-weight: 700; line-height: 1.05; white-space: nowrap; }
.tick .w0 { font-size: 2.6rem; color: var(--muted); margin-top: .8rem; }
.tick .w2 { display: flex; gap: 1rem; margin-top: 1rem; }
.tick .plus { font-family: var(--font-display); font-weight: 900; font-size: 3rem; padding: .8rem 1.6rem; border-radius: 1.4rem; color: var(--c-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff), var(--c)); box-shadow: 0 0 1.8rem color-mix(in srgb, var(--c) 70%, transparent); }
.tick .div { width: .2rem; align-self: stretch; margin: 2.6rem 0; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--muted) 45%, transparent), transparent); flex: none; }
.hist { flex: 1; margin-right: 17rem; min-width: 0; overflow: hidden; display: flex; gap: 2.2rem; align-items: center; opacity: .85; -webkit-mask-image: linear-gradient(90deg, #000 75%, transparent); mask-image: linear-gradient(90deg, #000 75%, transparent); }
.hi { display: flex; align-items: center; gap: 1.2rem; flex: none; }
.hp { font-family: 'Big Shoulders', sans-serif; font-weight: 800; font-size: 4rem; letter-spacing: .3rem; color: #cfe0ff; padding: .6rem 1.6rem; white-space: nowrap; border-radius: 1.2rem; box-shadow: inset 0 0 0 .2rem rgba(140,200,255,.3); }
.hl { font-size: 2rem; letter-spacing: .3rem; color: var(--muted); font-family: var(--font-display); font-weight: 700; margin-right: .4rem; flex: none; }
.slide { will-change: transform, opacity; animation: slidein .45s cubic-bezier(.2,1,.3,1) both; }
@keyframes slidein { from { transform: translateX(-8rem); opacity: 0; } to { transform: none; opacity: 1; } }
.tick-bolt { right: 7rem; bottom: 4.4rem; width: 15rem; }

/* ---------- car: win ---------- */
.burst { position: absolute; left: 96rem; top: 64rem; width: 240rem; height: 240rem; margin: -120rem 0 0 -120rem; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--accent) 10%, transparent) 0 6deg, transparent 6deg 15deg); -webkit-mask-image: radial-gradient(closest-side, #000 10%, transparent 75%); mask-image: radial-gradient(closest-side, #000 10%, transparent 75%); }
.wglow { position: absolute; left: 96rem; top: 66rem; width: 110rem; height: 90rem; margin: -45rem 0 0 -55rem; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 35%, transparent), transparent); pointer-events: none; }
.conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9; }
.conf i { position: absolute; top: -5rem; width: 1.4rem; height: 2.6rem; border-radius: .3rem; background: var(--c); will-change: transform; animation: fall 3.4s linear var(--d) 2 both; }
.conf i:nth-child(3n) { width: 2.6rem; height: 1.2rem; }
@keyframes fall { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(var(--x), 132rem) rotate(calc(var(--r) + 540deg)); } }
.bingo { position: absolute; left: 0; right: 0; top: 3.4rem; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 900; font-size: 21rem; line-height: 1; letter-spacing: 1.4rem; z-index: 7;
  background: linear-gradient(180deg, #fff 10%, color-mix(in srgb, var(--accent) 35%, #fff) 40%, var(--accent) 62%, color-mix(in srgb, var(--accent) 60%, #000)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 3rem color-mix(in srgb, var(--accent) 80%, transparent)) drop-shadow(0 1rem 0 color-mix(in srgb, var(--accent) 25%, #000));
  will-change: transform, opacity; animation: punch .32s cubic-bezier(.3,1.4,.5,1) .55s both; }
@keyframes punch { from { transform: scale(1.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wl { position: absolute; left: 5.6rem; top: 30rem; width: 60rem; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 3; }
.wname { font-size: 9.6rem; font-weight: 700; line-height: 1; margin-top: 2.6rem; letter-spacing: .1rem; white-space: nowrap; }
.wins { font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; letter-spacing: .8rem; color: var(--accent); margin-top: 1rem; text-shadow: 0 0 1.6rem color-mix(in srgb, var(--accent) 80%, transparent); }
.wlab { font-family: var(--font-display); font-weight: 700; font-size: 2rem; letter-spacing: .5rem; color: var(--muted); margin: 4rem 0 1.4rem; }
.wl .meta { font-size: 2.8rem; color: var(--muted); margin-top: 2.2rem; } .wl .meta b { color: var(--text); }
.wc { position: absolute; left: 68.6rem; top: 30rem; width: 55rem; padding: 3rem 3rem 3.4rem; display: flex; justify-content: center; z-index: 3; border-radius: 3.6rem;
  box-shadow: inset 0 .15rem 0 rgba(255,255,255,.35), inset 0 0 0 .3rem var(--c), 0 0 7rem color-mix(in srgb, var(--c) 45%, transparent), 0 3rem 6rem rgba(0,0,0,.6) !important; }
.mc.wbig { --cw: 48rem; --g: 1rem; }
.wr { position: absolute; left: 126rem; right: 5.6rem; top: 30rem; bottom: 5.6rem; display: flex; flex-direction: column; gap: 1.6rem; z-index: 3; }
.wr .plab { margin-bottom: .2rem; }
.sr { height: 11.2rem; flex: none; border-radius: 2.8rem !important; display: flex; align-items: center; gap: 2rem; padding: 0 2.4rem; }
.sr.w { box-shadow: inset 0 0 0 .3rem var(--c), 0 0 3.4rem color-mix(in srgb, var(--c) 40%, transparent) !important; }
.sr .pos { font-family: var(--font-display); font-weight: 900; font-size: 4.4rem; width: 4rem; text-align: center; color: var(--muted); } .sr.w .pos { color: var(--c); }
.sn { flex: 1; min-width: 0; } .sn .a { font-size: 3.8rem; font-weight: 700; line-height: 1; } .sn .b { font-size: 2.2rem; color: var(--muted); margin-top: .6rem; }
.tg { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; letter-spacing: .1rem; padding: 1rem 1.6rem; border-radius: 1.4rem; color: var(--c); border: .2rem solid var(--c); white-space: nowrap; }
.sr.w .tg { color: var(--c-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 30%, #fff), var(--c)); border-color: transparent; box-shadow: 0 0 1.8rem color-mix(in srgb, var(--c) 70%, transparent); }
.wrow { margin-top: auto; display: flex; gap: 1.6rem; }
.wrow .btn { flex: 1; height: 13rem; font-size: 4rem; display: flex; align-items: center; justify-content: center; padding: 0 2rem; }
.wrow .pcta { flex: 2; font-size: 4.4rem; margin: 0; }
.win-bolt { left: 108rem; top: 82rem; width: 25rem; z-index: 8; }
.wtheme { position: absolute; right: 5.6rem; top: 3.6rem; z-index: 10; }
.wtheme .btn { height: 12rem; }

/* ---------- phone ---------- */
.party.phone { overflow-y: auto !important; overflow-x: hidden; }
.party.phone .bg { background-position: 60% center; filter: blur(14px) brightness(.45) saturate(1.2); transform: scale(1.1); position: fixed; }
.party.phone .shade, .party.phone .grain { position: fixed; }
.pp-wrap { position: relative; z-index: 2; width: 117rem; min-height: 253.2rem; margin: 0 auto; padding: 4rem 6.4rem 6rem; display: flex; flex-direction: column; gap: 3rem; }
.hd { display: flex; align-items: center; gap: 3rem; min-height: 17rem; }
.hd .sp { flex: 1; }
.party .av.me { width: 17rem; height: 17rem; }
.hd .nm { font-size: 7.2rem; font-weight: 700; line-height: 1; white-space: nowrap; }
.hd .sub { font-size: 3.4rem; color: var(--muted); margin-top: 1rem; white-space: nowrap; } .hd .sub b { font-family: var(--font-display); color: var(--accent); letter-spacing: .3rem; }
.hd .theme-btn { height: 12rem; padding: 0 3rem; font-size: 3.2rem; }
.rkc { padding: 2rem 2.8rem; border-radius: 3rem !important; text-align: center; flex: none; }
.rkc .a { font-family: var(--font-display); font-weight: 900; font-size: 5.6rem; line-height: 1; color: var(--accent); text-shadow: 0 0 1.8rem color-mix(in srgb, var(--accent) 80%, transparent); }
.rkc .b { font-size: 2.6rem; font-weight: 600; color: var(--muted); margin-top: .6rem; white-space: nowrap; }
.phcard { padding: 3.4rem 0 4.2rem; display: flex; justify-content: center; border-radius: 4.8rem !important; }
.phcard .mc { --cw: 80.6rem; --g: 1.4rem; }
.pl { display: flex; flex-direction: column; align-items: center; }
.pplate.pbig { width: 104.2rem; height: 26rem; border-radius: 3.4rem; font-size: 17rem; letter-spacing: .8rem; }
.pplate.pbig .cap { top: 1.8rem; font-size: 2.2rem; } .pplate.pbig i { width: 2.2rem; height: 2.2rem; top: 2.6rem; } .pplate.pbig i.l { left: 4rem; } .pplate.pbig i.r { right: 4rem; }
.pplate .cur { display: inline-block; width: .6rem; height: 15rem; background: var(--accent); box-shadow: 0 0 1.4rem var(--accent); vertical-align: middle; margin-left: 1rem; border-radius: .3rem; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.pv { margin-top: 2.6rem; min-height: 7.4rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 1.6rem; font-size: 3.8rem; font-weight: 600; color: var(--muted); text-align: center; }
.pv .phit { font-family: var(--font-display); font-weight: 900; font-size: 4rem; padding: 1.2rem 2.4rem; border-radius: 2rem; color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, #fff), var(--accent)); box-shadow: 0 0 2.4rem color-mix(in srgb, var(--accent) 80%, transparent); }
.pv .bg2 { color: var(--lime); font-weight: 700; text-shadow: 0 0 1.6rem color-mix(in srgb, var(--lime) 60%, transparent); }
.pv.bad { color: var(--bad); }
.kp { position: relative; margin: 0 -1.2rem; padding: 5.8rem 3.8rem 4rem; border-radius: 4.4rem; display: flex; flex-direction: column; gap: 1.4rem;
  background: linear-gradient(180deg, rgba(28,40,64,.9), rgba(10,16,30,.94));
  box-shadow: inset 0 0 0 .4rem color-mix(in srgb, var(--accent) 70%, transparent), inset 0 0 0 1rem rgba(7,11,20,.9), inset 0 0 0 1.2rem rgba(140,200,255,.22), 0 0 4rem color-mix(in srgb, var(--accent) 30%, transparent), 0 3rem 6rem rgba(0,0,0,.6); }
.kp .hole { position: absolute; top: 2.2rem; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #cfe9ff, #3a4d6e); box-shadow: 0 .1rem .3rem rgba(0,0,0,.7); }
.kp .hole.tl { left: 3rem; } .kp .hole.tr { right: 3rem; }
.kp .cap { position: absolute; top: 1.6rem; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; letter-spacing: .8rem; color: var(--accent); }
.kr { display: flex; gap: 1.2rem; justify-content: center; }
.k { flex: 1; max-width: 8.8rem; height: 10.8rem; border-radius: 2rem; display: flex; align-items: center; justify-content: center; font-family: 'Big Shoulders', sans-serif; font-weight: 800; font-size: 6rem; color: #eaf3ff;
  background: linear-gradient(180deg, rgba(80,104,146,.8), rgba(30,42,66,.9)); box-shadow: inset 0 .2rem 0 rgba(255,255,255,.28), inset 0 -.5rem 0 rgba(0,0,0,.4), 0 .8rem 1.6rem rgba(0,0,0,.45); transition: transform .08s; }
.k:active { transform: scale(.92); }
.kr:first-child .k { background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 60%, rgba(0,0,0,.2)), color-mix(in srgb, var(--accent) 30%, rgba(0,0,0,.7))); }
.k.wd { max-width: 15rem; flex: 1.7; font-family: var(--font-body); font-size: 3rem; font-weight: 700; }
.stampit { height: 14rem; flex: none; font-family: var(--font-display); font-weight: 900; font-size: 5.4rem; letter-spacing: .4rem; display: flex; align-items: center; justify-content: center; border-radius: 4rem; }
.pick-t h2 { font-family: var(--font-display); font-size: 7rem; margin: 3rem 0 1rem; } .pick-t p { font-size: 3.6rem; color: var(--muted); margin: 0; }
.avs { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.avp { height: 48rem; border-radius: 4.4rem !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; padding: 0 !important; text-transform: none !important; }
.party .av.pickav { width: 26rem; height: 26rem; }
.avp b { font-family: var(--font-display); font-weight: 900; font-size: 5.6rem; letter-spacing: .3rem; } .avp small { font-size: 3rem; color: var(--muted); font-weight: 600; }
.avp.taken { opacity: .38; }
.wait { margin-top: 4rem; padding: 7rem 5rem; display: flex; flex-direction: column; align-items: center; gap: 2.6rem; text-align: center; border-radius: 4.8rem; }
.party .av.xl { width: 32rem; height: 32rem; }
.wait h2 { font-family: var(--font-display); font-size: 7.4rem; margin: 0; color: var(--c); }
.wait p { font-size: 4rem; margin: 0; }
.wmeta { font-size: 3.4rem; color: var(--muted); }
.wothers { display: flex; align-items: center; gap: 1.4rem; font-size: 3.2rem; color: var(--muted); }
.phone .av.sm { width: 9rem; height: 9rem; }
.wleave { align-self: center; height: 12rem; padding: 0 5rem !important; font-size: 3.6rem !important; }
.pp-wrap > .p-msg { position: relative; left: auto; top: auto; transform: none; width: auto; margin-top: 30rem; }
.net { position: fixed; left: 50%; top: 2rem; transform: translateX(-50%); z-index: 70; padding: 1.6rem 3.6rem; font-size: 3.2rem; font-weight: 600; border-radius: 4rem !important; }
.pwin { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--page) 55%, transparent); padding: 6rem; }
.pw-in { width: 100rem; max-width: 100%; padding: 7rem 5rem; display: flex; flex-direction: column; align-items: center; gap: 2.6rem; text-align: center; border-radius: 4.8rem; will-change: transform, opacity; animation: punch .35s cubic-bezier(.3,1.4,.5,1) .15s both; }
.pw-in .bingo { position: static; font-size: 17rem; letter-spacing: .8rem; animation: punch .32s cubic-bezier(.3,1.4,.5,1) .5s both; }
.pw-in h2 { font-size: 6rem; margin: 0; } .pw-in p { font-size: 3.8rem; margin: 0; color: var(--muted); } .pw-in p.small { font-size: 3rem; }
/* leaderboard top bar: the look switcher shrinks to a 120px round icon so the centred title stays clear */
.party.board .p-top .theme-btn { width: 12rem; min-width: 12rem; padding: 0 !important; justify-content: center; }
.party.board .p-top .theme-btn .theme-label { display: none; }
.pc .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }