/* ===========================================================================
   ISLAND RUSH: RELIC RUN — game shell styles
   Full-screen, mobile-first, no-scroll, notch-safe.
   =========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --jungle-dark:  #10290f;
  --jungle-green: #37a15f;
  --jungle-gold:  #f5b642;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a1a0a;
  /* Kill mobile annoyances: no scroll-bounce, no text select, no tap zoom */
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* The element Phaser draws into */
/* Phaser's scale manager runs autoCenter: CENTER_BOTH, which centres the canvas
   by writing inline margins. Centring here as well applied the offset twice —
   on a tall phone that pushed the game down into the bottom third of the screen
   with a dead band above it. Let the scale manager own the canvas position. */
#game-root {
  position: fixed;
  inset: 0;
  display: block;
  overflow: hidden;
}

#game-root canvas {
  display: block;
  /* Crisp-but-smooth: let Phaser handle DPR; just avoid blur on upscale */
  image-rendering: auto;
}

/* ── Boot / loading screen ────────────────────────────────────────────── */

#boot-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 10%, #2a6b3a 0%, #163e1c 45%, #0a1f0c 100%);
  color: #fff;
  text-align: center;
  transition: opacity 0.6s ease;
  /* notch-safe padding */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

#boot-screen.hidden { opacity: 0; pointer-events: none; }

.boot-inner { transform: translateY(-4%); }

.boot-emoji {
  font-size: clamp(54px, 14vw, 96px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
  animation: bob 2.4s ease-in-out infinite;
}

.boot-title {
  margin-top: 8px;
  font-size: clamp(30px, 9vw, 62px);
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--jungle-gold);
  text-shadow: 0 3px 0 #7a4a10, 0 6px 18px rgba(0,0,0,0.5);
}

.boot-sub {
  font-size: clamp(14px, 4vw, 22px);
  font-weight: 700;
  letter-spacing: 6px;
  color: #d8f3df;
  margin-top: 2px;
}

.boot-bar {
  width: min(260px, 70vw);
  height: 10px;
  margin: 22px auto 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
}

#boot-bar-fill {
  display: block;
  width: 12%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jungle-green), var(--jungle-gold));
  transition: width 0.3s ease;
}

.boot-tip {
  font-size: clamp(11px, 3vw, 14px);
  color: #a9d8b6;
  letter-spacing: 0.5px;
}

@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ── Rotate-to-landscape nudge ────────────────────────────────────────────
   Only shown on real touch devices held in portrait. Desktop is never affected
   (no .touch-device class) and landscape phones hide it via the media query. */
#rotate-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 12%, #2a6b3a 0%, #163e1c 48%, #0a1f0c 100%);
  color: #fff;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.touch-device #rotate-screen { /* enable only when flagged a touch device */ }

@media (orientation: portrait) {
  body.touch-device #rotate-screen { display: flex; }
}

.rotate-phone {
  font-size: clamp(56px, 18vw, 104px);
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.45));
  animation: rotateHint 2.2s ease-in-out infinite;
}

.rotate-title {
  margin-top: 14px;
  font-size: clamp(22px, 7vw, 38px);
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--jungle-gold);
  text-shadow: 0 3px 0 #7a4a10, 0 6px 18px rgba(0,0,0,0.5);
}

.rotate-sub {
  margin-top: 8px;
  font-size: clamp(13px, 4vw, 18px);
  font-weight: 600;
  color: #d8f3df;
}

@keyframes rotateHint {
  0%, 45%   { transform: rotate(0deg); }
  70%, 100% { transform: rotate(-90deg); }
}