:root {
  --vh: 1vh;
  --cyan: #00e5ff;
  --blue: #0877ff;
  --deep: #02051d;
  --pink: #ff2ebd;
  --danger: #ff405d;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #01030f; }
body {
  font-family: Tahoma, "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}
button { font: inherit; }
img { display: block; }

.app-shell { position: relative; width: 100vw; height: calc(100 * var(--vh)); overflow: hidden; background: var(--deep); }
.screen { position: absolute; inset: 0; display: none; overflow: hidden; }
.screen.active { display: block; }
.screen-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen-vignette { position: absolute; inset: 0; background: radial-gradient(circle at 50% 43%, rgba(0,0,0,.03) 0%, rgba(0,0,0,.08) 46%, rgba(0,0,0,.35) 100%); pointer-events: none; }
.screen-vignette.stronger { background: radial-gradient(circle at 50% 42%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.18) 48%, rgba(0,0,0,.58) 100%); }
.screen-vignette.red { background: radial-gradient(circle at 50% 42%, rgba(110,0,20,.10) 0%, rgba(40,0,20,.30) 58%, rgba(0,0,0,.72) 100%); }

/* Start screen */
.start-screen { background: #02051d; }
.game-logo {
  position: absolute; z-index: 20; top: clamp(34px, 7vh, 78px); left: 50%; transform: translateX(-50%);
  width: clamp(360px, 46vw, 760px); max-height: 39vh; object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(0,229,255,.45)) drop-shadow(0 0 36px rgba(0,80,255,.35));
}
.start-crosshair { position: absolute; z-index: 22; width: clamp(44px, 5vw, 78px); left: 50%; top: 51%; transform: translate(-50%,-50%); filter: drop-shadow(0 0 14px rgba(0,229,255,.9)); animation: crosshair-pulse 1.6s ease-in-out infinite; }
.start-ship-wrap { position: absolute; z-index: 19; left: 50%; bottom: clamp(70px, 7vh, 118px); transform: translateX(-50%); width: clamp(250px, 31vw, 560px); pointer-events: none; animation: ship-bob 3s ease-in-out infinite; }
.start-ship { width: 100%; height: auto; filter: drop-shadow(0 0 24px rgba(0,229,255,.72)) drop-shadow(0 12px 30px rgba(255,120,20,.25)); }
.engine-glow { position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); width: 18%; height: 13%; border-radius: 50%; background: radial-gradient(ellipse, rgba(255,243,160,.96), rgba(255,132,0,.68) 34%, rgba(0,229,255,.22) 64%, transparent 73%); filter: blur(8px); animation: engine-flicker .24s infinite alternate; }

.deco, .number-bubble { position: absolute; z-index: 6; pointer-events: none; filter: drop-shadow(0 0 11px rgba(0,229,255,.18)); }
.deco { animation: floaty 6s ease-in-out infinite alternate; }
.saturn { left: 3.5%; top: 8%; width: clamp(110px, 16vw, 300px); }
.meteor { right: 6%; top: 18%; width: clamp(92px, 12vw, 220px); animation-delay: -1.7s; }
.ufo-left { left: 1.5%; bottom: 17%; width: clamp(88px, 12vw, 210px); animation-delay: -3.2s; }
.ufo-right { right: 2%; bottom: 16%; width: clamp(76px, 10vw, 180px); animation-delay: -4s; }
.stars-yellow { left: 3%; top: 40%; width: clamp(70px, 8vw, 145px); animation-delay: -2.2s; }
.stars-sparkle { right: 25%; top: 11%; width: clamp(56px, 6vw, 120px); animation-delay: -4.5s; }
.asteroids { right: 5%; bottom: 4%; width: clamp(85px, 11vw, 190px); opacity: .9; animation-delay: -5s; }
.number-bubble { animation: bubble-float 2.8s ease-in-out infinite alternate; }
.n32 { left: 9.5%; top: 36%; width: clamp(86px, 10.5vw, 190px); }
.n15 { left: 20%; top: 59%; width: clamp(70px, 8vw, 145px); animation-delay: -.8s; }
.n64 { right: 9.5%; top: 41%; width: clamp(80px, 9.7vw, 180px); animation-delay: -1.4s; }
.n27 { right: 21%; top: 58%; width: clamp(70px, 8vw, 145px); animation-delay: -2.1s; }

.image-button { position: absolute; z-index: 45; border: 0; padding: 0; background: transparent; cursor: pointer; transition: transform .16s ease, filter .16s ease; }
.image-button img { width: 100%; height: auto; pointer-events: none; }
.image-button:hover { transform: translateY(-5px) scale(1.045); filter: brightness(1.15) drop-shadow(0 0 16px var(--cyan)); }
.image-button:active { transform: translateY(2px) scale(.95); filter: brightness(1.25) drop-shadow(0 0 22px var(--cyan)); }
.start-btn { right: max(2.5vw, var(--safe-right)); bottom: max(2.2vh, var(--safe-bottom)); width: clamp(176px, 22vw, 390px); animation: button-idle 2s ease-in-out infinite; }
.howto-btn { left: max(2.4vw, var(--safe-left)); bottom: max(2.2vh, var(--safe-bottom)); width: clamp(142px, 18vw, 320px); }
.sound-start { right: max(1.4vw, var(--safe-right)); top: max(1.5vh, var(--safe-top)); width: clamp(46px, 4.3vw, 76px); border-radius: 18px; }

/* Level select */
.level-screen { padding: max(22px, var(--safe-top)) max(16px, var(--safe-right)) max(20px, var(--safe-bottom)) max(16px, var(--safe-left)); }
.level-title { position: absolute; z-index: 10; top: 5.5%; left: 50%; transform: translateX(-50%); width: clamp(420px, 58vw, 940px); height: auto; filter: drop-shadow(0 0 14px rgba(0,229,255,.55)); }
.level-grid { position: absolute; z-index: 12; left: 50%; top: 54%; transform: translate(-50%,-50%); width: min(78vw, 1180px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.6vw, 50px); align-items: center; }
.level-card { border: 0; padding: 0; background: transparent; cursor: pointer; border-radius: 20px; transition: transform .2s ease, filter .2s ease; }
.level-card img { width: 100%; max-height: 61vh; object-fit: contain; }
.level-card:hover { transform: translateY(-7px) scale(1.035); filter: brightness(1.13) drop-shadow(0 0 22px rgba(0,229,255,.42)); }
.level-card:active { transform: scale(.965); }
.text-back-btn { position: absolute; z-index: 20; left: max(18px, var(--safe-left)); bottom: max(14px, var(--safe-bottom)); padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(0,229,255,.55); background: rgba(0,10,30,.64); color: #dffcff; cursor: pointer; box-shadow: 0 0 14px rgba(0,229,255,.18); }

/* Gameplay */
.game-screen { cursor: crosshair; touch-action: none; }
.game-vignette { background: linear-gradient(180deg, rgba(0,0,0,.16), transparent 20%, transparent 74%, rgba(0,0,0,.2)); }
.hud { position: absolute; z-index: 80; inset: 0 0 auto 0; padding: max(7px, var(--safe-top)) max(9px, var(--safe-right)) 0 max(9px, var(--safe-left)); pointer-events: none; }
.hud-panel { position: relative; display: flex; align-items: center; justify-content: center; min-height: 48px; color: #fff; text-shadow: 0 0 8px var(--cyan); }
.hud-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.lives-panel { position: absolute; left: max(7px, var(--safe-left)); top: max(7px, var(--safe-top)); width: clamp(112px, 9vw, 170px); height: clamp(45px, 4vw, 66px); }
.lives-display { position: relative; z-index: 2; display: flex; align-items: center; gap: clamp(2px, .25vw, 5px); padding: 0 13px; }
.life-heart { width: clamp(23px, 2vw, 34px); aspect-ratio: 1; object-fit: contain; transition: opacity .2s ease, filter .2s ease, transform .2s ease; }
.life-heart.lost { opacity: .16; filter: grayscale(1); transform: scale(.78); }
.center-hud { position: absolute; top: max(7px, var(--safe-top)); left: 50%; transform: translateX(-50%); display: flex; gap: 8px; pointer-events: none; }
.small-panel { width: clamp(78px, 6.3vw, 115px); height: clamp(43px, 3.7vw, 62px); gap: 2px; font-size: clamp(14px, 1.4vw, 22px); }
.small-panel > *:not(.hud-frame) { position: relative; z-index: 2; }
.star-symbol { font-size: .92em; }
.hud-controls { position: absolute; right: max(7px, var(--safe-right)); top: max(7px, var(--safe-top)); display: flex; gap: 8px; pointer-events: auto; }
.hud-icon-btn { width: clamp(44px, 3.7vw, 62px); height: clamp(44px, 3.7vw, 62px); border: 1px solid rgba(0,229,255,.2); border-radius: 12px; background: rgba(0,12,44,.66); padding: 7px; cursor: pointer; transition: transform .15s ease, filter .15s ease; box-shadow: 0 0 12px rgba(0,229,255,.12); }
.hud-icon-btn img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.hud-icon-btn:hover { transform: scale(1.07); filter: drop-shadow(0 0 10px var(--cyan)); }
.hud-icon-btn:active { transform: scale(.92); }
.problem-panel { position: absolute; z-index: 65; top: clamp(70px, 10vh, 108px); left: 50%; transform: translateX(-50%); width: clamp(290px, 34vw, 590px); height: clamp(54px, 6.2vw, 86px); font-size: clamp(25px, 3vw, 50px); font-weight: 900; }
.problem-panel strong { position: relative; z-index: 3; }
.target-area { position: absolute; z-index: 20; left: 3%; right: 3%; top: clamp(148px, 20vh, 190px); bottom: 5%; }
.answer-target { position: absolute; width: clamp(86px, 8.4vw, 132px); aspect-ratio: 1; border: 0; background: transparent; padding: 0; cursor: crosshair; color: white; font-size: clamp(20px, 2vw, 34px); font-weight: 900; text-shadow: 0 0 9px var(--cyan); filter: drop-shadow(0 0 12px rgba(0,229,255,.32)); }
.answer-target img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.answer-target span { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; }
.answer-target.hit-correct { animation: target-burst .48s ease forwards; }
.answer-target.hit-wrong { animation: target-shake .34s ease; }
.player-ship-wrap { position: absolute; z-index: 45; width: clamp(66px, 7vw, 110px); pointer-events: none; will-change: transform,left,top; }
.player-ship { width: 100%; height: auto; filter: drop-shadow(0 0 12px rgba(0,229,255,.8)) drop-shadow(0 7px 10px rgba(255,120,0,.25)); transform-origin: 50% 62%; transition: transform .12s ease-out; }
.player-engine { position: absolute; left: 50%; top: 87%; transform: translateX(-50%); width: 25%; height: 30%; border-radius: 50%; background: linear-gradient(to bottom, rgba(255,255,210,.95), rgba(255,170,20,.9) 30%, rgba(0,229,255,.35) 65%, transparent); filter: blur(3px); animation: engine-flicker .18s infinite alternate; }
.game-crosshair { position: absolute; z-index: 50; width: clamp(46px, 5vw, 76px); pointer-events: none; transform: translate(-50%,-50%); filter: drop-shadow(0 0 11px var(--cyan)); }
.effects-layer { position: absolute; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.laser { position: absolute; height: 5px; border-radius: 999px; transform-origin: 0 50%; background: linear-gradient(90deg, #fff, #8ff8ff 22%, #00e5ff 54%, rgba(0,119,255,.10)); box-shadow: 0 0 7px #fff, 0 0 18px var(--cyan), 0 0 34px var(--blue); animation: laser-fade .24s ease-out forwards; }
.feedback { position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%); font-size: clamp(24px, 3vw, 48px); font-weight: 900; text-align: center; text-shadow: 0 0 14px currentColor; animation: feedback-pop .8s ease forwards; }
.flash-red { position: absolute; inset: 0; background: rgba(255,0,55,.18); animation: flash-out .3s ease forwards; }
.timer-critical { color: #ff5a70; animation: timer-pulse .45s ease-in-out infinite alternate; }

/* Modal / end screens */
.modal { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(0,0,0,.78); backdrop-filter: blur(8px); }
.modal.hidden { display: none; }
.modal-card, .end-card { position: relative; width: min(92vw, 610px); padding: clamp(24px, 4vw, 46px); border-radius: 24px; border: 2px solid rgba(0,229,255,.78); background: linear-gradient(160deg, rgba(3,20,54,.95), rgba(2,3,25,.96)); box-shadow: 0 0 26px rgba(0,229,255,.32), inset 0 0 28px rgba(0,119,255,.12); text-align: center; }
.modal-card h2, .end-card h2 { margin: 0 0 16px; font-size: clamp(28px, 4vw, 48px); color: #fff; text-shadow: 0 0 14px var(--cyan); }
.modal-card p, .modal-card li { line-height: 1.65; color: #dceaff; text-align: left; }
.modal-card ol { margin: 12px auto 20px; padding-left: 28px; }
.modal-x { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; color: white; font-size: 34px; cursor: pointer; }
.neon-button { border: 2px solid var(--cyan); border-radius: 14px; padding: 11px 20px; background: rgba(0,229,255,.10); color: white; font-weight: 800; cursor: pointer; text-shadow: 0 0 8px var(--cyan); box-shadow: 0 0 14px rgba(0,229,255,.25); transition: .16s ease; }
.neon-button:hover { transform: translateY(-2px); background: rgba(0,229,255,.2); box-shadow: 0 0 24px rgba(0,229,255,.45); }
.end-screen { display: none; place-items: center; padding: 20px; }
.end-screen.active { display: grid; }
.end-card { z-index: 10; }
.end-card.danger { border-color: rgba(255,64,93,.8); box-shadow: 0 0 28px rgba(255,64,93,.32); }
.result-star { font-size: clamp(48px, 8vw, 90px); color: #ffe04b; text-shadow: 0 0 18px #ffad00; }
.rank { margin: 6px 0 16px; color: #ffe66c; font-weight: 900; font-size: clamp(18px, 2.4vw, 32px); }
.big-score { display: block; margin: 7px 0 22px; font-size: clamp(54px, 8vw, 100px); color: #fff; text-shadow: 0 0 18px var(--cyan); }
.end-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

@keyframes ship-bob { 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(-12px) } }
@keyframes engine-flicker { from{ opacity:.72; transform:translateX(-50%) scaleY(.82) } to{ opacity:1; transform:translateX(-50%) scaleY(1.14) } }
@keyframes floaty { from{ transform:translateY(0) rotate(-1deg) } to{ transform:translateY(-14px) rotate(3deg) } }
@keyframes bubble-float { from{ transform:translateY(0) scale(1) } to{ transform:translateY(-10px) scale(1.025) } }
@keyframes crosshair-pulse { 0%,100%{ opacity:.78; transform:translate(-50%,-50%) scale(.94) } 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.07) } }
@keyframes button-idle { 0%,100%{ filter:drop-shadow(0 0 8px rgba(0,229,255,.35)) } 50%{ filter:brightness(1.08) drop-shadow(0 0 20px rgba(0,229,255,.72)) } }
@keyframes target-burst { 0%{ transform:scale(1); opacity:1 } 55%{ transform:scale(1.45); opacity:.72; filter:brightness(1.6) drop-shadow(0 0 28px #fff) } 100%{ transform:scale(.2); opacity:0 } }
@keyframes target-shake { 0%,100%{ transform:translateX(0) } 25%{ transform:translateX(-12px) } 75%{ transform:translateX(12px) } }
@keyframes laser-fade { from{ opacity:1 } to{ opacity:0 } }
@keyframes feedback-pop { 0%{ opacity:0; transform:translate(-50%,-50%) scale(.5) } 25%{ opacity:1; transform:translate(-50%,-50%) scale(1.12) } 100%{ opacity:0; transform:translate(-50%,-75%) scale(.95) } }
@keyframes flash-out { from{ opacity:1 } to{ opacity:0 } }
@keyframes timer-pulse { from{ transform:scale(1); opacity:.72 } to{ transform:scale(1.07); opacity:1 } }

@media (max-width: 800px) {
  .game-logo { top: 10%; width: min(80vw, 610px); }
  .start-crosshair { top: 49%; }
  .start-ship-wrap { width: min(54vw, 400px); bottom: 15%; }
  .saturn { width: 23vw; left: 1%; }
  .meteor { width: 20vw; right: 1%; }
  .ufo-left, .ufo-right { width: 16vw; }
  .n32 { left: 4%; top: 39%; width: 14vw; }
  .n15 { left: 16%; top: 57%; width: 12vw; }
  .n64 { right: 5%; top: 40%; width: 14vw; }
  .n27 { right: 16%; top: 57%; width: 12vw; }
  .stars-yellow, .stars-sparkle, .asteroids { opacity: .75; }
  .start-btn { width: min(34vw, 280px); }
  .howto-btn { width: min(29vw, 230px); }
  .sound-start { width: 50px; }

  .level-title { top: 4%; width: 86vw; }
  .level-screen { overflow-y: auto; }
  .level-grid { top: 55%; width: min(91vw, 760px); gap: 8px; }
  .level-card img { max-height: 54vh; }

  .problem-panel { top: 64px; width: min(62vw, 390px); height: 54px; font-size: clamp(24px, 5vw, 35px); }
  .target-area { top: 135px; bottom: 8%; }
  .answer-target { width: clamp(76px, 18vw, 108px); }
  .player-ship-wrap { width: clamp(64px, 15vw, 92px); }
  .game-crosshair { width: clamp(44px, 11vw, 64px); }
  .hud-controls { gap: 4px; }
  .hud-icon-btn { width: 40px; height: 40px; padding: 5px; }
  .lives-panel { width: 100px; height: 40px; }
  .life-heart { width: 21px; }
  .small-panel { width: 69px; height: 39px; font-size: 13px; }
}

@media (max-width: 620px), (orientation: portrait) and (max-width: 900px) {
  .level-screen { overflow-y: auto; }
  .level-title { position: relative; top: auto; left: auto; transform: none; margin: 3vh auto 8px; width: min(88vw, 540px); }
  .level-grid { position: relative; left: auto; top: auto; transform: none; width: min(78vw, 430px); margin: 0 auto 80px; display: flex; flex-direction: column; gap: 12px; }
  .level-card img { width: min(62vw, 300px); max-height: none; }
  .text-back-btn { position: fixed; }
}

@media (max-height: 620px) and (orientation: landscape) {
  .game-logo { top: 3.5%; width: min(43vw, 620px); max-height: 37vh; }
  .start-crosshair { top: 49%; width: 48px; }
  .start-ship-wrap { bottom: 8%; width: min(29vw, 350px); }
  .start-btn { width: min(22vw, 300px); }
  .howto-btn { width: min(18vw, 240px); }
  .level-title { top: 2%; width: min(60vw, 700px); }
  .level-grid { top: 55%; width: min(72vw, 900px); }
  .level-card img { max-height: 65vh; }
  .problem-panel { top: 58px; }
  .target-area { top: 118px; bottom: 3%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}