/* ============================================================
   Campfire — css/wild.css                               (WILD-03)
   WILD FRIENDS' LOOK on the phone: the Camps tile, the full-screen
   overlay, the world picker, the camp's top bar, lines and cards, and
   the parent's rows. The camp itself is css/camp-scene.css.
   The pair of js/wild.js. Loaded by index.html only (the wall: WILD-10).

   ⚠ No hex here and no custom property declared: every colour is a
   token in branding.css.
   ⚠ REDUCED MOTION: every animation has a tail at the foot.
   ============================================================ */

/* ── The tile, first in Camps ──────────────────────────────── */
.wild-tile-block { padding: 12px 16px 4px; }
.wild-tile {
    position: relative; display: flex; align-items: flex-end; gap: 12px;
    width: 100%; min-height: 128px; padding: 14px 16px;
    border: 0; border-radius: var(--radius-xl); overflow: hidden;
    background: var(--surface-2); color: var(--learn-hud-ink);
    box-shadow: var(--shadow-md); cursor: pointer; text-align: left;
    font: inherit; -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s;
}
.wild-tile:active { transform: scale(0.98); }
.wild-tile-bd {
    position: absolute; inset: 0; background-size: cover; background-position: 50% 62%;
}
.wild-tile-hero { position: relative; font-size: 84px; line-height: 1; flex: none; margin-bottom: -6px; }
.wild-tile-text {
    position: relative; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
    background: var(--learn-hud-bg); border-radius: var(--radius-lg); padding: 8px 12px; box-shadow: var(--shadow-sm);
}
.wild-tile-name { font-family: var(--font-heavy); font-size: 20px; line-height: 1.1; }
.wild-tile-sub { font-size: 15px; }
.wild-tile.is-closed { cursor: default; }
.wild-tile.is-closed .wild-tile-bd, .wild-tile.is-closed .wild-tile-hero { filter: grayscale(0.7) brightness(0.8); }
.wild-tile.is-closed:active { transform: none; }

/* The coin chip: the library coin and a number. */
.wild-coins {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 12px 4px 6px;
    border-radius: 999px; background: var(--learn-hud-bg); color: var(--learn-hud-ink);
    font-family: var(--font-heavy); font-size: 17px; box-shadow: var(--shadow-sm); white-space: nowrap;
}
.wild-tile-text .wild-coins { box-shadow: none; padding: 0; min-height: 0; background: transparent; }
.wild-coin-img { width: 26px; height: 26px; object-fit: contain; display: block; }
.wild-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── The overlay (over the bars, under sheets) ── */
.wild-play {
    position: fixed; inset: 0; z-index: 150; background: var(--bg); color: var(--text-primary);
    overflow: hidden; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.wild-play[hidden] { display: none; }
/* WILD-10: on the wall the game sits in the play overlay's stage, its own
   stacking context, so the wall's "Closing soon" pill stays on top. */
.wild-play.is-wall { position: absolute; z-index: 0; }
.wild-play.is-wall .wild-worlds { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1100px; margin: 0 auto; }
.wild-play.is-wall .wild-world { min-height: 190px; }
body.wild-open { overflow: hidden; }
.wild-play button { font: inherit; color: inherit; cursor: pointer; }

.wild-top {
    position: absolute; left: 0; right: 0; top: 0; z-index: 7000;
    display: flex; align-items: center; gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 10px max(12px, env(safe-area-inset-left));
}
.wild-top-title {
    flex: 1; min-width: 0; font-family: var(--font-heavy); font-size: 19px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wild-top-camp .wild-top-title {
    flex: 0 1 auto; margin-right: auto; padding: 6px 12px; border-radius: 999px;
    background: var(--learn-hud-bg); color: var(--learn-hud-ink); box-shadow: var(--shadow-sm); font-size: 16px;
}
.wild-round {
    flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--learn-hud-bg); color: var(--learn-hud-ink); box-shadow: var(--shadow-sm); font-size: 20px;
}
.wild-play .wild-round { color: var(--learn-hud-ink); }
/* CAMPS-08: on the wall the Camps page's way out is a word — Done relocks
   (LEARN-63 W4), the same word as the wall's PIN screen. */
.wild-done {
    flex: none; min-width: 88px; height: 48px; padding: 0 20px; border-radius: 999px; border: 0;
    background: var(--learn-hud-bg); color: var(--learn-hud-ink); box-shadow: var(--shadow-sm);
    font-family: var(--font-heavy); font-size: 19px;
}
.wild-moon-svg { width: 26px; height: 26px; display: block; }
.wild-moon-svg path { fill: var(--learn-moon); stroke: var(--learn-hud-ink); stroke-width: 1.4; stroke-linejoin: round; }
.wild-moon.is-glow { box-shadow: 0 0 0 4px var(--wild-target), 0 0 22px 8px var(--wild-target); animation: wild-glow 1.6s ease-in-out infinite; }

.wild-wait {
    position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px;
    border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--primary);
    animation: wild-spin 0.9s linear infinite;
}

/* ── The picker ── */
.wild-picker { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wild-picker .wild-top { position: sticky; background: var(--bg); }
.wild-worlds {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    padding: 4px 16px max(20px, env(safe-area-inset-bottom));
}
@media (min-width: 700px) { .wild-worlds { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1000px; margin: 0 auto; } }
.wild-world {
    position: relative; display: flex; align-items: flex-end; justify-content: space-between;
    min-height: 150px; padding: 10px; border: 0; border-radius: var(--radius-lg); overflow: hidden;
    background: var(--surface-2); box-shadow: var(--shadow-md); text-align: left;
    transition: transform 0.15s;
}
.wild-world:active { transform: scale(0.97); }
.wild-world-bd { position: absolute; inset: 0; background-size: cover; background-position: 50% 62%; }
.wild-world-hero { position: absolute; right: 8px; bottom: 30px; font-size: 64px; line-height: 1; }
.wild-world-text {
    position: relative; display: flex; flex-direction: column; gap: 2px;
    background: var(--learn-hud-bg); color: var(--learn-hud-ink); border-radius: var(--radius-md); padding: 6px 10px;
}
.wild-world-text b { font-family: var(--font-heavy); font-size: 17px; }
.wild-world-text span { font-size: 14px; }

/* ── The camp ── */
.wild-camp { position: absolute; inset: 0; }
.wild-stage { position: absolute; inset: 0; }
.wild-line {
    position: absolute; left: 50%; top: calc(max(10px, env(safe-area-inset-top)) + 58px); z-index: 7000;
    transform: translateX(-50%); max-width: min(92vw, 420px);
    padding: 10px 18px; border-radius: 999px; text-align: center;
    background: var(--inverse-surface); color: var(--on-inverse);
    font-family: var(--font-bold); font-size: 18px; box-shadow: var(--shadow-md); pointer-events: none;
}
.wild-line[hidden] { display: none; }
.wild-card {
    position: absolute; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 7000;
    transform: translateX(-50%); width: min(420px, calc(100% - 24px));
}
.wild-card[hidden] { display: none; }
.wild-name-card, .wild-night-card {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 14px 16px 16px; border-radius: var(--radius-xl);
    background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-lg);
    animation: wild-rise 0.3s ease-out;
}
.wild-name-ani { font-size: 72px; line-height: 1; margin-top: -48px; }
.wild-name-ask, .wild-night-card b { font-family: var(--font-heavy); font-size: 21px; text-align: center; }
.wild-name-row { display: flex; gap: 8px; width: 100%; }
.wild-name-btn {
    flex: 1; min-height: 52px; padding: 8px 6px; border: 0; border-radius: var(--radius-lg);
    background: var(--primary); color: var(--on-primary);
    font-family: var(--font-heavy); font-size: 18px;
}
.wild-play .wild-name-btn { color: var(--on-primary); }
.wild-name-btn:active { transform: scale(0.96); }
.wild-goodnight { flex: none; width: 100%; }
.wild-again {
    min-height: 40px; padding: 6px 18px; border: 1px solid var(--border-strong); border-radius: 999px;
    background: var(--surface-2); font-family: var(--font-bold); font-size: 15px;
}

/* ── WILD-04: the tray, the basket, a picked friend ── */
.wild-tray {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 6500;
    display: flex; gap: 8px; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 8px max(12px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: var(--learn-hud-bg); box-shadow: var(--shadow-lg);
    scrollbar-width: none;
}
.wild-tray::-webkit-scrollbar { display: none; }
.wild-tray:empty { display: none; }
.wild-item {
    position: relative; flex: none; width: 60px; height: 60px; border: 0; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); box-shadow: var(--shadow-sm);
    /* CAMPS-DRAG: iOS cancelled drags that started a little sideways (pan-x let it
       take the finger for a scroll). Now the page never takes it: js/wild.js
       scrolls the tray by hand on a sideways swipe; anything else drags out. */
    touch-action: none; -webkit-touch-callout: none;
}
.wild-item:active { transform: scale(0.94); }
.wild-item-care { background: var(--surface-2); }
.wild-item-img { width: 44px; height: 44px; object-fit: contain; display: block; pointer-events: none; }
.wild-item-n {
    position: absolute; right: -4px; top: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    background: var(--inverse-surface); color: var(--on-inverse); font-family: var(--font-heavy); font-size: 13px;
}
.wild-camp .wild-card { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 84px); }
.wild-card.is-corner { left: auto; right: max(12px, env(safe-area-inset-right)); transform: none; width: auto; }
.wild-goodnight-pill {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 16px 6px 10px;
    border: 0; border-radius: 999px; background: var(--primary); color: var(--on-primary);
    font-family: var(--font-heavy); font-size: 17px; box-shadow: var(--shadow-lg);
}
.wild-play .wild-goodnight-pill { color: var(--on-primary); }
.wild-goodnight-pill .wild-moon-svg { width: 24px; height: 24px; }
.wild-basket {
    position: absolute; z-index: 6400; width: 64px; height: 56px; padding: 0; border: 0; background: transparent;
    transform: translate(-50%, -100%); animation: wild-basket-in 0.6s ease-out, wild-basket-bob 2.4s ease-in-out 0.6s infinite;
    filter: drop-shadow(0 6px 4px var(--learn-shadow));
}
.wild-basket[hidden] { display: none; }
.wild-basket-img { display: block; width: 64px; height: 56px; }
.wild-camp .lp-agent.is-picked .lp-shadow { opacity: 1 !important; transform: translateX(-50%) scale(1.7) !important; background: radial-gradient(closest-side, var(--wild-target), transparent); }
.wild-coins.is-bump { animation: wild-bump 0.4s ease-out; }

/* ── WILD-05: the stall, sheets, the shop, the jars, the history, moving ── */
.wild-stall {
    position: absolute; z-index: 6400; left: max(10px, env(safe-area-inset-left)); bottom: calc(max(10px, env(safe-area-inset-bottom)) + 84px);
    width: 66px; height: 62px; padding: 0; border: 0; background: transparent; filter: drop-shadow(0 6px 4px var(--learn-shadow));
}
.wild-stall-img { display: block; width: 66px; height: 62px; object-fit: contain; }
.wild-st-post { fill: var(--wild-basket-dark); }
.wild-st-awn-a { fill: var(--wild-awning); }
.wild-st-awn-b { fill: var(--wild-awning-stripe); }
.wild-st-top { fill: var(--wild-basket-dark); }
.wild-st-box { fill: var(--wild-basket); }

.wild-sheet-wrap { position: absolute; inset: 0; z-index: 8000; }
.wild-sheet-wrap[hidden] { display: none; }
.wild-sheet-scrim { position: absolute; inset: 0; background: var(--overlay-scrim); }
.wild-sheet {
    position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
    width: min(560px, 100%); max-height: 88%; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 16px 16px max(18px, env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface); color: var(--text-primary);
    box-shadow: var(--shadow-lg); animation: wild-sheet-rise 0.25s ease-out;   /* BUG-05: keeps its translateX(-50%) */
}
.wild-sheet-x { position: absolute; right: 12px; top: 10px; width: 40px; height: 40px; font-size: 16px; }
.wild-sheet-title { display: block; font-family: var(--font-heavy); font-size: 21px; margin: 4px 48px 12px 2px; }
.wild-sheet-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.wild-row { display: flex; gap: 10px; width: 100%; justify-content: center; }
.wild-row .wild-name-btn { flex: 1; }

.wild-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.wild-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
    border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2);
    font-family: var(--font-bold); font-size: 14px;
}
.wild-tab.is-on { border-color: var(--primary); background: var(--primary-soft); }
.wild-tab-img { width: 34px; height: 34px; object-fit: contain; display: block; }
.wild-shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.wild-shop-item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px 8px;
    border: 0; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow-sm);
}
.wild-shop-item.is-out { filter: grayscale(1); opacity: 0.55; }
.wild-shop-img { width: 58px; height: 58px; object-fit: contain; display: block; }
.wild-shop-name { font-family: var(--font-bold); font-size: 14px; text-align: center; line-height: 1.15; }
.wild-paw { position: absolute; right: 6px; top: 4px; font-size: 16px; }
.wild-price { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-heavy); font-size: 16px; }
.wild-price-coin { width: 20px; height: 20px; object-fit: contain; display: block; }

.wild-buy { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 8px; text-align: center; }
.wild-buy-img { width: 110px; height: 110px; object-fit: contain; display: block; }
.wild-buy-name { font-family: var(--font-heavy); font-size: 22px; }
.wild-buy-price { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; }
.wild-buy-price .wild-price-coin { width: 26px; height: 26px; }
.wild-buy-math { font-size: 20px; margin: 4px 0; }
.wild-buy-save { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0; }
.wild-packs { display: flex; gap: 8px; }
.wild-pack { min-width: 52px; min-height: 40px; border: 2px solid var(--border); border-radius: 999px; background: var(--surface-2); font-family: var(--font-heavy); font-size: 17px; }
.wild-pack.is-on { border-color: var(--primary); }

.wild-jars { display: flex; align-items: flex-end; justify-content: center; gap: 10px; }
.wild-jar-col { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--font-bold); }
.wild-jar { width: 104px; height: 128px; display: block; }
.wild-jar.is-small { width: 30px; height: 37px; }
.wild-jar-glass { fill: var(--wild-glass); stroke: var(--wild-glass-edge); stroke-width: 3; }
.wild-jar-lid { fill: var(--wild-basket-dark); }
.wild-jar-coin { fill: var(--wild-star); stroke: var(--wild-star-edge); stroke-width: 1.5; }
.wild-jar-shine { stroke: var(--wild-soap-shine); }
.wild-jar-n { font-family: var(--font-heavy); font-size: 26px; line-height: 1; }
.wild-jar-moves { display: flex; flex-direction: column; gap: 8px; padding-bottom: 40px; }
.wild-move { min-width: 64px; min-height: 42px; border: 0; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-family: var(--font-heavy); font-size: 16px; }
.wild-play .wild-move { color: var(--on-primary); }
.wild-move:disabled { background: var(--surface-2); color: var(--text-secondary); }
.wild-goal { position: absolute; right: -14px; top: -10px; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-md); }
.wild-goal-ring { position: absolute; inset: 0; width: 52px; height: 52px; transform: rotate(-90deg); }
.wild-ring-bg { fill: none; stroke: var(--border); stroke-width: 4; }
.wild-ring-fg { fill: none; stroke: var(--wild-star); stroke-width: 4; stroke-linecap: round; }
.wild-goal-img { position: absolute; left: 10px; top: 10px; width: 32px; height: 32px; object-fit: contain; }
.wild-goal-did { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 12px 0 0; font-size: 18px; }
.wild-goal-did .wild-name-btn { flex: none; padding: 8px 22px; }
.wild-goal-row { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 14px 0 6px; font-size: 16px; }
.wild-bank-line { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 6px 0; font-size: 15px; color: var(--text-secondary); }
.wild-bank-img { width: 30px; height: 30px; object-fit: contain; }
.wild-link { display: block; margin: 8px auto 0; border: 0; background: transparent; color: var(--primary-ink); font-family: var(--font-bold); font-size: 15px; text-decoration: underline; }

.wild-hist { list-style: none; margin: 0; padding: 0; }
.wild-hist-row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border); }
.wild-hist-img { width: 30px; height: 30px; object-fit: contain; display: block; flex: none; }
.wild-hist-note { flex: 1; min-width: 0; font-size: 15px; }
.wild-hist-n { font-family: var(--font-heavy); font-size: 17px; }
.wild-hist-n.is-plus { color: var(--success); }
.wild-hist-jar { font-size: 12px; color: var(--text-secondary); width: 40px; text-align: right; }

.wild-movebar {
    position: absolute; z-index: 7100; left: 50%; bottom: calc(max(10px, env(safe-area-inset-bottom)) + 84px); transform: translateX(-50%);
    display: flex; gap: 10px; align-items: center;
}
.wild-movebar .wild-name-btn { min-width: 72px; flex: none; }
/* CAMPS-DRAG: a naming card (a new friend can come the moment a pool goes in) covers the bar till it's answered. */
.wild-camp:has(> .wild-card:not([hidden]):not(.is-corner)) > .wild-movebar { display: none; }
.wild-movebar.is-placing .wild-name-btn { animation: wild-bump 0.8s ease-in-out 2; }   /* CAMPS-DRAG: keep it here? */
.wild-item.is-new { box-shadow: 0 0 0 3px var(--wild-target), var(--shadow-md); animation: wild-bump 0.8s ease-in-out 3; }

/* ── WILD-06: the journal, visitors ── */
.wild-book-img { width: 28px; height: 28px; object-fit: contain; display: block; }
/* (the journal itself: CAMPS-07, the field journal section at the foot) */
.wild-world.is-gold, .wild-tile.is-gold { box-shadow: 0 0 0 4px var(--wild-star), var(--shadow-md); }

/* ── WILD-07/08: the mini-games (js/wild-games.js) ── */
.wg { position: absolute; inset: 0; z-index: 8500; overflow: hidden; background-color: var(--bg); background-size: cover; background-position: 50% 60%; touch-action: none; }
.wg[hidden] { display: none !important; }
.wg.is-menu, .wg.is-start, .wg.is-end { background: var(--overlay-scrim); display: flex; align-items: flex-end; justify-content: center; }
.wg-card-sheet {
    position: relative; width: min(520px, 100%); max-height: 92%; overflow-y: auto; padding: 18px 16px max(18px, env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: wild-rise 0.25s ease-out;
}
.wg-x { position: absolute; right: 12px; top: max(10px, env(safe-area-inset-top)); z-index: 5; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--learn-hud-bg); color: var(--learn-hud-ink); box-shadow: var(--shadow-sm); font-size: 16px; }
.wg-card-sheet .wg-x { top: 10px; }
.wg-title { font-family: var(--font-heavy); font-size: 22px; }
.wg-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; width: 100%; }
.wg-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 0; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow-sm); font-family: var(--font-bold); font-size: 15px; }
.wg-pick-img { width: 60px; height: 60px; object-fit: contain; display: block; }
.wg-pick-ani { font-size: 56px; line-height: 1; }
.wg-big-img { width: 110px; height: 110px; object-fit: contain; display: block; }
.wg-big-ani { font-size: 100px; line-height: 1; }
.wg-howto { font-size: 19px; margin: 0; }
.wg-pays { display: flex; align-items: center; gap: 6px; font-family: var(--font-heavy); font-size: 18px; margin: 0; }
.wg-coin { width: 22px; height: 22px; object-fit: contain; display: inline-block; vertical-align: middle; }
.wg-coin.is-big { width: 36px; height: 36px; }
.wg-go { width: 100%; }
.wg-won { display: flex; align-items: center; gap: 8px; font-family: var(--font-heavy); font-size: 34px; margin: 0; }
.wg-won.is-fun { font-size: 20px; }
.wg-note { margin: 0; font-size: 16px; color: var(--text-secondary); }
.wg-timer { position: absolute; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); top: calc(max(10px, env(safe-area-inset-top)) + 52px); height: 10px; border-radius: 999px; background: var(--learn-hud-bg); overflow: hidden; z-index: 20; box-shadow: var(--shadow-sm); }
.wg-timer span { display: block; height: 100%; background: var(--wild-star); transform-origin: 0 50%; }   /* FUN-01: drawn from game time every frame (no transition) */
.wg-line { position: absolute; left: 50%; top: 18%; z-index: 6; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: var(--inverse-surface); color: var(--on-inverse); font-family: var(--font-bold); font-size: 19px; opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap; }
.wg-line.is-on { opacity: 1; }
.wg-scene { position: absolute; inset: 0; }
.wg-count { position: absolute; z-index: 4; font-family: var(--font-heavy); font-size: 22px; color: var(--learn-hud-ink); background: var(--learn-hud-bg); border-radius: 999px; padding: 4px 12px; }
/* pick — FUN-03: bushes on top, things fall to the ground, the basket you slide (placed by transform) */
.wg-pk-bushes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wg-pk-bush { position: absolute; display: block; }
.wg-pk-bush-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; transform-origin: 50% 100%; }
.wg-pk-item { z-index: 3; }
.wg-pk-item.is-past, .wg-pk-item.is-spill { z-index: 5; }
.wg-pk-img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.wg-pk-basket { z-index: 4; }
.wg-pk-tilt { position: absolute; inset: 0; transform-origin: 50% 90%; }
.wg-pk-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.wg-pk-pile { position: absolute; left: 4%; right: 4%; top: 0; height: 44%; overflow: hidden; }   /* its bottom is the rim line: the pile sits behind the front */
.wg-pk-in { position: absolute; width: 38%; aspect-ratio: 1; animation: wg-pk-in 0.16s ease-out; }
.wg-pk-in-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.wg-pk-in.is-s0 { left: 0; bottom: -42%; }   .wg-pk-in.is-s1 { left: 21%; bottom: -46%; }
.wg-pk-in.is-s2 { left: 41%; bottom: -42%; } .wg-pk-in.is-s3 { left: 62%; bottom: -46%; }
.wg-pk-in.is-s4 { left: 10%; bottom: -22%; } .wg-pk-in.is-s5 { left: 31%; bottom: -18%; }
.wg-pk-in.is-s6 { left: 52%; bottom: -22%; } .wg-pk-in.is-s7 { left: 31%; bottom: 2%; }
@keyframes wg-pk-in { from { translate: 0 -70%; } to { translate: 0 0; } }
.wg-stage.is-over .wg-pk-item { opacity: 0 !important; transition: opacity 0.4s; }   /* time up: the things in the air fade */
.wg-pk .wg-line { display: inline-flex; align-items: center; gap: 8px; }
.wg-pk-line-pic { width: 30px; height: 30px; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .wg-pk-in { animation: none; } .wg-stage.is-over .wg-pk-item { transition: none; } }
.wg-leaf { position: absolute; z-index: 4000; width: 18px; height: 12px; margin: -6px 0 0 -9px; border-radius: 0 100% 0 100%; background: var(--learn-leaf, var(--success)); pointer-events: none; }
/* fire: see FUN-04 below */
/* shopping list (market, FUN-05) */
.wg-sl-stand { position: absolute; z-index: 2; overflow: hidden; pointer-events: none; }
.wg-sl-stand-img { position: absolute; display: block; max-width: none; }
.wg-sl-foods { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.wg-sl-food { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--radius-lg); background: var(--wild-paper); box-shadow: var(--shadow-md); pointer-events: none; }
.wg-sl-food[hidden] { display: none; }
.wg-sl-food-img { width: 78%; height: 78%; object-fit: contain; display: block; }
.wg-sl-foods.is-shut .wg-sl-food { box-shadow: none; }
.wg-sl-cloth { position: absolute; z-index: 4; pointer-events: none; will-change: transform; }
.wg-sl-cloth i { position: absolute; inset: 0; border-radius: var(--radius-lg); background: repeating-linear-gradient(90deg, var(--wild-awning) 0 22px, var(--wild-awning-stripe) 22px 44px); box-shadow: var(--shadow-md); }
.wg-sl-cloth i::after { content: ''; position: absolute; left: 0; right: 0; bottom: -10px; height: 16px; border-radius: 0 0 var(--radius-lg) var(--radius-lg); background: inherit; filter: brightness(0.86); }
.wg-sl-cust { z-index: 5; }
.wg-sl-ani { display: block; line-height: 1; }
.wg-sl-ani .lp-animal { display: block; }
.wg-sl-bag { z-index: 5; }
.wg-sl-bag-box { position: absolute; inset: 0; display: block; transform-origin: 50% 90%; }
.wg-sl-bag-back, .wg-sl-bag-front { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.wg-sl-bag-front { clip-path: inset(46% 0 0 0); z-index: 2; }
.wg-sl-bag-in { position: absolute; left: 14%; right: 14%; top: 22%; height: 34%; z-index: 1; }
.wg-sl-bag-f { position: absolute; width: 44%; height: auto; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 1px 1px var(--learn-shadow)); }
.wg-sl-bag-f.is-f0 { left: 0; top: 18%; transform: rotate(-12deg); }
.wg-sl-bag-f.is-f1 { right: 0; top: 16%; transform: rotate(10deg); }
.wg-sl-bag-f.is-f2 { left: 28%; top: 0; }
.wg-sl-bag-f.is-f3 { left: 8%; top: -18%; transform: rotate(-6deg); }
.wg-sl-bag-f.is-f4 { right: 8%; top: -20%; transform: rotate(8deg); }
.wg-sl-list { z-index: 6; transform-origin: 50% 50%; }
.wg-sl-list-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.wg-sl-list-in { position: absolute; inset: 0; }
.wg-sl-spot { position: absolute; width: 27%; height: 18%; object-fit: contain; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 1px var(--learn-shadow)); }
.wg-sl-spot.is-s0 { left: 28.6%; top: 28.8%; } .wg-sl-spot.is-s1 { left: 28.0%; top: 42.2%; }
.wg-sl-spot.is-s2 { left: 26.6%; top: 55.7%; } .wg-sl-spot.is-s3 { left: 25.5%; top: 69.3%; }
.wg-sl-spot.is-s4 { left: 24.1%; top: 82.8%; }
.wg-sl-fly { z-index: 7; }
.wg-sl-fly-img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.wg-sl .wg-line { display: inline-flex; align-items: center; gap: 8px; top: 15%; }
.wg-sl-line-pic { width: 30px; height: 30px; object-fit: contain; display: block; }
.wg-hud-glyph.is-list::before { left: 5px; top: 1px; width: 20px; height: 27px; border-radius: 3px; background: var(--wild-paper); box-shadow: 0 0 0 2px var(--wild-basket-dark); transform: none; }
.wg-hud-glyph.is-list::after { left: 9px; top: 7px; width: 6px; height: 4px; border-radius: 1px; background: var(--wild-basket); box-shadow: 0 6px 0 var(--wild-basket), 0 12px 0 var(--wild-basket); transform: none; }
/* fishing — FUN-06: the pond (big, the art keeps its shape; a phone may draw it up to 1.6× taller), the shadows
   swimming in the water (clipped to the water's ellipse), the line from the rod's tip to the bobber, the bobber
   (it dips and wobbles while a swimmer's centre is in the catch zone), the fish pile and trash heap (bottom left),
   the rod (bottom right; the whole lower-right quarter below 70 % is its hit area). Placed by FISH.play in px. */
.wg-fi { --wg-fi-shadow: 0.5; }
.wg-fi-pond { position: absolute; z-index: 1; pointer-events: none; }
.wg-fi-pond-img { display: block; width: 100%; height: 100%; object-fit: fill; }
.wg-fi-water { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wg-fi-sw-img { display: block; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) blur(1px); opacity: var(--wg-fi-shadow); }
.wg-fi-line { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.wg-fi-line-p { fill: none; stroke: var(--wild-paper-edge); stroke-width: 2; stroke-linecap: round; }
.wg-fi-bob { z-index: 5; }
.wg-fi-float { position: absolute; inset: 0; display: block; clip-path: inset(0 0 30% 0); }
.wg-fi-float svg { display: block; width: 100%; height: 100%; transform-origin: 50% 70%; }
.wg-fi-float-top { fill: var(--wild-awning); } .wg-fi-float-bot { fill: var(--wild-paper); } .wg-fi-float-stem { fill: var(--wild-ink); }
.wg-fi-bob.is-dip .wg-fi-float { transform: translateY(25%); clip-path: inset(0 0 55% 0); }
.wg-fi-bob.is-dip .wg-fi-float svg { animation: wg-fi-wob 0.16s ease-in-out infinite alternate; }
.wg-fi-ring { position: absolute; left: 50%; top: 70%; width: 170%; height: 54%; border: 2px solid var(--wild-paper); border-radius: 50%; opacity: 0.55; transform: translate(-50%, -50%) scale(0.7); pointer-events: none; }
.wg-fi-ring.is-2 { opacity: 0; }
.wg-fi-bob.is-dip .wg-fi-ring { border-width: 3px; animation: wg-fi-ring 0.6s ease-out infinite; }
.wg-fi-bob.is-dip .wg-fi-ring.is-2 { animation-delay: 0.3s; }
.wg-fi-splash { position: absolute; left: 50%; top: 70%; width: 220%; height: 130%; opacity: 0; transform: translate(-50%, -50%); pointer-events: none; }
.wg-fi-splash i { position: absolute; width: 22%; height: 22%; border-radius: 50%; background: var(--wild-glass); box-shadow: 0 0 0 1.5px var(--wild-glass-edge); }
.wg-fi-splash i:nth-child(1) { left: 6%; top: 30%; } .wg-fi-splash i:nth-child(2) { left: 30%; top: 0; }
.wg-fi-splash i:nth-child(3) { left: 52%; top: 2%; } .wg-fi-splash i:nth-child(4) { left: 74%; top: 30%; }
.wg-fi.is-rm .wg-fi-bob.is-dip .wg-fi-float svg { animation: none; transform: rotate(10deg); }
.wg-fi.is-rm .wg-fi-bob.is-dip .wg-fi-ring { animation: none; opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
.wg-fi.is-rm .wg-fi-bob.is-dip .wg-fi-ring.is-2 { opacity: 0; }
.wg-fi-pile, .wg-fi-junk { position: absolute; z-index: 6; pointer-events: none; }
.wg-fi-pile::before, .wg-fi-junk::before { content: ''; position: absolute; left: 4%; right: 4%; bottom: 0; height: 22%; border-radius: 50%; background: radial-gradient(closest-side, var(--learn-shadow), transparent); }
.wg-fi-in { position: absolute; transform: translate(-50%, -50%) rotate(var(--wg-fi-r, 0deg)); }
.wg-fi-in-img { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 1px var(--learn-shadow)); }
.wg-fi-pile-n { position: absolute; z-index: 2; left: 0; top: 0; margin: -18px 0 0 -18px; min-width: 36px; height: 36px; padding: 0 9px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--learn-hud-bg); color: var(--learn-hud-ink); box-shadow: var(--shadow-sm); font-family: var(--font-heavy); font-size: 20px; font-variant-numeric: tabular-nums; }
.wg-fi-pile-n[hidden] { display: none; }
.wg-fi-rod { position: absolute; z-index: 7; pointer-events: none; }
.wg-fi-rod-img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scaleX(-1); clip-path: polygon(0 0, 100% 0, 100% 6%, 12% 100%, 0 100%); }
.wg-fi-fly { z-index: 8; }
.wg-fi-fly-img { display: block; width: 100%; height: auto; }
.wg-fi .wg-line { display: inline-flex; align-items: center; gap: 8px; top: 15%; }
.wg-fi-line-pic { width: 30px; height: 30px; object-fit: contain; display: block; }
@keyframes wg-fi-wob { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes wg-fi-ring { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
/* fire — FUN-04: always night. The heat meter (left, y 22–70 %; the zone 3–8 is shaded), the wood pile (bottom
   right, 20 % wide, ≥ 80 px), the flag (right, y 25–55 %, behind the animals), the cloud (top, y 6–22 %), the rain,
   the fire's warm glow, and the animals (drawn inside the scene's world; cool at the edge, lit by the fire). */
.wg-fire .wg-heat { position: absolute; z-index: 6; left: max(10px, env(safe-area-inset-left)); top: 22%; height: 48%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 5px; border-radius: 999px; background: var(--learn-hud-bg); box-shadow: var(--shadow-md); transition: box-shadow 0.2s; }
.wg-fire .wg-heat.is-out { box-shadow: var(--shadow-md), 0 0 0 3px var(--danger); }
.wg-heat svg { width: 24px; height: 24px; display: block; }
.wg-heat-hot svg { fill: var(--danger); }
.wg-heat-cold svg { fill: none; stroke: var(--learn-k-ice); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wg-heat-bar { position: relative; flex: 1 1 auto; width: 22px; min-height: 0; border-radius: 999px; overflow: hidden;
    background: linear-gradient(to top, var(--learn-k-ice), var(--surface-2) 32%, var(--surface-2) 78%, var(--learn-fire-glow)); }
.wg-heat-zone { position: absolute; left: 0; right: 0; background: var(--learn-k-yes); opacity: 0.85; }
.wg-heat-mark { position: absolute; left: -3px; right: -3px; height: 8px; margin-bottom: -4px; border-radius: 999px; background: var(--learn-hud-ink); box-shadow: 0 0 0 2px var(--learn-hud-bg); bottom: 0; will-change: transform; }   /* moved by transform */
.wg-pile { position: absolute; z-index: 6; display: block; right: max(12px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); width: clamp(80px, 20%, 170px); aspect-ratio: 6 / 5; border: 0; border-radius: var(--radius-lg); background: var(--learn-hud-bg); box-shadow: var(--shadow-md); }
.wg-pile-img { position: absolute; left: 10%; bottom: 10%; width: 78%; height: auto; pointer-events: none; }
.wg-pile-img.is-2 { left: 14%; bottom: 33%; }
.wg-pile-img.is-3 { left: 18%; bottom: 55%; width: 66%; }
.wg-fw-log { width: clamp(46px, 11%, 84px); z-index: 7; }
.wg-fw-log.is-held { z-index: 8; }
.wg-fw-log-img { width: 100%; height: auto; display: block; }
.wg-fw-glow { position: absolute; z-index: 8; left: 0; top: 0; width: 200px; height: 120px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%) scale(1); transition: transform 0.5s ease-out;
    background: radial-gradient(closest-side, var(--learn-fire-glow), var(--learn-fire-clear)); opacity: 0.7; }
.wg-fw-flag { position: absolute; z-index: 9; pointer-events: none; transform: scaleX(-1); }   /* the art blows right: mirrored so the cloth blows over the camp */
.wg-fw-flag-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; filter: brightness(0.72) saturate(0.8); }
.wg-fw-flag-img.is-on { opacity: 1; }
.wg-fw-cloud { position: absolute; z-index: 5; left: 0; top: 6%; height: 16%; width: auto; max-width: 60%; object-fit: contain; pointer-events: none; will-change: transform; }
.wg-fw-cloud[hidden] { display: none; }
.wg-fw-rain { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 0.4s; }
/* one short layer of slanted streaks moved by transform (cheap: no mask, no skew, no second layer) */
.wg-fw-rain i { position: absolute; left: -10%; right: -10%; top: -64px; height: calc(100% + 64px); will-change: transform;
    background: repeating-linear-gradient(100deg, transparent 0 21px, var(--learn-k-ice) 21px 23px, transparent 23px 46px);
    animation: wg-fw-rain 0.45s linear infinite; }
.wg-fw-rain i.is-2 { display: none; }
.wg-fw-rain.is-light { opacity: 0.35; }
.wg-fw-rain.is-heavy { opacity: 0.8; }
@keyframes wg-fw-rain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-11px, 64px, 0); } }
.wg-fw-ani .wg-fw-body { position: absolute; left: 0; bottom: 0; transform: translateX(-50%); pointer-events: none; }
.wg-fw-ani .lp-face { transition: filter 0.6s; }
.wg-fw-ani.is-cool .lp-face { filter: brightness(0.62) saturate(0.5); }
.wg-fw-ani.is-cool .lp-shadow { opacity: 0.5; }
.wg-fw-z { position: absolute; right: 12%; top: 20%; display: none; font-style: normal; font-family: var(--font-heavy); font-size: 18px; color: var(--wild-star); animation: wg-fw-z 2.4s ease-in-out infinite; }
.wg-fw-ani.is-sleeping .wg-fw-z { display: block; }
@keyframes wg-fw-z { 0%, 100% { translate: 0 0; opacity: 0.4; } 50% { translate: 4px -10px; opacity: 1; } }
.wg-fw-steam { position: absolute; z-index: 2400; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: radial-gradient(closest-side, var(--surface), transparent); pointer-events: none; animation: wg-fw-steam 0.7s ease-out forwards; }
@keyframes wg-fw-steam { from { opacity: 0.9; transform: scale(0.6); } to { opacity: 0; transform: translateY(-40px) scale(1.6); } }
.wg-fw-leaves { position: absolute; inset: 0; z-index: 2600; pointer-events: none; display: none; }
.wg-fw-leaves i { position: absolute; right: -20px; width: 14px; height: 9px; border-radius: 0 100% 0 100%; background: var(--learn-leaf, var(--success)); }
.wg-fw-leaves i:nth-child(1) { top: 46%; animation: wg-fw-leaf 1.4s linear infinite; }
.wg-fw-leaves i:nth-child(2) { top: 58%; animation: wg-fw-leaf 1.1s linear 0.3s infinite; }
.wg-fw-leaves i:nth-child(3) { top: 66%; animation: wg-fw-leaf 1.3s linear 0.6s infinite; }
.wg-fw-leaves i:nth-child(4) { top: 74%; animation: wg-fw-leaf 1.0s linear 0.2s infinite; }
.wg-fw-leaves i:nth-child(5) { top: 52%; animation: wg-fw-leaf 1.2s linear 0.8s infinite; }
.wg-fw-leaves i:nth-child(6) { top: 82%; animation: wg-fw-leaf 1.5s linear 0.5s infinite; }
@keyframes wg-fw-leaf { from { transform: translateX(0) rotate(0deg); } to { transform: translateX(calc(-1 * var(--wg-w, 400px) - 40px)) translateY(30px) rotate(-540deg); } }
.wg-fire.is-gust .wg-fw-leaves { display: block; }
.wg-fire .lp-fire .lp-fimg { transform-origin: 50% 100%; transition: transform 0.35s ease-out; }
.wg-fire.is-gust .lp-fire .lp-fimg { transform: translateX(-50%) skewX(14deg); }   /* the wind blows right → left: the flames lean with it */
.wg-hud-glyph.is-moon::before { left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--wild-star); box-shadow: none; transform: none; }
.wg-hud-glyph.is-moon::after { left: 11px; top: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--learn-hud-bg); box-shadow: none; transform: none; }
.wg-fire .wg-line { display: inline-flex; align-items: center; gap: 8px; }
.wg-fw-line-pic { width: 34px; height: 34px; object-fit: contain; display: block; }
.wg-fw-ico svg { width: 26px; height: 26px; display: block; }
.wg-fw-ico.is-hot svg { fill: var(--danger); }
.wg-fw-ico.is-cold svg { fill: none; stroke: var(--learn-k-ice); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wg-fire::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.4s;
    background: radial-gradient(ellipse at 50% 60%, transparent 40%, var(--learn-fire-glow) 130%); }
.wg-fire.is-hot::after { opacity: 0.9; }
.wg-fire.is-cold::after { opacity: 0.7; background: radial-gradient(ellipse at 50% 60%, transparent 40%, var(--learn-k-ice) 130%); }
.wg-fire .lp-stars i { animation: none; }   /* FUN-04: the 40 twinkling stars cost ~10 fps on a slow phone in a timing game; they stay, still */
.wg-fire .wg-stage.is-paused .wg-fw-rain i, .wg-fire .wg-stage.is-paused .wg-fw-z, .wg-fire .wg-stage.is-paused .wg-fw-leaves i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
    .wg-fw-rain i, .wg-fw-z { animation: none; }
    .wg-fire.is-gust .wg-fw-leaves { display: none; }
    .wg-fw-steam { display: none; }
    .wg-heat-mark, .wg-fire::after, .wg-fw-glow, .wg-fw-ani .lp-face, .wg-fire .lp-fire .lp-fimg { transition: none; }
}
.wg-fire .wg-line { top: 27%; }
/* memory — FUN-02: the game lays the board out (memoryGrid) and sets the board's font-size to the card (px);
   each card is 1em square, placed once with translate3d. Flip 220 ms (MEMORY_TUNE.FLIP). Animals and foods on a light card. */
.wg-mem { position: absolute; inset: 0; font-size: 80px; line-height: 1; }
.wg-mem .wg-card { position: absolute; left: 0; top: 0; width: 1em; height: 1em; font: inherit; border: 0; padding: 0; background: transparent; perspective: 600px; touch-action: none; -webkit-tap-highlight-color: transparent; }
.wg-card-in { position: absolute; inset: 0; display: block; }
.wg-card-back, .wg-card-face { position: absolute; inset: 0; border-radius: 0.14em; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 0.22s ease-out, filter 0.3s; box-shadow: var(--shadow-sm); }
.wg-card-back { background: var(--primary); background-image: radial-gradient(circle at 50% 50%, var(--wild-star) 0 18%, transparent 19%); }
.wg-card-face { background: var(--wild-paper); box-shadow: inset 0 0 0 2px var(--wild-paper-edge), var(--shadow-sm); transform: rotateY(180deg); overflow: hidden; }
.wg-card-face .lp-animal { font-size: 0.72em; }
.wg-card-face .wg-card-food { width: 70%; height: 70%; object-fit: contain; display: block; }
.wg-card.is-up .wg-card-back { transform: rotateY(-180deg); }
.wg-card.is-up .wg-card-face { transform: rotateY(0); }
.wg-card.is-match .wg-card-face { box-shadow: inset 0 0 0 2px var(--wild-paper-edge), 0 0 0 3px var(--wild-star); }
.wg-card.is-done .wg-card-face { filter: saturate(0.75) brightness(0.92); }
.wg-card:focus-visible { outline: 3px solid var(--wild-star); outline-offset: 2px; border-radius: 12px; }
.wg-levels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.wg-level {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding: 12px 4px 10px;
    border: 0; border-radius: var(--radius-lg); background: var(--surface-2); box-shadow: var(--shadow-sm); color: inherit;
}
.wg-level.is-last { box-shadow: 0 0 0 3px var(--wild-star), var(--shadow-sm); }
.wg-level:active { transform: scale(0.96); }
.wg-level-grid { display: grid; grid-template-columns: repeat(4, 9px); gap: 3px; }
.wg-level-grid i { width: 9px; height: 9px; border-radius: 2px; background: var(--primary); }
.wg-level-grid.is-big { grid-template-columns: repeat(4, 7px); gap: 2px; }   /* FUN-02: 20 and 28 */
.wg-level-grid.is-big i { width: 7px; height: 7px; }
.wg-level-n { font-family: var(--font-heavy); font-size: 24px; line-height: 1; }
.wg-level-pay { display: flex; align-items: center; gap: 3px; font-family: var(--font-bold); font-size: 15px; }
@media (max-width: 340px) { .wg-levels { grid-template-columns: repeat(2, 1fr); } }
@keyframes wg-walkin { 0% { transform: translateX(80%); opacity: 0; } 100% { transform: translateX(-50%); opacity: 1; } }
@keyframes wg-walkout { 0% { transform: translateX(-50%); opacity: 1; } 100% { transform: translateX(-180%); opacity: 0; } }
@keyframes wg-no { 0%, 100% { margin-left: 0; } 25% { margin-left: -10px; } 75% { margin-left: 10px; } }
@keyframes wg-bob { 0% { transform: translateY(0); } 100% { transform: translateY(8px); } }
@keyframes wg-up { 0% { transform: translate(-50%, 40px) scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: translate(-50%, -20px) scale(1); opacity: 0; } }
@keyframes wg-swim1 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(20px); } }
@keyframes wg-swim2 { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-24px); } }

/* ═══ FUN-01: THE STAGE (js/wild-games.js wgStage) — the feel standard ═══
   One play area per round: no zoom, no selection, no long-press menu, no
   scroll. Movers are placed once at 0,0 and moved only by transform. The HUD
   (counters, top left) and the timer bar (under the ✕) keep the top 12 %. */
/* FUN-06e (iOS): THE ONE CAMPS LOCK (js/wild.js campsLock()). While the Camps page, a camp, a game or the wall's
   Camps shows, the whole page is select-none — only the ROOT stops WebKit's long-press / double-tap text selection
   (the Copy · Look Up menu, the loupe). Pictures give no "Save image" callout or drag, and take no touch of their own
   (the button, body or prop around them gets it; the camp's props and fire were already hit by their shapes). A
   text field, if one ever shows, stays typeable. */
html.camps-lock, html.camps-lock body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.camps-lock img { -webkit-user-drag: none; -webkit-touch-callout: none; pointer-events: none; }
html.camps-lock :is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }
.wg-stage { position: absolute; inset: 0; z-index: 1; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.wg-world { position: absolute; inset: 0; }
.wg-mover { position: absolute; left: 0; top: 0; will-change: transform; pointer-events: none; }
.wg-mover[hidden] { display: none; }
.wg-safe-probe { position: absolute; inset: 0; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); visibility: hidden; pointer-events: none; }
.wg-hud { position: absolute; z-index: 20; left: max(12px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); display: flex; gap: 8px; pointer-events: none; }
.wg-hud-n { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--learn-hud-bg); color: var(--learn-hud-ink); box-shadow: var(--shadow-sm); font-family: var(--font-heavy); font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; }
.wg-hud-n b { min-width: 1.2em; text-align: center; }
.wg-hud-pic { width: 32px; height: 32px; object-fit: contain; display: block; }
.wg-hud-ani { display: block; width: 34px; height: 34px; }
.wg-hud-ani .lp-animal { width: 34px; height: 34px; font-size: 28px; }
.wg-hud-glyph { position: relative; display: block; width: 30px; height: 30px; }
.wg-hud-glyph::before, .wg-hud-glyph::after { content: ''; position: absolute; width: 16px; height: 22px; border-radius: 4px; background: var(--primary); box-shadow: 0 0 0 2px var(--learn-hud-bg); }
.wg-hud-glyph::before { left: 3px; top: 2px; transform: rotate(-10deg); }
.wg-hud-glyph::after { left: 11px; top: 6px; transform: rotate(8deg); background: var(--wild-star); }
.wg-timer.is-last { animation: wg-last 0.5s ease-in-out infinite alternate; }
.wg-timer.is-last span { background: var(--danger); }
@keyframes wg-last { 0% { transform: scaleY(1); } 100% { transform: scaleY(1.6); } }
.wg-say { position: absolute; z-index: 30; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 10px 30px; border-radius: 999px; background: var(--inverse-surface); color: var(--on-inverse); font-family: var(--font-heavy); font-size: 44px; line-height: 1.1; white-space: nowrap; opacity: 0; pointer-events: none; }
.wg-say.is-on { opacity: 1; }
.wg-say.is-go { animation: wg-go 0.4s ease-out forwards; }
@keyframes wg-go { 0% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1); opacity: 0; } }
.wg-pause { position: absolute; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: var(--overlay-scrim); color: var(--on-inverse); font-family: var(--font-heavy); font-size: 26px; text-align: center; }
.wg-pause[hidden] { display: none; }
.wg-pause b { padding: 8px 20px; border-radius: 999px; background: var(--inverse-surface); }
.wg-pause-btn { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-lg); }
.wg-pause-btn::after { content: ''; position: absolute; left: 38px; top: 26px; border-left: 34px solid var(--primary); border-top: 22px solid transparent; border-bottom: 22px solid transparent; }
.wg-debug { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }
.wg-stage .wg-line { z-index: 25; }
@media (prefers-reduced-motion: reduce) { .wg-say.is-go { animation: none; opacity: 0; } .wg-timer.is-last { animation: none; } }

/* FUN-01: Letters and Build a word — their icons are blank blocks and tiles; the app writes on them. */
.wild-card-lettered { position: relative; display: block; width: 72px; }
.wild-card-lettered .wild-card-img { width: 72px; height: auto; }
.wild-card-lettered i { position: absolute; transform: translate(-50%, -50%); font-style: normal; font-family: var(--font-heavy); color: var(--wild-ink); line-height: 1; pointer-events: none; }
.wild-card-lettered.is-letters i { font-size: 15px; }
.wild-card-lettered.is-letters i:nth-of-type(1) { left: 20.6%; top: 71%; }
.wild-card-lettered.is-letters i:nth-of-type(2) { left: 42.7%; top: 30.5%; }
.wild-card-lettered.is-letters i:nth-of-type(3) { left: 62.9%; top: 75%; }
.wild-card-lettered.is-spell i { font-size: 12px; top: 34%; }
.wild-card-lettered.is-spell i:nth-of-type(1) { left: 19.1%; }
.wild-card-lettered.is-spell i:nth-of-type(2) { left: 39.8%; }
.wild-card-lettered.is-spell i:nth-of-type(3) { left: 60.2%; }

/* ════════════════════════════════════════════════════════════
   CAMPS-03: THE CAMPS PAGE, THE CAMP AT THE OLD SIZE, THE PLAY BOARD
   ════════════════════════════════════════════════════════════ */
.camps-page { padding: 4px 0 24px; }
.camps-head { display: flex; justify-content: flex-end; padding: 0 16px 8px; }
.camps-closed { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 16px 10px; padding: 10px; border-radius: var(--radius-lg); background: var(--surface-2); font-family: var(--font-bold); }
.camps-closed .wild-moon-svg { width: 24px; height: 24px; }
.camps-page-body.is-closed { opacity: 0.6; pointer-events: none; }
.camps-worlds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 0 16px; }
@media (min-width: 700px) { .camps-worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1100px; margin: 0 auto; } }
@media (orientation: landscape) and (min-width: 900px) { .camps-worlds { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.wild-play.is-wall .camps-worlds { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 1180px; margin: 0 auto; padding: 4px 16px 20px; }
/* SAFARIPARK: 7+ worlds. The wall (1280 × 800) shows them all without a scroll: 4 across, 2 rows (room for 8). */
.wild-play.is-wall .camps-worlds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.camps-world {
    position: relative; display: flex; flex-direction: column; gap: 0; width: 100%; padding: 0; border: 0;
    border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); color: var(--text-primary);
    box-shadow: var(--shadow-md); text-align: left; font: inherit; cursor: pointer; transition: transform 0.15s;
}
.camps-world:active { transform: scale(0.98); }
.camps-world.is-gold { box-shadow: 0 0 0 4px var(--wild-star), var(--shadow-md); }
.camps-world-pic {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    background-color: var(--surface-2); background-size: cover; background-position: 50% 62%;
}
.camps-ani { position: absolute; display: block; transform: translate(-50%, -100%); pointer-events: none; }
.camps-ani .lp-animal { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; font-size: 100%; }
.camps-ani .lp-emo { font-size: 28px; }
.camps-ani:not(.is-friend) { opacity: 0.38; }
.camps-ani:not(.is-friend) .lp-animal { opacity: 1; }
.camps-tent, .camps-fire { position: absolute; display: block; transform: translate(-50%, -100%); pointer-events: none; }
.camps-tent { left: 14%; top: 54%; width: 19%; z-index: 30; }
.camps-fire { left: 50%; top: 74%; width: 8.5%; z-index: 60; }
.camps-prop-img { display: block; width: 100%; height: auto; }
.camps-world-text { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 10px 14px 12px; }
.camps-world-text b { font-family: var(--font-heavy); font-size: 18px; }
.camps-world-text span { font-family: var(--font-bold); font-size: 15px; color: var(--text-secondary); }
.camps-wait { position: relative; left: auto; top: auto; margin: 40px auto; }

/* The camp: the top bar, the stage and the tray in one column (the bar and
   the tray outside the stage); in landscape the stage keeps the old camp's
   proportions, centred, the backdrop filling the sides. */
.wild-camp { display: flex; flex-direction: column; }
.wild-top.wild-top-camp { position: relative; flex: none; background: var(--bg); box-shadow: var(--shadow-sm); }
.wild-stage-wrap { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; overflow: hidden; background-color: var(--surface-2); background-size: cover; background-position: 50% 62%; }
.wild-stage-wrap::before { content: ''; position: absolute; inset: 0; background: inherit; filter: blur(10px) brightness(0.75); transform: scale(1.06); }
.wild-stage-wrap > .wild-stage { position: relative; inset: auto; height: 100%; width: auto; aspect-ratio: 6 / 5; max-width: 100%; }
.wild-camp > .wild-tray { position: relative; flex: none; }
.wild-camp .wild-line { top: calc(max(10px, env(safe-area-inset-top)) + 70px); }
/* CAMPS-PT1: with Play in the camp and the paw hidden, the world's name fits on a phone again. */

/* The Play sign: a wooden signpost with Play under it. */
.wild-playsign {
    flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
    min-width: 52px; height: 52px; padding: 2px 6px; border: 0; border-radius: var(--radius-md);
    background: var(--learn-hud-bg); color: var(--learn-hud-ink); box-shadow: var(--shadow-sm);
    font-family: var(--font-heavy); font-size: 12px; line-height: 1.1;
}
.wild-play .wild-playsign { color: var(--learn-hud-ink); }
.wild-sign-svg { width: 30px; height: 30px; display: block; }
.wild-sign-post { fill: var(--wild-basket-dark); }
.wild-sign-board { fill: var(--wild-basket); stroke: var(--wild-basket-dark); stroke-width: 1.5; }
.wild-sign-play { fill: var(--learn-hud-ink); }
.wild-paw-svg { width: 18px; height: 18px; display: block; fill: var(--wild-basket-dark); }
.wild-star-path { fill: var(--wild-star); stroke: var(--wild-star-edge); stroke-width: 1.5; }

/* The Play board: the same card for every game. */
.wild-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 600px) { .wild-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .wild-board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wild-gamecard {
    display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 150px; padding: 12px 8px 10px;
    border: 0; border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-primary);
    box-shadow: var(--shadow-sm); text-align: center; font: inherit;
}
.wild-gamecard:active { transform: scale(0.97); }
.wild-gamecard.is-off { opacity: 0.5; }
.wild-card-pic { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; font-size: 60px; }
.wild-card-pic .lp-animal { width: 72px; height: 72px; }
.wild-card-img { width: 72px; height: 72px; object-fit: contain; display: block; }
.wild-card-name { font-family: var(--font-heavy); font-size: 16px; line-height: 1.2; }
.wild-card-level { font-family: var(--font-bold); font-size: 14px; color: var(--text-secondary); }
.wild-card-dots { display: flex; gap: 3px; align-items: center; }
.wild-card-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--learn-grey-light); }
.wild-card-dots i.is-done { background: var(--success); }
.wild-card-star svg { width: 14px; height: 14px; display: block; margin-left: 2px; }
.wild-board-none { color: var(--text-secondary); }
.wild-board-sheet { max-height: 86%; overflow-y: auto; }

/* A learning game over the camp (js/learn-play.js), full screen. */
.wild-learn { position: absolute; inset: 0; z-index: 9000; background: var(--bg); }
.wild-learn[hidden] { display: none; }

/* The pour: food falling into a pile (camp-scene.js); the night pile by the fire. */
.cs-poured .lp-pe, .cs-pile .lp-pe { display: block; }
.wg-won { display: flex; gap: 18px; justify-content: center; align-items: center; }
.wg-won span { display: inline-flex; align-items: center; gap: 6px; }


/* ════════════════════════════════════════════════════════════
   CAMPS-04: TAP THE FRIEND, THEN TAP WHAT GLOWS
   ════════════════════════════════════════════════════════════ */
.wild-item.is-glow { box-shadow: 0 0 0 3px var(--wild-target), 0 0 16px 4px var(--wild-target); animation: wild-item-bounce 0.9s ease-in-out infinite; }
.wild-item.is-fav { box-shadow: 0 0 0 4px var(--wild-star), 0 0 22px 8px var(--wild-target); }
.wild-item.is-lifted { transform: translateY(-12px) scale(1.08); box-shadow: 0 0 0 3px var(--primary), var(--shadow-lg); }
.wild-hand { position: absolute; z-index: 7600; width: 54px; height: 62px; pointer-events: none; filter: drop-shadow(0 4px 4px var(--learn-shadow)); }
.wild-hand-img, .wild-hand .cs-icon { display: block; width: 54px; height: 62px; }
.wild-hand svg { width: 100%; height: 100%; display: block; }
.wild-say {
    position: absolute; z-index: 7200; transform: translate(-50%, -100%);
    display: flex; flex-direction: column; align-items: center; gap: 4px; max-width: 220px;
    padding: 10px 14px 12px; border-radius: var(--radius-xl); background: var(--surface); color: var(--text-primary);
    box-shadow: var(--shadow-lg); text-align: center; animation: wild-say-rise 0.25s ease-out;   /* BUG-05: same jump as the sheet */
}
.wild-say::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -9px; border: 9px solid transparent; border-bottom: 0; border-top-color: var(--surface); }
.wild-say-pics { display: flex; gap: 8px; align-items: center; }
.wild-say-img { width: 64px; height: 64px; object-fit: contain; display: block; }
.wild-say-shop { width: 52px; height: 48px; object-fit: contain; display: block; }
.wild-say-line { font-family: var(--font-heavy); font-size: 17px; line-height: 1.2; }
.wild-say-sub { font-family: var(--font-bold); font-size: 15px; color: var(--text-secondary); }
.wild-stall.is-bob { animation: wild-basket-bob 1.2s ease-in-out infinite; }
@keyframes wild-item-bounce { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@media (prefers-reduced-motion: reduce) { .wild-item.is-glow, .wild-stall.is-bob, .wild-say, .wild-movebar.is-placing .wild-name-btn { animation: none; } }

@media (prefers-reduced-motion: reduce) {
    .wg-card-sheet, .wg-customer.is-in, .wg-customer.is-no, .wg-good.is-hop, .wg-float.is-bob, .wg-catch.is-up, .wg-shadow, .wg-coins.is-change .wg-coin { animation: none; }
    .wg-customer.is-out { animation: none; opacity: 0; }
    .wg-drop, .wg-card-back, .wg-card-face, .wg-timer span, .wg-line { transition: none; }
    .wg-float.is-bob { transform: translateY(8px); }
}

/* ── WILD-09: moments ── */
.wild-moment { position: absolute; z-index: 6300; padding: 0; border: 0; background: transparent; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.wild-moment-img { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 6px var(--wild-target)); animation: wild-basket-bob 2s ease-in-out infinite; }
.wild-moment-coin { width: 30px; height: 30px; object-fit: contain; clip-path: inset(0 0 45% 0); filter: drop-shadow(0 0 6px var(--wild-target)); }
.wild-pebbles { width: 40px; height: 34px; }
.wild-pebbles ellipse { fill: var(--wild-pebble); stroke: var(--wild-basket-dark); stroke-width: 1; }
.wild-zz { font-family: var(--font-heavy); font-size: 20px; color: var(--learn-hud-ink); background: var(--learn-hud-bg); border-radius: 999px; padding: 2px 10px; }
.wild-moment-sparkle { width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle, var(--wild-star) 0 20%, transparent 60%); animation: wild-glow 1.4s ease-in-out infinite; }
.wild-star-streak { display: block; width: 120px; height: 4px; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--learn-star)); transform: rotate(-24deg); box-shadow: 0 0 10px var(--learn-star); animation: wild-glow 1.2s ease-in-out infinite; }
.wild-prints { width: 70px; height: 46px; }
.wild-prints ellipse { fill: var(--learn-shadow); }
@media (prefers-reduced-motion: reduce) { .wild-moment-img, .wild-moment-sparkle, .wild-star-streak { animation: none; } }

/* ── The parent's rows ── */
.wild-owner-minutes { flex-wrap: wrap; gap: 8px; }
.wild-owner-note { font-size: 12px; color: var(--text-secondary); padding: 8px 16px 14px; line-height: 1.5; margin: 0; }

/* ── Keyframes ── */
@keyframes wild-spin { to { transform: rotate(360deg); } }
@keyframes wild-rise { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: none; } }
/* BUG-05 (Andy: "the journal slides in from the right and glitches"): wild-rise animated the sheet's
   transform to `none`, dropping its translateX(-50%) for the 0.25 s, so it rose half off to the right and jumped. */
@keyframes wild-say-rise { 0% { opacity: 0; transform: translate(-50%, calc(-100% + 14px)); } 100% { opacity: 1; transform: translate(-50%, -100%); } }
@keyframes wild-sheet-rise { 0% { opacity: 0; transform: translate(-50%, 14px); } 100% { opacity: 1; transform: translateX(-50%); } }
@keyframes wild-basket-in { 0% { opacity: 0; transform: translate(-30%, -100%) scale(0.6); } 100% { opacity: 1; transform: translate(-50%, -100%); } }
@keyframes wild-basket-bob { 0%, 100% { transform: translate(-50%, -100%); } 50% { transform: translate(-50%, -108%); } }
@keyframes wild-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes wild-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .wild-tile, .wild-world { transition: none; }
    .wild-tile:active, .wild-world:active, .wild-name-btn:active { transform: none; }
    .wild-name-card, .wild-night-card, .wild-moon.is-glow, .wild-basket, .wild-coins.is-bump, .wild-sheet, .wild-item.is-new { animation: none; }
    .wild-item:active { transform: none; }
    .wild-wait { animation-duration: 3s; }
}

/* ═══ CAMPS-05: the night switch, "What I need", the shop building, who's next ═══ */
.wild-sun-svg { width: 26px; height: 26px; display: block; }
.wild-sun-svg circle { fill: var(--wild-star); stroke: var(--wild-star-edge); stroke-width: 1.4; }
.wild-sun-svg path { stroke: var(--wild-star-edge); }
.wild-moon.is-ready { box-shadow: 0 0 0 4px var(--wild-target), 0 0 22px 8px var(--wild-target); animation: wild-glow 1.6s ease-in-out infinite; }
.wild-next .wild-paw-svg { width: 24px; height: 24px; }

/* The row: a slot per thing, a picture over a one-word label. Grey until met. */
.wild-needs { width: 100%; }
.wild-needs-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wild-need {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 64px; padding: 6px 4px 5px;
    border: 2px dashed var(--border); border-radius: var(--radius-lg); background: var(--surface-2); color: var(--text-secondary); font: inherit;
}
button.wild-need { cursor: pointer; }
.wild-need.is-met { border-style: solid; border-color: var(--wild-need-check); background: var(--surface); color: var(--text-primary); }
.wild-need-pic { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 44px; }
.wild-need-img { max-width: 48px; max-height: 44px; object-fit: contain; display: block; }
.wild-need:not(.is-met) .wild-need-img, .wild-need:not(.is-met) .wild-need-friends, .wild-need:not(.is-met) .wild-need-ring,
.wild-need:not(.is-met) .wild-berried { filter: grayscale(1); opacity: 0.45; }
.wild-need-label { font-family: var(--font-bold); font-size: 13px; line-height: 1.1; text-align: center; }
.wild-need-check { position: absolute; right: -6px; top: -6px; width: 20px; height: 20px; }
.wild-need-check circle { fill: var(--wild-need-check); }
.wild-need-check path { stroke: var(--wild-need-check-ink); }
.wild-need.is-night .wild-moon-svg { width: 34px; height: 34px; }
.wild-need.is-night { border-style: solid; }
.wild-need-friends { width: 38px; height: 38px; fill: var(--text-secondary); }
.wild-need.is-met .wild-need-friends { fill: var(--primary); }
.wild-need-of { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); padding: 0 5px; border-radius: 999px;
    background: var(--surface); font-family: var(--font-heavy); font-size: 12px; white-space: nowrap; color: var(--text-primary); }
.wild-need-ring { width: 46px; height: 24px; }
.wild-need-ring ellipse { fill: var(--learn-shadow); stroke: var(--learn-fire-ring); stroke-width: 4; }
.wild-need-ring path { stroke: var(--wild-basket-dark); }
.wild-needs.is-small .wild-need { min-width: 54px; padding: 4px 3px; }
.wild-needs.is-small .wild-need-pic { width: 38px; height: 34px; }
.wild-needs.is-small .wild-need-img { max-width: 38px; max-height: 34px; }
.wild-needs.is-small .wild-need-label { font-size: 12px; }
.wild-needs-status { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 10px 0 0; font-family: var(--font-heavy); font-size: 17px; }
.wild-needs-status svg { width: 26px; height: 26px; flex: none; }
.wild-needs-status .wild-need-check { position: static; }
.wild-needs-status .wild-need-friends { fill: var(--text-secondary); }

/* The berry bush: the bush's picture with berries drawn over it. */
.wild-berried { position: relative; display: inline-block; line-height: 0; }
.wild-berries { position: absolute; left: 10%; right: 10%; top: 20%; bottom: 25%; pointer-events: none;
    background:
        radial-gradient(circle at 22% 38%, var(--wild-berry) 0 8%, transparent 9%),
        radial-gradient(circle at 48% 22%, var(--wild-berry) 0 8%, transparent 9%),
        radial-gradient(circle at 72% 42%, var(--wild-berry) 0 8%, transparent 9%),
        radial-gradient(circle at 36% 68%, var(--wild-berry) 0 8%, transparent 9%),
        radial-gradient(circle at 62% 70%, var(--wild-berry) 0 8%, transparent 9%); }

/* Who it is for: small silhouettes on a shop card (replacing the paw marks). */
.wild-for { position: absolute; right: 4px; top: 4px; display: flex; gap: 1px; }
.wild-for-ani { display: block; width: 22px; height: 22px; opacity: 0.55; }
.wild-for-ani .lp-animal { display: block; width: 100%; height: 100%; font-size: 100%; }
.wild-for-ani .lp-emo { font-size: 16px; }
.wild-for.is-big { position: static; }
.wild-for.is-big .wild-for-ani { width: 48px; height: 48px; }
.wild-buy-for { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 8px; border-radius: var(--radius-lg); background: var(--surface-2); }
.wild-buy-note { margin: 0; font-size: 16px; color: var(--text-secondary); }
.wild-price-full { font-size: 14px; color: var(--text-secondary); }

/* The shop sheet: the world's building on a strip of its backdrop, themed shelves. */
.wild-shop-head { position: relative; display: flex; align-items: flex-end; gap: 10px; height: 92px; margin: -16px -16px 12px; padding: 0 16px 8px;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; background-size: cover; background-position: center 72%; }
.wild-shop-head .wild-sheet-title { margin: 0 0 6px; padding: 2px 10px; border-radius: 999px; background: var(--learn-hud-bg); color: var(--learn-hud-ink); }
.wild-shop-building { height: 84px; width: auto; max-width: 40%; object-fit: contain; display: block; filter: drop-shadow(0 4px 3px var(--learn-shadow)); }
.wild-shop-grid[class*="wild-shelf-"] { padding: 10px; border-radius: var(--radius-lg); }
.wild-shelf-canyon { background: var(--wild-shelf-canyon); }
.wild-shelf-arctic { background: var(--wild-shelf-arctic); }
.wild-shelf-island { background: var(--wild-shelf-island); }
.wild-shelf-savanna { background: var(--wild-shelf-savanna); }
.wild-shelf-outback { background: var(--wild-shelf-outback); }
.wild-shelf-rainforest { background: var(--wild-shelf-rainforest); }
.wild-shelf-safaripark { background: var(--wild-shelf-safaripark); }

/* Who's next: a strip of silhouettes and the picked one's row. */
.wild-next-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.wild-next-ani { flex: none; width: 60px; height: 60px; padding: 4px; border: 2px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); opacity: 0.8; }
.wild-next-ani.is-on { border-color: var(--primary); background: var(--primary-soft); opacity: 1; }
.wild-next-ani.is-ready { border-color: var(--wild-need-check); }
.wild-next-ani .lp-animal { display: block; width: 100%; height: 100%; font-size: 100%; }
.wild-next-one { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wild-need-name { font-family: var(--font-heavy); font-size: 20px; }
.wild-need-clue { margin: 0 0 4px; font-size: 16px; color: var(--text-secondary); }

/* The Camps page: a silhouette is tapped for its row. */
.camps-ani.is-need { pointer-events: auto; cursor: pointer; }
.camps-page { position: relative; }
.camps-pop { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: flex-end; justify-content: center; }
.wild-play .camps-pop { position: absolute; }
.camps-pop-scrim { position: absolute; inset: 0; background: var(--overlay-scrim); }
.camps-pop-card { position: relative; width: min(520px, 100%); max-height: 88%; overflow-y: auto; padding: 18px 16px max(18px, env(safe-area-inset-bottom));
    border-radius: var(--radius-xl) var(--radius-xl) 0 0; background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-lg); animation: wild-rise 0.25s ease-out; }
.wild-need-card { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.wild-need-ani { display: block; width: 96px; height: 96px; opacity: 0.6; }
.wild-need-ani .lp-animal { display: block; width: 100%; height: 100%; font-size: 100%; }
.camps-pop-go { width: 100%; margin-top: 14px; }

/* The visitor's row (in the corner card). */
.wild-visit-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-md); max-width: 320px; }
.wild-visit-line { display: flex; align-items: center; gap: 6px; font-family: var(--font-heavy); font-size: 16px; }
.wild-visit-fav { width: 30px; height: 30px; object-fit: contain; }

/* The squirrel bank is a jar with a coin dropping in. */
.wild-bank-svg { width: 34px; height: 38px; flex: none; display: inline-block; vertical-align: middle; }
.wild-bank-drop { animation: wild-bank-drop 2.4s ease-in infinite; }
@keyframes wild-bank-drop { 0% { transform: translateY(0); opacity: 1; } 60% { transform: translateY(20px); opacity: 1; } 61%, 100% { transform: translateY(20px); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .wild-moon.is-ready, .wild-bank-drop, .camps-pop-card { animation: none; }
}
/* Silhouettes read on a light tile in both themes. */
.wild-next-ani, .wild-need-ani, .wild-for.is-big .wild-for-ani { background-color: var(--learn-moon); border-radius: var(--radius-lg); }
.wild-need-ani { padding: 6px; }

/* ════════════════════════════════════════════════════════════
   CAMPS-07: THE FIELD JOURNAL (js/wild-journal.js). A cream book with
   a fine grain (SVG noise, no image file), a cloth spine, taped-in
   photos (washi tape in the world's colour), headings in the heavy
   font, facts in Andika. Two pages side by side when there is room,
   one on a phone. Inside the book the app's text and surface tokens
   become ink and paper, so the shared "What I need" row reads on it.
   ════════════════════════════════════════════════════════════ */
.wild-sheet.wj-sheet {
    width: min(1180px, 100%); height: 96%; max-height: none; padding: 0; overflow: hidden;
    background: transparent; box-shadow: none; border-radius: 0;
}
.wj-sheet .wild-sheet-x { z-index: 5; top: 14px; right: 16px; background: var(--wild-photo); color: var(--wild-ink); box-shadow: 0 1px 4px var(--wild-photo-shadow); }
.wj-host { height: 100%; }
.wj-book {
    --text-primary: var(--wild-ink); --text-secondary: var(--wild-ink-soft); --surface: var(--wild-photo);
    --surface-2: var(--wild-paper-2); --border: var(--wild-paper-edge); --primary: var(--wild-map-on);
    --wj-tape: var(--wild-tape-canyon);
    height: 100%; display: flex; flex-direction: column; box-sizing: border-box;
    padding: 8px 8px max(8px, env(safe-area-inset-bottom)); color: var(--wild-ink);
}
.wj-book[data-world="arctic"]     { --wj-tape: var(--wild-tape-arctic); }
.wj-book[data-world="island"]     { --wj-tape: var(--wild-tape-island); }
.wj-book[data-world="savanna"]    { --wj-tape: var(--wild-tape-savanna); }
.wj-book[data-world="outback"]    { --wj-tape: var(--wild-tape-outback); }
.wj-book[data-world="rainforest"] { --wj-tape: var(--wild-tape-rainforest); }
.wj-book[data-world="safaripark"] { --wj-tape: var(--wild-tape-safaripark); }

.wj-pages { position: relative; flex: 1; min-height: 0; display: flex; perspective: 1800px; touch-action: pan-y; }
.wj-book.is-two .wj-pages {
    padding: 9px; border-radius: 12px; background: var(--wild-cloth);
    box-shadow: inset 0 0 0 2px var(--wild-cloth-dark), 0 10px 30px var(--wild-photo-shadow);
}
.wj-sheet.is-gold .wj-pages { box-shadow: 0 0 0 4px var(--wild-star), 0 10px 30px var(--wild-photo-shadow); }
.wj-page {
    position: relative; flex: 1; min-width: 0; overflow: hidden;
    background-color: var(--wild-paper);
    background-image:
        radial-gradient(ellipse at 50% 45%, transparent 62%, var(--wild-paper-shade) 140%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.26 0 0 0 0 0.12 0 0 0 0.16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.wj-book.is-two .wj-page.is-left  { border-radius: 8px 2px 2px 8px; box-shadow: inset -18px 0 22px -16px var(--wild-paper-shade); }
.wj-book.is-two .wj-page.is-right { border-radius: 2px 8px 8px 2px; box-shadow: inset 18px 0 22px -16px var(--wild-paper-shade); }
.wj-book.is-one .wj-page { border-radius: 4px 12px 12px 4px; border-left: 10px solid var(--wild-cloth); box-shadow: 0 6px 22px var(--wild-photo-shadow); }
.wj-page.is-right .wj-page-in, .wj-page.is-contents .wj-page-in {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, var(--wild-rule) 31px, var(--wild-rule) 32px);
    background-attachment: local;
}
.wj-page-in { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding: 18px 18px 26px; }
.wj-book.is-one .wj-page-in { padding: 16px 14px 24px; }
.wj-spine {
    position: absolute; top: 9px; bottom: 9px; left: 50%; width: 18px; transform: translateX(-50%); pointer-events: none; z-index: 2;
    background: linear-gradient(90deg, transparent, var(--wild-paper-shade) 45%, var(--wild-cloth-dark) 50%, var(--wild-paper-shade) 55%, transparent);
}

/* Ink */
.wj-h1 { display: block; font-family: var(--font-heavy); font-size: 25px; line-height: 1.15; color: var(--wild-ink); }
.wj-h2 { margin: 16px 0 8px; font-family: var(--font-heavy); font-size: 16px; color: var(--wild-ink-soft); text-align: center; }
.wj-clue, .wj-note, .wj-line, .wj-sub, .wj-notes, .wj-count, .wj-c-prog, .wj-wait p, .wj-photo figcaption, .wj-status, .wj-box-v span {
    font-family: var(--font-teach);
}
.wj-clue { margin: 10px 0 0; font-size: 20px; line-height: 1.35; text-align: center; }
.wj-note { margin: 6px 0 0; font-size: 16px; color: var(--wild-ink-soft); text-align: center; }
.wj-status { margin: 10px 0 0; font-size: 19px; text-align: center; color: var(--wild-map-on); font-weight: 700; }
.wj-q { font-size: 44px; color: var(--wild-ink-soft); }
.wj-q-small { font-family: var(--font-heavy); font-size: 28px; color: var(--wild-ink-soft); }
.wj-name { text-align: center; margin-top: 10px; }

/* Taped-in photos: a white card, a little tilted, two strips of washi tape. */
.wj-photo {
    position: relative; margin: 0; display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 8px 6px; background: var(--wild-photo); box-shadow: 0 2px 7px var(--wild-photo-shadow); transform: rotate(var(--wj-tilt, 0deg));
}
.wj-photo::before, .wj-photo::after {
    content: ''; position: absolute; top: -9px; width: 44px; height: 17px; background: var(--wj-tape); pointer-events: none;
}
.wj-photo::before { left: -6px; transform: rotate(-24deg); }
.wj-photo::after  { right: -6px; transform: rotate(22deg); }
.wj-photo.t0 { --wj-tilt: -3deg; } .wj-photo.t1 { --wj-tilt: 2deg; } .wj-photo.t2 { --wj-tilt: -1.5deg; } .wj-photo.t3 { --wj-tilt: 3deg; }
.wj-photo-in { display: block; width: 150px; height: 150px; }
.wj-photo-in .lp-animal { display: block; width: 100%; height: 100%; font-size: 100%; }
.wj-photo.is-shadow .wj-photo-in, .wj-cell:not(.is-friend) .wj-photo-in { background: var(--wild-paper-2); }
.wj-photo.is-shadow .lp-animal, .wj-cell:not(.is-friend) .lp-animal { opacity: 0.7; }
.wj-photo.is-small { padding: 5px 5px 4px; }
.wj-photo.is-small::before, .wj-photo.is-small::after { width: 26px; height: 11px; top: -6px; }
.wj-photo.is-small .wj-photo-in { width: 64px; height: 64px; }
.wj-photo.is-nap { position: absolute; right: 2px; bottom: -10px; --wj-tilt: 7deg; }
.wj-photo.is-nap .wj-photo-in { width: 72px; height: 72px; }
.wj-photo.is-nap::after { display: none; }
.wj-photo figcaption { font-size: 14px; color: var(--wild-ink-soft); }
.wj-ani-head { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 12px; padding: 12px 40px 0; }
.wj-grown { display: flex; justify-content: center; margin-top: 18px; }
.wj-grown-img { display: block; max-width: 150px; max-height: 120px; object-fit: contain; }
.wj-photo.is-grown .wj-photo-in { width: auto; height: auto; }

/* Contents */
.wj-cover { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; padding: 6px 44px 0; }
.wj-count { font-size: 19px; color: var(--wild-ink-soft); }
.wj-gold { position: absolute; right: 0; top: -2px; width: 58px; height: 58px; transform: rotate(12deg); }
.wj-gold .wj-ico { width: 100%; height: 100%; color: var(--wild-star); stroke: var(--wild-star-edge); stroke-width: 1.5; }
.wj-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 6px; padding: 14px 0 4px; }
.wj-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--wild-ink); cursor: pointer; font: inherit; }
.wj-c-name { font-family: var(--font-heavy); font-size: 14px; line-height: 1.1; text-align: center; overflow-wrap: anywhere; }
.wj-c-prog { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; color: var(--wild-ink-soft); }
.wj-c-prog .wj-ico { width: 16px; height: 16px; }
.wj-c-prog.is-ready { color: var(--wild-map-on); font-weight: 700; }
.wj-book.is-one .wj-grid { gap: 14px 4px; }

/* "What I need", large on a not-yet-friend's page */
.wild-needs.is-big .wild-needs-row { gap: 10px; }
.wild-needs.is-big .wild-need { min-width: 80px; padding: 8px 6px 6px; }
.wild-needs.is-big .wild-need-pic { width: 64px; height: 58px; }
.wild-needs.is-big .wild-need-img { max-width: 64px; max-height: 58px; }
.wild-needs.is-big .wild-need-label { font-size: 15px; }
.wild-needs.is-big .wild-need-friends { width: 48px; height: 48px; }
.wild-needs.is-big .wild-need.is-night .wild-moon-svg { width: 44px; height: 44px; }

/* A friend's left page */
.wj-boxes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.wj-box { border: 2px dashed var(--wild-paper-edge); border-radius: 12px; padding: 0 6px 10px; }
.wj-box .wj-h2 { margin: 8px 0 6px; font-size: 14px; }
.wj-box-v { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; min-height: 52px; }
.wj-box-v > span:not(.wj-food):not(.wj-q-small) { font-size: 15px; }
.wj-food { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
.wj-thing { display: block; width: 44px; height: 44px; object-fit: contain; }

/* The facts page */
.wj-wait { height: 100%; min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; }
.wj-wait .wj-ico { width: 56px; height: 56px; color: var(--wild-paper-edge); }
.wj-wait p { margin: 0; font-size: 21px; color: var(--wild-ink-soft); max-width: 16em; }
.wj-card-h { margin-top: 2px; }
.wj-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.wj-fact {
    display: grid; grid-template-columns: 46px 1fr; gap: 4px 10px; align-items: start; padding: 9px 10px;
    border-radius: 12px; background: var(--wild-paper-2); box-shadow: inset 0 0 0 1px var(--wild-paper-edge);
}
.wj-fact.is-wide { grid-column: 1 / -1; }
.wj-fact-pic { display: flex; align-items: center; justify-content: center; width: 46px; min-height: 46px; }
.wj-fact-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wj-fact-x { grid-column: 1 / -1; display: flex; justify-content: center; padding-top: 4px; }
.wj-word { font-family: var(--font-heavy); font-size: 16px; line-height: 1.15; }
.wj-line { font-size: 17px; line-height: 1.3; }
.wj-sub { font-size: 15px; color: var(--wild-ink-soft); }
.wj-ico { width: 40px; height: 40px; display: block; flex: none; color: var(--wild-ink-soft); fill: currentColor; }
.wj-ico [stroke-width] { stroke: currentColor; }
.wj-ico .wj-cut, .wj-ico .wj-cut-fill { stroke: var(--wild-paper-2); }
.wj-ico .wj-cut-fill { fill: var(--wild-paper-2); stroke-width: 2; }
.wj-ico.is-sun, .wj-ico .is-flame { color: var(--wild-fact-sun); fill: var(--wild-fact-sun); }
.wj-ico.is-moon, .wj-ico .is-moon { color: var(--wild-fact-moon); fill: var(--wild-fact-moon); }
.wj-ico.is-heart { color: var(--wild-fact-heart); }
.wj-ico.is-star { color: var(--wild-star); }
.wj-hab { display: block; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px var(--wild-photo-shadow); }
.wj-hab-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wj-hab-img.is-stand { object-position: 50% 58%; }
.wj-map { display: block; width: 100%; max-width: 380px; height: auto; }
.wj-sea { fill: var(--wild-map-sea); }
.wj-land { fill: var(--wild-map-land); }
.wj-land.is-on { fill: var(--wild-map-on); }
.wj-ice { fill: var(--wild-map-ice); }
.wj-ice.is-on { fill: var(--wild-map-on); }
.wj-dot { fill: var(--wild-map-dot); }
.wj-dot-ring { fill: none; stroke: var(--wild-map-dot); stroke-width: 1.5; opacity: 0.6; }
.wj-size {
    display: flex; align-items: flex-end; justify-content: center; gap: 22px; height: 118px; width: 100%; max-width: 380px;
    border-bottom: 2px solid var(--wild-ink-soft);
}
.wj-size-kid { display: block; height: var(--wj-kid); }
.wj-kid { display: block; height: 100%; width: auto; fill: var(--wild-ink-soft); }
.wj-size-ani { display: block; width: var(--wj-ani); height: var(--wj-ani); }
.wj-size-ani .lp-animal { display: block; width: 100%; height: 100%; font-size: 100%; opacity: 1; }
.wj-meter { display: flex; gap: 4px; width: 100%; max-width: 380px; }
.wj-step { flex: 1; padding: 5px 2px; border-radius: 8px; background: var(--wild-paper); text-align: center; font-family: var(--font-teach); font-size: 15px; color: var(--wild-ink-soft); }
.wj-step.is-on { background: var(--wild-need-check); color: var(--wild-need-check-ink); font-weight: 700; }
.wj-cake-b { fill: var(--wild-cake); }
.wj-candle { fill: var(--wild-candle); }
.wj-flame { fill: var(--wild-fact-sun); }
.wj-cake-n { fill: var(--wild-ink); font-family: var(--font-heavy); font-size: 10px; text-anchor: middle; }
.wj-group { display: flex; align-items: flex-end; justify-content: center; gap: 1px; }
.wj-mini { width: 22px; height: 22px; font-size: 100%; display: block; }
.wj-fact.is-group .wj-mini.lp-spr { width: 22px; height: 22px; }

/* What I found out: four stamps that ink in, and Learning's facts as notes. */
.wj-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.wj-stamp {
    width: 70px; height: 70px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    border: 3px dashed var(--wild-paper-edge); color: var(--wild-paper-edge);
}
.wj-stamp .wj-ico { width: 28px; height: 28px; color: inherit; }
.wj-stamp b { font-family: var(--font-heavy); font-size: 12px; }
.wj-stamp.is-inked { border-style: double; border-width: 4px; border-color: var(--wild-stamp); color: var(--wild-stamp); transform: rotate(-9deg); }
.wj-stamp.is-inked:nth-child(even) { transform: rotate(7deg); }
.wj-notes { list-style: none; margin: 10px 0 0; padding: 0 4px; font-size: 18px; line-height: 32px; }
.wj-notes li::before { content: '–'; margin-right: 6px; color: var(--wild-ink-soft); }

/* Turning the page */
.wj-nav {
    align-self: center; display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 4px 8px; border-radius: 999px;
    background: var(--wild-photo); box-shadow: 0 2px 8px var(--wild-photo-shadow);
}
.wj-turn, .wj-home {
    width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--wild-paper-2); color: var(--wild-ink);
    font-family: var(--font-heavy); font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.wj-home .wj-ico { width: 26px; height: 26px; }
.wj-turn:disabled, .wj-home:disabled { opacity: 0.35; cursor: default; }
.wj-pno { min-width: 4.2em; text-align: center; font-family: var(--font-bold); font-size: 15px; color: var(--wild-ink-soft); }
.wj-book.is-two.is-out-next .wj-page.is-right { transform-origin: 0 50%; animation: wj-out-l 0.23s ease-in forwards; }
.wj-book.is-two.is-out-prev .wj-page.is-left  { transform-origin: 100% 50%; animation: wj-out-r 0.23s ease-in forwards; }
.wj-book.is-two.is-in-next  .wj-page.is-left  { transform-origin: 100% 50%; animation: wj-in-r 0.23s ease-out; }
.wj-book.is-two.is-in-prev  .wj-page.is-right { transform-origin: 0 50%; animation: wj-in-l 0.23s ease-out; }
.wj-book.is-one.is-out-next .wj-page { transform-origin: 0 50%; animation: wj-out-l 0.23s ease-in forwards; }
.wj-book.is-one.is-out-prev .wj-page { animation: wj-fade-out 0.2s ease-in forwards; }
.wj-book.is-one.is-in-prev  .wj-page { transform-origin: 0 50%; animation: wj-in-l 0.23s ease-out; }
.wj-book.is-one.is-in-next  .wj-page { animation: wj-fade-in 0.18s ease-out; }
@keyframes wj-out-l { to { transform: rotateY(-88deg); filter: brightness(0.82); } }
@keyframes wj-out-r { to { transform: rotateY(88deg); filter: brightness(0.82); } }
@keyframes wj-in-l  { from { transform: rotateY(-88deg); filter: brightness(0.82); } }
@keyframes wj-in-r  { from { transform: rotateY(88deg); filter: brightness(0.82); } }
@keyframes wj-fade-out { to { opacity: 0; } }
@keyframes wj-fade-in  { from { opacity: 0; } }
@keyframes wj-slide-out-l { to { transform: translateX(-16px); opacity: 0; } }
@keyframes wj-slide-out-r { to { transform: translateX(16px); opacity: 0; } }
@keyframes wj-slide-in-l  { from { transform: translateX(16px); opacity: 0; } }
@keyframes wj-slide-in-r  { from { transform: translateX(-16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .wild-sheet.wj-sheet { animation: none; }
    .wj-book.is-out-next .wj-page, .wj-book.is-two.is-out-next .wj-page.is-right { animation: wj-slide-out-l 0.12s linear forwards; transform-origin: 50% 50%; }
    .wj-book.is-out-prev .wj-page, .wj-book.is-two.is-out-prev .wj-page.is-left  { animation: wj-slide-out-r 0.12s linear forwards; transform-origin: 50% 50%; }
    .wj-book.is-in-next .wj-page, .wj-book.is-two.is-in-next .wj-page.is-left    { animation: wj-slide-in-l 0.12s linear; }
    .wj-book.is-in-prev .wj-page, .wj-book.is-two.is-in-prev .wj-page.is-right   { animation: wj-slide-in-r 0.12s linear; }
}
@media (max-width: 400px) {
    .wj-photo-in { width: 128px; height: 128px; }
    .wj-ani-head { padding: 12px 30px 0; }
    .wj-card { grid-template-columns: 1fr; }
    .wj-h1 { font-size: 22px; }
}
.wj-map { max-width: 300px; }
.wj-step { position: relative; padding-bottom: 20px; }
.wj-you { position: absolute; left: 50%; bottom: 2px; transform: translateX(-50%); display: inline-flex; align-items: flex-end; gap: 2px; font-style: normal; font-size: 12px; line-height: 1; }
.wj-you .wj-kid { width: auto; height: 14px; fill: currentColor; }
.wj-cake-top { fill: var(--wild-photo); }
.wj-cake-n { font-size: 11px; }
.wj-world { display: flex; justify-content: center; margin: 22px 0 6px; }
.wj-photo.is-world .wj-photo-in { width: min(320px, 70vw); height: auto; aspect-ratio: 4 / 3; overflow: hidden; }
.wj-world-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.wj-key { list-style: none; margin: 18px auto 0; padding: 0; display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: 100%; }
.wj-key li { display: flex; align-items: center; gap: 12px; font-family: var(--font-teach); font-size: 17px; }
.wj-key .wj-c-prog { min-width: 64px; justify-content: center; padding: 2px 6px; border-radius: 8px; background: var(--wild-paper-2); }
.wj-group { width: 46px; flex-wrap: wrap; }
.wj-fact.is-group .wj-mini, .wj-fact.is-group .wj-mini.lp-spr { width: 15px; height: 15px; }
.wj-fact.is-group .wj-group:has(.wj-mini:only-child) .wj-mini { width: 30px; height: 30px; }


/* ═══ CAMPS-PT1 (Andy's playtest) ═══════════════════════════════════════════ */
/* The back button: the Chats one (a kid's: 40px, the soft tint, a chevron). */
.wild-back {
    flex: none; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--kid-tint); color: var(--kid-tint-ink);
}
.wild-play .wild-back { color: var(--kid-tint-ink); }
.wild-back-svg { width: 24px; height: 24px; display: block; stroke: currentColor; }
.wild-back:active { transform: scale(0.94); }
.wild-top-camp .wild-top-title { margin-right: 0; flex: 0 1 auto; }
.wild-top-camp .wild-coins { margin-right: auto; }

/* Full-screen pages (the shop, a thing to buy, Play): a chat's layout. */
.wild-page {
    position: absolute; inset: 0; z-index: 8000; display: flex; flex-direction: column;
    background: var(--bg); color: var(--text-primary);
}
.wild-page[hidden] { display: none; }
.wild-page-top {
    flex: none; display: flex; align-items: center; gap: 10px;
    padding: max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) 12px max(14px, env(safe-area-inset-left));
    background: var(--surface); box-shadow: 0 1px 0 var(--border);
}
.wild-page-title { flex: 1; min-width: 0; font-family: var(--font-bold); font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wild-page-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding: 16px max(16px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.wild-page-body > * { max-width: 720px; margin-left: auto; margin-right: auto; }
.wild-page .wild-shop-head { margin: -16px -16px 12px; border-radius: 0; height: 104px; max-width: none; }
.wild-page .wild-shop-head { margin-left: calc(-1 * max(16px, env(safe-area-inset-left))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right))); }
.wild-page .wild-shop-building { height: 92px; }
.wild-page .wild-buy { padding-top: 12px; }
.wild-page .wild-board { max-width: 720px; }
@media (min-width: 700px) { .wild-page .wild-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* One button shape: Buy and Not now are the same pill (Not now the quiet one). */
.wild-play .wild-btn, .wild-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; max-width: 220px; padding: 8px 18px;
    border: 2px solid var(--primary); border-radius: var(--radius-lg); background: var(--primary); color: var(--on-primary);
    font-family: var(--font-heavy); font-size: 18px;
}
.wild-play .wild-btn { color: var(--on-primary); }
.wild-btn.is-quiet { background: var(--surface); border-color: var(--border-strong); }
.wild-play .wild-btn.is-quiet { color: var(--text-primary); }
.wild-btn:active { transform: scale(0.96); }
.wild-buy-need { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-heavy); }
.wild-buy-need .wild-price-coin { width: 28px; height: 28px; }

/* The shop's nudge: Play games to get coins. */
.wild-callout {
    display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 auto 14px; padding: 8px 12px 8px 8px;
    border: 2px solid var(--wild-basket); border-radius: var(--radius-lg); background: var(--surface-2); text-align: left;
}
.wild-callout-sign { flex: none; width: 54px; height: 54px; }
.wild-callout-sign .wild-playpost { width: 54px; height: 54px; }
.wild-callout-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: 15px; }
.wild-callout-text b { font-family: var(--font-heavy); font-size: 17px; }
.wild-play .wild-callout-go { flex: none; min-height: 42px; max-width: none; padding: 6px 16px; font-size: 16px; }
.wild-buy .wild-callout { margin-top: 4px; }

/* The Play sign in the camp: a big wooden signpost beside the shop. */
.wild-playpost { width: 100%; height: 100%; display: block; overflow: visible; }
.wild-pp-shadow { fill: var(--learn-shadow); }
.wild-pp-post { fill: var(--wild-basket-dark); }
.wild-pp-board { fill: var(--wild-basket); stroke: var(--wild-basket-dark); stroke-width: 2.5; stroke-linejoin: round; }
.wild-pp-grain { stroke: var(--wild-basket-dark); opacity: 0.35; }
.wild-pp-play { fill: var(--learn-hud-ink); }
.wild-pp-word { fill: var(--learn-hud-ink); font-family: var(--font-heavy); font-size: 19px; }
.lp-phtml { display: block; cursor: pointer; }
.lp-prop[data-key="play"] > .lp-phtml { animation: wild-sign-sway 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes wild-sign-sway { 0%, 100% { transform: translateX(-50%) rotate(0deg); } 50% { transform: translateX(-50%) rotate(-2.5deg); } }

/* The shop sits IN the picture: on the ground with a soft contact shadow,
   the backdrop's warmth and haze, and the scene's night like everything else. */
.lp-prop[data-key="shop"] > .lp-pimg { filter: saturate(0.82) sepia(0.12) contrast(0.94) drop-shadow(-6px 3px 4px var(--learn-shadow)); }
.lp-prop[data-key="shop"]::before {
    content: ''; position: absolute; left: 0; bottom: -10px; width: 150px; height: 22px; transform: translateX(-52%);
    border-radius: 50%; background: radial-gradient(closest-side, var(--learn-shadow), transparent); pointer-events: none;
}
.lp-prop[data-key="play"]::before {
    content: ''; position: absolute; left: 0; bottom: -6px; width: 56px; height: 12px; transform: translateX(-50%);
    border-radius: 50%; background: radial-gradient(closest-side, var(--learn-shadow), transparent); pointer-events: none;
}

/* The tray: every thing has its word under it. */
.wild-item { flex-direction: column; width: 68px; height: 74px; padding-top: 4px; gap: 1px; justify-content: flex-start; }
.wild-item-img { width: 42px; height: 42px; }
.wild-item-word { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-bold); font-size: 12px; line-height: 1.2; pointer-events: none; }
.wild-tray.is-bump { animation: wild-bump 0.4s ease-out; }
.wild-camp .wild-card { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 98px); }

/* The full morning basket: foods peeking out, a cloth folded over the top. */
.wild-basket { width: 78px; height: 72px; }
.wild-basket-img { position: absolute; left: 0; bottom: 0; width: 78px; height: 64px; object-fit: contain; z-index: 2; }
.wild-basket-food { position: absolute; left: 14px; right: 12px; top: 6px; height: 30px; z-index: 1; }
.wild-basket-f { position: absolute; width: 28px; height: 28px; object-fit: contain; }
.wild-basket-f.f0 { left: 0; top: 4px; transform: rotate(-14deg); }
.wild-basket-f.f1 { left: 16px; top: -2px; }
.wild-basket-f.f2 { right: 0; top: 5px; transform: rotate(12deg); }
.wild-basket-cloth { position: absolute; right: -6px; top: 16px; width: 50px; height: auto; z-index: 3; transform: rotate(-8deg); filter: drop-shadow(0 2px 1px var(--learn-shadow)); }

/* A friend carried to bed; food dropped on the ground. */
.wild-camp .lp-agent-body { touch-action: none; }
.lp-agent.is-dragged .lp-shadow { opacity: 0.35; transform: translateX(-50%) scale(0.8) !important; }
.lp-agent.is-dragged .lp-agent-body { filter: drop-shadow(0 10px 6px var(--learn-shadow)); }
.cs-dropped .lp-pe { animation: wild-drop-land 0.35s ease-out; }
.cs-dropped.is-faded { opacity: 0; transition: opacity 0.6s; }
@keyframes wild-drop-land { 0% { transform: translateY(-24px) scale(1.2); } 70% { transform: translateY(0) scale(0.95); } 100% { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .lp-prop[data-key="play"] > .lp-phtml, .cs-dropped .lp-pe, .wild-tray.is-bump { animation: none; }
    .cs-dropped.is-faded { transition: none; }
}

/* CAMPS-PT1: the journal — one page per animal (its facts under it on a phone), dots for "how close". */
.wj-one-facts { margin-top: 22px; padding-top: 16px; border-top: 2px dashed var(--wild-rule); }
.wj-dots { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: center; }
.wj-dot-s { display: block; width: 11px; height: 11px; border-radius: 50%; background: var(--wild-rule); box-shadow: inset 0 0 0 1.5px var(--wild-ink-soft); opacity: 0.55; }
.wj-dot-s.is-on { background: var(--wild-map-on); box-shadow: none; opacity: 1; }
.wj-count .wj-dots { gap: 5px; max-width: 220px; }
.wj-count .wj-dot-s { width: 13px; height: 13px; }

/* CAMPS-PT1: the Camps page — a dot per animal (a friend filled), not "2 of 14". */
.camps-dots { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; max-width: 62%; }
.camps-dot { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); opacity: 0.6; }
.camps-dot.is-on { background: var(--primary); opacity: 1; }
.camps-world-text { flex-wrap: wrap; align-items: center; row-gap: 6px; }
.camps-dots { max-width: 100%; }
.wj-boxes { grid-template-columns: minmax(0, 1fr); }   /* CAMPS-PT1: one box now (My food) */

/* BUG-01 (Andy): the journal's contents in 3 columns, bigger photos (no count dots on the cover). */
.wj-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 8px; }
.wj-cell .wj-photo.is-small .wj-photo-in { width: 84px; height: 84px; }
/* BUG-01 (Andy): the morning basket's food sits inside it (no cloth): back basket,
   food, then the same basket cut to below its front rim (the art's rim is at ~48%).
   The food sits deep (a third of it behind the front rim), heaped and overlapping. */
.wild-basket-img { z-index: 1; }
.wild-basket-food { left: 13px; right: 13px; top: 19px; height: 32px; z-index: 2; }
.wild-basket-front { z-index: 3; clip-path: inset(49% 0 0 0); }
.wild-basket-f { width: 30px; height: 30px; filter: drop-shadow(0 1px 1px var(--learn-shadow)); }
.wild-basket-f.f0 { left: 0; top: 5px; transform: rotate(-12deg); }
.wild-basket-f.f1 { left: 50%; top: 0; margin-left: -15px; z-index: 1; }
.wild-basket-f.f2 { right: 0; left: auto; top: 5px; transform: rotate(10deg); }
/* BUG-01: each world's coins, on its tile's picture (coins are per world). */
.camps-world-pic { position: relative; }
.camps-world-coins { position: absolute; top: 8px; right: 8px; z-index: 200; }
.wild-top-gap { width: 44px; flex: none; }

/* BUG-03 (Andy): a tapped (lifted) or glowing tray thing was cut off at the tray's top edge
   (the tray scrolls sideways, so it clips up and down too) and looked "under the map".
   More room on top, a smaller lift, glows that fit. */
.wild-tray { padding-top: 16px; }
.wild-item.is-lifted { transform: translateY(-8px) scale(1.04); box-shadow: 0 0 0 3px var(--primary), var(--shadow-md); }
.wild-item.is-glow { box-shadow: 0 0 0 3px var(--wild-target), 0 0 8px 2px var(--wild-target); }
.wild-item.is-fav { box-shadow: 0 0 0 4px var(--wild-star), 0 0 10px 3px var(--wild-target); }
/* BUG-03: a friend picked up wiggles happily (`rotate`, so it stacks on the breathing transform). */
.lp-agent.is-dragged:not(.is-hang) .lp-face > * { animation: cs-wiggle 0.45s ease-in-out infinite alternate; transform-origin: 50% 90%; }
@keyframes cs-wiggle { from { rotate: -7deg; } to { rotate: 7deg; } }
@media (prefers-reduced-motion: reduce) { .lp-agent.is-dragged .lp-face > * { animation: none; } }
/* BUG-03: the camp never hands a finger to the browser (a pan/zoom there sends pointercancel,
   which cut a long-press move or an animal carry short — on iPhone too). */
.wild-stage .lp-scene { touch-action: none; }
.wild-movebar .wild-again { white-space: nowrap; }   /* BUG-03: "Put away" on one line on a phone */

/* BUG-04 (Andy): the Play sign bounces until it's first tapped, and when this world's coins are 0. */
.lp-prop[data-key="play"].is-bob > .lp-phtml { animation: wild-sign-bob 1.1s ease-in-out infinite; }
@keyframes wild-sign-bob { 0%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); } 50% { transform: translateX(-50%) translateY(-8px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .lp-prop[data-key="play"].is-bob > .lp-phtml { animation: none; } }

/* BUG-05 (Andy): a cold fire at night bounces — it wants firewood before anyone can sleep. */
.wild-stage .lp-fire.is-want { animation: wild-item-bounce 0.9s ease-in-out infinite; }
.wild-stage .lp-fire.is-want .lp-fimg-a, .wild-stage .lp-fire.is-want .lp-fire-logs { filter: drop-shadow(0 0 6px var(--wild-target)) drop-shadow(0 0 2px var(--wild-target)); }
@media (prefers-reduced-motion: reduce) { .wild-stage .lp-fire.is-want { animation: none; } }

/* BUG-05 (Andy): the journal's "To fill me up" — its food and water, drawn as many times as it needs. */
.wj-fill .wj-box-v { gap: 6px 18px; }
.wj-stack { display: flex; align-items: center; }
.wj-stack-i { display: block; flex: none; }
.wj-stack-i + .wj-stack-i { margin-left: -20px; }
.wj-fill-img { display: block; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 1px 1px var(--wild-photo-shadow)); }
.wj-stack-i:nth-child(1) { transform: rotate(-12deg); }
.wj-stack-i:nth-child(2) { transform: rotate(7deg) translateY(-2px); }
.wj-stack-i:nth-child(3) { transform: rotate(-5deg) translateY(1px); }
.wj-stack-i:nth-child(4) { transform: rotate(11deg) translateY(-1px); }
.wj-stack-i:nth-child(5) { transform: rotate(-8deg); }
/* BUG-05 (Andy): every Play card shows what it pays. */
.wild-gamecard { position: relative; }
.wild-card-pay { position: absolute; top: 8px; right: 8px; display: flex; align-items: center; gap: 3px; padding: 3px 8px 3px 4px;
    border-radius: 999px; background: var(--learn-hud-bg); color: var(--learn-hud-ink); box-shadow: var(--shadow-sm);
    font-family: var(--font-heavy); font-size: 14px; line-height: 1; }
.wild-card-coin { display: block; width: 18px; height: 18px; object-fit: contain; }