/*
  ============================================================
  MOMO'S JUNGLE SWING — 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 jungle HUD,
  the canvas + hold-button control layer, the level-select cards,
  the countdown/toast screens, the distinct friendly Game Over
  screen, and Momo's swing-specific reaction states (char-running/
  char-swinging/char-flying/char-hit/char-happy -- none of the
  shared idle/looking/happy/etc. states fit a swinging monkey, so
  this game defines its own small set, the same "add game-specific
  states" pattern every other game's CSS already uses).
  ============================================================
*/

.jungle-stage{ background:linear-gradient(180deg,#1F6B4A 0%,#2E8F5C 55%,#3AA86A 100%); overflow:hidden; }
#jungleCanvas{ position:absolute; inset:0; z-index:1; display:block; touch-action:none; }

/* ---------- HUD ---------- */
.jungle-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);
}
.jungle-hud[hidden]{ display:none; }
.jungle-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; }
.jungle-hud-hearts{ font-size:0.85rem; background:#FFE2E2; letter-spacing:1px; }
.jungle-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);
}

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

/* ---------- respawn toast (brief, non-blocking -- used while hearts remain) ---------- */
.jungle-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:jungle-toast-pop 1.3s ease forwards;
}
.jungle-toast[hidden]{ display:none; }
@keyframes jungle-toast-pop{
  0%{ opacity:0; transform:translateX(-50%) translateY(-8px); }
  15%{ opacity:1; transform:translateX(-50%) translateY(0); }
  75%{ opacity:1; }
  100%{ opacity:0; }
}

/* ---------- Momo (DOM chroma-video overlay, positioned every frame
   in JS via positionMomoChar() -- see momos-jungle-swing.js) ---------- */
.jungle-stage .game-character{ width:110px; height:132px; position:absolute; left:0; top:0; z-index:9; pointer-events:none; }
.jungle-stage .game-character img{ width:100%; height:100%; object-fit:contain; }
.jungle-stage .game-character[hidden]{ display:none; }

.char-running img{ animation:momo-running 0.42s ease-in-out infinite; }
@keyframes momo-running{ 0%,100%{ transform:translateY(0) rotate(0);} 50%{ transform:translateY(-5px) rotate(-2deg);} }
.char-swinging img{ animation:none; } /* rotation is driven directly by JS (theta), no CSS keyframe fights it */
.char-flying img{ transform:rotate(var(--fly-rot,0deg)); }
.char-banana img{ animation:momo-banana .4s ease; }
@keyframes momo-banana{ 0%{ transform:scale(1) rotate(0);} 50%{ transform:scale(1.2) rotate(10deg);} 100%{ transform:scale(1) rotate(0);} }
.char-hit img{ animation:momo-hit .6s ease; }
@keyframes momo-hit{ 0%{ transform:rotate(0) translateX(0);} 25%{ transform:rotate(-10deg) translateX(-6px);} 60%{ transform:rotate(8deg) translateX(4px);} 100%{ transform:rotate(0) translateX(0);} }
.char-finish img, .char-celebrate img{ animation:momo-finish 1.4s ease; }
@keyframes momo-finish{ 0%,100%{ transform:scale(1) rotate(0);} 20%{ transform:scale(1.15) rotate(-6deg);} 40%{ transform:scale(1.1) rotate(6deg);} 60%{ transform:scale(1.15) rotate(-4deg);} 80%{ transform:scale(1.05) rotate(3deg);} }
@media (prefers-reduced-motion:reduce){
  .char-running img, .char-banana img, .char-hit img, .char-finish img, .char-celebrate img{ animation:none; }
}

/* ---------- mobile touch controls (left / right / jump-or-grab) ---------- */
.jungle-mobile-controls{
  position:absolute; inset:0; z-index:15; pointer-events:none;
}
.jungle-mobile-controls[hidden]{ display:none; }
.jungle-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;
}
.jungle-ctrl-btn.is-pressed{ background:rgba(255,255,255,0.9); transform:scale(0.92); }
.jungle-ctrl-move{ width:64px; height:64px; bottom:18px; }
#btnLeft{ left:16px; }
#btnRight{ left:88px; }
.jungle-ctrl-action{
  width:76px; height:76px; right:16px; bottom:18px;
  background:linear-gradient(160deg,#FFD873,#FF9F1C); color:#5A3400; font-size:2rem;
}
.jungle-ctrl-action.is-pressed{ background:linear-gradient(160deg,#FFC94D,#F08600); transform:scale(0.92); }

/* ---------- 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-grove{ background:linear-gradient(160deg,#BEE7B0,#4E9E4A); }
.level-card-art.env-valley{ background:linear-gradient(160deg,#7FCB93,#1F7A50); }
.level-card-art.env-canopy{ background:linear-gradient(160deg,#3D8F63,#164A32); }
.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 ---------- */
.jungle-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;
}
.jungle-stats-row{ display:flex; justify-content:space-between; gap:16px; font-size:0.92rem; }
.jungle-stats-row span:last-child{ color:var(--coral-ink); }

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

/* ---------- distinct friendly Game Over screen ---------- */
.jungle-gameover-card{ max-width:380px; }
.jungle-gameover-icon{ font-size:2.6rem; margin:0 0 6px; }

@media (max-width:600px){
  .jungle-hud{ font-size:0.72rem; gap:6px; padding:0 8px 4px; }
  .jungle-hud-item{ padding:2px 8px; }
  .jungle-stage .game-character{ width:82px; height:98px; }
  .countdown-number{ font-size:4.2rem; }
  .jungle-toast{ font-size:0.82rem; padding:6px 14px; }
  .jungle-ctrl-move{ width:56px; height:56px; }
  .jungle-ctrl-action{ width:66px; height:66px; font-size:1.7rem; }
}
@media (max-height:700px){
  .jungle-hud{ padding:0 8px 3px; }
}