:root {
  --ink: #2f3941;
  --panel: #fffdf9;
  --cream: #fffaf3;
  --gold: #c99447;
  --cyan: #66aca6;
  --coral: #df7f72;
  --sage: #a6bca9;
  --muted: #7c858b;
  --line: rgba(60,68,72,.14);
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #e9e3db; font-family: "DM Sans", sans-serif; color: var(--ink); }
button, input, select { font: inherit; }
button { color: 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; background: radial-gradient(circle at 17% 10%, #fff 0%, transparent 30%), linear-gradient(150deg, #fffaf3 0%, #f5eee7 42%, #e9f0ec 100%); isolation: isolate; }
.kiosk::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1; z-index: 20; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; }
.ambient { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .17; z-index: -1; animation: drift 12s ease-in-out infinite alternate; }
.ambient-a { width: 45%; height: 28%; background: #c8e4dd; top: 18%; left: -25%; }
.ambient-b { width: 55%; height: 28%; background: #f3c6bc; top: 55%; right: -30%; animation-delay: -5s; }
@keyframes drift { to { transform: translate3d(20%, 16%, 0) scale(1.15); } }

.topbar { height: 7.8%; padding: 3.1% 5.4% 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.3vw; }
.brand-lockup h1 { margin: .2em 0 0; font: 800 clamp(16px, 2.35vh, 34px)/.95 "Manrope"; letter-spacing: -.045em; }
.eyebrow { margin: 0; color: var(--gold); font: 700 clamp(7px, .74vh, 12px)/1 "Manrope"; letter-spacing: .22em; }
.brand-mark { width: clamp(28px, 4.2vh, 54px); aspect-ratio: 1; display: flex; gap: 8%; align-items: flex-end; transform: skew(-10deg); }
.brand-mark i { display: block; width: 28%; border-radius: 999px; background: linear-gradient(#eccd91, #b67b3e); box-shadow: 0 0 12px #d7a85b60; }
.brand-mark i:nth-child(1) { height: 55%; }.brand-mark i:nth-child(2) { height: 100%; }.brand-mark i:nth-child(3) { height: 72%; }
.top-actions { display: flex; gap: 1.1vw; }
.icon-btn { width: clamp(34px, 4.6vh, 58px); aspect-ratio: 1; border: 1px solid var(--line); background: rgba(255,255,255,.66); color: var(--ink); border-radius: 50%; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 25px rgba(82,70,55,.07); }
.icon-btn svg { width: 44%; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn.muted { color: var(--coral); opacity: .7; }

.status-row { height: 6.5%; margin: 0 5.4%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; position: relative; z-index: 5; }
.status-pill span, .round-status > span { display: block; color: var(--muted); font: 700 clamp(7px, .67vh, 11px)/1 "Manrope"; letter-spacing: .18em; margin-bottom: .55em; }
.status-pill strong { font: 700 clamp(11px, 1.38vh, 20px)/1 "Manrope"; letter-spacing: .05em; }
.score-pill { text-align: right; }.score-pill strong { color: var(--cyan); font-variant-numeric: tabular-nums; }
.round-status { text-align: center; }
.drop-dots { display: flex; justify-content: center; gap: .75vw; }
.drop-dots i { width: clamp(6px, .75vh, 11px); aspect-ratio: 1; border-radius: 50%; background: var(--gold); box-shadow: 0 0 9px #efbc68; transition: .3s; }
.drop-dots i.used { background: #303447; 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: 1px solid rgba(70,80,82,.12); border-radius: 3.2vh; background: rgba(255,255,255,.42); box-shadow: inset 0 0 80px rgba(255,255,255,.45), 0 25px 50px rgba(99,82,61,.08); 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.3vw; white-space: nowrap; color: #798489; font: 500 clamp(7px, .72vh, 12px)/1 "Manrope"; letter-spacing: .1em; transition: opacity .3s; }
.instruction b { color: var(--ink); }
.instruction.hidden { opacity: 0; }
.drag-icon { width: clamp(17px, 2.2vh, 29px); height: clamp(12px, 1.6vh, 21px); border: 1px solid var(--gold); border-radius: 99px; position: relative; }
.drag-icon i { position: absolute; width: 35%; aspect-ratio: 1; border-radius: 50%; background: var(--gold); top: 50%; left: 8%; transform: translateY(-50%); animation: slide 1.6s ease-in-out infinite alternate; }
@keyframes slide { to { left: 57%; } }
.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; }
.prize-label b { width: 92%; overflow: hidden; text-overflow: ellipsis; text-align: center; white-space: nowrap; font: 800 clamp(7px, .69vh, 11px)/1 "Manrope"; letter-spacing: .015em; }
.prize-label span { margin-top: .4em; color: var(--gold); font: 700 clamp(5px, .55vh, 9px)/1 "Manrope"; letter-spacing: .08em; }
.board-signature { position: absolute; right: 4%; top: 49%; transform: rotate(90deg) translateX(50%); transform-origin: right center; color: rgba(47,57,65,.22); font: 600 clamp(5px, .52vh, 8px)/1 "Manrope"; letter-spacing: .3em; }
.footerbar { height: 6.6%; border-top: 1px solid var(--line); margin: 0 5.4%; display: flex; align-items: center; gap: 4%; color: var(--muted); font: 700 clamp(6px, .6vh, 10px)/1 "Manrope"; letter-spacing: .12em; }
.mini-scoreboard { flex: 1; display: grid; grid-template-columns: 39% 1fr; align-items: center; }
.scoreboard-title { color: var(--muted); font-size: .9em; }.scoreboard-title i { display: inline-block; width: .65em; aspect-ratio: 1; margin-right: .6em; border-radius: 50%; background: #75b78b; box-shadow: 0 0 8px #75b78b; }
.mini-scoreboard strong { display: grid; grid-template-columns: auto 1fr auto; gap: 8%; align-items: center; padding: .85em 1.2em; border-radius: 99px; background: rgba(255,255,255,.65); border: 1px solid var(--line); color: var(--ink); }
.mini-scoreboard b { color: var(--coral); }.mini-scoreboard span { overflow: hidden; text-overflow: ellipsis; }.mini-scoreboard em { color: var(--cyan); font-style: normal; font-variant-numeric: tabular-nums; }
.admin-trigger { border: 0; padding: 1em 0; color: #555c70; 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 .4s, visibility .4s; background: rgba(255,250,243,.94); backdrop-filter: blur(18px); }
.screen-overlay.active { visibility: visible; opacity: 1; pointer-events: auto; }
#welcomeScreen { background: radial-gradient(circle at 50% 25%, #fff 0%, #f8efe8 38%, #e8f1ed 100%); }
.welcome-art { height: 43%; position: relative; display: grid; place-items: center; overflow: hidden; }
.halo { position: absolute; border-radius: 50%; border: 1px solid rgba(97,228,231,.24); }
.halo-one { width: 65%; aspect-ratio: 1; border-color: rgba(102,172,166,.32); box-shadow: 0 0 55px rgba(102,172,166,.12), inset 0 0 55px rgba(102,172,166,.1); animation: breathe 4s ease-in-out infinite alternate; }
.halo-two { width: 41%; aspect-ratio: 1; border-color: rgba(239,188,104,.4); }
@keyframes breathe { to { transform: scale(1.08); opacity: .55; } }
.hero-puck { position: relative; width: 30%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; transform: perspective(500px) rotateX(59deg) rotateZ(-15deg); background: radial-gradient(circle at 38% 28%, #fffbe9 0 5%, #efd49a 17%, #c28a47 52%, #6d4b29 73%); border: 4px solid #e8be78; box-shadow: 0 3vh 5vh rgba(96,72,45,.22), 0 0 6vh #d8a95f55, inset 0 0 0 5px #75502b, inset 0 0 0 8px #f1d69c; }
.hero-puck::before { content: ""; position: absolute; inset: 18%; border-radius: 50%; border: 2px dashed rgba(255,243,207,.45); }
.hero-puck span { transform: rotateZ(15deg); font: 800 clamp(24px, 4vh, 60px)/1 "Manrope"; color: #1a130b; letter-spacing: -.1em; }
.welcome-copy { padding: 0 9%; text-align: center; }
.welcome-copy h2, .panel-content h2, .admin-card h2 { margin: .45em 0 .25em; font: 800 clamp(42px, 6.1vh, 92px)/.88 "Manrope"; letter-spacing: -.07em; }
.welcome-copy h2 em { color: transparent; -webkit-text-stroke: 1px var(--gold); font-style: normal; }
.intro { color: #a7adbd; margin: 1.6em 0 2.1em; font-size: clamp(11px, 1.36vh, 20px); line-height: 1.55; }
.name-field { display: block; width: 78%; margin: 0 auto 1.4em; text-align: left; }
.name-field span, .settings-form label > span { display: block; color: var(--muted); font: 700 clamp(7px, .65vh, 10px)/1 "Manrope"; letter-spacing: .17em; margin: 0 0 .65em; }
input, select { width: 100%; border: 1px solid var(--line); border-radius: 1.2vh; background: rgba(255,255,255,.72); color: var(--ink); padding: 1em 1.1em; outline: none; }
input:focus, select:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(239,188,104,.1); }
.primary-btn { width: 78%; min-height: clamp(48px, 5.7vh, 86px); margin: 0 auto; padding: 0 1.5em; border: 0; border-radius: 99px; background: linear-gradient(105deg, #f4d394, #d7953d); color: #181107; box-shadow: 0 12px 35px rgba(214,149,61,.22); font: 800 clamp(10px, 1.05vh, 16px)/1 "Manrope"; letter-spacing: .14em; cursor: pointer; }
.primary-btn span { float: right; font-size: 1.5em; line-height: .6; }
.primary-btn:active { transform: translateY(2px); }
.text-btn { display: block; margin: 1.6em auto 0; border: 0; background: none; color: #8f96a8; text-decoration: underline; text-underline-offset: 5px; font: 700 clamp(8px, .78vh, 12px)/1 "Manrope"; letter-spacing: .13em; cursor: pointer; }
.close-btn { position: absolute; z-index: 2; top: 4%; right: 6%; width: clamp(38px, 5vh, 70px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.7); color: var(--ink); font-size: clamp(23px, 3vh, 44px); line-height: 1; cursor: pointer; }
.panel-screen { justify-content: center; padding: 9%; }
.panel-content { text-align: center; }
.panel-content h2, .admin-card h2 { font-size: clamp(34px, 5vh, 74px); margin-bottom: .9em; }
.steps { display: grid; gap: 1.4vh; margin-bottom: 3vh; }
.steps article { text-align: left; padding: 1.8vh 5%; border: 1px solid var(--line); border-radius: 1.4vh; display: grid; grid-template-columns: 12% 1fr; background: rgba(255,255,255,.58); }
.steps article > span { grid-row: span 2; color: var(--gold); font: 700 clamp(13px, 1.5vh, 22px)/1 "Manrope"; }
.steps h3 { margin: 0; font: 800 clamp(11px, 1.25vh, 19px)/1 "Manrope"; letter-spacing: .1em; }
.steps p { margin: .55em 0 0; color: var(--muted); font-size: clamp(9px, .95vh, 14px); }

.result-screen { justify-content: center; text-align: center; background: radial-gradient(circle at 50% 36%, #fff 0%, #f8eee5 48%, #dfece7 100%); overflow: hidden; }
.result-content { position: relative; z-index: 2; }
#celebrationCanvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.result-content h2 { margin: .45em 4% .25em; font: 800 clamp(35px, 5.4vh, 82px)/.9 "Manrope"; letter-spacing: -.06em; }
.result-content > p:not(.eyebrow) { color: #aeb4c3; font-size: clamp(10px, 1.15vh, 17px); }
.result-orbit { width: 60%; aspect-ratio: 1; margin: 2.2vh auto 1.2vh; border: 1px solid rgba(201,148,71,.38); border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.48); box-shadow: 0 0 80px rgba(201,148,71,.13), inset 0 0 50px rgba(102,172,166,.08); animation: breathe 2.5s ease-in-out infinite alternate; }
.result-prize { width: 105%; height: 105%; object-fit: contain; filter: drop-shadow(0 2vh 2vh rgba(78,55,32,.22)); }
.result-score { width: 50%; margin: 2.6vh auto; padding: 1.5vh; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.result-score span { display: block; color: var(--muted); font: 700 clamp(6px, .65vh, 10px)/1 "Manrope"; letter-spacing: .18em; }
.result-score strong { display: block; margin-top: .35em; color: var(--cyan); font: 800 clamp(24px, 3.4vh, 52px)/1 "Manrope"; }

.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(--gold); font: 700 clamp(9px, 1vh, 15px)/1 "Manrope"; }
.leaderboard-list b { font: 700 clamp(10px, 1.2vh, 18px)/1 "Manrope"; letter-spacing: .07em; }
.leaderboard-list strong { color: var(--cyan); font: 700 clamp(11px, 1.3vh, 20px)/1 "Manrope"; }
.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(249,245,238,.98); }
.admin-card { text-align: center; padding-bottom: 4vh; }
.admin-card h2 { margin-bottom: .45em; }
.pin-gate { width: 72%; margin: 4vh auto; }
.pin-gate p { color: var(--muted); font-size: clamp(10px, 1vh, 15px); }
.pin-gate input { text-align: center; font-size: clamp(24px, 3vh, 44px); letter-spacing: .5em; margin: 1.5vh 0; }
.pin-gate .primary-btn { width: 100%; }.pin-gate small { display: block; color: #555c70; margin-top: 1.5vh; }
.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 .6vh; font: 800 clamp(10px, 1.1vh, 16px)/1 "Manrope"; letter-spacing: .14em; }
.form-help { color: var(--muted); font-size: clamp(8px, .82vh, 12px); line-height: 1.45; }
.weight-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1vh 3%; margin: 1.5vh 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; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weight-grid input { padding: .65em; text-align: center; }
.settings-form .primary-btn { display: block; }
input[type="range"] { padding: 1em 0; accent-color: var(--gold); }

.toast { position: absolute; z-index: 30; left: 50%; bottom: 6%; transform: translate(-50%, 20px); min-width: 48%; padding: 1.25vh 3%; text-align: center; border: 1px solid var(--line); border-radius: 99px; background: rgba(255,253,249,.96); opacity: 0; pointer-events: none; transition: .3s; color: var(--ink); box-shadow: 0 15px 40px rgba(75,61,44,.14); font: 700 clamp(8px, .8vh, 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; } }