:root{--cream:#fff8e8;--paper:#fffdf6;--ink:#18244b;--navy:#233e83;--coral:#ff5e4d;--pink:#ff4fa0;--aqua:#19c9c3;--lemon:#ffd43b;--sky:#6ecdf5;--lav:#8a74e8;--line:rgba(35,62,131,.16)}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}body{display:grid;place-items:center;background:#b8dded;color:var(--ink);font-family:"DM Sans",sans-serif}button,input,select{font:inherit}button,canvas{touch-action:none;-webkit-tap-highlight-color:transparent}
.kiosk{position:relative;width:min(100vw,56.25vh);height:min(100vh,177.7778vw);aspect-ratio:9/16;overflow:hidden;isolation:isolate;background:linear-gradient(165deg,#fffdf6 0%,#fff4dc 50%,#dff8f6 100%)}.kiosk::before{content:"";position:absolute;inset:0;z-index:25;pointer-events:none;opacity:.12;background-image:radial-gradient(#233e83 1px,transparent 1px);background-size:18px 18px;mask-image:linear-gradient(to bottom,transparent,#000 34%,transparent)}
.ambient{position:absolute;z-index:-1;border-radius:50%;filter:blur(65px);opacity:.3;animation:drift 8s ease-in-out infinite alternate}.ambient-a{width:60%;height:30%;left:-28%;top:18%;background:var(--sky)}.ambient-b{width:65%;height:34%;right:-30%;top:54%;background:var(--coral);animation-delay:-4s}@keyframes drift{to{transform:translate3d(14%,8%,0) scale(1.12)}}
.topbar{height:5.2%;padding:1.3% 4.4% .4%;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:5;background:rgba(255,253,246,.78);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}.brand-lockup{display:flex;align-items:center;gap:1.4vw}.brand-lockup h1{margin:.15em 0 0;font:900 clamp(16px,2.05vh,32px)/.85 "Manrope";letter-spacing:-.055em;font-style:italic}.eyebrow{margin:0;color:var(--coral);font:900 clamp(6px,.58vh,10px)/1 "Manrope";letter-spacing:.18em}.brand-mark{width:clamp(26px,3.5vh,46px);aspect-ratio:1;display:flex;align-items:flex-end;gap:7%;transform:skew(-13deg)}.brand-mark i{display:block;width:28%;border-radius:5px;background:var(--aqua);box-shadow:0 3px 0 rgba(35,62,131,.15)}.brand-mark i:nth-child(1){height:55%;background:var(--lemon)}.brand-mark i:nth-child(2){height:100%;background:var(--coral)}.brand-mark i:nth-child(3){height:74%;background:var(--aqua)}.top-actions{display:flex;gap:1vw}.icon-btn{width:clamp(31px,3.7vh,50px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--navy);background:rgba(255,255,255,.9);box-shadow:0 6px 15px rgba(35,62,131,.1);cursor:pointer}.icon-btn svg{width:43%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.icon-btn.muted{color:var(--coral)}
.status-row{height:4.8%;margin:0 4.4%;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;position:relative;z-index:5}.status-pill span,.round-status>span{display:block;margin-bottom:.4em;color:#7883a2;font:800 clamp(5px,.5vh,8px)/1 "Manrope";letter-spacing:.18em}.status-pill strong{font:900 clamp(10px,1.15vh,17px)/1 "Manrope";letter-spacing:.04em}.score-pill{text-align:right}.score-pill strong{color:var(--coral);font-variant-numeric:tabular-nums}.round-status{text-align:center}.drop-dots{display:flex;justify-content:center;gap:.7vw}.drop-dots i{width:clamp(7px,.72vh,11px);aspect-ratio:1;border-radius:50%;background:var(--pink);box-shadow:0 0 0 3px rgba(255,79,160,.14)}.drop-dots i.used{background:#c7cce0;box-shadow:none}
.game-stage{position:relative;height:84%;margin:0 1.7%;overflow:hidden;border-radius:2.3vh;background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,248,232,.76));border:2px solid white;box-shadow:0 1.6vh 4vh rgba(35,62,131,.16),inset 0 0 0 1px rgba(35,62,131,.08)}.game-stage::before{content:"";position:absolute;inset:1.1%;border-radius:1.8vh;border:1px solid var(--line);pointer-events:none;box-shadow:inset 0 0 55px rgba(110,205,245,.16)}#gameCanvas{width:100%;height:100%;display:block;cursor:grab}#gameCanvas:active{cursor:grabbing}.instruction{position:absolute;z-index:3;top:1.4%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:1vw;color:#647296;white-space:nowrap;font:800 clamp(6px,.58vh,10px)/1 "Manrope";letter-spacing:.1em;transition:.25s}.instruction b{color:var(--navy)}.instruction.hidden{opacity:0}.drag-icon{width:clamp(20px,2.15vh,30px);height:clamp(12px,1.3vh,18px);border:2px solid var(--aqua);border-radius:99px;position:relative}.drag-icon i{position:absolute;width:34%;aspect-ratio:1;top:50%;left:7%;transform:translateY(-50%);border-radius:50%;background:var(--coral);animation:slide 1.15s ease-in-out infinite alternate}@keyframes slide{to{left:58%}}
.prize-labels{position:absolute;left:5.2%;right:5.2%;bottom:1.4%;height:8%;display:grid;grid-template-columns:repeat(5,1fr);pointer-events:none}.prize-label{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0;padding-bottom:.15em;transition:.22s}.prize-label b{width:94%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;color:var(--navy);font:900 clamp(6px,.58vh,10px)/1 "Manrope"}.prize-label span{margin-top:.36em;color:#8992ad;font:800 clamp(5px,.48vh,8px)/1 "Manrope";letter-spacing:.05em}.prize-label.near{transform:translateY(-5px) scale(1.04)}.prize-label.near b{color:var(--aqua)}.prize-label.active{transform:translateY(-7px) scale(1.08)}.prize-label.active b{color:var(--coral)}.prize-label.active span{color:var(--navy)}.board-signature{position:absolute;right:2.7%;top:46%;transform:rotate(90deg) translateX(50%);transform-origin:right center;color:rgba(35,62,131,.32);font:800 clamp(5px,.45vh,8px)/1 "Manrope";letter-spacing:.24em}
.footerbar{height:6%;margin:0 4.4%;display:flex;align-items:center;gap:4%;color:#7d87a3;font:800 clamp(6px,.54vh,9px)/1 "Manrope";letter-spacing:.1em}.mini-scoreboard{flex:1;display:grid;grid-template-columns:36% 1fr;align-items:center}.scoreboard-title{font-size:.88em}.scoreboard-title i{display:inline-block;width:.72em;aspect-ratio:1;margin-right:.5em;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 3px rgba(25,201,195,.15)}.mini-scoreboard strong{display:grid;grid-template-columns:auto 1fr auto;gap:8%;align-items:center;padding:.78em 1.2em;border-radius:99px;color:var(--ink);background:white;border:1px solid var(--line);box-shadow:0 5px 14px rgba(35,62,131,.08)}.mini-scoreboard b{color:var(--coral)}.mini-scoreboard span{overflow:hidden;text-overflow:ellipsis}.mini-scoreboard em{color:var(--aqua);font-style:normal;font-variant-numeric:tabular-nums}.admin-trigger{border:0;padding:1em 0;color:#8992ad;background:none;font:inherit;letter-spacing:inherit;cursor:pointer}
.screen-overlay{position:absolute;z-index:15;inset:0;display:flex;flex-direction:column;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .35s,visibility .35s;background:rgba(255,250,239,.97);backdrop-filter:blur(16px)}.screen-overlay.active{visibility:visible;opacity:1;pointer-events:auto}#welcomeScreen{background:radial-gradient(circle at 12% 20%,rgba(110,205,245,.42),transparent 31%),radial-gradient(circle at 92% 64%,rgba(255,94,77,.3),transparent 34%),linear-gradient(155deg,#fffdf6,#fff0d8 57%,#dbf9f6)}.welcome-art{height:25%;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden}.halo{position:absolute;border-radius:50%;border:2px solid rgba(25,201,195,.32)}.halo-one{width:58%;aspect-ratio:1;box-shadow:0 0 55px rgba(25,201,195,.12);animation:spinHalo 10s linear infinite}.halo-two{width:39%;aspect-ratio:1;border:4px dotted rgba(255,94,77,.65);animation:spinHalo 7s linear infinite reverse}@keyframes spinHalo{to{transform:rotate(360deg)}}.hero-puck{position:relative;width:35%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;transform:perspective(500px) rotateX(52deg) rotateZ(-12deg);background:radial-gradient(circle at 34% 24%,#fff 0 4%,#ffed93 10%,#ffd43b 24%,#ff6957 55%,#d93672 82%);border:8px solid #fff;box-shadow:0 2vh 3vh rgba(35,62,131,.23),0 0 0 5px var(--aqua),inset 0 0 0 5px rgba(255,255,255,.55)}.hero-puck::before{content:"";position:absolute;inset:15%;border-radius:50%;border:3px dashed rgba(255,255,255,.88)}.hero-puck span{transform:rotateZ(12deg);color:white;text-shadow:0 3px 2px rgba(35,62,131,.3);font:900 clamp(29px,4.6vh,68px)/1 "Manrope";font-style:italic}
.welcome-copy{padding:0 7%;text-align:center}.welcome-copy h2,.panel-content h2,.admin-card h2{margin:.3em 0 .15em;color:var(--navy);font:900 clamp(34px,4.75vh,72px)/.86 "Manrope";letter-spacing:-.075em;font-style:italic}.welcome-copy h2 em{color:var(--coral);font-style:italic}.intro{margin:.75em 0 1em;color:#647296;font-size:clamp(9px,.92vh,14px)}.welcome-leaderboard,.final-board{width:84%;margin:0 auto 1vh;border:1px solid var(--line);border-radius:1.25vh;overflow:hidden;background:rgba(255,255,255,.78);box-shadow:0 10px 28px rgba(35,62,131,.08)}.welcome-board-head,.final-board-head{display:flex;justify-content:space-between;padding:.8vh 5%;background:rgba(25,201,195,.1);color:var(--navy);font:900 clamp(7px,.65vh,11px)/1 "Manrope";letter-spacing:.13em}.welcome-board-head b{color:var(--aqua)}.final-board-head b{color:var(--coral)}.compact-leaderboard{list-style:none;margin:0;padding:0}.compact-leaderboard li{display:grid;grid-template-columns:10% 1fr auto;gap:4%;align-items:center;min-height:2.55vh;padding:.32vh 5%;border-top:1px solid var(--line);text-align:left;font-size:clamp(7px,.68vh,11px)}.compact-leaderboard li::before{content:attr(data-rank);color:var(--coral);font-weight:900}.compact-leaderboard li b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:.07em}.compact-leaderboard li strong{color:var(--aqua)}.compact-leaderboard li.current{background:rgba(255,212,59,.18);box-shadow:inset 4px 0 var(--lemon)}.compact-leaderboard li.empty{display:block;text-align:center;color:#8a93ad;padding:1.1vh}.compact-leaderboard li.empty::before{display:none}.name-field{display:block;width:84%;margin:0 auto 1vh;text-align:left}.name-field span,.settings-form label>span{display:block;margin:0 0 .5em;color:#7c86a2;font:900 clamp(6px,.58vh,10px)/1 "Manrope";letter-spacing:.15em}input,select{width:100%;border:1px solid var(--line);border-radius:1.05vh;padding:.88em 1.05em;outline:none;color:var(--ink);background:rgba(255,255,255,.9)}input:focus,select:focus{border-color:var(--aqua);box-shadow:0 0 0 3px rgba(25,201,195,.14)}
.primary-btn{display:block;width:84%;min-height:clamp(47px,5.25vh,78px);margin:0 auto;padding:0 1.5em;border:0;border-radius:99px;color:white;background:linear-gradient(100deg,#ff4f82,#ff6a45);box-shadow:0 13px 28px rgba(255,94,77,.25),inset 0 1px rgba(255,255,255,.38);font:900 clamp(9px,.92vh,15px)/1 "Manrope";letter-spacing:.13em;cursor:pointer}.primary-btn span{float:right;font-size:1.5em;line-height:.55}.primary-btn:active{transform:translateY(2px)}.text-btn{display:block;margin:1em auto 0;border:0;color:#707d9f;background:none;text-decoration:underline;text-underline-offset:5px;font:900 clamp(7px,.65vh,11px)/1 "Manrope";letter-spacing:.12em;cursor:pointer}.close-btn{position:absolute;z-index:3;top:4%;right:6%;width:clamp(40px,5vh,70px);aspect-ratio:1;border-radius:50%;border:1px solid var(--line);color:var(--navy);background:white;font-size:clamp(24px,3vh,44px);cursor:pointer;box-shadow:0 8px 20px rgba(35,62,131,.1)}
.panel-screen{justify-content:center;padding:9%}.panel-content{text-align:center}.panel-content h2,.admin-card h2{margin-bottom:.75em}.steps{display:grid;gap:1.2vh;margin-bottom:3vh}.steps article{display:grid;grid-template-columns:12% 1fr;padding:1.7vh 5%;text-align:left;border:1px solid var(--line);border-radius:1.2vh;background:white;box-shadow:0 8px 20px rgba(35,62,131,.06)}.steps article>span{grid-row:span 2;color:var(--coral);font:900 clamp(13px,1.4vh,22px)/1 "Manrope"}.steps h3{margin:0;color:var(--navy);font:900 clamp(10px,1.15vh,18px)/1 "Manrope";letter-spacing:.1em}.steps p{margin:.55em 0 0;color:#71809f;font-size:clamp(8px,.9vh,14px)}
.result-screen{justify-content:center;text-align:center;overflow:hidden;background:radial-gradient(circle at 50% 34%,#fff 0%,#fff4c9 38%,#c9f5f1 72%,#82d9ee 100%)}#celebrationCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}.result-content{position:relative;z-index:2}.result-content h2{margin:.3em 4% .15em;color:var(--navy);font:900 clamp(34px,5vh,76px)/.87 "Manrope";letter-spacing:-.065em;font-style:italic}.result-content>p:not(.eyebrow){color:#657392;font-size:clamp(9px,1vh,15px)}.result-orbit{width:64%;aspect-ratio:1;margin:1.5vh auto .8vh;display:grid;place-items:center;border-radius:50%;border:4px solid white;background:radial-gradient(circle,#fff 0 46%,rgba(255,212,59,.34) 47% 61%,rgba(25,201,195,.22) 62%);box-shadow:0 20px 55px rgba(35,62,131,.16);animation:resultPulse 1.4s ease-in-out infinite alternate}@keyframes resultPulse{to{transform:scale(1.025);box-shadow:0 24px 65px rgba(255,94,77,.24)}}.result-prize{width:112%;height:112%;object-fit:contain;filter:drop-shadow(0 2vh 1.5vh rgba(35,62,131,.22))}.result-score{width:52%;margin:1.7vh auto;padding:1.1vh;border-top:2px solid white;border-bottom:2px solid white}.result-score span{display:block;color:#7d87a2;font:900 clamp(6px,.6vh,10px)/1 "Manrope";letter-spacing:.17em}.result-score strong{display:block;margin-top:.35em;color:var(--coral);font:900 clamp(24px,3.3vh,50px)/1 "Manrope"}.final-board{width:78%;margin:1.3vh auto 1.8vh}.result-screen.final-mode .result-orbit{width:31%;margin-top:.7vh}.result-screen.final-mode .result-content h2{font-size:clamp(30px,4.2vh,64px)}.result-screen.final-mode .result-score{margin:.8vh auto}.leaderboard-content{width:100%}.leaderboard-list{list-style:none;counter-reset:rank;padding:0;margin:0 0 3vh}.leaderboard-list li{counter-increment:rank;display:grid;grid-template-columns:12% 1fr auto;align-items:center;padding:1.25vh 4%;border-bottom:1px solid var(--line);text-align:left}.leaderboard-list li::before{content:"0" counter(rank);color:var(--coral);font-weight:900}.leaderboard-list strong{color:var(--aqua)}.leaderboard-list .empty{display:block;text-align:center;color:#8992ac;padding:4vh}.leaderboard-list .empty::before{display:none}
.admin-screen{padding:8% 6% 5%;overflow-y:auto;background:rgba(255,250,239,.99)}.admin-card{text-align:center;padding-bottom:4vh}.admin-card h2{margin-bottom:.4em}.pin-gate{width:72%;margin:4vh auto}.pin-gate p,.form-help{color:#74809c;font-size:clamp(8px,.84vh,13px)}.pin-gate input{margin:1.5vh 0;text-align:center;font-size:clamp(24px,3vh,44px);letter-spacing:.5em}.pin-gate .primary-btn{width:100%}.pin-gate small{display:block;color:#8992ac;margin-top:1.4vh}.hidden{display:none!important}.settings-form{text-align:left}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2vh 3%}.settings-form h3{margin:3vh 0 .5vh;color:var(--navy);font:900 clamp(10px,1.05vh,16px)/1 "Manrope";letter-spacing:.13em}.weight-grid{display:grid;grid-template-columns:1fr 1fr;gap:1vh 3%;margin:1.4vh 0 2.4vh}.weight-grid label{display:grid;grid-template-columns:1fr 36%;align-items:center;padding:.7vh 2.5%;border:1px solid var(--line);border-radius:1vh;background:white}.weight-grid label span{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.weight-grid input{padding:.65em;text-align:center}input[type=range]{padding:1em 0;accent-color:var(--coral)}.toast{position:absolute;z-index:30;left:50%;bottom:6%;transform:translate(-50%,20px);min-width:48%;padding:1.2vh 3%;opacity:0;pointer-events:none;transition:.3s;text-align:center;border:1px solid var(--line);border-radius:99px;color:white;background:rgba(35,62,131,.95);box-shadow:0 15px 35px rgba(35,62,131,.2);font:900 clamp(8px,.76vh,12px)/1 "Manrope";letter-spacing:.08em}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-aspect-ratio:9/16){.kiosk{width:100vw;height:177.7778vw}}@media(min-aspect-ratio:9/16){.kiosk{height:100vh;width:56.25vh}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important}}