/* ============================================================================
   AVEN — "Would you know him?"  ·  NIGHTLIGHT take
   Self-contained recognition game. Vanilla CSS. No libraries, no external assets.
   ----------------------------------------------------------------------------
   TUNE THE ART FIT HERE  ↓↓↓  (all in one place)
   When the real 3:4 Aven portrait is dropped into <img class="aven-char">,
   re-tune the 7 hotspot positions and the coat-swatch box below. Percentages
   are measured inside the character box (0,0 = top-left of the portrait).
   ========================================================================== */
.aven-game{
  /* ---- palette (design system) ---- */
  --ink:#0b171e;
  --teal:#0f2f39;         /* deep teal panel            */
  --teal-2:#0b232b;       /* darker teal                */
  --teal-3:#123a45;       /* lifted teal                */
  --bone:#f3ecde;
  --lime:#d3f227;         /* signal lime                */
  --gold:#e7ab5c;
  --mist:#c9d4d9;
  --orange:#ff6a3d;

  /* ---- 7 HOTSPOT POSITIONS (percent inside the portrait) ----
     Tuned to the real aven-char.webp (640x853, exact 3:4, so % == pixels). */
  --pin-ears-x:46%;   --pin-ears-y:12%;    /* 1 radar ears (crown, both tall ears)  */
  --pin-spots-x:61%;  --pin-spots-y:66%;   /* 2 round spots (spotted flank/haunch)  */
  --pin-tail-x:80%;   --pin-tail-y:85%;    /* 3 banded tail, dark tip (bottom-right) */
  --pin-chest-x:41%;  --pin-chest-y:51%;   /* 4 cream muzzle & chest (bib)           */
  --pin-eyes-x:41%;   --pin-eyes-y:29%;    /* 5 big round amber eyes                 */
  --pin-legs-x:31%;   --pin-legs-y:66%;    /* 6 long legs / raised front paw         */
  --pin-voice-x:40%;  --pin-voice-y:40%;   /* 7 the chirpy voice (nose/muzzle)       */

  /* ---- coat-swap overlay box (the striped-tabby demo, over the spotted body) ---- */
  --coat-x:56%;  --coat-y:64%;  --coat-w:52%;  --coat-h:48%;

  /* ---- portrait size within the stage ---- */
  --char-w:62%;           /* width of the portrait relative to stage width */

  /* ---- tilt / depth (JS writes --rx/--ry live) ---- */
  --rx:0deg; --ry:0deg;
  --tilt-max:7deg;

  /* ---- type ---- */
  --f-display:"Fraunces","Georgia",serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  box-sizing:border-box;
  max-width:560px;
  margin-inline:auto;
  padding:clamp(14px,4vw,26px);
  font-family:var(--f-body);
  color:var(--bone);
  -webkit-text-size-adjust:100%;
}
.aven-game *,
.aven-game *::before,
.aven-game *::after{ box-sizing:border-box; }

/* ---------- header ---------- */
.ag-head{ text-align:center; margin-bottom:clamp(12px,3vw,18px); }
.ag-eyebrow{
  font-family:var(--f-mono);
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin:0 0 .5em;
}
.ag-title{
  font-family:var(--f-display);
  font-weight:600; font-size:clamp(1.7rem,7vw,2.5rem); line-height:1.02;
  margin:0; color:var(--bone);
  text-wrap:balance;
}
.ag-sub{
  margin:.7em auto 0; max-width:34ch;
  font-size:clamp(.9rem,2.6vw,1rem); line-height:1.45; color:var(--mist);
}

/* ============================================================================
   THE STAGE — a little lit stand with depth
   ========================================================================== */
.ag-stage{
  position:relative;
  width:100%;
  aspect-ratio:1 / 1;
  margin-top:clamp(10px,3vw,16px);
  border-radius:22px;
  overflow:hidden;
  perspective:1000px;
  perspective-origin:50% 42%;
  background:
    radial-gradient(120% 90% at 50% 8%, #163a44 0%, #0f2f39 42%, #0a2029 74%, #071319 100%);
  box-shadow:
    0 22px 55px -22px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(211,242,39,.06),
    inset 0 0 0 1px rgba(201,212,217,.08);
  touch-action:pan-y;
}
/* soft dusk vignette + gentle top starlight */
.ag-stage::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:6;
  background:
    radial-gradient(140% 100% at 50% 118%, transparent 55%, rgba(0,0,0,.45) 100%),
    radial-gradient(90% 60% at 50% -10%, rgba(231,171,92,.10), transparent 60%);
}

.ag-scene{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .2s ease-out;   /* JS writes --rx/--ry; this smooths follow + return */
  will-change:transform;
}

/* nightlight pool on the floor */
.ag-glow{
  position:absolute; left:50%; top:70%; width:78%; height:40%;
  transform:translate(-50%,-50%) translateZ(-30px);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(231,171,92,.55) 0%, rgba(231,171,92,.22) 38%, rgba(231,171,92,0) 72%);
  filter:blur(2px);
  animation:ag-breathe 6s ease-in-out infinite;
}
/* soft floor disc + contact shadow */
.ag-floor{
  position:absolute; left:50%; top:84%; width:66%; height:16%;
  transform:translate(-50%,-50%) translateZ(-46px);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(18,58,69,.9) 0%, rgba(11,35,43,.55) 55%, rgba(11,35,43,0) 78%);
}
.ag-floor::after{ /* the cat's cast shadow */
  content:""; position:absolute; left:50%; top:52%; width:52%; height:30%;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.5), rgba(0,0,0,0) 70%);
}

/* ---------- the character slot ---------- */
.ag-charwrap{
  position:absolute; left:50%; bottom:6%;
  width:var(--char-w); aspect-ratio:3 / 4;
  transform:translateX(-50%);
  transform-style:preserve-3d;
}
img.aven-char{
  display:block; width:100%; height:100%;
  object-fit:contain;
  transform:translateZ(0);
  filter:drop-shadow(0 10px 14px rgba(0,0,0,.45));
  -webkit-user-drag:none; user-select:none;
}

/* the striped-tabby demo overlay (mark 2) */
.ag-coat{
  position:absolute;
  left:var(--coat-x); top:var(--coat-y);
  width:var(--coat-w); height:var(--coat-h);
  transform:translate(-50%,-50%) translateZ(3px);
  border-radius:44% 44% 46% 46% / 52% 52% 48% 48%;
  overflow:hidden;
  opacity:0; visibility:hidden;
  transition:opacity .38s ease, visibility .38s;
  pointer-events:none;
  mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(52% 56% at 50% 47%, #000 52%, transparent 100%);
          mask-image:radial-gradient(52% 56% at 50% 47%, #000 52%, transparent 100%);
}
.ag-coat::before{
  content:""; position:absolute; inset:-20%;
  background:repeating-linear-gradient(
    -62deg,
    rgba(74,43,18,.0) 0 7px,
    rgba(74,43,18,.82) 7px 15px,
    rgba(74,43,18,0) 15px 24px);
}
.aven-game.show-tabby .ag-coat{ opacity:1; visibility:visible; }

/* the ✓/✗ verdict badge that rides the coat swap */
.ag-verdict{
  position:absolute; left:50%; top:calc(var(--coat-y) - 4%);
  transform:translate(-50%,-50%) translateZ(30px);
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.04em;
  white-space:nowrap; padding:.34em .7em; border-radius:999px;
  background:rgba(11,23,30,.82); border:1px solid rgba(211,242,39,.4);
  color:var(--lime); box-shadow:0 6px 18px -8px rgba(0,0,0,.7);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s;
}
.aven-game.spots-open .ag-verdict{ opacity:1; visibility:visible; }
.ag-verdict b{ font-weight:inherit; }
.ag-verdict[data-state="aven"]{ color:var(--lime); border-color:rgba(211,242,39,.5); }
.ag-verdict[data-state="tabby"]{ color:var(--orange); border-color:rgba(255,106,61,.55); }

/* ============================================================================
   PINS — fireflies floating above the art
   ========================================================================== */
.ag-pins{ position:absolute; inset:0; transform-style:preserve-3d; }

.ag-pin{
  position:absolute;
  left:var(--x); top:var(--y);
  width:44px; height:44px; margin:-22px 0 0 -22px;   /* ≥44px hit target, centered */
  transform:translateZ(var(--z,34px));
  display:grid; place-items:center;
  padding:0; border:0; background:none; cursor:pointer;
  color:inherit;
  -webkit-tap-highlight-color:transparent;
}
.ag-pin--ears { --x:var(--pin-ears-x);  --y:var(--pin-ears-y);  --z:52px; }
.ag-pin--spots{ --x:var(--pin-spots-x); --y:var(--pin-spots-y); --z:40px; }
.ag-pin--tail { --x:var(--pin-tail-x);  --y:var(--pin-tail-y);  --z:30px; }
.ag-pin--chest{ --x:var(--pin-chest-x); --y:var(--pin-chest-y); --z:44px; }
.ag-pin--eyes { --x:var(--pin-eyes-x);  --y:var(--pin-eyes-y);  --z:56px; }
.ag-pin--legs { --x:var(--pin-legs-x);  --y:var(--pin-legs-y);  --z:36px; }
.ag-pin--voice{ --x:var(--pin-voice-x); --y:var(--pin-voice-y); --z:48px; }

/* the glowing dot */
.ag-pin__dot{
  position:relative;
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 38% 34%, #fff6df 0%, var(--lime) 42%, #93ad10 100%);
  box-shadow:
    0 0 0 4px rgba(211,242,39,.14),
    0 0 14px 3px rgba(211,242,39,.55),
    0 3px 8px rgba(0,0,0,.4);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  animation:ag-firefly 3.2s ease-in-out infinite;
}
/* faint tether so a floating pin reads as attached to the art */
.ag-pin__dot::after{
  content:""; position:absolute; left:50%; top:50%;
  width:3px; height:3px; border-radius:50%;
  background:rgba(211,242,39,.5);
  transform:translate(-50%,-50%) translateZ(-26px);
  box-shadow:0 0 6px 2px rgba(211,242,39,.35);
}
/* number chip appears on hover/focus to orient */
.ag-pin__num{
  position:absolute; left:50%; top:-4px;
  transform:translate(-50%,-100%) translateZ(2px);
  font-family:var(--f-mono); font-size:.62rem; line-height:1;
  padding:.28em .5em; border-radius:999px;
  background:rgba(11,23,30,.9); color:var(--gold);
  border:1px solid rgba(231,171,92,.4);
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
.ag-pin:hover .ag-pin__num,
.ag-pin:focus-visible .ag-pin__num{ opacity:1; }

.ag-pin:hover .ag-pin__dot{ transform:scale(1.18); }

/* keyboard focus ring */
.ag-pin:focus-visible{ outline:none; }
.ag-pin:focus-visible .ag-pin__dot{
  box-shadow:
    0 0 0 3px var(--ink),
    0 0 0 6px var(--lime),
    0 0 16px 4px rgba(211,242,39,.6);
}

/* FOUND state → warm steady gold with a check */
.ag-pin[data-found="true"] .ag-pin__dot{
  background:radial-gradient(circle at 38% 34%, #fff3dc 0%, var(--gold) 45%, #b07a34 100%);
  box-shadow:
    0 0 0 4px rgba(231,171,92,.16),
    0 0 16px 4px rgba(231,171,92,.6),
    0 3px 8px rgba(0,0,0,.4);
  animation:none;
}
.ag-pin__check{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.6rem; color:var(--ink); font-weight:900; opacity:0;
  transition:opacity .2s ease .05s;
}
.ag-pin[data-found="true"] .ag-pin__check{ opacity:1; }

/* the currently-open pin gets a halo ring */
.ag-pin[data-active="true"] .ag-pin__dot{
  transform:scale(1.22);
  box-shadow:
    0 0 0 3px rgba(243,236,222,.25),
    0 0 0 7px rgba(231,171,92,.35),
    0 0 22px 6px rgba(231,171,92,.7);
}

/* ---------- ambient fireflies ---------- */
.ag-fireflies{ position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; }
.ag-fly{
  position:absolute; left:var(--fx); top:var(--fy);
  width:var(--fs,5px); height:var(--fs,5px); border-radius:50%;
  transform:translateZ(var(--fz,60px));
  background:radial-gradient(circle at 40% 40%, #fff7e0, rgba(231,171,92,.4) 60%, transparent 72%);
  box-shadow:0 0 8px 2px rgba(231,171,92,.45);
  animation:ag-drift var(--fd,9s) ease-in-out var(--fdelay,0s) infinite,
            ag-twinkle calc(var(--fd,9s) * .5) ease-in-out var(--fdelay,0s) infinite;
  opacity:.0;
}

/* ============================================================================
   CAPTION CARD (below the stage — never covers the art)
   ========================================================================== */
.ag-caption{
  position:relative;
  margin-top:clamp(12px,3vw,16px);
  min-height:132px;
  border-radius:16px;
  padding:clamp(14px,3.5vw,18px);
  background:linear-gradient(180deg, var(--teal-3), var(--teal-2));
  border:1px solid rgba(201,212,217,.12);
  box-shadow:0 14px 34px -20px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
/* firefly glow bleeding into the card top */
.ag-caption::before{
  content:""; position:absolute; left:0; right:0; top:0; height:60px; pointer-events:none;
  background:radial-gradient(60% 100% at 20% 0%, rgba(231,171,92,.18), transparent 70%);
}
.ag-cap-empty{
  display:flex; align-items:center; gap:.6em;
  color:var(--mist); font-size:clamp(.92rem,2.6vw,1rem);
}
.ag-cap-empty .ag-spark{
  width:12px; height:12px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 40% 40%, #fff6df, var(--lime) 55%, #93ad10);
  box-shadow:0 0 10px 2px rgba(211,242,39,.6);
  animation:ag-firefly 3s ease-in-out infinite;
}
.ag-cap-body{ display:none; }
.aven-game.has-selection .ag-cap-empty{ display:none; }
.aven-game.has-selection .ag-cap-body{ display:block; }

.ag-cap-kicker{
  display:flex; align-items:center; gap:.6em; margin-bottom:.5em;
}
.ag-cap-badge{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.05em;
  color:var(--ink); background:var(--gold);
  padding:.28em .62em; border-radius:999px; flex:none;
}
.ag-cap-name{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold);
}
.ag-cap-title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.15rem,4vw,1.4rem); line-height:1.12; margin:.1em 0 .35em;
  color:var(--bone);
}
.ag-cap-text{ margin:0; font-size:clamp(.92rem,2.7vw,1.02rem); line-height:1.45; color:var(--bone); }
.ag-cap-spot{
  margin:.7em 0 0; padding:.6em .8em; border-radius:10px;
  background:rgba(11,23,30,.5); border-left:3px solid var(--lime);
  font-size:clamp(.86rem,2.6vw,.96rem); line-height:1.4; color:var(--mist);
}
.ag-cap-spot b{ color:var(--lime); font-weight:600; letter-spacing:.02em;
  font-family:var(--f-mono); font-size:.72rem; text-transform:uppercase; }

/* coat toggle button (only shown for the spots mark) */
.ag-toggle{ margin-top:.8em; display:none; flex-wrap:wrap; gap:.5em; align-items:center; }
.aven-game.spots-open .ag-toggle{ display:flex; }
.ag-toggle-btn{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.02em;
  color:var(--ink); background:var(--lime); border:0; cursor:pointer;
  padding:.55em .9em; border-radius:999px;
  box-shadow:0 6px 16px -8px rgba(211,242,39,.8);
  transition:transform .12s ease, filter .12s ease;
}
.ag-toggle-btn:hover{ filter:brightness(1.05); }
.ag-toggle-btn:active{ transform:translateY(1px); }
.ag-toggle-btn:focus-visible{ outline:3px solid var(--bone); outline-offset:2px; }
.ag-toggle-hint{ font-size:.82rem; color:var(--mist); }

/* close button */
.ag-cap-close{
  position:absolute; top:8px; right:8px;
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(11,23,30,.5); border:1px solid rgba(201,212,217,.16);
  color:var(--mist); cursor:pointer; font-size:1rem; line-height:1;
}
.ag-cap-close:hover{ color:var(--bone); }
.ag-cap-close:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

/* ============================================================================
   PROGRESS
   ========================================================================== */
.ag-progress{
  display:flex; align-items:center; justify-content:center; gap:.85em;
  margin-top:clamp(14px,3.5vw,18px); flex-wrap:wrap;
}
.ag-dots{ display:flex; gap:.5em; }
.ag-dot{
  width:12px; height:12px; border-radius:50%;
  background:rgba(201,212,217,.18);
  box-shadow:inset 0 0 0 1px rgba(201,212,217,.2);
  transition:background .35s ease, box-shadow .35s ease, transform .35s ease;
}
.ag-dot[data-lit="true"]{
  background:radial-gradient(circle at 40% 40%, #fff3dc, var(--gold) 55%, #b07a34);
  box-shadow:0 0 10px 2px rgba(231,171,92,.6);
  transform:scale(1.12);
}
.ag-count{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.05em; color:var(--mist);
  margin:0;
}
.ag-count b{ color:var(--bone); font-weight:400; }

/* ============================================================================
   COMPLETION
   ========================================================================== */
.ag-done{
  margin-top:clamp(12px,3vw,16px);
  border-radius:16px; padding:clamp(16px,4vw,22px); text-align:center;
  background:
    radial-gradient(90% 120% at 50% -10%, rgba(231,171,92,.22), transparent 60%),
    linear-gradient(180deg, var(--teal-3), var(--teal-2));
  border:1px solid rgba(231,171,92,.3);
  box-shadow:0 18px 40px -22px rgba(0,0,0,.8);
  opacity:0; transform:translateY(8px);
  max-height:0; overflow:hidden; padding-top:0; padding-bottom:0; margin-top:0;
  transition:opacity .5s ease, transform .5s ease, max-height .5s ease,
             padding .5s ease, margin .5s ease;
}
.aven-game.is-complete .ag-done{
  opacity:1; transform:none; max-height:420px;
  padding-top:clamp(16px,4vw,22px); padding-bottom:clamp(16px,4vw,22px);
  margin-top:clamp(12px,3vw,16px);
}
.ag-done-title{
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.3rem,5vw,1.7rem); line-height:1.05; margin:0 0 .3em; color:var(--bone);
}
.ag-done-text{ margin:0 auto; max-width:38ch; color:var(--mist); font-size:clamp(.92rem,2.7vw,1rem); line-height:1.5; }
.ag-again{
  margin-top:1em; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.04em;
  color:var(--mist); background:transparent; border:1px solid rgba(201,212,217,.3);
  padding:.5em .9em; border-radius:999px; cursor:pointer;
}
.ag-again:hover{ color:var(--bone); border-color:var(--bone); }
.ag-again:focus-visible{ outline:2px solid var(--lime); outline-offset:2px; }

/* ---------- contact ---------- */
.ag-contact{
  margin:clamp(14px,3.5vw,18px) 0 0; text-align:center;
  font-size:clamp(.9rem,2.7vw,1rem); line-height:1.5; color:var(--bone);
}
.ag-contact a{ color:var(--lime); text-decoration:none; font-weight:600; white-space:nowrap; }
.ag-contact a:hover{ text-decoration:underline; }
.ag-contact .ag-status{
  display:inline-block; font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--orange); margin-bottom:.4em;
}

/* ---------- utility ---------- */
.ag-vh{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============================================================================
   KEYFRAMES
   ========================================================================== */
@keyframes ag-firefly{
  0%,100%{ box-shadow:0 0 0 4px rgba(211,242,39,.12), 0 0 10px 2px rgba(211,242,39,.4), 0 3px 8px rgba(0,0,0,.4); }
  50%    { box-shadow:0 0 0 5px rgba(211,242,39,.20), 0 0 18px 5px rgba(211,242,39,.7), 0 3px 8px rgba(0,0,0,.4); }
}
@keyframes ag-breathe{
  0%,100%{ opacity:.85; transform:translate(-50%,-50%) translateZ(-30px) scale(1); }
  50%    { opacity:1;   transform:translate(-50%,-50%) translateZ(-30px) scale(1.05); }
}
@keyframes ag-drift{
  0%   { opacity:0;   transform:translateZ(var(--fz,60px)) translate(0,0); }
  15%  { opacity:.9; }
  50%  { transform:translateZ(var(--fz,60px)) translate(var(--fdx,14px), calc(var(--fdy,-18px))); }
  85%  { opacity:.6; }
  100% { opacity:0;   transform:translateZ(var(--fz,60px)) translate(0,0); }
}
@keyframes ag-twinkle{
  0%,100%{ filter:brightness(.7); }
  50%    { filter:brightness(1.3); }
}
@keyframes ag-pop{
  0%{ transform:scale(.4); opacity:0; }
  60%{ transform:scale(1.15); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:420px){
  .aven-game{ --char-w:66%; }
  .ag-stage{ border-radius:18px; }
}

/* ============================================================================
   REDUCED MOTION — no tilt/parallax/pulse; marks still findable, captions show
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .ag-scene{ transform:none!important; transition:none!important; }
  .ag-glow, .ag-pin__dot, .ag-fly, .ag-cap-empty .ag-spark{ animation:none!important; }
  .ag-fly{ opacity:.55!important; transform:none!important; }
  .ag-coat, .ag-verdict, .ag-caption, .ag-done, .ag-dot, .ag-pin__dot{
    transition-duration:.001ms!important;
  }
  /* Flatten depth so every mark sits exactly on target without tilt,
     while preserving each layer's 2-D centering transform. */
  .ag-pin{ transform:none!important; }
  img.aven-char{ transform:none!important; }
  .ag-glow{ transform:translate(-50%,-50%)!important; }
  .ag-floor{ transform:translate(-50%,-50%)!important; }
  .ag-coat{ transform:translate(-50%,-50%)!important; }
  .ag-verdict{ transform:translate(-50%,-50%)!important; }
}