:root {
  --blue: #073dcc;
  --blue-deep: #031452;
  --blue-black: #020b2c;
  --orange: #ff641e;
  --aqua: #17e7e0;
  --white: #f7fbff;
  --ink: #06113c;
  --muted: #8ea4d2;
  --line: rgba(121, 190, 255, .24);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #01061b; color: var(--white); font-family: "DM Sans", sans-serif; }
button, input, select { font: inherit; }
button, canvas { touch-action: none; -webkit-tap-highlight-color: transparent; }
body { display: grid; place-items: center; }

.kiosk { position: relative; width: min(100vw, 56.25vh); height: min(100vh, 177.7778vw); aspect-ratio: 9/16; overflow: hidden; isolation: isolate; background: linear-gradient(155deg, #062074 0%, #030d37 38%, #020720 100%); }
.kiosk::before { content: ""; position: absolute; inset: 0; z-index: 25; pointer-events: none; opacity: .075; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: screen; }
.ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(75px); opacity: .38; animation: drift 9s ease-in-out infinite alternate; }
.ambient-a { width: 52%; height: 28%; left: -25%; top: 17%; background: var(--aqua); }
.ambient-b { width: 58%; height: 32%; right: -28%; top: 55%; background: var(--orange); animation-delay: -4s; }
@keyframes drift { to { transform: translate3d(20%, 12%, 0) scale(1.18); } }

.topbar { height: 7.8%; padding: 2.8% 5.2% 1.2%; display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 5; }
.brand-lockup { display: flex; align-items: center; gap: 2.2vw; }
.brand-lockup h1 { margin: .25em 0 0; font: 800 clamp(18px, 2.55vh, 38px)/.85 "Manrope"; letter-spacing: -.055em; font-style: italic; }
.eyebrow { margin: 0; color: var(--aqua); font: 800 clamp(7px, .7vh, 11px)/1 "Manrope"; letter-spacing: .2em; }
.brand-mark { width: clamp(30px, 4.5vh, 58px); aspect-ratio: 1; display: flex; align-items: flex-end; gap: 7%; transform: skew(-14deg); }
.brand-mark i { display: block; width: 28%; border-radius: 4px; background: linear-gradient(180deg, var(--aqua), #0086ff); box-shadow: 0 0 15px #17e7e099; }
.brand-mark i:nth-child(1) { height: 55%; }.brand-mark i:nth-child(2) { height: 100%; background: linear-gradient(var(--orange), #ff9b24); }.brand-mark i:nth-child(3) { height: 74%; }
.top-actions { display: flex; gap: 1.1vw; }
.icon-btn { width: clamp(36px, 4.6vh, 60px); aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); color: var(--white); background: rgba(5, 28, 95, .72); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 8px 22px rgba(0,0,0,.2); cursor: pointer; }
.icon-btn svg { width: 44%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.muted { color: var(--orange); }

.status-row { height: 6.5%; margin: 0 5.2%; display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); position: relative; z-index: 5; }
.status-pill span, .round-status > span { display: block; margin-bottom: .55em; color: var(--muted); font: 800 clamp(6px, .62vh, 10px)/1 "Manrope"; letter-spacing: .2em; }
.status-pill strong { font: 800 clamp(11px, 1.35vh, 20px)/1 "Manrope"; letter-spacing: .05em; }
.score-pill { text-align: right; }.score-pill strong { color: var(--aqua); font-variant-numeric: tabular-nums; }
.round-status { text-align: center; }
.drop-dots { display: flex; justify-content: center; gap: .75vw; }
.drop-dots i { width: clamp(7px, .78vh, 12px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 0 12px #ff641e; }
.drop-dots i.used { background: #24366b; box-shadow: none; }

.game-stage { position: relative; height: 79.1%; margin: 0 2.8%; overflow: hidden; }
.game-stage::before { content: ""; position: absolute; inset: 1.4% 2% 2.2%; border-radius: 2.4vh; border: 1px solid rgba(90, 174, 255, .24); background: linear-gradient(180deg, rgba(15,65,173,.24), rgba(1,8,35,.55)); box-shadow: inset 0 0 85px rgba(0,0,0,.45), 0 22px 50px rgba(0,0,0,.25); pointer-events: none; }
#gameCanvas { width: 100%; height: 100%; display: block; cursor: grab; }
#gameCanvas:active { cursor: grabbing; }
.instruction { position: absolute; z-index: 3; top: 2.7%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 1.2vw; color: #a8bce3; white-space: nowrap; font: 700 clamp(7px, .68vh, 11px)/1 "Manrope"; letter-spacing: .11em; transition: .25s; }
.instruction b { color: var(--white); }.instruction.hidden { opacity: 0; }
.drag-icon { width: clamp(19px, 2.3vh, 31px); height: clamp(12px, 1.55vh, 20px); border: 1px solid var(--aqua); border-radius: 99px; position: relative; }
.drag-icon i { position: absolute; width: 35%; aspect-ratio: 1; top: 50%; left: 7%; transform: translateY(-50%); border-radius: 50%; background: var(--orange); animation: slide 1.35s ease-in-out infinite alternate; }
@keyframes slide { to { left: 58%; } }
.prize-labels { position: absolute; left: 5.2%; right: 5.2%; bottom: 3.15%; height: 8.5%; 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: .35em; transition: .25s; }
.prize-label b { width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font: 800 clamp(7px, .68vh, 11px)/1 "Manrope"; }
.prize-label span { margin-top: .4em; color: #7f94c4; font: 800 clamp(5px, .54vh, 9px)/1 "Manrope"; letter-spacing: .07em; }
.prize-label.near b { color: var(--aqua); text-shadow: 0 0 10px #17e7e0; }.prize-label.near { transform: translateY(-3px); }
.prize-label.active b { color: var(--orange); text-shadow: 0 0 14px #ff641e; }.prize-label.active span { color: var(--white); }
.board-signature { position: absolute; right: 4%; top: 49%; transform: rotate(90deg) translateX(50%); transform-origin: right center; color: rgba(114,166,255,.4); font: 700 clamp(5px,.5vh,8px)/1 "Manrope"; letter-spacing: .28em; }

.footerbar { height: 6.6%; margin: 0 5.2%; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 4%; color: var(--muted); font: 800 clamp(6px,.58vh,10px)/1 "Manrope"; letter-spacing: .12em; }
.mini-scoreboard { flex: 1; display: grid; grid-template-columns: 39% 1fr; align-items: center; }
.scoreboard-title { font-size: .88em; }.scoreboard-title i { display: inline-block; width: .7em; aspect-ratio: 1; margin-right: .55em; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 9px var(--aqua); }
.mini-scoreboard strong { display: grid; grid-template-columns: auto 1fr auto; gap: 8%; align-items: center; padding: .9em 1.2em; border-radius: 99px; color: white; background: rgba(6,36,123,.62); border: 1px solid var(--line); }
.mini-scoreboard b { color: var(--orange); }.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: #6176a9; 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(2,10,43,.96); backdrop-filter: blur(17px); }
.screen-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }
#welcomeScreen { background: radial-gradient(circle at 16% 18%, rgba(23,231,224,.3), transparent 30%), radial-gradient(circle at 90% 62%, rgba(255,100,30,.34), transparent 34%), linear-gradient(155deg,#083ec8 0%,#061b76 42%,#020a2d 100%); }
.welcome-art { height: 23%; min-height: 0; position: relative; display: grid; place-items: center; overflow: hidden; }
.halo { position: absolute; border-radius: 50%; border: 1px solid rgba(23,231,224,.5); }
.halo-one { width: 54%; aspect-ratio: 1; box-shadow: 0 0 55px rgba(23,231,224,.15), inset 0 0 55px rgba(23,231,224,.1); animation: spinHalo 9s linear infinite; }
.halo-two { width: 34%; aspect-ratio: 1; border: 2px dashed rgba(255,100,30,.7); animation: spinHalo 7s linear infinite reverse; }
@keyframes spinHalo { to { transform: rotate(360deg); } }
.hero-puck { position: relative; width: 27%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transform: perspective(500px) rotateX(57deg) rotateZ(-15deg); background: radial-gradient(circle at 35% 25%,#fff 0 3%,#b9d5ff 9%,#2673ff 19%,#04217f 54%,#000921 72%); border: 5px solid #dceeff; box-shadow: 0 2vh 4vh rgba(0,0,0,.48), 0 0 4vh #17e7e0aa, inset 0 0 0 4px #071a57, inset 0 0 0 8px #ff641e; }
.hero-puck::before { content: ""; position: absolute; inset: 17%; border-radius: 50%; border: 2px dashed rgba(255,255,255,.65); }
.hero-puck span { transform: rotateZ(15deg); color: white; text-shadow: 0 2px 8px #000; font: 900 clamp(22px,3.5vh,54px)/1 "Manrope"; font-style: italic; }
.welcome-copy { padding: 0 7.5%; text-align: center; }
.welcome-copy h2, .panel-content h2, .admin-card h2 { margin: .35em 0 .16em; font: 900 clamp(34px,4.75vh,72px)/.86 "Manrope"; letter-spacing: -.075em; font-style: italic; }
.welcome-copy h2 em { color: var(--orange); font-style: italic; text-shadow: 0 0 25px rgba(255,100,30,.38); }
.intro { margin: .8em 0 1.15em; color: #b7c9ef; font-size: clamp(9px,.96vh,14px); }
.welcome-leaderboard { width: 84%; margin: 0 auto 1.15vh; border: 1px solid var(--line); border-radius: 1.25vh; overflow: hidden; background: rgba(2,16,62,.54); box-shadow: 0 13px 35px rgba(0,0,0,.15); }
.welcome-board-head, .final-board-head { display: flex; justify-content: space-between; padding: .85vh 5%; background: rgba(23,231,224,.09); color: #dce9ff; font: 800 clamp(7px,.68vh,11px)/1 "Manrope"; letter-spacing: .14em; }
.welcome-board-head b { color: var(--aqua); }.final-board-head b { color: var(--orange); }
.compact-leaderboard { list-style: none; counter-reset: miniRank; margin: 0; padding: 0; }
.compact-leaderboard li { counter-increment: miniRank; display: grid; grid-template-columns: 10% 1fr auto; gap: 4%; align-items: center; min-height: 2.6vh; padding: .35vh 5%; border-top: 1px solid rgba(121,190,255,.12); text-align: left; font-size: clamp(7px,.7vh,11px); }
.compact-leaderboard li::before { content: attr(data-rank); color: var(--orange); font-weight: 900; }
.compact-leaderboard li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: .08em; }.compact-leaderboard li strong { color: var(--aqua); font-variant-numeric: tabular-nums; }
.compact-leaderboard li.current { background: rgba(255,100,30,.16); box-shadow: inset 3px 0 var(--orange); }
.compact-leaderboard li.empty { display: block; text-align: center; color: #7892c8; padding: 1.2vh; }.compact-leaderboard li.empty::before { display: none; }
.name-field { display: block; width: 84%; margin: 0 auto 1.05vh; text-align: left; }
.name-field span, .settings-form label > span { display: block; margin: 0 0 .55em; color: #8fa7d6; font: 800 clamp(6px,.6vh,10px)/1 "Manrope"; letter-spacing: .16em; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 1.05vh; padding: .9em 1.05em; outline: none; color: white; background: rgba(2,15,58,.65); }
input:focus, select:focus { border-color: var(--aqua); box-shadow: 0 0 0 3px rgba(23,231,224,.12); }
.primary-btn { display: block; width: 84%; min-height: clamp(47px,5.3vh,80px); margin: 0 auto; padding: 0 1.5em; border: 0; border-radius: 99px; color: white; background: linear-gradient(100deg,#ff4c18,#ff8724); box-shadow: 0 14px 35px rgba(255,76,24,.28), inset 0 1px rgba(255,255,255,.3); font: 900 clamp(9px,.95vh,15px)/1 "Manrope"; letter-spacing: .14em; 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: 1.1em auto 0; border: 0; color: #8da7dd; background: none; text-decoration: underline; text-underline-offset: 5px; font: 800 clamp(7px,.67vh,11px)/1 "Manrope"; letter-spacing: .13em; 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: white; background: rgba(6,35,116,.7); font-size: clamp(24px,3vh,44px); cursor: pointer; }

.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: rgba(5,33,112,.55); }
.steps article > span { grid-row: span 2; color: var(--orange); font: 900 clamp(13px,1.4vh,22px)/1 "Manrope"; }.steps h3 { margin: 0; font: 900 clamp(10px,1.15vh,18px)/1 "Manrope"; letter-spacing: .1em; }.steps p { margin: .55em 0 0; color: #9fb5e3; font-size: clamp(8px,.9vh,14px); }

.result-screen { justify-content: center; text-align: center; overflow: hidden; background: radial-gradient(circle at 50% 35%,rgba(20,88,255,.92),#041758 52%,#010725 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: .35em 4% .18em; font: 900 clamp(34px,5vh,76px)/.87 "Manrope"; letter-spacing: -.065em; font-style: italic; }.result-content > p:not(.eyebrow) { color: #b7c9ee; font-size: clamp(9px,1vh,15px); }
.result-orbit { width: 58%; aspect-ratio: 1; margin: 2vh auto 1vh; display: grid; place-items: center; border-radius: 50%; border: 2px solid rgba(23,231,224,.5); background: radial-gradient(circle,rgba(23,231,224,.18),rgba(0,10,48,.15)); box-shadow: 0 0 70px rgba(23,231,224,.25),inset 0 0 50px rgba(23,231,224,.12); animation: resultPulse 1.5s ease-in-out infinite alternate; }
@keyframes resultPulse { to { transform: scale(1.025); box-shadow: 0 0 95px rgba(255,100,30,.34),inset 0 0 60px rgba(255,100,30,.14); border-color: var(--orange); } }
.result-prize { width: 110%; height: 110%; object-fit: contain; filter: drop-shadow(0 2vh 2vh rgba(0,0,0,.4)); }.result-score { width: 52%; margin: 2vh auto; padding: 1.2vh; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }.result-score span { display: block; color: #8fa7d6; font: 800 clamp(6px,.62vh,10px)/1 "Manrope"; letter-spacing: .18em; }.result-score strong { display: block; margin-top: .35em; color: var(--aqua); font: 900 clamp(24px,3.3vh,50px)/1 "Manrope"; }
.final-board { width: 78%; margin: 1.5vh auto 2vh; overflow: hidden; border: 1px solid var(--line); border-radius: 1.2vh; background: rgba(2,14,54,.78); }.result-screen.final-mode .result-orbit { width: 30%; margin-top: 1vh; }.result-screen.final-mode .result-content h2 { font-size: clamp(30px,4.2vh,64px); }.result-screen.final-mode .result-score { margin: 1vh 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(--orange); font-weight: 900; }.leaderboard-list strong { color: var(--aqua); }.leaderboard-list .empty { display: block; text-align: center; color: var(--muted); padding: 4vh; }.leaderboard-list .empty::before { display: none; }

.admin-screen { padding: 8% 6% 5%; overflow-y: auto; background: rgba(1,7,34,.98); }.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: #93a9d5; 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: #6176a9; 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; 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; }.weight-grid label span { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.weight-grid input { padding: .65em; text-align: center; }.settings-form .primary-btn { display: block; }input[type="range"] { padding: 1em 0; accent-color: var(--orange); }
.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; background: rgba(3,18,70,.96); box-shadow: 0 15px 40px rgba(0,0,0,.25); font: 800 clamp(8px,.78vh,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; } }