@font-face { font-family: 'Sunlight Dreams'; src: url('assets/sunlight-dreams.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
:root {
  --bg: #00001a; --text: #ffffff; --muted: #a9a6d6; --pink: #ff00ff; --cyan: #00ffff; --green: #8cff3a;
  --pink-glow: rgba(255, 0, 255, .45); --cyan-glow: rgba(0, 255, 255, .45); --line: rgba(0, 255, 255, .2);
  --panel: rgba(8, 6, 40, .55);
  --font-main: 'Sunlight Dreams', 'Trebuchet MS', sans-serif; --font-ui: 'Orbitron', 'Segoe UI', sans-serif;
  --neon-pink: 0 0 4px #fff, 0 0 10px var(--pink), 0 0 22px var(--pink);
  --neon-cyan: 0 0 4px #fff, 0 0 10px var(--cyan), 0 0 22px var(--cyan);
}
* { box-sizing: border-box; }
body {
  margin: 0; min-width: 320px; height: 100vh; height: 100dvh; overflow: hidden; color: var(--text); font-family: var(--font-main);
  background-color: var(--bg);
  background-image:
    radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(2px 2px at 60px 70px, #fff, transparent),
    radial-gradient(1px 1px at 50px 50px, #fff, transparent), radial-gradient(1px 1px at 130px 80px, #fff, transparent),
    radial-gradient(2px 2px at 90px 10px, #fff, transparent),
    radial-gradient(ellipse 80% 50% at 20% 85%, rgba(255, 140, 0, .32), rgba(255, 0, 255, .3), transparent 50%),
    radial-gradient(ellipse 100% 60% at 70% 30%, rgba(179, 226, 93, .28), rgba(0, 0, 255, .22), transparent 70%);
  background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, 200px 200px, cover, cover;
  background-repeat: repeat, repeat, repeat, repeat, repeat, no-repeat, no-repeat;
}
button { font: inherit; cursor: pointer; }
kbd { display: inline-block; min-width: 22px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--cyan); font: 700 11px var(--font-ui); text-align: center; }
.hidden { display: none !important; }

.planet { position: fixed; z-index: 0; pointer-events: none; border-radius: 50%; opacity: .55; filter: saturate(1.2); animation: drift 18s ease-in-out infinite; }
.planet-a { width: 190px; top: 12%; right: 3%; }
.planet-b { width: 130px; bottom: 9%; left: 2.5%; animation-delay: -9s; opacity: .45; }

.app-shell { position: relative; z-index: 1; width: min(1440px, calc(100% - 48px)); height: 100vh; height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; }
.topbar { height: 76px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 48px; filter: drop-shadow(0 0 8px var(--pink-glow)); }
.brand-product { font: 900 22px var(--font-ui); letter-spacing: .14em; color: var(--cyan); text-shadow: var(--neon-cyan); }
.icon-button, .pause-button { width: 38px; height: 38px; border: 1px solid var(--pink); border-radius: 50%; background: transparent; color: var(--pink); font-size: 16px; box-shadow: 0 0 10px var(--pink-glow); transition: .2s; }
.icon-button:hover, .pause-button:hover { color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan-glow); }

.game-layout { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(200px, 1fr) minmax(420px, 640px) minmax(200px, 1fr); gap: 36px; align-items: center; padding: 18px 0; }
.side-panel { align-self: center; max-height: 100%; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding: 22px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; backdrop-filter: blur(6px); }
.panel-kicker { font: 700 10px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--cyan); text-shadow: 0 0 6px var(--cyan-glow); margin-bottom: 14px; }
.left-panel h2 { font: 400 clamp(24px, 2.1vw, 32px)/1.05 var(--font-main); margin: 0 0 12px; }
.left-panel h2 em { font-style: normal; color: var(--pink); text-shadow: 0 0 12px var(--pink-glow); }
.panel-copy { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 24px; }
.how-to { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; font-size: 14px; }
.how-to li { display: flex; align-items: center; gap: 10px; }
.how-icon { min-width: 54px; display: flex; gap: 3px; justify-content: center; font-size: 17px; }

.platform-guide { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: 8px 12px; }
.platform-guide li { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: help; }
.platform-guide img { width: 40px; height: 26px; flex-shrink: 0; object-fit: contain; }
.monsters-kicker { margin-top: 20px; }
.monster-guide img { height: 30px; }
.monster-tip { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

.leaderboard { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; counter-reset: rank; }
.leaderboard li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; font-size: 15px; counter-increment: rank; }
.leaderboard li::before { content: counter(rank); font: 700 12px var(--font-ui); color: var(--muted); text-align: center; }
.leaderboard li:nth-child(1)::before { color: #ffd84d; text-shadow: 0 0 8px rgba(255, 216, 77, .7); }
.leaderboard li:nth-child(2)::before { color: #e2e8ff; }
.leaderboard li:nth-child(3)::before { color: #ff9a4d; }
.leaderboard li:nth-child(odd) { background: rgba(255, 255, 255, .04); }
.leaderboard .leaderboard-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard .leaderboard-score { font: 700 13px var(--font-ui); color: var(--cyan); }
.leaderboard li.is-me { background: rgba(255, 0, 255, .16); box-shadow: inset 0 0 0 1px var(--pink); }
.leaderboard li.leaderboard-empty { display: block; color: var(--muted); font-size: 13px; background: none; }
.leaderboard li.leaderboard-empty::before { content: none; }
.leaderboard-note { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.leaderboard-note:empty { display: none; }

.game-card { width: 100%; min-width: 0; }
.game-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font: 700 10px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.live-label { display: flex; gap: 8px; align-items: center; }
.live-label span { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); animation: blink 1.4s infinite; }
.best-score b { color: var(--cyan); text-shadow: 0 0 8px var(--cyan-glow); margin-left: 6px; }
.canvas-wrap { position: relative; overflow: hidden; container-type: size; background: #07052a; border: 2px solid var(--pink); border-radius: 16px; box-shadow: 0 0 18px var(--pink-glow), 0 0 50px rgba(0, 255, 255, .15), inset 0 0 20px rgba(255, 0, 255, .2); }
.canvas-wrap canvas { display: block; width: 100%; height: 100%; }
/* Taps on the play area steer the player: no double-tap zoom, scrolling, text selection or long-press callout. */
.canvas-wrap { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.canvas-wrap input { -webkit-user-select: text; user-select: text; }
.canvas-wrap { transition: border-color 1.2s ease, box-shadow 1.2s ease; }
.canvas-wrap.season-pyramids { border-color: #f0b54a; box-shadow: 0 0 18px rgba(255, 190, 90, .55), 0 0 50px rgba(255, 160, 80, .2), inset 0 0 20px rgba(255, 190, 90, .25); }
.canvas-wrap.season-ice { border-color: #9fe3ff; box-shadow: 0 0 18px rgba(150, 220, 255, .6), 0 0 50px rgba(120, 200, 255, .2), inset 0 0 20px rgba(170, 235, 255, .25); }

.hud { position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: start; justify-content: space-between; padding: 14px 16px 24px; background: linear-gradient(rgba(0, 0, 26, .85), transparent); }
.hud-stat { display: flex; flex-direction: column; gap: 3px; font: 700 8px var(--font-ui); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.hud-stat strong { color: #fff; font: 700 18px var(--font-ui); text-shadow: 0 0 8px var(--cyan-glow); }
.altitude-stat { min-width: 100px; }
.altitude-stat strong { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.altitude-stat i { display: block; width: 32px; height: 3px; background: var(--green); box-shadow: 0 0 6px var(--green); transform-origin: left; transform: scaleX(.1); }
.hud .pause-button { width: 30px; height: 30px; font-size: 12px; }

.start-screen, .game-over, .pause-screen { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; background: radial-gradient(circle at center, rgba(40, 0, 70, .45), rgba(0, 0, 26, .92)); }
.start-alien { width: min(118px, 20cqh); height: min(118px, 20cqh); border-radius: 50%; margin-bottom: 6px; filter: drop-shadow(0 0 14px var(--pink-glow)); animation: float 3s ease-in-out infinite; }
.start-logo { width: min(190px, 52%, 36cqh); filter: drop-shadow(0 0 10px var(--pink-glow)); }
.start-title { font: 900 clamp(26px, 8cqh, 50px) var(--font-ui); letter-spacing: .22em; margin: 0 0 1.5cqh .22em; color: var(--cyan); text-shadow: var(--neon-cyan); }
.start-screen p { margin: 0 0 min(22px, 3.5cqh); font-size: clamp(14px, 3cqh, 18px); }
.primary-button { padding: 13px 26px; border: 2px solid var(--pink); border-radius: 999px; background: rgba(255, 0, 255, .12); color: #fff; font: 700 12px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 0 6px var(--pink); box-shadow: 0 0 14px var(--pink-glow), inset 0 0 12px var(--pink-glow); transition: .2s; }
.primary-button:hover { border-color: var(--cyan); background: rgba(0, 255, 255, .12); text-shadow: 0 0 6px var(--cyan); box-shadow: 0 0 18px var(--cyan-glow), inset 0 0 12px var(--cyan-glow); transform: translateY(-2px); }
.control-hint { margin-top: min(18px, 3cqh); color: var(--muted); font-size: 13px; }
.control-hint kbd { margin: 0 2px; }
.over-eyebrow { font: 700 11px var(--font-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--pink); text-shadow: 0 0 8px var(--pink-glow); }
.game-over h2 { font: 400 clamp(26px, 6.5cqh, 40px)/1 var(--font-main); margin: min(12px, 1.5cqh) 0 min(20px, 2.5cqh); }
.game-over h2 span { color: var(--cyan); text-shadow: var(--neon-cyan); }
.final-score-label { color: var(--muted); font: 700 9px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; }
.final-score { font: 900 clamp(30px, 7.5cqh, 46px) var(--font-ui); color: var(--green); text-shadow: 0 0 12px rgba(140, 255, 58, .6); margin: 4px 0 min(12px, 1.5cqh); }
.over-stats { display: flex; gap: 22px; margin-bottom: min(22px, 3cqh); color: var(--muted); font: 700 10px var(--font-ui); letter-spacing: .14em; text-transform: uppercase; }
.over-stats b { color: #fff; margin-left: 4px; }
.score-form { display: flex; gap: 8px; width: min(340px, 100%); }
.score-form input { flex: 1; min-width: 0; padding: 11px 16px; border: 1px solid var(--cyan); border-radius: 999px; background: rgba(0, 0, 26, .7); color: #fff; font: 16px var(--font-main); outline: none; box-shadow: 0 0 10px var(--cyan-glow); }
.score-form input::placeholder { color: var(--muted); }
.score-form input:focus { border-color: var(--pink); box-shadow: 0 0 14px var(--pink-glow); }
.score-form .primary-button { padding: 11px 16px; }
.score-form[hidden] { display: none; }
.primary-button:disabled { opacity: .5; cursor: wait; transform: none; }
.score-status { min-height: 1.3em; margin: 10px 0; color: var(--muted); font-size: 14px; }
.score-status.is-success { color: var(--green); }
.score-status.is-error { color: #ff6b8b; }
.link-button { margin: -4px 0 12px; padding: 2px 4px; border: 0; background: none; color: var(--muted); font: 13px var(--font-main); text-decoration: underline; text-underline-offset: 3px; }
.link-button:hover { color: var(--cyan); }
.link-button[hidden] { display: none; }
.secondary-button { border-color: var(--cyan); background: transparent; text-shadow: 0 0 6px var(--cyan); box-shadow: 0 0 12px var(--cyan-glow); }
.final-score-label.is-record { color: var(--pink); text-shadow: 0 0 8px var(--pink-glow); }
.over-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.ghost-button { border-color: var(--line); background: transparent; box-shadow: none; text-shadow: none; color: var(--muted); }
.leaderboard-mini { display: none; width: min(300px, 100%); margin-bottom: 14px; text-align: left; }
.pause-screen { background: rgba(0, 0, 26, .8); cursor: pointer; }
.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 26, .78); backdrop-filter: blur(4px); }
.modal[hidden] { display: none; }
.modal-card { width: min(460px, 100%); max-height: min(720px, calc(100vh - 32px)); max-height: min(720px, calc(100dvh - 32px)); display: flex; flex-direction: column; padding: 22px; background: #07052a; border: 2px solid var(--pink); border-radius: 18px; box-shadow: 0 0 18px var(--pink-glow), 0 0 50px rgba(0, 255, 255, .15); }
.modal-header { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.modal-header .panel-kicker { margin-bottom: 6px; }
.modal-header h2 { margin: 0; font: 400 26px var(--font-main); }
.leaderboard-full { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.leaderboard-full li { grid-template-columns: 34px 1fr auto; }
.device-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.device-tabs button { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 700 10px var(--font-ui); letter-spacing: .1em; text-transform: uppercase; transition: .2s; }
.device-tabs button:hover { color: #fff; border-color: var(--cyan); }
.device-tabs button.is-active { color: #fff; border-color: var(--pink); background: rgba(255, 0, 255, .14); box-shadow: 0 0 10px var(--pink-glow); }
.pause-mark { font: 900 48px var(--font-ui); line-height: .8; color: var(--cyan); text-shadow: var(--neon-cyan); }
.pause-screen span { font: 700 14px var(--font-ui); letter-spacing: .2em; text-transform: uppercase; margin-top: 18px; }
.pause-screen small { color: var(--muted); margin-top: 8px; font-size: 13px; }

.site-footer { flex-shrink: 0; display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding: 12px 0 16px; color: var(--muted); font: 700 9px var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.site-footer a { color: var(--pink); text-decoration: none; text-shadow: 0 0 6px var(--pink-glow); }
.site-footer a:hover { color: var(--cyan); }

@keyframes blink { 50% { opacity: .35; } }
@keyframes float { 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes drift { 50% { transform: translateY(-14px) rotate(6deg); } }

/* Keep the game inside the viewport instead of making the document scroll. */
.canvas-wrap { width: min(100%, calc((100vh - 180px) / 1.22)); height: calc(100vh - 180px); margin: 0 auto; }
/* Mobile browsers size vh without their toolbars; dvh follows the visible area (the vh lines stay as fallback). */
.canvas-wrap { width: min(100%, calc((100dvh - 180px) / 1.22)); height: calc(100dvh - 180px); }
@media (max-height: 780px) {
  .topbar { height: 60px; }
  .brand img { height: 38px; }
  .game-layout { padding: 12px 0; }
  .side-panel { padding: 16px 18px; }
  .panel-kicker { margin-bottom: 10px; }
  .left-panel h2 { font-size: 24px; }
  .panel-copy { font-size: 13px; margin-bottom: 16px; }
  .how-to { gap: 6px; font-size: 13px; }
  .platform-guide { gap: 5px 10px; }
  .leaderboard li { padding: 4px 10px; font-size: 14px; }
  .site-footer { padding: 8px 0 10px; }
  .canvas-wrap { width: min(100%, calc((100vh - 150px) / 1.22)); height: calc(100vh - 150px); }
  .canvas-wrap { width: min(100%, calc((100dvh - 150px) / 1.22)); height: calc(100dvh - 150px); }
}
@media (max-width: 1150px) {
  .game-layout { grid-template-columns: minmax(420px, 600px) minmax(220px, 1fr); }
  .left-panel { display: none; }
}
@media (max-width: 760px) {
  .right-panel { display: none; }
  .leaderboard-mini { display: grid; }
  .leaderboard-mini li:nth-child(n + 6) { display: none; }
  .app-shell { width: calc(100% - 24px); }
  .planet { display: none; }
  .topbar { height: 60px; }
  .brand img { height: 38px; }
  .brand-product { font-size: 17px; }
  .game-layout { display: block; padding: 10px 0; }
  .left-panel { display: none; }
  .game-card { height: 100%; display: flex; flex-direction: column; }
  .canvas-wrap { width: 100%; height: auto; flex: 1; min-height: 0; aspect-ratio: auto; }
  .hud { padding: 12px; }
  .hud-stat strong { font-size: 15px; }
  .altitude-stat { min-width: 88px; }
  .site-footer { padding: 8px 0 10px; }
}