/* ============================================================
   Campfire — css/learn.css                   (LEARN-05, 06, 07)
   THE GAME'S LOOK: the round and its number pad, the trail, the
   rescue panels and the camp. The pair of js/learn-play.js.

   ⚠ ONE FILE, TWO SHELLS. index.html and dash/index.html both link
   it and both workers precache it: A CHANGE HERE IS A PAIRED BUMP.
   ⚠ EVERY var() RESOLVES AGAINST branding.css ALONE (L17) — the wall
   loads no app.css. No custom property is declared in this file, and
   there is no hex here: every colour is a --learn-* (or shared) token.
   ⚠ REDUCED MOTION: every animation has a tail at the foot of this
   file. Anything that exists only to move is display:none there. The
   JavaScript half (rAF loops) is in learn-play.js.
   ============================================================ */

/* ── The frame ─────────────────────────────────────────────── */
.lp {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text-primary);
    font-family: var(--font-medium);
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.lp-view { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lp-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* :where() keeps these at zero specificity, so every component rule
   below (the pad's 30px keys included) wins over the reset. */
:where(.lp) button { font: inherit; color: inherit; cursor: pointer; }
:where(.lp) button:disabled { cursor: default; }
.lp-center {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 16px; padding: 24px 16px; text-align: center;
}
.lp-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.lp-muted { color: var(--text-secondary); }
.lp-pad { padding: 16px; }
.lp-spinner {
    width: 36px; height: 36px; border-radius: 50%;
    border: 4px solid var(--border); border-top-color: var(--primary);
    animation: lp-spin 0.9s linear infinite;
}

.lp-btn {
    border: 1px solid var(--border-strong);
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 10px 16px;
    font-family: var(--font-bold);
    font-size: 16px;
    min-height: 44px;
}
.lp-btn-primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.lp .lp-btn-primary { color: var(--on-primary); }
.lp-btn-big { min-height: 52px; padding: 12px 22px; font-size: 18px; border-radius: var(--radius-lg); }
.lp-btn:disabled { background: var(--surface-2); border-color: var(--border); color: var(--text-secondary); }
.lp .lp-btn:disabled { color: var(--text-secondary); }

.lp-x {
    width: 44px; height: 44px; border-radius: 50%;
    border: 0; background: var(--learn-hud-bg); color: var(--learn-hud-ink);
    font-size: 18px; box-shadow: var(--shadow-sm);
}
.lp .lp-x { color: var(--learn-hud-ink); }
.lp-x-corner { position: absolute; top: 12px; left: 12px; }

.lp-pill {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 6px 12px;
    border: 0; border-radius: 999px;
    background: var(--learn-hud-bg); color: var(--learn-hud-ink);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-bold); font-size: 15px; white-space: nowrap;
}
.lp .lp-pill { color: var(--learn-hud-ink); }
.lp-food-pill b { font-family: var(--font-heavy); }

.lp-toast {
    position: absolute; left: 50%; bottom: 24px; z-index: 60;
    transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
    background: var(--inverse-surface); color: var(--on-inverse);
    border-radius: 999px; padding: 10px 16px; font-size: 15px;
    max-width: min(92vw, 420px); text-align: center;
    transition: opacity 0.2s, transform 0.2s;
}
.lp-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.lp-error p { font-size: 17px; max-width: 320px; }

/* ── Animals: THE ART SEAM ─────────────────────────────────── */
.lp-animal {
    display: inline-flex; align-items: flex-end; justify-content: center;
    position: relative; line-height: 1; transform-origin: 50% 100%;
}
.lp-emo { font-size: 1em; }
.lp-emo-in { display: block; transform-origin: 50% 100%; transition: filter 0.6s; }
.lp-pose-alt     .lp-emo-in { transform: rotate(-7deg); }
.lp-pose-excited .lp-emo-in { transform: scale(1.12); }
.lp-pose-sleep   .lp-emo-in { transform: scale(1.04, 0.86); filter: brightness(0.8) saturate(0.75); }
.lp-pose-hidden  .lp-emo-in { filter: brightness(0); opacity: 0.85; }

/* The sprite strip: four poses side by side — IDLE · ALT · EXCITED · SLEEP. */
.lp-spr {
    width: 1.1em; height: 1.1em;
    background-repeat: no-repeat; background-size: 400% 100%; background-position: 0 0;
}
.lp-spr.lp-pose-alt     { background-position: 33.333% 0; }
.lp-spr.lp-pose-excited { background-position: 66.667% 0; }
.lp-spr.lp-pose-sleep   { background-position: 100% 0; }
.lp-spr.lp-pose-hidden  { background-position: 0 0; filter: brightness(0); opacity: 0.85; }
.lp-flood .lp-spr { animation: lp-flood 1.1s ease-out; }

.lp-breathe { animation: lp-breathe 2.8s ease-in-out infinite; }
.lp-animal.lp-squash { animation: lp-squash 0.35s ease-out; }
.lp-hop    { animation: lp-hop 0.75s cubic-bezier(0.3, 0.7, 0.4, 1); }
.lp-chew   { animation: lp-chew 0.28s ease-in-out 5; }
.lp-big    { font-size: 110px; }
.lp-q {
    position: absolute; top: -4px; right: -10px;
    width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--text-primary);
    font-family: var(--font-heavy); font-size: 16px; box-shadow: var(--shadow-sm);
}
.lp-q-big { width: 40px; height: 40px; font-size: 24px; right: -14px; }

/* ── The level board (LEARN-10) ─────────────────────────────
   12 green boxes (one per fact: empty → light → dark) over 12 grey
   review boxes (light → dark; in levels 7–12 outline → light → dark).
   The only progress display in a round. */
.lp-board { display: flex; flex-direction: column; gap: 5px; width: 100%; max-width: 560px; margin: 0 auto; }
/* A box is always 1/12 of the board, so a 12-fact board fills the row
   and a shorter one (Counting's 8, Make 10's 6) sits in the middle:
   auto-fit collapses the empty tracks and justify-content centres the rest. */
.lp-board-row { display: grid; grid-template-columns: repeat(auto-fit, calc((100% - 44px) / 12)); justify-content: center; gap: 4px; }
.lp-box {
    height: 26px; border-radius: 6px; border: 2px solid transparent;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-bold); font-size: 11px; line-height: 1; white-space: nowrap; overflow: hidden;
    transition: background 0.25s, border-color 0.25s, color 0.25s;
}
.lp-board-grey .lp-box { height: 16px; border-radius: 5px; }
.lp-g-0 { background: var(--surface); border-style: dashed; border-color: var(--border-strong); color: var(--text-tertiary); }
.lp-g-1 { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); }
.lp-g-2 { background: var(--success); border-color: var(--success); color: var(--on-primary); }
.lp .lp-g-2 { color: var(--on-primary); }
.lp-r-0 { background: transparent; border-color: var(--border-strong); }
.lp-r-1 { background: var(--learn-grey-light); border-color: var(--learn-grey-light); }
.lp-r-2 { background: var(--learn-grey-dark); border-color: var(--learn-grey-dark); }
.lp-box.is-asked { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary); }
.lp-box.lp-pop { animation: lp-pop 0.5s ease-out; }
.lp-round-board .lp-box { height: 30px; font-size: 12px; }
.lp-round-board .lp-board-grey .lp-box { height: 18px; }
.lp-board-camp .lp-box { height: 22px; font-size: 10px; }
.lp-board-camp .lp-board-grey .lp-box { height: 12px; }
@media (max-width: 360px) { .lp-box { font-size: 9px; } }

/* An animal's first look: "?" (before its shape is found). */
.lp-unknown {
    width: 1.1em; height: 1.1em; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface-2); color: var(--text-secondary);
    border: 2px dashed var(--border-strong);
}
.lp-unknown b { font-family: var(--font-heavy); font-size: 0.55em; }

/* ── The camp screen ───────────────────────────────────────── */
.lp-camp-screen { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lp-camp-stage { position: relative; flex: 1; min-height: 240px; }
.lp-hud { position: absolute; left: 10px; right: 10px; z-index: 40; display: flex; gap: 8px; align-items: center; }
.lp-hud-top { top: max(10px, env(safe-area-inset-top)); }
.lp-hud-gap { flex: 1; }
.lp-next {
    position: relative; z-index: 45;
    background: var(--surface); color: var(--text-primary);
    border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 16px 16px max(16px, env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: 12px;
}
.lp-next-head { display: flex; gap: 14px; align-items: center; }
.lp-next-ani { position: relative; font-size: 56px; flex: none; }
.lp-next-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-next-title { font-family: var(--font-heavy); font-size: 19px; line-height: 1.25; }
.lp-next-sub { color: var(--text-secondary); font-size: 15px; }
.lp-next .lp-row .lp-btn-primary { flex: 1; }
.lp-next-summit { text-align: center; }

.lp-landscape .lp-camp-screen { flex-direction: row; }
.lp-landscape .lp-next {
    width: min(380px, 40%); border-radius: 0; border-top-left-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-xl);
    justify-content: center;
}

/* ── The scene (a 2.5D diorama) ────────────────────────────── */
.lp-scene { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
.lp-sky { position: absolute; inset: 0; z-index: 0; }
.lp-sky-night { opacity: 0; transition: opacity 1.2s; }
.lp-scene.is-night .lp-sky-night { opacity: 1; }
.lp-theme-canyon .lp-sky-day   { background: linear-gradient(var(--learn-canyon-day-top), var(--learn-canyon-day-bot)); }
.lp-theme-canyon .lp-sky-night { background: linear-gradient(var(--learn-canyon-night-top), var(--learn-canyon-night-bot)); }
.lp-sun {
    position: absolute; right: 12%; top: 16%; width: 50px; height: 50px; border-radius: 50%; z-index: 0;
    background: var(--learn-sun); box-shadow: 0 0 40px 14px var(--learn-sun-glow);
    transition: opacity 1s, transform 1.2s;
}
.lp-moon {
    position: absolute; right: 14%; top: 17%; width: 38px; height: 38px; border-radius: 50%; z-index: 0;
    box-shadow: -10px 4px 0 0 var(--learn-moon); opacity: 0; transition: opacity 1.2s;
}
.lp-scene.is-night .lp-sun  { opacity: 0; transform: translateY(60px); }
.lp-scene.is-night .lp-moon { opacity: 1; }
.lp-stars { position: absolute; left: 0; top: 0; right: 0; height: 40%; opacity: 0; transition: opacity 1.5s; z-index: 0; }
.lp-scene.is-night .lp-stars { opacity: 1; }
.lp-stars i { position: absolute; border-radius: 50%; background: var(--learn-star); animation: lp-twinkle 3s ease-in-out infinite; }
.lp-mesa { position: absolute; left: 0; width: 100%; z-index: 1; pointer-events: none; transition: filter 1.2s; }
.lp-scene.is-night .lp-mesa { filter: brightness(0.42) saturate(0.7); }
.lp-theme-canyon .lp-rock-far  { fill: var(--learn-canyon-rock-far); }
.lp-theme-canyon .lp-rock-dark { fill: var(--learn-canyon-rock-dark); opacity: 0.35; }
.lp-theme-canyon .lp-rock      { fill: var(--learn-canyon-rock); }
.lp-ground { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; }
.lp-theme-canyon .lp-ground { background: linear-gradient(var(--learn-canyon-sand-far), var(--learn-canyon-sand-near)); }
.lp-pool { position: absolute; z-index: 2; border-radius: 50%; }
.lp-theme-canyon .lp-pool {
    background: radial-gradient(ellipse at 40% 40%, var(--learn-canyon-pool) 55%, var(--learn-canyon-pool-edge));
}
.lp-world { position: absolute; inset: 0; z-index: 3; }
.lp-veil {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3000;
    pointer-events: none; opacity: 0; transition: opacity 1.2s;
}
.lp-scene.is-night .lp-veil { opacity: 1; }

.lp-prop, .lp-agent, .lp-fire, .lp-treat {
    position: absolute; left: 0; top: 0; width: 0; height: 0;
    pointer-events: none; will-change: transform;
}
.lp-pe {
    position: absolute; left: 0; bottom: -0.1em; transform: translateX(-50%);
    line-height: 1; display: block; white-space: nowrap;
}

.lp-agent .lp-shadow {
    position: absolute; left: 0; top: -6px; width: 48px; height: 12px; border-radius: 50%;
    background: radial-gradient(closest-side, var(--learn-shadow), transparent);
    transform: translateX(-50%);
}
.lp-agent-body { position: absolute; left: 0; bottom: 0; pointer-events: auto; cursor: pointer; }
.lp-face { display: block; transform-origin: 50% 100%; font-size: 58px; }
.lp-agent.is-hang .lp-face .lp-emo-in { transform: rotate(180deg); transform-origin: 50% 50%; }
/* `rotate` (not transform) so it stacks on the breathing animation. */
.lp-agent.is-hang .lp-face .lp-spr { rotate: 180deg; }
/* LEARN-17: a swimmer sits IN the water. The face drops by the part the
   clip hides (translate % is of its own height), so the waterline lands
   on the animal's spot instead of the clipped body floating above it on
   the far rim ("hiding behind the water"). No shadow on water; !important
   beats the opacity draw() writes inline every frame. */
.lp-agent.is-swim .lp-face { clip-path: inset(0 0 38% 0); translate: 0 38%; }
.lp-agent.is-swim .lp-shadow { opacity: 0 !important; }
.lp-zz { position: absolute; right: -6px; top: -4px; font-size: 18px; display: none; animation: lp-zz 2.4s ease-in-out infinite; }
.lp-agent.is-sleeping .lp-zz { display: block; }
.lp-scene.is-readonly .lp-agent-body { cursor: default; }

.lp-fire-glow {
    position: absolute; left: 0; bottom: -50px; width: 280px; height: 150px; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(closest-side, var(--learn-fire-glow), var(--learn-fire-clear)); transition: opacity 0.8s;
}
.lp-fire-ring {
    position: absolute; left: 0; bottom: -14px; width: 92px; height: 26px; transform: translateX(-50%); border-radius: 50%;
    border: 6px solid var(--learn-fire-ring); background: var(--learn-shadow);
}
.lp-fire-logs  { font-size: 34px; }
.lp-fire-flame { bottom: 6px; transform-origin: 50% 100%; animation: lp-flick 0.8s ease-in-out infinite alternate; transition: font-size 0.6s; }
.lp-fire-flame[hidden] { display: none; }

/* ── LEARN-09: the drawn camp. Each piece sits on its own base line,
   centred on its (x, d) point, like the emoji it replaces. ── */
.lp-backdrop { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-repeat: no-repeat; }
.lp-bd-night { opacity: 0; transition: opacity 1.2s; }
.lp-scene.is-night .lp-bd-night { opacity: 1; }
.lp-scene.has-backdrop .lp-mesa, .lp-scene.has-backdrop .lp-ground { display: none; }
/* The night painting is already dark: the veil only keeps the firelight pool. */
.lp-scene.has-backdrop.is-night .lp-veil { opacity: 0.8; }
/* …and the drawn props take on the painting's moonlight (the fire and the
   animals are left to the veil, so the firelight still reaches them). */
.lp-scene.has-backdrop .lp-prop, .lp-scene.has-backdrop .lp-pool { transition: filter 1.2s; }
.lp-scene.has-backdrop.is-night .lp-prop, .lp-scene.has-backdrop.is-night .lp-pool { filter: brightness(0.62) saturate(0.45); }
.lp-scene .lp-pool.has-art { background-repeat: no-repeat; background-size: 100% 100%; background-position: 50% 50%; border-radius: 0; }
.lp-pimg, .lp-fimg, .lp-timg {
    display: block; max-width: none; pointer-events: none;
    user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}
.lp-pimg { position: absolute; left: 0; bottom: -2px; width: auto; transform: translateX(-50%); }
.lp-fimg { position: absolute; left: 0; bottom: -10px; width: 118px; height: auto; transform: translateX(-50%); }
.lp-fimg-b { opacity: 0; }
.lp-fire.is-full .lp-fimg-a { animation: lp-fire-a 0.9s step-end infinite; }
.lp-fire.is-full .lp-fimg-b { animation: lp-fire-b 0.9s step-end infinite; }
.lp-timg { height: 20px; width: auto; }
/* An animal at camp stands ON its shadow. As an inline box it sat on the
   text baseline, ~0.2em above the bottom of its line (the descender gap). */
.lp-agent .lp-spr { display: block; }
.lp-treat .lp-pe { font-size: 28px; animation: lp-drop 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.lp-treat.is-eaten .lp-pe { transform: translateX(-50%) scale(0); transition: transform 0.3s; animation: none; }
.lp-heart { position: absolute; z-index: 4500; pointer-events: none; font-size: 18px; animation: lp-rise 1.1s ease-out forwards; }

.lp-camp-empty {
    position: absolute; left: 50%; top: 34%; transform: translateX(-50%); z-index: 4000;
    width: min(300px, 82%); text-align: center;
    background: var(--learn-hud-bg); color: var(--learn-hud-ink);
    border-radius: var(--radius-lg); padding: 12px 14px; font-size: 16px;
}
.lp-camp-empty[hidden] { display: none; }
.lp-acard {
    position: absolute; left: 50%; top: 64px; z-index: 5000; transform: translateX(-50%);
    width: min(360px, 92%); display: flex; gap: 12px; align-items: flex-start;
    background: var(--surface); color: var(--text-primary);
    border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow-lg);
    pointer-events: auto;
}
.lp-acard[hidden] { display: none; }
.lp-acard-ani { font-size: 52px; flex: none; }
.lp-acard-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lp-acard-text b { font-family: var(--font-heavy); font-size: 17px; }
.lp-acard-fact { font-size: 16px; line-height: 1.35; margin-top: 2px; }   /* LEARN-14: the animal's fact */

/* ── Overlays: map, field guide, story beat, rescue panels ─── */
.lp-overlay {
    position: absolute; inset: 0; z-index: 50;
    background: var(--overlay-scrim);
    display: flex; align-items: flex-end; justify-content: center;
}
.lp-sheet {
    width: 100%; max-width: 560px; max-height: 92%;
    display: flex; flex-direction: column;
    background: var(--surface); color: var(--text-primary);
    border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl);
    box-shadow: var(--shadow-sheet);
}
.lp-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 12px 8px 20px; font-size: 19px; font-family: var(--font-heavy);
}
.lp-map-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.lp-sheet-foot { padding: 10px 16px max(14px, env(safe-area-inset-bottom)); display: flex; border-top: 1px solid var(--border); }
.lp-sheet-foot .lp-btn { flex: 1; }
.lp-landscape .lp-overlay { align-items: center; }
.lp-landscape .lp-sheet { max-height: 96%; border-radius: var(--radius-xl); }

.lp-overlay-panels { align-items: center; background: var(--learn-canyon-night-top); }
.lp-panel {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 18px; padding: 24px 20px; text-align: center;
    color: var(--learn-star); cursor: pointer;
}
.lp-panel-in { display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 460px; }
.lp-panel-art { position: relative; min-height: 130px; display: flex; align-items: flex-end; }
.lp-panel-title { font-family: var(--font-heavy); font-size: 26px; line-height: 1.25; }
.lp-panel-summit { font-size: 32px; }
.lp-panel-name { font-family: var(--font-heavy); font-size: 30px; text-transform: capitalize; }
.lp-panel-sub { font-size: 18px; color: var(--learn-moon); }
.lp-panel-pay {
    font-family: var(--font-heavy); font-size: 20px;
    background: var(--learn-key-glow); color: var(--learn-key-glow-ink);
    border-radius: 999px; padding: 8px 18px;
}
.lp-panel-tap { font-size: 14px; color: var(--learn-moon); opacity: 0.8; }
.lp-panel .lp-btn-primary { margin-top: 8px; }
.lp-flood .lp-emo-in { animation: lp-flood 1.1s ease-out; }
.lp-panel-enter { animation: lp-panel-in 0.4s ease-out; }
.lp-summit-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; font-size: 34px; max-width: 420px; }

/* The field guide */
.lp-guide {
    list-style: none; margin: 0; padding: 4px 12px 20px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px;
    overflow-y: auto;
}
.lp-guide-card {
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    background: var(--surface-2); border-radius: var(--radius-md); padding: 10px 6px;
}
.lp-guide-ani { position: relative; font-size: 44px; }
.lp-guide-name { font-family: var(--font-bold); font-size: 14px; text-transform: capitalize; }
.lp-guide-sub, .lp-guide-n { font-size: 12px; color: var(--text-secondary); }

/* ── The trail (the map) ───────────────────────────────────── */
.lp-map { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.lp-theme-canyon.lp-map { background: linear-gradient(var(--learn-canyon-sky), var(--learn-canyon-sand)); }
.lp-map-svg { display: block; width: 100%; height: auto; }
.lp-theme-canyon .lp-map-rock-far { fill: var(--learn-canyon-rock); opacity: 0.35; }

/* ── LEARN-11: the other themes. Same rules as Canyon's, each theme's
   own tokens. The painted backdrop hides the mesa, ground and pool
   fallbacks once a theme's art is in; the sky is always these. ── */
.lp-theme-arctic .lp-sky-day   { background: linear-gradient(var(--learn-arctic-day-top), var(--learn-arctic-day-bot)); }
.lp-theme-arctic .lp-sky-night { background: linear-gradient(var(--learn-arctic-night-top), var(--learn-arctic-night-bot)); }
.lp-theme-arctic .lp-rock-far  { fill: var(--learn-arctic-rock-far); }
.lp-theme-arctic .lp-rock-dark { fill: var(--learn-arctic-rock-dark); opacity: 0.35; }
.lp-theme-arctic .lp-rock      { fill: var(--learn-arctic-rock); }
.lp-theme-arctic .lp-ground { background: linear-gradient(var(--learn-arctic-sand-far), var(--learn-arctic-sand-near)); }
.lp-theme-arctic .lp-pool { background: radial-gradient(ellipse at 40% 40%, var(--learn-arctic-pool) 55%, var(--learn-arctic-pool-edge)); }
.lp-theme-arctic.lp-map { background: linear-gradient(var(--learn-arctic-sky), var(--learn-arctic-sand)); }
.lp-theme-arctic .lp-map-rock-far { fill: var(--learn-arctic-rock); opacity: 0.35; }

.lp-theme-island .lp-sky-day   { background: linear-gradient(var(--learn-island-day-top), var(--learn-island-day-bot)); }
.lp-theme-island .lp-sky-night { background: linear-gradient(var(--learn-island-night-top), var(--learn-island-night-bot)); }
.lp-theme-island .lp-rock-far  { fill: var(--learn-island-rock-far); }
.lp-theme-island .lp-rock-dark { fill: var(--learn-island-rock-dark); opacity: 0.35; }
.lp-theme-island .lp-rock      { fill: var(--learn-island-rock); }
.lp-theme-island .lp-ground { background: linear-gradient(var(--learn-island-sand-far), var(--learn-island-sand-near)); }
.lp-theme-island .lp-pool { background: radial-gradient(ellipse at 40% 40%, var(--learn-island-pool) 55%, var(--learn-island-pool-edge)); }
.lp-theme-island.lp-map { background: linear-gradient(var(--learn-island-sky), var(--learn-island-sand)); }
.lp-theme-island .lp-map-rock-far { fill: var(--learn-island-rock); opacity: 0.35; }

.lp-theme-jungle .lp-sky-day   { background: linear-gradient(var(--learn-jungle-day-top), var(--learn-jungle-day-bot)); }
.lp-theme-jungle .lp-sky-night { background: linear-gradient(var(--learn-jungle-night-top), var(--learn-jungle-night-bot)); }
.lp-theme-jungle .lp-rock-far  { fill: var(--learn-jungle-rock-far); }
.lp-theme-jungle .lp-rock-dark { fill: var(--learn-jungle-rock-dark); opacity: 0.35; }
.lp-theme-jungle .lp-rock      { fill: var(--learn-jungle-rock); }
.lp-theme-jungle .lp-ground { background: linear-gradient(var(--learn-jungle-sand-far), var(--learn-jungle-sand-near)); }
.lp-theme-jungle .lp-pool { background: radial-gradient(ellipse at 40% 40%, var(--learn-jungle-pool) 55%, var(--learn-jungle-pool-edge)); }
.lp-theme-jungle.lp-map { background: linear-gradient(var(--learn-jungle-sky), var(--learn-jungle-sand)); }
.lp-theme-jungle .lp-map-rock-far { fill: var(--learn-jungle-rock); opacity: 0.35; }

.lp-theme-ocean .lp-sky-day   { background: linear-gradient(var(--learn-ocean-day-top), var(--learn-ocean-day-bot)); }
.lp-theme-ocean .lp-sky-night { background: linear-gradient(var(--learn-ocean-night-top), var(--learn-ocean-night-bot)); }
.lp-theme-ocean .lp-rock-far  { fill: var(--learn-ocean-rock-far); }
.lp-theme-ocean .lp-rock-dark { fill: var(--learn-ocean-rock-dark); opacity: 0.35; }
.lp-theme-ocean .lp-rock      { fill: var(--learn-ocean-rock); }
.lp-theme-ocean .lp-ground { background: linear-gradient(var(--learn-ocean-sand-far), var(--learn-ocean-sand-near)); }
.lp-theme-ocean .lp-pool { background: radial-gradient(ellipse at 40% 40%, var(--learn-ocean-pool) 55%, var(--learn-ocean-pool-edge)); }
.lp-theme-ocean.lp-map { background: linear-gradient(var(--learn-ocean-sky), var(--learn-ocean-sand)); }
.lp-theme-ocean .lp-map-rock-far { fill: var(--learn-ocean-rock); opacity: 0.35; }

.lp-theme-outback .lp-sky-day   { background: linear-gradient(var(--learn-outback-day-top), var(--learn-outback-day-bot)); }
.lp-theme-outback .lp-sky-night { background: linear-gradient(var(--learn-outback-night-top), var(--learn-outback-night-bot)); }
.lp-theme-outback .lp-rock-far  { fill: var(--learn-outback-rock-far); }
.lp-theme-outback .lp-rock-dark { fill: var(--learn-outback-rock-dark); opacity: 0.35; }
.lp-theme-outback .lp-rock      { fill: var(--learn-outback-rock); }
.lp-theme-outback .lp-ground { background: linear-gradient(var(--learn-outback-sand-far), var(--learn-outback-sand-near)); }
.lp-theme-outback .lp-pool { background: radial-gradient(ellipse at 40% 40%, var(--learn-outback-pool) 55%, var(--learn-outback-pool-edge)); }
.lp-theme-outback.lp-map { background: linear-gradient(var(--learn-outback-sky), var(--learn-outback-sand)); }
.lp-theme-outback .lp-map-rock-far { fill: var(--learn-outback-rock); opacity: 0.35; }

.lp-theme-rainforest .lp-sky-day   { background: linear-gradient(var(--learn-rainforest-day-top), var(--learn-rainforest-day-bot)); }
.lp-theme-rainforest .lp-sky-night { background: linear-gradient(var(--learn-rainforest-night-top), var(--learn-rainforest-night-bot)); }
.lp-theme-rainforest .lp-rock-far  { fill: var(--learn-rainforest-rock-far); }
.lp-theme-rainforest .lp-rock-dark { fill: var(--learn-rainforest-rock-dark); opacity: 0.35; }
.lp-theme-rainforest .lp-rock      { fill: var(--learn-rainforest-rock); }
.lp-theme-rainforest .lp-ground { background: linear-gradient(var(--learn-rainforest-sand-far), var(--learn-rainforest-sand-near)); }
.lp-theme-rainforest .lp-pool { background: radial-gradient(ellipse at 40% 40%, var(--learn-rainforest-pool) 55%, var(--learn-rainforest-pool-edge)); }
.lp-theme-rainforest.lp-map { background: linear-gradient(var(--learn-rainforest-sky), var(--learn-rainforest-sand)); }
.lp-theme-rainforest .lp-map-rock-far { fill: var(--learn-rainforest-rock); opacity: 0.35; }

.lp-theme-savanna .lp-sky-day   { background: linear-gradient(var(--learn-savanna-day-top), var(--learn-savanna-day-bot)); }
.lp-theme-savanna .lp-sky-night { background: linear-gradient(var(--learn-savanna-night-top), var(--learn-savanna-night-bot)); }
.lp-theme-savanna .lp-rock-far  { fill: var(--learn-savanna-rock-far); }
.lp-theme-savanna .lp-rock-dark { fill: var(--learn-savanna-rock-dark); opacity: 0.35; }
.lp-theme-savanna .lp-rock      { fill: var(--learn-savanna-rock); }
.lp-theme-savanna .lp-ground { background: linear-gradient(var(--learn-savanna-sand-far), var(--learn-savanna-sand-near)); }
.lp-theme-savanna .lp-pool { background: radial-gradient(ellipse at 40% 40%, var(--learn-savanna-pool) 55%, var(--learn-savanna-pool-edge)); }
.lp-theme-savanna.lp-map { background: linear-gradient(var(--learn-savanna-sky), var(--learn-savanna-sand)); }
.lp-theme-savanna .lp-map-rock-far { fill: var(--learn-savanna-rock); opacity: 0.35; }

.lp-theme-ocean .lp-fire-glow { background: radial-gradient(closest-side, var(--learn-ocean-fire-glow), var(--learn-ocean-fire-clear)); }
.lp-seg { fill: none; stroke-width: 10; stroke-linecap: round; }
.lp-seg-done  { stroke: var(--learn-trail-done); }
.lp-seg-open  { stroke: var(--learn-trail); }
.lp-seg-ahead { stroke: var(--learn-trail); opacity: 0.45; stroke-dasharray: 0.012 0.03; stroke-width: 7; }
.lp-seg-draw  { stroke-dasharray: 1; stroke-dashoffset: 1; animation: lp-draw 1.4s ease-out 0.3s forwards; }
.lp-stop { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.lp-landmark {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--learn-canyon-rock); border: 4px solid var(--surface); box-shadow: var(--shadow-sm);
}
.lp-stop-half .lp-landmark { width: 20px; height: 20px; border-width: 3px; }
.lp-stop-done .lp-landmark { background: var(--learn-trail-done); }
.lp-stop-open .lp-landmark { background: var(--learn-gate); }
.lp-stop-ahead .lp-landmark { background: var(--learn-trail); }
.lp-stop-summit .lp-landmark { width: 44px; height: 44px; }
/* A stop's label and animal sit TOGETHER, outside the path (LEARN-10),
   so the pin — always on the path — never covers a label. */
.lp-stop-tag {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 100px; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center;
}
.lp-side-l .lp-stop-tag { right: 100%; margin-right: 8px; }
.lp-side-r .lp-stop-tag { left: 100%; margin-left: 8px; }
.lp-stop-name {
    background: var(--learn-hud-bg); color: var(--learn-hud-ink);
    border-radius: 10px; padding: 2px 8px; font-size: 12px; line-height: 1.25; font-family: var(--font-bold);
}
.lp-stop-ani { position: relative; font-size: 34px; line-height: 1; }
.lp-stop-half .lp-stop-ani { font-size: 26px; }
.lp-stop-ahead .lp-stop-ani { opacity: 0.6; }
.lp-stop-prog {
    background: var(--learn-gate); color: var(--on-primary);
    border-radius: 8px; padding: 2px 6px; font-size: 11px; font-family: var(--font-bold); line-height: 1.3;
}
.lp .lp-stop-prog { color: var(--learn-star); }
/* The pin, in the kid's member colour (set inline). */
.lp-pin {
    position: absolute; z-index: 5; width: 26px; height: 26px;
    border-radius: 50% 50% 50% 0; border: 3px solid var(--text-primary); box-shadow: var(--shadow-md);
    transform: translate(-50%, -100%) rotate(-45deg); transform-origin: 50% 50%;
    margin-top: -4px;
}
.lp-pin::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px;
    border-radius: 50%; background: var(--surface);
}
.lp-trailhead {
    position: absolute; transform: translate(-50%, -50%);
    background: var(--learn-hud-bg); color: var(--learn-hud-ink);
    border-radius: 999px; padding: 2px 10px; font-size: 13px; font-family: var(--font-bold);
}

/* ── The round ─────────────────────────────────────────────── */
.lp-round {
    flex: 1; min-height: 0; display: flex; flex-direction: column;
    padding: max(10px, env(safe-area-inset-top)) 14px max(12px, env(safe-area-inset-bottom));
    gap: 10px;
}
.lp-round-top { display: flex; align-items: center; gap: 10px; }
.lp-round-top .lp-x { background: var(--surface-2); box-shadow: none; }
.lp .lp-round-top .lp-x { color: var(--text-primary); }
.lp-round-board { width: 100%; }
/* The round's goal (LEARN-10 v2.1): why the round ends, in words. */
.lp-goal { text-align: center; font-family: var(--font-heavy); font-size: 17px; line-height: 1.2; color: var(--text-primary); }
.lp .lp-goal { color: var(--text-primary); }
/* A fact missed twice is shown before it comes back. */
.lp-overlay-reteach { align-items: center; }
.lp-reteach {
    width: calc(100% - 32px); max-width: 420px; margin: 16px;
    background: var(--surface); color: var(--text-primary); box-shadow: var(--shadow-lg);
    border-radius: var(--radius-xl); padding: 28px 24px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
}

.lp-q-area {
    flex: 1; min-height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.lp-question {
    font-family: var(--font-heavy); line-height: 1.1; text-align: center; white-space: nowrap;
    display: flex; align-items: center; justify-content: center; gap: 0.2em;
}
.lp-q-l { font-size: clamp(44px, 14vw, 76px); }
.lp-q-m { font-size: clamp(38px, 11vw, 64px); }
.lp-q-s { font-size: clamp(30px, 9vw, 52px); }
.lp-slot { display: inline-flex; gap: 0.08em; }
.lp-slot i {
    font-style: normal; display: inline-flex; align-items: center; justify-content: center;
    width: 0.8em; height: 1.1em; border-radius: 0.14em;
    border: 0.05em solid var(--border-strong); background: var(--surface);
}
.lp-slot i.is-filled { border-color: var(--primary); }
/* Wrong (LEARN-10): the typed digits go red, then the right answer in PLAIN ink — never green. */
.lp-slot.is-wrong i { border-color: var(--danger); color: var(--danger); }
.lp-slot.is-shown i { border-color: var(--border-strong); background: var(--surface); color: var(--text-primary); }
.lp-slot.lp-shake { animation: lp-shake 0.45s ease-in-out; }
/* The `objects` prompt (LEARN-20): the theme's food to count, laid out
   by the server in cell units (positions are inline percentages). A
   tapped thing gets its number; the hint's numbers are quieter. */
.lp-objs-wrap { width: 100%; display: flex; justify-content: center; align-items: center; }
/* With things to count, the drawing takes the room the round leaves
   (fitObjects() sizes it) and the pad gives a little back. */
.lp-round.has-objs .lp-q-area { min-height: 0; gap: 8px; }
.lp-round.has-objs .lp-objs-wrap { flex: 1 1 0; min-height: 0; }
.lp-round.has-objs .lp-question { font-size: clamp(26px, 7.5vw, 48px); }
.lp-round.has-objs .lp-key { min-height: 48px; font-size: 26px; }
.lp-round.has-objs .lp-pad { gap: 6px; }
.lp-objs-wrap:empty { display: none; }
.lp-objs { position: relative; flex: none; }
.lp-obj-slot {
    position: absolute; box-sizing: border-box;
    border: 2px solid var(--border-strong); background: var(--surface);
}
.lp-obj {
    position: absolute; padding: 0; margin: 0; border: 0; background: none;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
    border-radius: 22%;
}
.lp-obj-img { width: 88%; height: 88%; object-fit: contain; pointer-events: none; transition: transform 0.12s, opacity 0.12s; }
.lp-obj-emo { font-size: 1.6em; line-height: 1; pointer-events: none; }
.lp-objs .lp-obj-emo { font-size: min(34px, 7vw); }
.lp-obj:active .lp-obj-img { transform: scale(0.9); }
.lp-obj.is-marked .lp-obj-img, .lp-obj.is-marked .lp-obj-emo { opacity: 0.55; }
.lp-obj-n {
    position: absolute; right: -4%; top: -4%; min-width: 58%; height: 58%;
    display: none; align-items: center; justify-content: center; padding: 0 3px; box-sizing: border-box;
    border-radius: 999px; background: var(--primary); color: var(--on-primary);
    font-family: var(--font-heavy); font-size: min(15px, 3.6vw); line-height: 1; pointer-events: none;
}
.lp-obj.is-marked .lp-obj-n { display: flex; }
.lp-obj.is-hinted .lp-obj-n { background: var(--learn-key-glow); color: var(--learn-key-glow-ink); }
.lp-teach .lp-objs, .lp-reteach .lp-objs { margin: 4px auto; }
.lp-teach-fact.lp-teach-fact-s { font-size: clamp(32px, 9vw, 52px); }
.lp-landscape .lp-objs-wrap { flex: none; }

.lp-bonus { width: min(320px, 80%); height: 10px; border-radius: 5px; background: var(--surface-2); overflow: hidden; }
.lp-bonus span { display: block; height: 100%; background: var(--learn-bar); transform-origin: 0 50%; }

.lp-controls { display: flex; flex-direction: column; gap: 10px; }
.lp-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lp-key {
    min-height: 64px; border-radius: var(--radius-lg);
    border: 1px solid var(--border); background: var(--surface);
    font-family: var(--font-heavy); font-size: 30px; color: var(--text-primary);
    box-shadow: var(--shadow-xs);
    transition: transform 0.08s, background 0.2s;
}
.lp .lp-key { color: var(--text-primary); }
.lp-key:active { transform: scale(0.95); background: var(--surface-2); }
.lp-key-back { font-size: 26px; }
.lp .lp-key.is-glow { background: var(--learn-key-glow); border-color: var(--learn-key-glow); color: var(--learn-key-glow-ink); }
.lp .lp-key.is-dim  { background: var(--surface-2); color: var(--text-tertiary); box-shadow: none; }
.lp-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
.lp-choice { min-height: 64px; font-size: 24px; }
.lp-aids { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-aid { min-width: 112px; }
.lp-streak { font-family: var(--font-heavy); font-size: 18px; }

.lp-landscape .lp-round {
    display: grid; grid-template-columns: 1fr minmax(300px, 42%);
    grid-template-rows: auto auto auto 1fr; column-gap: 24px;
}
.lp-landscape .lp-controls { grid-column: 2; grid-row: 1 / span 4; justify-content: center; }
.lp-landscape .lp-round-top, .lp-landscape .lp-goal, .lp-landscape .lp-round-board, .lp-landscape .lp-q-area { grid-column: 1; }

.lp-q-area.lp-stamp { animation: lp-stamp 0.45s ease-out; }
.lp-q-area.lp-shake { animation: lp-shake 0.45s ease-in-out; }
.lp-fly {
    position: absolute; z-index: 60; pointer-events: none;
    transform: translate(0, 0); transition: transform 0.6s cubic-bezier(0.5, 0, 0.7, 1), opacity 0.6s;
    font-family: var(--font-heavy); font-size: 22px; color: var(--learn-food);
    margin: -14px 0 0 -24px;
}

/* The teach card */
.lp-teach {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 24px; text-align: center; cursor: pointer;
}
.lp-teach-k { font-size: 20px; color: var(--text-secondary); font-family: var(--font-bold); }
.lp-teach-fact { font-size: clamp(44px, 13vw, 72px); font-family: var(--font-heavy); }
.lp-teach-tap { font-size: 15px; color: var(--text-secondary); }

/* The round card */
.lp-roundcard {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
    padding: 24px 18px; text-align: center; overflow-y: auto;
}
.lp-card-title { font-family: var(--font-heavy); font-size: 28px; }
.lp-card-food { font-size: 20px; font-family: var(--font-bold); }
.lp-card-sub { font-size: 16px; color: var(--text-secondary); }
.lp-card-h { font-size: 14px; color: var(--text-secondary); font-family: var(--font-bold); text-transform: uppercase; letter-spacing: 0.04em; }
.lp-card-tiles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.lp-card-tiles li { background: var(--success-soft); color: var(--success-ink); border-radius: 999px; padding: 6px 12px; font-family: var(--font-bold); }
.lp-card-board { width: 100%; max-width: 480px; }
/* A moment ON the card: the shape, a rescue, the Summit. No overlay. */
.lp-moment {
    display: flex; align-items: center; gap: 12px; width: 100%; max-width: 420px;
    background: var(--surface-2); border-radius: var(--radius-lg); padding: 10px 14px; text-align: left;
}
.lp-moment-art { font-size: 64px; line-height: 1; flex: none; }
.lp-moment-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.lp-moment-text b { font-family: var(--font-heavy); font-size: 18px; }
.lp-moment-text > span { color: var(--text-secondary); font-size: 14px; }
.lp-moment-summit .lp-summit-row { font-size: 22px; justify-content: flex-start; }
.lp-pay-chip {
    flex: none; font-family: var(--font-heavy); font-size: 15px;
    background: var(--success-soft); color: var(--success-ink); border-radius: 999px; padding: 4px 10px;
}
.lp-card-btns { margin-top: 8px; width: 100%; max-width: 420px; }
.lp-card-btns .lp-btn { flex: 1; }
/* LEARN-13: on a phone the card's buttons are full width, stacked —
   Keep playing on top (it's first in the markup). */
@media (max-width: 640px) {
    .lp-card-btns { flex-direction: column; flex-wrap: nowrap; max-width: none; }
    .lp-card-btns .lp-btn { width: 100%; flex: none; }
}

/* ── Keyframes ─────────────────────────────────────────────── */
@keyframes lp-spin    { to { transform: rotate(360deg); } }
@keyframes lp-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.965); } }
@keyframes lp-squash  { 0% { transform: scale(1.1, 0.86); } 100% { transform: none; } }
@keyframes lp-hop     { 0% { transform: scale(1.1, 0.85); } 25% { transform: translateY(-28px) scale(0.95, 1.08); } 60% { transform: translateY(-4px); } 80% { transform: scale(1.06, 0.92); } 100% { transform: none; } }
@keyframes lp-chew    { 0%, 100% { transform: none; } 50% { transform: scale(1.04, 0.94) translateY(2px); } }
@keyframes lp-zz      { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(10px, -20px); opacity: 0; } }
@keyframes lp-flick   { 0% { transform: translateX(-50%) scale(1, 1); } 100% { transform: translateX(-50%) scale(1.08, 0.92) skewX(3deg); } }
@keyframes lp-drop    { 0% { transform: translate(-50%, -80px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }
@keyframes lp-rise    { 0% { transform: translateY(0) scale(0.5); opacity: 1; } 100% { transform: translateY(-56px) scale(1.15); opacity: 0; } }
@keyframes lp-twinkle { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.35; } }
@keyframes lp-stamp   { 0% { transform: scale(1); } 35% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes lp-shake   { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes lp-fire-a  { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes lp-fire-b  { 0% { opacity: 0; } 50% { opacity: 1; } }
@keyframes lp-flood   { 0% { filter: brightness(0); } 100% { filter: none; } }
@keyframes lp-panel-in{ 0% { opacity: 0; transform: translateY(12px); } 100% { opacity: 1; transform: none; } }
@keyframes lp-draw    { to { stroke-dashoffset: 0; } }
@keyframes lp-pop     { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ── Reduced motion: every animation above stops ───────────── */
@media (prefers-reduced-motion: reduce) {
    .lp-spinner { animation-duration: 3s; }
    .lp-breathe, .lp-animal.lp-squash, .lp-hop, .lp-chew, .lp-flood .lp-emo-in,
    .lp-panel-enter, .lp-q-area.lp-stamp, .lp-q-area.lp-shake, .lp-slot.lp-shake, .lp-box.lp-pop,
    .lp-fire-flame, .lp-stars i, .lp-treat .lp-pe, .lp-zz, .lp-flood .lp-spr,
    .lp-fire.is-full .lp-fimg-a, .lp-fire.is-full .lp-fimg-b { animation: none; }
    .lp-heart, .lp-fly { display: none; }
    .lp-seg-draw { animation: none; stroke-dashoffset: 0; }
    .lp-toast, .lp-sky-night, .lp-veil, .lp-sun, .lp-moon, .lp-stars, .lp-mesa,
    .lp-box, .lp-key, .lp-emo-in, .lp-fire-glow, .lp-fire-flame, .lp-bd-night,
    .lp-scene.has-backdrop .lp-prop, .lp-scene.has-backdrop .lp-pool { transition: none; }
    .lp-key:active { transform: none; }
}