/* ==========================================================================
   css/safari.css — the Safari Zone (DECISIONS 139)
   --------------------------------------------------------------------------
   Loaded by index.html after css/scene.css. Everything the park adds to the
   look lives here: the ticket HUD strip above the scene (js/ui/location.js),
   the four-card Safari menu in the battle screen (js/ui/battle.js
   buildSafariMenu), the "Eating" / "Angry" tags on the foe's info box, the
   outcome banner line, and the map colour of the park node (js/ui/map.js).

   The rest of the game is dark navy with one Pokéball-red accent (css/base.css).
   The park gets a warm khaki / safari-green accent so it feels like a different
   place - the way the Safari Zone's own music and fences do in the games - but
   it stays a tint on the same panels, never a second red.
   ========================================================================== */

:root {
  --safari: #9db43f;                        /* khaki green: cards, HUD accent */
  --safari-strong: #6f8a2c;                 /* pressed / borders */
  --safari-soft: rgba(157, 180, 63, 0.16);  /* tinted backgrounds */
  --safari-text: #eef5d6;                   /* light text on the green */
  --map-safari: #8d9b3a;                    /* the map node fill (js/ui/map.js TYPE_FILL) */
}

/* --------------------------------------------------------------------------
   HUD strip above the park scene: "Safari Game   Safari Balls 27 · Steps 412"
   -------------------------------------------------------------------------- */
.safari-hud {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 auto 8px;
  padding: 6px 12px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid rgba(157, 180, 63, 0.35);
  background: linear-gradient(90deg, var(--safari-soft), rgba(255, 255, 255, 0.04));
  font-size: 0.85rem;
  line-height: 1.4;
}
.safari-hud-title {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  color: var(--safari);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.safari-hud-title svg { width: 14px; height: 14px; }
.safari-hud-stats { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.safari-hud-stats[hidden] { display: none; }
.safari-hud-stat { white-space: nowrap; color: var(--text, #f4f6fb); }
.safari-hud-val {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  color: var(--safari-text);
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(157, 180, 63, 0.28);
}
/* The last balls / steps: red, like a low HP bar - pick your throws. */
.safari-hud-val.low { background: var(--accent-soft, rgba(214, 69, 69, 0.16)); color: var(--accent-light, #f08c8c); }
.safari-hud-sep { color: var(--muted, #a9b3c7); }
.safari-hud-note { color: var(--muted, #a9b3c7); font-size: 0.8rem; }
.safari-hud.inactive .safari-hud-title { color: var(--muted, #a9b3c7); }
.safari-hud.inactive { border-style: dashed; background: rgba(255, 255, 255, 0.03); }

/* The gate object in the park: a tinted rect so the booth reads as a building even while
   the location has no drawn scene. */
.actor.object.obj-safari-gate { background: rgba(157, 180, 63, 0.12); outline-color: rgba(157, 180, 63, 0.45); }
.actor.object.obj-safari-gate .object-label .object-icon { color: var(--safari); }

/* --------------------------------------------------------------------------
   Battle screen: the Safari menu (four cards, keys 1-4) replaces the attack bar
   -------------------------------------------------------------------------- */
.safari-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.safari-btn {
  --safari-card: var(--safari);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 56px;
  padding: 8px 30px 8px 10px;
  border-radius: var(--radius-sm, 8px);
  border: 1px solid color-mix(in srgb, var(--safari-card) 55%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--safari-card) 24%, rgba(18, 26, 44, 0.85)), rgba(18, 26, 44, 0.85));
  color: var(--text, #f4f6fb);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease, filter 0.15s ease;
}
.safari-btn:hover:not(:disabled) { border-color: var(--safari-card); filter: brightness(1.12); }
.safari-btn:active:not(:disabled) { transform: translateY(1px); }
.safari-btn:focus-visible { outline: none; border-color: var(--safari-card); box-shadow: var(--focus, 0 0 0 3px rgba(214, 69, 69, 0.45)); }
.safari-btn:disabled { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.6); }
.safari-btn-name { font-weight: 700; font-size: 14px; letter-spacing: 0.01em; }
.safari-btn-sub { font-size: 11px; color: var(--muted, #a9b3c7); line-height: 1.3; }
/* The ball is the primary choice and wears the game's red; the rest stay park-green. */
.safari-btn.ball { --safari-card: var(--accent, #d64545); }
.safari-btn.ball .safari-btn-sub { color: var(--accent-light, #f08c8c); font-weight: 700; }
.safari-btn.bait { --safari-card: #c9a24a; }   /* the bait's straw yellow */
.safari-btn.rock { --safari-card: #9a8f86; }   /* stone grey */
.safari-btn.run  { --safari-card: #5a8fd6; }   /* the "got away" blue of the outcome banner */
/* The key number, same place as on the move cards (css/game.css .move-key). */
.safari-btn .move-key {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  font-weight: 800;
  opacity: 0.6;
}
/* While the turn plays out the bar greys as a whole (js: lockActions); keep the cards themselves solid. */
.battle-actions.locked .safari-btn { opacity: 1; }
.battle-actions.locked .safari-btn:disabled { opacity: 0.45; }

/* The wild Pokémon's mood on its info box - the park's only "status" (js/ui/battle.js updateInfoBox). */
.status-tag.safari-eating { background: #c9a24a; color: #2a2208; text-transform: none; }
.status-tag.safari-angry  { background: var(--accent, #d64545); color: #fff; text-transform: none; }

/* The outcome banner in the park: the one-line verdict above Continue. */
.outcome-banner.safari { flex-wrap: wrap; row-gap: 6px; }
.safari-outcome-note {
  flex-basis: 100%;
  text-align: center;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.01em;
}
.safari-outcome-card { border-left: 3px solid var(--safari); }

/* --------------------------------------------------------------------------
   Phones: 2 x 2 cards with real thumb targets (docs/BATTLE-DECISION.md §6.2)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
  .safari-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .safari-btn { min-height: 44px; padding: 7px 26px 7px 9px; }
  .safari-btn-sub { font-size: 10px; }
  .safari-hud { gap: 8px; padding: 5px 10px; font-size: 0.8rem; }
  .safari-hud-note { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .safari-btn { transition: none; }
}