:root {
  color-scheme: dark;
  --navy: #071633;
  --ink: #f9fbff;
  --muted: #b9ccef;
  --cyan: #35e1e8;
  --cyan-dark: #08798a;
  --pink: #ff4fa3;
  --pink-dark: #9d245f;
  --gold: #ffd84c;
  --purple: #8659ed;
  font-family: ui-rounded, "Avenir Next Rounded", "Trebuchet MS", system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; min-width: 900px; min-height: 650px; margin: 0; overflow: hidden; }
body { color: var(--ink); background: var(--navy); }
button { color: inherit; font: inherit; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 5px solid white; outline-offset: 4px; }

.arcade {
  position: relative;
  height: 100%;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(rgba(4,13,38,.08), rgba(4,10,29,.28)), url("./art/backdrop-01.webp") center / cover no-repeat;
}
.arcade::after { position: absolute; z-index: -1; inset: 0; content: ""; background: radial-gradient(circle at 50% 58%, transparent 0 29%, rgba(2,8,27,.2) 76%, rgba(2,7,23,.66)); pointer-events: none; }
.world-glow { position: absolute; z-index: -1; left: 22%; right: 18%; top: 14%; bottom: 6%; border-radius: 50%; background: radial-gradient(circle, rgba(47,226,232,.22), transparent 63%); filter: blur(14px); }

.game-hud { position: absolute; z-index: 20; left: 22px; right: 22px; top: 18px; display: grid; grid-template-columns: 220px 1fr auto 54px; align-items: center; gap: 18px; }
.game-badge,.mission-meter,.scoreboard,.sound-button,.difficulty-card { border: 1px solid rgba(255,255,255,.22); background: rgba(5,20,54,.86); box-shadow: inset 0 1px rgba(255,255,255,.12), 0 7px 0 rgba(1,7,28,.46), 0 15px 35px rgba(1,5,20,.22); backdrop-filter: blur(12px); }
.game-badge { padding: 11px 16px; border-radius: 17px; }
.game-badge span,.mission-meter span,.scoreboard span,.difficulty-card span { display: block; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.game-badge strong { display: block; margin-top: 2px; font-size: 18px; }
.mission-meter { justify-self: center; min-width: 260px; padding: 9px 18px; border-radius: 17px; text-align: center; }
.mission-dots { display: flex; justify-content: center; gap: 9px; margin-top: 7px; }
.mission-dots i { width: 34px; height: 8px; border-radius: 9px; background: #284373; box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.mission-dots i.is-filled { background: var(--gold); box-shadow: 0 0 13px rgba(255,216,76,.72); }
.scoreboard { display: flex; padding: 7px; border-radius: 17px; }
.scoreboard div { min-width: 70px; padding: 3px 11px; text-align: center; }
.scoreboard div + div { border-left: 1px solid rgba(255,255,255,.14); }
.scoreboard strong { display: block; margin-top: 2px; font-size: 23px; line-height: 1; }
.sound-button { width: 52px; height: 52px; border-radius: 16px; color: var(--gold); font-size: 25px; font-weight: 1000; cursor: pointer; }
.sound-button .sound-off,.sound-button[aria-pressed="true"] .sound-on { display: none; }
.sound-button[aria-pressed="true"] .sound-off { display: inline; }

.mascot-zone { position: absolute; z-index: 7; left: 1.5%; bottom: 0; width: 29%; height: 72%; pointer-events: none; }
.mascot { position: absolute; left: -2%; bottom: -8%; width: min(390px, 100%); filter: drop-shadow(0 18px 18px rgba(0,0,0,.38)); transform-origin: 52% 82%; transition: transform 180ms ease-out, filter 180ms ease-out; }
.speech-bubble { position: absolute; z-index: 2; left: 31%; top: 5%; width: 185px; padding: 14px 17px; border: 3px solid #142b5d; border-radius: 23px 23px 23px 5px; color: #10224c; background: white; box-shadow: 0 7px 0 #15295a, 0 13px 28px rgba(0,0,0,.25); font-size: 17px; font-weight: 1000; line-height: 1.15; text-align: center; transform: rotate(-2deg); }
.arcade.is-celebrating .mascot { animation: mascot-cheer 640ms cubic-bezier(.2,.82,.24,1); filter: drop-shadow(0 18px 18px rgba(0,0,0,.38)) drop-shadow(0 0 20px rgba(255,216,76,.75)); }
.arcade.is-miss .mascot { animation: mascot-oops 380ms ease-out; }

.game-stage { position: absolute; z-index: 5; left: 24%; right: 18%; top: 112px; bottom: 24px; display: grid; grid-template-rows: minmax(170px, 1fr) auto auto 34px 70px; align-items: center; min-width: 650px; padding: 20px 38px 22px; border: 2px solid rgba(255,255,255,.24); border-radius: 34px; background: linear-gradient(180deg, rgba(8,28,69,.74), rgba(5,16,48,.91)); box-shadow: inset 0 2px rgba(255,255,255,.12), 0 10px 0 rgba(0,5,24,.55), 0 24px 65px rgba(0,0,0,.38); backdrop-filter: blur(9px); }
.machine-wrap { position: relative; align-self: end; justify-self: center; width: 210px; height: 215px; margin-top: -7px; }
.prize-machine { position: absolute; inset: -19px 0 auto; width: 210px; filter: drop-shadow(0 12px 13px rgba(0,0,0,.36)); }
.prize-window { position: absolute; z-index: 2; left: 61px; top: 50px; display: grid; place-items: center; width: 91px; height: 91px; border-radius: 50%; font-size: 58px; filter: drop-shadow(0 4px 4px rgba(0,61,106,.3)); }
.prize-window span { animation: prize-float 1.6s ease-in-out infinite alternate; }
.prize-window.is-popping span { animation: prize-pop 450ms cubic-bezier(.2,.88,.25,1.25); }

.mission-copy { margin-top: -3px; text-align: center; }
.kicker { display: block; margin-bottom: 3px; color: var(--gold); font-size: 12px; font-weight: 1000; letter-spacing: .15em; text-transform: uppercase; }
h1 { max-width: 720px; margin: 0 auto; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; text-shadow: 0 4px 0 rgba(0,0,0,.3); }
.mission-copy p { margin: 7px 0 9px; color: var(--muted); font-size: 16px; font-weight: 700; }
.listen-button { min-height: 42px; padding: 7px 15px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #e4efff; background: rgba(30,61,116,.72); font-size: 13px; font-weight: 900; cursor: pointer; }
.listen-button:hover { background: #294f91; }
.listen-button span { color: var(--gold); }

.letter-tray { display: flex; align-items: center; justify-content: center; gap: clamp(16px,2vw,28px); min-height: 132px; padding: 13px 0 7px; }
.letter-button { position: relative; display: grid; place-items: center; width: clamp(112px, 9.6vw, 148px); height: clamp(104px, 9.1vw, 138px); border: 4px solid #8cf8fb; border-radius: 29px; color: #10234d; background: linear-gradient(180deg,#f9ffff,#a8f6f4); box-shadow: inset 0 4px white, 0 9px 0 var(--cyan-dark), 0 15px 23px rgba(0,0,0,.3); font-family: "Arial Rounded MT Bold", ui-rounded, system-ui, sans-serif; font-size: clamp(62px,6vw,86px); font-weight: 1000; line-height: 1; cursor: pointer; transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out; }
.letter-button:nth-child(2n) { border-color: #ffb7dc; background: linear-gradient(180deg,#fffaff,#ffc1df); box-shadow: inset 0 4px white,0 9px 0 var(--pink-dark),0 15px 23px rgba(0,0,0,.3); }
.letter-button:nth-child(3n) { border-color: #ffe98a; background: linear-gradient(180deg,#fffef3,#ffe477); box-shadow: inset 0 4px white,0 9px 0 #a86e0f,0 15px 23px rgba(0,0,0,.3); }
.letter-button:hover { transform: translateY(-7px) rotate(-1deg) scale(1.035); filter: brightness(1.05); }
.letter-button:active { transform: translateY(6px); box-shadow: inset 0 3px rgba(255,255,255,.8),0 3px 0 var(--cyan-dark),0 8px 12px rgba(0,0,0,.28); }
.letter-button.is-correct { animation: letter-win 520ms cubic-bezier(.2,.85,.24,1.2); }
.letter-button.is-wrong { animation: gentle-shake 340ms ease-out; }
.feedback { min-height: 34px; color: #b6fbff; font-size: 18px; font-weight: 1000; text-align: center; }
.feedback.is-error { color: #ffd2e7; }
.continue-area { display: grid; place-items: center; }
.continue-button { min-width: 270px; min-height: 58px; padding: 10px 26px; border: 3px solid #fff1a8; border-radius: 20px; color: #302107; background: linear-gradient(180deg,#fff4a2,#ffc83d); box-shadow: inset 0 3px white,0 7px 0 #9a5910,0 12px 22px rgba(0,0,0,.3); font-size: 18px; font-weight: 1000; cursor: pointer; }
.continue-button:hover { transform: translateY(-3px); box-shadow: inset 0 3px white,0 10px 0 #9a5910,0 15px 26px rgba(0,0,0,.3); }
.continue-button:active { transform: translateY(5px); box-shadow: inset 0 3px white,0 2px 0 #9a5910; }

.difficulty-card { position: absolute; z-index: 12; right: 22px; top: 114px; width: 220px; padding: 17px; border-radius: 20px; }
.difficulty-card > div:first-child { display: flex; align-items: end; justify-content: space-between; gap: 8px; }
.difficulty-card strong { font-size: 23px; }
.difficulty-track { height: 10px; margin: 10px 0 8px; overflow: hidden; border-radius: 10px; background: #223d70; }
.difficulty-track i { display: block; width: 20%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--cyan),var(--gold),var(--pink)); transition: width 300ms ease-out; }
.difficulty-card p { margin: 0; color: white; font-size: 14px; font-weight: 900; }

.toast { position: absolute; z-index: 40; left: 50%; bottom: 28px; max-width: 70%; padding: 12px 20px; opacity: 0; transform: translate(-50%,14px); border: 2px solid #ffd2e7; border-radius: 999px; color: #26102c; background: #ffd5e9; box-shadow: 0 6px 0 #7e2858,0 13px 28px rgba(0,0,0,.35); pointer-events: none; font-weight: 1000; transition: opacity 150ms ease-out, transform 150ms ease-out; }
.toast.is-showing { opacity: 1; transform: translate(-50%,0); }
.confetti { position: absolute; z-index: 30; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; left: 50%; top: 47%; width: 13px; height: 20px; opacity: 0; border-radius: 4px; background: var(--gold); }
.confetti i:nth-child(3n) { background: var(--cyan); }.confetti i:nth-child(3n+1) { background: var(--pink); }
.arcade.is-celebrating .confetti i { animation: ticket-burst 720ms ease-out both; }
.confetti i:nth-child(1){--x:-340px;--y:-220px}.confetti i:nth-child(2){--x:-260px;--y:-300px}.confetti i:nth-child(3){--x:-180px;--y:-190px}.confetti i:nth-child(4){--x:-90px;--y:-330px}.confetti i:nth-child(5){--x:10px;--y:-250px}.confetti i:nth-child(6){--x:90px;--y:-320px}.confetti i:nth-child(7){--x:180px;--y:-205px}.confetti i:nth-child(8){--x:280px;--y:-290px}.confetti i:nth-child(9){--x:350px;--y:-180px}.confetti i:nth-child(10){--x:-290px;--y:-95px}.confetti i:nth-child(11){--x:270px;--y:-105px}.confetti i:nth-child(12){--x:40px;--y:-360px}

@keyframes mascot-cheer { 0%,100%{transform:none} 38%{transform:translateY(-25px) rotate(-5deg) scale(1.05)} 68%{transform:translateY(-7px) rotate(4deg)} }
@keyframes mascot-oops { 0%,100%{transform:none} 25%{transform:translateX(-7px) rotate(-3deg)} 65%{transform:translateX(6px) rotate(3deg)} }
@keyframes prize-float { to { transform: translateY(-5px) rotate(3deg) scale(1.04); } }
@keyframes prize-pop { 0%{transform:scale(.2) rotate(-15deg);opacity:0} 70%{transform:scale(1.25) rotate(5deg)} 100%{transform:scale(1);opacity:1} }
@keyframes letter-win { 35%{transform:translateY(-16px) scale(1.15) rotate(-4deg)} 70%{transform:translateY(2px) scale(.96) rotate(2deg)} }
@keyframes gentle-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-9px)} 55%{transform:translateX(7px)} 80%{transform:translateX(-3px)} }
@keyframes ticket-burst { 0%{opacity:1;transform:translate(0,0) rotate(0) scale(.4)} 75%{opacity:1} 100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(250deg) scale(1.1)} }

@media (max-width: 1120px) {
  .game-hud { grid-template-columns: 190px 1fr auto 52px; }.mission-meter { min-width: 210px; }.scoreboard div { min-width: 58px; padding-inline: 7px; }
  .mascot-zone { width: 27%; }.game-stage { left: 21%; right: 4%; min-width: 700px; }.difficulty-card { right: 26px; top: 105px; width: 185px; }
}
@media (max-height: 760px) {
  .game-hud { top: 10px; }.game-stage { top: 91px; bottom: 14px; grid-template-rows: minmax(135px,1fr) auto auto 28px 60px; padding-top: 10px; }.machine-wrap { width: 168px; height: 164px; }.prize-machine { width: 168px; }.prize-window { left: 49px; top: 40px; width: 73px; height: 73px; font-size: 47px; }.letter-tray { min-height: 105px; }.letter-button { width: 105px; height: 96px; font-size: 61px; }.continue-button { min-height: 52px; }.mascot { width: 310px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}