/* ============================================================
   incrediblytalentedgames — themes

   Every theme is just a set of variable overrides. style.css never
   hardcodes a colour, so adding a new one means copying a block
   below and changing values — no other file needs touching.

   To add a theme: add a block here, then add an entry to
   includes/themes.php so it appears in the picker.
   ============================================================ */

/* ---------------------------------------------------------------
   DEFAULT — plain white and grey. The one to read on. This is the
   site default, so it stays calm.
   --------------------------------------------------------------- */
[data-theme="default"]{
  --outline-color:#ffffff;

  /* Light theme: dark ink on a pale background is already legible, and a
     white ring around it only eats into the letterforms — at body size it
     leaves pale letters with dark fringes, and pinches sharp joins like the
     centre of a 'w'. Outlines are for light text on busy dark backgrounds. */
  --outline-w:0;
  --outline-sm-w:0;
  --heading-outline:none;
  --text-outline:none;

  --bg:linear-gradient(180deg,#ffffff 0%,#f4f4f6 45%,#e6e6ea 100%);
  --bg-solid:#f4f4f6;
  --stage-bg:#1a1a1c;

  --panel:rgba(255,255,255,.94);
  --panel-2:#fafafb;
  --panel-3:#f2f2f5;
  --panel-solid:rgba(255,255,255,.98);
  --panel-head:rgba(0,0,0,.045);

  --inset-soft:rgba(0,0,0,.03);
  --inset:rgba(0,0,0,.055);
  --inset-deep:rgba(0,0,0,.08);
  --raise:rgba(0,0,0,.05);
  --raise-soft:rgba(0,0,0,.03);
  --hover:rgba(0,0,0,.045);

  --field-bg:#ffffff;
  --field-focus-bg:#ffffff;
  --select-bg:#ffffff;

  --ink:#1b1b1f;
  --dim:#3c3c44;
  --faint:#75757e;

  --line:rgba(0,0,0,.2);
  --line-soft:rgba(0,0,0,.1);

  --accent:#2b62b8;
  --accent-wash:rgba(43,98,184,.07);
  --accent-dim:rgba(43,98,184,.13);
  --accent-line:rgba(43,98,184,.42);
  --hot:#5a5a66;
  --hot-wash:rgba(90,90,102,.08);
  --hot-line:rgba(90,90,102,.35);

  --btn-bg:#e9e9ed;
  --btn-border:#bcbcc4;
  --btn-fg:#1b1b1f;
  --btn-hover-bg:#dcdce2;
  --btn-hover-fg:#12121a;
  --btn-hover-border:#2b62b8;

  --err:#b0142c;
  --err-bg:rgba(176,20,44,.08);
  --err-line:rgba(176,20,44,.38);
  --on-err:#ffffff;
  --ok-bg:rgba(43,98,184,.1);
  --amber:#8a6100;
  --tgreen:#146b47;
}

/* ---------------------------------------------------------------
   INVASION — Invader Zim sky. Pink falling into deep purple, with
   sickly green lettering, a phosphor glow and a CRT overlay.
   --------------------------------------------------------------- */
[data-theme="invasion"]{
  --bg:linear-gradient(180deg,
    #ff3f6b 0%, #ef2668 10%, #d41a6d 24%,
    #a81877 40%, #7a1878 56%, #55176b 72%,
    #3d1456 86%, #2e1142 100%);
  --bg-solid:#7a1878;

  --panel:rgba(30,8,44,.68);
  --panel-2:rgba(30,8,44,.54);
  --panel-3:rgba(24,6,36,.44);
  --panel-solid:rgba(22,6,34,.94);
  --panel-head:rgba(126,247,120,.1);

  /* Sickly green, the colour of everything in Zim's base. */
  --ink:#9dff85;
  --dim:#7fe86a;
  --faint:#5fb84f;

  --line:rgba(157,255,133,.3);
  --line-soft:rgba(157,255,133,.15);

  --accent:#7ef7c0;
  --accent-wash:rgba(126,247,192,.12);
  --accent-dim:rgba(126,247,192,.2);
  --accent-line:rgba(126,247,192,.5);
  --hot:#ff7ab8;
  --hot-wash:rgba(255,122,184,.14);
  --hot-line:rgba(255,122,184,.45);

  --btn-bg:rgba(0,0,0,.55);
  --btn-border:rgba(157,255,133,.4);
  --btn-fg:#9dff85;
  --btn-hover-bg:rgba(126,247,192,.25);
  --btn-hover-fg:#0a2a1e;
  --btn-hover-border:#7ef7c0;

  --field-bg:rgba(0,0,0,.5);
  --field-focus-bg:rgba(0,0,0,.65);
  --select-bg:#3d1456;
  --amber:#9dff85;
  --tgreen:#7ef7c0;

  /* Dark outline so the green stays legible over the bright pink
     at the top of the gradient. */
  --outline-color:#1a0426;
}

/* Phosphor glow. Kept off small body text, where it would smear. */
[data-theme="invasion"] h1,
[data-theme="invasion"] h2,
[data-theme="invasion"] h3,
[data-theme="invasion"] .logo,
[data-theme="invasion"] .tabs-nav a,
[data-theme="invasion"] .section-card .label,
[data-theme="invasion"] .panel-head{
  text-shadow:
    0 0 6px rgba(157,255,133,.7),
    0 0 16px rgba(126,247,120,.45),
    0 0 30px rgba(100,220,90,.25);
}

/* --- CRT ---------------------------------------------------------
   Two fixed layers over everything: scanlines, and a soft vignette
   with a green wash. pointer-events:none so nothing is clickable
   through them, and they sit above content but below nothing else. */
[data-theme="invasion"] body::before,
[data-theme="invasion"] body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;
}

/* Scanlines. */
[data-theme="invasion"] body::before{
  background:repeating-linear-gradient(
    180deg,
    rgba(0,0,0,.22) 0px, rgba(0,0,0,.22) 1px,
    transparent 1px, transparent 3px);
  mix-blend-mode:multiply;
}

/* Vignette plus a faint green phosphor bloom in the centre. */
[data-theme="invasion"] body::after{
  background:
    radial-gradient(ellipse at center,
      rgba(126,247,120,.05) 0%, transparent 55%),
    radial-gradient(ellipse at center,
      transparent 55%, rgba(0,0,0,.35) 100%);
}

/* A slow flicker sells the tube. Disabled for anyone who has asked
   for reduced motion, since a pulsing overlay is a headache risk. */
@media (prefers-reduced-motion: no-preference){
  [data-theme="invasion"] body::before{
    animation:crt-flicker 5.5s steps(60) infinite;
  }
}
@keyframes crt-flicker{
  0%,100%{opacity:1}
  47%{opacity:1}
  48%{opacity:.86}
  49%{opacity:1}
  78%{opacity:1}
  79%{opacity:.9}
  80%{opacity:1}
}

/* ---------------------------------------------------------------
   EQUATION — pale sage falling through olive into warm golden brown.
   Dark olive text with a white outline, muted sage panels.
   --------------------------------------------------------------- */
[data-theme="equation"]{
  --outline-color:#ffffff;

  /* Light theme: dark ink on a pale background is already legible, and a
     white ring around it only eats into the letterforms — at body size it
     leaves pale letters with dark fringes, and pinches sharp joins like the
     centre of a 'w'. Outlines are for light text on busy dark backgrounds. */
  --outline-w:0;
  --outline-sm-w:0;
  --heading-outline:none;
  --text-outline:none;


  /* Runs the other way now: sage at the top easing out to white, rather
     than darkening into gold. The dark end was where legibility fell
     apart — panels near the bottom sat on saturated gold and the text
     had to fight it. Ending on white keeps the whole page even. */
  --bg:linear-gradient(180deg,
    #d9d4ae 0%, #e2ddbe 16%, #eae6d2 34%,
    #f2efe2 54%, #f8f6ee 74%, #fdfcf9 88%, #ffffff 100%);
  --bg-solid:#eae6d2;
  --stage-bg:#1a1808;

  /* Panels and every header bar sit on white rather than olive. The
     olive is still present as the page gradient behind them and as the
     rules and accents, so the theme keeps its character — but the
     surfaces you actually read text off are now clean white.
     --panel-solid drives the top toolbar and the footer, --panel-head
     the section strips (ANNOUNCEMENTS, RECENT UPLOADS). */
  --panel:rgba(255,255,255,.82);
  --panel-2:rgba(255,255,255,.74);
  --panel-3:rgba(252,251,246,.70);
  --panel-solid:rgba(255,255,255,.96);
  --panel-head:rgba(255,255,255,.88);

  --inset-soft:rgba(255,255,255,.55);
  --inset:rgba(255,255,255,.78);
  --inset-deep:rgba(56,44,18,.10);
  --raise:rgba(255,255,255,.35);
  --raise-soft:rgba(255,255,255,.2);
  --hover:rgba(168,132,46,.28);

  --field-bg:rgba(246,243,231,.9);
  --field-focus-bg:#ffffff;
  --select-bg:#f6f3e7;

  --ink:#2b2d22;
  --dim:#3a3c2f;
  --faint:#4d4f41;

  --line:rgba(50,52,41,.42);
  --line-soft:rgba(50,52,41,.22);

  --accent:#6b5410;
  --accent-wash:rgba(107,84,16,.12);
  --accent-dim:rgba(107,84,16,.22);
  --accent-line:rgba(107,84,16,.5);
  --hot:#8a5f10;
  --hot-wash:rgba(138,95,16,.14);
  --hot-line:rgba(138,95,16,.42);

  /* Deepened a little so the gold lettering has something to sit on —
     at the old lighter olive, gold-on-olive was only ~3:1. */
  --btn-bg:rgba(94,76,34,.96);
  --btn-border:rgba(46,36,14,.75);
  /* Gold lettering on the olive fill. Bright enough to hold up against
     the mid-olive button, and it ties the buttons to the theme's accent
     now that every surface around them is white. */
  --btn-fg:#fff2cc;
  --btn-hover-bg:rgba(150,116,32,.95);
  --btn-hover-fg:#fffaea;
  --btn-hover-border:#8a6a14;

  --err:#8a2418;
  --err-bg:rgba(138,36,24,.12);
  --err-line:rgba(138,36,24,.42);
  --on-err:#ffffff;
  --ok-bg:rgba(107,84,16,.16);
  --amber:#7a5e08;
  --tgreen:#5a5a14;
}

/* ---------------------------------------------------------------
   BLACK — plain black, white text, dark grey buttons.
   --------------------------------------------------------------- */
[data-theme="black"]{
  --bg:linear-gradient(180deg,#000 0%,#000 100%);
  --bg-solid:#000;

  --panel:rgba(16,16,16,.88);
  --panel-2:rgba(22,22,22,.9);
  --panel-3:rgba(12,12,12,.9);
  --panel-solid:rgba(6,6,6,.97);
  --panel-head:rgba(255,255,255,.07);

  --inset-soft:rgba(0,0,0,.4);
  --inset:rgba(0,0,0,.6);
  --inset-deep:rgba(0,0,0,.8);
  --field-bg:#0d0d0d;
  --field-focus-bg:#141414;
  --select-bg:#141414;

  --ink:#ffffff;
  --dim:#cccccc;
  --faint:#8a8a8a;

  --line:rgba(255,255,255,.24);
  --line-soft:rgba(255,255,255,.12);

  --accent:#ffffff;
  --accent-wash:rgba(255,255,255,.07);
  --accent-dim:rgba(255,255,255,.13);
  --accent-line:rgba(255,255,255,.45);
  --hot:#bdbdbd;
  --hot-wash:rgba(255,255,255,.07);
  --hot-line:rgba(255,255,255,.3);

  --btn-bg:#2e2e2e;
  --btn-border:#4a4a4a;
  --btn-fg:#ffffff;
  --btn-hover-bg:#454545;
  --btn-hover-fg:#ffffff;
  --btn-hover-border:#8a8a8a;

  --amber:#e0e0e0;
  --tgreen:#c8c8c8;
}

/* ---------------------------------------------------------------
   MATRIX — dark green sinking to black, green text, cold blue-grey
   buttons.
   --------------------------------------------------------------- */
[data-theme="matrix"]{
  --bg:linear-gradient(180deg,#03210f 0%,#02180b 35%,#010c06 70%,#000 100%);
  --bg-solid:#02180b;

  --panel:rgba(2,16,8,.82);
  --panel-2:rgba(3,22,11,.85);
  --panel-3:rgba(1,11,6,.85);
  --panel-solid:rgba(0,10,5,.96);
  --panel-head:rgba(0,255,102,.07);

  --inset-soft:rgba(0,0,0,.35);
  --inset:rgba(0,0,0,.55);
  --inset-deep:rgba(0,0,0,.75);
  --field-bg:rgba(0,20,10,.85);
  --field-focus-bg:rgba(0,30,15,.9);
  --select-bg:#02180b;

  --ink:#4dff88;
  --dim:#36d96c;
  --faint:#1f8c47;

  --line:rgba(77,255,136,.28);
  --line-soft:rgba(77,255,136,.14);

  --accent:#7dff9f;
  --accent-wash:rgba(125,255,159,.09);
  --accent-dim:rgba(125,255,159,.15);
  --accent-line:rgba(125,255,159,.45);
  --hot:#00ff66;
  --hot-wash:rgba(0,255,102,.10);
  --hot-line:rgba(0,255,102,.4);

  --btn-bg:#2c3a45;
  --btn-border:#41525f;
  --btn-fg:#8fffb0;
  --btn-hover-bg:#3d5262;
  --btn-hover-fg:#c7ffd8;
  --btn-hover-border:#7dff9f;

  --amber:#9dff6a;
  --tgreen:#4dff88;
}

/* ---------------------------------------------------------------
   FRUTIGER AERO — glossy mid-2000s blues and greens. A light theme,
   so surfaces flip: panels go pale, text goes dark.
   --------------------------------------------------------------- */
[data-theme="aero"]{
  --outline-color:#ffffff;

  /* Light theme: dark ink on a pale background is already legible, and a
     white ring around it only eats into the letterforms — at body size it
     leaves pale letters with dark fringes, and pinches sharp joins like the
     centre of a 'w'. Outlines are for light text on busy dark backgrounds. */
  --outline-w:0;
  --outline-sm-w:0;
  --heading-outline:none;
  --text-outline:none;

  --bg:linear-gradient(180deg,
    #bfeaff 0%, #7fd4f5 22%, #4fb8e8 44%,
    #63c9a8 68%, #a8e6a3 86%, #dff6d8 100%);
  --bg-solid:#7fd4f5;

  --panel:rgba(255,255,255,.62);
  --panel-2:rgba(255,255,255,.52);
  --panel-3:rgba(255,255,255,.42);
  --panel-solid:rgba(255,255,255,.88);
  --panel-head:rgba(255,255,255,.55);

  --inset-soft:rgba(255,255,255,.35);
  --inset:rgba(0,0,0,.05);
  --inset-deep:rgba(255,255,255,.75);
  --raise:rgba(255,255,255,.55);
  --raise-soft:rgba(255,255,255,.4);
  --hover:rgba(255,255,255,.5);

  --field-bg:rgba(255,255,255,.85);
  --field-focus-bg:#ffffff;
  --select-bg:#eaf7ff;
  --stage-bg:#0a1a24;

  --ink:#0d3346;
  --dim:#1c4a5f;
  --faint:#4a7788;

  --line:rgba(13,51,70,.28);
  --line-soft:rgba(13,51,70,.14);

  --accent:#0a7ea8;
  --accent-wash:rgba(10,126,168,.10);
  --accent-dim:rgba(10,126,168,.16);
  --accent-line:rgba(10,126,168,.45);
  --hot:#128a5e;
  --hot-wash:rgba(18,138,94,.10);
  --hot-line:rgba(18,138,94,.4);

  --btn-bg:linear-gradient(180deg,rgba(255,255,255,.95),rgba(198,232,248,.85));
  --btn-border:rgba(13,51,70,.32);
  --btn-fg:#0d3346;
  --btn-hover-bg:linear-gradient(180deg,#ffffff,#a8ddf5);
  --btn-hover-fg:#062736;
  --btn-hover-border:#0a7ea8;

  --err:#b02020;
  --err-bg:rgba(176,32,32,.10);
  --err-line:rgba(176,32,32,.4);
  --on-err:#ffffff;
  --ok-bg:rgba(10,126,168,.12);
  --amber:#b8770a;
  --tgreen:#128a5e;
}

/* ---------------------------------------------------------------
   NEBULA — from the reference image. Deep violet space overhead
   burning to magenta and orange at the horizon. Warm white text so
   it reads against both ends.
   --------------------------------------------------------------- */
[data-theme="nebula"]{
  --bg:linear-gradient(180deg,
    #1a0a24 0%, #3d0f3a 20%, #6e1250 38%,
    #a81355 56%, #d81a54 72%, #f0374a 86%, #2a0716 100%);
  --bg-solid:#3d0f3a;

  --panel:rgba(18,5,28,.72);
  --panel-2:rgba(22,7,34,.62);
  --panel-3:rgba(14,4,22,.55);
  --panel-solid:rgba(12,3,20,.94);

  --ink:#fff2f8;
  --dim:#e8c4dd;
  --faint:#b389ab;

  --line:rgba(255,180,220,.26);
  --line-soft:rgba(255,180,220,.13);

  /* Starlight cyan against all that magenta. */
  --accent:#8fe8ff;
  --accent-wash:rgba(143,232,255,.10);
  --accent-dim:rgba(143,232,255,.16);
  --accent-line:rgba(143,232,255,.45);
  --hot:#ff5fa8;
  --hot-wash:rgba(255,95,168,.12);
  --hot-line:rgba(255,95,168,.42);

  --btn-bg:rgba(60,10,54,.7);
  --btn-border:rgba(255,180,220,.3);
  --btn-fg:#fff2f8;
  --btn-hover-bg:rgba(143,232,255,.18);
  --btn-hover-fg:#8fe8ff;
  --btn-hover-border:#8fe8ff;

  --amber:#ffb45f;
  --select-bg:#3d0f3a;
}

/* ---------------------------------------------------------------
   EXE — dark red bleeding to black. Blood red text, black buttons.
   --------------------------------------------------------------- */
[data-theme="exe"]{
  --bg:linear-gradient(180deg,#7a0808 0%,#4a0404 28%,#240202 60%,#0a0000 100%);
  --bg-solid:#4a0404;

  --panel:rgba(14,2,2,.84);
  --panel-2:rgba(20,3,3,.86);
  --panel-3:rgba(10,1,1,.86);
  --panel-solid:rgba(8,0,0,.96);
  --panel-head:rgba(255,0,0,.08);

  --inset-soft:rgba(0,0,0,.4);
  --inset:rgba(0,0,0,.6);
  --inset-deep:rgba(0,0,0,.8);
  --field-bg:#0a0000;
  --field-focus-bg:#140101;
  --select-bg:#140101;
  --stage-bg:#000;

  --ink:#ff5252;
  --dim:#ff3b3b;
  --faint:#c22a2a;

  --line:rgba(255,82,82,.38);
  --line-soft:rgba(255,82,82,.2);

  --accent:#ff7070;
  --accent-wash:rgba(255,112,112,.12);
  --accent-dim:rgba(255,112,112,.2);
  --accent-line:rgba(255,112,112,.5);
  --hot:#ff8a8a;
  --hot-wash:rgba(255,138,138,.14);
  --hot-line:rgba(255,138,138,.45);

  --btn-bg:#000000;
  --btn-border:#5c0d0d;
  --btn-fg:#f02a2a;
  --btn-hover-bg:#1a0000;
  --btn-hover-fg:#ff4040;
  --btn-hover-border:#ff2a2a;

  --err:#ff6a6a;
  --amber:#c93a2a;
  --tgreen:#a82020;
}

/* ---------------------------------------------------------------
   DRUID — dark purple rising to light purple, purple buttons,
   glowing blue text.
   --------------------------------------------------------------- */
[data-theme="druid"]{
  --bg:linear-gradient(180deg,#1c0b33 0%,#341356 30%,#552080 60%,#8b52c4 100%);
  --bg-solid:#341356;

  --panel:rgba(26,10,46,.72);
  --panel-2:rgba(34,14,58,.66);
  --panel-3:rgba(20,8,36,.6);
  --panel-solid:rgba(18,6,32,.94);
  --panel-head:rgba(150,110,255,.12);

  --ink:#9fdcff;
  --dim:#8ec8f0;
  --faint:#7fa3c4;

  --line:rgba(159,220,255,.26);
  --line-soft:rgba(159,220,255,.13);

  --accent:#5fe0ff;
  --accent-wash:rgba(95,224,255,.10);
  --accent-dim:rgba(95,224,255,.16);
  --accent-line:rgba(95,224,255,.45);
  --hot:#c98bff;
  --hot-wash:rgba(201,139,255,.12);
  --hot-line:rgba(201,139,255,.42);

  --btn-bg:#5b2a94;
  --btn-border:#7d3fc4;
  --btn-fg:#d9f4ff;
  --btn-hover-bg:#7d3fc4;
  --btn-hover-fg:#ffffff;
  --btn-hover-border:#5fe0ff;

  --select-bg:#341356;
  --amber:#b98bff;
}

/* The glow. Kept off small body text, where it would smear. */
[data-theme="druid"] h1,
[data-theme="druid"] h2,
[data-theme="druid"] h3,
[data-theme="druid"] .logo,
[data-theme="druid"] .tabs-nav a,
[data-theme="druid"] .section-card .label,
[data-theme="druid"] .panel-head{
  text-shadow:0 0 8px rgba(95,224,255,.65), 0 0 18px rgba(95,224,255,.35);
}

/* ---------------------------------------------------------------
   LAVA — dark red through orange into yellow. Brown-red buttons,
   headings in a red-to-yellow gradient.
   --------------------------------------------------------------- */
[data-theme="lava"]{
  --bg:linear-gradient(180deg,
    #3d0505 0%, #7a1206 22%, #b83a08 45%,
    #e8720c 68%, #f5a81a 85%, #ffd93d 100%);
  --bg-solid:#b83a08;

  --panel:rgba(38,6,4,.74);
  --panel-2:rgba(48,10,5,.68);
  --panel-3:rgba(30,5,3,.62);
  --panel-solid:rgba(26,4,3,.94);
  --panel-head:rgba(255,170,40,.12);

  --ink:#ffe9c2;
  --dim:#ffd49a;
  --faint:#d1a26a;

  --line:rgba(255,190,110,.3);
  --line-soft:rgba(255,190,110,.15);

  --accent:#ffd93d;
  --accent-wash:rgba(255,217,61,.10);
  --accent-dim:rgba(255,217,61,.17);
  --accent-line:rgba(255,217,61,.45);
  --hot:#ff7a1a;
  --hot-wash:rgba(255,122,26,.12);
  --hot-line:rgba(255,122,26,.42);

  --btn-bg:#5c2410;
  --btn-border:#8a3a18;
  --btn-fg:#ffd49a;
  --btn-hover-bg:#8a3a18;
  --btn-hover-fg:#ffd93d;
  --btn-hover-border:#ffd93d;

  --select-bg:#3d0505;
  --amber:#ffd93d;
  --tgreen:#ffa53d;
}

/* Molten headings. Body text stays solid so it can still be read. */
[data-theme="lava"] h1,
[data-theme="lava"] h2,
[data-theme="lava"] h3,
[data-theme="lava"] .logo,
[data-theme="lava"] .section-card .label,
[data-theme="lava"] .wordmark{
  background:linear-gradient(180deg,#ffe94a 0%,#ff9d1c 45%,#e8340c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  /* Gradient-filled text: no outline, and no stroke either — a stroke
     would draw a ring around the gradient and undo the effect. */
  -webkit-text-stroke:0;
}
/* Links inside gradient headings.
   background-clip:text clips the gradient to each element's OWN text.
   An <a> inside an h2 inherits the transparent fill from its parent but
   paints no gradient of its own, so the text comes out invisible — which
   is why announcement titles vanished on this theme while section labels
   (plain elements, no link inside) looked right. Giving the anchor the
   same background makes it paint its own gradient. */
[data-theme="lava"] h1 a,
[data-theme="lava"] h2 a,
[data-theme="lava"] h3 a,
[data-theme="lava"] .panel-head a,
[data-theme="lava"] .item h3 a,
[data-theme="lava"] .tr-titles .title{
  background:linear-gradient(180deg,#ffe94a 0%,#ff9d1c 45%,#e8340c 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  -webkit-text-stroke:0;
}

/* Hover has to drop the gradient, or the transparent fill would swallow
   the accent colour and hovering would look like nothing happened. */
[data-theme="lava"] h1 a:hover,
[data-theme="lava"] h2 a:hover,
[data-theme="lava"] h3 a:hover,
[data-theme="lava"] .panel-head a:hover,
[data-theme="lava"] .item h3 a:hover,
[data-theme="lava"] .tr-titles .title:hover{
  background:none;
  color:var(--accent);
  -webkit-text-fill-color:var(--accent);
}


/* ---------------------------------------------------------------
   BIBI — deep blue, gilded gold headings, silver body text.
   --------------------------------------------------------------- */
[data-theme="bibi"]{
  --bg:linear-gradient(180deg,
    #0a1a3d 0%, #10275c 24%, #17357e 48%,
    #1d4499 70%, #2b5bb8 100%);
  --bg-solid:#17357e;

  --panel:rgba(8,18,44,.72);
  --panel-2:rgba(11,24,56,.66);
  --panel-3:rgba(6,14,36,.6);
  --panel-solid:rgba(6,14,34,.94);
  --panel-head:rgba(212,175,55,.14);

  /* Silver for reading, gold reserved for headings (below). */
  --ink:#dfe6f0;
  --dim:#c3cddd;
  --faint:#8fa0ba;

  --line:rgba(212,175,55,.3);
  --line-soft:rgba(212,175,55,.15);

  --accent:#e8c45a;
  --accent-wash:rgba(232,196,90,.1);
  --accent-dim:rgba(232,196,90,.18);
  --accent-line:rgba(232,196,90,.45);
  --hot:#9fb8d8;
  --hot-wash:rgba(159,184,216,.12);
  --hot-line:rgba(159,184,216,.4);

  --btn-bg:linear-gradient(180deg,#1c3a76,#122a58);
  --btn-border:#d4af37;
  --btn-fg:#e8c45a;
  --btn-hover-bg:linear-gradient(180deg,#e8c45a,#b8912a);
  --btn-hover-fg:#0a1a3d;
  --btn-hover-border:#f0d98a;

  --field-bg:rgba(4,10,26,.6);
  --field-focus-bg:rgba(4,10,26,.8);
  --select-bg:#10275c;
  --amber:#e8c45a;
}

/* Gilding. Gradient fill needs the outline off, or the ring shows
   through where the letters are transparent. */
[data-theme="bibi"] h1,
[data-theme="bibi"] h2,
[data-theme="bibi"] h3,
[data-theme="bibi"] .logo,
[data-theme="bibi"] .post-name,
[data-theme="bibi"] .section-card .label,
[data-theme="bibi"] .panel-head{
  background:linear-gradient(180deg,#fdf3c4 0%,#e8c45a 38%,#b8912a 68%,#f0d98a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  /* Gradient-filled text: no outline, and no stroke either — a stroke
     would draw a ring around the gradient and undo the effect. */
  -webkit-text-stroke:0;
}
/* Links inside gradient headings.
   background-clip:text clips the gradient to each element's OWN text.
   An <a> inside an h2 inherits the transparent fill from its parent but
   paints no gradient of its own, so the text comes out invisible — which
   is why announcement titles vanished on this theme while section labels
   (plain elements, no link inside) looked right. Giving the anchor the
   same background makes it paint its own gradient. */
[data-theme="bibi"] h1 a,
[data-theme="bibi"] h2 a,
[data-theme="bibi"] h3 a,
[data-theme="bibi"] .panel-head a,
[data-theme="bibi"] .item h3 a,
[data-theme="bibi"] .tr-titles .title{
  background:linear-gradient(180deg,#fdf3c4 0%,#e8c45a 38%,#b8912a 68%,#f0d98a 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:none;
  -webkit-text-stroke:0;
}

/* Hover has to drop the gradient, or the transparent fill would swallow
   the accent colour and hovering would look like nothing happened. */
[data-theme="bibi"] h1 a:hover,
[data-theme="bibi"] h2 a:hover,
[data-theme="bibi"] h3 a:hover,
[data-theme="bibi"] .panel-head a:hover,
[data-theme="bibi"] .item h3 a:hover,
[data-theme="bibi"] .tr-titles .title:hover{
  background:none;
  color:var(--accent);
  -webkit-text-fill-color:var(--accent);
}


/* ---------------------------------------------------------------
   AURORA — ice at the top, icy blue through the middle, deep ocean
   at the bottom.
   --------------------------------------------------------------- */
[data-theme="aurora"]{
  --bg:linear-gradient(180deg,
    #eaf7fb 0%, #c3e8f2 14%, #8fd2e6 30%,
    #4fa8cc 50%, #2670a0 70%, #12406b 86%, #071f38 100%);
  --bg-solid:#4fa8cc;

  --panel:rgba(6,26,46,.7);
  --panel-2:rgba(8,32,56,.64);
  --panel-3:rgba(5,20,38,.58);
  --panel-solid:rgba(4,18,34,.93);
  --panel-head:rgba(180,235,250,.1);

  --ink:#eaf9ff;
  --dim:#c4e4f2;
  --faint:#8fb4c9;

  --line:rgba(180,235,250,.28);
  --line-soft:rgba(180,235,250,.14);

  --accent:#7defd8;
  --accent-wash:rgba(125,239,216,.1);
  --accent-dim:rgba(125,239,216,.18);
  --accent-line:rgba(125,239,216,.45);
  --hot:#9fd8ff;
  --hot-wash:rgba(159,216,255,.12);
  --hot-line:rgba(159,216,255,.4);

  --btn-bg:rgba(12,58,92,.8);
  --btn-border:rgba(180,235,250,.35);
  --btn-fg:#eaf9ff;
  --btn-hover-bg:rgba(125,239,216,.2);
  --btn-hover-fg:#7defd8;
  --btn-hover-border:#7defd8;

  --field-bg:rgba(3,16,30,.6);
  --field-focus-bg:rgba(3,16,30,.8);
  --select-bg:#12406b;
  --amber:#9fd8ff;

  /* Dark blue outline so the light text doesn't vanish against the
     icy white gradient at the top of the page. */
  --outline-color:#0a2a4a;
}

/* ---------------------------------------------------------------
   FOREST — deep forest green sinking into dark teal, light teal
   text with a glowing purple outline. Mystical.
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   dictator — concrete grey to black, white text, red used sparingly.

   The menace comes from restraint. Red is not the text colour; it is
   the accent that appears where something is interactive or alarming,
   so it reads as a warning rather than decoration. Panels are near
   black with hard, bright edges — the look of something official and
   unfriendly. Headings get a black outline so white type sits hard
   against the grey.
   --------------------------------------------------------------- */
/* ---------------------------------------------------------------
   creation — the answer to dictator.

   Where dictator is concrete falling into black with red where it
   warns, creation is white rising out of deep green with an electric
   green that is a little too bright to be comfortable. Same discipline,
   opposite direction: light instead of dark, growth instead of control.

   "Holy" here means luminous and clean — white surfaces, thin hard
   rules, plenty of air. The danger is in the accent: a saturated
   near-radioactive green that looks less like moss and more like
   something under a lamp in a lab. Used sparingly, the way dictator
   uses red.
   --------------------------------------------------------------- */
[data-theme="creation"]{
  /* Deep green at the foot, rising to white — light coming from above. */
  --bg:linear-gradient(180deg,
    #ffffff 0%, #f4fdf7 18%, #e4f8ec 38%,
    #c9efd9 56%, #96d9b4 74%, #4f9e77 89%, #14442f 100%);
  --bg-solid:#e4f8ec;
  --stage-bg:#07160f;

  /* White surfaces. The page is a lit room, not a screen. */
  --panel:rgba(255,255,255,.90);
  --panel-2:rgba(252,255,253,.84);
  --panel-3:rgba(247,253,249,.80);
  --panel-solid:rgba(255,255,255,.97);
  --panel-head:rgba(0,200,90,.09);

  --inset-soft:rgba(255,255,255,.60);
  --inset:rgba(255,255,255,.82);
  --inset-deep:rgba(10,60,38,.09);
  --raise:rgba(255,255,255,.75);
  --raise-soft:rgba(255,255,255,.5);
  --hover:rgba(0,200,90,.08);

  --field-bg:rgba(243,253,247,.92);
  --field-focus-bg:#ffffff;
  --select-bg:#f3fdf7;

  /* Very dark green rather than black — ink, not soot. */
  --ink:#0b2b1c;
  --dim:#1d4633;
  --faint:#4a705d;

  /* Thin, hard, dark rules. This is where the sharpness lives. */
  --line:rgba(11,43,28,.40);
  --line-soft:rgba(11,43,28,.18);

  /* The dangerous part. Bright enough to feel switched on. */
  --accent:#08823f;
  --accent-wash:rgba(0,214,95,.13);
  --accent-dim:rgba(0,214,95,.26);
  --accent-line:rgba(0,190,84,.62);
  --hot:#00d65f;
  --hot-wash:rgba(0,214,95,.18);
  --hot-line:rgba(0,214,95,.55);

  /* White buttons with a hard green edge; they light up when touched. */
  --btn-bg:rgba(255,255,255,.95);
  --btn-border:rgba(11,67,42,.55);
  --btn-fg:#0b3b26;
  --btn-hover-bg:#00c957;
  --btn-hover-fg:#04241a;
  --btn-hover-border:#00ff77;

  --err:#b3161d;
  --err-bg:rgba(179,22,29,.10);
  --err-line:rgba(179,22,29,.45);
  --on-err:#ffffff;
  --ok-bg:rgba(0,214,95,.14);
  --amber:#9a6a10;
  --tgreen:#08823f;

  /* Light theme: dark ink on white needs no outline. */
  --outline-color:#ffffff;
  --outline-w:0;
  --outline-sm-w:0;
  --heading-outline:none;
  --text-outline:none;
}

/* A bright green line under the menubar — dictator's red stripe,
   answered. */
[data-theme="creation"] .menubar{
  border-bottom:2px solid var(--hot);
}

/* Panel heads get a thin luminous rule and a faint green wash, so the
   white stays structured rather than blank. */
[data-theme="creation"] .panel-head{
  border-bottom:1px solid var(--accent-line);
}

/* Buttons glow rather than just fill — the one soft edge in an
   otherwise hard theme. */
[data-theme="creation"] .btn:hover{
  box-shadow:0 0 0 1px var(--hot), 0 0 14px rgba(0,214,95,.45);
}

/* Thumbnails run slightly hot: a touch oversaturated at rest, true on
   hover. The inverse of dictator, which is grey until you reach for it. */
[data-theme="creation"] .thumb{
  filter:saturate(1.18) brightness(1.03);
  transition:filter .18s ease;
}
[data-theme="creation"] .item:hover .thumb{
  filter:saturate(1) brightness(1);
}

[data-theme="dictator"]{
  --bg:linear-gradient(180deg,#3a3a3c 0%,#232325 34%,#141415 68%,#050505 100%);
  --bg-solid:#232325;

  --panel:rgba(12,12,13,.88);
  --panel-2:rgba(18,18,20,.9);
  --panel-3:rgba(8,8,9,.9);
  --panel-solid:rgba(6,6,7,.97);
  --panel-head:rgba(200,16,24,.1);

  --inset-soft:rgba(0,0,0,.45);
  --inset:rgba(0,0,0,.65);
  --inset-deep:rgba(0,0,0,.85);
  --field-bg:#0a0a0b;
  --field-focus-bg:#141416;
  --select-bg:#141416;
  --stage-bg:#000;

  /* White type, grey supporting text. Red is never the body colour. */
  --ink:#f2f2f2;
  --dim:#b8b8ba;
  --faint:#7d7d80;

  /* Hard, bright rules — the edges of a form you are not allowed to fill in. */
  --line:rgba(235,235,235,.32);
  --line-soft:rgba(235,235,235,.14);

  --accent:#d21118;
  --accent-wash:rgba(210,17,24,.14);
  --accent-dim:rgba(210,17,24,.24);
  --accent-line:rgba(210,17,24,.62);
  --hot:#ff2a2a;
  --hot-wash:rgba(255,42,42,.16);
  --hot-line:rgba(255,42,42,.5);

  --btn-bg:#0c0c0d;
  --btn-border:#6e6e72;
  --btn-fg:#f2f2f2;
  --btn-hover-bg:#d21118;
  --btn-hover-fg:#ffffff;
  --btn-hover-border:#ff2a2a;

  --err:#ff4444;
  --amber:#c9761a;
  --tgreen:#8a8a8e;

  /* Black outline behind white headings: hard edges, no glow. */
  --outline-color:#000000;
  --outline-w:1.5px;
}

/* A thin red bar under the menubar — the one piece of colour that is
   always present, like a stripe on a uniform. */
[data-theme="dictator"] .menubar{
  border-bottom:2px solid var(--accent);
}

/* Section thumbnails go cold and slightly desaturated until hovered. */
[data-theme="dictator"] .thumb{
  filter:grayscale(.55) contrast(1.08);
  transition:filter .18s ease;
}
[data-theme="dictator"] .item:hover .thumb{
  filter:grayscale(0) contrast(1);
}

[data-theme="forest"]{
  --bg:linear-gradient(180deg,
    #0a2e14 0%, #0c3818 14%, #0e4220 30%,
    #0c3a2a 50%, #0a3030 68%, #08262e 84%, #061e28 100%);
  --bg-solid:#0c3a2a;

  --panel:rgba(6,24,18,.74);
  --panel-2:rgba(8,30,22,.68);
  --panel-3:rgba(5,18,14,.62);
  --panel-solid:rgba(4,16,12,.94);
  --panel-head:rgba(120,220,200,.1);

  --ink:#8eecd8;
  --dim:#72d4be;
  --faint:#4ea08e;

  --line:rgba(142,236,216,.24);
  --line-soft:rgba(142,236,216,.12);

  --accent:#a0f0d8;
  --accent-wash:rgba(160,240,216,.09);
  --accent-dim:rgba(160,240,216,.15);
  --accent-line:rgba(160,240,216,.4);
  --hot:#c89eff;
  --hot-wash:rgba(200,158,255,.12);
  --hot-line:rgba(200,158,255,.4);

  --btn-bg:rgba(14,46,30,.8);
  --btn-border:rgba(142,236,216,.3);
  --btn-fg:#a0f0d8;
  --btn-hover-bg:rgba(160,120,255,.18);
  --btn-hover-fg:#d0b8ff;
  --btn-hover-border:#c89eff;

  --field-bg:rgba(4,14,10,.65);
  --field-focus-bg:rgba(4,14,10,.85);
  --select-bg:#0a3030;

  --amber:#a0f0d8;
  --tgreen:#72d4be;

  /* Purple outline on everything — gives the text a mystical glow
     that separates it from the dark teal-green background. */
  /* The purple edge is this theme's signature, but at full strength it
     haloes the teal ink and the text reads as purple rather than teal.
     Thinner and softer keeps the character without recolouring words. */
  --outline-color:rgba(120,70,200,.45);
  --outline-w:1px;
}

/* The glow. Applied to headings and nav elements; body text gets
   the outline alone so it stays readable at small sizes. */
[data-theme="forest"] h1,
[data-theme="forest"] h2,
[data-theme="forest"] h3,
[data-theme="forest"] .logo,
[data-theme="forest"] .tabs-nav a,
[data-theme="forest"] .section-card .label,
[data-theme="forest"] .panel-head{
  text-shadow:
    0 0 6px rgba(180,120,255,.6),
    0 0 14px rgba(160,100,255,.4),
    0 0 28px rgba(140,80,240,.25);
}

/* ---------------------------------------------------------------
   Shared adjustments
   --------------------------------------------------------------- */

/* On light themes the scanline-style hatch on empty thumbnails is
   too faint to see, so darken it. */
[data-theme="aero"] .thumb,
[data-theme="default"] .thumb,
[data-theme="equation"] .thumb{
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.06) 0 6px,transparent 6px 12px),
    rgba(0,0,0,.05);
}

/* Uploaded games sit on their own background; keep the frame dark on
   light themes so a transparent game doesn't vanish. */
[data-theme="aero"] .stage,
[data-theme="default"] .stage,
[data-theme="equation"] .stage{background:var(--stage-bg)}

/* The theme picker itself */
.theme-pick{
  font-family:var(--mono);font-weight:700;font-size:.74rem;
  color:var(--dim);background:var(--field-bg);
  border:1px solid var(--line-soft);
  padding:.15rem .3rem;width:auto;cursor:pointer;
}
.theme-pick:hover{color:var(--ink);border-color:var(--accent)}
.theme-pick:focus{outline:none;border-color:var(--accent)}

.theme-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:1px;background:var(--line-soft);border-top:1px solid var(--line-soft);
}
.theme-card{
  background:var(--panel-2);padding:.7rem;
  display:flex;flex-direction:column;gap:.5rem;
  border:0;cursor:pointer;text-align:left;
  font-family:var(--mono);font-weight:700;
  transition:background .15s ease;
}
.theme-card:hover{background:var(--accent-wash)}
.theme-card.on{background:var(--accent-dim);box-shadow:inset 0 0 0 2px var(--accent)}
.theme-swatch{
  height:52px;border:1px solid var(--line-soft);
  display:flex;align-items:flex-end;justify-content:flex-end;padding:.25rem;
}
.theme-swatch span{
  width:14px;height:14px;border:1px solid rgba(0,0,0,.35);
}
.theme-name{
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
}
.theme-note{font-size:.7rem;color:var(--faint);line-height:1.45}