/* Cape Cod Surf Report — color palettes & scene per theme */

/* ─── Default: Old Skool Green (phosphor CRT) ─── */
html[data-theme="green"] {
  --bg: #000000;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #001a00 0%, #000 50%, #000 100%);
  --panel: #020a02;
  --text: #b8ffb8;
  --text-dim: #33ff33;
  --cyan: #66ff66;
  --magenta: #1a6b1a;
  --yellow: #aaffaa;
  --red: #00ff00;
  --green: #00ff41;
  --blue: #44cc44;
  --orange: #88ff88;
  --rainbow: linear-gradient(
    90deg,
    #003300,
    #00aa00,
    #00ff00,
    #66ff66,
    #00ff00,
    #00aa00,
    #003300
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 #004400;
  --focus: 0 0 0 3px #000, 0 0 0 6px #00ff00;
  --starfield-opacity: 0.55;
  --starfield: radial-gradient(1px 1px at 20px 30px, #66ff66, transparent),
    radial-gradient(1px 1px at 90px 140px, #00ff00, transparent),
    radial-gradient(1px 1px at 200px 90px, #aaffaa, transparent),
    radial-gradient(1px 1px at 280px 220px, #33ff33, transparent);
  --grid-floor: linear-gradient(rgba(0, 255, 65, 0.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.1) 1px, transparent 1px);
  --grid-opacity: 0.45;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%2300ff41' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%2333ff33' fill-opacity='0.85' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%2366ff66' fill-opacity='0.45' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 #004400);
  --crt-tint: rgba(0, 80, 0, 0.08);
  --meta-theme: #001a00;
}

/* ─── Activision rainbow cartridge ─── */
html[data-theme="activision"] {
  --bg: #000000;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #1a0040 0%, #000 45%, #000 100%);
  --panel: #0a0a12;
  --text: #f0f0f0;
  --text-dim: #00ff00;
  --cyan: #00ffff;
  --magenta: #ff00ff;
  --yellow: #ffff00;
  --red: #ff0044;
  --green: #00ff66;
  --blue: #4488ff;
  --orange: #ff8800;
  --rainbow: linear-gradient(
    90deg,
    #ff0000,
    #ff8800,
    #ffff00,
    #00ff00,
    #00ffff,
    #0088ff,
    #ff00ff
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 var(--magenta);
  --focus: 0 0 0 3px #000, 0 0 0 6px var(--yellow);
  --starfield-opacity: 0.85;
  --starfield: radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 80px 120px, var(--cyan), transparent),
    radial-gradient(2px 2px at 160px 80px, var(--magenta), transparent),
    radial-gradient(1px 1px at 250px 200px, #fff, transparent),
    radial-gradient(1px 1px at 320px 50px, var(--yellow), transparent);
  --grid-floor: linear-gradient(rgba(0, 255, 255, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 0, 255, 0.1) 1px, transparent 1px);
  --grid-opacity: 0.5;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%2300ffff' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%23ff00ff' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%23ffff00' fill-opacity='0.6' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 var(--magenta));
  --crt-tint: transparent;
  --meta-theme: #000000;
}

/* ─── Amber CRT ─── */
html[data-theme="amber"] {
  --bg: #000000;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #1a1000 0%, #000 50%, #000 100%);
  --panel: #0a0802;
  --text: #ffd89a;
  --text-dim: #ffb000;
  --cyan: #ffcc66;
  --magenta: #8b5a00;
  --yellow: #ffaa00;
  --red: #ff8800;
  --green: #ffbb33;
  --blue: #cc8833;
  --orange: #ff9900;
  --rainbow: linear-gradient(
    90deg,
    #331a00,
    #aa6600,
    #ffaa00,
    #ffcc00,
    #ffaa00,
    #aa6600,
    #331a00
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 #553300;
  --focus: 0 0 0 3px #000, 0 0 0 6px #ffaa00;
  --starfield-opacity: 0.5;
  --starfield: radial-gradient(1px 1px at 30px 40px, #ffcc00, transparent),
    radial-gradient(1px 1px at 100px 160px, #ff9900, transparent),
    radial-gradient(1px 1px at 220px 70px, #ffdd88, transparent);
  --grid-floor: linear-gradient(rgba(255, 170, 0, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 136, 0, 0.1) 1px, transparent 1px);
  --grid-opacity: 0.4;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%23ffaa00' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%23ff8800' fill-opacity='0.8' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%23ffcc66' fill-opacity='0.5' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 #442200);
  --crt-tint: rgba(80, 40, 0, 0.1);
  --meta-theme: #1a1000;
}

/* ─── Ocean Tron (cool modern arcade) ─── */
html[data-theme="ocean"] {
  --bg: #020810;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #0a2840 0%, #020810 55%, #000 100%);
  --panel: #061820;
  --text: #d4f4ff;
  --text-dim: #5ec8e8;
  --cyan: #00e8c8;
  --magenta: #0088aa;
  --yellow: #7eb8ff;
  --red: #ff6b5a;
  --green: #20c997;
  --blue: #4488ff;
  --orange: #0dcaf0;
  --rainbow: linear-gradient(
    90deg,
    #004466,
    #00aacc,
    #00e8c8,
    #7eb8ff,
    #00e8c8,
    #00aacc,
    #004466
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 #006688;
  --focus: 0 0 0 3px #020810, 0 0 0 6px #00e8c8;
  --starfield-opacity: 0.7;
  --starfield: radial-gradient(1px 1px at 40px 50px, #7eb8ff, transparent),
    radial-gradient(1px 1px at 120px 100px, #00e8c8, transparent),
    radial-gradient(1px 1px at 240px 180px, #fff, transparent);
  --grid-floor: linear-gradient(rgba(0, 232, 200, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(68, 136, 255, 0.1) 1px, transparent 1px);
  --grid-opacity: 0.45;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%2300e8c8' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%234488ff' fill-opacity='0.85' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%237eb8ff' fill-opacity='0.5' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 #004466);
  --crt-tint: rgba(0, 60, 80, 0.08);
  --meta-theme: #020810;
}

/* ─── LCARS (Star Trek: The Next Generation) ─── */
html[data-theme="lcars"] {
  --bg: #000000;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #1a0f00 0%, #000 55%, #000 100%);
  --panel: #0a0608;
  --text: #ffd8a0;
  --text-dim: #cc99cc;
  --cyan: #99ccff;
  --magenta: #cc6699;
  --yellow: #ffcc66;
  --red: #cc6666;
  --green: #ff9966;
  --blue: #9999ff;
  --orange: #ff9933;
  --rainbow: linear-gradient(
    90deg,
    #cc6666,
    #ff9966,
    #ffcc66,
    #cc99cc,
    #9999ff,
    #99ccff,
    #cc6699
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 #cc6699;
  --focus: 0 0 0 3px #000, 0 0 0 6px #ff9966;
  --starfield-opacity: 0.8;
  --starfield: radial-gradient(1px 1px at 30px 40px, #ffcc66, transparent),
    radial-gradient(1px 1px at 110px 120px, #cc99cc, transparent),
    radial-gradient(1px 1px at 220px 80px, #99ccff, transparent),
    radial-gradient(1px 1px at 300px 200px, #fff, transparent);
  --grid-floor: linear-gradient(rgba(255, 153, 102, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204, 153, 204, 0.1) 1px, transparent 1px);
  --grid-opacity: 0.4;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%23ff9966' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%23cc99cc' fill-opacity='0.85' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%239999ff' fill-opacity='0.5' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 #cc6699);
  --crt-tint: rgba(60, 30, 0, 0.08);
  --meta-theme: #1a0f00;
}

/* ─── WarGames (WOPR phosphor blue terminal) ─── */
html[data-theme="wargames"] {
  --bg: #000204;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #001824 0%, #000204 55%, #000 100%);
  --panel: #00141c;
  --text: #aee9ff;
  --text-dim: #3aa6cc;
  --cyan: #00d4ff;
  --magenta: #006688;
  --yellow: #5fd0ff;
  --red: #ff3b30;
  --green: #00ffd0;
  --blue: #0099cc;
  --orange: #33b5e5;
  --rainbow: linear-gradient(
    90deg,
    #002233,
    #006688,
    #00aacc,
    #00d4ff,
    #00aacc,
    #006688,
    #002233
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 #004459;
  --focus: 0 0 0 3px #000, 0 0 0 6px #00d4ff;
  --starfield-opacity: 0.5;
  --starfield: radial-gradient(1px 1px at 30px 40px, #00d4ff, transparent),
    radial-gradient(1px 1px at 120px 110px, #5fd0ff, transparent),
    radial-gradient(1px 1px at 230px 80px, #00ffd0, transparent);
  --grid-floor: linear-gradient(rgba(0, 212, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 212, 255, 0.12) 1px, transparent 1px);
  --grid-opacity: 0.55;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%2300d4ff' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%230099cc' fill-opacity='0.85' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%2300ffd0' fill-opacity='0.45' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 #003344);
  --crt-tint: rgba(0, 70, 90, 0.12);
  --meta-theme: #001824;
}

/* ─── Blade Runner (neon noir / Tyrell amber & teal) ─── */
html[data-theme="bladerunner"] {
  --bg: #050308;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #2a0d18 0%, #0a0410 55%, #000 100%);
  --panel: #120814;
  --text: #ffd9b0;
  --text-dim: #c98a6a;
  --cyan: #2ad7d0;
  --magenta: #ff2d7e;
  --yellow: #ffb347;
  --red: #ff4d6d;
  --green: #36e0b0;
  --blue: #4a7bd0;
  --orange: #ff8c42;
  --rainbow: linear-gradient(
    90deg,
    #ff2d7e,
    #ff8c42,
    #ffb347,
    #2ad7d0,
    #4a7bd0,
    #ff2d7e
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 #6a1030;
  --focus: 0 0 0 3px #000, 0 0 0 6px #2ad7d0;
  --starfield-opacity: 0.7;
  --starfield: radial-gradient(1px 1px at 35px 50px, #ff2d7e, transparent),
    radial-gradient(1px 1px at 120px 120px, #ffb347, transparent),
    radial-gradient(1px 1px at 230px 80px, #2ad7d0, transparent),
    radial-gradient(2px 2px at 300px 200px, #4a7bd0, transparent);
  --grid-floor: linear-gradient(rgba(42, 215, 208, 0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 45, 126, 0.1) 1px, transparent 1px);
  --grid-opacity: 0.5;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%232ad7d0' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%23ff2d7e' fill-opacity='0.8' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%23ffb347' fill-opacity='0.5' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 #6a1030);
  --crt-tint: rgba(60, 10, 30, 0.12);
  --meta-theme: #0a0410;
}

/* ─── Tron (electric cyan & orange on the Grid) ─── */
html[data-theme="tron"] {
  --bg: #000308;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #001a26 0%, #000308 55%, #000 100%);
  --panel: #03101a;
  --text: #cdefff;
  --text-dim: #5fa8c8;
  --cyan: #6ef0ff;
  --magenta: #00a3cc;
  --yellow: #ff9d2e;
  --red: #ff6a00;
  --green: #00e5ff;
  --blue: #1fb6e8;
  --orange: #ffae42;
  --rainbow: linear-gradient(
    90deg,
    #00131c,
    #008cb3,
    #00e5ff,
    #6ef0ff,
    #ff9d2e,
    #ff6a00,
    #00131c
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 #004a66;
  --focus: 0 0 0 3px #000, 0 0 0 6px #6ef0ff;
  --starfield-opacity: 0.6;
  --starfield: radial-gradient(1px 1px at 30px 40px, #6ef0ff, transparent),
    radial-gradient(1px 1px at 120px 110px, #00e5ff, transparent),
    radial-gradient(1px 1px at 230px 80px, #ff9d2e, transparent),
    radial-gradient(1px 1px at 300px 200px, #fff, transparent);
  --grid-floor: linear-gradient(rgba(110, 240, 255, 0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 229, 255, 0.14) 1px, transparent 1px);
  --grid-opacity: 0.7;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%236ef0ff' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%2300e5ff' fill-opacity='0.85' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%23ff9d2e' fill-opacity='0.5' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 #004a66);
  --crt-tint: rgba(0, 60, 80, 0.1);
  --meta-theme: #001a26;
}

/* ─── Aliens (Colonial Marine green CRT & hazard amber) ─── */
html[data-theme="aliens"] {
  --bg: #020402;
  --bg-sky: radial-gradient(ellipse at 50% 0%, #0a1605 0%, #020402 55%, #000 100%);
  --panel: #080d06;
  --text: #c8ffb0;
  --text-dim: #7bbf5a;
  --cyan: #8dff5a;
  --magenta: #4a7a1f;
  --yellow: #ffd633;
  --red: #ff5630;
  --green: #5dff3b;
  --blue: #9ad14a;
  --orange: #ffae00;
  --rainbow: linear-gradient(
    90deg,
    #1a3308,
    #4a7a1f,
    #8dff5a,
    #ffd633,
    #ffae00,
    #4a7a1f,
    #1a3308
  );
  --shadow-pixel: 4px 4px 0 #000, 6px 6px 0 #2c4a12;
  --focus: 0 0 0 3px #000, 0 0 0 6px #8dff5a;
  --starfield-opacity: 0.45;
  --starfield: radial-gradient(1px 1px at 30px 40px, #8dff5a, transparent),
    radial-gradient(1px 1px at 120px 110px, #5dff3b, transparent),
    radial-gradient(1px 1px at 230px 80px, #ffd633, transparent);
  --grid-floor: linear-gradient(rgba(141, 255, 90, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 174, 0, 0.1) 1px, transparent 1px);
  --grid-opacity: 0.55;
  --wave-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100'%3E%3Cpath fill='%238dff5a' d='M0,50 C200,90 400,10 600,50 C800,90 1000,10 1200,50 L1200,100 L0,100 Z'/%3E%3C/svg%3E");
  --wave-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90'%3E%3Cpath fill='%234a7a1f' fill-opacity='0.85' d='M0,45 C250,80 500,15 750,45 C950,75 1100,30 1200,45 L1200,90 L0,90 Z'/%3E%3C/svg%3E");
  --wave-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80'%3E%3Cpath fill='%23ffd633' fill-opacity='0.45' d='M0,40 C300,70 600,20 900,40 C1050,55 1150,35 1200,40 L1200,80 L0,80 Z'/%3E%3C/svg%3E");
  --wave-filter-1: drop-shadow(0 -4px 0 #2c4a12);
  --crt-tint: rgba(20, 50, 0, 0.12);
  --meta-theme: #0a1605;
}

.crt-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--crt-tint, transparent);
  pointer-events: none;
}

html[data-theme="green"] .crt-overlay {
  opacity: 0.45;
}

/* ─── Theme picker UI ─── */
.theme-picker {
  margin: 0;
  padding: 0.5rem 0.65rem;
  border: 3px solid var(--green);
  background: #000;
  box-shadow: 2px 2px 0 var(--magenta);
}

.theme-picker-legend {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--yellow);
  padding: 0 0.35rem;
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.theme-chip {
  display: inline-flex;
  cursor: pointer;
}

.theme-chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.theme-chip span {
  display: inline-block;
  padding: 0.4rem 0.65rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-dim);
  border: 2px solid var(--blue);
  background: var(--panel);
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}

.theme-chip:hover span {
  border-color: var(--cyan);
  color: var(--text);
}

.theme-chip input:focus-visible + span {
  box-shadow: var(--focus);
}

.theme-chip input:checked + span,
.theme-chip.is-selected span {
  color: #000;
  background: var(--green);
  border-color: var(--yellow);
  box-shadow: 2px 2px 0 #000;
}

@media (max-width: 640px) {
  .header-tools {
    align-items: stretch;
    width: 100%;
  }

  .theme-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .theme-chip span {
    width: 100%;
    text-align: center;
  }
}