:root {
  font-family: "Courier New", Consolas, monospace;
  color: #f9fbff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { touch-action: none; user-select: none; -webkit-user-select: none; }
#game {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; height: 100vh; height: 100dvh;
  background:
    linear-gradient(#26e8ff0b 1px, transparent 1px),
    linear-gradient(90deg, #26e8ff0b 1px, transparent 1px),
    radial-gradient(ellipse at 50% 85%, #13366a 0%, #0b2047 43%, #07152f 100%);
  background-size: 32px 32px, 32px 32px, auto;
}
.stars { position: absolute; inset: 0; pointer-events: none; opacity: .75;
  background-image:
    linear-gradient(#39dff9,#39dff9), linear-gradient(#ffe66a,#ffe66a),
    linear-gradient(#ee6eac,#ee6eac), linear-gradient(#39dff9,#39dff9),
    linear-gradient(#ffe66a,#ffe66a), linear-gradient(#39dff9,#39dff9);
  background-size: 3px 3px, 4px 4px, 3px 3px, 3px 3px, 2px 2px, 3px 3px;
  background-position: 12% 22%, 83% 18%, 73% 43%, 18% 62%, 88% 72%, 43% 76%;
  background-repeat: no-repeat;
}
.topbar { position: absolute; z-index: 5; top: 0; left: 0; right: 0;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 0;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  pointer-events: none;
}
.brand { color: #ffe65d; font-size: clamp(24px, 7.6vw, 42px); font-weight: 1000;
  white-space: nowrap; letter-spacing: -.08em; line-height: 1.15;
  text-shadow: 0 0 7px #ffe45b9c, 0 0 24px #ffe45b5e, 3px 3px 0 #a9693e;
}
.scores { position: relative; width: min(100%, 430px); min-height: 79px;
  display: flex; align-items: flex-start; justify-content: center; }
.score-card { display: flex; flex-direction: column; align-items: center; color: #fff; line-height: 1; }
.score-label { color: #42eafa; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
#score { color: #fff; font-size: clamp(44px, 13vw, 72px); font-weight: 1000;
  line-height: .95; text-shadow: 0 0 13px #3feaff80; }
.score-card.best { position: absolute; right: 0; top: 8px; min-width: 72px;
  padding: 5px 7px; border: 1px solid #3de6f669; background: #061b3cab; }
.best .score-label { color: #ffe65d; font-size: 9px; white-space: nowrap; letter-spacing: 0; }
#best { margin-top: 4px; color: #ffe65d; font-size: 21px; font-weight: 900; }
#playfield { position: absolute; inset: 0; overflow: hidden; touch-action: none; }
#head { position: absolute; left: 0; top: 0; width: clamp(105px, 33vw, 190px);
  height: clamp(105px, 33vw, 190px); transform-origin: center; will-change: transform;
  pointer-events: none; filter: drop-shadow(0 9px 10px #0009); }
#head img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }
#hint { position: absolute; z-index: 2; left: 50%; top: calc(env(safe-area-inset-top) + 147px);
  transform: translateX(-50%); width: max-content; max-width: calc(100% - 20px);
  color: #42eafa; font-size: clamp(10px, 3vw, 13px); font-weight: 900;
  letter-spacing: .08em; text-align: center; text-shadow: 0 0 10px #26e8ff91;
  transition: opacity .2s; pointer-events: none; }
#hint.hide { opacity: 0; }
#effects { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.pixel { position: absolute; width: 7px; height: 7px; background: var(--color);
  box-shadow: 0 0 9px var(--color); animation: pixel-pop .45s steps(4, end) forwards; }
@keyframes pixel-pop { from { opacity: 1; transform: translate(0,0) scale(1); }
  to { opacity: 0; transform: translate(var(--dx),var(--dy)) scale(.5); } }
.plus-one { position: absolute; color: #ffe65d; font-size: 25px; font-weight: 1000;
  text-shadow: 0 0 10px #ffe65d, 2px 2px #b76c35;
  animation: plus-float .62s ease-out forwards; white-space: nowrap; }
@keyframes plus-float { from { opacity: 1; transform: translate(-50%,0); }
  to { opacity: 0; transform: translate(-50%,-55px); } }
.floor { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  height: calc(env(safe-area-inset-bottom) + 58px); overflow: hidden; pointer-events: none; }
.floor-line { position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: #42eafa; box-shadow: 0 0 8px #42eafa, 0 0 21px #42eafa; }
.floor-grid { position: absolute; inset: 4px -25% 0;
  background: repeating-linear-gradient(90deg, transparent 0 35px, #24cfe158 36px 37px),
    repeating-linear-gradient(0deg, transparent 0 13px, #24cfe158 14px 15px);
  transform: perspective(85px) rotateX(38deg) scale(1.4);
  transform-origin: center top; opacity: .7; }
#gameover { position: absolute; z-index: 10; inset: 0; display: grid; place-items: center;
  padding: 20px; background: #05112bd0; backdrop-filter: blur(3px); }
#gameover[hidden] { display: none; }
.gameover-card { width: min(100%, 350px); padding: 30px 18px;
  border: 2px solid #42eafa; background: #081b3bf2; text-align: center;
  box-shadow: 0 0 0 5px #081b3b, 0 0 26px #42eafa5c; }
.gameover-card h1 { margin: 0 0 24px; color: #ffe65d; font-size: clamp(30px, 9vw, 44px);
  line-height: 1.1; letter-spacing: -.08em; text-shadow: 0 0 15px #ffe65d80; }
.gameover-card p { margin: 0; color: #42eafa; font-size: 12px; font-weight: 900; letter-spacing: .18em; }
#final-score { color: #fff; font-size: 76px; font-weight: 1000; line-height: 1.2; }
#retry { margin-top: 12px; padding: 14px 8px; color: #07152f; background: #ffe65d;
  font-size: 16px; font-weight: 1000; box-shadow: 0 5px 0 #bd9d2c, 0 0 18px #ffe65d62; }
#retry.waiting { opacity: .55; }
@media (min-width: 700px) { .topbar { padding-top: 22px; } #hint { top: 165px; }
  #head { width: 175px; height: 175px; } .floor { height: 70px; } }
@media (max-width: 370px) { .score-card.best { right: 1px; min-width: 59px; }
  .best .score-label { font-size: 8px; } #best { font-size: 18px; } }