@layer themes {

/* ======================================================
    THEME VISUALS (Egg + Fact themes, rare eggs)
   ====================================================== */

/* ---------- 1.1 Egg color themes per category ---------- */

  .egg[data-theme="biochem"]  { --egg-bg: radial-gradient(circle at 50% 58%, #e6fff4 0, #b5f3c8 60%, #60d394 100%); }
  .egg[data-theme="mind"]     { --egg-bg: radial-gradient(circle at 50% 58%, #f3e8ff 0, #d8b4fe 60%, #c084fc 100%); }
  .egg[data-theme="animals"]  { --egg-bg: radial-gradient(circle at 50% 58%, #fffbe6 0, #bef264 60%, #34d399 100%); }
  .egg[data-theme="cosmos"]   { --egg-bg: radial-gradient(circle at 50% 95%, #f0f5ff 0, #c7d2fe 60%, #a5b4fc 100%); }
  .egg[data-theme="words"]    { --egg-bg: radial-gradient(circle at 50% 55%, #fffbe9 0, #ffe59f 60%, #ffd166 100%); }
  .egg[data-theme="all"]      { --egg-bg: radial-gradient(circle at 50% 55%, #fff 0, #f6eddc 60%, #e8dcc6 100%); }

  /* feature eggs */
  /* ---------- 1.2 Rare golden Koop egg ---------- */
  .egg[data-theme="koop"]{
    --egg-bg: 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;
    animation: shimmer 1.8s ease-in-out infinite;
  }

  .chip[data-cat="biochem"]  { --chip-active-bg: var(--chip-biochem); }
  .chip[data-cat="animals"]  { --chip-active-bg: var(--chip-animals); }
  .chip[data-cat="mind"]     { --chip-active-bg: var(--chip-mind); }
  .chip[data-cat="cosmos"]   { --chip-active-bg: var(--chip-cosmos); }
  .chip[data-cat="words"]    { --chip-active-bg: var(--chip-words); }
  .chip[data-cat="all"]      { --chip-active-bg: linear-gradient(135deg,#ffb3ba,#ffdfba,#ffffba,#baffc9,#bae1ff); }



    /* Make them feel clickable without shouting */
  @media (hover:hover) and (pointer:fine){
    html.is-premium #subfilters .subchip:hover{
      opacity: 0.92;
      background: rgba(255,255,255,0.09);
    }
  }

   /* Give the subfilters rail the current category’s active color */
  #incubatorRoot[data-cat="biochem"] #subfilters { --chip-active-bg: var(--chip-biochem); }
  #incubatorRoot[data-cat="animals"] #subfilters { --chip-active-bg: var(--chip-animals); }
  #incubatorRoot[data-cat="mind"]    #subfilters { --chip-active-bg: var(--chip-mind); }
  #incubatorRoot[data-cat="cosmos"]  #subfilters { --chip-active-bg: var(--chip-cosmos); }
  #incubatorRoot[data-cat="words"]   #subfilters { --chip-active-bg: var(--chip-words); }

  /* Optional: when “all”, keep the usual gold (or pick another) */
  #incubatorRoot[data-cat="all"] #subfilters { --chip-active-bg: radial-gradient(circle at 50% 55%, #fff 0, #f6eddc 60%, #e8dcc6 100%); }
/*

  /* Subchips use the same variable system as chips */
  html.is-premium #subfilters .subchip{
    opacity: 0.62;
    --chip-bg: rgba(255,255,255,0.06);
    --chip-text: rgba(255,255,255,0.88);
    --chip-border: rgba(255,255,255,0.14);
  }

  /* Pressed subchip: same as category pressed */
  html.is-premium #subfilters .subchip[aria-pressed="true"]{
    opacity: 1;
    --chip-bg: var(--chip-active-bg);
    --chip-text: #2e1f00;
    --chip-border: rgba(255,255,255,0.10);
    box-shadow: 0 0 10px rgba(255,209,102,0.25);
  }

    /* When a specific subcategory is chosen, make the category chip slightly calmer */
  html.is-premium #incubatorRoot.sub-focused #filters .chip[data-cat][aria-pressed="true"]{
    opacity: 0.74;
    filter: saturate(0.85);
    box-shadow: 0 0 8px rgba(255,255,255,0.06);
  }


  .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%);
  }

  */
    
  
/* ---------- 1.2 Rare golden Koop egg ---------- */

/* Fact bubble koop tint (keep as background since the fact uses background directly) */
  .fact.show[data-theme="koop"]{
    background: rgba(255, 233, 140, 0.88);
    color: #3b2f00;
  }

  /* ---------- 1.3 Rare prism egg ---------- */
  
  .egg[data-theme="prism"] {
    background: radial-gradient(circle at 50% 58%, #ffffff 0%, #fef6ff 45%, #e8f7ff 70%);
    background-blend-mode: normal;
    background-size: 100% 100%;
    background-position: 50% 50%;
    animation: none;

    /* only switch animation to prism rotate on april fools */

    /*animation: prismRotate 10s linear infinite;*/

    filter: saturate(1.05) brightness(1.05);
    box-shadow: inset 0 -12px 24px rgba(0,0,0,.08);
    transition: filter 220ms ease, box-shadow 220ms ease;
  }

  .egg-wrap.variant-reveal .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: none;

    /*animation: prismRotate 14s linear infinite;*/

    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 220ms ease;
  }

  .egg-wrap.variant-reveal .egg[data-theme="prism"]::before {
    animation: prismPulse 5s ease-in-out infinite;
    opacity: 1;
  }

  /* Keep prism stable during loading wobble to avoid desktop jitter. */
  .egg-wrap.loading .egg[data-theme="prism"] {
    animation: none !important;
    transition: none !important;
    filter: saturate(1.05) brightness(1.05);
    box-shadow: inset 0 -12px 24px rgba(0,0,0,.08) !important;
  }
    
  .egg[data-theme="prism"] ~ .hint {
    position: relative;
    color: inherit;
    background-image: none;
    animation: none;
  }

  .egg-wrap.variant-reveal .egg[data-theme="prism"] ~ .hint {
    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;
  }

}