:root {
  --bg: #d8e3f8;
  --surface: #ffffff;
  --ink: #131d31;
  --muted: #5c6a82;
  --navy: #254f95;
  --shadow-navy: #203252;
  --brand: #dcc48f;
  --brand-dark: #9a7840;
  --brand-ink: #1d3560;
  /* Watermark tuning: this is the SAME light-blue tint .screen always had
     (0.94 = today's look, effectively opaque). Lower it to let more of the
     logo watermark behind it show through — e.g. 0.85 for a faint hint,
     0.6 for a much bolder one. The colour itself never changes, only how
     solid it sits over the logo. */
  --screen-tint-alpha: 0.7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--shadow-navy);
  font-family: "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  overflow: hidden;
  /* No blue tap-highlight veil, no text selection, no pull-to-refresh —
     phone taps should never produce browser chrome effects mid-game. */
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

#game-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* dvh tracks the real visible area on phones (browser address bar shrinks
     and grows); falls back to the 100vh above where unsupported */
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shadow-navy);
}

/* Always-visible build stamp so a re-upload/cache-clear is verifiable at a
   glance, in any screen state (menu/playing/gameover/finale) — see
   BUILD_VERSION in game.js. Deliberately unobtrusive: small, dim, corner,
   never intercepts clicks. */
#build-version {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  font-family: "Segoe UI", system-ui, sans-serif;
  pointer-events: none;
  z-index: 50;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

canvas {
  background: var(--bg);
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  max-height: 100dvh;
  aspect-ratio: 960 / 600;
  touch-action: none;
  cursor: pointer;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  /* Faint centered logo watermark, tinted by the same light-blue the screen
     always had: a solid-colour gradient layered over the logo image acts as
     an adjustable opacity control (plain multi-layer backgrounds can't set
     per-layer opacity directly) — see --screen-tint-alpha above for tuning.
     The opaque background-color underneath is load-bearing, not decorative:
     without it, lowering the tint alpha doesn't just reveal more logo — it
     lets the game canvas sitting behind .screen (which keeps its last-drawn
     frame even while covered) bleed through everywhere outside the logo's
     own bounds. background-color always paints below background-image, so
     it guarantees a fully opaque light-blue base regardless of tint alpha. */
  background-color: var(--bg);
  background-image: linear-gradient(
      rgba(216, 227, 248, var(--screen-tint-alpha)),
      rgba(216, 227, 248, var(--screen-tint-alpha))
    ), url("assets/logo.png?v=2");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  overflow-y: auto;
}

/* Flex spacers instead of justify-content: center so that when the content is
   taller than a short phone screen, the top stays reachable by scrolling. */
.screen::before,
.screen::after {
  content: "";
  flex: 1 0 0;
}

.hidden { display: none !important; }

.logo {
  max-width: min(60vw, 320px);
  height: auto;
}

/* Shown while art is still fetching (see loadImg's assetsLoaded tracking in
   game.js) so slow/cellular connections don't drop straight into gameplay
   with placeholder graphics and canvas trails from unfinished background
   layers — the Play button is only revealed once this hides. */
.loading-label {
  margin: 0;
  color: var(--navy);
  font-size: clamp(13px, 2.4vw, 16px);
}

#loading-bar-track {
  width: min(80vw, 320px);
  height: 14px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid var(--shadow-navy);
  border-radius: 8px;
  overflow: hidden;
}

#loading-bar-fill {
  height: 100%;
  width: 0%;
  background: var(--brand-dark);
  transition: width 0.15s ease-out;
}

h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(20px, 4vw, 32px);
}

h2 {
  margin: 0;
  color: var(--navy);
}

.portrait-row {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(90vw, 480px);
}

.portrait {
  width: 76px;
  height: 76px;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 50%;
  border: 3px solid var(--navy);
  background: var(--surface);
  flex-shrink: 0;
}

.portrait.small {
  width: 64px;
  height: 64px;
}

#finale-eoc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#finale-eoc-portrait,
#finale-eoc-line {
  transition: opacity 0.25s ease;
}

#finale-eoc.eoc-swapping #finale-eoc-portrait,
#finale-eoc.eoc-swapping #finale-eoc-line {
  opacity: 0;
}

.quote {
  margin: 0;
  font-style: italic;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--shadow-navy);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: clamp(13px, 2.4vw, 16px);
}

/* Readable over the menu's background art: near-black ink on a translucent
   light rounded panel instead of bare muted text, which the image washed out. */
.howto {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.68);
  border-radius: 14px;
  padding: 12px 16px;
  font-size: clamp(12px, 2vw, 14px);
  max-width: min(90vw, 590px);
  line-height: 1.5;
}

.btn-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn {
  font-size: 18px;
  font-weight: 700;
  padding: 12px 32px;
  border-radius: 999px;
  border: 3px solid var(--shadow-navy);
  background: var(--brand);
  color: var(--brand-ink);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--shadow-navy);
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--shadow-navy);
}

.highscore {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

#hud {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top, 0px));
  right: calc(22px + env(safe-area-inset-right, 0px));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

#hud-level {
  font-size: clamp(12px, 1.8vw, 15px);
  font-weight: 700;
  color: var(--muted);
  text-shadow: 0 1px 0 var(--surface);
}

#hud-artifact {
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--shadow-navy);
  background: rgba(255, 255, 255, 0.5) center / 65% no-repeat
    url("assets/forest/cutscene/artifact.png");
  filter: grayscale(100%) brightness(0.7);
  opacity: 0.6;
  transition: filter 0.3s, opacity 0.3s, box-shadow 0.3s;
}

#hud-artifact.hidden-slot {
  display: none;
}

#hud-artifact.found {
  filter: none;
  opacity: 1;
  box-shadow: 0 0 10px 3px rgba(220, 196, 143, 0.8);
}

#hud-score {
  font-size: clamp(20px, 3vw, 30px);
  font-weight: 800;
  color: var(--navy);
  text-shadow: 0 2px 0 var(--surface);
}

#health-meter {
  width: 110px;
  height: 14px;
  border-radius: 8px;
  border: 2px solid var(--shadow-navy);
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

#health-fill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #b43a52, #e15b78);
  transition: width 0.2s ease-out;
}

#shield-meter {
  width: 110px;
  height: 11px;
  border-radius: 7px;
  border: 2px solid var(--shadow-navy);
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
}

#shield-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #3d7bc4, #7db7ee);
  transition: width 0.2s ease-out;
}

/* Thumb-slide movement track: drag the knob (or just touch anywhere on the
   track) left/right to run. Analog — further from centre = faster. */
#move-track {
  pointer-events: auto;
  position: relative;
  width: 190px;
  height: var(--ctrl-size, 58px);
  border-radius: 999px;
  border: 2px solid var(--shadow-navy);
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

#move-knob {
  width: calc(var(--ctrl-size, 58px) - 10px);
  height: calc(var(--ctrl-size, 58px) - 10px);
  border-radius: 50%;
  border: 2px solid var(--shadow-navy);
  background: rgba(255, 255, 255, 0.8);
  color: var(--navy);
  font-size: 13px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
  pointer-events: none;
}

/* Pull-down-to-crouch hint under the ◀ ▶ in the knob; lights up while the
   thumb is actually held below the track (see trackUpdate in game.js). */
.knob-down {
  font-size: 10px;
  opacity: 0.45;
}

#move-track.crouching .knob-down {
  opacity: 1;
}

#hud-settings {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid var(--shadow-navy);
  background: rgba(255, 255, 255, 0.55);
  color: var(--navy);
  font-size: 17px;
  cursor: pointer;
  padding: 0;
}

.btn-small {
  font-size: 14px;
  padding: 8px 20px;
}

.settings-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(84vw, 360px);
}

.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
  color: var(--ink);
}

.setting-row input[type="range"] {
  width: 150px;
}

.setting-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
}

#over-newsletter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: min(84vw, 300px);
}

#over-newsletter-form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

#over-newsletter-email {
  font-size: 15px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 2px solid var(--shadow-navy);
  background: var(--surface);
  color: var(--ink);
}

#over-newsletter-status {
  margin: 0;
  min-height: 1em;
  font-size: 13px;
  color: var(--muted);
}

#leaderboard-entry {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: min(84vw, 340px);
}

#leaderboard-entry h3,
#leaderboard-list h3 {
  margin: 0;
  color: var(--navy);
  font-size: 16px;
}

#lb-name,
#lb-email {
  font-size: 15px;
  padding: 9px 12px;
  border-radius: 10px;
  border: 2px solid var(--shadow-navy);
  background: var(--surface);
  color: var(--ink);
}

#lb-status {
  margin: 0;
  min-height: 1em;
  font-size: 13px;
  color: var(--muted);
}

#leaderboard-list {
  width: min(84vw, 340px);
}

#lb-list-items {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--ink);
}

#lb-list-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 2px solid var(--shadow-navy);
  border-radius: 8px;
  padding: 6px 12px;
}

#lb-list-items li.lb-mine {
  border-color: var(--brand);
  font-weight: 700;
}

#horn-meter {
  width: 22px;
  height: 130px;
  border-radius: 12px;
  border: 2px solid var(--shadow-navy);
  background: rgba(255, 255, 255, 0.6);
  overflow: hidden;
  position: relative;
}

#horn-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(0deg, var(--accent-gold-soft, #d9bf84), var(--brand));
  transition: height 0.15s ease-out;
}

#horn-meter.full #horn-fill {
  animation: horn-pulse 0.6s ease-in-out infinite;
}

@keyframes horn-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
}

/* Movement cluster bottom-left, action cluster bottom-right — under the
   thumbs on a landscape phone, keeping the middle of the screen clear. */
#touch-controls {
  position: absolute;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: calc(16px + env(safe-area-inset-left, 0px));
  right: calc(16px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  pointer-events: none;
}

.ctrl-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.ctrl-btn {
  pointer-events: auto;
  width: var(--ctrl-size, 58px);
  height: var(--ctrl-size, 58px);
  border-radius: 50%;
  border: 2px solid var(--shadow-navy);
  background: rgba(255, 255, 255, 0.55);
  color: var(--navy);
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.ctrl-jump {
  width: calc(var(--ctrl-size, 58px) + 8px);
  height: calc(var(--ctrl-size, 58px) + 8px);
  background: rgba(220, 196, 143, 0.75);
}

/* Settings: swap which thumb gets movement vs actions. */
#touch-controls.swapped {
  flex-direction: row-reverse;
}

/* The formal interact button — same meaning as the Enter key (talk to
   trees now; levers and other logical actions later). */
.ctrl-action {
  font-size: 24px;
  background: rgba(255, 255, 255, 0.4);
}

.ctrl-blast {
  background: rgba(92, 106, 130, 0.4);
  color: rgba(255, 255, 255, 0.6);
  transition: background 0.15s, box-shadow 0.15s;
}

.ctrl-blast.ready {
  background: rgba(220, 196, 143, 0.95);
  color: var(--brand-ink);
  box-shadow: 0 0 16px 4px rgba(220, 196, 143, 0.8);
  animation: horn-pulse 0.6s ease-in-out infinite;
}

/* --- Phones ------------------------------------------------------------- */

/* Portrait on a touch device: the game is landscape-only, so cover
   everything with a "rotate your phone" card. Orientation lock via the
   web API only works on Android in fullscreen; on iPhone this overlay
   IS the landscape enforcement. */
#rotate-hint {
  display: none;
}

@media (orientation: portrait) and (pointer: coarse) {
  #rotate-hint {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 100;
    align-items: center;
    justify-content: center;
    background: var(--shadow-navy);
    color: var(--bg);
    text-align: center;
    padding: 32px;
  }
}

.rotate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.rotate-icon {
  font-size: 56px;
  animation: rotate-nudge 1.6s ease-in-out infinite;
}

.rotate-card p {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
}

.rotate-card .rotate-help {
  max-width: 340px;
  font-size: 15px;
  line-height: 1.4;
  font-weight: 500;
  color: rgba(216, 227, 248, 0.85);
}

#rotate-btn {
  margin-top: 4px;
}

#rotate-status {
  min-height: 1.4em;
  max-width: 340px;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--brand);
}

@keyframes rotate-nudge {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-90deg); }
}

/* Short landscape screens (phones held sideways): tighten the menu so the
   Play button is visible without scrolling, and slightly shrink controls. */
@media (max-height: 500px) {
  .screen {
    gap: 8px;
    padding: 12px 20px;
  }

  .logo {
    max-width: 150px;
  }

  .portrait {
    width: 52px;
    height: 52px;
  }

  .portrait.small {
    width: 48px;
    height: 48px;
  }

  /* Put the Play button above the long how-to text so it's on screen
     without scrolling; the instructions stay reachable below it. */
  .howto {
    font-size: 11px;
    line-height: 1.35;
    max-width: min(94vw, 560px);
    order: 1;
  }

  .highscore {
    order: 2;
  }

  .screen::after {
    order: 3;
  }

  .btn {
    font-size: 16px;
    padding: 10px 28px;
  }

  #horn-meter {
    height: 90px;
  }
}