/* =====================================================================
   AVEN — "Would you know him?"  ·  Arcade take  ·  game.css
   Recognition game. Status: LOST. Contact: 260-337-3747 / www.AvenLost.pet
   ---------------------------------------------------------------------
   ┌─────────────────────────────────────────────────────────────────┐
   │  RE-TUNE TO FINAL ART HERE. Two things live at the top:           │
   │   1) --char-src  → the character image (also set on <img> src)    │
   │   2) --pin-*     → each hotspot's position as % of the 3:4 frame  │
   │      (x = left, y = top). Move a pin by editing its two numbers.  │
   └─────────────────────────────────────────────────────────────────┘
   ===================================================================== */
.aven-game{
  /* ---- CHARACTER SLOT --------------------------------------------- */
  --char-src: url("aven-char.webp");   /* real 3:4 Aven portrait (transparent) */

  /* ---- 7 HOTSPOTS · x% / y% within the 3:4 character frame -------- */
  /* Tuned to aven-char.webp (640x853, 3:4). Values verified against the   */
  /* actual rendered stage — the pins sit forward (translateZ) so on-screen */
  /* positions carry a slight outward parallax vs. these raw feature %s.    */
  --pin-ears-x: 63%;   --pin-ears-y: 20%;   /* 1 · radar ears (viewer-right ear) */
  --pin-spots-x: 61%;  --pin-spots-y: 69%;  /* 2 · round spots (#1), flank       */
  --pin-tail-x: 78%;   --pin-tail-y: 84%;   /* 3 · banded tail, dark bands       */
  --pin-muzzle-x: 40%; --pin-muzzle-y: 54%; /* 4 · cream bib / chest             */
  --pin-eyes-x: 41%;   --pin-eyes-y: 30%;   /* 5 · eyes & pink nose              */
  --pin-legs-x: 43%;   --pin-legs-y: 86%;   /* 6 · long legs / standing paw      */
  --pin-voice-x: 40%;  --pin-voice-y: 40%;  /* 7 · chirpy voice (mouth/muzzle)   */

  /* ---- palette ---------------------------------------------------- */
  --ink:#0b171e; --panel:#0d2b31; --panel-2:#103a43; --panel-3:#0a2126;
  --bone:#f3ecde; --lime:#d3f227; --gold:#e7ab5c; --mist:#c9d4d9; --orange:#ff6a3d;
  --line: color-mix(in srgb, var(--mist) 22%, transparent);

  /* ---- fonts (host is expected to load these) --------------------- */
  --f-title:"Fraunces",Georgia,"Times New Roman",serif;
  --f-body:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --f-mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

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

  box-sizing:border-box; position:relative;
  width:100%; max-width:720px; margin-inline:auto;
  padding:clamp(16px,3.6vw,26px);
  color:var(--bone);
  font-family:var(--f-body);
  background:
     radial-gradient(120% 90% at 50% -10%, color-mix(in srgb,var(--panel-2) 70%, transparent), transparent 60%),
     linear-gradient(180deg, var(--panel) 0%, var(--panel-3) 100%);
  border:1px solid var(--line);
  border-radius:22px;
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
}
.aven-game *,.aven-game *::before,.aven-game *::after{box-sizing:border-box}

/* ---------------- header ---------------- */
.aven-game__head{text-align:center; margin:0 auto clamp(12px,2.4vw,20px); max-width:34em}
.aven-game__kicker{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lime); margin:0 0 .5em; display:inline-flex; gap:.55em; align-items:center;
}
.aven-game__kicker::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--lime); box-shadow:0 0 10px var(--lime)}
.aven-game__title{
  font-family:var(--f-title); font-weight:600; font-optical-sizing:auto;
  font-size:clamp(1.7rem,6.4vw,2.7rem); line-height:1.02; letter-spacing:-.01em; margin:0 0 .28em;
}
.aven-game__title em{color:var(--gold); font-style:italic}
.aven-game__sub{margin:0; color:var(--mist); font-size:clamp(.95rem,2.5vw,1.06rem); line-height:1.5}

/* ---------------- progress + streak ---------------- */
.aven-hud{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  max-width:520px; margin:0 auto clamp(12px,2.4vw,18px);
}
.aven-hud__count{
  font-family:var(--f-mono); font-size:.82rem; letter-spacing:.08em; white-space:nowrap;
  color:var(--bone);
}
.aven-hud__count b{color:var(--lime); font-size:1.05rem}
.aven-bar{
  position:relative; flex:1 1 160px; height:12px; border-radius:99px;
  background:var(--panel-3); border:1px solid var(--line); overflow:hidden;
}
.aven-bar__fill{
  position:absolute; inset:0 auto 0 0; width:0%;
  background:linear-gradient(90deg,var(--gold),var(--lime));
  border-radius:99px; transition:width .5s cubic-bezier(.2,.9,.25,1);
  box-shadow:0 0 12px color-mix(in srgb,var(--lime) 60%, transparent);
}
.aven-bar__pips{position:absolute; inset:0; display:flex; justify-content:space-between; padding:0 6px; align-items:center; pointer-events:none}
.aven-bar__pips i{width:2px; height:5px; border-radius:2px; background:color-mix(in srgb,var(--bone) 26%, transparent)}
.aven-streak{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink); background:var(--gold); border-radius:99px; padding:.28em .7em;
  opacity:0; transform:translateY(3px) scale(.9); transition:opacity .25s, transform .25s; white-space:nowrap;
}
.aven-streak.is-on{opacity:1; transform:none}
.aven-streak.is-hot{background:var(--lime); box-shadow:0 0 14px color-mix(in srgb,var(--lime) 65%, transparent)}

/* ---------------- stage (the 3D bit) ---------------- */
.aven-stagewrap{display:flex; justify-content:center}
.aven-stage{
  position:relative;
  width:min(100%, 360px);
  aspect-ratio:3/4;
  perspective:1000px;
  perspective-origin:50% 42%;
  touch-action:manipulation;
}
.aven-scene{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .18s ease-out;
  will-change:transform;
}
/* lit platform behind the cat */
.aven-spotlight{
  position:absolute; left:50%; top:44%; width:118%; height:118%;
  transform:translate(-50%,-50%) translateZ(-70px);
  background:radial-gradient(circle at 50% 42%,
     color-mix(in srgb,var(--gold) 40%, transparent) 0%,
     color-mix(in srgb,var(--panel-2) 55%, transparent) 34%,
     transparent 66%);
  border-radius:50%; pointer-events:none;
}
.aven-floor{
  position:absolute; left:50%; bottom:4%; width:74%; height:12%;
  transform:translate(-50%,0) translateZ(-30px);
  background:radial-gradient(circle, rgba(0,0,0,.5) 0%, rgba(0,0,0,.28) 45%, transparent 72%);
  border-radius:50%; filter:blur(3px); pointer-events:none;
}
.aven-charwrap{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center; transform:translateZ(0)}
.aven-char{
  width:100%; height:100%; object-fit:contain; object-position:bottom center;
  display:block; user-select:none; -webkit-user-drag:none;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.45));
  animation:aven-bob 6s ease-in-out infinite;
}
@keyframes aven-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------------- pins ---------------- */
.aven-pins{position:absolute; inset:0; transform:translateZ(58px)}
.aven-pin{
  position:absolute; transform:translate(-50%,-50%);
  width:44px; height:44px; margin:0; padding:0; border:0; background:none;
  cursor:pointer; color:var(--bone); font-family:var(--f-mono);
  display:grid; place-items:center;
  -webkit-tap-highlight-color:transparent;
}
.aven-pin--ears  {left:var(--pin-ears-x);   top:var(--pin-ears-y)}
.aven-pin--spots {left:var(--pin-spots-x);  top:var(--pin-spots-y)}
.aven-pin--tail  {left:var(--pin-tail-x);   top:var(--pin-tail-y)}
.aven-pin--muzzle{left:var(--pin-muzzle-x); top:var(--pin-muzzle-y)}
.aven-pin--eyes  {left:var(--pin-eyes-x);   top:var(--pin-eyes-y)}
.aven-pin--legs  {left:var(--pin-legs-x);   top:var(--pin-legs-y)}
.aven-pin--voice {left:var(--pin-voice-x);  top:var(--pin-voice-y)}

.aven-pin__dot{
  position:relative; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #17444d, #0a2429);
  border:2px solid var(--lime);
  display:grid; place-items:center;
  font-size:.82rem; font-weight:500; line-height:1; color:var(--bone);
  box-shadow:0 6px 12px rgba(0,0,0,.45), 0 0 0 0 color-mix(in srgb,var(--lime) 60%, transparent);
  transition:transform .2s cubic-bezier(.2,1.4,.4,1), background .2s, border-color .2s;
  animation:aven-pulse 2.4s ease-out infinite;
}
.aven-pin__num{transition:opacity .15s}
.aven-pin__check{position:absolute; inset:0; display:grid; place-items:center; opacity:0; transform:scale(.5); color:var(--ink); font-weight:700}
@keyframes aven-pulse{
  0%{box-shadow:0 6px 12px rgba(0,0,0,.45), 0 0 0 0 color-mix(in srgb,var(--lime) 55%, transparent)}
  70%{box-shadow:0 6px 12px rgba(0,0,0,.45), 0 0 0 12px transparent}
  100%{box-shadow:0 6px 12px rgba(0,0,0,.45), 0 0 0 0 transparent}
}
/* floating label */
.aven-pin__tag{
  position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px);
  font-size:.64rem; letter-spacing:.04em; white-space:nowrap; padding:.24em .5em;
  background:var(--ink); color:var(--bone); border:1px solid var(--line); border-radius:6px;
  opacity:0; pointer-events:none; transition:opacity .16s, transform .16s;
}
.aven-pin:hover .aven-pin__tag,.aven-pin:focus-visible .aven-pin__tag{opacity:1; transform:translateX(-50%) translateY(0)}

.aven-pin:hover .aven-pin__dot,.aven-pin:focus-visible .aven-pin__dot{transform:scale(1.18)}
.aven-pin:focus-visible{outline:none}
.aven-pin:focus-visible .aven-pin__dot{outline:3px solid var(--lime); outline-offset:3px}
.aven-pin:active .aven-pin__dot{transform:scale(.94)}

/* found state */
.aven-pin.is-found .aven-pin__dot{
  background:var(--lime); border-color:#fff; animation:none;
  box-shadow:0 6px 12px rgba(0,0,0,.4), 0 0 16px color-mix(in srgb,var(--lime) 55%, transparent);
}
.aven-pin.is-found .aven-pin__num{opacity:0}
.aven-pin.is-found .aven-pin__check{opacity:1; transform:scale(1)}
.aven-pin.is-current .aven-pin__dot{border-color:#fff}
.aven-pin.pop{animation:aven-pop .5s cubic-bezier(.18,1.5,.4,1)}
@keyframes aven-pop{0%{transform:translate(-50%,-50%) scale(1)}40%{transform:translate(-50%,-50%) scale(1.35)}100%{transform:translate(-50%,-50%) scale(1)}}

/* +1 float */
.aven-plus{
  position:absolute; transform:translate(-50%,-50%); pointer-events:none; z-index:5;
  font-family:var(--f-mono); font-weight:700; color:var(--lime); font-size:1rem;
  text-shadow:0 1px 6px rgba(0,0,0,.6); animation:aven-plus 900ms ease-out forwards;
}
@keyframes aven-plus{0%{opacity:0; transform:translate(-50%,-50%) scale(.6)}20%{opacity:1}100%{opacity:0; transform:translate(-50%,-160%) scale(1.1)}}

/* ---------------- caption panel ---------------- */
.aven-read{
  max-width:520px; margin:clamp(14px,2.6vw,20px) auto 0;
  background:var(--panel-3); border:1px solid var(--line); border-radius:16px;
  padding:clamp(14px,3vw,20px); min-height:132px;
}
.aven-read__idle{display:flex; gap:.6em; align-items:center; justify-content:center; color:var(--mist); text-align:center; height:100%; min-height:104px; font-size:.98rem}
.aven-read__idle b{color:var(--bone)}
.aven-read__card{display:none}
.aven-read.has-card .aven-read__idle{display:none}
.aven-read.has-card .aven-read__card{display:block; animation:aven-fade .3s ease}
@keyframes aven-fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.aven-read__no{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)}
.aven-read__title{font-family:var(--f-title); font-weight:600; font-size:clamp(1.25rem,4.4vw,1.6rem); margin:.15em 0 .35em; line-height:1.08}
.aven-read__body{margin:0 0 .7em; color:var(--bone); line-height:1.5; font-size:1rem}
.aven-read__spot{
  display:inline-flex; gap:.5em; align-items:baseline; font-size:.94rem; line-height:1.4;
  background:color-mix(in srgb,var(--lime) 12%, transparent);
  border-left:3px solid var(--lime); border-radius:0 8px 8px 0; padding:.5em .7em; color:var(--bone);
}
.aven-read__spot b{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--lime)}

/* ---- flip card (spots vs stripes), lives inside the spots caption ---- */
.aven-flip{margin-top:14px; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center}
.aven-flip[hidden]{display:none}   /* author display:grid must not override [hidden] */
.aven-flip__stage{perspective:700px}
.aven-flip__card{
  position:relative; width:100%; max-width:180px; aspect-ratio:4/3; margin:0 auto;
  transform-style:preserve-3d; transition:transform .6s cubic-bezier(.3,.9,.25,1);
}
.aven-flip__card.is-flipped{transform:rotateY(180deg)}
.aven-flip__face{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:12px; overflow:hidden; border:2px solid; display:flex; flex-direction:column;
}
.aven-flip__face svg{width:100%; height:100%; display:block; flex:1}
.aven-flip__face--yes{border-color:var(--lime)}
.aven-flip__face--no{border-color:var(--orange); transform:rotateY(180deg)}
.aven-flip__badge{
  position:absolute; left:8px; top:8px; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.06em;
  padding:.2em .5em; border-radius:6px; font-weight:700;
}
.aven-flip__face--yes .aven-flip__badge{background:var(--lime); color:var(--ink)}
.aven-flip__face--no .aven-flip__badge{background:var(--orange); color:#fff}
.aven-flip__btn{
  font-family:var(--f-mono); font-size:.76rem; letter-spacing:.04em; cursor:pointer;
  background:var(--panel-2); color:var(--bone); border:1px solid var(--lime); border-radius:10px;
  padding:.7em .9em; white-space:nowrap; transition:background .18s, transform .12s;
}
.aven-flip__btn:hover{background:var(--panel)}
.aven-flip__btn:active{transform:scale(.96)}
.aven-flip__btn:focus-visible{outline:3px solid var(--lime); outline-offset:2px}
.aven-flip__hint{display:block; font-family:var(--f-body); font-size:.7rem; color:var(--mist); margin-top:.5em; letter-spacing:0; text-transform:none}

/* ---------------- completion ---------------- */
.aven-done{
  max-width:520px; margin:16px auto 0; text-align:center;
  background:linear-gradient(180deg, color-mix(in srgb,var(--lime) 12%, var(--panel-3)), var(--panel-3));
  border:1px solid color-mix(in srgb,var(--lime) 40%, var(--line));
  border-radius:16px; padding:clamp(16px,3.4vw,24px);
  opacity:0; transform:translateY(10px); height:0; padding-block:0; overflow:hidden; pointer-events:none;
  transition:opacity .4s ease, transform .4s ease;
}
.aven-done.is-shown{opacity:1; transform:none; height:auto; padding-block:clamp(16px,3.4vw,24px); pointer-events:auto}
.aven-done__badge{font-family:var(--f-mono); font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--lime)}
.aven-done__title{font-family:var(--f-title); font-weight:600; font-size:clamp(1.4rem,5vw,2rem); margin:.2em 0 .3em}
.aven-done__body{color:var(--bone); line-height:1.55; margin:0 auto .9em; max-width:32em}
.aven-done__contact{
  display:inline-flex; flex-wrap:wrap; gap:.4em 1em; justify-content:center; align-items:center;
  font-family:var(--f-mono); font-size:.9rem; padding:.7em 1em; border-radius:12px;
  background:var(--ink); border:1px solid var(--line);
}
.aven-done__contact a{color:var(--lime); text-decoration:none; font-weight:500}
.aven-done__contact a:hover{text-decoration:underline}
.aven-done__contact span{color:var(--mist)}
.aven-replay{
  margin-top:14px; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.04em; cursor:pointer;
  background:none; color:var(--mist); border:1px solid var(--line); border-radius:10px; padding:.55em .9em;
  transition:color .15s, border-color .15s;
}
.aven-replay:hover{color:var(--bone); border-color:var(--mist)}
.aven-replay:focus-visible{outline:3px solid var(--lime); outline-offset:2px}

/* ---------------- footer contact ---------------- */
.aven-foot{
  max-width:520px; margin:16px auto 0; text-align:center;
  font-size:.86rem; color:var(--mist); line-height:1.5;
}
.aven-foot b{color:var(--bone); font-weight:600}
.aven-foot a{color:var(--gold); text-decoration:none; font-weight:500}
.aven-foot a:hover{text-decoration:underline}
.aven-foot .aven-foot__lost{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--orange); border:1px solid color-mix(in srgb,var(--orange) 40%, transparent);
  border-radius:99px; padding:.2em .7em; display:inline-block; margin-bottom:.6em;
}

/* ---------------- confetti canvas ---------------- */
.aven-confetti{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:60}

/* screen-reader only */
.aven-sr{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ---------------- reduced motion ---------------- */
@media (prefers-reduced-motion: reduce){
  .aven-scene{transition:none}
  .aven-char{animation:none; filter:drop-shadow(0 12px 12px rgba(0,0,0,.4))}
  .aven-pin__dot{animation:none}
  .aven-pin.pop{animation:none}
  .aven-plus{animation:none; opacity:0}
  .aven-bar__fill{transition:width .001s}
  .aven-flip__card{transition:none}
  .aven-read.has-card .aven-read__card{animation:none}
  .aven-done{transition:opacity .001s}
}

/* ---------------- narrow safety ---------------- */
@media (max-width:380px){
  .aven-hud{gap:8px}
  .aven-pin{width:42px; height:42px}
  .aven-flip{grid-template-columns:1fr}
}