/* ============ MYTHRO - liquid glass over a living field ============ */
/* build: 2026-06-17b */

:root{
  --ink:#2b2b28;
  --ink-soft:#5d5d55;
  --glass-bg:rgba(255,255,255,.14);
  --glass-edge:rgba(255,255,255,.48);
  --glass-shadow:0 10px 34px rgba(30,40,20,.20), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.14);
  --radius:22px;
  --ease-spring:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --dur-quick:200ms;
  --accent:#2f7fd1;
  --ember:#c0392b;
  --skyTop:#bfe6ff;
  --skyBot:#eef7da;
  --sun:rgba(255,236,170,.85);
  /* type scale (~1.25) */
  --t-meta:.85rem;
  --t-small:.92rem;
  --t-body:1rem;
  --t-lede:1.3rem;
  --t-h3:1.45rem;
  --t-h2:1.8rem;
  --lh-body:1.65;
  font-size:16px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  font-family:Inter,system-ui,sans-serif;
  color:var(--ink);
  min-height:100vh;
  overflow-x:clip;
  overscroll-behavior-x:none;   /* phones: no sideways tug on the page */
  background:linear-gradient(var(--skyTop),var(--skyBot));
}
/* film grain - the lo-fi layer, almost invisible */
body::before{
  content:"";position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.045;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
h1,h2,.wordmark,.hero-name{font-family:Fraunces,serif;font-weight:600}
a{color:inherit}
#music,#about,#press,#contact{scroll-margin-top:96px}

/* ---------- living layer ---------- */
.sky{
  position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(60vmax 60vmax at 78% 12%, var(--sun), transparent 60%),
    linear-gradient(var(--skyTop), var(--skyBot));
}
.field{
  position:fixed;left:0;right:0;bottom:0;height:46vh;z-index:-2;
  background:url("../assets/img/field.jpg") center bottom/cover no-repeat;
  -webkit-mask-image:linear-gradient(transparent, #000 26%);
          mask-image:linear-gradient(transparent, #000 26%);
}
.epk-field{height:38vh;opacity:.6}
.field-glow{
  position:fixed;left:0;right:0;bottom:0;height:30vh;z-index:-1;pointer-events:none;
  background:linear-gradient(transparent, rgba(255,244,200,.25));
}

/* breathing (the psychedelic layer, barely there) */
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes breatheSlow{0%,100%{transform:scale(1.0)}50%{transform:scale(1.018)}}
.breathe{animation:breathe 11s ease-in-out infinite}
.breathe-slow{animation:breatheSlow 16s ease-in-out infinite;transform-origin:50% 100%}
.breathe-type{animation:breathe 13s ease-in-out infinite;display:inline-block}

/* drifting motes */
.motes{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.motes i{
  position:absolute;display:block;width:5px;height:5px;border-radius:50%;
  background:rgba(255,250,210,.85);box-shadow:0 0 10px 2px rgba(255,240,180,.45);
  animation:mote var(--d,18s) linear infinite;animation-delay:var(--dl,0s);
  left:var(--x,50%);top:110%;opacity:0;
}
@keyframes mote{
  0%{transform:translateY(0) translateX(0) scale(.7);opacity:0}
  8%{opacity:.85}
  90%{opacity:.5}
  100%{transform:translateY(-86vh) translateX(var(--sw,24px)) scale(1.1);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .breathe,.breathe-slow,.breathe-type,.motes i{animation:none}
  html{scroll-behavior:auto}
  .reveal-up{opacity:1 !important;transform:none !important}
  .play-hero{animation:none}
}

/* ---------- glass ---------- */
.glass{
  background:var(--glass-bg);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
  -webkit-backdrop-filter:blur(24px) saturate(1.7) brightness(1.05);
          backdrop-filter:blur(24px) saturate(1.7) brightness(1.05);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:rgba(255,255,255,.85)}
}

/* cursor-tracking glow (AMAPP port) */
.glow{--mx:50%;--my:50%;position:relative}
.glow::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;
  background:radial-gradient(circle 240px at var(--mx) var(--my),
              rgba(255,255,255,.26), rgba(255,255,255,.09) 28%, transparent 60%);
  pointer-events:none;opacity:0;transition:opacity .35s ease;mix-blend-mode:screen;
}
.glow:hover::after{opacity:1}
.glow-sm::after{background:radial-gradient(circle 110px at var(--mx) var(--my),
              rgba(255,255,255,.32), rgba(255,255,255,.10) 30%, transparent 62%)}

/* scroll reveal */
.reveal-up{opacity:0;transform:translateY(22px);transition:opacity .8s ease, transform .8s var(--ease-spring)}
.reveal-up.in{opacity:1;transform:none}

/* press feedback */
.chip:active,.s-play:active,.s-dl:active,.p-btn:active{transform:scale(.95);transition-duration:.1s}
.play-hero:active{transform:scale(.97);transition-duration:.1s}

/* ---------- handwritten nudge (points at the portrait doorway) ---------- */
.portrait-wrap{position:relative}
.portrait-hand{
  position:absolute;top:4px;right:-178px;width:168px;
  font-family:Caveat,cursive;font-size:1.4rem;font-weight:600;color:var(--ink-soft);
  transform:rotate(5deg);line-height:1.1;text-align:left;pointer-events:none;
}
.portrait-hand .hand-arrow{position:absolute;left:-58px;top:16px;width:62px;height:50px}
.hand-arrow path{stroke:var(--ink-soft);stroke-width:2.4;stroke-linecap:round;fill:none}
@media (max-width:900px){
  /* narrow screens: the note perches above the arch instead of beside it */
  .portrait-hand{top:-52px;right:-6px;width:158px;font-size:1.25rem;transform:rotate(-4deg)}
  .portrait-hand .hand-arrow{left:-46px;top:28px;width:52px;height:42px}
}

/* ---------- through-the-door transition (the portrait IS the door) ---------- */
.hero-portrait{cursor:pointer;transition:transform 1.2s var(--ease-spring), opacity 1s ease, box-shadow .4s ease;will-change:transform}
.hero-portrait:hover{box-shadow:0 18px 50px rgba(30,40,20,.26), 0 0 40px rgba(255,214,130,.55), inset 0 1px 0 rgba(255,255,255,.65)}
.hero-portrait.enter{transform:scale(4.6);opacity:0;pointer-events:none}
.door-zoom{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;text-align:center;
  background:radial-gradient(circle at 50% 62%, #ffe2ae, #f3a86a 38%, #5a3b63 78%, #2b2440 100%);
  opacity:0;pointer-events:none;transition:opacity 1s ease .25s;
}
.door-zoom.on{opacity:1;pointer-events:auto}
.dz-inner{display:grid;gap:18px;justify-items:center;padding:24px;max-width:560px;
  opacity:0;transform:translateY(18px);transition:opacity .8s ease .8s, transform .9s var(--ease-spring) .8s}
.door-zoom.on .dz-inner{opacity:1;transform:none}
.dz-title{font-family:Fraunces,serif;font-weight:600;font-size:clamp(1.8rem,5vw,2.6rem);color:#2b2440}
.dz-sub{color:#4a3a52;line-height:1.6}
.dz-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.dz-actions .chip{background:rgba(255,255,255,.4)}
@media (prefers-reduced-motion:reduce){
  .hero-portrait,.hero-portrait.enter{transition:none;transform:none;opacity:1}
  .door-zoom{transition:opacity .2s}
  .dz-inner{transition:none;opacity:1;transform:none}
}

/* ---------- collapsing glass nav (AMAPP lab anchoring) ----------
   Wrapper is fixed + centered and NEVER animates. The pill inside is
   margin-anchored: LEFT on desktop, RIGHT on mobile. Only max-width,
   gap and padding animate, so the anchor never pops. */
.topnav{
  position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;
  width:min(1100px,calc(100vw - 32px));pointer-events:none;
}
.nav-pill{
  pointer-events:auto;
  display:flex;align-items:center;gap:26px;padding:10px 22px;border-radius:999px;
  justify-content:space-between;
  max-width:100%;margin:0 auto 0 0;            /* desktop: anchored LEFT */
  will-change:max-width;
  transition:max-width .6s var(--ease-spring), gap .4s ease, padding .4s ease;
}
.nav-mark{font-family:Fraunces,serif;font-size:1.05rem;letter-spacing:.14em;text-decoration:none;white-space:nowrap;flex-shrink:0;display:flex;align-items:center;gap:9px}
.nav-mark span{
  display:inline-block;overflow:hidden;white-space:nowrap;max-width:160px;opacity:1;
  transition:max-width .55s var(--ease-spring), opacity .3s ease;
}
.nav-logo{height:26px;width:auto;display:block;filter:invert(.82) sepia(.06);}
.nav-links{
  display:flex;gap:18px;max-width:600px;opacity:1;overflow:hidden;
  transition:max-width .6s var(--ease-spring), opacity .35s ease;
}
.nav-links a{text-decoration:none;font-size:var(--t-small);color:var(--ink-soft);transition:color .3s, background .3s;padding:4px 10px;border-radius:999px;white-space:nowrap}
.nav-links a:hover{color:var(--ink);background:rgba(255,255,255,.35)}
.nav-door{
  font-family:Caveat,cursive;font-size:1.1rem;background:none;border:none;cursor:pointer;
  color:var(--ink-soft);transition:color .3s, max-width .5s var(--ease-spring), opacity .3s ease;
  flex-shrink:0;overflow:hidden;max-width:120px;opacity:.85;white-space:nowrap;
}
.nav-door:hover{color:var(--ink)}
.nav-dots{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  border:none;background:none;color:var(--ink);cursor:pointer;padding:0;
  width:0;opacity:0;overflow:hidden;
  transition:width .5s var(--ease-spring), opacity .3s ease;
}
.nav-dots svg{width:20px;height:20px;flex-shrink:0}

/* DESKTOP collapse: shrink to a wordmark pill at the LEFT; hover/peek extends rightward */
.topnav.scrolled .nav-pill{max-width:182px;gap:10px;padding:9px 18px;cursor:pointer}
.topnav.scrolled .nav-links{max-width:0;opacity:0}
.topnav.scrolled .nav-door{max-width:0;opacity:0}
.topnav.scrolled .nav-dots{width:22px;opacity:1}
.topnav.scrolled .nav-pill:hover,.topnav.scrolled .nav-pill:focus-within,.topnav.scrolled.peek .nav-pill{max-width:100%;gap:26px;padding:10px 22px;cursor:default}
.topnav.scrolled .nav-pill:hover .nav-links,.topnav.scrolled .nav-pill:focus-within .nav-links,.topnav.scrolled.peek .nav-links{max-width:600px;opacity:1}
.topnav.scrolled .nav-pill:hover .nav-door,.topnav.scrolled .nav-pill:focus-within .nav-door,.topnav.scrolled.peek .nav-door{max-width:120px;opacity:.85}
.topnav.scrolled .nav-pill:hover .nav-dots,.topnav.scrolled .nav-pill:focus-within .nav-dots,.topnav.scrolled.peek .nav-dots{width:0;opacity:0}

/* MOBILE: pill anchors RIGHT; collapse to a 48px pull-tab circle at the right edge */
@media (max-width:640px){
  .nav-pill{margin:0 0 0 auto}
  .topnav.scrolled .nav-pill{max-width:48px;gap:0;padding:12px;justify-content:center}
  .topnav.scrolled .nav-mark{max-width:0;opacity:0;overflow:hidden;margin:0}
  .topnav.scrolled .nav-mark span{max-width:0;opacity:0}
  .topnav.scrolled .nav-dots{width:24px;opacity:1}
  .topnav.scrolled.peek .nav-pill{max-width:100%;gap:10px;padding:8px 14px}
  .topnav.scrolled.peek .nav-mark{max-width:200px;opacity:1;overflow:visible}
  .topnav.scrolled.peek .nav-mark span{max-width:160px;opacity:1}
  .topnav.scrolled.peek .nav-dots{width:0;opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .nav-pill,.nav-links,.nav-door,.nav-dots,.nav-mark span{transition-duration:.001s}
}

/* ---------- hero: portrait first ---------- */
.epk-page main{max-width:980px;margin:0 auto;padding:0 20px 160px}
.hero{
  min-height:92svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:16px;padding-top:110px;position:relative;text-align:center;
}
.hero-portrait{
  width:min(340px,76vw);aspect-ratio:4/5;padding:10px;
  border-radius:200px 200px 28px 28px;
  position:relative;overflow:hidden;
  -webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.5);
}
.hero-portrait img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block;
  border-radius:190px 190px 20px 20px;
}
.hero-name{font-size:clamp(2.8rem,8vw,4.8rem);letter-spacing:.14em;margin-top:18px;text-shadow:0 2px 18px rgba(255,255,255,.5)}
.hero-line{font-family:Fraunces,serif;letter-spacing:.02em;font-size:var(--t-lede);color:var(--ink);text-shadow:0 1px 10px rgba(255,255,255,.65)}
.hero-sub{max-width:52ch;color:var(--ink-soft);line-height:var(--lh-body);text-shadow:0 1px 10px rgba(255,255,255,.65)}
/* staggered entrance: children are motes(1) portrait(2) name(3) line(4) sub(5) cta(6) */
.hero .rise{opacity:0;transform:translateY(26px);animation:riseIn 1s var(--ease-spring) forwards}
.hero .rise:nth-child(3){animation-delay:.12s}
.hero .rise:nth-child(4){animation-delay:.24s}
.hero .rise:nth-child(5){animation-delay:.36s}
.hero .rise:nth-child(6){animation-delay:.5s}
@keyframes riseIn{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.hero .rise{animation:none;opacity:1;transform:none}}
.play-hero{
  display:flex;align-items:center;gap:12px;padding:16px 28px;margin-top:8px;
  font-size:var(--t-body);font-family:Inter,sans-serif;font-weight:600;cursor:pointer;color:var(--ink);
  transition:transform .35s var(--ease-spring), box-shadow .35s;
  animation:heroGlow 4.5s ease-in-out infinite;
}
@keyframes heroGlow{
  0%,100%{box-shadow:var(--glass-shadow)}
  50%{box-shadow:0 10px 38px rgba(255,214,130,.5), inset 0 1px 0 rgba(255,255,255,.65)}
}
.play-hero:hover{transform:translateY(-3px) scale(1.01)}
.play-tri{width:0;height:0;border-left:14px solid var(--accent);border-top:9px solid transparent;border-bottom:9px solid transparent;display:inline-block;transition:border-color .6s}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:center}
.explore-btn{
  font-family:Caveat,cursive;font-size:1.3rem;font-weight:600;color:var(--ink-soft);
  padding:14px 24px;cursor:pointer;margin-top:8px;
  transition:transform .35s var(--ease-spring), color .3s;
}
.explore-btn:hover{transform:translateY(-3px);color:var(--ink)}

/* eyebrow labels */
.eyebrow{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;font-weight:600;
  color:var(--accent);transition:color .6s;margin-bottom:6px;
}

/* ---------- songs: Spotify-style catalog ---------- */
.sec-title{margin:30px 0 20px;font-size:var(--t-h2)}
.song-badge{font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ember);margin-left:8px;vertical-align:2px}
.tracklist{padding:8px 10px}
.track{border-bottom:1px solid rgba(43,43,40,.08)}
.track:last-child{border-bottom:none}
/* track rows fade in with a stagger on scroll (armed by JS, motion only) */
.track-armed{opacity:0;transform:translateY(14px)}
.track-armed.track-in{opacity:1;transform:none;
  transition:opacity .55s var(--ease-out) calc(var(--ti,0)*60ms),
             transform .65s var(--ease-spring) calc(var(--ti,0)*60ms)}
/* play/pause icon swap: soft blur + scale pop (transitions.dev) */
@keyframes iconPop{from{opacity:.25;filter:blur(2px);transform:scale(.55)}to{opacity:1;filter:blur(0);transform:scale(1)}}
.icon-pop{animation:iconPop var(--dur-quick) var(--ease-out)}
/* animated count-up stat keeps a steady width */
.count{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .track-armed{opacity:1;transform:none}
  .track-armed.track-in{transition:none}
  .icon-pop{animation:none}
}
.tr-row{
  display:grid;grid-template-columns:40px 52px 1fr auto auto auto;gap:14px;align-items:center;
  padding:11px 12px;border-radius:14px;cursor:pointer;
  transition:background .25s ease;
}
.tr-row:hover{background:rgba(255,255,255,.38)}
.track.playing .tr-row{background:rgba(255,255,255,.46)}
.tr-play{
  position:relative;width:40px;height:40px;border:none;background:none;cursor:pointer;color:var(--ink);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:background .25s;
}
.tr-play:hover{background:rgba(255,255,255,.55)}
.tr-idx{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.95rem;transition:opacity .2s}
.tr-tri{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.95rem;opacity:0;transition:opacity .2s}
.tr-row:hover .tr-idx{opacity:0}
.tr-row:hover .tr-tri{opacity:1}
.track.playing .tr-idx{opacity:0}
.track.playing .tr-tri{opacity:0;color:var(--accent)}
.track.playing .eq{display:flex;position:absolute;inset:0;align-items:center;justify-content:center}
.track.playing .tr-row:hover .tr-tri{opacity:1}
.track.playing .tr-row:hover .eq{display:none}
@media (hover:none){
  .tr-idx{opacity:0}.tr-tri{opacity:1}
  .track.playing .eq{display:none}.track.playing .tr-tri{opacity:1}
}
.eq{display:none;gap:3px;align-items:flex-end;height:16px}
.eq i{width:3px;border-radius:2px;background:var(--accent);animation:eq 1.05s ease-in-out infinite}
.eq i:nth-child(2){animation-delay:.18s}
.eq i:nth-child(3){animation-delay:.36s}
.eq i:nth-child(4){animation-delay:.54s}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}
@media (prefers-reduced-motion:reduce){.eq i{animation:none;height:9px}}
.tr-art{width:52px;height:52px;border-radius:9px;object-fit:cover;box-shadow:0 5px 14px rgba(0,0,0,.22)}
.tr-art.ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#7db4e8,#2e5d9e);color:#fff;font-family:Fraunces,serif;font-size:1.2rem}
.tr-info{min-width:0;display:grid;gap:1px}
.tr-title{font-family:Fraunces,serif;font-size:1.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track.playing .tr-title{color:var(--accent)}
.tr-sub{color:var(--ink-soft);font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-dur{color:var(--ink-soft);font-size:.88rem;font-variant-numeric:tabular-nums}
.tr-dl{
  width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:var(--ink-soft);text-decoration:none;font-size:1.05rem;transition:background .25s, color .25s;
}
.tr-dl:hover{background:rgba(255,255,255,.55);color:var(--ink)}
.tr-more{
  width:36px;height:36px;border:none;background:none;cursor:pointer;color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  transition:transform .4s var(--ease-spring), background .25s;font-size:.85rem;
}
.tr-more:hover{background:rgba(255,255,255,.55)}
.track.openx .tr-more{transform:rotate(180deg)}
.tr-body{max-height:0;overflow:hidden;transition:max-height .6s var(--ease-spring)}
.tr-body-pad{
  padding:6px 16px 22px 106px;display:grid;gap:10px;
  opacity:0;transform:translateY(8px);
  transition:opacity .35s ease .08s, transform .5s var(--ease-spring) .08s;
}
.track.openx .tr-body-pad{opacity:1;transform:none}
.tr-body-pad p{line-height:var(--lh-body);color:var(--ink);max-width:62ch}
.tr-credit{font-size:var(--t-meta);color:var(--ink-soft)}
.tr-links{display:flex;gap:18px;flex-wrap:wrap;margin-top:2px;font-size:.88rem}
.tr-links a,.tr-links button{
  background:none;border:none;cursor:pointer;font:inherit;font-size:.88rem;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;padding:0;
}
.tr-links a:hover,.tr-links button:hover{color:var(--ember)}
@media (max-width:640px){
  .tr-row{grid-template-columns:34px 44px 1fr auto auto;gap:10px}
  .tr-dur{display:none}
  .tr-art{width:44px;height:44px}
  .tr-body-pad{padding:6px 14px 20px 14px}
  .tr-sub{white-space:normal}
  .tr-title{white-space:normal;font-size:1.02rem;line-height:1.25}
  .song-badge{display:none}
}

/* chips (kept for contact + transition panel) */
.chip{
  padding:8px 16px;border-radius:999px;font-size:var(--t-meta);text-decoration:none;font-weight:500;
  transition:transform .3s var(--ease-spring), border-color .3s;display:inline-block;
  background:none;cursor:pointer;font-family:inherit;color:var(--ink);
}
.chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb, var(--ember) 35%, rgba(255,255,255,.48))}

/* ---------- downloads list (no bubbles) ---------- */
.dl-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.dl-row{
  display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;
  padding:11px 6px;text-decoration:none;border-bottom:1px solid rgba(43,43,40,.10);
  border-radius:8px;transition:background .25s;
}
.dl-row:hover{background:rgba(255,255,255,.35)}
.dl-name{font-weight:500;font-size:.95rem}
.dl-meta{color:var(--ink-soft);font-size:.82rem;font-variant-numeric:tabular-nums}
.dl-ico{color:var(--ink-soft);font-size:1rem}
.dl-row:hover .dl-ico{color:var(--ink)}
@media (max-width:640px){.dl-list{grid-template-columns:1fr}}

/* ---------- about / press / contact ---------- */
.about,.press,.contact{margin-top:90px}
.about-card{padding:36px;display:grid;gap:14px}
.about-text{display:contents}
.about-text h2,.press-card h2,.contact-card h2{font-size:var(--t-h2);margin-bottom:4px}
.about-card p{line-height:1.75;color:var(--ink);max-width:62ch}
.pull{font-family:Fraunces,serif;font-size:var(--t-h3);line-height:1.4;color:var(--ink);padding:6px 0 6px 18px;border-left:3px solid var(--accent);transition:border-color .6s;max-width:62ch}
.press-card,.contact-card{padding:30px;display:grid;gap:16px}
.press-points{list-style:none;display:grid;gap:8px}
.press-points li{padding-left:22px;position:relative;line-height:var(--lh-body)}
.press-points li::before{content:"";position:absolute;left:0;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--accent);transition:background .6s}
.press-note{color:var(--ink-soft);font-size:var(--t-small)}
.press-downloads{display:flex;gap:10px;flex-wrap:wrap}
.press-contact{font-size:.95rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.contact-links{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- footer ---------- */
.foot{margin-top:110px;text-align:center;display:grid;gap:10px;justify-items:center;padding-bottom:30px}
.foot-thanks{font-family:Fraunces,serif;font-style:italic;color:var(--ink-soft);font-size:1.05rem}
.foot-line{color:var(--ink-soft);font-size:var(--t-meta)}

/* ---------- player (right-anchored so it can tuck away AMAPP-style) ---------- */
.player{
  position:fixed;right:50%;bottom:18px;transform:translateX(50%);z-index:60;
  width:min(720px,94vw);display:flex;align-items:center;gap:10px;padding:12px 16px;
  box-shadow:var(--glass-shadow), 0 10px 44px color-mix(in srgb, var(--accent) 30%, transparent);
  transition:box-shadow 1s ease, transform .65s var(--ease-spring), opacity .5s ease, right .65s var(--ease-spring);
}
.player[hidden]{display:none}
.player.off{transform:translate(50%,130%);opacity:0}
/* idle fade (AMAPP 0.35), any touch brings it back */
.player.dim{opacity:.35}
.player:hover,.player:focus-within{opacity:1}
/* docked: slides to the right edge, leaving the pull tab */
.player.docked{right:0;transform:translateX(calc(100% - 48px));opacity:1}
.player.docked.dim{opacity:.8}
.p-tab{
  background:none;border:none;cursor:pointer;color:var(--ink-soft);flex-shrink:0;
  width:30px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;border-radius:10px;transition:background .25s, color .25s, transform .4s var(--ease-spring);
}
.p-tab:hover{background:rgba(255,255,255,.5);color:var(--ink)}
.player.docked .p-tab{transform:rotate(180deg)}
.p-dl{
  flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  text-decoration:none;color:var(--ink-soft);font-size:1.15rem;border-radius:50%;
  transition:background .25s, color .25s;
}
.p-dl:hover{background:rgba(255,255,255,.5);color:var(--ink)}
.p-btn{
  background:none;border:none;font-size:1.05rem;cursor:pointer;color:var(--ink);
  width:38px;height:38px;border-radius:50%;transition:background .25s, transform .3s var(--ease-spring);flex-shrink:0;
}
.p-btn:hover{background:rgba(255,255,255,.45);transform:scale(1.08)}
.p-play{font-size:1.2rem}
.p-mid{flex:1;min-width:0;display:grid;gap:2px;position:relative}
.p-titlerow{display:flex;justify-content:space-between;align-items:baseline;gap:10px;min-width:0}
.p-title{font-size:var(--t-small);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.p-time{font-size:.78rem;color:var(--ink-soft);flex-shrink:0;font-variant-numeric:tabular-nums}
.p-wave{width:100%;height:54px;cursor:pointer;display:block;touch-action:none;min-width:0}
.p-tip{
  position:absolute;bottom:calc(100% + 6px);transform:translateX(-50%);
  background:rgba(43,43,40,.92);color:#fff;font-size:.72rem;padding:4px 8px;border-radius:8px;
  pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.p-tip.show{opacity:1}
.p-art{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0;box-shadow:0 6px 16px rgba(0,0,0,.25)}

/* focus visibility (outline follows each element's own radius) */
a:focus-visible,button:focus-visible,.dream:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .glass{-webkit-backdrop-filter:blur(12px) saturate(1.4);backdrop-filter:blur(12px) saturate(1.4)}
  .song-inner{flex-wrap:wrap}
  .song-cover{width:88px;height:88px}
  .song-num{display:none}
  .about-card{padding:22px}
  .p-art{display:none}
  .hero{padding-top:96px}
  /* reclaim width for the waveform on phones */
  .player{gap:4px;padding:10px 12px;width:96vw}
  .p-btn{width:34px;height:34px}
  .p-dl{width:30px;height:30px}
  .p-tab{width:24px}
  .p-time{font-size:.72rem}
}
@media (max-width:560px){
  .nav-pill{gap:10px;padding:8px 14px}
  .nav-mark{font-size:.95rem;letter-spacing:.1em}
  .nav-links{gap:2px}
  .nav-links a{font-size:.8rem;padding:4px 6px}
  .nav-door{display:none}
}

/* ========================================================================
   THE WORLD - a permanently golden-hour field, seven doors, rooms behind
   ======================================================================== */
.world-page{--ink-soft:#4a3c2f;background:linear-gradient(var(--skyTop),var(--skyBot));overflow:hidden}
.world-page main{margin:0;padding:0;max-width:none}
/* the field, warmed into dusk */
.world-field{height:42vh;opacity:.85;filter:sepia(.35) saturate(1.25) brightness(.94) hue-rotate(-8deg)}

/* arrival flood: same radial as the door-zoom, fades to reveal the field */
.arrive{
  position:fixed;inset:0;z-index:70;pointer-events:auto;opacity:1;
  background:radial-gradient(circle at 50% 62%, #ffe2ae, #f3a86a 38%, #5a3b63 78%, #2b2440 100%);
  transition:opacity 1.2s ease;
}
.arrive.gone{opacity:0;pointer-events:none}

/* top-left mark + top-right hand button */
.world-mark{
  position:fixed;top:18px;left:18px;z-index:40;padding:9px 18px;border-radius:999px;
  font-family:Fraunces,serif;font-size:1rem;letter-spacing:.14em;text-decoration:none;color:var(--ink);
  transition:transform .35s var(--ease-spring);
}
.world-mark:hover{transform:translateY(-2px)}
.world-back{
  position:fixed;top:18px;right:18px;z-index:40;background:none;border:none;cursor:pointer;
  font-family:Caveat,cursive;font-size:1.3rem;font-weight:600;color:var(--ink-soft);
  text-decoration:none;
  transition:transform .35s var(--ease-spring), color .3s;
}
.world-back:hover{transform:translateY(-2px);color:var(--ink)}

/* handwritten greeting, fades in after arrival */
.world-greet{
  position:fixed;top:70px;left:0;right:0;z-index:30;text-align:center;pointer-events:none;
  opacity:0;transform:translateY(-8px);animation:greetIn 1.2s var(--ease-spring) 1.1s forwards;
}
.greet-line{font-family:Caveat,cursive;font-weight:600;font-size:clamp(1.8rem,5vw,2.7rem);color:var(--ink);text-shadow:0 1px 14px rgba(255,238,200,.5)}
.greet-sub{font-family:Caveat,cursive;font-weight:500;font-size:1.2rem;color:var(--ink-soft);margin-top:2px}
@keyframes greetIn{to{opacity:1;transform:none}}

/* ---------- the stage: a winding path of doors receding into the field ----------
   Door coords are % of the stage so the composition holds at any size.
   Front doors stand low in the grass, deep doors recede to the horizon.
   .in-page = the embedded music area on index. */
.stage{position:relative;width:100%;max-width:none;height:100svh;min-height:600px;margin:0;padding:0}
.stage.in-page{height:76vh;min-height:560px;max-height:860px}
.stage-note{
  text-align:center;font-family:Caveat,cursive;font-weight:500;font-size:1.25rem;
  color:var(--ink-soft);margin:-6px 0 0;
}
.stage-note .nav-door{font-size:1.25rem;text-decoration:underline;text-underline-offset:3px;padding:0}
.wdoor{
  position:absolute;left:var(--x);top:var(--y);
  width:calc(min(210px, 13vw + 62px) * var(--s));   /* shrink with the viewport so doors keep their breathing room */
  transform:translate(calc(-50% + var(--px,0px)), calc(-50% + var(--py,0px))) scale(1);
  display:grid;gap:10px;justify-items:center;
  background:none;border:none;cursor:pointer;padding:0;
  z-index:calc(100 - var(--d) * 90);
  opacity:calc(1 - var(--d) * .22);
  transition:transform .9s var(--ease-spring), opacity .5s ease;
  will-change:transform;
}
/* the arch: echoes the hero-portrait doorway shape, wooden-light frame + glass edge */
.wdoor-arch{
  position:relative;display:block;width:100%;aspect-ratio:4/5;padding:6px;
  border-radius:160px 160px 22px 22px;
  border:3px solid rgba(255,236,190,.55);
  background:rgba(255,245,225,.4);
  box-shadow:0 calc(14px - var(--d)*10px) calc(40px - var(--d)*24px) rgba(40,28,18,calc(.34 - var(--d)*.2)),
             inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
}
.wdoor-arch img{
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:154px 154px 16px 16px;
  /* deeper doors haze into the distance */
  filter:brightness(calc(1 - var(--d)*.14)) contrast(calc(1 - var(--d)*.12)) saturate(calc(1 - var(--d)*.18));
}
/* crack of light down the left edge, widens + glows on hover (the door opening) */
.wdoor-arch::before{
  content:"";position:absolute;top:8%;bottom:8%;left:6px;width:2px;z-index:2;
  background:linear-gradient(rgba(255,240,200,0), rgba(255,238,190,.95), rgba(255,240,200,0));
  box-shadow:0 0 14px 3px rgba(255,226,150,.7);
  opacity:0;transition:width .5s var(--ease-spring), opacity .4s ease;
}
.wdoor:hover .wdoor-arch::before,.wdoor:focus-visible .wdoor-arch::before{width:9px;opacity:1}
.wdoor:hover .wdoor-arch,.wdoor:focus-visible .wdoor-arch{
  box-shadow:0 18px 46px rgba(40,28,18,.4), 0 0 36px rgba(255,214,130,.6), inset 0 1px 0 rgba(255,255,255,.6);
}
.wdoor-plate{
  padding:6px 14px;border-radius:12px;display:grid;justify-items:center;gap:0;
  text-align:center;line-height:1.15;
}
.plate-title{font-family:Fraunces,serif;font-weight:600;font-size:calc(1.05rem * (0.7 + 0.3 * var(--s)));color:var(--ink)}
.plate-year{font-size:.78rem;color:var(--ink-soft)}

/* gentle float, staggered per door */
@keyframes wfloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
.wdoor-arch{animation:wfloat 7s ease-in-out infinite;animation-delay:var(--dl,0s)}

/* the chosen door zooms toward the viewer and light floods out */
.wdoor.open{z-index:75;transform:translate(-50%,-50%) scale(6);opacity:0;transition:transform .9s var(--ease-spring), opacity .9s ease}
.wdoor.open .wdoor-arch::before{width:60%;opacity:1}
.wdoor.open .wdoor-plate{opacity:0}

/* ---------- the room behind a door ---------- */
.room{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;  /* above every door */
  background:radial-gradient(circle at 50% 40%, rgba(90,59,99,.55), rgba(43,36,64,.82));
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transition:opacity .5s ease;
}
.room.on{opacity:1;pointer-events:auto}
.room[hidden]{display:none}
.room-card{
  display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:30px;align-items:center;
  max-width:840px;width:100%;padding:30px;
  transform:translateY(16px);transition:transform .6s var(--ease-spring);
}
.room.on .room-card{transform:none}
.room-arch{
  width:100%;aspect-ratio:4/5;padding:8px;border-radius:170px 170px 24px 24px;
  background:rgba(255,245,225,.45);border:3px solid rgba(255,236,190,.55);overflow:hidden;
  box-shadow:0 16px 44px rgba(20,12,30,.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.room-arch img{width:100%;height:100%;object-fit:cover;display:block;border-radius:162px 162px 18px 18px}
.room-text{display:grid;gap:10px;min-width:0}
.room-title{font-family:Fraunces,serif;font-weight:600;font-size:var(--t-h2);color:var(--ink)}
.room-year{color:var(--ink-soft);font-size:var(--t-small);margin-top:-6px}
.room-blurb p{line-height:var(--lh-body);color:var(--ink);max-width:54ch}
.room-credit{font-size:var(--t-meta);color:var(--ink-soft)}
.room-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.room-links .chip{background:rgba(255,255,255,.4)}

/* ---------- responsive: below 700px the field becomes a tidy grid ---------- */
@media (max-width:700px){
  .world-page{overflow-y:auto;overflow-x:clip}   /* the grid needs to scroll */
  .stage,.world-page .stage{
    display:grid;grid-template-columns:1fr 1fr;gap:18px;align-content:start;
    height:auto;min-height:auto;max-height:none;padding:0 0 16px;
  }
  .world-page .stage{padding:150px 18px 130px}   /* full-page version: air under the greeting + player */
  .wdoor{
    position:static;width:100%;transform:none;opacity:1;z-index:auto;
  }
  .wdoor-arch{box-shadow:0 10px 28px rgba(40,28,18,.28), inset 0 1px 0 rgba(255,255,255,.6)}
  .wdoor-arch img{filter:none}
  .plate-title{font-size:1rem}
  .room-card{grid-template-columns:1fr;gap:18px;padding:22px;max-height:88vh;overflow:auto}
  .room-arch{max-width:70vw;margin:0 auto}
}

/* ---------- reduced motion: no float, no parallax, quick fades ---------- */
@media (prefers-reduced-motion:reduce){
  .world-greet{animation:none;opacity:1;transform:none}
  .wdoor,.wdoor-arch{animation:none;transition:none}
  .wdoor.open{transition:opacity .2s ease;transform:translate(-50%,-50%) scale(1);opacity:0}
  .arrive{transition:opacity .2s ease}
  .room,.room-card{transition:opacity .2s ease}
}

/* ---------- the 3D world (world.html) ---------- */
.world-canvas{position:fixed;inset:0;z-index:0;display:block;touch-action:none}
.world-hint{
  position:fixed;left:0;right:0;bottom:96px;z-index:30;text-align:center;pointer-events:none;
  font-family:Caveat,cursive;font-weight:500;font-size:1.2rem;color:rgba(255,240,214,.92);
  text-shadow:0 1px 10px rgba(60,30,10,.55);
  opacity:0;transition:opacity .6s ease;
}
.world-hint.show{opacity:1}
.world-prompt{
  position:fixed;left:50%;bottom:148px;transform:translateX(-50%) translateY(6px);z-index:30;
  padding:9px 20px;border-radius:999px;pointer-events:none;
  font-family:Caveat,cursive;font-weight:600;font-size:1.35rem;color:#3a2a18;
  background:rgba(255,240,210,.88);box-shadow:0 6px 24px rgba(50,25,5,.35);
  opacity:0;transition:opacity .3s ease, transform .35s var(--ease-spring);
}
.world-prompt.show{opacity:1;transform:translateX(-50%)}
.crosshair{
  position:fixed;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;z-index:30;border-radius:50%;
  background:rgba(255,244,214,.9);box-shadow:0 0 8px 2px rgba(255,220,150,.5);
  opacity:0;transition:opacity .3s;pointer-events:none;
}
.crosshair.show{opacity:.9}
/* active-mission HUD (chronus minigames): dusk glass pill, top-center */
.mission-hud{
  position:fixed;left:50%;top:20px;transform:translateX(-50%) translateY(-10px);z-index:38;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 18px 11px;border-radius:16px;pointer-events:none;text-align:center;
  background:rgba(18,22,36,.52);border:1px solid rgba(255,238,206,.22);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3);
  box-shadow:0 10px 30px rgba(8,10,22,.4);
  color:#f4ece0;opacity:0;transition:opacity .3s ease, transform .3s var(--ease-spring);
}
.mission-hud.show{opacity:1;transform:translateX(-50%)}
.mission-hud .m-title{font-family:Fraunces,Georgia,serif;font-size:.98rem;letter-spacing:.2px;color:#ffeecd}
.mission-hud .m-obj{font-family:Caveat,cursive;font-size:1.1rem;line-height:1.05;color:rgba(244,236,224,.9)}
.mission-hud .m-read{font-family:'DM Mono',ui-monospace,monospace;font-size:.74rem;letter-spacing:.6px;color:rgba(231,177,90,.92);min-height:.7rem}
.mission-hud .m-read:empty{display:none}
.mission-hud .m-bar{width:152px;height:4px;margin-top:3px;border-radius:3px;background:rgba(255,255,255,.15);overflow:hidden}
.mission-hud .m-bar > i{display:block;height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,#e7b15a,#ff6f4d);transition:width .12s linear}
@media (prefers-reduced-motion:reduce){.mission-hud,.mission-hud .m-bar > i{transition:none}}
.flood{
  position:fixed;inset:0;z-index:90;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 58%, rgba(255,226,174,.9), rgba(243,168,106,.65) 45%, rgba(90,59,99,.35) 80%);
  transition:opacity .45s ease;
}
.flood.on{opacity:1}
.joy{
  position:fixed;left:22px;bottom:104px;width:118px;height:118px;z-index:35;border-radius:50%;
  background:rgba(255,245,220,.14);border:1.5px solid rgba(255,240,205,.4);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:none;touch-action:none;
}
.joy-thumb{
  position:absolute;left:50%;top:50%;width:48px;height:48px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:rgba(255,242,205,.55);box-shadow:0 4px 14px rgba(50,25,5,.3);
}
@media (pointer:coarse){.joy{display:block}}
.world-page .player{z-index:60}
.world-greet{transition:opacity 1.2s ease}
.world-greet.gone{opacity:0 !important}
.vignette{
  position:fixed;inset:0;z-index:20;pointer-events:none;
  background:radial-gradient(ellipse at 50% 46%, transparent 58%, rgba(43,36,64,.26) 100%);
}
.webgl-fail{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;text-align:center;padding:24px;
  background:radial-gradient(circle at 50% 62%, #ffe2ae, #f3a86a 38%, #5a3b63 78%, #2b2440 100%);
}
.webgl-fail .glass{max-width:430px;padding:28px;display:grid;gap:12px;justify-items:center}

/* ---------- TAKE 47 - the bar above the beach ---------- */
.take47-page .world-greet .greet-line{color:#ffeecd;text-shadow:0 1px 16px rgba(232,88,77,.45)}
.take47-page .world-greet .greet-sub{color:rgba(255,238,205,.85)}
/* HUD over the night sky: light ink + a pill so the exit stays visible */
.take47-page .world-back{
  color:#ffe9c4;padding:11px 16px;border-radius:999px;
  background:rgba(40,22,14,.38);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.take47-page .world-back:hover{color:#fff7e6}
.take47-page .world-hint{color:#ffeecd}
.power-page .world-hint{display:inline-block;left:50%;right:auto;transform:translateX(-50%);padding:7px 16px;border-radius:999px;color:#fff6e6;background:rgba(40,24,16,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.power-page .world-back{color:#ffe9c4;padding:9px 14px;border-radius:999px;background:rgba(40,22,14,.4);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}

/* Lotus is bright noon: HUD text needs a dark pill to read over sky + pale water */
.lotus-page .world-hint{
  display:inline-block;left:50%;right:auto;transform:translateX(-50%);
  padding:7px 16px;border-radius:999px;color:#fff6e6;
  background:rgba(40,30,18,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.lotus-page .world-greet .greet-line{color:#23414f;text-shadow:0 1px 14px rgba(255,255,255,.5)}
.lotus-page .world-greet .greet-sub{color:#36545f}
.lotus-page .world-back{color:#1f3b46}
.lotus-page .world-back:hover{color:#0e2a33}

/* world pages: the player docks LEFT and reveals on hover, like the nav pill */
.world-page .player{
  left:0;right:auto;
  transform:translateX(calc(-100% + 52px));
  transition:transform .55s var(--ease-spring), opacity .5s ease, box-shadow 1s ease;
}
.world-page .player:hover,.world-page .player:focus-within,.world-page .player.open{transform:translateX(14px)}
.world-page .player .p-tab{display:none}
.world-page .player.off{transform:translate(-110%,130%)}
.world-page .player.docked{right:auto;left:0}

/* the drink menu: a handwritten card, intimate */
.drink-menu{
  position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:24px;
  background:rgba(30,16,12,.42);
  opacity:0;pointer-events:none;transition:opacity .35s ease;
}
.drink-menu.on{opacity:1;pointer-events:auto}
.drink-menu[hidden]{display:none}
.menu-card{
  width:min(420px,88vw);padding:26px 30px;display:grid;gap:4px;
  background:rgba(255,244,226,.94);
}
.menu-title{
  font-family:Caveat,cursive;font-weight:600;font-size:2rem;color:#3a2a18;
  text-align:center;margin-bottom:6px;
}
.menu-card ul{list-style:none;display:grid;gap:2px}
.menu-card li{border-radius:12px}
.menu-card button{
  width:100%;text-align:left;background:none;border:none;cursor:pointer;
  padding:8px 12px;border-radius:12px;display:grid;gap:0;
  font-family:Caveat,cursive;transition:background .2s;
}
.menu-card button:hover,.menu-card button:focus-visible{background:rgba(201,106,88,.16)}
.menu-name{font-size:1.45rem;font-weight:600;color:#3a2a18}
.menu-blurb{font-family:Inter,sans-serif;font-size:.8rem;color:#7a6450}
.menu-hint{
  font-family:Caveat,cursive;font-size:1.05rem;color:#9a8064;text-align:center;margin-top:8px;
}
/* your reply hand: stacked handwritten cards above the prompt line */
.replies{
  position:fixed;left:50%;bottom:190px;transform:translateX(-50%);z-index:48;
  display:grid;gap:8px;width:min(420px,86vw);
}
.replies[hidden]{display:none}
.replies button{
  text-align:left;background:rgba(255,244,226,.93);border:none;cursor:pointer;
  padding:10px 18px;border-radius:14px;box-shadow:0 8px 24px rgba(40,18,8,.35);
  font-family:Caveat,cursive;font-weight:600;font-size:1.2rem;color:#3a2a18;
  transition:transform .2s var(--ease-spring), background .2s;
}
.replies button:hover,.replies button:focus-visible{transform:translateX(6px);background:#fff3dd}

/* the docked player is a slow-spinning vinyl puck: the full cover, nothing clipped */
.world-page .player{transform:translateX(calc(-100% + 86px))}
.world-page .player .p-art{
  border-radius:50%;width:56px;height:56px;
  animation:puckSpin 9s linear infinite;
  box-shadow:0 0 0 4px rgba(20,14,10,.85), 0 0 18px rgba(232,88,77,.35);
}
.world-page .player:hover .p-art,.world-page .player:focus-within .p-art,.world-page .player.open .p-art{
  border-radius:9px;animation:none;box-shadow:0 5px 14px rgba(0,0,0,.22);
}
@keyframes puckSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.world-page .player .p-art{animation:none}}

/* the world-volume slider lives in the player, handwriting label and all */
.p-sfx-wrap{display:flex;align-items:center;gap:6px;flex-shrink:0}
.p-sfx-label{font-family:Caveat,cursive;font-weight:600;font-size:1.05rem;color:var(--ink-soft)}
.p-sfx{width:72px;accent-color:#c96a58;cursor:pointer}
@media (max-width:640px){.p-sfx{width:54px}}

/* mobile action button: whatever E would do, one thumb away */
.act-btn{
  position:fixed;right:20px;bottom:140px;z-index:46;
  font-family:Caveat,cursive;font-weight:600;font-size:1.3rem;color:#3a2a18;
  padding:14px 22px;background:rgba(255,240,210,.92);
  box-shadow:0 8px 26px rgba(50,25,5,.4);
}
.act-btn[hidden]{display:none}
.bubble{
  position:fixed;z-index:45;max-width:min(340px,72vw);padding:12px 18px;border-radius:18px;
  background:rgba(255,244,226,.93);box-shadow:0 10px 32px rgba(40,18,8,.4);
  font-family:Caveat,cursive;font-weight:600;font-size:1.3rem;line-height:1.25;color:#3a2a18;
  transform:translate(-50%,-100%);pointer-events:none;
  opacity:0;transition:opacity .25s ease, transform .35s var(--ease-spring);
}
.bubble.show{opacity:1;transform:translate(-50%,calc(-100% - 10px))}
.bubble::after{
  content:"";position:absolute;left:50%;bottom:-8px;width:16px;height:16px;
  background:rgba(255,244,226,.93);transform:translateX(-50%) rotate(45deg);border-radius:3px;
}
.bubble .bubble-text{display:block}
@media (prefers-reduced-motion:reduce){.bubble{transition:opacity .15s}}