/*
  ============================================================
  FIFI'S FOREST TREASURE HUNT — GAME STYLES
  ============================================================
  Loaded after styles.css (color tokens/buttons) and game-shell.css
  (shared chrome: topbar, sound toggle, .completion-overlay/
  .completion-card used for every screen here, the shared char-*
  keyframe library, .game-progress). This file adds: the forest HUD,
  the canvas + mobile touch-control layer, the level-select cards,
  the countdown/toast screens, and Fifi's platformer-specific
  reaction states (char-running/jumping/acorn/hit/treasure -- none
  of the shared idle/looking/happy/etc. states fit a running fox, so
  this game defines its own small set, the same "add game-specific
  states" pattern every other game's CSS already uses).
  ============================================================
*/

.forest-stage{ background:#BEE7B0; overflow:hidden; }
#forestCanvas{ position:absolute; inset:0; z-index:1; display:block; touch-action:none; }

/* ---------- HUD ---------- */
.forest-hud{
  position:relative; z-index:20; display:flex; align-items:center; justify-content:center;
  gap:10px; flex-wrap:wrap; padding:0 10px 6px; font-weight:800; font-size:0.85rem; color:var(--ink-soft);
}
.forest-hud[hidden]{ display:none; }
.forest-hud-item{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; background:rgba(255,255,255,0.75); border-radius:999px; padding:3px 10px; }
.forest-hud-hearts{ font-size:0.85rem; background:#FFE2E2; letter-spacing:1px; }
.forest-pause-btn{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  border-radius:999px; background:var(--surface); border:2px solid var(--line); cursor:pointer;
  font-size:0.95rem; box-shadow:0 3px 0 var(--line);
}

.forest-progress-wrap{ position:relative; z-index:20; padding:0 14px 4px; }
.forest-progress-track{ position:relative; height:8px; border-radius:999px; background:rgba(255,255,255,0.55); }
.forest-progress-dot{ position:absolute; top:50%; left:0; width:14px; height:14px; border-radius:50%; background:#E4572E; border:2px solid #fff; transform:translate(-50%,-50%); transition:left .12s linear; }
.forest-progress-track::after{ content:"🎁"; position:absolute; right:-6px; top:50%; transform:translateY(-50%); font-size:0.8rem; }

/* ---------- respawn toast (brief, non-blocking) ---------- */
.forest-toast{
  position:absolute; top:14px; left:50%; transform:translateX(-50%); z-index:22;
  background:rgba(0,0,0,0.75); color:#fff; font-weight:800; font-size:0.95rem;
  padding:8px 18px; border-radius:999px; white-space:nowrap; pointer-events:none;
  animation:forest-toast-pop 1.3s ease forwards;
}
.forest-toast[hidden]{ display:none; }
@keyframes forest-toast-pop{
  0%{ opacity:0; transform:translateX(-50%) translateY(-8px); }
  15%{ opacity:1; transform:translateX(-50%) translateY(0); }
  75%{ opacity:1; }
  100%{ opacity:0; }
}

/* ---------- Fifi (DOM chroma-video overlay -- the visible gameplay
   sprite during PLAYING, positioned every frame in JS via
   positionFifiChar(); also used statically on the start screen) ---------- */
.forest-stage .game-character{ width:120px; height:120px; position:absolute; left:50%; bottom:6%; z-index:9; transform:translateX(-50%); pointer-events:none; }
.forest-stage .game-character img{ width:100%; height:100%; object-fit:contain; }
.forest-stage .game-character[hidden]{ display:none; }

.char-running img, .char-running canvas{ animation:fifi-running 0.5s ease-in-out infinite; }
@keyframes fifi-running{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-6px) rotate(-2deg);} }
.char-jumping img, .char-jumping canvas{ animation:fifi-jumping .5s ease; }
@keyframes fifi-jumping{ 0%{ transform:translateY(0) scale(1);} 40%{ transform:translateY(-26px) scale(1.08);} 100%{ transform:translateY(0) scale(1);} }
.char-acorn img, .char-acorn canvas{ animation:fifi-acorn .42s ease; }
@keyframes fifi-acorn{ 0%{ transform:scale(1) rotate(0);} 50%{ transform:scale(1.2) rotate(8deg);} 100%{ transform:scale(1) rotate(0);} }
.char-hit img, .char-hit canvas{ animation:fifi-hit .6s ease; }
@keyframes fifi-hit{ 0%{ transform:rotate(0) translateX(0);} 25%{ transform:rotate(-8deg) translateX(-6px);} 60%{ transform:rotate(6deg) translateX(4px);} 100%{ transform:rotate(0) translateX(0);} }
.char-treasure img, .char-celebrate img, .char-treasure canvas, .char-celebrate canvas{ animation:fifi-treasure 1.4s ease; }
@keyframes fifi-treasure{ 0%,100%{ transform:scale(1) rotate(0);} 20%{ transform:scale(1.15) rotate(-5deg);} 40%{ transform:scale(1.1) rotate(5deg);} 60%{ transform:scale(1.15) rotate(-4deg);} 80%{ transform:scale(1.05) rotate(3deg);} }
@media (prefers-reduced-motion:reduce){
  .char-running img, .char-jumping img, .char-acorn img, .char-hit img, .char-treasure img, .char-celebrate img,
  .char-running canvas, .char-jumping canvas, .char-acorn canvas, .char-hit canvas, .char-treasure canvas, .char-celebrate canvas{ animation:none; }
}

/* ---------- mobile touch controls ---------- */
.forest-mobile-controls{
  position:absolute; inset:0; z-index:15; pointer-events:none;
}
.forest-mobile-controls[hidden]{ display:none; }
.forest-ctrl-btn{
  position:absolute; pointer-events:auto; -webkit-tap-highlight-color:transparent; touch-action:none; user-select:none;
  display:flex; align-items:center; justify-content:center; border-radius:50%; border:none;
  background:rgba(255,255,255,0.55); color:var(--ink); font-size:1.7rem; font-weight:800;
  box-shadow:0 4px 10px rgba(0,0,0,0.18); transition:transform .08s ease, background .08s ease;
}
.forest-ctrl-btn.is-pressed{ background:rgba(255,255,255,0.9); transform:scale(0.92); }
.forest-ctrl-move{ width:64px; height:64px; bottom:18px; }
#btnLeft{ left:16px; }
#btnRight{ left:88px; }
.forest-ctrl-jump{
  width:76px; height:76px; right:16px; bottom:18px;
  background:linear-gradient(160deg,#FFC22E,#FF6B00); color:#fff; font-size:2rem;
}

/* ---------- level-select cards ---------- */
.level-select-card{ max-width:520px; width:92vw; }
.level-cards{ display:flex; flex-direction:column; gap:12px; margin:14px 0 20px; }
.level-card{
  display:flex; align-items:stretch; gap:12px; text-align:left; border:2px solid var(--line); border-radius:16px;
  background:var(--surface); padding:0; overflow:hidden; cursor:pointer; font:inherit; color:inherit;
}
.level-card:disabled{ cursor:not-allowed; opacity:0.55; }
.level-card.is-completed{ border-color:#5FA85C; }
.level-card-art{ flex:none; width:72px; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.level-card-art.env-meadow{ background:linear-gradient(160deg,#BEE7B0,#6FBE5E); }
.level-card-art.env-ravine{ background:linear-gradient(160deg,#7FCB93,#2E8F5C); }
.level-card-art.env-heights{ background:linear-gradient(160deg,#B7D9F7,#4E86BA); }
.level-card-body{ padding:10px 12px 10px 0; display:flex; flex-direction:column; gap:2px; justify-content:center; }
.level-card-name{ font-weight:800; font-size:1rem; color:var(--ink); }
.level-card-diff{ font-size:0.78rem; font-weight:700; color:var(--ink-soft); }
.level-card-desc{ font-size:0.82rem; color:var(--ink-soft); }

/* ---------- countdown ---------- */
.countdown-card{ background:transparent; box-shadow:none; border:none; display:flex; align-items:center; justify-content:center; }
.countdown-number{ font-size:6rem; font-weight:900; color:#fff; text-shadow:0 4px 0 rgba(0,0,0,0.25); }
.countdown-pop{ animation:countdown-pop .8s ease; }
@keyframes countdown-pop{ 0%{ transform:scale(0.4); opacity:0;} 30%{ transform:scale(1.2); opacity:1;} 100%{ transform:scale(1); opacity:0.85;} }

/* ---------- results / stats ---------- */
.forest-stats{
  display:flex; flex-direction:column; gap:6px; margin:0 0 20px; font-weight:800; color:var(--ink);
  background:var(--surface-alt); border-radius:16px; padding:14px 18px;
}
.forest-stats-row{ display:flex; justify-content:space-between; gap:16px; font-size:0.92rem; }
.forest-stats-row span:last-child{ color:var(--coral-ink); }

.forest-start-card{ max-width:380px; }
.forest-start-fifi{ width:120px; height:213px; margin:0 auto 10px; display:block; position:relative; filter:drop-shadow(0 8px 10px rgba(0,0,0,0.25)); }
.forest-start-fifi video.chroma-source{ position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }
.forest-start-fifi canvas.chroma-canvas{ width:100%; height:100%; display:block; object-fit:contain; }
.forest-howto-card{ max-width:440px; text-align:left; }
.forest-howto-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:10px; }
.forest-howto-list li{ display:flex; align-items:flex-start; gap:10px; font-weight:700; font-size:0.92rem; line-height:1.35; }
.forest-howto-icon{ flex:none; font-size:1.1rem; }

@media (max-width:600px){
  .forest-hud{ font-size:0.72rem; gap:6px; padding:0 8px 4px; }
  .forest-hud-item{ padding:2px 8px; }
  .forest-stage .game-character{ width:90px; height:90px; }
  .countdown-number{ font-size:4.2rem; }
  .forest-toast{ font-size:0.82rem; padding:6px 14px; }
}
@media (max-height:700px){
  .forest-hud{ padding:0 8px 3px; }
}