@layer state{

    /* Add this class briefly to play the wobble once */
.egg-wrap.wobble {
  animation: tiltWobble 1100ms ease-out both;
}

  /* When categories are pressed */
     .chip[aria-pressed="true"] {
      background: #ffd166;  /* or whatever background you’re already using */
      color: #2e1f00;       /* dark yolk brown text for contrast */
      font-weight: 600;
      box-shadow: 0 0 8px rgba(255,209,102,0.4);
    }

    /* Selected chip reflects its category theme */
    .chip[aria-pressed="true"][data-cat="biochem"] { background: var(--chip-biochem) !important; }
    .chip[aria-pressed="true"][data-cat="animals"] { background: var(--chip-animals) !important; }
    .chip[aria-pressed="true"][data-cat="mind"]    { background: var(--chip-mind) !important; }
    .chip[aria-pressed="true"][data-cat="cosmos"]  { background: var(--chip-cosmos) !important; }
    .chip[aria-pressed="true"][data-cat="words"]   { background: var(--chip-words) !important; }
    .chip[aria-pressed="true"][data-cat="all"]     { background: linear-gradient(135deg, #ffb3ba, #ffdfba,
    #ffffba, #baffc9, #bae1ff) !important; }

  /* When the bubble is shown */
  :root[style*="--enable-confetti:0"] #confettiLayer {
    display: none !important;
  }

    /* When a fact is revealed, fade and scale it into view */
    .fact.show{
    opacity: 1; 
    transform: translate3d(-50%, -50%, 0) scale(1);
    pointer-events: auto; color: var(--ink-dark);

    /* your warm parchment feel */
    background: rgba(255, 247, 209, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.22),
      0 0 18px rgba(255, 235, 150, 0.45);

    /* nice touch */
    backdrop-filter: blur(6px) saturate(115%);
    -webkit-backdrop-filter: blur(6px) saturate(115%);
    padding: .9rem 2.6rem 1rem 1rem; 
    position: absolute;/* Was .65rem .9rem*/
    }

  /*@supports (backdrop-filter: blur(6px)){
    .fact.show{
      backdrop-filter: blur(6px) saturate(115%);
      -webkit-backdrop-filter: blur(6px) saturate(115%);
    }
  }*/

  /* When cracked, animate both vars (egg tilts, scales down) */
 /* .egg-wrap.cracked { --tilt: 6deg; --scale: .96; }*/

    /* Dim the hint when the egg is active */
  .egg-wrap.cracked ~ .hint {
    opacity: 0.3;
    filter: blur(0.5px);
    transition: opacity 0.5s ease, filter 0.5s ease;
  }

  
 /*Segmented buttom: pressed mode active*/
    .segbtn[aria-pressed="true"] {
    background: radial-gradient(120% 120% at 50% 0%, rgba(255,214,102,0.35) 0%, rgba(255,214,102,0.18) 55%, rgba(255,255,255,0.10) 100%);
    border-color: rgba(255,214,102,0.55);
    box-shadow: 0 0 12px rgba(255,214,102,0.28);
    }

        /* Orange state while Focus mode is cooling */
    .segbtn.cooling {
    background: radial-gradient(120% 120% at 50% 0%,
                rgba(255,122,0,0.40) 0%,
                rgba(255,122,0,0.25) 55%,
                rgba(255,255,255,0.08) 100%);
    border-color: rgba(255,122,0,0.60);
    box-shadow: 0 0 12px rgba(255,122,0,0.30);
    color: #fff;
    }

    /* Orange dot while cooling */
    .cooldown-badge.cooling::after {
    background: #ff7a00;
    box-shadow: 0 0 6px #ff7a00aa;
    animation: none; /* no pulse during cooldown */
    }

     /* Egg idle states (toggled by JS) */
    .egg.idle{ animation: idleGlow 3.5s ease-in-out infinite; }
    .egg.fullIdle::after{ opacity: .35; animation: idleShine 5s linear infinite; }

    /* UNSURE IF USED RN Active state for category filter buttons */
  .filter-btn.active {
    background: #ffd166;   /* warm egg highlight */
    color: #2e1f00;        /* dark yolk brown for contrast */
    font-weight: 600;
    box-shadow: 0 0 6px rgba(255, 209, 102, 0.4);
    transition: background 0.2s ease, color 0.2s ease;
    }

  /* Egg ring states*/
   /* Ring states */
  .egg-wrap.linger .ring{
    opacity: .45;               /* soft afterglow */
    animation: none;
    scale: 1.3;
    box-shadow: 0 0 22px 10px color-mix(in oklab, currentColor 55%, transparent);
  }
  .egg-wrap.loading .ring{
    opacity: .65;
    animation: ringPulse 900ms cubic-bezier(.2,.6,.2,1) 1;
    transition: none !important;
  }

  /* Egg states */
  /*.egg-wrap.cracked .egg{ transform: rotate(6deg) scale(.96); }*/
  .egg-wrap.loading .egg{ filter: saturate(1.05) brightness(1.05); }
  .egg-wrap.loading .egg::after{ opacity: .7; animation: shine 1s linear infinite; }

  /*Fact theme tints in factbox*/
  .egg-wrap.cracked { --tilt: 6deg; --scale: .96; }

  /* Fact: shown + perfectly level (counter-rotates by whatever --tilt is)   rotate(calc(var(--tilt) * -1)) */
  .fact.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, -50%, 0) rotate(calc(var(--tilt) * -1)) scale(1);
    transition: transform .28s ease, opacity .28s ease, box-shadow .3s;
    /*transition: transform .28s ease, opacity .28s ease, box-shadow .3s, background .3s, padding .2s;*/
    /* keep your existing padding/background/shadow/color here */
    }

        /* Swap-out class for smoother change between facts */
  .fact.swap {
    opacity: 0;
    transform: translate3d(-50%, -49%, 0) rotate(calc(var(--tilt) * -1)) scale(.96);
    }

    /* Theme tints with transparency (keeps the vibe but lets background show through) */
  .fact.show[data-theme="biochem"] { background: rgba(233, 255, 242, 0.82); }
  .fact.show[data-theme="mind"]    { background: rgba(245, 236, 255, 0.82); }
  .fact.show[data-theme="animals"] { background: rgba(243, 255, 230, 0.82); }
  .fact.show[data-theme="cosmos"]   { background: rgba(238, 241, 255, 0.82); }
  .fact.show[data-theme="words"]   { background: rgba(255, 249, 229, 0.82); }
  .fact.show[data-theme="all"]     { background: rgba(255, 247, 209, 0.85); }
  .fact.show[data-theme="koop"]    { background: rgba(255, 233, 140, 0.88); }
  .fact.show[data-theme="prism"] {background: rgba(255, 255, 255, 0.88); box-shadow: 
    0 8px 24px rgba(0,0,0,0.22), 0 0 22px rgba(255, 214, 102, 0.40),
     inset 0 0 0 1px rgba(255, 255, 255, .35); }

     /* fact bubble extra glow when cracked*/
  /* Fact bubble themes */
  .egg-wrap.cracked .fact[data-theme="biochem"] { box-shadow: 0 0 20px #60d39455, 0 4px 10px rgba(0,0,0,.12); }
  .egg-wrap.cracked .fact[data-theme="mind"]    { box-shadow: 0 0 20px #c084fc55, 0 4px 10px rgba(0,0,0,.12); }
  .egg-wrap.cracked .fact[data-theme="animals"] { box-shadow: 0 0 20px #34d39955, 0 4px 10px rgba(0,0,0,.12); }
  .egg-wrap.cracked .fact[data-theme="cosmos"]   { box-shadow: 0 0 20px #a5b4fc55, 0 4px 10px rgba(0,0,0,.12); }
  .egg-wrap.cracked .fact[data-theme="words"]   { box-shadow: 0 0 20px #ffd16655, 0 4px 10px rgba(0,0,0,.12); }
  .egg-wrap.cracked .fact[data-theme="all"]     { box-shadow: 0 0 20px rgba(255,235,150,.45), 0 4px 10px rgba(0,0,0,.12); }
  .egg-wrap.cracked .fact[data-theme="koop"]    { box-shadow: 0 0 30px #ffd70088, 0 0 70px #facc1580; }
  .egg-wrap.cracked .fact[data-theme="prism"]   { box-shadow: 0 0 28px rgba(255,214,102,.45), 0 0 60px rgba(165,180,252,.35), 0 0 90px rgba(52,211,153,.30);}
  
  /* Gentle shared glow link */
  .egg-wrap.cracked .egg[data-theme="cosmos"],
  .egg-wrap.cracked .fact[data-theme="cosmos"] {
    box-shadow: 0 0 25px #a5b4fc55, 0 0 60px #a5b4fc33;
  }
  /* Gentle shared glow link for Mind & Brain */
  .egg-wrap.cracked .egg[data-theme="mind"],
  .egg-wrap.cracked .fact[data-theme="mind"]{
    box-shadow: 0 0 25px #c084fc55, 0 0 60px #c084fc33;
  }
  .egg-wrap.cracked .egg[data-theme="biochem"],
  .egg-wrap.cracked .fact[data-theme="biochem"] {
    box-shadow: 0 0 25px #60d39455, 0 0 60px #60d39433;
  }
  /* Gentle shared glow link for Animals & Nature */
  .egg-wrap.cracked .egg[data-theme="animals"],
  .egg-wrap.cracked .fact[data-theme="animals"] {
    box-shadow: 0 0 25px #34d39955, 0 0 60px #bef26444, 0 0 100px #facc1533;
  }
  .egg-wrap.cracked .egg[data-theme="words"],
  .egg-wrap.cracked .fact[data-theme="words"] {
    box-shadow: 0 0 25px #ffd16655, 0 0 60px #ffd16633;
  }

  /*RUNNING TESTS TO FIX WEIRD CENTREING*/
  #egg .fact.show{
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) rotate(calc(var(--tilt,0deg)*-1)) scale(1) !important;
}

/* Keep the base fact (and swap/fade states) anchored too */
#egg .fact,
#egg .fact.swap {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform-origin: 50% 50%;
}

/* Optional: tweak fade-out slightly so it scales/fades but doesn't move */
#egg .fact.swap {
  transform: translate(-50%, -50%) rotate(calc(var(--tilt, 0deg) * -1)) scale(.96);
  opacity: 0;
  transition: transform .28s ease, opacity .28s ease;
}



  /* A) RECORD MODE*/
  
  .record-mode .filters
  .record-mode #filters,
  .record-mode [role="group"][aria-label="Choose fact category"],
  .record-mode [aria-label="Choose fact category"],
  .record-mode .chip,
  .record-mode button.chip,
  .record-mode [class*="chip"],
  .record-mode .modebar,
  .record-mode #hud-today,
  .record-mode #hud-left 
   {
    display: none !important;
    
  }

    html.record-mode #hud-today,
    html.record-mode #hud-left,
    html.record-mode #InfoBtn {
    display: none !important;
    }

    /* keep the HUD visible */
    html.record-mode .egg-hud {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    }

    html.record-mode #egg:focus {
    outline: none !important;
    box-shadow: none !important;
    }

    .record-mode .hint { display: none !important;}

    .record-mode body {
        padding: 8vh 8vw !important;
        box-sizing: border-box;
    }

    .record-mode .fact,
    .record-mode  #factBox {
        max-width: min(79vw,520px);
        margin: 1rem auto 0 auto;
        word-break: break-word;
    }
    
    /*RECORD MODE HIDE HEADER FOOTER*/

    html.record-mode #masthead,
    html.record-mode header.site-header,
    html.record-mode #colophon,
    html.record-mode footer.site-footer {
    display: none !important;
    }

    /*keep the page containers visible, just removing extra padding/backgrounds*/

    html.record-mode .site-content,
    html.record-mode #content,
    html.record-mode .entry-content {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
    }

    /*ensure egg section fills full screen height in record mode*/
    html.record-mode #incubatorRoot {
        min-height: 100svh !important;
        height: auto !important;
        display: block !important;
        background: transparent !important;
    }
}