@font-face {
  font-family: "PressStart2P";
  src: url("/assets/press-start-2p-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --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; -webkit-tap-highlight-color: transparent; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:#061b38; }
body {
  position: fixed;
  inset: 0;
  display:grid;
  place-items:center;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: "PressStart2P", monospace;
}
body::before {
  content:"";
  position:absolute;
  inset:-28px;
  z-index:-1;
  background:#061b38 url('/assets/layers/far.png') center/cover no-repeat;
  filter:blur(18px) brightness(.42) saturate(.82);
  transform:scale(1.08);
}
button { font: inherit; }

/* Keep one canonical portrait viewport. Telegram Desktop is freely resizable,
   so wide windows get ocean side-fill instead of stretching the game world. */
.game-shell {
  position:relative;
  width:min(100vw, 56.25vh);
  height:min(100vh, 177.777778vw);
  aspect-ratio:9 / 16;
  overflow:hidden;
  background:#061b38;
  isolation:isolate;
}

#gameCanvas { position:absolute; inset:0; width:100%; height:100%; display:block; image-rendering:pixelated; image-rendering:crisp-edges; transform:translateZ(0); }

.hud { position:absolute; inset:0; z-index:80; pointer-events:none; opacity:0; transition:opacity .25s ease; }
.hud.visible { opacity:1; }
.score {
  position:absolute;
  top:calc(var(--safe-top) + 15.5vh);
  left:50%;
  transform:translateX(-50%);
  color:#fff;
  font-size:clamp(30px, 8.2vw, 54px);
  line-height:1;
  letter-spacing:-.08em;
  -webkit-text-stroke:clamp(2px,.65vw,4px) #06101d;
  paint-order:stroke fill;
  text-shadow:0 3px 0 rgba(0,0,0,.38);
}
.score.hidden { display:none !important; }

.sfx-button {
  z-index:2;
  pointer-events:auto;
  position:absolute;
  top:calc(var(--safe-top) + 14px);
  right:calc(var(--safe-right) + 14px);
  width:44px;
  height:44px;
  border:0;
  padding:0;
  opacity:.48;
  background-image:url('/assets/sfx.png');
  background-repeat:no-repeat;
  background-size:200% 100%;
  background-position:left center;
  background-color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28));
  cursor:pointer;
  transition:transform .12s ease, opacity .2s ease;
}
.sfx-button.sfx-off { background-position:right center; }
.sfx-button:active { transform:scale(.87); opacity:.85; }

.loading-screen { position:absolute; inset:0; z-index:50; overflow:hidden; background:#031833; opacity:1; visibility:visible; transition:opacity .5s linear, visibility 0s linear .5s; }
.loading-screen.fade-out { opacity:0; visibility:hidden; }
.hero-video { position:absolute; inset:-4%; width:108%; height:108%; object-fit:cover; object-position:center; filter:blur(10px) brightness(.74) saturate(.92); transform:scale(1.04); }
.loading-shade { position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,16,38,.22), rgba(1,14,33,.08) 45%, rgba(0,14,34,.30)); }
.loading-bubbles { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; image-rendering:pixelated; }
.hb-icon { position:absolute; z-index:3; top:calc(var(--safe-top) + 15px); left:calc(var(--safe-left) + 15px); width:clamp(30px,8.4vw,46px); height:auto; opacity:.92; filter:drop-shadow(0 2px 5px rgba(0,0,0,.25)); }
.loading-center { position:absolute; z-index:4; left:50%; top:48%; width:min(88vw,430px); transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; }
.game-title {
  margin:0 0 18px;
  color:#fff;
  font-size:clamp(19px,5.1vw,31px);
  line-height:1.35;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 0 7px rgba(255,255,255,.55), 0 0 16px rgba(255,255,255,.35);
  animation:titlePulse 2.15s ease-in-out infinite;
}
@keyframes titlePulse { 0%,100%{filter:brightness(.92);text-shadow:0 0 5px rgba(255,255,255,.35),0 0 12px rgba(255,255,255,.2)} 50%{filter:brightness(1.12);text-shadow:0 0 9px rgba(255,255,255,.8),0 0 24px rgba(255,255,255,.45)} }
.main-logo { width:min(55vw,245px); height:auto; display:block; filter:drop-shadow(0 12px 24px rgba(0,0,0,.25)); animation:logoFloat 3.4s ease-in-out infinite; }
@keyframes logoFloat { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-5px) scale(1.015)} }
.ring-wrap { position:relative; width:132px; height:132px; margin-top:10px; transition:transform .48s cubic-bezier(.55,.05,.95,.35), filter .48s ease, opacity .48s ease; }
.ring-wrap canvas { width:100%; height:100%; display:block; }
.load-percent { position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:14px; text-shadow:0 2px 6px rgba(0,0,0,.55); }
.ring-wrap.suck { transform:scale(.02); filter:blur(8px) brightness(1.8); opacity:0; }

.tap-prompt {
  position:absolute;
  z-index:70;
  left:50%;
  top:68%;
  transform:translate(-50%,-50%);
  border:0;
  background:transparent;
  color:#fff;
  font-size:clamp(14px,4.1vw,23px);
  line-height:1.4;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  cursor:pointer;
  text-shadow:0 0 7px rgba(255,255,255,.58),0 0 18px rgba(255,255,255,.38);
}
.tap-prompt.ready { opacity:1; visibility:visible; animation:tapAppear .38s cubic-bezier(.18,.82,.2,1.18) forwards, tapPulse 1.2s ease-in-out .4s infinite; }
@keyframes tapAppear { 0%{opacity:0;transform:translate(-50%,-50%) scale(.35);filter:blur(5px) brightness(1.5)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0) brightness(1)} }
.tap-prompt.starting { opacity:1; visibility:visible; animation:none; }
.tap-prompt.slingshot { animation:promptSlingshot .52s cubic-bezier(.18,.74,.16,1) forwards; }
@keyframes tapPulse { 0%,100%{transform:translate(-50%,-50%) scale(.97);filter:brightness(.9)} 50%{transform:translate(-50%,-50%) scale(1.035);filter:brightness(1.25)} }
@keyframes promptSlingshot { 0%{transform:translate(-50%,-50%) translateY(0) scale(1)} 20%{transform:translate(-50%,-50%) translateY(17px) scale(.98)} 34%{transform:translate(-50%,-50%) translateY(20px) scale(.965)} 100%{transform:translate(-50%,-50%) translateY(-110vh) scale(1.08)} }

.game-over-layer { position:absolute; inset:0; z-index:40; pointer-events:none; opacity:0; visibility:hidden; }
.game-over-layer.visible { opacity:1; visibility:visible; pointer-events:auto; }
.hb-gradient { position:absolute; inset:-12%; opacity:0; background:radial-gradient(circle at 50% 36%, rgba(0,225,255,.17), rgba(12,70,126,.38) 37%, rgba(2,16,38,.78) 77%), linear-gradient(155deg, rgba(0,205,255,.12), rgba(3,21,48,.62) 55%, rgba(24,8,59,.44)); transition:opacity .36s ease, filter .5s ease; }
.game-over-layer.visible .hb-gradient { opacity:1; }
.game-over-layer.retrying .hb-gradient { opacity:0; filter:blur(14px); transition:opacity .72s ease .22s, filter .55s ease; }
.game-over-content { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:calc(var(--safe-top) + 28px) 18px calc(var(--safe-bottom) + 26px); }
.game-over-title {
  position:relative;
  z-index:2;
  margin:0 0 18px;
  color:#fff;
  font-size:clamp(22px,6vw,37px);
  line-height:1.3;
  opacity:0;
  transform:scale(.15);
}
.outlined { -webkit-text-stroke:clamp(2px,.58vw,4px) #07101a; paint-order:stroke fill; text-shadow:0 3px 0 rgba(0,0,0,.32); }
.game-over-layer.visible .game-over-title { animation:titlePop .48s cubic-bezier(.15,.8,.18,1.28) .02s forwards; }
@keyframes titlePop { 0%{opacity:0;transform:scale(.15)} 65%{opacity:1;transform:scale(1.12)} 100%{opacity:1;transform:scale(1)} }
.stats-panel { position:relative; width:min(91vw,520px); opacity:0; transform:translateY(130px) scale(.18); }
.stats-panel > img { display:block; width:100%; height:auto; filter:drop-shadow(0 10px 18px rgba(0,0,0,.32)); }
.game-over-layer.visible .stats-panel { animation:panelSpit 1.5s cubic-bezier(.14,.72,.16,1) .08s forwards; }
@keyframes panelSpit {
  0%{opacity:0;transform:translateY(150px) scale(.16) rotate(-2deg);filter:blur(8px)}
  38%{opacity:1;transform:translateY(-20px) scale(1.08) rotate(1deg);filter:blur(0)}
  58%{transform:translateY(9px) scale(.985) rotate(-.4deg)}
  76%{transform:translateY(-4px) scale(1.018) rotate(.15deg)}
  100%{opacity:1;transform:translateY(0) scale(1) rotate(0);filter:blur(0)}
}
.stats-grid { position:absolute; inset:20% 10% 18%; display:grid; grid-template-columns:1fr 1fr; gap:8%; align-items:center; text-align:center; color:#fff; }
.stat-block { display:flex; flex-direction:column; align-items:center; gap:13px; }
.stat-label { font-size:clamp(12px,3.3vw,18px); }
.stat-value { font-size:clamp(25px,7.4vw,44px); letter-spacing:-.08em; }
.play-again {
  margin-top:18px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:clamp(14px,4vw,22px);
  line-height:1.5;
  opacity:0;
  visibility:hidden;
  cursor:pointer;
  text-shadow:0 0 8px rgba(255,255,255,.65),0 0 22px rgba(255,255,255,.42);
}
.play-again.show { visibility:visible; animation:playAgainDrop .44s cubic-bezier(.14,.85,.2,1.2) forwards, playAgainPulse 1.15s ease-in-out .5s infinite; }
.play-again.pressed { visibility:visible; animation:playAgainPress .5s ease forwards; }
@keyframes playAgainDrop { 0%{opacity:0;transform:translateY(-30px) scale(.82)} 100%{opacity:1;transform:translateY(0) scale(1)} }
@keyframes playAgainPulse { 0%,100%{filter:brightness(.92);transform:scale(.98)} 50%{filter:brightness(1.28);transform:scale(1.035)} }
@keyframes playAgainPress { 0%{opacity:1;transform:scale(1)} 22%{opacity:1;transform:scale(.82)} 100%{opacity:0;transform:scale(.55);filter:blur(7px)} }
.game-over-layer.menu-up .game-over-title,
.game-over-layer.menu-up .stats-panel { animation:menuSlingshot .62s cubic-bezier(.18,.74,.12,1) forwards !important; }
@keyframes menuSlingshot { 0%{opacity:1;transform:translateY(0) scale(1)} 24%{opacity:1;transform:translateY(24px) scale(.985)} 100%{opacity:0;transform:translateY(-115vh) scale(1.05)} }

.game-shell.gameover #gameCanvas { filter:blur(4px); transition:filter .28s ease; }
.game-shell.gameover.retry-blur #gameCanvas { filter:blur(8px); }
.game-shell.clean #gameCanvas { filter:none; transition:filter .6s ease; }

@media (max-height:560px) {
  .loading-center { top:50%; transform:translate(-50%,-50%) scale(.88); }
  .tap-prompt { top:72%; }
  .game-over-title { margin-bottom:8px; }
  .stats-panel { width:min(78vw,430px); }
  .play-again { margin-top:8px; }
}

/* The source hero video is ultrawide (2560x1080). In a portrait WebView,
   cover crops it into an extreme zoom. Because this layer is intentionally
   blurred, a fill fit gives the same Scanner-like colour motion without
   the ugly iPhone crop. */
@media (max-aspect-ratio: 3 / 4) {
  .hero-video {
    inset:-5%;
    width:110%;
    height:110%;
    object-fit:fill;
    filter:blur(12px) brightness(.72) saturate(.90);
    transform:scale(1.03);
  }
}