/* Who's Next? Student Picker — game-specific styles (shared tokens come from /assets/css/game.css) */
.pk-app{position:relative;max-width:1400px}
.link-btn{background:none;border:0;padding:0;color:var(--sky);font:700 .82rem 'Inter',sans-serif;cursor:pointer;text-align:left}.link-btn:hover{text-decoration:underline}


/* ---------- sidebar ---------- */
.pk-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:6px 12px;max-height:340px;overflow:auto;align-content:start}
.pk-list li{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--bg);border:2px solid var(--hard);border-radius:10px}
.pk-nm2{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pk-dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px dashed var(--muted);cursor:pointer;padding:0}
.pk-dot[style*="rgb"],.pk-dot[style*="#"]{border-style:solid;border-color:#fff}
.pk-del{flex:none;border:0;background:none;color:var(--muted);font-size:1.25rem;line-height:1;cursor:pointer;padding:0 4px}.pk-del:hover{color:var(--rose)}
.pk-layouts{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pk-layouts button,.pk-themes button{display:flex;align-items:center;gap:8px;padding:8px 10px;border:3px solid var(--hard);border-radius:10px;background:var(--bg);color:var(--soft);font:700 .82rem 'Inter',sans-serif;cursor:pointer;text-align:left}
.pk-themes{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pk-themes i{flex:none;width:26px;height:26px;border-radius:8px;border:2px solid rgba(255,255,255,.55)}
.pk-layouts button[aria-pressed=true],.pk-themes button[aria-pressed=true]{background:var(--gold);color:var(--hard)}
.pk-sw{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #fff}
/* ---------- stage ---------- */
.pk-stage{--acc:#f472b6;--ink:#fff;--pf:'Baloo 2',system-ui,sans-serif;position:relative;container-type:inline-size;width:min(100%,calc(var(--gic-maxh) * 16 / 9));margin:0 auto;aspect-ratio:16/9;min-height:min(440px,100%);display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden;border-radius:16px;border:4px solid var(--hard);box-shadow:var(--shadow);isolation:isolate;color:var(--ink);font-family:var(--pf)}
html.gic-fs .pk-stage{margin:0;position:fixed;inset:0;z-index:90;width:auto;aspect-ratio:auto;min-height:0;border:0;border-radius:0;box-shadow:none}
html.gic-fs .pk-main{display:block}
.pk-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.pk-bg i{position:absolute;inset:-7%;display:block;pointer-events:none;will-change:translate;backface-visibility:hidden;animation:pkdrift1 22s ease-in-out infinite alternate}
.pk-bg .l2{animation:pkdrift2 31s ease-in-out infinite alternate}.pk-bg .l3{animation:pkdrift3 41s ease-in-out infinite alternate}.pk-bg .l4{animation:pkdrift4 27s ease-in-out infinite alternate}
@keyframes pkdrift1{0%{translate:-30px -14px}50%{translate:18px 22px}100%{translate:34px -10px}}
@keyframes pkdrift2{0%{translate:40px 18px}50%{translate:-20px -24px}100%{translate:-44px 14px}}
@keyframes pkdrift3{0%{translate:-50px 26px}50%{translate:30px -18px}100%{translate:52px 24px}}
@keyframes pkdrift4{0%{translate:20px -20px}50%{translate:-26px 12px}100%{translate:24px 22px}}
@media (prefers-reduced-motion:reduce){.pk-bg i{animation:none!important}}

.pk-board{position:relative;z-index:2;min-height:0}
.pk-empty{position:absolute;inset:0;display:grid;place-items:center;z-index:3;font-size:1.6rem;opacity:.85;text-align:center;padding:20px}
.pk-front{position:absolute;left:14%;right:14%;top:0;height:8.5%;min-height:26px;display:grid;place-items:center;border-radius:6px 6px 14px 14px;background:linear-gradient(#fafafa,#dcdcdc);color:#233;border:3px solid #6b4a24;box-shadow:0 5px 0 #4b3216,0 10px 18px rgba(0,0,0,.35);font:800 clamp(10px,1.7cqw,18px)/1 'Inter',sans-serif;letter-spacing:.3em;z-index:1}
.pk-front[hidden]{display:none}

/* ---------- control bar ---------- */
.pk-bar{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.4) 40%)}
.pk-ctl{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.pk-rand{display:inline-flex;align-items:center;gap:10px;padding:12px 26px;border-radius:999px;border:3px solid #fff;background:linear-gradient(180deg,var(--acc),#be185d);color:#fff;font:800 clamp(15px,2.2cqw,24px)/1 var(--pf);cursor:pointer;box-shadow:0 5px 0 rgba(0,0,0,.45),0 10px 22px rgba(0,0,0,.4);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.pk-rand:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.45)}.pk-rand:disabled{opacity:.6}
.pk-sm{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:3px solid rgba(255,255,255,.85);background:rgba(0,0,0,.45);color:#fff;font:700 clamp(12px,1.5cqw,16px)/1 'Inter',sans-serif;cursor:pointer}
.pk-sm:disabled{opacity:.4;cursor:default}.pk-sm.pulse{animation:pkpulse .5s ease-in-out 3;background:var(--acc)}
.pk-count{font:700 clamp(12px,1.5cqw,16px)/1 'Inter',sans-serif;background:rgba(0,0,0,.45);padding:8px 14px;border-radius:999px;border:2px solid rgba(255,255,255,.35)}
.pk-teams{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:center}.pk-teams[hidden]{display:none}
.pk-tl{font:800 .85rem 'Inter',sans-serif;opacity:.9}
.pk-tchip{padding:6px 16px;border-radius:999px;border:3px solid var(--tc);background:rgba(0,0,0,.5);color:#fff;font:800 clamp(12px,1.6cqw,17px)/1 'Inter',sans-serif;cursor:pointer}
.pk-tchip.on{background:var(--tc);color:#111;box-shadow:0 0 0 3px #fff,0 0 18px var(--tc);transform:scale(1.08)}
@keyframes pkpulse{50%{transform:scale(1.12)}}

/* ---------- items (names) ---------- */
.pk-it{position:absolute;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;transform:rotate(var(--r,0deg));transition:transform .25s,filter .4s,opacity .4s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.pk-it:hover:not(.done):not(.own){transform:rotate(var(--r,0deg)) scale(1.07);z-index:6}
.pk-it:focus-visible{outline:3px solid #fff;outline-offset:3px;z-index:7}
.pk-it:focus:not(:focus-visible),.pk-it:focus:not(:focus-visible) *{outline:none}
.pk-it,.pk-it *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.pk-it .pk-body{backface-visibility:hidden}
.pk-body{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
.pk-nm{position:relative;z-index:2;font-size:var(--fs,16px);line-height:1.05;font-weight:700;max-width:100%;padding:0 4%;overflow-wrap:break-word;text-wrap:balance}
[data-layout=drift] .pk-it{animation:pkfloat var(--dur,6s) ease-in-out var(--dly,0s) infinite alternate}
@keyframes pkfloat{from{transform:translate(-8px,-10px) rotate(calc(var(--r,0deg) - 3deg))}to{transform:translate(8px,10px) rotate(calc(var(--r,0deg) + 3deg))}}
.pk-tm{position:absolute;left:-4%;top:-4%;width:24%;aspect-ratio:1;max-width:30px;border-radius:50%;background:var(--tc);border:3px solid #fff;box-shadow:0 2px 6px rgba(0,0,0,.5);display:none;z-index:4}
.pk-it.hasteam .pk-tm{display:block}
.pk-ok{position:absolute;right:-3%;top:-3%;width:26%;aspect-ratio:1;max-width:34px;border-radius:50%;background:#22c55e;color:#fff;display:none;place-items:center;font:800 clamp(10px,1.4cqw,18px)/1 'Inter',sans-serif;border:3px solid #fff;z-index:5}
/* picked */
.pk-it.done{cursor:default}
[data-done=gray] .pk-it.done{filter:grayscale(1) brightness(.6);opacity:.6;transform:rotate(var(--r,0deg)) scale(.93);animation:none}
[data-done=gray] .pk-it.done .pk-ok{display:grid}
[data-done=mark] .pk-it.done{filter:saturate(.45) brightness(1.08);transform:rotate(var(--r,0deg)) scale(.96)}
[data-done=mark] .pk-it.done .pk-body{outline:4px solid #fde047;outline-offset:2px;border-radius:inherit}
[data-done=mark] .pk-it.done .pk-ok{display:grid}
[data-done=hide] .pk-it.done{opacity:.08;pointer-events:none;transform:rotate(var(--r,0deg)) scale(.8)}
.pk-it.own{filter:grayscale(1) brightness(.65);opacity:.45;cursor:not-allowed;transform:rotate(var(--r,0deg)) scale(.95)}
.pk-it.spot{filter:brightness(1.35) drop-shadow(0 0 14px #fde047);transform:rotate(var(--r,0deg)) scale(1.14);z-index:9;opacity:1}
.pk-it.hit{animation:pkhit .6s ease-out}
.pk-it.shake{animation:pkshake .4s}
@keyframes pkhit{0%{transform:rotate(var(--r,0deg)) scale(1.3)}100%{transform:rotate(var(--r,0deg)) scale(1)}}
@keyframes pkshake{20%{translate:-7px 0}40%{translate:7px 0}60%{translate:-5px 0}80%{translate:5px 0}}

/* ---------- result ---------- */
.pk-win{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:3%;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.pk-win[hidden]{display:none}
.pk-win-card{--tc:var(--gold);width:min(92%,900px);text-align:center;padding:clamp(18px,4cqw,48px) clamp(16px,4cqw,56px);border-radius:28px;background:#0f172a;color:#fff;border:8px solid var(--tc);box-shadow:0 0 0 6px rgba(255,255,255,.9),0 30px 70px rgba(0,0,0,.6);animation:pkpop .5s cubic-bezier(.2,.9,.3,1.25) both}
.pk-win-card h2{font-size:clamp(30px,10cqw,130px);line-height:1.05;color:#fff;overflow-wrap:anywhere;margin:.08em 0;text-shadow:0 4px 0 rgba(0,0,0,.4)}
.pk-kicker{margin:0;font:800 clamp(13px,2cqw,24px)/1 'Inter',sans-serif;letter-spacing:.25em;text-transform:uppercase;color:var(--tc)}
.pk-teamline{margin:.3em 0 0;font:700 clamp(14px,2.2cqw,26px)/1.3 'Inter',sans-serif}.pk-teamline[hidden]{display:none}
.pk-win-act{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:clamp(12px,2cqw,26px)}
@keyframes pkpop{from{transform:scale(.6) rotate(-3deg);opacity:0}to{transform:none;opacity:1}}
.pk-conf{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:30}
.pk-conf i{position:absolute;top:-20px;width:10px;height:16px;opacity:.95;animation:pkfall linear forwards}
@keyframes pkfall{to{transform:translate(var(--dx),110vh) rotate(var(--rot))}}
@media(prefers-reduced-motion:reduce){[data-layout=drift] .pk-it,.pk-win-card,.pk-conf i{animation:none}}

/* =====================================================  THEMES  ===================================================== */
/* ---- Classroom: chalkboard in a wooden frame, sticky notes ---- */
.pk-stage[data-theme=chalk]{--acc:#fbbf24;--pf:'Patrick Hand','Segoe Print','Chalkboard SE','Comic Sans MS',cursive;border:10px solid #8b5a2b;border-color:#a9733a #6e4519 #5b3512 #8b5a2b;background:radial-gradient(ellipse at 30% 20%,#2f7a50,#1d4d33 75%)}
[data-theme=chalk] .pk-bg .l1{background:radial-gradient(ellipse 30% 14% at 22% 30%,rgba(255,255,255,.1),transparent),radial-gradient(ellipse 36% 12% at 72% 64%,rgba(255,255,255,.09),transparent),radial-gradient(ellipse 24% 10% at 50% 90%,rgba(255,255,255,.08),transparent)}
[data-theme=chalk] .pk-bg .l2{background:repeating-linear-gradient(0deg,transparent 0 46px,rgba(255,255,255,.05) 46px 48px)}
[data-theme=chalk] .pk-bg .l3{background:radial-gradient(circle,rgba(255,255,255,.22) 0 1.5px,transparent 2px) 0 0/90px 90px,radial-gradient(circle,rgba(255,255,255,.14) 0 1px,transparent 2px) 30px 40px/60px 60px}
[data-theme=chalk] .pk-bg .l4{box-shadow:inset 0 0 90px rgba(0,0,0,.55)}
[data-theme=chalk] .pk-body{color:#1b1b1b;border-radius:3px;background:linear-gradient(165deg,rgba(255,255,255,.7),rgba(255,255,255,.1) 55%),var(--c);box-shadow:0 10px 16px rgba(0,0,0,.5),inset 0 -8px 12px rgba(0,0,0,.08)}
[data-theme=chalk] .pk-body::before{content:'';position:absolute;left:34%;width:32%;top:-7%;height:14%;background:rgba(255,255,255,.55);transform:rotate(-3deg);box-shadow:0 1px 3px rgba(0,0,0,.25)}
[data-theme=chalk] .pk-body::after{content:'';position:absolute;right:0;bottom:0;width:18%;aspect-ratio:1;background:linear-gradient(315deg,rgba(0,0,0,.16) 50%,transparent 50%)}
/* ---- Space: planets with glow ---- */
.pk-stage[data-theme=space]{--acc:#8b5cf6;background:radial-gradient(ellipse at 50% 115%,#3b2a8f,#0a0626 62%)}
[data-theme=space] .pk-bg .l1{background:radial-gradient(circle,#fff 0 1px,transparent 1.6px) 0 0/130px 130px,radial-gradient(circle,rgba(255,255,255,.7) 0 1px,transparent 1.5px) 50px 70px/90px 90px}
[data-theme=space] .pk-bg .l2{background:radial-gradient(circle,#fde68a 0 1.6px,transparent 2.4px) 20px 30px/230px 230px,radial-gradient(circle,#bae6fd 0 1.6px,transparent 2.4px) 120px 140px/310px 310px;animation:pktw 4s ease-in-out infinite alternate}
[data-theme=space] .pk-bg .l3{background:radial-gradient(ellipse 40% 30% at 20% 30%,rgba(147,51,234,.28),transparent),radial-gradient(ellipse 36% 26% at 80% 70%,rgba(56,189,248,.2),transparent)}
[data-theme=space] .pk-bg .l4{inset:auto -6% -22% auto;width:34%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fca5a5,#b91c1c 60%,#450a0a);box-shadow:0 0 60px rgba(248,113,113,.35)}
@keyframes pktw{from{opacity:.45}to{opacity:1}}
[data-theme=space] .pk-body{border-radius:50%;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.75);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.55),transparent 26%),radial-gradient(circle at 74% 80%,rgba(0,0,30,.68),transparent 64%),var(--c);box-shadow:0 0 26px -2px var(--c),inset -9px -11px 20px rgba(0,0,0,.4),inset 3px 3px 8px rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.18)}
/* surface detail: bands, craters or swirls, a different one for each planet */
[data-theme=space] .pk-it:nth-child(3n+1) .pk-body{background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.5),transparent 24%),radial-gradient(circle at 74% 80%,rgba(0,0,30,.68),transparent 64%),repeating-linear-gradient(-14deg,transparent 0 9%,rgba(255,255,255,.17) 9% 14%,transparent 14% 24%,rgba(0,0,40,.2) 24% 29%),var(--c)}
[data-theme=space] .pk-it:nth-child(3n+2) .pk-body{background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.5),transparent 24%),radial-gradient(circle at 74% 80%,rgba(0,0,30,.68),transparent 64%),radial-gradient(circle at 22% 62%,rgba(0,0,40,.28) 0 7%,transparent 8%),radial-gradient(circle at 62% 30%,rgba(0,0,40,.24) 0 5%,transparent 6%),radial-gradient(circle at 70% 64%,rgba(255,255,255,.2) 0 9%,transparent 10%),radial-gradient(circle at 44% 80%,rgba(0,0,40,.26) 0 4%,transparent 5%),var(--c)}
[data-theme=space] .pk-it:nth-child(3n) .pk-body{background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.5),transparent 24%),radial-gradient(circle at 74% 80%,rgba(0,0,30,.68),transparent 64%),radial-gradient(ellipse 60% 22% at 40% 34%,rgba(255,255,255,.22),transparent),radial-gradient(ellipse 70% 20% at 60% 70%,rgba(255,255,255,.16),transparent),radial-gradient(ellipse 44% 16% at 30% 54%,rgba(0,0,40,.22),transparent),var(--c)}
/* rings: the back half sits behind the planet, the front half crosses over it */
[data-theme=space] .ring::before,[data-theme=space] .ring .pk-body::after{content:'';position:absolute;left:-26%;right:-26%;top:36%;bottom:36%;border-radius:50%;transform:rotate(-16deg);pointer-events:none;border:5px solid rgba(255,244,214,.55);box-shadow:0 0 0 3px rgba(255,244,214,.18),inset 0 0 0 3px rgba(255,244,214,.22)}
[data-theme=space] .ring::before{z-index:-1;border-color:rgba(255,244,214,.38)}
[data-theme=space] .ring .pk-body::after{clip-path:inset(50% -10% -10% -10%);filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
/* ---- Ocean: glassy bubbles ---- */
.pk-stage[data-theme=ocean]{--acc:#06b6d4;background:linear-gradient(180deg,#38bdf8,#0369a1 55%,#082f49)}
[data-theme=ocean] .pk-bg .l1{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.14) 36%,transparent 44%),linear-gradient(98deg,transparent 52%,rgba(255,255,255,.1) 58%,transparent 64%);animation:pksway 9s ease-in-out infinite alternate}
@keyframes pksway{from{transform:skewX(-4deg)}to{transform:skewX(4deg)}}
[data-theme=ocean] .pk-bg .l2{background:radial-gradient(circle,rgba(255,255,255,.4) 0 3px,transparent 4px) 0 0/110px 150px,radial-gradient(circle,rgba(255,255,255,.3) 0 5px,transparent 6px) 50px 80px/190px 230px;animation:pkrise 16s linear infinite}
@keyframes pkrise{to{background-position:0 -300px,50px -310px}}
[data-theme=ocean] .pk-bg .l3{inset:auto -2% -3% -2%;height:16%;background:radial-gradient(ellipse 12% 100% at 8% 100%,#0d9488,transparent),radial-gradient(ellipse 9% 80% at 30% 100%,#14b8a6,transparent),radial-gradient(ellipse 14% 90% at 64% 100%,#0f766e,transparent),radial-gradient(ellipse 10% 70% at 90% 100%,#2dd4bf,transparent),linear-gradient(#0000,#d9b86a 90%)}
[data-theme=ocean] .pk-body{border-radius:50%;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.55);border:3px solid rgba(255,255,255,.65);background:radial-gradient(circle at 30% 24%,rgba(255,255,255,.95) 0 5%,rgba(255,255,255,.3) 6% 22%,transparent 24%),radial-gradient(circle at 50% 50%,rgba(125,211,252,.12) 40%,var(--c) 150%);box-shadow:inset 0 0 22px rgba(255,255,255,.35),0 10px 22px rgba(3,30,60,.45)}
[data-theme=ocean] .pk-it{animation:pkbob 4.5s ease-in-out var(--dly,0s) infinite alternate}
@keyframes pkbob{from{translate:0 -5px}to{translate:0 6px}}
/* ---- Candy: glossy sweets ---- */
.pk-stage[data-theme=candy]{--acc:#ec4899;--pf:'Fredoka','Baloo 2','Trebuchet MS',sans-serif;background:#fbcfe8}
[data-theme=candy] .pk-bg .l1{background:radial-gradient(circle,#fff 0 9px,transparent 10px) 0 0/72px 72px,radial-gradient(circle,#fecdd3 0 6px,transparent 7px) 36px 36px/72px 72px;opacity:.75}
[data-theme=candy] .pk-bg .l2{background:repeating-linear-gradient(45deg,rgba(255,255,255,.28) 0 26px,transparent 26px 52px)}
[data-theme=candy] .pk-bg .l3{background:radial-gradient(ellipse 50% 40% at 15% 90%,rgba(147,197,253,.5),transparent),radial-gradient(ellipse 50% 40% at 90% 10%,rgba(253,224,71,.45),transparent)}
[data-theme=candy] .pk-body{border-radius:34%;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.32);border:5px solid #fff;background:linear-gradient(160deg,rgba(255,255,255,.55),transparent 42%),var(--c);box-shadow:0 8px 0 rgba(0,0,0,.2),0 14px 20px rgba(190,24,93,.3)}
[data-theme=candy] .alt .pk-body{background:linear-gradient(160deg,rgba(255,255,255,.5),transparent 40%),repeating-linear-gradient(45deg,var(--c) 0 14px,rgba(255,255,255,.4) 14px 28px)}
/* ---- Arcade: neon ---- */
.pk-stage[data-theme=arcade]{--acc:#d946ef;--pf:'Orbitron','Courier New',monospace;background:linear-gradient(#0b0220,#2a0a55 62%,#0b0220)}
[data-theme=arcade] .pk-bg .l1{inset:auto 0 0 0;height:46%;background:linear-gradient(rgba(217,70,239,.7) 2px,transparent 2px) 0 0/100% 38px,linear-gradient(90deg,rgba(34,211,238,.7) 2px,transparent 2px) 0 0/60px 100%;transform:perspective(260px) rotateX(58deg);transform-origin:50% 100%;animation:pkgrid 2.4s linear infinite;-webkit-mask:linear-gradient(transparent,#000 50%);mask:linear-gradient(transparent,#000 50%)}
@keyframes pkgrid{to{background-position:0 38px,0 0}}
[data-theme=arcade] .pk-bg .l2{inset:auto 25% 30% 25%;aspect-ratio:2/1;border-radius:200px 200px 0 0;background:linear-gradient(#fde047,#f43f5e 70%,#a21caf);opacity:.5;filter:blur(1px)}
[data-theme=arcade] .pk-bg .l3{background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px)}
[data-theme=arcade] .pk-bg .l4{box-shadow:inset 0 0 120px rgba(0,0,0,.7)}
[data-theme=arcade] .pk-body{border-radius:6px;text-transform:uppercase;letter-spacing:.04em;color:#fff;text-shadow:0 0 8px var(--c),0 0 2px #fff;background:rgba(10,2,30,.82);border:3px solid var(--c);box-shadow:0 0 16px var(--c),inset 0 0 14px rgba(255,255,255,.12)}
/* ---- Dartboard: pub wall ---- */
.pk-stage[data-theme=darts]{--acc:#dc2626;--pf:'Bungee','Impact',sans-serif;background:#3b2414}
[data-theme=darts] .pk-bg .l1{background:repeating-linear-gradient(90deg,#4a2e18 0 46px,#3a2312 46px 49px)}
[data-theme=darts] .pk-bg .l2{background:radial-gradient(ellipse 60% 45% at 50% 0%,rgba(255,236,190,.38),transparent 70%)}
[data-theme=darts] .pk-bg .l3{background:radial-gradient(circle,rgba(0,0,0,.35) 0 2px,transparent 3px) 0 0/120px 90px;opacity:.5}
[data-theme=darts] .pk-bg .l4{box-shadow:inset 0 0 130px rgba(0,0,0,.75)}
[data-theme=darts] .pk-body{border-radius:50%;background:radial-gradient(circle,#d62d20 0 5%,#178a3d 5% 11%,transparent 11%),repeating-conic-gradient(from -9deg,#161616 0 18deg,#f1e3bd 18deg 36deg);box-shadow:0 0 0 .35em #111,0 0 0 .5em #9ca3af,0 12px 22px rgba(0,0,0,.6)}
[data-theme=darts] .pk-body::before,[data-theme=darts] .pk-body::after{content:'';position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -9deg,#d62d20 0 18deg,#178a3d 18deg 36deg)}
[data-theme=darts] .pk-body::before{-webkit-mask:radial-gradient(circle,transparent 0 80%,#000 81% 93%,transparent 94%);mask:radial-gradient(circle,transparent 0 80%,#000 81% 93%,transparent 94%)}
[data-theme=darts] .pk-body::after{-webkit-mask:radial-gradient(circle,transparent 0 50%,#000 51% 60%,transparent 61%);mask:radial-gradient(circle,transparent 0 50%,#000 51% 60%,transparent 61%)}
[data-theme=darts] .pk-nm{background:#111;color:#f1e3bd;border:2px solid #f1e3bd;border-radius:.3em;padding:.12em .45em;max-width:94%;box-shadow:0 3px 6px rgba(0,0,0,.6)}
/* ---- Balloons: sky ---- */
.pk-stage[data-theme=balloons]{--acc:#f43f5e;--pf:'Fredoka','Baloo 2',sans-serif;background:linear-gradient(#7dd3fc,#e0f2fe 80%)}
[data-theme=balloons] .pk-bg .l1{background:radial-gradient(ellipse 14% 8% at 20% 22%,#fff,transparent 70%),radial-gradient(ellipse 18% 9% at 70% 14%,#fff,transparent 70%),radial-gradient(ellipse 12% 7% at 90% 48%,#fff,transparent 70%);animation:pkcloud 40s linear infinite alternate}
@keyframes pkcloud{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
[data-theme=balloons] .pk-bg .l2{background:radial-gradient(ellipse 20% 10% at 40% 60%,rgba(255,255,255,.8),transparent 70%),radial-gradient(ellipse 16% 8% at 8% 70%,rgba(255,255,255,.8),transparent 70%);animation:pkcloud 55s linear infinite alternate-reverse}
[data-theme=balloons] .pk-bg .l3{inset:auto -5% -6% -5%;height:22%;background:radial-gradient(ellipse 40% 100% at 20% 100%,#4ade80,transparent 72%),radial-gradient(ellipse 45% 90% at 75% 100%,#22c55e,transparent 72%)}
[data-theme=balloons] .pk-bg .l4{inset:-10% auto auto -6%;width:26%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff7ae,rgba(253,224,71,.4) 55%,transparent 70%)}
[data-theme=balloons] .pk-body{inset:0 0 16% 0;border-radius:50% 50% 48% 48%/58% 58% 42% 42%;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.4);background:radial-gradient(circle at 32% 26%,rgba(255,255,255,.8) 0 6%,transparent 7%),radial-gradient(ellipse at 42% 38%,var(--c) 0 52%,rgba(0,0,0,.32) 135%);box-shadow:inset -6px -10px 16px rgba(0,0,0,.18),0 8px 14px rgba(0,60,120,.25)}
[data-theme=balloons] .pk-body::after{content:'';position:absolute;left:46%;width:8%;bottom:-5%;height:7%;background:var(--c);clip-path:polygon(50% 0,100% 100%,0 100%);filter:brightness(.8)}
[data-theme=balloons] .pk-it::after{content:'';position:absolute;left:50%;bottom:0;width:3px;height:16%;margin-left:-1px;background:rgba(255,255,255,.85);border-radius:2px;transform:skewX(-8deg)}
[data-theme=balloons][data-done=gray] .pk-it.done .pk-body{transform:scaleY(.82) translateY(10%)}

/* ---------- classroom seat plan (any theme): wooden desks, chair in the student's colour ---------- */
.pk-stage[data-layout=seats] .pk-body{inset:0;border-radius:9%;color:#2b1a08;text-shadow:none;text-transform:none;letter-spacing:0;font-family:'Inter',system-ui,sans-serif;background:linear-gradient(rgba(255,255,255,.35),transparent 40%),linear-gradient(#e8c88f,#c99853);border:3px solid #7a4a1e;box-shadow:0 7px 0 #5b3512,0 14px 20px rgba(0,0,0,.4);outline:0}
.pk-stage[data-layout=seats] .pk-body::before{content:'';position:absolute;inset:auto;left:8%;right:8%;top:10%;height:6%;background:rgba(255,255,255,.35);transform:none;box-shadow:none;border-radius:99px;-webkit-mask:none;mask:none}
.pk-stage[data-layout=seats] .pk-body::after{content:none}
.pk-stage[data-layout=seats] .pk-nm{background:none;border:0;box-shadow:none;color:#2b1a08;font-weight:800;text-shadow:none;padding:0 5%}
.pk-stage[data-layout=seats] .pk-it::before{content:'';position:absolute;left:28%;right:28%;bottom:-10%;height:20%;border-radius:40% 40% 18% 18%;background:var(--c);border:3px solid rgba(0,0,0,.35);z-index:-1}
.pk-stage[data-layout=seats] .pk-it::after{content:none}
.pk-stage[data-layout=seats] .pk-it{animation:none}

/* ---------- small screens ---------- */

@media(max-width:560px){.pk-stage{min-height:420px;aspect-ratio:auto;height:calc(75 * var(--vh,1vh))}.pk-sm span{display:none}.pk-rand span{font-size:.95rem}}

[data-theme=candy] .pk-nm{-webkit-text-stroke:5px rgba(131,24,67,.55);paint-order:stroke fill}

/* moving names: smooth slide to the new places; picked names fade away; "bigger" names grow into the space */
@property --fs{syntax:'<length>';inherits:true;initial-value:16px}
.pk-anim .pk-it{transition:transform .25s,filter .4s,opacity .5s,left .8s cubic-bezier(.3,.8,.3,1),top .8s cubic-bezier(.3,.8,.3,1),width .8s cubic-bezier(.3,.8,.3,1),height .8s cubic-bezier(.3,.8,.3,1),--fs .8s cubic-bezier(.3,.8,.3,1)}
[data-done=hide][data-rep=true] .pk-it.done{opacity:.55;pointer-events:auto;transform:rotate(var(--r,0deg))}
[data-grow=true][data-done=hide] .pk-it.done{opacity:0}

/* screen options live under the board, like Trivia Night's Options panel */
.pk-col{display:flex;flex-direction:column;gap:16px;min-width:0}
html.gic-fs .pk-col{display:block}
.pk-so-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px}
@media(max-width:700px){.pk-so-grid{grid-template-columns:1fr}}
.pk-count[hidden],.pk-rand[hidden]{display:none!important}

/* ---------- Halloween ---------- */
.pk-stage[data-theme=halloween]{--acc:#f97316;--pf:'Creepster','Chewy','Trebuchet MS',sans-serif;background:radial-gradient(ellipse at 50% 125%,#7c2d12,#2a0f3d 48%,#0d0618 85%)}
[data-theme=halloween] .pk-bg .l1{background:radial-gradient(circle,#fff 0 1px,transparent 1.6px) 0 0/140px 140px,radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.5px) 60px 80px/100px 100px;opacity:.7}
[data-theme=halloween] .pk-bg .l2{background:radial-gradient(ellipse 40% 14% at 25% 76%,rgba(200,180,255,.17),transparent),radial-gradient(ellipse 46% 13% at 75% 88%,rgba(255,255,255,.12),transparent),radial-gradient(ellipse 30% 10% at 55% 60%,rgba(200,180,255,.09),transparent);animation:pkdrift2 31s ease-in-out infinite alternate,pkcloud 26s linear infinite alternate}
[data-theme=halloween] .pk-bg .l3{inset:5% 9% auto auto;width:14%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 62% 30%,rgba(150,120,40,.35) 0 7%,transparent 8%),radial-gradient(circle at 30% 62%,rgba(150,120,40,.3) 0 10%,transparent 11%),radial-gradient(circle at 38% 34%,#fffbe0,#fde68a 62%,#d9b44a);box-shadow:0 0 50px 18px rgba(253,230,138,.3);animation:none}
[data-theme=halloween] .pk-bg .l4{inset:auto -2% -1% -2%;height:24%;background:radial-gradient(ellipse 30% 100% at 14% 100%,#07030d 0 97%,transparent 100%),radial-gradient(ellipse 38% 78% at 54% 100%,#0b0412 0 97%,transparent 100%),radial-gradient(ellipse 28% 100% at 94% 100%,#07030d 0 97%,transparent 100%);animation:none}
[data-theme=halloween] .pk-it:nth-of-type(6n+1){--c:#f97316!important}[data-theme=halloween] .pk-it:nth-of-type(6n+2){--c:#ea6a0a!important}[data-theme=halloween] .pk-it:nth-of-type(6n+3){--c:#8b5cf6!important}[data-theme=halloween] .pk-it:nth-of-type(6n+4){--c:#fb8c1a!important}[data-theme=halloween] .pk-it:nth-of-type(6n+5){--c:#f97316!important}[data-theme=halloween] .pk-it:nth-of-type(6n){--c:#84cc16!important}
.pk-stage[data-theme=halloween]:not([data-layout=seats]) .pk-body{inset:9% 0 0 0;border-radius:50% 50% 46% 46%/58% 58% 42% 42%;color:#2a1200;text-shadow:0 1px 0 rgba(255,225,160,.6);letter-spacing:.03em;background:radial-gradient(circle at 34% 30%,rgba(255,255,255,.42),transparent 26%),radial-gradient(ellipse at 50% 58%,transparent 52%,rgba(90,20,0,.42)),repeating-linear-gradient(90deg,rgba(120,40,0,.3) 0 3px,transparent 3px 19%,rgba(255,210,120,.2) 19% 23%,transparent 23% 32%),var(--c);box-shadow:inset -8px -10px 18px rgba(80,20,0,.4),0 8px 14px rgba(0,0,0,.5)}
.pk-stage[data-theme=halloween]:not([data-layout=seats]) .pk-body::before{content:'';position:absolute;left:44%;width:12%;top:-9%;height:15%;background:linear-gradient(90deg,#3f6212,#84cc16 50%,#3f6212);border-radius:35% 35% 10% 10%;transform:rotate(9deg)}
[data-theme=halloween] .pk-it:nth-of-type(6n+3) .pk-nm{color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.6)}
.pk-stage[data-theme=halloween]:not([data-layout=seats]) .alt .pk-body{inset:0;border-radius:50% 50% 6% 6%/46% 46% 6% 6%;clip-path:polygon(0 0,100% 0,100% 90%,87.5% 100%,75% 90%,62.5% 100%,50% 90%,37.5% 100%,25% 90%,12.5% 100%,0 90%);color:#2e1065;text-shadow:none;background:radial-gradient(circle at 32% 24%,#fff,transparent 42%),linear-gradient(#f5f3ff,#c4b5fd);box-shadow:none}
.pk-stage[data-theme=halloween]:not([data-layout=seats]) .alt .pk-body::before{content:none}
[data-theme=halloween] .alt .pk-nm{color:#2e1065;text-shadow:none}

/* ---------- Christmas ---------- */
.pk-stage[data-theme=christmas]{--acc:#dc2626;--pf:'Mountains of Christmas','Fredoka',cursive;background:linear-gradient(#08203a,#0f3b2e 92%)}
[data-theme=christmas] .pk-bg .l1{background:radial-gradient(circle,#fff 0 2px,transparent 2.7px) 0 0/90px 90px,radial-gradient(circle,rgba(255,255,255,.8) 0 1.5px,transparent 2.1px) 40px 45px/70px 70px;animation:pksnow 14s linear infinite}
[data-theme=christmas] .pk-bg .l2{background:radial-gradient(circle,rgba(255,255,255,.9) 0 3.5px,transparent 4.6px) 20px 10px/170px 170px,radial-gradient(circle,rgba(255,255,255,.7) 0 3px,transparent 4px) 100px 90px/210px 210px;animation:pksnow2 9s linear infinite}
[data-theme=christmas] .pk-bg .l3{inset:auto -2% -1% -2%;height:17%;background:radial-gradient(ellipse 40% 100% at 18% 100%,#f8fafc 0 96%,transparent 100%),radial-gradient(ellipse 50% 78% at 68% 100%,#e2e8f0 0 96%,transparent 100%),radial-gradient(ellipse 30% 90% at 98% 100%,#f8fafc 0 96%,transparent 100%);animation:none}
[data-theme=christmas] .pk-bg .l4{inset:0 0 auto 0;height:14%;background:radial-gradient(circle at 20px 55%,#fff 0 1.5px,#ef4444 2px 5px,rgba(239,68,68,.35) 6px,transparent 15px) 0 0/160px 100%,radial-gradient(circle at 60px 62%,#fff 0 1.5px,#facc15 2px 5px,rgba(250,204,21,.35) 6px,transparent 15px) 0 0/160px 100%,radial-gradient(circle at 100px 55%,#fff 0 1.5px,#22c55e 2px 5px,rgba(34,197,94,.35) 6px,transparent 15px) 0 0/160px 100%,radial-gradient(circle at 140px 62%,#fff 0 1.5px,#38bdf8 2px 5px,rgba(56,189,248,.35) 6px,transparent 15px) 0 0/160px 100%;animation:pktw 1.4s ease-in-out infinite alternate}
@keyframes pksnow{to{background-position:0 90px,40px 115px}}@keyframes pksnow2{to{background-position:20px 180px,100px 300px}}
[data-theme=christmas] .pk-it:nth-of-type(6n+1){--c:#dc2626!important}[data-theme=christmas] .pk-it:nth-of-type(6n+2){--c:#16a34a!important}[data-theme=christmas] .pk-it:nth-of-type(6n+3){--c:#eab308!important}[data-theme=christmas] .pk-it:nth-of-type(6n+4){--c:#2563eb!important}[data-theme=christmas] .pk-it:nth-of-type(6n+5){--c:#cbd5e1!important}[data-theme=christmas] .pk-it:nth-of-type(6n){--c:#dc2626!important}
.pk-stage[data-theme=christmas]:not([data-layout=seats]) .pk-body{inset:12% 0 0 0;border-radius:50%;color:#fff;text-shadow:0 2px 3px rgba(0,0,0,.55);background:radial-gradient(circle at 30% 26%,#fff 0 3%,rgba(255,255,255,.55) 7%,transparent 26%),radial-gradient(circle at 72% 82%,rgba(0,0,0,.4),transparent 60%),var(--c);box-shadow:inset -6px -8px 16px rgba(0,0,0,.3),0 8px 14px rgba(0,0,0,.45)}
.pk-stage[data-theme=christmas]:not([data-layout=seats]) .alt .pk-body{background:radial-gradient(circle at 30% 26%,#fff 0 3%,rgba(255,255,255,.55) 7%,transparent 26%),radial-gradient(circle at 72% 82%,rgba(0,0,0,.35),transparent 60%),repeating-linear-gradient(-45deg,rgba(255,255,255,.6) 0 7%,transparent 7% 17%),var(--c)}
.pk-stage[data-theme=christmas]:not([data-layout=seats]) .pk-body::before{content:'';position:absolute;left:38%;width:24%;top:-9%;height:11%;background:linear-gradient(90deg,#b8860b,#fde68a,#b8860b);border-radius:3px 3px 1px 1px}
.pk-stage[data-theme=christmas]:not([data-layout=seats]) .pk-body::after{content:'';position:absolute;left:44%;width:12%;top:-17%;height:9%;border:2px solid #fde68a;border-bottom:0;border-radius:50% 50% 0 0}
[data-theme=christmas] .pk-it:nth-of-type(6n+3) .pk-nm,[data-theme=christmas] .pk-it:nth-of-type(6n+5) .pk-nm{color:#2b1b00;text-shadow:0 1px 0 rgba(255,255,255,.5);-webkit-text-stroke:0}
[data-theme=christmas] .alt .pk-nm{-webkit-text-stroke:4px rgba(0,0,0,.35);paint-order:stroke fill}

/* ---------- Comic book ---------- */
.pk-stage[data-theme=comic]{--acc:#ef4444;--pf:'Bangers','Comic Sans MS','Chalkboard SE',cursive;background:#fde047}
[data-theme=comic] .pk-bg .l1{background:radial-gradient(circle,rgba(239,68,68,.6) 0 4px,transparent 4.7px) 0 0/18px 18px;-webkit-mask-image:linear-gradient(135deg,#000,transparent 65%);mask-image:linear-gradient(135deg,#000,transparent 65%)}
[data-theme=comic] .pk-bg .l2{background:radial-gradient(circle,rgba(37,99,235,.55) 0 4px,transparent 4.7px) 9px 9px/18px 18px;-webkit-mask-image:linear-gradient(-45deg,#000,transparent 62%);mask-image:linear-gradient(-45deg,#000,transparent 62%)}
[data-theme=comic] .pk-bg .l3{inset:-45%;background:repeating-conic-gradient(rgba(255,255,255,.42) 0 7deg,transparent 7deg 20deg);animation:pkspin 160s linear infinite}
@keyframes pkspin{to{transform:rotate(360deg)}}
[data-theme=comic] .pk-bg .l4{inset:0;box-shadow:inset 0 0 0 6px #111;animation:none}
[data-theme=comic] .pk-it:nth-of-type(6n+1){--c:#fde047!important}[data-theme=comic] .pk-it:nth-of-type(6n+2){--c:#f87171!important}[data-theme=comic] .pk-it:nth-of-type(6n+3){--c:#60a5fa!important}[data-theme=comic] .pk-it:nth-of-type(6n+4){--c:#4ade80!important}[data-theme=comic] .pk-it:nth-of-type(6n+5){--c:#f472b6!important}[data-theme=comic] .pk-it:nth-of-type(6n){--c:#fb923c!important}
.pk-stage[data-theme=comic]:not([data-layout=seats]) .pk-body{--bf:#fff;inset:0 0 16% 0;border-radius:50%/46%;border:4px solid #111;background:var(--bf);color:#111;text-shadow:none;text-transform:uppercase;letter-spacing:.03em;box-shadow:5px 5px 0 #111}
@supports (background:color-mix(in srgb,red,blue)){.pk-stage[data-theme=comic]:not([data-layout=seats]) .pk-body{--bf:color-mix(in srgb,var(--c) 22%,#fff)}}
.pk-stage[data-theme=comic]:not([data-layout=seats]) .pk-body::before{content:'';position:absolute;left:22%;top:calc(100% - 6px);width:20%;height:28%;background:#111;clip-path:polygon(0 0,100% 0,16% 100%)}
.pk-stage[data-theme=comic]:not([data-layout=seats]) .pk-body::after{content:'';position:absolute;left:calc(22% + 5px);top:calc(100% - 10px);width:calc(20% - 9px);height:calc(28% - 9px);background:var(--bf);clip-path:polygon(0 0,100% 0,16% 100%)}
.pk-stage[data-theme=comic]:not([data-layout=seats]) .alt .pk-body{inset:6% 0 10% 0;border-radius:3px;background:radial-gradient(circle,rgba(0,0,0,.14) 0 1.5px,transparent 2px) 0 0/9px 9px,var(--c);transform:rotate(-1.5deg)}
.pk-stage[data-theme=comic]:not([data-layout=seats]) .alt .pk-body::before,.pk-stage[data-theme=comic]:not([data-layout=seats]) .alt .pk-body::after{content:none}
[data-theme=comic] .pk-nm{text-shadow:none}
html.gic-present .pk-bar,html.gic-present #winAgain{display:none!important}