/* La Senda Viva — walkable world (Fase 1). Candidate C: tilted-tapestry ¾ (ALttP).
   Perf: transform/opacity/filter only. Mobile-first. prefers-reduced-motion respected. */
:root{
  --jungle-deep:#0D2405; --jungle:#1A3A0A; --jungle-mid:#2D5016; --jungle-lit:#3E6B1E;
  --river-teal:#1C5B63; --river-blue:#2E7C9E; --night:#0A1436; --night2:#13235A;
  --gold:#E8B23A; --gold-hi:#F7D577; --gold-deep:#B67C1E; --cream:#F3E7C6;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:#000;font-family:'Georgia',serif;overflow:hidden;
  height:100%;touch-action:none;-webkit-user-select:none;user-select:none}

/* Phone viewport — the window the camera looks through */
.viewport{position:relative;width:390px;height:844px;margin:0 auto;overflow:hidden;cursor:pointer;
  background:linear-gradient(#0A1436 0%,#13235A 15%,#123a4a 23%,#16400E 30%,#1A3A0A 40%,#0D2405 100%);}

/* Camera — JS translates this to follow Yaguará */
.camera{position:absolute;left:0;top:0;will-change:transform}

/* The tilted tapestry ground (size set by JS from world.json). The lean is read via the
   woven weave, the gold stitched selvage, a horizon haze up top, and depth-scaled actors. */
.world{position:absolute;left:0;top:0;border-radius:46% 46% 8% 8% / 12% 12% 4% 4%;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 2px, transparent 2px 9px),
    radial-gradient(120% 62% at 50% 8%, #2E5A20 0%, #24491A 26%, #1A3A0A 55%, #12300A 80%, #0B2205 100%);
  box-shadow:inset 0 40px 90px rgba(0,0,0,.42), inset 0 -40px 70px rgba(0,0,0,.5);}
/* stitched gold selvage rim */
.world::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  border:5px solid transparent;
  background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 16px) top/100% 5px no-repeat,
    repeating-linear-gradient(90deg,var(--gold-deep) 0 8px,transparent 8px 16px) top/100% 5px no-repeat;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.8;}

.scenery{position:absolute;left:0;top:0;pointer-events:none}

/* Actors (characters / props) positioned by JS in world coords, depth-scaled by y */
.actor{position:absolute;transform-origin:50% 100%;pointer-events:none;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.actor img{display:block;width:100%;height:auto}
.shadow{position:absolute;border-radius:50%;transform-origin:50% 50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(0,0,0,.5), rgba(0,0,0,0))}

/* Turnaround walker: .actor > .flipper (facing mirror, scaleX) > .bobber (walk bob) > svg.
   Bob lives on .bobber so it never fights the facing-mirror transform on .flipper. */
.walker .flipper,.walker .bobber{display:block;width:100%;transform-origin:50% 100%}
/* walk bob — gentle body-cycle for any walker without an articulated leg rig (avatars, non-¾) */
.actor.bob.walking .bobber{animation:walkbob .42s steps(2,end) infinite}
@keyframes walkbob{0%{transform:translateY(0)}50%{transform:translateY(-3px) rotate(-1deg)}100%{transform:translateY(0)}}
/* A/B: spritesheet walk mode (legacy placeholder) */
.yaguara.sheet.walking{animation:none}

/* A/B: inline-SVG articulated walk (pure web, vector) — animates the rig's OWN groups.
   Origins tuned to each group's fill-box: leg pivots at the hip (top-centre); tail pivots
   at its ROOT where it joins the rump — the bottom-LEFT corner of the tail bbox (≈8% 98%),
   NOT the tip. (First pass had 92% 22% = the tip, which flung the tail off the body.) */
.yaguara.rig.walking{animation:none}
.yaguara.rig .leg{transform-box:fill-box;transform-origin:50% 6%}
.yaguara.rig .rig-tail{transform-box:fill-box;transform-origin:8% 98%}
.yaguara.rig .rig-breathe{transform-box:fill-box;transform-origin:50% 100%}
.yaguara.rig.walking .legA{animation:legswingA .42s ease-in-out infinite}
.yaguara.rig.walking .legB{animation:legswingB .42s ease-in-out infinite}
.yaguara.rig.walking .rig-tail{animation:tailsway .9s ease-in-out infinite}
.yaguara.rig.walking .rig-breathe{animation:rigbob .42s ease-in-out infinite}
@keyframes legswingA{0%,100%{transform:rotate(14deg)}50%{transform:rotate(-14deg)}}
@keyframes legswingB{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(14deg)}}
@keyframes tailsway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
@keyframes rigbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

/* hidden word (a glowing secret) */
.word{position:absolute;pointer-events:none}
.word .glow{filter:drop-shadow(0 0 8px rgba(247,213,119,.85));animation:wordGlow 3.2s ease-in-out infinite}
.word.found .glow{animation:none;opacity:.5}
@keyframes wordGlow{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.07)}}

/* portal + ceiba glow */
.ceiba .glow{animation:ceibaPulse 5.5s ease-in-out infinite}
@keyframes ceibaPulse{0%,100%{opacity:.6}50%{opacity:.95}}
.portalable{cursor:pointer}

/* UI overlays */
.vignette{position:absolute;inset:0;z-index:40;pointer-events:none;
  background:radial-gradient(120% 82% at 50% 42%, transparent 55%, rgba(0,0,0,.55) 100%)}
.title{position:absolute;top:20px;left:0;right:0;z-index:41;text-align:center;pointer-events:none;
  transition:opacity .6s;opacity:1}
.title b{color:var(--gold-hi);font-size:15px;letter-spacing:3px;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.85)}
.title span{display:block;color:var(--cream);font-size:10px;letter-spacing:2px;opacity:.7;margin-top:3px}
.dialogue{position:absolute;left:16px;right:16px;bottom:26px;z-index:42;
  background:rgba(10,14,30,.9);border:1.5px solid var(--gold-deep);border-radius:14px;
  padding:12px 16px;color:var(--cream);font-size:14px;line-height:1.35;
  box-shadow:0 8px 30px rgba(0,0,0,.5)}
.dialogue b{color:var(--gold-hi);display:block;font-size:11px;letter-spacing:1px;margin-bottom:3px;text-transform:uppercase}
.hint{position:absolute;bottom:12px;left:0;right:0;z-index:41;text-align:center;pointer-events:none;
  color:var(--cream);font-size:11px;letter-spacing:1.5px;opacity:.55;font-style:italic;
  animation:hintFade 3s ease-in-out infinite}
@keyframes hintFade{0%,100%{opacity:.25}50%{opacity:.6}}
.toast{position:absolute;left:50%;top:calc(50% - 60px);transform:translate(-50%,0);z-index:43;
  background:rgba(10,14,30,.92);border:1.5px solid var(--gold);border-radius:999px;
  padding:8px 18px;color:var(--gold-hi);font-size:15px;font-style:italic;pointer-events:none;
  box-shadow:0 6px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .3s,transform .5s}
.toast.show{opacity:1;transform:translate(-50%,-14px)}

.fly{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 6px 2px rgba(247,213,119,.55);pointer-events:none;animation:fly 6s ease-in-out infinite}
@keyframes fly{0%,100%{opacity:.15;transform:translate(0,0)}50%{opacity:.85;transform:translate(6px,-10px)}}

@media (prefers-reduced-motion: reduce){
  .yaguara.walking,.actor.bob.walking .bobber,.word .glow,.ceiba .glow,.hint,.fly{animation:none}
}

/* ---- destinations on the map ------------------------------------------------
   Brightness IS the engine's judgement (D-024c). It is expressed only as light:
   never a number, never a lock. A dim marker is fully tappable — --lit changes
   how much it invites, not whether it answers. */
.destmark{position:absolute;transform:translate(-50%,-50%);width:34px;height:34px;
  display:grid;place-items:center;background:none;border:0;padding:0;cursor:pointer;
  opacity:calc(0.25 + var(--lit,.6) * 0.75);transition:opacity .5s,filter .5s}
.destmark .dot{width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%, var(--gold-hi), var(--gold) 60%, var(--gold-deep));
  box-shadow:0 0 calc(4px + var(--lit,.6) * 14px) rgba(232,178,58,calc(var(--lit,.6) * .85));
  transition:box-shadow .5s,transform .25s}
.destmark.peak .dot{width:17px;height:17px;
  box-shadow:0 0 calc(6px + var(--lit,.6) * 20px) rgba(247,213,119,calc(var(--lit,.6) * .9))}
.destmark:hover .dot,.destmark:focus-visible .dot{transform:scale(1.25)}
.destmark:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:50%}
@media (prefers-reduced-motion:reduce){.destmark,.destmark .dot{transition:none}}

/* Coming back. The place just left is already lit differently, because the map
   re-read the learner's evidence on load — this only draws the eye to it once so
   the change is noticed. No banner, no count, no "well done". */
.destmark.returned .dot{animation:returned 1.6s ease-out 2}
@keyframes returned{0%{transform:scale(1)}30%{transform:scale(1.5)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.destmark.returned .dot{animation:none}}