* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; user-select: none; }

html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #0b0b12; overflow: hidden;
  font-family: 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  color: #f1e9d8;
  touch-action: none;
}

#game-wrap {
  position: relative;
  width: 100vw;
  /* 100vh on mobile Safari/Chrome sizes against the viewport as if the
     address bar were fully hidden, not the actually-visible area — so
     anything anchored to the bottom (touch controls, cutscene captions,
     both `inset:0` children of this element) ends up sitting below the
     real fold and gets clipped by the address bar. 100dvh tracks the
     real visible viewport as the browser chrome shows/hides; keep 100vh
     first as a fallback for older browsers that don't support dvh, and
     --vvh (set from window.visualViewport in main.js) last since dvh
     support/accuracy is still inconsistent in some in-app/embedded mobile
     browsers -- visualViewport is the most reliable source of the actual
     visible height where it's available. */
  height: 100vh;
  height: 100dvh;
  height: var(--vvh, 100dvh);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #05050a 100%);
}

#game-canvas {
  background: #000;
  image-rendering: pixelated;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  max-height: var(--vvh, 100dvh);
  width: auto;
  height: auto;
  aspect-ratio: 16 / 9;
  box-shadow: 0 0 60px rgba(120, 80, 255, 0.25);
  display: block;
}

.hidden { display: none !important; }

/* ---------- Screens / Menus ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(8,8,16,0.92), rgba(15,10,25,0.96));
  z-index: 30;
  gap: 10px;
  overflow-y: auto; /* if content (e.g. the level-select grid) is taller than the
                        viewport, scroll instead of letting centering push the
                        top of the content off-screen and clip it */
}

/* Illustrated screen backdrops: a soft gradient sits on top of the artwork
   so button/text legibility holds up regardless of how busy the scene is,
   staying lighter near the top (where the art reads best) and darker toward
   the bottom (where the buttons live). */
#screen-gameover {
  background-image:
    linear-gradient(180deg, rgba(6,4,10,0.35) 0%, rgba(6,4,10,0.55) 55%, rgba(4,3,8,0.88) 100%),
    url('../assets/ui/gameover.jpg');
  background-size: cover;
  background-position: center;
}

#screen-start {
  background-image:
    linear-gradient(180deg, rgba(6,4,10,0.4) 0%, rgba(6,4,10,0.35) 45%, rgba(4,3,8,0.85) 100%),
    url('../assets/ui/start.jpg');
  background-size: cover;
  background-position: center;
  /* This screen's content (title + tagline + up to 10 level chips + buttons)
     can be taller than short viewports. Anchor it to the top and pad instead
     of centering, so overflow scrolls downward rather than pushing the title
     up above the visible area. */
  justify-content: flex-start;
  padding-top: 36px;
}

/* ---------- Cutscene player ---------- */
.cutscene-screen {
  padding: 0;
  background: #000;
  overflow: hidden;
  justify-content: flex-end;
}
.cutscene-layer {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.1s ease;
  transform: scale(1);
}
.cutscene-layer.kb-anim { animation: cutsceneKenBurns linear forwards; }
@keyframes cutsceneKenBurns {
  from { transform: scale(1.0) translate(0, 0); }
  to   { transform: scale(1.09) translate(-1%, -1%); }
}
.cutscene-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(4,3,8,0.15) 0%, rgba(4,3,8,0.05) 55%, rgba(4,3,8,0.9) 100%);
  pointer-events: none;
}
.cutscene-caption {
  position: relative;
  z-index: 2;
  max-width: 640px;
  /* viewport-fit=cover lets the page draw under the home-indicator/notch
     safe areas, so bottom-anchored text needs its own inset padding or it
     can still get clipped there even with the 100dvh fix above. */
  margin: 0 0 calc(54px + env(safe-area-inset-bottom));
  font-size: clamp(15px, 2.4vw, 20px);
  color: #f1e9d8;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9);
  opacity: 0;
  transition: opacity .5s ease, transform .5s ease;
  transform: translateY(6px);
}
.cutscene-caption.show { opacity: 1; transform: translateY(0); }
.cutscene-skip {
  position: absolute; z-index: 2; top: 18px; right: 18px;
  border-color: #7d84a0;
}

.screen h1 {
  font-size: clamp(28px, 6vw, 54px);
  margin: 0 0 6px;
  letter-spacing: 2px;
  color: #e8c368;
  text-shadow: 0 0 18px rgba(232,195,104,0.5), 3px 3px 0 #3a2a10;
}

.screen h1 .accent {
  display: block;
  font-size: 0.4em;
  color: #cfd6e6;
  letter-spacing: 6px;
  text-shadow: none;
}

.screen h2 {
  font-size: clamp(22px, 5vw, 34px);
  color: #e8c368;
  margin: 0 0 4px;
  text-shadow: 2px 2px 0 #3a2a10;
}

.tagline { color: #b7bdd6; max-width: 480px; font-size: 15px; margin: 4px 0 14px; }
.fine-print { color: #7d84a0; font-size: 12px; margin-top: 12px; }

.big-btn, .small-btn {
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  border-radius: 10px;
  border: 2px solid #e8c368;
  background: linear-gradient(180deg, #3a2a55, #241a3a);
  color: #f1e9d8;
  transition: transform .08s ease, background .15s ease;
}
.big-btn:active, .small-btn:active { transform: scale(0.96); }
.big-btn:hover, .small-btn:hover { background: linear-gradient(180deg, #4a3670, #302048); }

.big-btn { padding: 14px 34px; font-size: 18px; margin: 8px 4px; box-shadow: 0 0 16px rgba(232,195,104,0.25); }
.small-btn { padding: 9px 20px; font-size: 13px; margin: 4px; border-color: #7d84a0; }

#level-select { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 520px; margin: 10px 0; }
.level-chip {
  padding: 8px 14px; border-radius: 8px; border: 2px solid #5c5480; background: #1c1830;
  font-size: 13px; cursor: pointer; color: #cfd6e6;
}
.level-chip.locked { opacity: 0.4; cursor: not-allowed; }
.level-chip.active { border-color: #e8c368; color: #e8c368; }

.howto-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 12px 0; max-width: 420px; }
.howto-grid div { background: rgba(255,255,255,0.05); border-radius: 8px; padding: 10px; font-size: 13px; }

#levelintro-num { font-size: 13px; letter-spacing: 3px; color: #7d84a0; text-transform: uppercase; }
#levelintro-desc { max-width: 460px; color: #b7bdd6; font-size: 14px; }

/* ---------- HUD ---------- */
#hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; pointer-events: none;
  font-size: 14px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}
#hud-hearts { display: flex; gap: 4px; font-size: 20px; }
#hud-score { font-weight: bold; color: #e8c368; }
#hud-level-name { position: absolute; left: 50%; transform: translateX(-50%); top: 10px; font-size: 12px; letter-spacing: 2px; color: #cfd6e6; text-transform: uppercase; }
.hud-toast {
  position: absolute; left: 50%; top: 34px; transform: translateX(-50%) translateY(-6px);
  font-size: 15px; font-weight: bold; color: #ffe066; white-space: nowrap;
  text-shadow: 0 0 10px rgba(255,224,102,0.75), 2px 2px 0 #3a2a10;
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
.hud-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#pause-btn {
  pointer-events: all; width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid #e8c368; background: rgba(20,15,35,0.7); color: #f1e9d8;
  font-size: 12px; cursor: pointer;
}

/* ---------- Touch controls ---------- */
#touch-controls {
  position: absolute; inset: 0; z-index: 25; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 18px;
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
#touch-left-group, #touch-right-group { display: flex; gap: 12px; pointer-events: all; }
/* Attack stacked above jump (rather than side by side) frees up horizontal
   space on the right edge and keeps both actions under the thumb without
   it having to travel sideways -- easier reach, especially in landscape
   where horizontal room is already spent on the level view. */
#touch-right-group { flex-direction: column; align-items: center; }
.touch-btn {
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(60, 50, 90, 0.55); border: 2px solid rgba(232,195,104,0.7);
  color: #f1e9d8; font-size: 24px; display: flex; align-items: center; justify-content: center;
  touch-action: none;
}
.touch-btn:active { background: rgba(232,195,104,0.4); }
#btn-jump { width: 74px; height: 74px; }

#orientation-notice {
  position: absolute; inset: 0; z-index: 50; background: #05050a;
  display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px;
}

@media (min-width: 700px) {
  #touch-controls { display: none !important; }
}

@media (orientation: portrait) and (max-width: 900px) {
  #orientation-notice.mobile-active { display: flex; }
}