/* ==========================================================================
   JUNGLE SAFARI — PAINTED ART LAYER
   Loaded last. Swaps the CSS-shape and inline-SVG placeholders for the real
   painted assets. Delete this file and the game falls back to its old look.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. THE FOUR NEW REGION BADGES — same var pattern as the original four
   -------------------------------------------------------------------------- */
:root {
  --badge-falls: url("../assets/ui/badge-whispering-falls.webp");
  --badge-ruins: url("../assets/ui/badge-sunken-ruins.webp");
  --badge-peak:  url("../assets/ui/badge-storm-peak.webp");
  --badge-court: url("../assets/ui/badge-emerald-court.webp");
}

/* Every badge is a painted medallion on a transparent background — not a
   square picture. style.css was styling the SLOT (rounded tile, inset white
   rim, drop shadow) and then filling it with `cover`, which cropped the
   medallion's gold rim off at the edges and left the rim of the empty tile
   showing around it. So: no tile. The medallion IS the badge. `contain` keeps
   the whole disc, and the shadow follows the artwork's own silhouette. */
.node-badge,
.level-badge-image {
  background-color: transparent;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 6px 10px rgba(6, 22, 13, 0.45));
}
.node-badge { width: clamp(78px, 9vw, 104px); }

/* The per-region coloured haloes were box-shadows on a square tile. On a round
   medallion they have to be drop-shadows, or they draw a rectangle in mid-air. */
.trail-node.falls .node-badge { box-shadow: none; filter: drop-shadow(0 6px 10px rgba(6,22,13,.45)) drop-shadow(0 0 .7rem rgba(143, 216, 255, .5)); }
.trail-node.ruins .node-badge { box-shadow: none; filter: drop-shadow(0 6px 10px rgba(6,22,13,.45)) drop-shadow(0 0 .7rem rgba(205, 191, 162, .45)); }
.trail-node.peak  .node-badge { box-shadow: none; filter: drop-shadow(0 6px 10px rgba(6,22,13,.45)) drop-shadow(0 0 .7rem rgba(180, 205, 245, .5)); }
.trail-node.court .node-badge { box-shadow: none; filter: drop-shadow(0 6px 10px rgba(6,22,13,.45)) drop-shadow(0 0 .7rem rgba(126, 230, 176, .5)); }

/* Undiscovered regions stay hushed. This has to be restated here because
   `filter` is a single property — the region glow above would otherwise
   replace the grayscale rather than add to it. */
.trail-node.is-mystery .node-badge,
.trail-node.is-mystery.falls .node-badge,
.trail-node.is-mystery.ruins .node-badge,
.trail-node.is-mystery.peak  .node-badge,
.trail-node.is-mystery.court .node-badge {
  box-shadow: none;
  filter: grayscale(.55) brightness(.8) drop-shadow(0 5px 8px rgba(6, 22, 13, .45));
}

.node-badge.falls,
.level-badge-image.falls { background-image: var(--badge-falls); }
.node-badge.ruins,
.level-badge-image.ruins { background-image: var(--badge-ruins); }
.node-badge.peak,
.level-badge-image.peak  { background-image: var(--badge-peak); }
.node-badge.court,
.level-badge-image.court { background-image: var(--badge-court); }

/* The Stage 8 placeholder gradients are no longer needed. */
.node-emblem.falls, .node-emblem.ruins, .node-emblem.peak, .node-emblem.court {
  background: none;
}

/* --------------------------------------------------------------------------
   2. AVATARS — now <img>, so they need sizing rather than SVG fill
   -------------------------------------------------------------------------- */
.avatar-art,
.hud-avatar-art,
.profile-avatar-art,
.rankup-avatar {
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
}

/* The painted crest already carries its own gold rim, so the flat gold disc
   underneath it becomes a soft shadow well instead of a solid coin. */
.hud-avatar,
.profile-avatar,
.rankup-crest {
  background: radial-gradient(circle at 34% 30%, rgba(241, 210, 129, 0.35), rgba(120, 84, 12, 0.5));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 2px 6px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.hud-avatar-art { width: 100%; height: 100%; }
.profile-avatar-art { width: 100%; height: 100%; }
.rankup-avatar { width: 100%; height: 100%; }

.rankup-crest {
  background: radial-gradient(circle at 34% 30%, rgba(241, 210, 129, 0.4), rgba(120, 84, 12, 0.55));
  box-shadow: 0 0 0 6px rgba(226, 187, 87, 0.18), 0 0 2.4rem rgba(226, 187, 87, 0.5);
}

.avatar-pick img { width: 84%; height: 84%; object-fit: contain; }
.avatar-pick.is-on { background: radial-gradient(circle at 32% 28%, rgba(241,210,129,0.5), rgba(207,157,52,0.55)); }
.onboard-avatars .avatar-pick img { width: 88%; height: 88%; }

/* --------------------------------------------------------------------------
   3. COMPANIONS
   -------------------------------------------------------------------------- */
.comp-art,
.buddy-art { display: block; object-fit: contain; -webkit-user-drag: none; }

.comp-pick img { width: 4.6rem; height: 4.6rem; }
.comp-pick .comp-fallback { width: 4.6rem; height: 4.6rem; }
.comp-pick { background: rgba(11, 35, 23, 0.7); }

/* The buddy on the board.
   At 5rem, unlit, against a dark painted jungle, the companion simply
   disappeared into the corner — a reward nobody could see. It is now half
   again as large, lifted off the background by a warm rim-glow and a ground
   shadow, and it breathes with a slow idle bob so the eye catches it. */
.buddy {
  width: 7.5rem;
  height: 7.5rem;
  background: none;
  box-shadow: none;
  filter:
    drop-shadow(0 0 0.9rem rgba(226, 187, 87, 0.45))
    drop-shadow(0 0.6rem 0.8rem rgba(0, 0, 0, 0.6));
  animation: buddy-idle 4.5s ease-in-out infinite;
}
.buddy-art { width: 100%; height: 100%; }

/* Vector fallback (shown only if the companion image can't load). A warm gold
   fill on a soft disc keeps it readable against the dark jungle corner, so the
   companion is never invisible even offline or mid-cache. */
.comp-fallback { fill: currentColor; }
.buddy .comp-fallback {
  color: var(--gold-300);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
}
.buddy:has(.comp-fallback:not([style*="none"])) {
  background: radial-gradient(circle at 34% 30%, rgba(20, 51, 31, 0.9), rgba(11, 35, 23, 0.75));
  border-radius: 50%;
}

/* A soft pool of light under his feet, so he stands ON the page. */
.buddy::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -0.1rem;
  width: 74%;
  height: 0.9rem;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(226, 187, 87, 0.32), transparent 70%);
  pointer-events: none;
}

@keyframes buddy-idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@media (max-width: 720px) {
  .buddy { width: 5rem; height: 5rem; }
}

/* --------------------------------------------------------------------------
   4. THE TEMPLE GUARDIANS
   -------------------------------------------------------------------------- */
.idol-art { width: 100%; height: 100%; object-fit: contain; display: block; }

.boss-idol,
.boss-idol-big,
.boss-idol-fallen { color: transparent; }

.boss-idol-big { filter: drop-shadow(0 0.6rem 1.2rem rgba(0, 0, 0, 0.65)); }
.boss-idol { filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.5)); }

/* A defeated Guardian is greyed and toppled. */
.boss-card.is-beaten .boss-idol { filter: grayscale(0.15) drop-shadow(0 0 0.6rem rgba(226, 187, 87, 0.45)); }
.boss-idol-fallen { filter: grayscale(0.75) brightness(0.75); }

/* Give the arena idol more room now that it is a painting, not a glyph. */
.boss-figure { width: 11rem; height: 11rem; }
@media (max-width: 720px) { .boss-figure { width: 8rem; height: 8rem; } }

/* --------------------------------------------------------------------------
   5. RELIC GEMS — the empty socket is the whole point of the album
   -------------------------------------------------------------------------- */
.relic-gem {
  clip-path: none;
  background: url("../assets/ui/relic-gem-empty.webp") center / contain no-repeat;
  width: 2rem;
  height: 2rem;
  opacity: 0.5;
  filter: grayscale(0.6);
}

.relic.is-found .relic-gem,
.relic-pop .relic-gem {
  background: url("../assets/ui/relic-gem-found.webp") center / contain no-repeat;
  box-shadow: none;
  opacity: 1;
  filter: drop-shadow(0 0 0.5rem rgba(226, 187, 87, 0.8));
}

.relic-pop .relic-gem { width: 2.4rem; height: 2.4rem; }

/* --------------------------------------------------------------------------
   6. COINS — one painted coin, used everywhere gold appears
   -------------------------------------------------------------------------- */
.coin-dot,
.gain-coin,
.post-coin,
.coin-drop {
  background: url("../assets/ui/coin.webp") center / contain no-repeat !important;
  box-shadow: none !important;
  border-radius: 0;
}

.post-coin { width: 1.9rem; height: 1.9rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.coin-drop { filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.45)); }
.shop-purse .coin-dot { filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3)); }

/* --------------------------------------------------------------------------
   7. TROPHY
   -------------------------------------------------------------------------- */
.boss-trophy,
.boss-trophy-big {
  clip-path: none;
  background: url("../assets/ui/trophy.webp") center / contain no-repeat;
}

.boss-trophy { width: 1.6rem; height: 1.6rem; filter: drop-shadow(0 0 0.4rem rgba(226,187,87,0.8)); }
.boss-trophy-big { width: 7rem; height: 7.5rem; }

/* --------------------------------------------------------------------------
   8. MODE EMBLEMS
   -------------------------------------------------------------------------- */
.mode-piece-emblem.sprint,
.mode-piece-emblem.sentence,
.mode-piece-emblem.review,
.mode-piece-emblem.boss {
  background: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45));
}

/* THE SHAPE ON TOP OF THE ART.
   style.css draws the old placeholder glyph in a ::before — a dark shape,
   masked to a compass / map / tent silhouette, sitting inset over the emblem.
   We replaced the emblem's BACKGROUND with the painted art but left that
   ::before running, so every icon had a dark symbol stamped across it. Worse,
   .boss never had a mask assigned, so its ::before rendered as a plain dark
   rectangle — the black box over the Temple Guardian. The placeholder is dead;
   this buries it. */
.mode-piece-emblem.sprint::before,
.mode-piece-emblem.sentence::before,
.mode-piece-emblem.review::before,
.mode-piece-emblem.boss::before { content: none; }

.mode-piece-emblem.sprint   { background-image: url("../assets/ui/mode-sprint.webp"); }
.mode-piece-emblem.sentence { background-image: url("../assets/ui/mode-sentence.webp"); }
.mode-piece-emblem.review   { background-image: url("../assets/ui/mode-review.webp"); }
.mode-piece-emblem.boss     { background-image: url("../assets/ui/mode-boss.webp"); }

/* --------------------------------------------------------------------------
   9. CAMPFIRE — the CSS flame is replaced only once real art exists.
      (assets/ui/campfire.webp is still to be generated, so the animated CSS
      flame in style.css remains in use and still looks right.)
   -------------------------------------------------------------------------- */

/* The .is-cheer / .is-sad rules in style.css are more specific, so the
   reaction animations still take over the moment a word is answered. */

@media (prefers-reduced-motion: reduce) {
  .buddy {
    animation: none;
    filter:
      drop-shadow(0 0 0.7rem rgba(226, 187, 87, 0.4))
      drop-shadow(0 0.3rem 0.5rem rgba(0, 0, 0, 0.5));
  }
}