@layer components{


 /* Trialing sky*/
/* Sky layers live behind everything */
#sky, #sky .layer {
  position: fixed; inset: 0; pointer-events: none;
}
#sky { z-index: -1; }

/* star dots */
.star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,255,255,.2) 60%, transparent 70%);
  opacity: var(--o, .5);
  filter: brightness(0.9);
  animation: twinkle var(--tw,6s) ease-in-out infinite;
}

.star:nth-child(3n) {filter: hue-rotate(15deg) saturate(1.2);}
.star:nth-child(5n+2) {filter: hue-rotate(-20deg) saturate(1.3);}

.star:nth-child(4n) {opacity: 0.4; transform:scale(0.8);}
.star:nth-child(6n+1) {opacity: 0.4; transform:scale(1.3);}


/* soft layer drift */
.layer.l1 { animation: drift1 180s linear infinite; }
.layer.l2 { animation: drift2 240s linear infinite; }
.layer.l3 { animation: drift3 300s linear infinite; }

@keyframes twinkle {
  0%,100% { transform: scale(1);   opacity: calc(var(--o,.7)*.9); }
  50%     { transform: scale(1.6); opacity: calc(var(--o,.7)*1.2); }
}
@keyframes drift1 { from{transform: translateY(0)}   to{transform: translateY(-60px)} }
@keyframes drift2 { from{transform: translateX(0)}   to{transform: translateX(50px)} }
@keyframes drift3 { from{transform: translate(0,0)}  to{transform: translate(-40px, 30px)} }

/* Shooting star (we spawn a .meteor element briefly) */
.meteor {
  position: absolute; width: 1.5px; height: 1.5px; background: white; border-radius: 50%;
  box-shadow: 0 0 10px 2px rgba(255,255,255,.9);
  transform: translate(-50%,-50%); transform-origin: left center;
  animation: shoot 1200ms cubic-bezier(.22,1,.36,1) forwards;
}
.meteor::after { content: ""; position: absolute; top: 50%; left: 50%; height: 2px; width: 100px; transform-origin: left center;
  transform: rotate(var(--a, -18deg)) translateY(-50%); background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0)
  );
  border-radius: 2px; opacity: 0.9;
}

@keyframes shoot {
  from { opacity:1; transform: translate(var(--x,0), var(--y,0)) rotate(var(--a,-18deg)); }
  to   { opacity:0; transform: translate(calc(var(--x,0) + var(--dx,600px)),
                                         calc(var(--y,0) + var(--dy,-220px)))
                                         rotate(var(--a,-18deg)); }
}

/*UFO CHICKEN MUAHAHA*/

.ufo-chicken-sprite{
  position: fixed;
  left: -20vw;
  top: 40vh;
  width: clamp(80px, 8vw, 120px);
  height: clamp(80px, 8vw, 120px);         /* square box for the sprite */
  background-image: var(--ufo);
  background-size: contain;                 /* no cropping */
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.35));
  animation: fly 15s linear forwards;
}
@keyframes fly {
  0%   { transform: translateX(0);     opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: translateX(120vw); opacity: 0; }
}

  
/* incubator layout*/
  #incubatorRoot {
    display: grid;
    place-items: center;
    min-height: 100svh;
    margin: 0;
    padding-block: 3.5rem /*space for chips and hint*/
  }

  /* Compact mode selector (centered at top) */
    .modebar {
    position: fixed;       /* fixed = independent of incubator */
    top: 12px;
    left: 50%;             /* center horizontally */
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.12);
    z-index: 10;
    }

    .mode-label {
    font: 600 12px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    opacity: 0.8;
    }

    /* Segmented buttons */
    .segbtn {
    font: 600 12px/1 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.08);
    color: #fff;
    cursor: pointer;
    transition: transform .08s ease, background .2s ease, border-color .2s ease;
    }

    .segbtn:hover { transform: translateY(-1px); }

    /* Make cooldown-badge show as a dot, regardless of inner text */
    .cooldown-badge{
    position: relative;
    display: inline-block;
    width: 10px;               /* dot size */
    height: 10px;
    margin-left: 8px;
    vertical-align: middle;

    /* hide any text the JS sets ("Ready", "12s", etc.) */
    font-size: 0;
    color: transparent;
    overflow: hidden;
    }

    /* green "ready" dot */
    .cooldown-badge::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #2ecc71;
    box-shadow: 0 0 6px #2ecc71aa;
    animation: pulse 2s infinite;
    }

  /* layout sheels (wrapper) */
  .incubator { display:grid; gap:2.9rem !important; justify-items:center; user-select:none;}
  .filters { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:center; margin-bottom: 1.25rem; }

  /* Chips / buttons share UI font via body */
  .chip{
    /* layout */
    padding: .45rem .8rem;
    border-radius: 999px;
    border: 1px solid var(--chip-border); /* was 0; border helps definition */
    display: inline-flex; align-items: center;
    gap: .35rem;

    /* behavior */
    cursor: pointer;
    transition: background .25s ease, color .25s ease, transform .12s ease;

    /*Adjustments for egg fact appear rotation thing*/
    /* Let the browser interpolate --tilt and --scale */
    @property --tilt { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
    @property --scale { syntax: '<number>'; inherits: true; initial-value: 1; }

    /* visuals (tokenized) */
    font-weight: 600;
    background: var(--chip-bg);         /* fallback was rgba(255,255,255,.15) */
    color: var(--chip-text);            /* fallback was #f5f5f5 */
    box-shadow: 0 0 8px rgba(0,0,0,.08);
    backdrop-filter: blur(var(--glass-blur));
  }

  /* Egg wrap/stage*/
  .egg-wrap.stage{
    height: 600px;
    position: relative;
    margin: .5rem auto 1.25rem;
    width: 200px;              /* if you’re also using height:640px elsewhere, pick one approach */
    cursor: pointer;
  }

  /*.egg-wrap > .ring,
  .egg-wrap > .egg {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%)
  }*/

   /* Hint for egg tapping */
    .hint {
    text-align: center; font-family: "Georgia", "Garamond", serif;
    font-style: italic; letter-spacing: 0.2px;
    color: #d8c46b; /* warm gold tone */
    text-shadow: 0 1px 0 rgba(0,0,0,.35);
    opacity: 0.9;
    font-size: 0.95rem;
    margin-top: 1rem; margin-bottom: 3rem;
    }

  /* Ring – base */
  .ring{
    position: absolute;
    inset: 0;
    margin: auto;
    width: 210px; height: 210px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    box-shadow: 0 0 0 0 currentColor;
    transition: opacity .35s ease, scale .35s ease, box-shadow .35s ease;
    will-change: opacity, scale, box-shadow;
    backface-visibility: hidden;
  }

    /* Egg – base */
  .egg{
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1.3;
    background: radial-gradient(circle at 50% 58%, #fff 0, #f6eddc 60%, #e8dcc6 100%);
    border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
    box-shadow: inset 0 -12px 24px rgba(0,0,0,.08);
    transform: rotate(var(--tilt)) scale(var(--scale)); 
    transition: transform .28s ease, background .4s ease, filter .4s ease;
    z-index: 4;

    /* shimmer setup */
    --shine: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
    background-blend-mode: normal, overlay;
  }

  .egg{
  transform: rotate(var(--tilt)) scale(var(--scale));
  transition: transform .28s ease; /* keep your other transitions too */
}

  .egg::after{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--shine);
    background-size: 200% 200%;
    background-position: -150% 0;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    transition: opacity .2s linear;
  }

   /* Sparkles layer (base) */
  .sparkles{
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 6;
    overflow: visible;
  }

  .sparkle{
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, currentColor 65%, transparent 70%);
    box-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    mix-blend-mode: screen;
    opacity: 0;
    animation: rise var(--t, 1200ms) ease-out forwards;
  }

  .fact:empty { display: none;}

  /* Fact bubble – base (no “.show” state here) */
  .fact{
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(var(--fact-max), max(var(--fact-min), calc(100% - var(--gutter)*2)));
    box-sizing: border-box;
    border-radius: 14px;
    transform: translate3d(-50%,-50%,0) scale(0.96); /* gentle pre-scale */
    transform-origin: 50% 50%;
    opacity: 0;                      /* hidden by default */
    pointer-events: none;            /* don't steal clicks until shown */
    z-index: 5;

    /* text + type */
    font-family: var(--font-fact);
    font-weight: 600;
    font-size: clamp(.98rem, 1.1vw + .85rem, 1.15rem);
    line-height: 1.35;
    letter-spacing: .1px;
    text-align: center;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* box model (start minimal; animate in on .show) */
    width: min(420px, 92vw);         /* was 320px; bump a bit for readability */
    padding: 0;
    border-radius: 22px;
    background: transparent;
    box-shadow: none;

    /* motion */
    transition:
      transform .28s ease,
      opacity .28s ease,
      box-shadow .3s ease,
      background .3s ease,
      padding .2s ease;
  }

  /* --- Fact box text fade TEST LOOK FIND --- */
#facttext {
  opacity: 0;
  transition: opacity 0.25s ease;
}

#factbox.show-text #facttext {
  opacity: 1;
}

  /* for testing flying egg*/
  /* tiny ghost we animate to the Nest 1? */
  /* FX overlay that sits above everything */
#fx-layer{ position: fixed; inset: 0; pointer-events: none; z-index: 9999;}

/* Flying egg clone */
.egg.flying-egg{
  position: fixed;               /* rooted to viewport inside fx-layer */
  width: 54px;
  aspect-ratio: 1/1.3;
  border-radius: 50% 50% 46% 46% / 60% 60% 40% 40%;
  box-shadow: inset 0 -10px 18px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.25);
  pointer-events: none;}

@media (prefers-reduced-motion: reduce){
  .egg.flying-egg{ display:none !important; }}

    /*visual components by theme*/
    /* === Egg color themes per category === */
  .egg[data-theme="biochem"] {
      background: radial-gradient(circle at 50% 58%, #e6fff4 0, #b5f3c8 60%, #60d394 100%);}
  .egg[data-theme="mind"]{
    background: radial-gradient(circle at 50% 58%, #f3e8ff 0, #d8b4fe 60%, #c084fc 100%);}
  .egg[data-theme="animals"] {
    background: radial-gradient(circle at 50% 58%, #fffbe6 0, #bef264 60%, #34d399 100%);}
  .egg[data-theme="cosmos"] {
      background: radial-gradient(circle at 50% 95%, #f0f5ff 0, #c7d2fe 60%, #a5b4fc 100%);}
  .egg[data-theme="words"] {
      background: radial-gradient(circle at 50% 55%, #fffbe9 0, #ffe59f 60%, #ffd166 100%);}
  .egg[data-theme="all"] {
      background: radial-gradient(circle at 50% 55%, #fff 0, #f6eddc 60%, #e8dcc6 100%);}
  
        /* === Rare golden Koop egg === */
  .egg[data-theme="koop"],
  .fact[data-theme="koop"] {
    background: radial-gradient(circle at 50% 55%, #fff9d9 0%, #ffe16b 60%, #f7b500 100%);
    box-shadow: 0 0 30px #ffd700aa, 0 0 70px #facc15aa, 0 0 120px #fbbf24aa;
    color: #3b2f00;}

  .egg[data-theme="koop"] {animation: shimmer 1.8s ease-in-out infinite;}
  
  .egg[data-theme="prism"] {
      background:
      conic-gradient(from 0turn at 50% 58%, rgba(255,154,162,.65),rgba(255,218,193,.65),
      rgba(251,246,167,.85),rgba(181,234,215,.85),rgba(199,206,234,.85),rgba(255,154,162,.85)),
       radial-gradient(circle at 50% 58%, #ffffff 0%, #fef6ff 45%, #e8f7ff 70%);
      background-blend-mode: screen, normal;
      background-size: 200% 200%; background-position:50% 50%;
      animation: prismPulse 3.5s ease-in-out infinite alternate;
      filter: saturate(1.3) brightness(1.15);
      box-shadow:
      0 0 28px rgba(165,180,252,.35), 0 0 60px rgba(255,214,102,.40), 0 0 90px rgba(52,211,153,.30)
    }

  .egg[data-theme="prism"]::before {
        content: "";
        position: absolute;
        inset: -12%;
        border-radius: 50%;
        background: conic-gradient(rgba(255,0,0,.9),rgba(255,154,0,.9),rgba(255,255,0,.9),rgba(0,255,0,.9),
        rgba(0,0,255,.9),rgba(128,0,255,.9),rgba(255,0,0,.9));
        mix-blend-mode: screen;
        animation: prismPulse 5s ease-in-out infinite;
        pointer-events: none;
        z-index: -1;
    }
    
  .egg[data-theme="prism"] ~ .hint {
    position: relative;
    background-image: linear-gradient(
      120deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.9) 45%,
      rgba(255,255,255,0.9) 55%,
      rgba(255,255,255,0) 100%
    );
    background-size: 200% 100%;
    background-position: -100% 0;
    animation: prismSheen 3.8s ease-in-out infinite;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

    /* HUD / badges / toasts   egg hud gap was :.75rem; */

  .egg-hud{
    display:flex;
    position: fixed;
    width: 100vw;
    height: 56px;
    z-index:90;
    gap:12px;
    justify-content:center;
    align-items:center;
    margin:.5rem 0 1rem;
    will-change: transform;
    transform: translateZ}

    /*.egg-hud > * { flex: 0 0 auto; } */
  .hud-badge{font:600 .9rem/1.1 var(--font-ui, system-ui);padding:.3rem .6rem;border-radius:999px;background:rgba(255,255,255,.12);backdrop-filter:blur(4px)}
  .hud-badge[data-warn="1"]{background:rgba(255,214,102,.2);box-shadow:0 0 0 1px rgba(255,214,102,.35)}
  .hud-badge[data-danger="1"]{background:rgba(255,90,90,.22);box-shadow:0 0 0 1px rgba(255,90,90,.35)}
  .visually-hidden{position:absolute!important;clip:rect(1px,1px,1px,1px);padding:0!important;border:0!important;height:1px!important;width:1px!important;overflow:hidden}

    /* === HUD fine-tuning (spacing + numerals) === */
  .hud-badge {letter-spacing: .2px; font-variant-numeric: tabular-nums; /* keep numbers aligned */}
  .hud-badge b {padding-left: .15em; /* space before the number */}
  .hud-badge::first-letter {margin-right: .1em; /* breathing room after emoji */}

     /* === Koopfucious Enlightenment Burst === */
  .burst-rays {
    position: absolute; inset: 0;
    border-radius: 50%; background: conic-gradient(
      from 0deg, rgba(255, 215, 0, 0.8) 0deg, rgba(255, 255, 255, 0.25) 20deg,
      transparent 60deg
    );
    animation: spinBurst 1.5s ease-out forwards;
    opacity: 0.85;
    z-index: 2;
    pointer-events: none;
  }

@media (max-width: 780px) {
.info-btn{
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
  padding: 6px;
  font-size: 1.25rem;
  transition: background .2s ease;
}
.info-btn:hover{
  background: rgba(255,255,255,.16);
}
}

   @media (max-width: 3000px) {
  .egg-hud {
    position: fixed; left: 0; right: 0;
    bottom: max(10px, env(safe-area-inset-bottom));
    display: flex; justify-content:center; gap: 12px; align-items:center;
    justify-content: center; gap: 12px;
    z-index: 100;
    will-change: transform;
    margin: 0 !important;
    width: auto;
    height: 56px;
    pointer-events: none;}
    .hint { display: none; }
    #incubatorRoot .hud-badge .lbl {
    display: none;
  }

  /* give the egg area a stable box so animations can't push siblings */
   #eggWrap {
    position: relative;
    /* width: 200px;    */
    width: clamp(220px, 59vw, 320px);       
    height: 270px;         
    margin: .5rem auto 1.25rem;
    overflow: visible;      
   }
   
  .incubator {
    padding-top: 56px;
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  #egg{ position: relative; }
  #egg[data-theme="koop"]::before{
    will-change: transform, opacity;
    pointer-events: none;
    /* keep it purely transforms (rotate/scale) + opacity */
  }

  .egg-hud > * { pointer-events: auto; } /* keep buttons clickable */
  html, body { overflow-x: hidden; } /* this one seems to fix all? */

}


  /*toast*/

  .toast {
    text-align: center; position: fixed;
    top: 72px; left: 50%;
    transform: translateX(-50%);
    z-index: 60;
    padding: .55rem .9rem;
    border-radius: 12px;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(6px);
    color: #fff;
    font: 600 .95rem/1.2 var(--font-ui, system-ui);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
    opacity: 0;
    animation: toastIn .25s ease forwards, toastOut .25s ease 2.6s forwards;
    }

  .toast.success { background: rgba(96, 211, 148, .25); }
  .toast.warn    { background: rgba(255, 214, 102, .25); }

    /*CONFETTI*/
  #confettiLayer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 50;
    overflow: visible;
    display: var(--confetti-display, block);
    }

    /* each confetti piece */
  .confetti {
    position: absolute;
    width: 8px; height: 12px;
    border-radius: 2px;
    background: var(--c, #ffd166);
    opacity: 0;
    transform: translate(0, 0) rotate(0deg);
    animation: confettiPop 900ms ease-out forwards;
    }

.coopfucius {
  position: fixed;
  right: 12px;
  bottom: calc(max(0px, env(safe-area-inset-bottom)));

  display: inline-block;
  width: auto;
           /* bubble hugs toward him/right   justify-content: flex-end; */
  gap: 6px;

  z-index: 9999;
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;             /* overlay only */
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Bigger, more visible Coopfucius */
.coopfucius img {
  width: clamp(220px, 32vw, 340px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

/* Speech bubble ABOVE him */
/* Container: pinned to bottom-right, sized by the image */
.coopfucius {
  position: fixed;
  right: 12px;
  bottom: calc(max(0px, env(safe-area-inset-bottom) + 0px));
  display: inline-block;
  z-index: 9999;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Chicken image: sets the visual box; torso will sit on bottom edge */
.coopfucius img {
  display: block;
  width: clamp(220px, 32vw, 340px);
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

/* Bubble: overlay anchored to coopfucius box (over his torso / near beak) */
.coop-bubble {
  position: absolute;
  /* tweak these two to line up with the beak */
  bottom: 38%;          /* higher % = move bubble up */
  right: 65%;           /* higher % = move closer to center */

  font-family: 'Spectral', serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.15px;

  padding: 0.45rem 0.85rem;
  min-width: 120px;
  /*max-width: min(300px, 75vw);*/
  width: fit-content;
  white-space: normal;
  word-break: keep-all;

  /* background: rgba(255, 255, 225, 0.86); replacing for now, new block below*/
  background: linear-gradient(135deg,
    rgba(255, 255, 180, 0.98) 0%,
    rgba(255, 210, 80, 0.98) 50%,
    rgba(255, 255, 220, 0.98) 100%);


  background-size: 200% 200%;
  animation: shimmerGold 7s ease-in-out infinite;

  color: #000;
  line-height: 1.4;
  text-align: center;
  border-radius: 10px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
  pointer-events: auto;
}

/* Tail pointing toward beak */
.coop-bubble::after {
  content: "";
  position: absolute;
  bottom: 12px;        /* below bubble edge  note was 12px, -8px (bottom, right) */
  right: -8px;         /* tweak to hit beak */
  border-width: 6px 0 6px 8px;
  border-style: solid;
  border-color: transparent transparent transparent rgba(255, 210, 80, 0.98);
 /* border-color: rgb(255, 226, 120) transparent transparent transparent;*/
  /* same tone and opacity as bubble middle color */
  filter: brightness(0.98); /* softens edge contrast */
}


/* States */
.coopfucius.hidden {
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
}

.coopfucius.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}


/* Tail pointing down toward his head, from the right side */
/*.coop-bubble::after {
  content: "";
  position: absolute;
  background: inherit;
  bottom: 12px;
  right: -8px;
  border-width: 7px 7px 0 8px;
  border-style: solid;
  border-color: rgba(255, 255, 225, 0.96) transparent transparent transparent;
}*/

/* States */
.coopfucius.hidden {
  opacity: 0;
  transform: translateY(18px);
}

.coopfucius.visible {
  opacity: 1;
  transform: translateY(0);
}
    

    /* Key frames */

    @keyframes rise { /*fact box movement*/
      0%   { transform: translate(0,0) scale(.6); opacity:0; }
      10%  { opacity:1; }
      100% { transform: translate(var(--x,0), calc(-1 * var(--h,90px))) scale(.9); opacity:0; }}

    @keyframes shimmerGold {
    0%,100% { background-position: 0% 50%; }
    50%     { background-position: 100% 50%; }
    }

    @keyframes toastIn   { from {opacity:0; transform:translate(-50%,-6px);} to {opacity:1; transform:translate(-50%,0);} }
    @keyframes toastOut  { to   {opacity:0; transform:translate(-50%,-6px);} }

    @keyframes confettiPop {
      0%   { opacity: 1; transform: translate(0,0) rotate(0deg); }
      100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -160px)) rotate(var(--rot, 360deg)); }}

    @keyframes ambientPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.65; }
    }

    @keyframes ringPulse {
        0%   { box-shadow: 0 0 0 0 color-mix(in oklab, currentColor 25%, transparent); opacity: .1; scale: .96; } /* was: transform: scale(.96) */
        50%  { box-shadow: 0 0 36px 18px color-mix(in oklab, currentColor 45%, transparent); opacity: .8; scale: 1.22; }
        100% { box-shadow: 0 0 0 0 transparent; opacity: .6; scale: 1.2; }
    }
  
    @keyframes prismPulse {    /* == Rare prism egg == */
        0% {filter: hue-rotate(0deg) saturate(1.4) brightness(1);}
        100% {filter: hue-rotate(180deg) saturate(1.6) brightness(1.4); }
        }

    @keyframes prismSheen {
    0% { background-position: -100% 0; }
    50% { background-position: 120% 0; }
    100% { background-position: -100% 0; }
    }

    @keyframes shimmer {
      0%,100% { filter: brightness(1); }
      50% { filter: brightness(1.2); }
    }

      /* === Idle breathing glow when untouched === */
  @keyframes idleGlow {
    0%, 100% {
      box-shadow:
        0 0 15px color-mix(in oklab, var(--idleColor, #ffd166) 60%, white 15%),
        0 0 35px color-mix(in oklab, var(--idleColor, #ffd166) 40%, black 20%);
      filter: brightness(1);
    }
    50% {
      box-shadow:
        0 0 25px color-mix(in oklab, var(--idleColor, #ffd166) 100%, white 15%),
        0 0 50px color-mix(in oklab, var(--idleColor, #ffd166) 60%, black 10%);
      filter: brightness(1.08);
    }
  }

  @keyframes idleShine {
    0%   { background-position: -150% 0; opacity: 0.15; }
    50%  { background-position: 150% 0; opacity: 0.35; }
    100% { background-position: -150% 0; opacity: 0.15; }
  }

  @keyframes shine { to { background-position: 150% 0; } }

  @keyframes spinBurst {
    0%   { rotate: 0deg;   scale: .7;  opacity: .9; }
    50%  { rotate: 180deg; scale: 1.1; opacity: 1;  }
    100% { rotate: 360deg; scale: 1.4; opacity: 0;  }
  }

  /* Subtle pulsing effect for the ready dot */
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.7; }
  }

  /* Keyframes to wobble the tilt (and optionally a tiny scale) */
    @keyframes tiltWobble {
    0%   { --tilt: 0deg;   --scale: 1;    }
    20%  { --tilt: 8deg;   --scale: .98;  }
    45%  { --tilt: -6deg;  --scale: .985; }
    70%  { --tilt: 3deg;   --scale: .99;  }
    100% { --tilt: 0deg;   --scale: 1;    }
    }



}