/* ---- palette lifted straight from the pfp ---- */
:root{
  --bg:        #899b8d;   /* pfp background */
  --bg-lift:   #9aad9e;   /* lighter pool behind the ape */
  --bg-deep:   #6f8175;
  --ink:       #17201a;   /* the cartoon linework black */
  --cream:     #f2eddb;   /* ape fur / bubble fill */
  --cream-dim: #ded8c2;
  --pink:      #d33a63;   /* hair tendrils */
  --pink-hot:  #f6128a;   /* the pink of the slime frames, sampled from the art */
  --slime-hot: #a4ef11;   /* and its green */
  --mint:      #b6e8c8;   /* teeth */
  --slime:     #4cb424;   /* eye drip */

  --line: 3px;
  --ape-anchor: 14px;   /* how far the ape is sunk past the bottom edge */
  --bubble-base: clamp(58px, min(8.6vw, 13vh), 124px);
  --bubble:var(--bubble-base);
}

*{box-sizing:border-box}
img{-webkit-user-drag:none;user-select:none}

html,body{height:100%}

body{
  margin:0;
  overflow:hidden;
  /* cover + fixed keeps it filling the window; the colour underneath shows only
     while the image is still loading. Which painting, though, depends on the
     shape of the window — see below. */
  background:var(--bg) url("../img/background-menu-clear.webp?v=1b9c67b0") center / cover no-repeat fixed;
  color:var(--ink);
  font-family:"Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* The slime is a frame, and `cover` crops a 16:9 painting hard once the window
   stops being roughly 16:9 — on a phone it shows the middle ~28% of the width,
   which is the empty middle, and on a very wide window the middle ~49% of the
   height. Neither has much slime in it. So there are three paintings, each
   drawn for its own shape, and the window picks the nearest one. */
@media (max-aspect-ratio:1/1){
  body{background-image:url("../img/background-portrait-menu-clear.webp?v=5085de41")}
}
@media (min-aspect-ratio:2/1){
  body{background-image:url("../img/background-wide-menu-clear.webp?v=bb4f5474")}
}

/* ---------- the loading screen ---------- */
/* The site is 1.7MB of artwork on a first visit and the ape is the whole point,
   so he should not arrive in pieces. This holds the curtain until the images
   the first view needs are decoded — real progress, not a fixed delay — and
   then drips away. On a warm cache it is gone in a few dozen milliseconds. */
.boot{
  position:fixed; inset:0; z-index:999;
  display:grid; place-content:center; justify-items:center;
  gap:1.4rem;
  background:var(--bg);
  transition:opacity .55s ease .25s, visibility 0s linear .8s;
}
/* the slime runs off the top, the way it drips into the artwork everywhere else */
.boot__slime{
  position:absolute; inset:0 0 auto 0;
  height:100%;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(164,239,17,.22), rgba(164,239,17,0) 60%),
    linear-gradient(180deg, rgba(23,32,26,.35), rgba(23,32,26,0) 45%);
  pointer-events:none;
}
.boot__logo{
  width:min(64vw, 300px); height:auto;
  filter:drop-shadow(0 6px 0 rgba(23,32,26,.35));
  animation:bootBreathe 2.4s ease-in-out infinite;
}
@keyframes bootBreathe{
  0%,100%{ transform:scale(1)      rotate(-.6deg) }
  50%    { transform:scale(1.045)  rotate(.6deg)  }
}
.boot__bar,.slot-loading__bar{
  width:min(52vw, 240px); height:12px;
  border:2.5px solid var(--ink);
  border-radius:999px;
  /* solid, not a wash: at 18% opacity the track vanished into the green and
     the bar read as nothing at all */
  background:rgba(23,32,26,.55);
  box-shadow:0 3px 0 -1px rgba(23,32,26,.3);
  overflow:hidden;
}
.boot__fill,.slot-loading__fill{
  display:block; height:100%; width:0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--slime-hot), var(--pink-hot));
  transition:width .3s ease;
}
.boot__pct{
  margin:0;
  font-family:"Archivo Black", ui-sans-serif, system-ui, sans-serif;
  font-size:.78rem; letter-spacing:.18em;
  /* same treatment as the balloon names: cream on a dark halo, because the
     background behind it is mid-green and dark ink simply disappeared */
  color:var(--cream);
  text-shadow:0 0 3px rgba(16,23,19,.95), 0 0 7px rgba(16,23,19,.8), 0 2px 4px rgba(16,23,19,.85);
}

/* gone: the logo drops away with the curtain, so it reads as one movement
   into the page rather than a panel blinking out */
.booted .boot{ opacity:0; visibility:hidden; pointer-events:none }
.booted .boot__logo{ animation:none; transition:transform .6s cubic-bezier(.4,0,.6,1); transform:translateY(-18vh) scale(.86) }
.booted .boot__bar,
.booted .boot__pct{ transition:opacity .25s ease; opacity:0 }

@media (prefers-reduced-motion:reduce){
  .boot__logo{animation:none}
  .booted .boot__logo{transition:none; transform:none}
}

/* subtle paper grain so the flat colour doesn't feel dead */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- header ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  /* sits low enough that the ideas can drift around it, not just under it */
  padding:clamp(.8rem,3.5vh,56px) clamp(1rem,3.5vw,2.6rem) 0;
  pointer-events:none;               /* only the links themselves are clickable */
}
.topbar a,
.topbar button{pointer-events:auto}

/* Keep the logo centred independently of the controls on the right. */
.wordmark{display:block; line-height:0; cursor:pointer;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.wordmark img{
  display:block;pointer-events:none;
  width:clamp(230px, 27vw, 440px);
  height:auto;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.55)) drop-shadow(0 8px 18px rgba(0,0,0,.5));
  animation:logoBob 7s ease-in-out infinite;
}
@keyframes logoBob{
  0%,100%{ transform:translateY(0)    rotate(-.5deg) scale(1)     }
  50%    { transform:translateY(-6px) rotate(.55deg) scale(1.012) }
}

/* ---------- header controls ---------- */
.topbar__actions{
  position:absolute;
  top:clamp(.9rem,3.2vh,44px);
  right:clamp(1rem,3.5vw,2.6rem);
  display:flex;
  align-items:center;
  gap:clamp(4px,1vw,10px);
}
.topbar__admin,
.radio{
  display:inline-flex; align-items:center; justify-content:center;
  width:clamp(34px,3.6vw,42px); aspect-ratio:1;
  background:none; border:0; padding:0;
  color:var(--pink-hot);
  cursor:pointer;
  transition:transform .18s ease;
  filter:drop-shadow(0 0 5px rgba(0,0,0,.9)) drop-shadow(0 2px 6px rgba(0,0,0,.65));
}
.topbar__admin[hidden]{display:none}
.topbar__admin svg{width:72%;height:72%;display:block;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.topbar__admin:hover,
.radio:hover{transform:translateY(-2px) scale(1.08)}
.topbar__admin:active,
.radio:active{transform:translateY(0) scale(.94)}
.topbar__admin:focus-visible{outline:none;filter:drop-shadow(0 0 7px var(--acid, #b8ff50)) drop-shadow(0 0 2px #111)}
.radio:focus-visible{outline:none;border-radius:50%}
/* One radio button, four steps. data-level is set by radio.js. */
.radio__icon{width:100%; height:100%; display:block; overflow:visible}
.radio__body{fill:currentColor; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round}
.radio__wave,
.radio__cross{
  fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round;
}
/* off: no waves, cross showing */
.radio__wave{opacity:0; transition:opacity .18s ease}
.radio__cross{opacity:1; transition:opacity .18s ease}
.radio[data-level="0"] .radio__body{opacity:.75}

/* Asked for, not yet audible: the speaker pulses instead of showing waves. The
   waves mean sound is coming out — they are drawn from the player's own state,
   never from what was asked for. */
.radio.is-waiting .radio__body{animation:radioWaiting 1.1s ease-in-out infinite}
@keyframes radioWaiting{
  0%,100%{ opacity:.45 }
  50%    { opacity:1   }
}
@media (prefers-reduced-motion:reduce){
  .radio.is-waiting .radio__body{animation:none; opacity:.7}
}

.radio:not([data-level="0"]) .radio__cross{opacity:0}
.radio[data-level="1"] .radio__wave--1,
.radio[data-level="2"] .radio__wave--1,
.radio[data-level="2"] .radio__wave--2,
.radio[data-level="3"] .radio__wave--1,
.radio[data-level="3"] .radio__wave--2,
.radio[data-level="3"] .radio__wave--3{opacity:1}

/* Only the outermost wave that is showing pulses. Pulsing all of them dimmed
   the inner ones too, and then the number of waves — which is the volume —
   could not be read at a glance. */
.radio[data-level="1"] .radio__wave--1,
.radio[data-level="2"] .radio__wave--2,
.radio[data-level="3"] .radio__wave--3{
  animation:radioWave 1.6s ease-in-out infinite;
}
@keyframes radioWave{
  0%,100%{opacity:.45}
  45%    {opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .radio .radio__wave{animation:none}
}

/* The player itself. It has to stay laid out and not be hidden outright for
   playback to continue, so it is parked behind the page at near-zero opacity
   instead of display:none, which would stop the sound. */
.radio__frame{
  position:fixed; bottom:0; left:0;
  width:200px; height:150px;
  opacity:.01; pointer-events:none;
  /* Not a negative z-index: anything that buries this iframe completely gets
     its playback paused. At 1% opacity it is invisible without being hidden. */
  z-index:0;
}

/* bottom right, clear of the ape who fills the bottom middle */
.corner{
  position:fixed; z-index:6;
  left:clamp(1rem,3vw,2.2rem); right:clamp(1rem,3vw,2.2rem);
  bottom:clamp(1rem,2.6vw,1.8rem);
  display:flex; align-items:center; justify-content:space-between;
  pointer-events:none;                 /* the gap between them stays clickable-through */
}
.corner > *{pointer-events:auto}
.social{display:flex; align-items:center; gap:clamp(.7rem,1.6vw,1.15rem)}

.connect{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:.25rem;
  background:none; border:0; padding:0;
  cursor:pointer;
  /* The button is nothing but its artwork, so a missing image collapsed it to
     0x0 and the only way to connect became unclickable. A floor means a broken
     image costs you the picture, never the button. */
  min-width:96px; min-height:44px;
  transition:transform .18s ease, filter .18s ease;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.75)) drop-shadow(0 5px 12px rgba(0,0,0,.6));
}
.connect__art{
  display:block;
  width:clamp(96px, 10.5vw, 158px);
  height:auto;
}
/* the address, once there is one — small, under the artwork */
.connect:hover{transform:translateY(-3px) scale(1.03); filter:drop-shadow(0 8px 14px rgba(23,32,26,.5))}
.connect:active{transform:translateY(0) scale(.99)}
.connect:focus-visible{outline:2px solid var(--pink); outline-offset:4px; border-radius:8px}
.connect.is-busy{cursor:progress}
@media (max-width:520px){
  .connect__art{width:90px}
}
.social__link{
  display:inline-flex;
  color:var(--pink-hot);
  text-decoration:none;
  transition:transform .18s ease, filter .18s ease;
  /* a dark halo so the pink stays readable over the busy background */
  filter:drop-shadow(0 0 5px rgba(0,0,0,.9)) drop-shadow(0 2px 6px rgba(0,0,0,.65));
}
.social__link svg{width:clamp(22px,2.4vw,28px); height:auto; fill:currentColor; display:block}
.social__link svg.is-stroke{fill:none; stroke:currentColor}
/* the BAYC mark is a flat PNG silhouette, so it is used as a mask — that way it
   takes currentColor like the drawn icons instead of staying black */
.social__mask{
  display:block;
  width:clamp(22px,2.4vw,28px); aspect-ratio:1;
  background:currentColor;
  -webkit-mask:url("../img/bayc.webp?v=1e61f798") center/contain no-repeat;
  mask:url("../img/bayc.webp?v=1e61f798") center/contain no-repeat;
}
.social__mask--os{
  -webkit-mask-image:url("../img/opensea.webp?v=76a0069a");
  mask-image:url("../img/opensea.webp?v=76a0069a");
}
a.social__link:hover{transform:translateY(-3px) scale(1.08);
  filter:drop-shadow(0 0 6px rgba(0,0,0,.9)) drop-shadow(0 5px 10px rgba(0,0,0,.7))}
a.social__link:focus-visible{outline:2px solid var(--pink); outline-offset:4px; border-radius:4px}

/* ---------- stage ---------- */
.stage{
  position:relative;
  height:100dvh;
  width:100%;
  overflow:hidden;
}

/* ---------- the ape ---------- */
.ape{
  position:absolute;
  left:50%;
  /* sunk below the fold by more than the sway + parallax can ever lift him,
     so the bottom edge stays planted instead of floating */
  bottom:calc(-1 * var(--ape-anchor));
  z-index:2;
  transform:translateX(-50%) translate3d(calc(var(--px,0px) * .35), calc(var(--py,0px) * .15), 0);
  transition:transform .9s cubic-bezier(.22,.8,.3,1);
  pointer-events:none;
}
.ape__frames{
  position:relative;
  height:min(clamp(240px, 58vh, 700px), 56vw);
  aspect-ratio:823 / 1000;
  transform-origin:50% 100%;
  animation:sway 16s ease-in-out infinite;
  filter:drop-shadow(0 18px 26px rgba(23,32,26,.35));
}
/* Six compass poses stacked on top of each other. All six are registered on
   the shoulders, so switching turns the head without the body shifting.

   Two things sell it as a turn rather than a dissolve: the JS steps through the
   in-between pose on a wide swing, and .ape__look leans the whole figure a few
   pixels the way he is looking. */
.ape__look{
  display:block;
  transform-origin:50% 100%;
  transform:translate3d(var(--lookx,0px), var(--looky,0px), 0) rotate(var(--lookr,0deg));
  transition:transform .42s cubic-bezier(.22,.9,.3,1);
}
.frame{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0;   /* swapped outright, never cross-faded — see paint() in main.js */
}
.frame.is-on{opacity:1}
/* barely there on purpose: just enough that he doesn't look frozen */
@keyframes sway{
  0%,100%{ transform:translateY(0)     rotate(-.25deg) }
  25%    { transform:translateY(-2px)  rotate(.1deg)   }
  50%    { transform:translateY(-1px)  rotate(.3deg)   }
  75%    { transform:translateY(-3px)  rotate(-.05deg) }
}

/* Parked above the window from the first paint. Leaving this to the script
   meant one frame where they were drawn in place and then shot upwards. Scoped
   to .js so that without scripting they are simply where the CSS puts them. */
.js .balloon{--drop-y:-130vh}

/* ---------- idea balloons ---------- */
.balloons{position:absolute; inset:0; z-index:3}
.balloon[hidden]{display:none!important}

.balloon{
  position:absolute;
  left:var(--x); top:var(--y);
  /* --nudge-* is set by keepClear() in main.js: it pushes a balloon out of the
     ape's head or the logo when the resting position would land on one */
  /* --drop-y is the intro: the balloons start above the window and fall in. It
     is a separate term so it composes with the parallax and the solver nudge
     instead of fighting them. */
  transform:translate(-50%,-50%)
            translate3d(var(--nudge-x,0px),
                        calc(var(--nudge-y,0px) + var(--drop-y,0px)), 0);
  transition:transform .9s cubic-bezier(.22,.8,.3,1);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  /* --layer rises with how low the balloon sits, so the dots of a higher
     balloon always pass behind the one below it */
  z-index:var(--layer,1);
}

.float{
  display:block;
  animation:var(--drift, driftA) var(--dur,20s) ease-in-out var(--delay,0s) infinite;
}

/* a second, slower pulse on its own clock — the two rhythms never line up,
   so the drifting reads as random rather than looped */
.breathe{
  display:block;
  position:relative;
  animation:breathe var(--bdur,7s) ease-in-out var(--bdelay,0s) infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(.955) }
  50%    { transform:scale(1.048) }
}
/* Four wandering paths, long and slow, so the balloons drift across each other
   instead of sitting in a tidy grid. Amplitudes are a fraction of --bubble so
   they scale with the balloon. How far they may travel is limited by how much
   of each balloon has to stay uncovered to remain clickable — see the README. */
@keyframes driftA{
  0%,100%{ transform:translate(0,0) rotate(-2deg) }
  25%    { transform:translate(calc(var(--bubble)*var(--ds,1)*  .26), calc(var(--bubble)*var(--ds,1)* -.22)) rotate(2.5deg) }
  50%    { transform:translate(calc(var(--bubble)*var(--ds,1)*  .12), calc(var(--bubble)*var(--ds,1)*  .25)) rotate(-1deg) }
  75%    { transform:translate(calc(var(--bubble)*var(--ds,1)* -.24), calc(var(--bubble)*var(--ds,1)*  .07)) rotate(1.5deg) }
}
@keyframes driftB{
  0%,100%{ transform:translate(0,0) rotate(1.5deg) }
  30%    { transform:translate(calc(var(--bubble)*var(--ds,1)* -.22), calc(var(--bubble)*var(--ds,1)* -.21)) rotate(-2deg) }
  55%    { transform:translate(calc(var(--bubble)*var(--ds,1)*  .21), calc(var(--bubble)*var(--ds,1)* -.05)) rotate(2deg) }
  80%    { transform:translate(calc(var(--bubble)*var(--ds,1)*  .05), calc(var(--bubble)*var(--ds,1)*  .24)) rotate(-1.5deg) }
}
@keyframes driftC{
  0%,100%{ transform:translate(0,0) rotate(2deg) }
  28%    { transform:translate(calc(var(--bubble)*var(--ds,1)*  .20), calc(var(--bubble)*var(--ds,1)*  .17)) rotate(-1.5deg) }
  60%    { transform:translate(calc(var(--bubble)*var(--ds,1)* -.25), calc(var(--bubble)*var(--ds,1)*  .11)) rotate(2.5deg) }
  82%    { transform:translate(calc(var(--bubble)*var(--ds,1)* -.08), calc(var(--bubble)*var(--ds,1)* -.22)) rotate(-1deg) }
}
@keyframes driftD{
  0%,100%{ transform:translate(0,0) rotate(-1.5deg) }
  22%    { transform:translate(calc(var(--bubble)*var(--ds,1)* -.18), calc(var(--bubble)*var(--ds,1)*  .21)) rotate(2deg) }
  48%    { transform:translate(calc(var(--bubble)*var(--ds,1)*  .24), calc(var(--bubble)*var(--ds,1)*  .12)) rotate(-2.5deg) }
  74%    { transform:translate(calc(var(--bubble)*var(--ds,1)*  .07), calc(var(--bubble)*var(--ds,1)* -.24)) rotate(1deg) }
}
.drift-A .float{--drift:driftA}
.drift-B .float{--drift:driftB}
.drift-C .float{--drift:driftC}
.drift-D .float{--drift:driftD}

.bubble{
  position:relative;
  display:block;
  width:var(--bubble); height:var(--bubble);
  border-radius:50%;
  overflow:hidden;                 /* clips the artwork and the label band to the circle */
  background:var(--cream);
  /* the drawn ring below takes the place of a border */
  box-shadow:0 10px 18px -6px rgba(23,32,26,.45);
  /* --mag is set by the dock magnifier in main.js */
  transform:scale(var(--mag,1));
  transition:transform .18s cubic-bezier(.3,1.3,.5,1), box-shadow .22s ease;
}

/* the artwork fills the whole balloon — these are scenes, not portraits, so
   they need the room */
.bubble__art{position:absolute; inset:0; display:block}

/* The ring's hole is 78.3% of its own square, so it is drawn at 127.7% of the
   balloon for that hole to sit exactly on the artwork's edge. */
.balloon .ring{
  position:absolute; top:50%; left:50%;
  width:127.7%; height:127.7%;
  transform:translate(-50%,-50%) scale(var(--mag,1));
  transition:transform .18s cubic-bezier(.3,1.3,.5,1);
  pointer-events:none;
  z-index:2;
}
.bubble__art img{width:100%; height:100%; object-fit:cover; display:block}
.bubble__art img[hidden]{display:none}
/* The home Credits balloon: the coin artwork, dimmed, under the live balance —
   the same treatment as the CREDITS bubble inside the menu it opens. */
:is(.balloon,.bubble-transition__shell)[data-credits] .bubble__art img{opacity:.5}
:is(.balloon,.bubble-transition__shell)[data-credits] .credits-balloon__value{position:absolute;inset:0;display:grid;place-items:center;padding:8%;font:700 clamp(13px,calc(var(--bubble,110px)*.2),24px)/1.1 "Space Grotesk",sans-serif;color:#f4f5df;text-shadow:0 2px 4px #10291e,0 0 8px #10291e;text-align:center;overflow-wrap:anywhere;pointer-events:none}
/* each slide lands slightly oversized and settles back, so it reads as
   jumping into the balloon instead of being swapped underneath */
.bubble__art img.pop{animation:slidePop .42s cubic-bezier(.25,1.35,.45,1)}
@keyframes slidePop{
  from{ transform:scale(1.16) }
  to  { transform:scale(1)    }
}
@media (prefers-reduced-motion:reduce){
  .bubble__art img.pop{animation:none}
}

/* The label lies ON the circle rather than inside it: it is a sibling of
   .bubble, because .bubble clips to a circle and a long word like
   "Highscores" was having its ends cut off. Out here it may run wider than
   the balloon, so every name stays whole. It scales with --mag exactly like
   the ring does, so it grows with the balloon under the pointer. */
.bubble__label{
  position:absolute; top:50%; left:50%;
  /* wide enough that the longest name never reaches its edge — the box is
     pointer-events:none, so its width costs nothing */
  width:340%; height:100%;
  transform:translate(-50%,-50%) scale(var(--mag,1));
  transition:transform .18s cubic-bezier(.3,1.3,.5,1);
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:11%;
  pointer-events:none;
  z-index:3;                       /* over the ring, which is 2 */
  font-family:"Archivo Black", ui-sans-serif, system-ui, sans-serif;
  /* A share of the balloon, not of the viewport. --bubble is itself clamped, so
     a vw-based label tracked it only in the middle of the range and came out
     too small at the ends — it was 10% of a full-size balloon and hard to
     read. */
  font-size:calc(var(--bubble) * .145);
  line-height:1.15;
  text-align:center;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--cream);
  white-space:nowrap;          /* every name on one line */
  /* no band to sit on any more, so the shadow does the separating: a tight
     dark halo for contrast against the artwork, plus a soft drop below */
  text-shadow:
    0 0 3px rgba(16,23,19,.95), 0 0 3px rgba(16,23,19,.95),
    0 0 7px rgba(16,23,19,.8),
    0 2px 5px rgba(16,23,19,.85);
}

/* hover / focus */
.balloon:hover .bubble,
.balloon:focus-visible .bubble{
  box-shadow:0 14px 0 -2px rgba(23,32,26,.32), 0 0 0 6px rgba(211,58,99,.35);
}
.balloon:focus-visible{outline:none}
/* whatever you are pointing at goes in front of the rest */
.balloon:hover, .balloon:focus-visible{z-index:40}
.balloon:active .bubble{transform:scale(calc(var(--mag,1) * .95))}

/* ---------- small screens ----------
   The stacked three-row arc above his head only works on a PORTRAIT screen.
   On a short landscape window there isn't enough vertical room between the
   rows, so those keep the wide side-arc and just scale down.               */
/* A portrait screen has no width to spare beside a logo this size, so it drops
   further down and the ideas get to drift above it as well as around it. */
@media (max-aspect-ratio:1/1){
  /* the logo used to sit low so balloons could pass beside it; now that they
     hang in a bow around his head it belongs back near the top */
  .wordmark img{width:min(74vw, 360px)}
}

@media (max-width:820px) and (max-aspect-ratio:1/1){
  :root{--bubble-base:clamp(64px, min(23vw, calc(14vh - 16px)), 150px); --line:2.5px;
        --ds:.62}  /* portrait: the balloons sit closer together */
  .ape__frames{height:min(clamp(260px,42vh,400px), 78vw)}
  /* the ape fills most of a narrow screen, so the arc moves above his head */
  .balloon{left:var(--xm, var(--x)); top:var(--ym, var(--y))}
  /* On the packed layout a name has to stay inside its own circle. On the wide
     arc there is empty background either side, so a long name may run past the
     edge; here the balloons sit shoulder to shoulder and a 131%-wide label
     simply slid under the neighbour — "TRADE SIGNALS" read as "TRADE SIGN".
     So it wraps instead. */
  .bubble__label{
    width:116%;
    white-space:normal;
    text-wrap:balance;
    /* HIGHSCORES and COPYTRADING are single words wider than their own circle,
       so wrapping alone cannot help them — they stuck out far enough to slide
       under the neighbouring balloon, which has a higher --layer and paints
       over them ("LEADERBOAR"). `hyphens:auto` does not fix it: browsers do not
       hyphenate text-transform:uppercase reliably, and it changed nothing here.
       The break opportunity is an explicit <wbr> in index.html instead, which
       nowrap ignores on the wide arc. */
    overflow-wrap:break-word;
    padding-bottom:7%;
  }
}
/* A phone cannot hold a big logo, a big ape AND four big balloons — the three
   of them want more height than the screen has. So here the logo and the ape
   both give a little, and the balloons take the band between them in three
   rows of two. Sized so four actually fit; the solver in main.js then only has
   to nudge, not perform miracles. */
@media (max-width:520px) and (max-aspect-ratio:1/1){
  :root{--bubble-base:clamp(60px, min(24vw, calc(13vh - 12px)), 132px);
        --ds:.42}
  .wordmark img{width:min(50vw, 200px)}
  .topbar__actions{right:12px;gap:4px}
  .topbar__admin,.radio{width:30px}
  .ape__frames{height:min(clamp(220px,33vh,320px), 70vw)}
}

.wallet__addr{
  font-family:"Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(.72rem,2.2vw,.9rem);
  word-break:break-all;
  margin:.2rem 0 1.2rem;
  color:rgba(23,32,26,.75);
}
.wallet__disconnect{
  font-family:"Archivo Black", ui-sans-serif, system-ui, sans-serif;
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--cream); background:var(--pink-hot);
  border:0; padding:.75rem 1.4rem; border-radius:999px;
  cursor:pointer;
  transition:transform .18s ease, background .18s ease;
}
.wallet__disconnect:hover{transform:translateY(-2px); background:#d3007a}
.wallet__disconnect:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

/* what a project is, tucked in the top right corner — green, so it reads as a
   different kind of thing from the pink "coming soon" */
.card__kind{
  position:absolute; top:0; right:0;
  font-family:"Archivo Black", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(.52rem,1.1cqw,.68rem);
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink);
  background:var(--slime-hot);
  padding:.35rem .7rem;
  border-radius:999px;
  white-space:nowrap;
}

/* Credit awards use the site's slime frame, with a bright paper card inside. */
.credit-received{
  position:relative; isolation:isolate; overflow:hidden;
  width:min(100%, 640px); min-height:100%; margin:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:space-evenly; gap:.35rem;
  padding:clamp(1rem,4cqw,2.4rem);
  color:var(--ink); background:transparent;
}
.credit-received::before,.credit-received::after{
  position:absolute; z-index:-1; content:""; width:clamp(70px,18cqw,150px); aspect-ratio:1;
  border-radius:50%; background:radial-gradient(circle,rgba(255,40,154,.15),transparent 70%);
  animation:creditGlow 2.8s ease-in-out infinite alternate;
}
.credit-received::before{left:-5%;top:8%}.credit-received::after{right:-4%;bottom:4%;animation-delay:-1.4s}
.credit-received__eyebrow,.credit-received__credits,.credit-received__thanks{margin:0;text-align:center;font-family:"Archivo Black",ui-sans-serif,system-ui,sans-serif}
.credit-received__eyebrow{font-size:clamp(1.2rem,5.5cqw,2.6rem);letter-spacing:.06em}
.credit-received__amount{
  margin:-.04em 0 -.12em; color:#f51a94;
  font-family:"Luckiest Guy","Archivo Black",ui-sans-serif,sans-serif;
  font-size:clamp(3.4rem,16cqw,7.5rem); line-height:1.08; letter-spacing:.025em;
  -webkit-text-stroke:1px #a60059;
  text-shadow:0 3px 0 #a60059,0 6px 0 rgba(23,32,26,.17),0 0 22px rgba(255,43,163,.44);
  animation:creditPop 1.35s ease-in-out infinite;
}
.credit-received__credits{font-size:clamp(1.1rem,4.8cqw,2.2rem);letter-spacing:.14em}
.credit-received__thanks{margin-top:.25rem;font-size:clamp(1rem,4.2cqw,1.8rem);line-height:1.35;letter-spacing:.08em}
.credit-received__message{max-width:82%;margin:.3rem 0 0;padding:.55rem .85rem;border:1px solid rgba(121,190,37,.7);border-radius:14px;background:rgba(255,255,240,.82);color:var(--ink);font:600 clamp(.9rem,3.2cqw,1.15rem)/1.4 "Space Grotesk",sans-serif;text-align:center;overflow-wrap:anywhere;box-shadow:0 3px 0 rgba(56,91,38,.18)}
.credit-received__logo{display:block;width:clamp(150px,48cqw,310px);height:auto;max-height:29%;object-fit:contain;margin-top:.35rem;filter:drop-shadow(0 3px 0 rgba(23,32,26,.16))}
.credit-received__spark,.credit-received__coin{position:absolute;pointer-events:none;animation:creditFloat 2.5s ease-in-out infinite}
.credit-received__spark{color:#f51a94;font-size:clamp(1.3rem,5cqw,2.5rem);text-shadow:0 0 12px rgba(245,26,148,.6)}
.credit-received__spark--a{left:10%;top:13%}.credit-received__spark--b{right:11%;top:27%;animation-delay:-1.2s}
.credit-received__coin{display:grid;place-items:center;width:clamp(28px,7cqw,44px);aspect-ratio:1;border-radius:50%;background:linear-gradient(135deg,#fff786,#e8aa16);border:2px solid #a66a00;color:#9d6200;font:700 clamp(.8rem,3cqw,1.2rem) "Space Grotesk",sans-serif;box-shadow:0 3px 0 #a66a00,0 0 12px rgba(255,218,57,.5)}
.credit-received__coin--a{right:10%;top:10%}.credit-received__coin--b{left:12%;bottom:13%;animation-delay:-.8s}
@keyframes creditPop{0%,100%{transform:scale(.97) rotate(-1deg)}50%{transform:scale(1.04) rotate(1deg)}}
@keyframes creditFloat{0%,100%{transform:translateY(0) rotate(-7deg)}50%{transform:translateY(-10px) rotate(8deg)}}
@keyframes creditGlow{from{opacity:.4;transform:scale(.8)}to{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){.credit-received::before,.credit-received::after,.credit-received__amount,.credit-received__spark,.credit-received__coin{animation:none}}

/* ---------- project pages ---------- */
.page{
  position:relative; z-index:2;
  min-height:100dvh;
  display:grid; place-items:center;
  padding:clamp(5rem,12vh,8rem) 1.5rem 3rem;
}
body.subpage{overflow:auto}

.card{
  position:relative;
  width:min(560px,100%);
  text-align:center;
  background:var(--cream);
  border:var(--line) solid var(--ink);
  border-radius:32px;
  padding:clamp(1.8rem,5vw,3rem);
  box-shadow:0 14px 0 -2px rgba(23,32,26,.28);
}
.card__art{
  position:relative;
  width:clamp(110px,26vw,160px); aspect-ratio:1; margin:0 auto 1.4rem;
  overflow:visible;                 /* the ring's drips hang past the circle */
  background:none; border:0;
}
.card__art img{
  width:100%; height:100%; object-fit:cover; display:block;
  border-radius:50%;
  background:var(--cream-dim);
}
/* same ring as the balloons, at the same 127.7% so its hole lands on the edge */
.card__art::after{
  content:"";
  position:absolute; top:50%; left:50%;
  width:127.7%; height:127.7%;
  transform:translate(-50%,-50%);
  background:url("../img/ring.webp?v=7e61ab46") center / contain no-repeat;
  pointer-events:none;
}
.card h1{
  font-family:"Archivo Black", ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(1.6rem,5vw,2.5rem);
  margin:0 0 .5rem; letter-spacing:.01em;
}
.badge{
  display:inline-block;
  font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  background:var(--pink-hot); color:var(--cream);
  padding:.4rem .8rem; border-radius:999px; margin-bottom:1.4rem;
}
.card p{margin:0 auto 1.8rem; max-width:42ch; line-height:1.6; color:rgba(23,32,26,.78)}
.back{
  display:inline-block;
  font-family:"Archivo Black", ui-sans-serif, system-ui, sans-serif;
  font-size:.82rem; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; color:var(--cream);
  background:var(--ink);
  padding:.85rem 1.6rem; border-radius:999px;
  transition:transform .18s ease, background .18s ease;
}
.back:hover{transform:translateY(-2px); background:#22302a}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  .ape__frames, .float, .breathe, .wordmark img{animation:none}
  .ape__look{transition:none}
  .ape, .balloon{transition:none}
  .bubble{transition:box-shadow .2s ease}
}

/* The machine replaces the ape in the original scene, without a project card. */
.slot-scene{position:absolute;inset:clamp(120px,22vh,210px) 0 0;z-index:4;display:flex;justify-content:center;align-items:stretch}
.slot-scene[hidden]{display:none}
.slot-scene:not(.is-shown){visibility:hidden;pointer-events:none}
/* visibility:hidden keeps animations running; pause them until the scene opens */
.slot-scene:not(.is-shown)::before,.slot-scene:not(.is-shown)::after,.slot-scene:not(.is-shown) *{animation-play-state:paused!important}
.slot-scene::before{content:"";position:absolute;inset:-12% 0 0;width:min(1050px,100vw);margin:auto;pointer-events:none;background:radial-gradient(ellipse 20% 38% at 19% 51%,#c7ff57a0,transparent 88%),radial-gradient(ellipse 20% 38% at 81% 51%,#c7ff57a0,transparent 88%),radial-gradient(ellipse 46% 55% at 50% 60%,#c0ff5c68,transparent 77%),radial-gradient(ellipse 38% 29% at 51% 86%,#ff39a157,transparent 82%);filter:blur(32px);animation:slot-glow 4.5s ease-in-out infinite alternate}
.slot-scene::after{content:"";position:absolute;inset:0;width:min(1060px,100vw);margin:auto;pointer-events:none;background:radial-gradient(circle at 16% 20%,#dfff9499 0 2px,transparent 5px),radial-gradient(circle at 84% 37%,#bfff7baa 0 3px,transparent 7px),radial-gradient(circle at 10% 72%,#f76ab399 0 2px,transparent 6px),radial-gradient(circle at 90% 80%,#c8ff8c88 0 3px,transparent 7px);animation:slot-sparks 6s ease-in-out infinite alternate}
.slot-scene iframe{position:relative;z-index:1;display:block;width:min(1120px,100vw);height:100%;border:0;background:transparent;color-scheme:normal}
/* Opacity and scale only. Animating the blur radius repainted a ~1000px blurred
   layer on every frame; a fixed blur that scales reads the same and stays on the
   compositor. The mobile variant already worked this way. */
@keyframes slot-glow{to{opacity:.62;transform:scale(1.08)}}
@keyframes slot-sparks{to{opacity:.3;transform:translateY(-24px)}}
.has-slot .ape,.has-slot .balloons{visibility:hidden;pointer-events:none}
/* Project balloons are preview-only for the signed-in allowlisted wallet. */
:root:not(.balloons-enabled) .balloons{visibility:hidden;pointer-events:none}
.slot-back{position:fixed;z-index:2;top:clamp(.9rem,3.2vh,44px);left:clamp(1rem,3.5vw,2.6rem);width:clamp(34px,3.6vw,42px);height:clamp(34px,3.6vw,42px);display:grid;place-items:center;padding:4px;border:0;background:transparent;color:var(--pink-hot);cursor:pointer;filter:drop-shadow(0 0 5px #000e) drop-shadow(0 2px 6px #000a)}
.slot-back svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.slot-back:hover{transform:translateX(-3px)}
.slot-back:focus-visible{outline:2px solid var(--pink-hot);outline-offset:4px}
@media(max-width:760px){.slot-scene{inset:clamp(110px,17vh,155px) 0 0}.slot-scene iframe{width:100%}}
@media(max-height:500px) and (min-width:761px){.slot-scene{top:80px;bottom:0}}
@media(prefers-reduced-motion:reduce){.slot-scene::before,.slot-scene::after{animation:none}}

.credit-table-wrap{width:100%;max-width:100%;overflow:auto;margin:clamp(8px,2cqh,20px) 0}.credit-table{width:100%;border-collapse:collapse;font-size:14px;text-align:left}.credit-table th{color:#c3ff57;padding:clamp(6px,1.4cqw,12px) 8px;border-bottom:2px solid #f73595}.credit-table td{padding:clamp(7px,1.5cqw,14px) 8px;border-bottom:1px solid #b4d68033}.credit-table td:last-child,.credit-table th:last-child{text-align:right;font-variant-numeric:tabular-nums;color:#c3ff57}.credit-table small{display:block;font-size:10px;color:#b5c3aa;overflow-wrap:anywhere}.credit-table span{font-weight:700}[data-credit-board] button{background:#ec3290;color:#180d16;border:2px solid #ff8dc7;border-radius:8px;padding:9px 15px;margin:6px 10px 6px 0;cursor:pointer}[data-credit-status]{color:#cad6be;font-size:13px}
.credit-table__own td{background:#ffe6f3;border-block:1px solid #f51a94;color:#271520!important;font-weight:700}.credit-table__own td:first-child{box-shadow:inset 4px 0 #f51a94}.credit-table__own td:last-child{color:#a60059!important}
.credit-table__you{display:inline-block;margin-left:.5rem;padding:.12rem .4rem;border-radius:999px;background:#f51a94;color:white;font:700 .62rem "Archivo Black",sans-serif;letter-spacing:.06em;vertical-align:middle}

.credit-page{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}.card:has([data-credit-board]){background:linear-gradient(135deg,#21372a,#0b1912);color:#e0ecd5;border:2px solid #e73592;border-radius:24px;box-shadow:0 0 24px #9dd53d30}.card:has([data-credit-board]){width:min(760px,100%);max-width:760px}.card:has([data-credit-board]) h1{color:#ff63b0}.card:has([data-credit-board]) p{color:#d1dfc5}

.slot-loading{position:absolute;top:50%;left:50%;right:auto;width:min(520px,90%);transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:#d6ff7d;font-size:1.1rem;z-index:8;text-shadow:0 2px 5px #000;pointer-events:none}
.slot-service-status{position:fixed;z-index:100;top:50%;left:50%;transform:translate(-50%,-50%);width:min(560px,calc(100% - 28px));padding:12px 18px;border:2px solid #f73595;border-radius:14px;background:linear-gradient(135deg,#172b20f5,#09140ff5);box-shadow:0 5px 24px #0009,0 0 18px #f7359540;color:#ffe5f2;text-align:center;font-weight:700;font-size:clamp(13px,2.5vw,17px);line-height:1.4;pointer-events:none;animation:service-status-in .25s ease-out}
.slot-service-status[hidden]{display:none}
.slot-service-status:is([data-state="waiting"],[data-state="unavailable"])::before{content:"";display:inline-block;width:.9em;height:.9em;margin:0 .65em -.08em 0;border:2px solid #ffffff50;border-top-color:#ff55a8;border-right-color:#baff4f;border-radius:50%;animation:service-status-spin .8s linear infinite}
.slot-service-status[data-state="recovered"]{border-color:#c3ff57;color:#e8ffc2;box-shadow:0 5px 24px #0009,0 0 18px #c3ff5740}
@keyframes service-status-in{from{opacity:0;translate:0 -5px}to{opacity:1;translate:0 0}}
@keyframes service-status-spin{to{transform:rotate(360deg)}}
.slot-loading[hidden]{display:none}
.slot-loading__fill{width:38%;transition:none;animation:slot-loading-sweep 1.8s ease-in-out infinite}
@keyframes slot-loading-sweep{from{transform:translateX(-105%)}to{transform:translateX(270%)}}
@media(prefers-reduced-motion:reduce){.slot-loading__fill,.slot-service-status:is([data-state="waiting"],[data-state="unavailable"])::before{animation:none}.slot-loading__fill{transform:translateX(80%)}}

/* Wallet-authenticated credit management. */
.admin-card { max-width: 960px; margin-inline: auto; }
.admin-card section { border-top: 1px solid #728858; margin-top: 2rem; padding-top: 1rem; }
.admin-form { display: grid; gap: 1rem; margin-block: 1rem; }
.admin-form label { display: grid; gap: .35rem; font-weight: 700; }
.admin-form input,.admin-form select,.admin-form textarea { box-sizing: border-box; width: 100%; padding: .7rem; border: 2px solid #405d32; border-radius: .5rem; background: #fffef1; color: #172019; font: inherit; }
.admin-form textarea { min-height: 5rem; resize: vertical; }
.admin-card button { cursor: pointer; padding: .7rem 1rem; border: 2px solid #172019; border-radius: .5rem; background: #ed3294; color: #172019; font-weight: 700; }
.admin-card button:disabled { opacity: .55; cursor: wait; }
.admin-log { list-style: none; padding: 0; }
.admin-log li { margin-block: 1rem; padding: 1rem; border: 1px solid #728858; border-radius: .5rem; overflow-wrap: anywhere; }
.admin-card [hidden] { display: none !important; }
[data-admin-link] { color: #e7ff75; font-weight: 700; text-decoration: underline; }
.admin-card a { color: #e7ff75; }
.admin-card a { color: #234729; }
#admin-status { overflow-wrap: anywhere; }
.admin-tabs{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;padding:.4rem 0 .65rem;background:#fffef1}
.admin-tabs button{padding:.55rem .7rem;font-size:.78rem}
.admin-tabs button[aria-selected="true"]{background:#182a20;color:#eaffb0;border-color:#8bd329}
.admin-pane{border-top:1px solid #c2c6ad!important;margin:.25rem 0 0!important;padding:.7rem 0 .2rem!important;scroll-margin-top:.75rem}
.admin-pane[hidden]{display:none!important}
.admin-pane>p{margin:.2rem 0 .6rem;font-size:.78rem;line-height:1.35;color:#344137}
.admin-form--compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem;margin:.25rem 0 .65rem;padding:.75rem;border:1px solid #d4d7c4;border-radius:12px;background:#fffff8}
.admin-form--compact h2,.admin-form__wide,.admin-form--compact>button,.admin-form--compact>.admin-note,.admin-pricing>.admin-toggle{grid-column:1/-1}
.admin-sale-limits{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.admin-sale-limits label{min-width:0;gap:.2rem;font-size:.7rem}
.admin-sale-limits input{min-width:0;padding:.48rem .55rem;font-size:.8rem}
.admin-form--compact h2{margin:0;color:#ef3294;font-size:1rem}
.admin-form--compact label{min-width:0;gap:.2rem;font-size:.7rem}
.admin-form--compact input,.admin-form--compact select{min-width:0;padding:.48rem .55rem;font-size:.8rem}
.admin-form--compact>button{justify-self:start;padding:.48rem .8rem;font-size:.75rem}
.admin-note{font-size:.69rem!important;color:#687265!important}
.admin-price-fields{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;grid-column:1/-1}
.admin-toggle{display:flex!important;align-items:center;gap:.5rem!important;font-size:.78rem!important}
.admin-toggle input{width:1.15rem;height:1.15rem;padding:0;border:0;background:none;accent-color:#e92d91}
.admin-history{margin:.5rem 0;font-size:.8rem}
.admin-history summary{cursor:pointer;font-family:"Archivo Black",sans-serif;color:#26392c}
.admin-history>button{padding:.4rem .65rem;margin:.4rem .35rem .4rem 0;font-size:.7rem}
.admin-log{max-height:28vh;overflow:auto;margin:.35rem 0;padding:0;list-style:none}
.admin-log li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:.35rem 0;padding:.5rem .6rem;border:1px solid #d4d7c4;border-radius:8px;background:#fffef8;overflow-wrap:anywhere;font-size:.7rem}
.admin-log code{min-width:0;overflow-wrap:anywhere;font-size:.68rem}
.admin-log button{flex:none;padding:.3rem .55rem;font-size:.68rem}
.admin-custom-select{position:relative;display:grid;align-content:start;gap:.2rem;min-width:0}
.admin-select-label{font-size:.7rem;font-weight:700}
.admin-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:.75rem;width:100%;min-height:38px;padding:.48rem .6rem!important;border:2px solid #405d32!important;border-radius:.5rem!important;background:#fffef1!important;color:#172019!important;font:500 .8rem/1.2 "Space Grotesk",sans-serif!important;text-align:left}
.admin-select-trigger span{font-size:1rem;color:#405d32}
.admin-select-options{position:absolute;z-index:20;top:calc(100% + .25rem);left:0;right:0;padding:.25rem;border:1px solid #405d32;border-radius:.6rem;background:#fffff5;box-shadow:0 8px 20px #17201935}
.admin-select-options[hidden]{display:none}
.admin-select-options button{display:block;width:100%;padding:.5rem .6rem!important;border:0!important;border-radius:.35rem!important;background:transparent!important;color:#172019!important;font-size:.78rem;text-align:left}
.admin-select-options button[aria-selected="true"],.admin-select-options button:hover,.admin-select-options button:focus-visible{background:#dff4bc!important;outline:none}
@media(max-width:520px){.admin-form--compact{grid-template-columns:1fr}.admin-form--compact h2,.admin-form__wide,.admin-form--compact>button,.admin-form--compact>.admin-note,.admin-pricing>.admin-toggle,.admin-price-fields,.admin-sale-limits{grid-column:1}.admin-price-fields,.admin-sale-limits{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-log li{align-items:flex-start}}

/* Player profile and live top-ten cards inside the existing slime frame. */
.profile-card,.leaderboard-card{position:relative;isolation:isolate;overflow:hidden}
.credit-ornament{position:absolute;z-index:-1;pointer-events:none;width:112%;height:auto;max-height:55%;object-fit:contain;left:-6%;opacity:.17}
.profile-ornament{top:0}
.leaderboard-ornament{top:4%;opacity:.11}
.profile-hero{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:1rem;width:100%;margin:.25rem 0 1rem;padding:.9rem;border-radius:20px;background:linear-gradient(135deg,#173627eF,#0c2018eF);color:#eff6dd;box-shadow:0 9px 24px #07120b2b}
.profile-avatar-frame{position:relative;width:clamp(70px,17cqw,112px);aspect-ratio:1;border-radius:50%;background:var(--monkee-background,#cccdcf);box-shadow:0 0 0 3px #121c12,0 0 18px #f7359570;overflow:hidden}
.profile-avatar-frame:empty{visibility:hidden}
.profile-avatar-frame:after{content:"";position:absolute;inset:0;border:4px solid #f73595;border-radius:50%;pointer-events:none}
.profile-avatar-frame img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:520px){.profile-avatar-frame{width:82px}}
.profile-avatar-frame img.base-monkee,.credit-avatar img.base-monkee{mix-blend-mode:normal;transform:scale(1.35);transform-origin:50% 64%}
.profile-avatar-frame span{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#edffb7,#85d51b 65%,#225333);color:#18301d;font:2.2rem "Archivo Black",sans-serif;text-shadow:0 2px #fff7}
.profile-kicker,.leaderboard-kicker{display:block;color:#b8f847;font-size:.57rem;font-weight:700;letter-spacing:.16em}
.profile-identity{min-width:0;display:grid;gap:.18rem}
.profile-identity h1{margin:0!important;color:#ff58ae!important;font-size:clamp(1.25rem,5cqw,2rem)!important}
.profile-identity strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(.95rem,3.2cqw,1.2rem)}
.profile-identity>[data-profile-handle]{color:#b8c9ae;font-size:.78rem}
.profile-x-connect{justify-self:end;display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:.55rem .75rem;border:2px solid #ff83c2;border-radius:10px;background:#ed3294;color:#1c1420!important;font-size:.72rem;font-weight:700;text-align:center;text-decoration:none;box-shadow:0 3px 0 #a31361;white-space:nowrap}
.profile-x-connect[hidden]{display:none}
.profile-stats{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(100px,.7fr);gap:.55rem;width:100%;margin:.15rem 0 0;padding:.35rem}
.profile-holdings{display:grid;grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.profile-stat{display:grid;align-content:center;gap:.4rem;min-width:0;min-height:74px;padding:.75rem .9rem;border:1px solid #d7e5bd;border-radius:14px;background:linear-gradient(145deg,#fffef5,#eff9df);box-shadow:0 4px 13px #142a1715}
.profile-holdings .profile-stat{min-height:62px;padding:.55rem .65rem;gap:.22rem}
.profile-holdings .profile-stat strong{color:#254827;font:700 clamp(1.05rem,4cqw,1.5rem) "Archivo Black",sans-serif;font-variant-numeric:tabular-nums}
.profile-holdings .profile-stat small{min-height:.8em;color:#79867b;font-size:.54rem}
.profile-stat>span{color:#7ea82c;font-size:.62rem;font-weight:700;letter-spacing:.14em}
.profile-stat code{overflow-wrap:anywhere;color:#24362a;font-size:clamp(.64rem,2cqw,.8rem)}
.profile-stat--credits{background:linear-gradient(145deg,#fff3fa,#ffe1f0);border-color:#ffc4df}
.profile-stat--credits strong{color:#c81775;font:clamp(1.6rem,6cqw,2.45rem) "Archivo Black",sans-serif;font-variant-numeric:tabular-nums}
.profile-stats [data-credit-status]{grid-column:1/-1;margin:0;color:#526552;font-size:.72rem;text-align:center}
.profile-stats [data-credit-status][hidden]{display:none}
.leaderboard-heading{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;margin:.1rem 0 .45rem}
.leaderboard-heading>img{width:clamp(40px,9cqw,62px);height:clamp(40px,9cqw,62px);object-fit:contain;filter:drop-shadow(0 3px 3px #1118)}
.leaderboard-heading h1{margin:0!important;color:#ef3294!important;font-size:clamp(1.55rem,6cqw,2.35rem)!important;line-height:1}
.leaderboard-kicker{text-align:center;font-size:.5rem}
.leaderboard-demo-tag{align-self:flex-start;margin-top:.2rem;padding:.2rem .45rem;border:1px solid #f2a5ce;border-radius:999px;background:#ffeff8;color:#bd176e;font-size:.48rem;font-weight:700;letter-spacing:.08em}
.leaderboard-card [data-credit-board]{position:relative;z-index:1;width:100%;min-height:0}
.leaderboard-card .credit-status-live{margin:0;height:0;overflow:hidden}
.leaderboard-card .credit-table-wrap{margin:.35rem 0 .1rem;overflow:visible}
.leaderboard-card .credit-table{border-collapse:separate;border-spacing:0 .3rem;font-size:.76rem}
.leaderboard-card .credit-table th{padding:.38rem .5rem;border:0;background:#173728;color:#c8f260!important;font-size:.55rem;letter-spacing:.13em}
.leaderboard-card .credit-table th:first-child{border-radius:9px 0 0 9px}
.leaderboard-card .credit-table th:last-child{border-radius:0 9px 9px 0}
.leaderboard-card .credit-table td{padding:.48rem .5rem;border:0;border-block:1px solid #deebd0;background:#fffef6;color:#25352b!important}
.leaderboard-card .credit-table td:first-child{width:2.4rem;border-left:1px solid #deebd0;border-radius:10px 0 0 10px}
.leaderboard-card .credit-table td:last-child{border-right:1px solid #deebd0;border-radius:0 10px 10px 0;color:#417012!important;font-weight:700}
.credit-rank{color:#79867b;font-family:"Archivo Black",sans-serif;font-size:.72rem;text-align:center}
.credit-rank--1,.credit-rank--2,.credit-rank--3{color:#9a5a00;background-image:url("../img/ui/slime-medal.webp?v=e7410146");background-repeat:no-repeat;background-position:center;background-size:1.7rem}
.credit-player{display:flex;align-items:center;gap:.52rem;min-width:0}
.credit-player__identity{display:grid;min-width:0;gap:.1rem}
.credit-player__identity strong{max-width:24ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.75rem}
.credit-player__identity small{display:block;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#758276;font-size:.58rem}
.credit-avatar{flex:none;display:grid;place-items:center;width:34px;height:34px;overflow:hidden;border:2px solid #b8e657;border-radius:50%;background:var(--monkee-background,#cccdcf);color:#233422;font:700 .85rem "Archivo Black",sans-serif;box-shadow:0 0 0 2px #fff}
.credit-avatar img{width:100%;height:100%;object-fit:cover}
.credit-table__you{margin-left:.2rem;padding:.16rem .38rem;border-radius:999px;background:#ee3194;color:#fff!important;font:700 .5rem "Archivo Black",sans-serif;letter-spacing:.06em}
.leaderboard-card .credit-table__own td{border-block:2px solid #ed3294;background:#ffeaf4;color:#39162b!important}
.leaderboard-card .credit-table__own td:first-child{border-left:2px solid #ed3294}
.leaderboard-card .credit-table__own td:last-child{border-right:2px solid #ed3294;color:#a70c5d!important}
.leaderboard-card .credit-table__demo td{border-style:dashed;color:#737c70!important;background:#f3f4e9}
.leaderboard-card .credit-table__demo .credit-avatar{opacity:.68}
@media(max-width:520px){.profile-hero{grid-template-columns:auto minmax(0,1fr);gap:.65rem;padding:.7rem}.profile-x-connect{grid-column:1/-1;justify-self:stretch}.profile-stats{grid-template-columns:minmax(0,1fr) minmax(85px,.62fr);gap:.35rem}.profile-stat{padding:.6rem;min-height:68px}.leaderboard-card .credit-table{font-size:.68rem}.leaderboard-card .credit-table th,.leaderboard-card .credit-table td{padding:.4rem .36rem}.credit-avatar{width:29px;height:29px}.credit-player__identity strong{font-size:.68rem}.credit-player__identity small{font-size:.52rem}}

/* Admin controls share the pink slime and acid-green palette. */
.admin-card button{border:2px solid #ff9bc9;border-radius:10px 9px 12px 8px;background:linear-gradient(145deg,#f84a9e,#d92382 58%,#a91d68);color:#fff5ea;box-shadow:0 2px 0 #8b1d58,0 0 0 1px #a5e83a,inset 0 1px #ffffff75;font-weight:700}
.admin-card button:hover:not(:disabled){filter:brightness(1.1);box-shadow:0 2px 0 #8b1d58,0 0 0 2px #baff52,0 0 12px #f7359566,inset 0 1px #ffffff90}
.admin-tabs button[aria-selected="true"]{background:linear-gradient(145deg,#caff64,#7dc72d);color:#142219;border-color:#edffb3;box-shadow:0 2px 0 #487b20,0 0 0 2px #ec3290,inset 0 1px #fff9}
.admin-history summary{list-style:none;width:34px;height:28px;display:grid;place-items:center;border:1px solid #98d842;border-radius:9px;background:linear-gradient(145deg,#f84a9e,#c92079);color:#fff5ea;box-shadow:0 2px 0 #8b1d58,0 0 0 1px #a5e83a;cursor:pointer}
.admin-history summary::-webkit-details-marker{display:none}
.admin-history summary:before{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.admin-history[open] summary:before{transform:translateY(2px) rotate(225deg)}
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus{outline:0!important;outline-offset:0!important}
:where(a,button,input,select,textarea,summary,[role="button"],[tabindex]):focus-visible{filter:drop-shadow(0 0 7px #baff52)!important}
.wordmark:focus,.wordmark:focus-visible{outline:0!important;box-shadow:none!important;filter:none!important}
/* The home artwork is fully hidden while the slot is open; pause its clocks. */
.has-slot .ape__frames,.has-slot .float,.has-slot .breathe{animation-play-state:paused}
@media(max-width:760px){
  .has-slot .slot-scene::before{filter:blur(24px);animation:slot-glow-mobile 5s ease-in-out infinite alternate}
}
@keyframes slot-glow-mobile{to{opacity:.62;transform:scale(1.04)}}

/* Profile and leaderboard share the site's page navigation with Gamble. */
.account-scene{position:absolute;inset:clamp(120px,22vh,210px) 0 0;z-index:4;overflow:auto;padding:12px 24px 100px}
.account-scene[hidden]{display:none}
#account-content{width:min(760px,100%);margin:0 auto;outline:none}
#account-content:focus,#account-content:focus-visible{filter:none!important;box-shadow:none!important}
#account-content>.card{margin:0;width:100%;box-sizing:border-box}
.has-account-page .ape,.has-account-page .balloons{visibility:hidden;pointer-events:none}
@media(max-width:760px){.account-scene{top:clamp(110px,17vh,155px);padding:12px 12px 100px}}

/* The leaderboard content sits directly on the site's background. */
.card.leaderboard-card:has([data-credit-board]){background:transparent;border:0;border-radius:0;box-shadow:none}
.leaderboard-card>.credit-ornament{display:none}

/* Illustrated leaderboard: independent art, live text and animated liquid. */
.has-leaderboard-page,.leaderboard-page{--leaderboard-logo-width:clamp(230px,27vw,440px);--leaderboard-header:calc(var(--leaderboard-logo-width)*.47 + clamp(.8rem,3.5vh,56px) + 16px)}
@media(max-aspect-ratio:1/1){.has-leaderboard-page,.leaderboard-page{--leaderboard-logo-width:min(74vw,360px)}}
@media(max-width:520px) and (max-aspect-ratio:1/1){.has-leaderboard-page,.leaderboard-page{--leaderboard-logo-width:min(50vw,200px)}}
.has-leaderboard-page .account-scene{inset:8px 0 0;padding:0 12px;display:flex;align-items:flex-end}
.has-leaderboard-page #account-content{width:min(960px,calc((100dvh - var(--leaderboard-header))*.8),100%)}
.card.leaderboard-machine:has([data-credit-board]),#account-content>.leaderboard-machine{position:relative;isolation:isolate;container-type:inline-size;aspect-ratio:4/5;width:100%;max-width:960px;margin:0 auto;padding:0;border:0;border-radius:0;background:none;box-shadow:none;filter:none;overflow:visible}
.leaderboard-page{padding:8px 12px 0;background:transparent;align-items:flex-end}
.leaderboard-page .leaderboard-machine{width:min(960px,calc((100dvh - var(--leaderboard-header))*.8),100%)}
.leaderboard-machine>.back{position:fixed;left:16px;top:16px;z-index:10}
.leaderboard-machine__art{display:block;width:100%;height:100%;pointer-events:none;user-select:none}
.leaderboard-machine__logo{position:absolute;z-index:3;left:25%;top:7%;width:50%;height:12.5%;object-fit:contain;filter:drop-shadow(0 4px 3px #001b09);animation:leaderboard-float 5s ease-in-out infinite;cursor:pointer}
.leaderboard-machine__logo img{display:block;width:100%;height:100%;object-fit:contain}
.card.leaderboard-machine h1.leaderboard-machine__title{position:absolute;z-index:2;inset:20.5% 26% auto;margin:0;height:4.5%;box-sizing:border-box;padding-top:.9cqw;display:flex;align-items:center;justify-content:center;text-align:center;color:#d3ff3d;font:400 3cqw/1 "Luckiest Guy",cursive;letter-spacing:.02em;text-shadow:0 2px 1px #000,0 0 10px #79c60055}
.leaderboard-machine [data-credit-board]{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.leaderboard-machine__top{position:absolute;left:26%;right:27%;top:29%;bottom:22%;display:flex;flex-direction:column}
.leaderboard-machine__columns,.leaderboard-machine__row{display:grid;grid-template-columns:13% minmax(0,1fr) 25%;align-items:center;gap:2%;min-width:0}
.leaderboard-machine__columns{height:7%;flex:none;padding:0 3%;color:#dbff4d;font:700 2cqw/1 "Space Grotesk",sans-serif;letter-spacing:.03em}
.leaderboard-machine__columns span:last-child{text-align:right}
.leaderboard-machine__rows{flex:1;min-height:0;display:grid;grid-template-rows:repeat(10,minmax(0,1fr));gap:1.5%}
.leaderboard-machine__row{padding:0 2.7%;border:1px solid #9ea916;border-radius:1.4cqw;background:linear-gradient(100deg,#062617e6,#00190fe6);color:#f4ffdc;box-shadow:inset 0 1px 0 #b8dd3a0d;pointer-events:auto;font-variant-numeric:tabular-nums}
.leaderboard-machine__row.is-rank-1{border-color:#e6df38;background:linear-gradient(100deg,#33400fe8,#061c10)}
.leaderboard-machine__row.is-rank-2{border-color:#b6d096}.leaderboard-machine__row.is-rank-3{border-color:#a7ab57}
.leaderboard-machine__rank{font:700 2.3cqw/1 "Space Grotesk",sans-serif;color:#d5ee75;text-align:center}
.leaderboard-machine__player{display:flex;align-items:center;min-width:0;gap:.8cqw}
.leaderboard-machine .credit-avatar{width:3.6cqw;height:3.6cqw;border:1px solid #a8cd4b;box-shadow:none;flex:none}
.leaderboard-machine__identity{display:grid;min-width:0;gap:.25cqw}
.leaderboard-machine__identity strong{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:700 1.8cqw/1.15 "Space Grotesk",sans-serif;color:#f3f8d4}
.leaderboard-machine__identity small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:500 1.25cqw/1.1 "Space Grotesk",sans-serif;letter-spacing:.03em;color:#a4be8b}
.leaderboard-machine__credits{overflow:hidden;text-overflow:ellipsis;text-align:right;color:#dcff72;font:700 2cqw/1 "Space Grotesk",sans-serif}
.leaderboard-machine__row.is-you{border-color:#f956a5}
.leaderboard-machine__row--empty{opacity:.5;font:500 1.7cqw "Space Grotesk",sans-serif}
.leaderboard-machine__own{position:absolute;left:25%;right:26%;top:81.5%;height:4.6%;display:grid;align-items:stretch;color:#ffe8f4}
.leaderboard-machine__row--own{border:0;border-radius:0;box-shadow:none;background:none;grid-template-columns:13% minmax(0,1fr) 25%;padding:0 2%}
.leaderboard-machine__row--own .leaderboard-machine__rank,.leaderboard-machine__row--own .leaderboard-machine__credits{color:#ff8dc6;font-size:2.2cqw}
.leaderboard-machine__row--own .leaderboard-machine__identity strong{color:#fff0f7;font-size:1.9cqw}
.leaderboard-machine__row--own .leaderboard-machine__identity small{color:#ff75b8;font-size:1.4cqw}
.leaderboard-machine__row--own .credit-avatar{border-color:#fa63ad;width:4cqw;height:4cqw}
.leaderboard-machine__empty{align-self:center;text-align:center;font:700 2.25cqw "Space Grotesk",sans-serif;color:#ffb3d8}
.card.leaderboard-machine p.leaderboard-machine__status{position:absolute;left:17%;right:17%;top:27.5%;margin:0;color:#ffdb83;text-align:center;font:500 1.6cqw "Space Grotesk",sans-serif}
.leaderboard-machine__status[hidden],.leaderboard-machine__demo[hidden]{display:none}
.leaderboard-machine__demo{position:absolute;left:18%;right:18%;top:89%;text-align:center;color:#f7bfd7;font:500 1.35cqw "Space Grotesk",sans-serif;letter-spacing:.06em}
.leaderboard-tube{position:absolute;z-index:1;container-type:size;top:36.5%;height:22%;width:5.4%;overflow:hidden;border-radius:15%;pointer-events:none;background:linear-gradient(90deg,transparent,#c7ff0030,transparent);mix-blend-mode:screen;animation:leaderboard-liquid 4s ease-in-out infinite alternate}
.leaderboard-tube--left{left:15.8%}.leaderboard-tube--right{right:17.2%;animation-delay:-2s}
.leaderboard-tube i{position:absolute;bottom:-12%;left:20%;width:45%;aspect-ratio:1;border:1px solid #ecffafaa;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff9,transparent 40%);animation:leaderboard-bubble 5.5s linear infinite}
.leaderboard-tube i:nth-child(2){left:50%;width:32%;animation-delay:-1.8s;animation-duration:7s}
.leaderboard-tube i:nth-child(3){left:4%;width:28%;animation-delay:-3.3s;animation-duration:6s}
.leaderboard-tube i:nth-child(4){left:35%;width:55%;animation-delay:-4.2s;animation-duration:8s}
.leaderboard-tube i:nth-child(5){left:17%;width:18%;animation-delay:-2.6s;animation-duration:4.5s}
.leaderboard-tube--right i{animation-delay:-3s}.leaderboard-tube--right i:nth-child(even){animation-delay:-5s}
.leaderboard-machine__lamp{position:absolute;left:40%;top:93%;width:20%;height:3%;border-radius:30%;pointer-events:none;background:radial-gradient(ellipse,#dcff6640,transparent 75%);mix-blend-mode:screen;animation:leaderboard-liquid 3s ease-in-out infinite alternate}
/* Liquid movement stays inside the two small glass windows. */
.leaderboard-machine__lamp{left:42.2%;top:93%;width:14%;height:2.7%;overflow:hidden;border-radius:25%;animation:leaderboard-liquid 3.8s ease-in-out infinite alternate}
.leaderboard-machine__lamp--top{left:44.4%;top:4.1%;width:10.8%;height:2.8%;animation-delay:-1.7s}
.leaderboard-machine__lamp::before,.leaderboard-machine__lamp::after{content:"";position:absolute;inset:-20% -70%;background:radial-gradient(ellipse at 22% 55%,#f1ffaccc 0 2%,transparent 5%),radial-gradient(circle at 42% 70%,#eaff9680 0 1.5%,transparent 3.5%),radial-gradient(ellipse at 66% 40%,#e5ffacaa 0 2%,transparent 5%),radial-gradient(ellipse at 80% 60%,#c5ff7999 0 3%,transparent 6%);animation:leaderboard-window-flow 6s ease-in-out infinite alternate}
.leaderboard-machine__lamp::after{animation-delay:-3s;animation-duration:8s;opacity:.6;transform:scaleY(-1)}
.leaderboard-machine__lamp--top::before{animation-delay:-2s}
@keyframes leaderboard-window-flow{from{translate:-12% 9%}to{translate:12% -9%}}
@keyframes leaderboard-float{0%,100%{transform:translateY(0) rotate(-.4deg)}50%{transform:translateY(-3%) rotate(.4deg)}}
/* Rises 122% of the tube's height (bottom -12% -> 110%) as a transform: animating
   `bottom` reflowed ten bubbles on every frame. cqh is the tube's own height. */
@keyframes leaderboard-bubble{from{transform:translate(0,0)}to{transform:translate(20%,-122cqh)}}
@keyframes leaderboard-liquid{from{opacity:.4}to{opacity:1}}
@media(max-width:600px){
/* Center the visible cabinet between its tubes; the PNG has unequal side margins. */
.has-leaderboard-page .account-scene{inset:0;display:block;padding:20px 0 0;overflow-x:hidden;overflow-y:auto}
.has-leaderboard-page #account-content,.leaderboard-page .leaderboard-machine{width:145vw;max-width:none;margin:max(calc(var(--leaderboard-header) - 20px),calc(100dvh - 20px - 181.25vw)) 0 0 -21.5vw}
.leaderboard-page{display:block;padding:20px 0 0;overflow-x:clip}
.leaderboard-machine__identity strong{font-size:2.5cqw}.leaderboard-machine__identity small{font-size:1.7cqw}.leaderboard-machine__columns{font-size:2.2cqw}.leaderboard-machine__rank,.leaderboard-machine__credits{font-size:2.7cqw}.leaderboard-machine__player{gap:.6cqw}}
/* Short phone screens let the header logo overlap the decorative cabinet top. */
@media(max-width:600px) and (max-height:760px){
.has-leaderboard-page .account-scene,.leaderboard-page{padding-top:0}
.has-leaderboard-page #account-content,.leaderboard-page .leaderboard-machine{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.leaderboard-machine__logo,.leaderboard-tube,.leaderboard-tube i,.leaderboard-machine__lamp,.leaderboard-machine__lamp::before,.leaderboard-machine__lamp::after{animation:none}}

/* Clear soap bubbles with artwork suspended inside the glass. */
:is(.balloon,.bubble-transition__shell) .bubble{background:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;border:1px solid #e9ffd17a;box-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425}
:is(.balloon,.bubble-transition__shell) .bubble__art{inset:12%;border-radius:50%;overflow:hidden;mask-image:radial-gradient(circle,#000 48%,#000d 61%,transparent 73%)}
:is(.balloon,.bubble-transition__shell) .bubble::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:radial-gradient(ellipse 15% 9% at 26% 19%,#ffffe8cf,transparent 95%),radial-gradient(ellipse 8% 16% at 82% 73%,#f3ffc17a,transparent 95%);box-shadow:inset 0 0 2px 1px #edffb84d}
.balloon:hover .bubble,.balloon:focus-visible .bubble{box-shadow:inset 2px 3px 6px #f5ffd7a0,inset -3px -4px 8px #b5dd7770,0 5px 16px #122b2440}
.balloon .bubble__label{top:15%;left:calc(100% + 5px);width:max-content;height:auto;max-width:46vw;display:flex;align-items:center;gap:2px;padding:0;transform:rotate(-6deg);opacity:0;transition:opacity .15s;white-space:nowrap;text-transform:none;font:600 clamp(19px,2.7vw,32px)/1.2 "Caveat","Segoe Print","Bradley Hand",cursive;letter-spacing:0;color:#f5ffd5;text-shadow:0 1px 3px #15291c}
.balloon.label-left .bubble__label{left:auto;right:calc(100% + 5px);flex-direction:row-reverse;transform:rotate(5deg)}
.bubble__arrow{width:clamp(27px,4vw,55px);height:35px;overflow:visible;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.label-left .bubble__arrow{transform:scaleX(-1)}
.bubble__arrow path{stroke-dasharray:1;stroke-dashoffset:1}
.bubble__writing{display:block;clip-path:inset(0 100% 0 0);padding:4px 2px}
.balloon.is-labelled{z-index:45}
.balloon.is-labelled .float,.balloon.is-labelled .breathe{animation-play-state:paused}
.balloon.is-labelled .bubble__label{opacity:1}
.balloon.is-labelled .bubble__arrow path{animation:bubble-arrow-write .4s ease-out forwards}
.balloon.is-labelled .bubble__writing{animation:bubble-name-write .9s steps(35,end) .25s forwards}
@keyframes bubble-arrow-write{to{stroke-dashoffset:0}}
@keyframes bubble-name-write{to{clip-path:inset(0 0 0 0)}}
.ambient-bubbles{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.ambient-bubbles i{position:absolute;left:var(--left);top:0;width:var(--size);aspect-ratio:1;border-radius:50%;border:1px solid #eaffb754;background:radial-gradient(ellipse at 28% 20%,#faffdaa8,transparent 22%),radial-gradient(circle at 60% 60%,transparent 46%,#dbffae30 72%,#ecffd682 91%,transparent 99%);box-shadow:inset -2px -2px 5px #d4ffa83d;animation:ambient-bubble-rise var(--time) linear var(--delay) infinite;will-change:transform}
@keyframes ambient-bubble-rise{0%{transform:translate3d(0,110vh,0)}35%{transform:translate3d(var(--sway),65vh,0)}70%{transform:translate3d(calc(var(--sway)*-.4),20vh,0)}100%{transform:translate3d(var(--sway),-90px,0)}}
@media(prefers-reduced-motion:reduce){.ambient-bubbles{display:none}.balloon.is-labelled .bubble__arrow path{animation:none;stroke-dashoffset:0}.balloon.is-labelled .bubble__writing{animation:none;clip-path:none}}

.balloon:focus-visible{filter:none!important}

/* The transparent Hall of Fame illustration needs no edge-fading mask. */

.balloon.is-roaming{left:0;top:0;transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%);transition:none!important}
.balloon.is-roaming .float{animation:none;transform:none}
.balloon.is-roaming .breathe{animation:none;transform:scale(var(--roam-scale,1))}
.ambient-bubbles i:nth-child(3n){animation-name:ambient-bubble-wander;animation-timing-function:ease-in-out}
@keyframes ambient-bubble-wander{0%{transform:translate3d(-10vw,105vh,0) scale(.75)}30%{transform:translate3d(12vw,65vh,0) scale(1.2)}65%{transform:translate3d(-6vw,38vh,0) scale(.85)}100%{transform:translate3d(9vw,-90px,0) scale(1.1)}}

.balloon .bubble__label{display:none}
.project-hint{position:fixed;inset:0;z-index:42;pointer-events:none;color:#f5ffd5}
.project-hint[hidden]{display:none}
.project-hint__text{position:absolute;max-width:min(210px,65vw);width:max-content;padding:5px 4px;font:600 28px/1.15 "Caveat","Segoe Print","Bradley Hand",cursive;text-shadow:0 1px 3px #15291c}
.project-hint__arrow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.project-hint__arrow path{stroke-dasharray:1;stroke-dashoffset:1}
.project-hint.is-visible .project-hint__arrow path{animation:bubble-arrow-write .45s ease-out forwards}
.project-hint.is-visible .bubble__writing{animation:bubble-name-write 1s steps(40,end) .25s forwards}
@media(prefers-reduced-motion:reduce){.project-hint.is-visible .project-hint__arrow path{animation:none;stroke-dashoffset:0}.project-hint.is-visible .bubble__writing{animation:none;clip-path:none}}

/* Settle hover geometry before the label is measured, then keep it fixed. */
.balloon.is-labelled .bubble{transition:none}
.project-hint__text{max-width:none;white-space:nowrap;line-height:1.2}

/* The profile uses one proportionally scaled cabinet with three custom modules. */
body.has-profile-page{--profile-top:clamp(150px,24dvh,185px);--profile-foot:0px}
.has-profile-page .account-scene{inset:var(--profile-top) 0 var(--profile-foot);padding:0 8px;overflow:clip;display:flex;align-items:flex-end;justify-content:center}
.has-profile-page #account-content{width:min(620px,calc((100dvh - var(--profile-top) - var(--profile-foot)) * .8),100%);margin:auto auto 0}
.card.profile-arcade,#account-content>.card.profile-arcade{position:relative;display:block;container-type:inline-size;width:100%;max-width:620px;aspect-ratio:4/5;margin:0 auto;padding:0;border:0;background:none;box-shadow:none;color:#f5f5de;overflow:visible;text-align:left}
/* Compensate for the eight transparent pixels below the cabinet artwork. */
.has-profile-page .profile-arcade{transform:translateY(.55%)}
.profile-cabinet-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.profile-arcade .profile-panel{position:absolute;inset:0;border:0;padding:0;margin:0;min-width:0;background:none;pointer-events:none}
.profile-panel>*{pointer-events:auto}
.profile-arcade .profile-portrait{position:absolute;z-index:2;width:22%;aspect-ratio:1;left:39%;top:2.2%}
.profile-arcade .profile-avatar-frame{position:absolute;inset:8%;width:auto;aspect-ratio:1;border:0;box-shadow:0 0 0 1px #adca44;background:var(--monkee-background,#004abe);overflow:hidden}
.profile-arcade .profile-avatar-frame:after{display:none}
.card.profile-arcade h1{position:absolute;inset:20.4% 24.8% auto 25%;height:4.2%;margin:0!important;text-align:center;color:#fffce6!important;font:3.7cqw/1 "Archivo Black",sans-serif!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 2px #000}
.profile-arcade h2{font:700 3cqw/1.1 "Space Grotesk",sans-serif;letter-spacing:.035em;color:#c8ff62;margin:0}
.profile-wallets{position:absolute;inset:28% 20% auto;display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.8cqw 2cqw;padding:0;background:none;border:0;text-align:left}
.profile-wallets h2{font:700 2.7cqw/1.2 "Space Grotesk",sans-serif;letter-spacing:0}
.profile-wallets>h2,.profile-wallets>[data-profile-wallet]{transform:translateY(1.2cqw)}
.profile-wallets code{font:500 2.7cqw/1.2 "Space Grotesk",sans-serif;font-variant-numeric:tabular-nums;letter-spacing:0;color:#f2f5df;user-select:text;text-align:right}
.profile-wallets ul{grid-column:1/-1;list-style:none;padding:0;margin:0;color:#a6b999;font-size:2.3cqw;max-height:5.5cqw;overflow:auto;text-align:center}.profile-wallets ul:empty{display:none}.profile-wallets li code{font-size:2.5cqw;color:#b5caa9}
.profile-arcade .profile-plaque{position:absolute;inset:41% 20% auto;height:5%;display:grid;place-items:center;background:none;border:0;box-shadow:none;transform:none;text-align:center;font:4cqw/1 "Luckiest Guy",cursive;color:#c7ff4a;text-shadow:0 2px #000}
.profile-collections{position:absolute;inset:49.7% 17.2% 23.5%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6%;padding:0}
.profile-collection{display:grid;grid-template-rows:9.7cqw 3.2cqw 8.3cqw 2.5cqw 6cqw;align-content:center;align-items:center;justify-items:center;min-width:0;padding:0 2%;border:0;background:none;box-shadow:none}
.profile-collection>img{display:block;width:90%;height:9cqw;object-fit:contain;margin-bottom:.7cqw;filter:drop-shadow(0 2px 2px #000)}
.profile-collection>img.profile-monkees-logo{width:90%}
.profile-collection>img.profile-bayc-icon{filter:invert(1) drop-shadow(0 2px 2px #000)}
.profile-collection h3{font:700 2.9cqw/1.1 "Space Grotesk",sans-serif;color:#f5f5de;margin:0}
.profile-collection>strong{font:7.5cqw/1.1 "Archivo Black",sans-serif;color:#ff42ad;text-shadow:0 2px 0 #680a42;font-variant-numeric:tabular-nums}
.profile-collection>small{color:#b1cba0;font-size:2cqw;line-height:1.2;min-height:2.5cqw}
.profile-reward{display:block;width:100%;margin-top:.5cqw;padding:0;color:#d2ff7e;text-align:center;font:700 2.1cqw/1.25 "Space Grotesk",sans-serif}
.profile-arcade .profile-reward-note{position:absolute;inset:78.4% 10% auto;max-width:none;margin:0!important;color:#b4c5a9;font-size:1.8cqw!important;line-height:1.2;text-align:center}
.profile-balance>div{position:absolute;inset:84.4% 51% 8.2% 17%;min-width:0}
.profile-balance-value{display:flex;height:100%;align-items:center;justify-content:center;gap:2cqw;min-width:0;padding:0 1cqw;overflow:hidden}
.profile-balance-value strong{color:#f3ff98;font:6cqw/1 "Space Grotesk",sans-serif;font-weight:700;font-variant-numeric:tabular-nums;text-shadow:0 0 6px #c8ff4040;min-width:0;max-width:calc(100% - 7cqw);white-space:nowrap;overflow:hidden;flex:0 1 auto}
.profile-coin{flex:none;width:5cqw;height:5.7cqw;border:1px solid #0c1703;border-radius:50%;background:linear-gradient(125deg,#ffff7b,#b8fa04 60%,#6ea811);box-shadow:inset 0 0 0 1px #d7ff38,inset 0 0 0 2px #608f04,2px 1px #92c71c;transform:rotate(-15deg)}
.profile-get-more{position:absolute;inset:84.4% 14% 8.2% 55%;display:flex;align-items:center;justify-content:center;gap:1cqw;padding:0;border:0;background:none;box-shadow:none;color:#ff65ba!important;font:700 3.1cqw/1 "Space Grotesk",sans-serif;text-decoration:none!important;transition:filter .2s}
.profile-get-more:hover{filter:brightness(1.25)}
.profile-arcade>[data-credit-status]{position:absolute;inset:auto 10% 1%;max-width:none;color:#f4f8df;text-align:center;font-size:2.2cqw;line-height:1.2;margin:0}.profile-arcade>[data-credit-status][hidden]{display:none}
.profile-page{overflow:auto;display:grid;place-items:center;padding:12px;background:#122d20}
.profile-page>.card.profile-arcade{width:min(620px,calc((100dvh - 24px)*.8),100%)}
.profile-arcade>.back{position:fixed;top:12px;left:12px;z-index:3}
.profile-credit-help{padding:clamp(10px,3vw,24px);text-align:center}
.profile-credit-help h1{color:#c8ff4a;text-shadow:0 2px #000;font-family:"Luckiest Guy",cursive}
.profile-credit-help p{color:#e0eacb;font:clamp(12px,2vw,16px)/1.45 "Space Grotesk",sans-serif}
.profile-credit-help a{color:#ff64b8;font-weight:700}
@media(max-height:600px) and (min-width:650px){body.has-profile-page{--profile-top:70px;--profile-foot:0px}}

.profile-arcade .profile-wallets-toggle{grid-column:1/-1;justify-self:center;border:0;border-bottom:1px solid #829735;background:none;box-shadow:none;padding:.7cqw 1cqw;margin:0;border-radius:0;color:#c9f891;font:700 2.7cqw/1.2 "Space Grotesk",sans-serif;cursor:pointer;min-width:0}
.profile-wallets-toggle:disabled{opacity:.65;cursor:default}.profile-wallets-toggle:hover:not(:disabled){color:#ff70ba}
.profile-wallet-directory{width:100%;min-height:0;display:flex;flex-direction:column;max-height:100%;box-sizing:border-box}
.profile-wallet-directory h1{margin:0 0 8px}.profile-wallet-directory>p{margin:0 0 12px}
.profile-wallet-directory__list{list-style:none;padding:0 8px 0 0;margin:0;min-height:0;overflow:auto;max-height:min(43dvh,360px);overscroll-behavior:contain;scrollbar-color:#9cc747 #102018;text-align:left}
.profile-wallet-directory__list li{border:1px solid #557537;border-radius:7px;background:#05160dc9;padding:10px 12px;margin-bottom:8px}
.profile-wallet-directory__list span{display:block;color:#bded68;font-size:10px;letter-spacing:.1em;margin-bottom:5px}
.profile-wallet-directory__list code{display:block;font:clamp(10px,2.7vw,13px)/1.45 monospace;overflow-wrap:anywhere;color:#f0f5df;user-select:text}

@media(max-width:600px){body.has-profile-page{--profile-top:clamp(108px,18dvh,130px);--profile-foot:0px}}
/* Profile dialogs have their own compact metal housing, without the paper frame. */
.profile-credit-help h1{font-size:clamp(22px,5vw,32px);line-height:1.1;margin:0 0 12px}
.profile-credit-help p{margin:10px 0;line-height:1.4}
@media(max-height:600px){.profile-credit-help{padding:10px}.profile-credit-help p{font-size:12px}.profile-wallet-directory__list{max-height:38dvh}}
.profile-arcade .profile-edit-avatar,.profile-arcade .profile-edit-name{border:0;background:none;box-shadow:none;padding:0;margin:0;color:inherit;cursor:pointer;font:inherit;border-radius:0}
.profile-arcade .profile-edit-avatar{position:absolute;inset:0;width:100%;height:100%;z-index:3;border-radius:50%}
.profile-edit-avatar span{position:absolute;right:0;bottom:5%;width:5cqw;height:5cqw;display:grid;place-items:center;border:1px solid #fd80c0;border-radius:50%;background:#37102a;color:#ff90ca;font:4cqw/1 sans-serif}
.profile-arcade .profile-edit-name{display:flex;align-items:center;justify-content:center;gap:1cqw;width:100%;white-space:nowrap}
.profile-edit-name [data-profile-name]{overflow:hidden;text-overflow:ellipsis}.profile-edit-pencil{flex:none;font:3.3cqw/1 sans-serif;color:#ff78bf}
.profile-arcade [data-edit-profile]:disabled{cursor:default}.profile-arcade [data-edit-profile]:disabled .profile-edit-pencil,.profile-edit-avatar:disabled span{display:none}
.profile-editor form{display:grid;gap:10px;width:100%;text-align:left}
.profile-editor-preview{width:76px;height:76px;border-radius:50%;object-fit:cover;justify-self:center;border:2px solid #f657ad}
.profile-editor label{display:grid;gap:5px;color:#c9f784;font:700 13px "Space Grotesk",sans-serif}
.profile-editor input{width:100%;box-sizing:border-box;min-height:38px;border:1px solid #7b9e49;border-radius:7px;background:#091d12;color:#f6f6dd;padding:8px;font:14px "Space Grotesk",sans-serif}
.profile-editor input[type=file]{font-size:11px}.profile-editor input::file-selector-button{border:0;border-radius:4px;background:#e74197;color:#160d13;padding:7px;margin-right:8px;font-weight:700;cursor:pointer}
.profile-editor button[type=submit]{padding:11px;border:1px solid #ff8fcd;border-radius:8px;background:linear-gradient(#68324f,#371029);color:#ff9ed6;font-weight:700;cursor:pointer}
.profile-editor button:disabled{opacity:.55;cursor:wait}
.profile-editor .profile-editor-note{font-size:10px;margin:0;color:#b7c7a5}.profile-editor .profile-editor-status{font-size:12px;margin:0;min-height:1.4em;color:#effacb}
@media(max-height:650px){.profile-editor-preview{width:52px;height:52px}.profile-editor form{gap:7px}.profile-editor input{min-height:32px;padding:6px}.profile-editor h1{font-size:22px;margin-bottom:8px}.profile-editor button[type=submit]{padding:8px}}

.profile-tubes{position:absolute;inset:0;pointer-events:none}
.profile-tube{position:absolute;overflow:hidden;clip-path:inset(2% 8% round 40%);border-radius:40%;mix-blend-mode:screen;background:linear-gradient(90deg,transparent,#b8ff4020,transparent);animation:profile-tube-glow 5s ease-in-out infinite alternate}
.profile-tube--left{left:6.4%;top:51.6%;width:2.5%;height:11.7%}
.profile-tube--right{left:91.6%;top:51.6%;width:2.5%;height:11.7%;animation-delay:-2.7s}
.profile-tube--upper-left{left:34%;top:8.4%;width:3%;height:7%;animation-delay:-1.5s}
.profile-tube--upper-right{left:62.5%;top:8.4%;width:3%;height:7%;animation-delay:-3.6s}
.profile-tube:before,.profile-tube:after{content:"";position:absolute;left:16%;top:0;width:45%;aspect-ratio:1;border:1px solid #e9ffa9;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fffcc0,transparent 50%);animation:profile-tube-bubble 3.9s linear infinite}
.profile-tube:after{left:52%;width:28%;animation-duration:5.7s;animation-delay:-2.1s}.profile-tube--right:before{animation-delay:-1.7s}.profile-tube--upper-left:before{animation-duration:4.9s}.profile-tube--upper-right:after{animation-delay:-3.1s}
@keyframes profile-tube-bubble{0%{transform:translateY(17cqw);opacity:0}15%,80%{opacity:.8}100%{transform:translateY(-2cqw);opacity:0}}
@keyframes profile-tube-glow{to{background-color:#baff4d15}}
@media(prefers-reduced-motion:reduce){.profile-tube,.profile-tube:before,.profile-tube:after{animation:none}.profile-tube:before,.profile-tube:after{display:none}}
/* Keep the mobile wallet/social controls clear of the bottom-aligned cabinet. */
@media(max-width:600px){.has-profile-page .corner{bottom:auto;top:105px}}

/* A soap-film pop, followed by a wipe from the selected bubble's position. */
.is-bubble-transitioning .balloons { pointer-events:none; }
.balloon.is-popping { visibility:hidden; }
.bubble-transition { position:fixed; inset:0; z-index:1000; pointer-events:none; overflow:hidden; }
.bubble-transition__veil { position:absolute; inset:0; background:radial-gradient(ellipse at var(--pop-x) var(--pop-y),#859f87,#3c594d); clip-path:circle(0 at var(--pop-x) var(--pop-y)); animation:bubble-wipe-in 300ms 150ms ease-in forwards; }
.bubble-transition.is-arriving .bubble-transition__veil { clip-path:circle(var(--pop-reach) at var(--pop-x) var(--pop-y)); animation:bubble-wipe-out 400ms ease-out forwards; }
.bubble-transition__shell { position:absolute; left:var(--pop-x); top:var(--pop-y); width:var(--pop-size); height:var(--pop-size); transform:translate(-50%,-50%); animation:bubble-shell-pop 270ms ease-out forwards; }
.bubble-transition__shell > .bubble { display:block; position:relative; inset:auto; width:100%; height:100%; transform:none!important; animation:none!important; }
.bubble-transition__drop { position:absolute; left:var(--pop-x); top:var(--pop-y); width:var(--drop-size); height:var(--drop-size); margin:calc(var(--drop-size) / -2); border-radius:50%; background:radial-gradient(circle at 30% 25%,#ffffe9 0 12%,#e4f6a778 38%,#b1e79433 68%); border:1px solid #f4ffdca8; box-shadow:inset -1px -1px 3px #dfff9566; opacity:0; animation:bubble-drop-pop 430ms 80ms ease-out forwards; }
@keyframes bubble-shell-pop { 0% { opacity:1; transform:translate(-50%,-50%) scale(1); } 35% { opacity:1; transform:translate(-50%,-50%) scale(1.15,.94); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.42); filter:blur(3px); } }
@keyframes bubble-drop-pop { 0% { opacity:0; transform:translate(0,0) scale(.6); } 15% { opacity:1; } 100% { opacity:0; transform:translate(var(--drop-x),var(--drop-y)) scale(.25); } }
@keyframes bubble-wipe-in { to { clip-path:circle(var(--pop-reach) at var(--pop-x) var(--pop-y)); } }
@keyframes bubble-wipe-out { from { opacity:1; } to { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .bubble-transition { display:none; } }

/* Visual loading state: the cabinet fills with light while its data arrives. */
.profile-loading-orbs{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:14px}
.profile-loading-orbs i{width:6px;height:6px;border-radius:50%;border:1px solid #eaff99;background:#9bdc39;box-shadow:0 0 7px #baff5970;animation:profile-loading-pulse 1.25s ease-in-out infinite}
.profile-loading-orbs i:nth-child(2){animation-delay:.18s}.profile-loading-orbs i:nth-child(3){animation-delay:.36s}
.profile-page-loading{display:grid;place-items:center;min-height:45dvh}
.is-profile-loading :is([data-profile-name],[data-profile-wallet],[data-profile-wallets],[data-profile-nft],[data-profile-reward],[data-profile-credits]){color:transparent!important;text-shadow:none!important;border-color:transparent!important;border-radius:5px;background:linear-gradient(100deg,#7eaf3730 20%,#d6ff8a80 45%,#7eaf3730 70%);background-size:250% 100%;animation:profile-loading-shimmer 1.8s ease-in-out infinite;user-select:none}
.is-profile-loading [data-profile-name]{display:block;width:58%;height:4cqw;margin:.8cqw auto}
.is-profile-loading [data-profile-wallet]{width:70%;height:3cqw;justify-self:end}
.is-profile-loading [data-profile-wallets]{width:48%;height:3cqw;margin:.5cqw auto}
.is-profile-loading [data-profile-nft]{width:35%;margin:.5cqw 0;animation-delay:.15s}
.is-profile-loading [data-profile-reward]{animation-delay:.3s}
.is-profile-loading [data-profile-credits]{width:12cqw;height:5cqw}
.is-profile-loading .profile-avatar-frame img{opacity:0}
.is-profile-loading .profile-avatar-frame{background:radial-gradient(circle at 35% 30%,#daff8780,#1c4526 65%);animation:profile-loading-pulse 1.8s ease-in-out infinite}
@keyframes profile-loading-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes profile-loading-pulse{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.profile-loading-orbs i,.is-profile-loading :is([data-profile-name],[data-profile-wallet],[data-profile-wallets],[data-profile-nft],[data-profile-reward],[data-profile-credits],.profile-avatar-frame){animation:none}}

/* Stable profile slots: loading, empty and populated values share one layout. */
.profile-collection>*{min-width:0}.profile-collection>strong{min-height:8.3cqw;display:grid;place-items:center}.profile-reward{min-height:5.25cqw;display:grid;place-items:center}
.is-profile-loading [data-profile-nft]{margin:0;height:6cqw;min-height:0}.is-profile-loading [data-profile-reward]{height:4cqw;min-height:0}
.profile-arcade .profile-wallets-toggle{position:absolute;top:4.3cqw;left:50%;transform:translateX(-50%);border:1px solid #cf3c84;border-radius:1cqw;background:linear-gradient(#48152e,#210d1d);box-shadow:inset 0 1px #ff8ac34d;padding:.65cqw 2cqw;color:#ff8ac3;font:700 2.2cqw/1.1 "Space Grotesk",sans-serif;white-space:nowrap}
.profile-arcade .profile-wallets-toggle[hidden]{display:none}
.profile-arcade .profile-avatar-frame{inset:8%;aspect-ratio:auto;box-shadow:none}
.profile-avatar-frame img{object-position:50% 50%;transform:none!important}
.profile-arcade h1>[data-profile-name]{display:block;position:relative;margin:0 5.5cqw;width:calc(100% - 11cqw);height:5.25cqw;line-height:5.25cqw;overflow:hidden;white-space:nowrap;text-overflow:clip}
.profile-arcade h1>.profile-edit-name{position:absolute;right:.7cqw;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:3.8cqw;height:3.8cqw;border:1px solid #cd3987;border-radius:50%;background:#321024;color:#ff8fc6;font:3cqw/1 sans-serif}
.profile-arcade h1>.profile-edit-name:disabled{visibility:hidden}
.is-profile-loading h1>[data-profile-name]{width:50%;height:3.8cqw;margin:1cqw auto}
.profile-avatar-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.profile-editor .profile-avatar-tabs button,.profile-avatar-pagination button,.profile-avatar-grid>button{border:1px solid #5c7b3e;background:#102419;color:#ceefa1;border-radius:6px;padding:7px 3px;font:700 10px "Space Grotesk",sans-serif;cursor:pointer}
.profile-editor .profile-avatar-tabs button[aria-pressed=true]{border-color:#ff62b1;color:#ff9dce;background:#35142b}
.profile-avatar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;min-height:96px;align-content:start}
.profile-avatar-grid[aria-busy=true]{display:flex;align-items:center;justify-content:center}
.profile-avatar-grid .profile-avatar-choice{padding:2px;aspect-ratio:1;border:2px solid #537738;overflow:hidden;background:#14251d}
.profile-avatar-choice img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:3px}
.profile-avatar-grid .profile-avatar-choice[aria-pressed=true]{border-color:#ff4baa;box-shadow:0 0 0 1px #ff8fc7}
.profile-avatar-pagination{display:flex;align-items:center;justify-content:center;gap:14px;font-size:11px;color:#d2ecb3}.profile-avatar-pagination[hidden]{display:none}
.profile-editor-preview{object-position:center}.profile-editor-preview[hidden]{display:none}
@media(max-width:420px){.profile-avatar-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.profile-editor-preview{width:58px;height:58px}}
@media(max-height:650px){.profile-editor form{gap:5px}.profile-avatar-grid{min-height:68px}.profile-editor-preview{width:44px;height:44px}.profile-editor .profile-avatar-tabs button{padding:5px 1px;font-size:9px}}

.balloon[data-slot]{--bubble:calc(var(--bubble-base) * 1.22)}

.profile-collection>img.profile-bayc-solid{transform:scale(.82)}
.profile-arcade .profile-avatar-frame{transform:translateY(-3px)}
.profile-load-error{position:absolute;inset:30% 12% auto;padding:5cqw 3cqw;text-align:center;border:2px solid #789742;border-radius:3cqw;background:linear-gradient(135deg,#243e2a,#061b12);box-shadow:0 0 0 4px #17261a,0 8px 30px #0005}
.profile-load-error>span{display:block;color:#c9ff64;font:12cqw/1 sans-serif;margin-bottom:2cqw}.profile-load-error h2{font:4cqw/1.2 "Luckiest Guy",sans-serif}
.profile-load-error p{font:2.8cqw/1.4 "Space Grotesk",sans-serif;color:#e1eac9;margin:2cqw 0 3cqw}
.profile-load-error button{border:1px solid #ed4d9c;border-radius:1.4cqw;background:#39132b;color:#ff9ace;padding:2cqw 4cqw;font:700 2.8cqw/1 "Space Grotesk",sans-serif;cursor:pointer}
.has-profile-error>:not(.profile-load-error){visibility:hidden}.has-profile-error .profile-load-error[hidden]{display:none}

.profile-collection-lamps{position:absolute;inset:0;pointer-events:none}
.profile-collection-lamps i{position:absolute;top:47.25%;left:23.5%;width:7%;height:1.85%;border-radius:50%;backdrop-filter:brightness(.18) saturate(.2);-webkit-backdrop-filter:brightness(.18) saturate(.2);background:#10241b55;box-shadow:inset 0 0 3px #08190c;opacity:1;transition:opacity .3s}
.profile-collection-lamps i:nth-child(2){left:46.5%}.profile-collection-lamps i:nth-child(3){left:70.4%}
.profile-collection-lamps i.is-lit{opacity:0}
@media(prefers-reduced-motion:reduce){.profile-collection-lamps i{transition:none}}

/* Reserve the complete picker layout across loading, empty and populated tabs. */
.profile-editor form{min-width:0}
.profile-editor .profile-avatar-grid{width:100%;min-height:0;aspect-ratio:7 / 2;grid-template-rows:repeat(2,minmax(0,1fr))}
.profile-editor .profile-avatar-pagination{height:28px;box-sizing:border-box}
.profile-editor .profile-avatar-pagination[hidden]{display:flex;visibility:hidden}
.profile-editor .profile-editor-status{height:2.8em;min-height:2.8em;line-height:1.4;overflow:auto}
.profile-editor-preview[hidden]{display:block;visibility:hidden}
@media(max-width:420px){.profile-editor .profile-avatar-grid{aspect-ratio:5 / 3;grid-template-rows:repeat(3,minmax(0,1fr))}}
@media(max-height:740px){.profile-editor form{gap:6px}.profile-editor .profile-avatar-tabs button{font-size:9px;padding:6px 1px;white-space:nowrap}}

/* Connect is a soap bubble until the wallet is connected. */
.connect:not(.is-on){width:clamp(100px,12vw,154px);height:clamp(100px,12vw,154px);min-width:0;min-height:0;display:grid;place-items:center;border-radius:50%;overflow:hidden;border:1px solid #e9ffd17a;background:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;box-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425;filter:none}
.connect:not(.is-on) .connect__art{width:88%;height:88%;object-fit:contain}
.connect.is-floating{position:fixed;left:var(--connect-x,12vw);top:var(--connect-y,55vh);z-index:12;transition:filter .2s ease;transform:none}
.connect:not(.is-on):hover{filter:brightness(1.12)}
.connect:not(.is-on):focus-visible{outline:2px solid #ff78bd;outline-offset:5px;border-radius:50%}
.corner:has(.connect.is-floating) .social{margin-left:auto}

/* Wallet, portals and corner links share the same breathing and hover response. */
.social{margin-left:auto;min-width:174px;min-height:60px;justify-content:flex-end;gap:12px}
.social__link{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;border:1px solid #e9ffd17a;background:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;box-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425}
.social__link svg{width:22px;height:22px}
.social__link .social__mask{width:22px;height:22px}
#connect.is-roaming,.social__link.is-roaming{position:fixed;left:0;top:0;z-index:12;transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%) scale(var(--roam-scale,1));transition:none}
#connect.is-roaming:hover,#connect.is-roaming:focus-visible,.social__link.is-roaming:hover,.social__link.is-roaming:focus-visible{transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%) scale(calc(var(--roam-scale,1) * 1.18))}
.social__link:focus-visible{border-radius:50%}

.connect:not(.is-on) .connect__art{width:82%;height:82%;border-radius:50%;object-fit:cover;mask-image:radial-gradient(circle,#000 58%,transparent 72%)}
.disconnect-label{display:none}
#connect.is-on,.confirmation-bubble{width:50px;height:50px;min-width:0;min-height:0;display:grid;place-items:center;padding:0;border-radius:50%;color:var(--pink-hot);border:1px solid #e9ffd17a;background:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;box-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425;filter:none;cursor:pointer}
#connect.is-on .connect__art{display:none}
#connect.is-on .disconnect-label{display:grid;justify-items:center;gap:1px;font:700 7px "Space Grotesk",sans-serif}
.disconnect-label svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.disconnect-confirm[hidden]{display:none}
.confirming-disconnect #connect{visibility:hidden;pointer-events:none}
.disconnect-confirm{position:fixed;left:18px;bottom:18px;display:flex;gap:12px;align-items:center;z-index:30}
.confirmation-bubble{flex:none;font:700 14px "Space Grotesk",sans-serif;text-align:center}
.disconnect-question{width:82px;height:82px;font-size:15px;color:#f5ffd0;cursor:default}
.confirmation-bubble>span{animation:disconnect-pop .3s cubic-bezier(.2,1.5,.4,1) both}
.confirmation-bubble:nth-child(2)>span{animation-delay:.06s}.confirmation-bubble:nth-child(3)>span{animation-delay:.12s}
.confirmation-bubble.is-roaming{position:fixed;left:0;top:0;transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%) scale(var(--roam-scale,1));transition:none}
.confirmation-bubble:focus-visible{outline:2px solid #ff75bb;outline-offset:3px}
@keyframes disconnect-pop{from{opacity:0;transform:scale(.1)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.confirmation-bubble>span{animation:none}}
.confirmation-bubble{animation:disconnect-bubble-pop .28s cubic-bezier(.2,1.35,.4,1) both}
@keyframes disconnect-bubble-pop{from{scale:.12;opacity:0}to{scale:1;opacity:1}}
@media(prefers-reduced-motion:reduce){.confirmation-bubble{animation:none}}

.disconnect-confirm{right:auto;bottom:auto}
.confirmation-bubble{background:radial-gradient(circle at 32% 22%,#efffcf45,transparent 52%),#789a7070}

.disconnecting .corner,.disconnecting .balloons{pointer-events:none}
.disconnect-burst{position:fixed;z-index:1000;pointer-events:none}
.disconnect-burst i{position:absolute;width:6px;height:6px;border-radius:50%;border:1px solid #eaffc8;background:#ddffa860;animation:disconnect-droplets .42s ease-out both}
@keyframes disconnect-droplets{from{transform:translate(-50%,-50%) scale(.3);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.6);opacity:0}}

/* Wallet actions remain in the lower left, including before physics starts. */
#connect{position:fixed;left:24px;bottom:24px}
#connect.is-on{width:48px;height:48px}
#connect.is-on .disconnect-label{font-size:9px}
.disconnect-label svg{width:28px;height:28px}
.confirmation-bubble{font-size:32px;line-height:1}
.confirmation-bubble[data-disconnect-choice="yes"]{color:#b6ff38}
.confirmation-bubble[data-disconnect-choice="no"]{color:var(--pink-hot)}

/* Reserve a quiet strip below the cabinets: controls never cover their content. */
body.has-account-page,body.has-slot{--bubble-footer:112px}
body.has-profile-page{--profile-foot:var(--bubble-footer)}
.has-account-page .account-scene{bottom:var(--bubble-footer)}
.has-leaderboard-page #account-content{width:min(960px,calc((100dvh - var(--leaderboard-header) - var(--bubble-footer)) * .8),100%)}
.has-slot .slot-scene{bottom:var(--bubble-footer)}
:is(.social__link,#connect.is-on,.confirmation-bubble){background:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;border-color:#e9ffd17a;box-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425;color:var(--pink-hot)}
body:is(.has-account-page,.has-slot) .confirmation-bubble[data-disconnect-choice="yes"]{color:#b6ff38}
@media(max-width:600px){
  .has-leaderboard-page #account-content{width:145vw}
  body.has-account-page,body.has-slot{--bubble-footer:168px}
}

.social__link{width:48px;height:48px}
.social__link svg,.social__link .social__mask{width:26px;height:26px}

/* Keep the wallet icon clear; its label appears around the bubble on intent. */
.disconnect-orbit{display:none;position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;overflow:visible;pointer-events:none;fill:#ff8acb;filter:drop-shadow(0 1px 2px #071e18);font:700 14px "Space Grotesk",sans-serif;letter-spacing:1.8px}
#connect.is-on{overflow:visible}
#connect.is-on .disconnect-label{place-items:center;line-height:0;gap:0}
#connect.is-on .disconnect-label svg{display:block;width:26px;height:26px}
#connect.is-on:is(:hover,:focus-visible) .disconnect-orbit{display:block;animation:disconnect-orbit-turn 12s linear infinite}
@keyframes disconnect-orbit-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){#connect.is-on:is(:hover,:focus-visible) .disconnect-orbit{animation:none}}

/* Connect and Disconnect share the same compact wallet bubble. */
#connect:not(.is-on),#connect.is-on{width:48px;height:48px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;overflow:visible;border-radius:50%;border:1px solid #e9ffd17a;color:var(--pink-hot);background:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;box-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425;filter:none}
.connect-label{display:grid;place-items:center;line-height:0}
.connect-label svg{display:block;width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#connect.is-on .connect-label{display:none}
#connect:is(:hover,:focus-visible) .disconnect-orbit{display:block;animation:disconnect-orbit-turn 12s linear infinite}
@media(prefers-reduced-motion:reduce){#connect:is(:hover,:focus-visible) .disconnect-orbit{animation:none}}

/* Wide screens have room beside the cabinets for the corner controls. */
@media(min-width:821px){
  body.has-account-page,body.has-slot{--bubble-footer:0px}
}

/* Social names orbit on hover/focus, matching the wallet bubble. */
.social__link .social-orbit{display:none;position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;overflow:visible;pointer-events:none;fill:#ff8acb;filter:drop-shadow(0 1px 2px #071e18);font:700 14px "Space Grotesk",sans-serif;letter-spacing:1.8px}
.social__link:is(:hover,:focus-visible) .social-orbit{display:block;animation:disconnect-orbit-turn 12s linear infinite}
body:is(.has-slot,.has-account-page) .corner{display:none}
body.has-account-page,body.has-slot{--bubble-footer:0px}
/* Navigation controls gently drift within their original upper corners. */
.control-bubble{width:48px;height:48px;min-width:48px;aspect-ratio:1;padding:0;margin:0;display:grid;place-items:center;border-radius:50%;border:1px solid #e9ffd17a;background:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;color:var(--pink-hot);box-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425;filter:none;animation:corner-control-drift 9s ease-in-out infinite;cursor:pointer}
.control-bubble[hidden]{display:none}
.control-bubble svg{width:26px;height:26px}
.topbar__actions{gap:18px}
.topbar__admin.control-bubble{animation-delay:-3s}
.radio.control-bubble{animation-delay:-6s}
.control-bubble:is(:hover,:focus-visible){animation-play-state:paused;outline:none}
@keyframes corner-control-drift{0%,100%{translate:0 0}33%{translate:6px 5px}66%{translate:-5px 9px}}
@media(prefers-reduced-motion:reduce){.control-bubble,.social__link:is(:hover,:focus-visible) .social-orbit{animation:none}}

/* Homepage utility bubbles share the light, translucent soap-bubble finish. */
.social__link,#connect:not(.is-on),#connect.is-on{border-color:#e9ffd17a;background:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;box-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425}

/* Project labels follow the same circular hover treatment as the small bubbles. */
.project-orbit{display:none;position:absolute;left:-25%;top:-25%;width:150%;height:150%;overflow:visible;pointer-events:none;fill:#f5ffd5;filter:drop-shadow(0 1px 2px #15291c);font:600 10px "Space Grotesk",sans-serif;letter-spacing:.6px}
.balloon.is-labelled .project-orbit{display:block;animation:disconnect-orbit-turn 16s linear infinite}
@media(prefers-reduced-motion:reduce){.balloon.is-labelled .project-orbit{animation:none}}

.social__link,.social__link:hover{filter:none}

.control-bubble{position:relative;overflow:visible}
.control-bubble .control-orbit{display:none;position:absolute;left:50%;top:50%;width:66px;height:66px;margin:-33px 0 0 -33px;overflow:visible;pointer-events:none;fill:#ff8acb;stroke:none;filter:drop-shadow(0 1px 2px #071e18);font:700 14px "Space Grotesk",sans-serif;letter-spacing:1.8px}
.control-bubble:is(:hover,:focus-visible) .control-orbit{display:block;animation:disconnect-orbit-turn 12s linear infinite}
.slot-back.control-bubble{position:fixed}
@media(prefers-reduced-motion:reduce){.control-bubble:is(:hover,:focus-visible) .control-orbit{animation:none}}

/* Give only the pink symbols depth; keep the glass and orbit labels clear. */
.social__link>svg:not(.social-orbit),.social__mask,.connect-label svg,.disconnect-label svg,.control-bubble>svg:not(.control-orbit){filter:drop-shadow(0 1px 1px #10251bd9) drop-shadow(0 0 3px #10251b80)}

/* Masked artwork needs its shadow on a wrapper, outside the clipping mask. */
.social-icon-shadow{display:grid;place-items:center;filter:drop-shadow(0 1px 1px #052014) drop-shadow(0 0 2px #052014e6)}
.social-icon-shadow .social__mask{filter:none;background:currentColor}
.radio.control-bubble .radio__icon{color:var(--pink-hot);filter:drop-shadow(0 1px 1px #052014) drop-shadow(0 0 2px #052014e6)}
.radio[data-level="0"] .radio__body{opacity:1}

/* Draw confirmation symbols with balanced bounds rather than font baselines. */
.confirmation-bubble>span{display:grid;place-items:center;width:100%;height:100%;line-height:0}
.confirmation-bubble svg{display:block;width:26px;height:26px;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 1px 1px #052014) drop-shadow(0 0 2px #052014e6)}
.confirmation-bubble[data-disconnect-choice="yes"]{color:#b6ff38}

#connect ~ .disconnect-confirm [data-disconnect-choice="yes"]{color:#b6ff38}
#connect ~ .disconnect-confirm [data-disconnect-choice="no"]{color:var(--pink-hot)}

/* The header stays in place while the project scene changes underneath it. */
.is-bubble-transitioning .topbar{z-index:1001}
.is-bubble-transitioning .wordmark{visibility:visible}
.is-bubble-transitioning :is(.ape,.balloons,.corner){visibility:hidden;pointer-events:none}

/* Transparent illustrated objects are the controls, with no painted hit areas. */

/* Fit the entire frame and its controls inside the available viewport. */

/* Prop placement is relative to each full frame, never the viewport. */

/* Exploration never advertises a hidden object with a hand cursor. */

/* Keep balloon artwork separate from editable dialogue text and actions. */

/* Loose coins sit on the existing payout shelf; no separate container. */

/* Hotel props are painted into their supporting surfaces, including shadows. */

/* The phone photo is inspectable; conversations stay with the chosen ape. */

/* Alternate poses retain the same canvas and table registration. */

/* Full-canvas transparent artwork: one origin, one scale, no per-prop offsets. */

/* Keep Hugo's standing face clear in the open-box composition. */

/* Inked vibration marks read even with sound off or reduced motion enabled. */

/* Location cards are brief establishing captions, never persistent overlays. */

/* A quiet unread-message hint replaces the ringing after three cycles. */

/* Separate discoveries: objects remain on their supporting surfaces. */

/* Align controls with the final row of cabinets and the sofa seat. */

/* A fixed lower-leg camera lets the cloth fall before the reaction cut. */

/* The full rear cloth stays intact. This separate masked image contains only legs and feet. */

/* The feet and shadows advance along the carpet, without lifting the whole group. */

/* Progress is a click on the artwork, not an overlaid direction arrow. */

/* One transparent balloon asset keeps every line editable and the art unobscured. */

/* Sound uses the same pop bubbles as disconnect, anchored at the sound corner. */
.sound-menu{position:fixed;right:clamp(1rem,3.5vw,2.6rem);z-index:90;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - 24px)}
.sound-menu[hidden]{display:none}
.sound-menu .sound-choice{font-size:17px;position:relative}
.sound-menu .sound-choice>span{line-height:1}
.sound-menu .sound-choice:last-child{font-size:32px}
.sound-menu .sound-choice.is-selected{border:2px solid #b6ff38;color:#b6ff38}
.sound-status{position:fixed;right:18px;top:110px;z-index:91;max-width:min(320px,90vw);color:#fff;background:#18382deb;border-radius:12px;padding:12px;font:14px "Space Grotesk",sans-serif}
.sound-status:empty{display:none}

/* Admin and profile details are ordinary scrollable pages in the shared scene. */
.has-detail-page .account-scene{inset:clamp(125px,23vh,215px) 0 0;padding:16px 24px 40px;overflow:auto;display:block}
.has-detail-page #account-content{width:min(800px,100%);margin:0 auto}
.has-detail-page .admin-card,.detail-card{padding:clamp(20px,4vw,40px);background:#fffef1;color:#172019;border:1px solid #c6e28c;border-radius:24px;text-align:left}
.has-detail-page .admin-card h1{font-size:clamp(1.5rem,4vw,2.4rem);margin:0 0 20px;color:var(--pink-hot)}
.has-detail-page .admin-card .admin-log{max-height:none}
.has-detail-page .admin-card .admin-history .admin-log li{display:block;font-size:.85rem}
.detail-card>.profile-credit-help{width:100%;max-width:none;box-sizing:border-box}
.admin-menu{position:fixed;right:clamp(1rem,3.5vw,2.6rem);z-index:90;display:flex;gap:18px;padding-bottom:26px;max-width:calc(100vw - 24px)}
.admin-menu[hidden]{display:none}
.admin-choice{position:relative;text-decoration:none}
.admin-choice small{position:absolute;top:calc(100% + 7px);color:#f5ffd5;text-shadow:0 2px 3px #10251c;font:700 11px "Space Grotesk",sans-serif}
.wallet-status{position:fixed;bottom:90px;left:20px;z-index:30;max-width:min(340px,calc(100vw - 40px));padding:12px;border-radius:12px;background:#19392eee;color:#fff;font-size:14px}
.slot-credit-notice{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1100;width:min(540px,calc(100% - 120px));display:flex;gap:12px;align-items:center;background:#19392ef5;border:1px solid #b6ff38;border-radius:12px;color:#efffd8;padding:10px 14px;font-size:14px}
.slot-credit-notice[hidden],.wallet-status[hidden]{display:none}
.slot-credit-notice p{margin:0;overflow-wrap:anywhere;max-height:20vh;overflow:auto}
.slot-credit-notice p>strong{display:block;font-weight:700}
.slot-credit-notice p>span{display:block;margin-top:3px}
.slot-credit-notice button{margin-left:auto;border:0;background:none;color:#ff309a;font-size:26px;cursor:pointer}
@media(max-width:600px){.has-detail-page .account-scene{inset:115px 0 0;padding:12px 12px 30px}.admin-menu{gap:14px}.slot-credit-notice{width:calc(100% - 48px)}}

.detail-card:has(.profile-credit-help){background:linear-gradient(135deg,#233927,#06170f);color:#eef7d7;border-color:#72963f}

body:is(.has-admin-menu,.has-sound-menu) .topbar__actions .control-bubble{animation:none}
.topbar__actions .control-bubble{transition:transform .46s cubic-bezier(.22,1.4,.4,1)}
.admin-menu{flex-wrap:wrap;row-gap:34px;justify-content:flex-end}
@media(prefers-reduced-motion:reduce){.topbar__actions .control-bubble{transition:none}}

.sound-menu .sound-choice svg{stroke-width:1.8;width:27px;height:27px}
.sound-menu .sound-speaker{fill:currentColor;stroke-width:1.2}

/* Each menu bubble drifts on its own clock while its layout slot keeps order. */
.sound-menu,.admin-menu{gap:18px;row-gap:34px;padding-top:10px;padding-bottom:26px}
:is(.sound-choice,.admin-choice){animation:disconnect-bubble-pop .28s cubic-bezier(.2,1.35,.4,1) both,menu-bubble-drift 6.8s ease-in-out infinite;animation-delay:0s,-1.2s}
:is(.sound-choice,.admin-choice):nth-child(2){animation-duration:.28s,7.7s;animation-delay:0s,-3.8s}
:is(.sound-choice,.admin-choice):nth-child(3){animation-duration:.28s,6.1s;animation-delay:0s,-2.4s}
:is(.sound-choice,.admin-choice):nth-child(4){animation-duration:.28s,8.3s;animation-delay:0s,-5.1s}
:is(.sound-choice,.admin-choice):nth-child(5){animation-duration:.28s,7.2s;animation-delay:0s,-.6s}
@keyframes menu-bubble-drift{0%,100%{translate:0 0}25%{translate:4px -8px}55%{translate:-3px 7px}80%{translate:-4px -3px}}
@media(prefers-reduced-motion:reduce){:is(.sound-choice,.admin-choice){animation:none}}

/* Admin content sits on the scene, without a panel or form-card backdrop. */
.has-detail-page .admin-card,.project-page>.admin-card{background:none;border:0;border-radius:0;box-shadow:none;padding:20px 0;color:#f3ffe2}
.admin-card .admin-pane,.admin-card .admin-form--compact{background:none;border:0!important;border-radius:0;box-shadow:none;padding:0;margin:20px 0!important}
.admin-card h1,.admin-card h2{text-shadow:0 2px 3px #14291c}
.admin-card .admin-form label,.admin-card #admin-status,.admin-card #access-status{color:#f2ffe1;text-shadow:0 1px 3px #14291c}
.admin-card :is(input,textarea,.admin-select-trigger){background:#10291ee8!important;color:#f2ffe1!important;border-color:#b6d991!important;text-shadow:none}
.admin-card input::placeholder,.admin-card textarea::placeholder{color:#b9c8b3}
.admin-card .admin-log li{background:#16342580;border:0;border-bottom:1px solid #dbf3b65c;border-radius:0;color:#f2ffe1}
.admin-card .admin-log code,.admin-card .admin-log p,.admin-card .admin-log small{color:#f2ffe1}
.admin-card .admin-access-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:16px 0}
.admin-access-row>code{grid-column:1/-1}
.admin-access-name{display:flex;gap:12px;align-items:end;min-width:0}
.admin-access-name label{display:grid;gap:6px;flex:1;min-width:0;font-size:12px}
.admin-access-name input{width:100%;min-width:0;padding:9px;border:1px solid;border-radius:8px;font:inherit}
.admin-access-name button{white-space:nowrap}
.admin-access-row>button{align-self:end}
.admin-choice .admin-orbit{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;overflow:visible;pointer-events:none;fill:#ff8acb;stroke:none;filter:drop-shadow(0 1px 2px #071e18);font:700 13px "Space Grotesk",sans-serif;letter-spacing:1.6px;animation:disconnect-orbit-turn 12s linear infinite}
.admin-menu{gap:32px;row-gap:40px;padding:14px 10px 22px}
.admin-choice:nth-child(2) .admin-orbit{animation-delay:-4s}.admin-choice:nth-child(3) .admin-orbit{animation-delay:-8s}
@media(prefers-reduced-motion:reduce){.admin-choice .admin-orbit{animation:none}}
@media(max-width:420px){.admin-access-row{grid-template-columns:1fr!important}.admin-access-row>button{justify-self:start}}

.admin-card progress{display:block;width:100%;height:22px;margin:12px 0;accent-color:#ff2294}
.admin-card [data-admin-sale]{margin-bottom:28px}
.sale-terms{padding:16px 0;border-top:1px solid #b6d991;border-bottom:1px solid #b6d991}
[data-credit-sale] button{margin:8px 8px 8px 0}

.admin-card [data-contract-status],.admin-card [data-sale-status]{color:#f2ffe1;text-align:left;text-shadow:0 1px 2px #10291e}
.admin-card select{background:#10291ee8!important;color:#f2ffe1!important;border:2px solid #b6d991!important;border-radius:8px;padding:9px;font:inherit;max-width:100%}
.admin-card [data-credit-sale] p{color:#f2ffe1;text-align:left;max-width:none;margin:14px 0;text-shadow:0 1px 2px #10291e}
.admin-card [data-credit-sale]>label{display:grid;gap:8px;color:#f2ffe1}
.admin-card [data-credit-sale] .admin-toggle{display:flex;gap:10px}

/* The new wide hotel master keeps the phone and wallet registered to the art. */

/* Live message rows follow the perspective of the held phone display. */

/* Reuse the original sharp room plate around the changing character area. */

/* A collected wallet removes its artwork as well as its hit target. */

/* Room exploration follows the actual two openings on the left wall. */

/* October 1 route art: interaction centers follow the painted brass controls. */

/* A large standalone phone keeps messages and photographs readable. */

.wordmark img{transition:width .55s ease,max-height .55s ease}

@media(prefers-reduced-motion:reduce){.wordmark img{transition:none}}

/* Keep the original room pixels; replace only the exposed thigh material. */

/* Lift conversation sits above the faces, with its tail aimed at Nastradamus. */

/* One registered empty-box master prevents prop changes between open states. */

/* Keep deployment selectors independent from the height of their settings. */
#contracts-form { align-items: start; }
#contracts-form > label { align-self: start; }
#contracts-form select { height: auto; min-height: 2.6rem; }
#contracts-form > fieldset { grid-column: 1 / -1; min-width: 0; margin: .5rem 0 0; padding: 1rem; border: 1px solid #a6c880; border-radius: .65rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem 1rem; }
#contracts-form > fieldset[hidden] { display: none; }
#contracts-form legend { color: #f2ffe1; padding: 0 .4rem; font-weight: 700; }
#contracts-form .admin-note { grid-column: 1 / -1; color: #e0edce !important; line-height: 1.6; margin: .25rem 0 0; font-size: .8rem !important; }
#contracts-form > .admin-toggle { grid-column: 1 / -1; }
@media(max-width:520px) { #contracts-form > fieldset { grid-template-columns: 1fr; padding: .8rem; } }

:is(#contracts-form,#mint-link-form) .contract-dropdown { position: relative; display: grid; gap: .2rem; min-width: 0; }
:is(#contracts-form,#mint-link-form) .contract-dropdown > span { color: #f2ffe1; font-size: .7rem; font-weight: 700; text-shadow: 0 1px 3px #14291c; }
:is(#contracts-form,#mint-link-form) .contract-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 2.6rem; padding: .55rem .7rem; border: 2px solid #a6c880; border-radius: .5rem; background: #173323; color: #f2ffe1; font: inherit; font-size: .8rem; text-align: left; }
:is(#contracts-form,#mint-link-form) .contract-dropdown-trigger::after { content: "⌄"; color: #ef3294; font-size: 1.2rem; }
:is(#contracts-form,#mint-link-form) .contract-dropdown-options { position: absolute; top: calc(100% + .3rem); left: 0; right: 0; z-index: 30; padding: .3rem; border: 2px solid #a6c880; border-radius: .6rem; background: #10291b; box-shadow: 0 8px 24px #0008; }
:is(#contracts-form,#mint-link-form) .contract-dropdown-options[hidden] { display: none; }
:is(#contracts-form,#mint-link-form) .contract-dropdown-options button { display: block; width: 100%; padding: .65rem .7rem; border: 0; border-radius: .35rem; background: transparent; color: #f2ffe1; font: inherit; font-size: .8rem; text-align: left; }
:is(#contracts-form,#mint-link-form) .contract-dropdown-options button[aria-selected="true"] { color: #c9ff83; background: #274b2c; }
:is(#contracts-form,#mint-link-form) .contract-dropdown-options button:hover, :is(#contracts-form,#mint-link-form) .contract-dropdown-options button:focus-visible { background: #4b1740; outline: 2px solid #ef3294; }
:is(#contracts-form,#mint-link-form) .contract-dropdown-trigger:focus-visible { outline: 2px solid #ef3294; outline-offset: 3px; }

[data-mint-link-current] { color: #c9ff83 !important; overflow-wrap: anywhere; font-weight: 700; }
[data-mint-link-status] { color: #f2ffe1 !important; font-size: .8rem; }
#mint-link-form > fieldset { grid-column: 1 / -1; min-width: 0; border: 1px solid #a6c880; border-radius: .65rem; padding: .8rem; color: #f2ffe1; }
#mint-link-form .mint-target-option { display: flex; align-items: flex-start; gap: .6rem; margin: .7rem 0; overflow-wrap: anywhere; }
#mint-link-form .mint-target-option input { width: auto; flex: none; margin: .15rem 0 0; accent-color: #ef3294; }
#mint-link-form > .admin-toggle, #mint-link-form > .admin-note { grid-column: 1 / -1; }
#mint-link-form .admin-note { color: #e0edce !important; line-height: 1.6; }
[data-mint-link-panel][hidden] { display: none; }

#grant-form #admin-status { grid-column: 1 / -1; margin: .25rem 0 0; max-width: none; text-align: left; overflow-wrap: anywhere; }

[data-collection-address], [data-collection-owner], [data-collection-links], [data-collection-signer], [data-collection-supply], [data-royalty-current] { overflow-wrap: anywhere; }
[data-collection-panel] .admin-note, [data-collection-status] { color: #e0edce !important; font-size: .8rem !important; line-height: 1.6; }
[data-collection-links] p { max-width: none; text-align: left; font-size: .8rem; }
[data-collection-address], [data-collection-owner], [data-collection-signer], [data-collection-supply], [data-royalty-current] { color: #f2ffe1 !important; text-align: left; max-width: none !important; }
[data-collection-links] a { color: #c9ff83 !important; }

/* Contract administration: readable panels and progressive disclosure. */
.admin-card:has(#contracts-form){width:min(960px,100%);box-sizing:border-box;text-align:left;font-size:1rem;line-height:1.55}
.admin-card:has(#contracts-form) p{max-width:none!important;text-align:left!important;margin:.65rem 0!important;color:#e5f1dc;font-size:.92rem!important;line-height:1.65;overflow-wrap:anywhere}
.admin-card:has(#contracts-form) h1{margin:0 0 .5rem;color:var(--pink-hot,#ff2294)}
.admin-card:has(#contracts-form) h2{font-size:1.2rem;margin:0 0 1rem;color:#f2ffe1}
.admin-card:has(#contracts-form) :is([data-mint-link-panel],[data-collection-panel],.contracts-deployments){background:#10291ee8;border:1px solid #a6c88070;border-radius:16px;padding:clamp(16px,3vw,28px);margin:24px 0;box-shadow:0 5px 20px #071b1730}
.admin-card:has(#contracts-form) .contracts-feedback{background:#10291ee8;border-left:4px solid #ef3294;border-radius:8px;padding:12px 16px;margin:16px 0!important;color:#f2ffe1!important}
.admin-card:has(#contracts-form) :is([data-mint-link-status],[data-collection-status]):empty{display:none}
.admin-card:has(#contracts-form) .admin-form--compact{margin:16px 0!important;gap:16px}
.admin-card:has(#contracts-form) .admin-form label{font-size:.9rem;line-height:1.5}
.admin-card:has(#contracts-form) :is(input,textarea,select){font-size:.95rem;padding:10px 12px;min-height:44px}
.admin-card:has(#contracts-form) button{font-size:.9rem;min-height:44px;padding:10px 16px}
.admin-card:has(#contracts-form) .admin-note{font-size:.85rem!important;color:#c9dac2!important;grid-column:1/-1;max-width:none!important}
.admin-card:has(#contracts-form) :is(#contracts-form,#mint-link-form)>fieldset{padding:16px;border-color:#a6c88065;background:#071c1540;margin:0;gap:16px}
.admin-card:has(#contracts-form) legend{font-size:.95rem}
.admin-card:has(#contracts-form) :is(#contracts-form,#mint-link-form) .contract-dropdown>span{font-size:.9rem}
.admin-card:has(#contracts-form) :is(#contracts-form,#mint-link-form) .contract-dropdown-trigger{font-size:.95rem;min-height:44px}
.admin-card:has(#contracts-form) .contracts-group{border:1px solid #a6c88055;border-radius:12px;background:#0a201ac4;margin:16px 0;overflow:visible}
.admin-card:has(#contracts-form) .contracts-group>summary{cursor:pointer;padding:16px;font-weight:700;color:#f2ffe1;font-size:1rem;list-style-position:inside}
.admin-card:has(#contracts-form) .contracts-group>summary:focus-visible{outline:2px solid #ef3294;outline-offset:3px}
.admin-card:has(#contracts-form) .contracts-group[open]>summary{border-bottom:1px solid #a6c88040}
.admin-card:has(#contracts-form) .contracts-group-body{padding:4px 16px 16px}
.admin-card:has(#contracts-form) .contracts-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin-bottom:16px}
.admin-card:has(#contracts-form) .contracts-facts p{background:#071c1560;padding:12px;border-radius:8px;margin:0!important;font-size:.85rem!important}
.admin-card:has(#contracts-form) [data-contract-list]{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.admin-card:has(#contracts-form) [data-contract-list] li{background:#071c1550;border:1px solid #a6c88040;border-radius:10px;padding:14px;overflow-wrap:anywhere}
.admin-card:has(#contracts-form) a{color:#c9ff83!important;line-height:1.65;overflow-wrap:anywhere}
.admin-card:has(#contracts-form) .admin-toggle{display:flex;align-items:flex-start;gap:10px}
.admin-card:has(#contracts-form) .admin-toggle input,.admin-card:has(#contracts-form) .mint-target-option input{width:20px;height:20px;min-height:0;padding:0;margin-top:3px;flex:none}
.admin-card:has(#contracts-form) .mint-target-option{padding:12px;border-radius:8px;background:#071c1540;margin:8px 0!important;font-size:.9rem;line-height:1.65}
@media(max-width:600px){.admin-card:has(#contracts-form) .contracts-facts,.admin-card:has(#contracts-form) .admin-form--compact,.admin-card:has(#contracts-form) #contracts-form>fieldset{grid-template-columns:1fr}.admin-card:has(#contracts-form) .admin-form--compact>*{grid-column:1}.admin-card:has(#contracts-form) button{max-width:100%;white-space:normal}}

/* Admin wallet identity and direct credit-balance editor. */
.admin-card .admin-access-row{grid-template-columns:minmax(0,1fr) minmax(240px,.6fr) auto;gap:12px 18px;padding:18px}
.admin-access-row>code,.admin-access-identity{grid-column:1/-1;overflow-wrap:anywhere}
.admin-access-identity{margin:0;color:#efffdc;font-size:14px;line-height:1.5}
.admin-access-balance{display:flex;gap:12px;align-items:end;min-width:0}
.admin-access-balance label{flex:1;min-width:0;font-size:12px}
.admin-access-balance input{width:100%;min-width:0;padding:9px;border:1px solid;border-radius:8px;font:inherit}
.admin-access-balance button{white-space:nowrap}
@media(max-width:760px){.admin-card .admin-access-row{grid-template-columns:1fr!important}.admin-access-name,.admin-access-balance{grid-column:1}.admin-access-row>button{justify-self:start}}
.credit-page .admin-card[data-admin-page="access"]{width:min(100%,1000px);max-width:1000px;text-align:left}
.admin-card .admin-access-list{max-height:none;overflow:visible;text-align:left}
.admin-card .admin-access-row>code{font-size:14px;line-height:1.5}
.admin-card .admin-access-identity{margin:0;max-width:none;text-align:left}

/* Credit sale guidance must stay readable over the illustrated background. */
.admin-card[data-admin-page="price"] #panel-price{background:#10291ef2!important;border:1px solid #a6c88070!important;border-radius:16px;padding:clamp(18px,3vw,28px)!important;margin:24px 0;text-align:left}
.admin-card[data-admin-page="price"] #panel-price p{color:#efffdc!important;text-align:left!important;max-width:none!important;margin:12px 0!important;font-size:.95rem!important;line-height:1.65}
.admin-card[data-admin-page="price"] #price-form>a{grid-column:1/-1;justify-self:start;color:#c9ff83!important;font-size:1rem;line-height:1.6;text-decoration:underline;text-underline-offset:4px}
.admin-card[data-admin-page="price"] #price-form>a:focus-visible{outline:2px solid #ff63b0;outline-offset:5px;border-radius:3px}

/* Compact active reward selector. */
.admin-card:has(#contracts-form) [data-mint-link-panel] h2{margin:0 0 12px}
.admin-card:has(#contracts-form) #mint-link-form{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin:0}
#mint-link-form .reward-contract-choice{flex:1 1 260px;min-width:0}
#mint-link-form .reward-contract-choice label{display:block;font-size:.8rem;margin-bottom:6px}
#mint-link-form select{width:100%;min-height:44px;padding:10px 12px;color:#f2ffe1;background:#10291e;border:1px solid #a6c88070;border-radius:8px;font:inherit;font-size:.85rem}
#mint-link-form select option{background:#10291e;color:#f2ffe1}
#mint-link-form>button{min-height:44px;padding:10px 20px;margin:0}
#mint-link-form>[data-mint-link-mainnet]{flex-basis:100%;order:2}
[data-mint-link-status]{margin:8px 0 0}

.contracts-section-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:16px}
.contracts-section-heading h2{margin:0}
.contract-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.contract-actions button{margin-top:0!important;padding:8px 16px;font-size:.85rem}
.contracts-deployments [data-collection-panel]{margin:16px 0 0!important}
[data-deployment-panel][hidden],[data-collection-panel][hidden],[data-sale-edit][hidden]{display:none!important}

.admin-card:has(#contracts-form) #mint-link-form{display:flex!important;align-items:flex-end;flex-wrap:wrap;gap:12px}
.admin-card:has(#contracts-form) #mint-link-form .reward-contract-choice{flex:1 1 260px;max-width:none}
.admin-card:has(#contracts-form) #mint-link-form>button[type=submit]{flex:0 0 auto;width:auto;margin:0 0 0 auto}
.admin-card:has(#contracts-form) .contract-actions{display:flex;flex-wrap:wrap;gap:12px}

.contracts-feedback:has([data-contract-status]:empty) [data-contract-status]{display:none}
#mint-link-form .contract-dropdown{width:100%;min-width:0}
#mint-link-form .contract-dropdown-trigger{width:100%;min-height:44px}
#mint-link-form .contract-dropdown-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.contracts-feedback:has([data-contract-status]:empty):not(:has([data-contract-retry]:not([hidden]))){display:none}

.contract-confirmation{max-width:min(520px,calc(100vw - 32px));border:2px solid #a6c880;border-radius:16px;background:#10291e;color:#f2ffe1;padding:24px;box-shadow:0 12px 40px #0009}
.contract-confirmation::backdrop{background:#00150ccc}
.contract-confirmation h2{margin:0 0 12px}
.contract-confirmation p{overflow-wrap:anywhere}
.contract-confirmation .contract-actions{justify-content:flex-end}

:is(#contracts-form,#mint-link-form) .contract-dropdown-trigger::after{content:"";display:block;flex:none;width:9px;height:9px;border-right:2px solid #ef3294;border-bottom:2px solid #ef3294;transform:rotate(45deg);margin:-5px 3px 0 14px}
:is(#contracts-form,#mint-link-form) .contract-dropdown-trigger[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:5px}

/* Live profile: three bubbles and a responsive collection directory. */
.has-profile-page .account-scene{inset:clamp(130px,23vh,200px) 0 0;padding:18px 24px 110px;overflow:auto;display:block}
.has-profile-page #account-content{width:min(960px,100%);margin:0 auto}
.card.profile-arcade.profile-dashboard,#account-content>.card.profile-dashboard{max-width:960px;aspect-ratio:auto;transform:none;padding:0;container-type:normal}
.profile-dashboard-heading{margin:0 0 24px}
.profile-dashboard-heading>p,.profile-section-heading>div>p{margin:0 0 6px;color:#d6ecbf;font:700 11px/1.4 "Space Grotesk",sans-serif;letter-spacing:.15em}
.card.profile-arcade.profile-dashboard h1{position:static;inset:auto;height:auto;margin:0!important;text-align:left;color:#ff299e!important;font:clamp(32px,5vw,46px)/1.15 "Archivo Black",sans-serif!important;white-space:normal;overflow:visible;text-shadow:0 3px #213223}
.profile-bubbles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:38px}
.profile-dashboard .profile-bubble{position:relative;aspect-ratio:1;border-radius:50%;padding:26px 22px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-width:0;background:radial-gradient(ellipse at 28% 15%,#89ad7540,transparent 42%),radial-gradient(ellipse at 60% 90%,#6dab4930,transparent 65%),#102e23e8;border:1px solid #b3db775c;box-shadow:inset 2px 3px 4px #e5ffc92b,inset -4px -7px 12px #041f1dcc,0 12px 25px #10231d45;color:#f4f5df}
.profile-dashboard .profile-bubble:before{content:"";position:absolute;top:9%;left:21%;width:35%;height:10%;border-radius:50%;background:linear-gradient(#d8ffac3d,transparent);transform:rotate(-25deg);pointer-events:none}
.profile-dashboard h2{font:700 21px/1.2 "Space Grotesk",sans-serif;color:#e7ffac;margin:0}
.profile-dashboard .profile-portrait{position:relative;inset:auto;width:clamp(62px,8vw,100px);aspect-ratio:1}
.profile-dashboard .profile-avatar-frame{position:absolute;inset:0;transform:none;width:100%;aspect-ratio:1;border-radius:24%;border:2px solid #adc969;box-shadow:0 4px 12px #03191066;background:var(--monkee-background,#295e45);overflow:hidden}
.profile-dashboard .profile-avatar-frame img{width:100%;height:100%;object-fit:cover}
.profile-name-row{display:flex;align-items:center;justify-content:center;gap:8px;max-width:100%;font:700 18px/1.3 "Space Grotesk",sans-serif}
.profile-name-row>[data-profile-name]{overflow:hidden;white-space:nowrap;min-width:0}
.profile-dashboard .profile-edit-name{position:static;transform:none;width:28px;height:28px;border:1px solid #ed60a1;border-radius:50%;background:#451b34;color:#ffadd3;font:18px/1 sans-serif;flex:none}
.profile-dashboard .profile-wallet-art{font:50px/1 sans-serif;color:#c9e491;text-shadow:0 2px #142d20}
.profile-dashboard [data-profile-wallet]{font:600 16px/1.4 "Space Grotesk",sans-serif;user-select:text;color:#f4f5df}
.profile-dashboard .profile-bubble>small{color:#b7cbb2;font-size:12px}
.profile-dashboard .profile-wallets-toggle{position:static;transform:none;margin:0;padding:7px 12px;border:1px solid #c06396;border-radius:20px;color:#ffb9d9;background:#421d35;font:700 10px/1.2 "Space Grotesk",sans-serif}
.profile-dashboard .profile-coin{width:38px;height:43px;margin:0}
.profile-dashboard .profile-balance-value{position:static;width:100%;height:auto;padding:0;overflow:visible}
.profile-dashboard .profile-balance-value strong{max-width:100%;font:700 clamp(28px,4vw,42px)/1 "Space Grotesk",sans-serif;color:#dcff80}
.profile-dashboard .profile-get-more{position:static;inset:auto;padding:8px 16px;background:#dd258a;border:1px solid #ff83bc;border-radius:20px;color:#fff!important;font:700 11px/1.2 "Space Grotesk",sans-serif;box-shadow:0 2px #65123c}
.profile-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px}
.profile-dashboard .profile-section-heading h2{font-size:26px;color:#ff78bf}
.profile-bonus-total{display:grid;gap:4px;margin:0;text-align:right;flex:none}.profile-bonus-total strong{font-size:24px;color:#dfff8e}.profile-bonus-total span{font-size:11px;color:#c4d4ba}
.profile-collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.profile-holding{display:grid;grid-template-columns:76px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;gap:8px 16px;padding:18px;border:1px solid #96b97040;border-radius:20px;background:#102f24e8;box-shadow:inset 0 1px #d4edb81c;min-width:0}
.profile-holding.has-holdings{border-color:#b2df6973;background:linear-gradient(120deg,#294b2fe8,#102f24f2)}
.profile-collection-art{grid-row:1/3;width:76px;height:76px;display:grid;place-items:center;overflow:hidden;border-radius:17px;background:linear-gradient(135deg,hsl(var(--collection-hue) 25% 35%),hsl(var(--collection-hue) 30% 16%));border:1px solid #d8efad40}
.profile-collection-art>img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 2px 3px #0004)}.profile-collection-art.has-nft-art>img{width:100%;height:100%;object-fit:cover;filter:none}
.profile-collection-art>span{font:24px/1 "Archivo Black",sans-serif;color:#e4ecc7;text-shadow:0 3px #12271a55}
.profile-holding-title h3{margin:0 0 4px;color:#f5f7e5;font:700 16px/1.2 "Space Grotesk",sans-serif}.profile-holding-title>small{color:#a9c6a8;font-size:10px}
.profile-holding-count{display:grid;justify-items:center;gap:2px}.profile-holding-count strong{font:700 26px/1 "Space Grotesk",sans-serif;color:#ff79bd}.profile-holding-count>span{font-size:9px;color:#bbceb3}
.profile-dashboard .profile-reward{grid-column:2/4;display:block;min-height:0;width:auto;text-align:left;margin:0;padding:0;color:#d8ff8f;font:700 11px/1.4 "Space Grotesk",sans-serif}
.profile-delegated{grid-column:2/4;color:#a8c6ab;font-size:10px}.profile-delegated:empty{display:none}
.profile-bonus-note{font-size:11px;color:#c0d1b8;line-height:1.6;margin:18px 0 0}
.profile-dashboard>[data-credit-status]{position:static;inset:auto;margin:16px 0;color:#d0e6c4;font-size:12px;line-height:1.5;text-align:center}
.profile-dashboard .profile-load-error{position:static;inset:auto;padding:28px;border-radius:20px}.profile-dashboard .profile-load-error[hidden]{display:none}.profile-dashboard.has-profile-error>:not(.profile-load-error){display:none}.profile-dashboard .profile-load-error h2{font-size:22px}.profile-dashboard .profile-load-error p{font-size:14px}.profile-dashboard .profile-load-error button{font-size:12px;padding:12px 20px}.profile-dashboard .profile-load-error>span{font-size:42px}
.profile-dashboard.is-profile-loading :is([data-profile-name],[data-profile-wallet],[data-profile-nft],[data-profile-reward],[data-profile-credits]){width:auto;height:auto;min-height:18px;margin:0}
@media(max-width:680px){.has-profile-page .account-scene{inset:135px 0 0;padding:18px 16px 100px}.profile-bubbles{gap:10px}.profile-dashboard .profile-bubble{padding:22px 10px;gap:7px}.profile-dashboard .profile-bubble h2{font-size:16px}.profile-dashboard .profile-portrait{width:62px}.profile-name-row{font-size:13px;gap:4px}.profile-dashboard [data-profile-wallet]{font-size:11px}.profile-dashboard .profile-wallet-art{font-size:37px}.profile-dashboard .profile-bubble>small{font-size:10px}.profile-dashboard .profile-edit-name{width:22px;height:22px;font-size:14px}.profile-holding{gap:8px 12px;padding:14px;grid-template-columns:58px minmax(0,1fr) auto}.profile-collection-art{width:58px;height:58px}.profile-holding-title h3{font-size:14px}}
@media(max-width:500px){.profile-bubbles{grid-template-columns:1fr;justify-items:center;gap:20px}.profile-dashboard .profile-bubble{width:min(270px,100%);padding:30px;gap:12px}.profile-dashboard .profile-bubble h2{font-size:22px}.profile-dashboard .profile-portrait{width:90px}.profile-name-row{font-size:18px}.profile-dashboard [data-profile-wallet]{font-size:17px}.profile-dashboard .profile-bubble>small{font-size:12px}.profile-dashboard .profile-wallet-art{font-size:52px}.profile-dashboard .profile-balance-value strong{font-size:40px}.profile-dashboard .profile-edit-name{width:28px;height:28px}.profile-collection-grid{grid-template-columns:1fr}.profile-dashboard .profile-section-heading h2{font-size:21px}.profile-section-heading{gap:10px}.profile-bonus-total strong{font-size:21px}.profile-bonus-total span{font-size:9px}}

/* The Profile entry expands into the same floating navigation as the home menu. */
.profile-menu{position:absolute;inset:0;z-index:5;pointer-events:none}.profile-menu[hidden]{display:none}
.profile-menu .balloon,.profile-menu-close{pointer-events:auto}
.has-profile-menu .balloons{visibility:hidden;pointer-events:none}
.profile-menu .balloon{--bubble:clamp(112px,15vw,180px);--drop-y:0px!important}
.profile-menu .bubble__label{opacity:1;transform:translate(-50%,-50%);padding-bottom:9%}.profile-menu .bubble__writing{font-size:clamp(15px,2vw,24px)}
.profile-menu .bubble__art{display:grid;place-items:center}.profile-menu .bubble__art img{width:100%;height:100%;object-fit:cover}
.profile-menu-symbol{font:70px/1 sans-serif;color:#daffa5;text-shadow:0 4px #213b26}.profile-menu-credits{font:700 clamp(24px,4vw,40px)/1 "Space Grotesk",sans-serif;color:#dbff91;text-shadow:0 3px #152b21}
.profile-menu-close{position:absolute;left:var(--orbit-x);top:var(--orbit-y);transform:translate(-50%,-50%);width:48px;height:48px;font:32px/1 sans-serif;color:#ff70b6}
.profile-dashboard[data-profile-view] .profile-bubbles{grid-template-columns:1fr;justify-items:center;margin-bottom:28px}
.profile-dashboard[data-profile-view] .profile-bubble{display:none;width:min(300px,100%)}
.profile-dashboard[data-profile-view="info"] .profile-identity-bubble,.profile-dashboard[data-profile-view="credits"] .profile-credit-bubble,.profile-dashboard[data-profile-view="wallets-overview"] .profile-wallet-bubble{display:flex}
.profile-dashboard[data-profile-view="wallets-overview"] .profile-collection-section{display:none}
.profile-dashboard [data-profile-wallet-list]{list-style:none;margin:0;padding:0;font:12px/1.6 "Space Grotesk",sans-serif;max-width:100%;overflow-wrap:anywhere;color:#c9e2b7}.profile-dashboard:not([data-profile-view="wallets-overview"]) [data-profile-wallet-list]{display:none}
.profile-dashboard[data-profile-view="wallets-overview"] .profile-wallet-bubble{aspect-ratio:auto;min-height:300px;width:min(560px,100%);border-radius:32px;padding:32px}
.card.profile-dashboard .profile-bonus-note{max-width:none;margin:18px 0 0;color:#d6e9c9;font-size:12px}
@media(prefers-reduced-motion:reduce){.profile-menu .float,.profile-menu .breathe{animation:none}}
.profile-menu .balloon .bubble__label{display:flex;top:50%;left:50%;right:auto;width:100%;height:100%;max-width:none;align-items:flex-end;justify-content:center;padding:0 0 14%;transform:translate(-50%,-50%);opacity:1}
.profile-menu .balloon .bubble__writing{clip-path:none;animation:none;font-family:"Archivo Black",sans-serif;font-size:clamp(12px,1.4vw,18px);color:#f0ffd9;text-transform:uppercase;letter-spacing:.02em}

.profile-menu-close{z-index:50}

/* Two sizes, one glass material and the same physical hover envelope. */
:root{--bubble-large:clamp(104px,min(15vw,20vh),180px);--bubble-small:48px;--bubble-glass:radial-gradient(circle at 34% 24%,#f4ffce30,transparent 48%),#c8efb609;--bubble-glass-shadow:inset 2px 3px 5px #f5ffd78a,inset -3px -4px 8px #b5dd7760,0 5px 12px #122b2425}
.balloon{--bubble:var(--bubble-large)!important}
:is(.balloon,.bubble-transition__shell) .bubble,:is(.control-bubble,.social__link,.confirmation-bubble,#connect){border:1px solid #e9ffd17a;background:var(--bubble-glass);box-shadow:var(--bubble-glass-shadow);border-radius:50%;filter:none}
:is(.control-bubble,.social__link,.confirmation-bubble,#connect){width:var(--bubble-small);height:var(--bubble-small);min-width:0;min-height:0;padding:0;display:grid;place-items:center;flex:none}
.disconnect-question{width:var(--bubble-large);height:var(--bubble-large)}
.control-bubble.is-roaming{position:fixed;inset:auto;left:0;top:0;transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%) scale(var(--roam-scale,1));transition:none;z-index:50}
.control-bubble.is-roaming:is(:hover,:focus-visible){transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%) scale(calc(var(--roam-scale,1)*1.18))}
.profile-menu-close.is-roaming{z-index:60}
.balloon .float,.balloon .breathe{animation:none}
@media(prefers-reduced-motion:reduce){.control-bubble.is-roaming,.balloon.is-roaming{transition:none}}
:is(.control-bubble,.social__link,.confirmation-bubble,#connect)[hidden]{display:none!important}

/* Admin controls fan out around their anchored close bubble. */
.admin-menu{position:fixed;inset:0;max-width:none!important;display:block;padding:0;pointer-events:none}
.admin-menu[hidden]{display:none}
.admin-menu .admin-choice{position:fixed;pointer-events:auto;transform:translate(-50%,-50%);animation:none}
.admin-menu .admin-choice.is-roaming{transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%) scale(var(--roam-scale,1))}
.has-admin-menu #radio{display:none!important}

.admin-menu .admin-choice{transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%)}

.sound-menu{position:fixed;inset:0;display:block;max-width:none!important;padding:0;pointer-events:none}
.sound-menu[hidden]{display:none}.sound-menu .sound-choice{position:fixed;left:0;top:0;pointer-events:auto;animation:none;transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%)}
.sound-menu .sound-choice.is-roaming{transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%) scale(var(--roam-scale,1))}
.has-sound-menu [data-admin]{visibility:hidden!important}

:root{--bubble-large:clamp(84px,min(12vw,16vh),140px)}
.has-profile-menu .profile-menu .balloon .bubble{animation:profile-menu-appear .24s ease-out both}
@keyframes profile-menu-appear{from{opacity:0;scale:.3}to{opacity:1;scale:1}}
@media(prefers-reduced-motion:reduce){.has-profile-menu .profile-menu .balloon .bubble{animation:none}}
.profile-menu .profile-menu-credits{font-size:calc(var(--bubble-large)*.23)}
.profile-menu .profile-menu-symbol{font-size:calc(var(--bubble-large)*.42)}

@media(max-width:600px){.wordmark img{width:min(52vw,240px)}}
@media(max-width:600px){.wordmark{transform:translateX(-24px)}}

/* Focused account menus use the same glass and orbiting captions. */
body:is(.has-profile-menu,.has-admin-menu,.has-sound-menu) :is(.balloons,.social,#connect,#radio,[data-admin]){visibility:hidden!important;pointer-events:none!important}
.profile-menu{position:fixed;inset:0;z-index:45}
.profile-menu .account-choice{position:fixed;left:0;top:0;padding:0;border:0;background:none;color:#e8ffb6;transform:translate(var(--x),var(--y)) translate(-50%,-50%);pointer-events:auto;cursor:pointer}
.profile-menu .account-choice:not(button){cursor:default}
.profile-menu .account-choice .bubble{position:relative;display:block;width:var(--bubble);height:var(--bubble);overflow:hidden}
.profile-menu .account-choice .bubble__art{position:absolute;inset:12%;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.profile-menu .account-choice .bubble__art img{width:100%;height:100%;object-fit:contain}
.profile-menu .account-choice .profile-menu-value{position:absolute;inset:0;display:grid;place-items:center;padding:6%;font:700 clamp(13px,2vw,22px)/1.2 "Space Grotesk",sans-serif;text-shadow:0 2px 4px #10291e,0 0 8px #10291e;text-align:center;overflow-wrap:anywhere}
.profile-menu .account-choice:has(.profile-menu-value) img{opacity:.5}
.profile-orbit{position:absolute;inset:-19%;width:138%;height:138%;overflow:visible;pointer-events:none;animation:account-orbit 22s linear infinite}
.profile-orbit text{fill:#ff91c5;font:700 7px "Space Grotesk",sans-serif;letter-spacing:1px}
@keyframes account-orbit{to{rotate:360deg}}
.profile-menu .rank-bubble{--bubble:var(--rank-size)!important}
.profile-menu .rank-bubble .bubble__art{inset:10%}
.profile-menu .rank-bubble .bubble__art img{object-fit:cover;border-radius:50%}
.profile-menu .confirmation-bubble.account-choice{width:48px;height:48px;border:1px solid #e9ffd17a;background:var(--bubble-glass);box-shadow:var(--bubble-glass-shadow);border-radius:50%}
.profile-menu .confirmation-bubble .account-choice-content{width:100%;height:100%}
.profile-menu .confirmation-bubble .profile-menu-value{font-size:26px}
.profile-menu .account-choice.is-roaming{transform:translate3d(var(--roam-x),var(--roam-y),0) translate(-50%,-50%) scale(var(--roam-scale,1))}
#menu-home{position:fixed!important;left:30px!important;top:30px!important;inset:auto;z-index:90;transform:none!important;color:#ff299e}
#menu-home>svg:first-child{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.has-profile-menu #account-back{display:none}
.bubble-menu-status{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);max-width:min(85vw,650px);padding:10px 18px;border-radius:20px;background:#10291ee8;color:#eaffc9;text-align:center;font:14px/1.5 "Space Grotesk",sans-serif;pointer-events:auto}
.bubble-name-form{position:fixed;left:50%;top:48%;transform:translate(-50%,-50%);width:min(300px,80vw);padding:28px;background:#10291ef2;border:1px solid #bce389;border-radius:28px;pointer-events:auto;display:grid;gap:16px;color:#eaffc9}
.bubble-name-form label{display:grid;gap:10px}.bubble-name-form input{min-width:0;width:100%;padding:12px;border:1px solid #bce389;border-radius:8px;background:#23432f;color:#fff;font:inherit}.bubble-name-form button{padding:10px;border:1px solid #ff91c5;border-radius:20px;background:#e42a8c;color:white;font:inherit}
@media(prefers-reduced-motion:reduce){.profile-orbit{animation:none}}

#menu-home{left:32px!important;top:40px!important}
.profile-orbit text{font-size:9px;letter-spacing:.6px}

.profile-menu.dense-bubbles .balloon{--bubble:72px!important}

.balloons .bubble__label{display:none!important}
body.has-account-page :is(.social,#connect,#radio,[data-admin]){visibility:hidden!important;pointer-events:none!important}

.has-account-page #account-back{left:auto!important;right:30px!important;top:165px!important}.has-account-page #account-back .control-orbit{display:none}
.profile-orbit{width:138%!important;height:138%!important;fill:none!important;stroke:none!important;stroke-width:0!important}.profile-orbit text{stroke:none!important;stroke-width:0!important}

/* One caption per bubble: reveal on hover or keyboard focus, colour by size. */
:is(.balloon,.control-bubble,.social__link,.confirmation-bubble,#connect) svg[class$="-orbit"]{display:block!important;opacity:0!important;visibility:hidden;pointer-events:none}
:is(.balloon,.control-bubble,.social__link,.confirmation-bubble,#connect):is(:hover,:focus-visible) svg[class$="-orbit"],.balloon.is-labelled .project-orbit{opacity:1!important;visibility:visible}
svg[class$="-orbit"] text{fill:#ff8acb!important}
.balloon svg[class$="-orbit"] text{fill:#f5ffd5!important}

/* Keep Nastradamus present without crowding account navigation. */

/* Persistent rank badges and explicit identity editing affordances. */
.rank-number{position:absolute;right:13%;bottom:12%;color:#f5ffd5;font:700 clamp(9px,calc(var(--rank-size)*.13),14px)/1 "Space Grotesk",sans-serif;text-shadow:0 1px 3px #10291e,0 0 4px #10291e;pointer-events:none;z-index:2}
.profile-menu .account-choice .bubble__art.profile-name-frame{border-radius:0;overflow:visible}
.profile-name-art{display:grid;place-items:center;width:90%;gap:5px;color:#eaffce;transform:translateY(-3%)}
.profile-name-mark{font:700 calc(var(--bubble)*.22)/1 "Space Grotesk",sans-serif;color:#ff79b8}
.profile-name-field{display:block;width:100%;padding:5px 4px;border:1px solid #d5f1ae;border-radius:5px;background:#153427b8;box-sizing:border-box;font:600 min(13px,calc(var(--bubble)*.92/var(--name-length)))/1.2 "Space Grotesk",sans-serif;white-space:nowrap;text-align:left;box-shadow:inset 0 1px 3px #06170d80}
.profile-name-field:after{content:"";display:inline-block;height:1em;border-right:1px solid #ff79b8;vertical-align:-.1em}
.profile-edit-badge{position:absolute;right:15%;bottom:15%;width:25%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#173428;border:1px solid #ff9ac9;box-shadow:0 1px 4px #10291e;color:#ff79b8;z-index:2}
.profile-edit-badge svg{width:70%;height:70%;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* Pending artwork never leaves an empty interactive bubble on screen. */
:is(.balloon,.control-bubble,.social__link,.confirmation-bubble,#connect):not([data-bubble-ready]){opacity:0!important;pointer-events:none!important}
.has-profile-menu .profile-menu .balloon .bubble{animation:none}

/* Disconnect focuses the two explicit choices in the lower left. */
.confirming-disconnect :is(.balloon,.control-bubble,.social__link,#connect){visibility:hidden!important;pointer-events:none!important}
.confirming-disconnect .disconnect-confirm{z-index:100;left:24px!important;top:auto!important;bottom:36px!important}
.confirming-disconnect .disconnect-confirm .confirmation-bubble{position:fixed!important;left:0!important;top:0!important;visibility:visible!important}

/* Shared animated loading treatment, including the arcade and menu overlays. */
.app-loader{display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:15px 22px;border:1px solid #c8efb62b;border-radius:999px;background:#10291ee8;color:#eaffce;font:500 16px/1.3 "Space Grotesk",sans-serif;text-shadow:none;white-space:nowrap}
.app-loader__dots{display:inline-flex;align-items:center;gap:5px;height:20px}
.app-loader__dots i{display:block;width:10px;height:10px;border-radius:50%;border:1px solid #ecffd4b0;background:radial-gradient(circle at 30% 25%,#f5ffe5a0,#92be6f55 65%);box-shadow:inset 1px 1px 2px #edffcb80;animation:app-loading-bubble 1.15s ease-in-out infinite}
.app-loader__dots i:nth-child(2){animation-delay:.15s}.app-loader__dots i:nth-child(3){animation-delay:.3s}
@keyframes app-loading-bubble{0%,70%,100%{transform:translateY(2px) scale(.8);opacity:.45}35%{transform:translateY(-4px) scale(1.12);opacity:1}}
.bubble-menu-status:has(.app-loader){padding:0;background:none}
.account-loading{display:flex;justify-content:center;padding:40px 0}
.slot-loading .app-loader{width:auto}
.boot__bar[hidden],.boot__pct[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){.app-loader__dots i{animation:none;opacity:1}}

.profile-menu .bonus-nft .profile-orbit{opacity:1!important;visibility:visible}

.sound-status[hidden]{display:none!important}
.sound-status:has(.app-loader){background:none;padding:0;border-radius:0}

/* SVG font units scale with the orbit: small controls need a larger base. */
.profile-orbit text{font-size:11px}
:is(.control-bubble,.confirmation-bubble) .profile-orbit text{font-size:20px}
:is(.control-orbit,.disconnect-orbit,.social-orbit,.sound-orbit,.admin-orbit) text{font-size:18px}
.project-orbit text{font-size:11px}

/* A small celebration for awarded credits, sized to its content. */
.slot-credit-notice{box-sizing:border-box;width:fit-content;min-width:250px;max-width:min(360px,calc(100% - 40px));padding:27px 34px 24px;display:block;text-align:center;border:2px solid #b6ff38;border-radius:24px;background:radial-gradient(ellipse at 50% 0,#426b36 0,transparent 65%),#173b2ff7;box-shadow:0 12px 60px #091d14aa,0 0 30px #b6ff3833;isolation:isolate;animation:credit-party-pop .5s cubic-bezier(.2,1.5,.4,1) both}
.slot-credit-notice p{max-height:55dvh;overflow:auto;position:relative;z-index:1}
.slot-credit-notice p>strong{font:400 clamp(48px,9vw,72px)/1.05 "Luckiest Guy",sans-serif;color:#eaffad;text-shadow:0 3px 0 #0e251a;margin:8px 0 0}
.slot-credit-notice .credit-party-heading{font:400 23px/1.2 "Luckiest Guy",sans-serif;color:#ff8fc4;letter-spacing:.04em}
.slot-credit-notice .credit-party-unit{font-size:15px;font-weight:700;color:#efffd8;margin:0 0 10px}
.slot-credit-notice p>span:not([class]){font-size:13px;line-height:1.45;margin-top:12px}
.slot-credit-notice button{position:absolute;right:10px;top:5px;padding:4px 8px;line-height:1;z-index:2}
.slot-credit-notice::before,.slot-credit-notice::after{content:"✦";position:absolute;pointer-events:none;color:#ff6cae;font-size:25px;left:14px;top:49%;text-shadow:20px -70px #b6ff38,190px -52px #ffce54,210px 24px #b6ff38;animation:credit-party-spark .8s ease-out both;z-index:0}
.slot-credit-notice::after{left:auto;right:15px;top:25%;font-size:16px;color:#ffce54;text-shadow:-205px 50px #ff8fc4,-25px 95px #b6ff38;animation-delay:.1s}
@keyframes credit-party-pop{from{opacity:0;transform:translate(-50%,-45%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes credit-party-spark{from{opacity:0;scale:.3;rotate:-35deg}to{opacity:1;scale:1;rotate:0deg}}
@media(prefers-reduced-motion:reduce){.slot-credit-notice,.slot-credit-notice::before,.slot-credit-notice::after{animation:none}}