/* Additional themes with their own typography, tile shapes and scene colours.
   Each theme sets the shared custom properties (colours, fonts, particle colours, --scene-dark) and then restyles components. */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Patrick+Hand&family=VT323&family=Merriweather:wght@400;700;900&family=Space+Grotesk:wght@500;700&display=swap');

h1,h2,h3,summary,.brand,.element-tile strong,.hero-symbol,.inset-symbol,.inset-text h3,.group-popover h3 { font-family:var(--display); }

/* ---------- Školska ploča: chalk on a green board in a wooden frame ---------- */
body[data-theme="chalkboard"] {
  --sans:'Patrick Hand',system-ui,sans-serif; --display:'Caveat','Patrick Hand',cursive; --mono:'Patrick Hand',ui-monospace,monospace;
  --bg:#1d3a2c; --panel:rgba(30,62,46,.92); --panel-solid:#244a37; --text:#f4f1e6; --muted:#c3cfb9; --line:rgba(244,241,230,.28); --accent:#fff3a8; --accent-rgb:255,243,168;
  --tile:#25503b; --tile-text:#fbf8ee; --shadow:0 10px 30px rgba(0,0,0,.35); --proton:#ff9a9a; --neutron:#fff1a8; --electron:#ffffff;
  --scene:radial-gradient(ellipse at 50% 45%,rgba(255,255,255,.06),transparent 60%),#21442f;
  background:radial-gradient(ellipse at 30% 0%,rgba(255,255,255,.07),transparent 45%),repeating-linear-gradient(115deg,rgba(255,255,255,.012) 0 2px,transparent 2px 7px),#1d3a2c; font-size:15px;
}
body[data-theme="chalkboard"] .stars,body[data-theme="chalkboard"] .canvas-wrap::before { display:none; }
body[data-theme="chalkboard"] .panel { border:9px solid #7a4d27; border-radius:6px; box-shadow:inset 0 0 0 2px #5c3716,inset 0 0 40px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.4); backdrop-filter:none; }
body[data-theme="chalkboard"] .element-tile { border:2px dashed color-mix(in srgb,var(--family) 75%,#fff); border-radius:3px; background:color-mix(in srgb,var(--family) 10%,transparent); box-shadow:none; }
body[data-theme="chalkboard"] .element-tile::before { display:none; }
body[data-theme="chalkboard"] .element-tile strong { color:color-mix(in srgb,var(--family) 35%,#fff); font-size:max(11px,40cqi); font-weight:700; text-shadow:0 0 1px #fff; }
body[data-theme="chalkboard"] .element-tile.selected { border-style:solid; background:color-mix(in srgb,var(--family) 25%,transparent); box-shadow:0 0 0 2px #fff3a8; }
body[data-theme="chalkboard"] .mode-tab.active { color:#1d3a2c; background:#fff3a8; box-shadow:none; }
body[data-theme="chalkboard"] .alkali{--family:#ffb0b0}body[data-theme="chalkboard"] .alkaline{--family:#ffd59a}body[data-theme="chalkboard"] .transition{--family:#a8d8ff}body[data-theme="chalkboard"] .post-transition{--family:#b9f0c8}body[data-theme="chalkboard"] .metalloid{--family:#dcc4ff}body[data-theme="chalkboard"] .nonmetal{--family:#d8ffb0}body[data-theme="chalkboard"] .halogen{--family:#ffc4f0}body[data-theme="chalkboard"] .noble{--family:#b0fff4}body[data-theme="chalkboard"] .lanthanide{--family:#fff0a0}body[data-theme="chalkboard"] .actinide{--family:#ffc8b0}
body[data-theme="chalkboard"] .brand-mark { color:#1d3a2c; background:#f4f1e6; box-shadow:none; }

/* ---------- Nacrt: technical blueprint, outlines only ---------- */
body[data-theme="blueprint"] {
  --sans:'Space Grotesk',system-ui,sans-serif; --display:'Space Grotesk',system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace;
  --bg:#0b3d6e; --panel:rgba(12,68,120,.55); --panel-solid:#0d4a82; --text:#eaf4ff; --muted:#a9c8e8; --line:rgba(234,244,255,.35); --accent:#ffffff; --accent-rgb:255,255,255;
  --tile:transparent; --tile-text:#f4f9ff; --shadow:none; --proton:#ffffff; --neutron:#9cc9f5; --electron:#ffe9a6;
  --scene:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,#0c4478;
  background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/16px 16px,linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px) 0 0/80px 80px,linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px) 0 0/80px 80px,#0b3d6e;
}
body[data-theme="blueprint"] .stars,body[data-theme="blueprint"] .canvas-wrap::before,body[data-theme="blueprint"] .canvas-wrap::after { display:none; }
body[data-theme="blueprint"] .panel { border:1.5px solid rgba(255,255,255,.7); border-radius:0; backdrop-filter:none; box-shadow:4px 4px 0 rgba(255,255,255,.12); }
body[data-theme="blueprint"] .element-tile { border:1px solid rgba(255,255,255,.75); border-radius:0; background:transparent; box-shadow:none; }
body[data-theme="blueprint"] .element-tile::before { inset:auto 0 0 auto; width:22%; height:22%; background:linear-gradient(135deg,transparent 50%,var(--family) 50%); opacity:1; }
body[data-theme="blueprint"] .element-tile strong { font-weight:500; letter-spacing:.02em; }
body[data-theme="blueprint"] .element-tile:hover { transform:none; background:rgba(255,255,255,.08); box-shadow:none; }
body[data-theme="blueprint"] .element-tile.selected { transform:none; border:2px solid #ffe9a6; background:rgba(255,233,166,.12); box-shadow:none; }
body[data-theme="blueprint"] .mode-tab,body[data-theme="blueprint"] .mode-tabs,body[data-theme="blueprint"] button,body[data-theme="blueprint"] select,body[data-theme="blueprint"] .stats div { border-radius:0; }
body[data-theme="blueprint"] .mode-tab.active { color:#0b3d6e; background:#fff; box-shadow:none; }
body[data-theme="blueprint"] .hero-symbol,body[data-theme="blueprint"] .inset-symbol { border:1.5px solid #fff; border-radius:0; background:transparent; box-shadow:none; }
body[data-theme="blueprint"] h1,body[data-theme="blueprint"] h2,body[data-theme="blueprint"] summary { text-transform:uppercase; letter-spacing:.08em; font-weight:500; }

/* ---------- Terminal: green phosphor CRT ---------- */
body[data-theme="terminal"] {
  --sans:"DM Mono",ui-monospace,monospace; --display:'VT323',ui-monospace,monospace; --mono:"DM Mono",ui-monospace,monospace;
  --bg:#020602; --panel:rgba(2,14,4,.9); --panel-solid:#031105; --text:#7dff9a; --muted:#3fae5a; --line:rgba(80,255,120,.28); --accent:#b8ffc6; --accent-rgb:184,255,198;
  --tile:#031207; --tile-text:#9dffb0; --shadow:0 0 24px rgba(40,255,90,.08); --proton:#ffb347; --neutron:#4dff7a; --electron:#d4ffe0;
  --scene:radial-gradient(ellipse at center,rgba(40,255,90,.08),transparent 65%),#010501;
  background:#020602; font-size:12.5px; text-shadow:0 0 4px rgba(90,255,130,.45);
}
body[data-theme="terminal"]::after { content:""; position:fixed; inset:0; z-index:60; pointer-events:none; background:repeating-linear-gradient(rgba(0,0,0,.22) 0 1px,transparent 1px 3px); mix-blend-mode:multiply; }
body[data-theme="terminal"] .stars,body[data-theme="terminal"] .canvas-wrap::before { display:none; }
body[data-theme="terminal"] .panel { border:1px solid #2ee05a; border-radius:0; backdrop-filter:none; box-shadow:0 0 0 1px rgba(46,224,90,.25),0 0 30px rgba(46,224,90,.08) inset; }
body[data-theme="terminal"] .element-tile { border:1px solid color-mix(in srgb,var(--family) 70%,transparent); border-radius:0; background:#031207; box-shadow:none; }
body[data-theme="terminal"] .element-tile::before { height:max(2px,6cqi); }
body[data-theme="terminal"] .element-tile strong { font-weight:400; font-size:max(12px,44cqi); color:var(--family); }
body[data-theme="terminal"] .element-tile span,body[data-theme="terminal"] .element-tile em { font-size:max(8px,15cqi); }
body[data-theme="terminal"] .element-tile:hover { transform:none; background:color-mix(in srgb,var(--family) 18%,#031207); box-shadow:none; }
body[data-theme="terminal"] .element-tile.selected { transform:none; color:#020602; text-shadow:none; background:var(--family); box-shadow:none; border-color:var(--family); }
body[data-theme="terminal"] .element-tile.selected strong { color:#020602; }
/* Phosphor palette: green, amber and cyan tubes */
body[data-theme="terminal"] .alkali,body[data-theme="terminal"] .alkaline{--family:#ffb347}body[data-theme="terminal"] .transition,body[data-theme="terminal"] .post-transition{--family:#5dff86}body[data-theme="terminal"] .metalloid,body[data-theme="terminal"] .nonmetal,body[data-theme="terminal"] .halogen{--family:#b8ffc6}body[data-theme="terminal"] .noble{--family:#5ff2ff}body[data-theme="terminal"] .lanthanide,body[data-theme="terminal"] .actinide{--family:#ffd36b}
body[data-theme="terminal"] button,body[data-theme="terminal"] select,body[data-theme="terminal"] .mode-tabs,body[data-theme="terminal"] .mode-tab,body[data-theme="terminal"] .stats div,body[data-theme="terminal"] .count-pill { border-radius:0; }
body[data-theme="terminal"] .mode-tab.active { color:#020602; background:#7dff9a; text-shadow:none; box-shadow:none; }
body[data-theme="terminal"] .mode-tab.active::before { content:"> "; }
body[data-theme="terminal"] .brand-mark { color:#020602; background:#7dff9a; border-radius:0; box-shadow:0 0 12px #2ee05a; font-family:var(--mono); }
body[data-theme="terminal"] .hero-symbol,body[data-theme="terminal"] .inset-symbol { border-radius:0; background:#031207; box-shadow:none; }
body[data-theme="terminal"] h1,body[data-theme="terminal"] h2,body[data-theme="terminal"] .canvas-identity span { font-family:var(--display); font-weight:400; letter-spacing:.02em; }
body[data-theme="terminal"] .atom-heading h2 { font-size:28px; }

/* ---------- Udžbenik: printed textbook on cream paper ---------- */
body[data-theme="textbook"] {
  --sans:'Merriweather',Georgia,serif; --display:'Merriweather',Georgia,serif; --mono:"DM Mono",ui-monospace,monospace;
  --bg:#f6f0e1; --panel:#fffdf7; --panel-solid:#fffdf7; --text:#1f1b16; --muted:#6b6255; --line:rgba(31,27,22,.2); --accent:#8c2f1c; --accent-rgb:140,47,28;
  --tile:#fffdf7; --tile-text:#1f1b16; --shadow:0 1px 3px rgba(60,40,10,.12); --proton:#c8423a; --neutron:#4a6f9c; --electron:#1f1b16; --scene-dark:0;
  --scene:radial-gradient(ellipse at center,#fffdf7,#f1e9d6);
  background:#f6f0e1; font-size:13px;
}
body[data-theme="textbook"] .stars,body[data-theme="textbook"] .canvas-wrap::before,body[data-theme="textbook"] .canvas-wrap::after { display:none; }
body[data-theme="textbook"] .panel { border:1px solid #cfc4ad; border-radius:2px; backdrop-filter:none; }
body[data-theme="textbook"] .element-tile { color:#1f1b16; border:1.5px solid #3a3228; border-radius:0; background:color-mix(in srgb,var(--family) 55%,#fffdf7); box-shadow:none; }
body[data-theme="textbook"] .element-tile::before { display:none; }
body[data-theme="textbook"] .element-tile strong { font-weight:900; }
body[data-theme="textbook"] .element-tile:hover { transform:none; box-shadow:2px 2px 0 #3a3228; }
body[data-theme="textbook"] .element-tile.selected { transform:none; border:2.5px solid #8c2f1c; background:color-mix(in srgb,var(--family) 75%,#fffdf7); box-shadow:2px 2px 0 #8c2f1c; }
body[data-theme="textbook"] .alkali{--family:#f2a7a0}body[data-theme="textbook"] .alkaline{--family:#f6c995}body[data-theme="textbook"] .transition{--family:#a9c6e8}body[data-theme="textbook"] .post-transition{--family:#a8d8b9}body[data-theme="textbook"] .metalloid{--family:#c9b6e4}body[data-theme="textbook"] .nonmetal{--family:#cfe8a4}body[data-theme="textbook"] .halogen{--family:#e9b2d6}body[data-theme="textbook"] .noble{--family:#9fdbe0}body[data-theme="textbook"] .lanthanide{--family:#efd98f}body[data-theme="textbook"] .actinide{--family:#e9bfa3}
body[data-theme="textbook"] .mode-tab.active { color:#fffdf7; background:#8c2f1c; box-shadow:none; }
body[data-theme="textbook"] .brand-mark { color:#fffdf7; background:#8c2f1c; box-shadow:none; }
body[data-theme="textbook"] .hero-symbol,body[data-theme="textbook"] .inset-symbol { color:#1f1b16; border:1.5px solid #3a3228; border-radius:0; background:color-mix(in srgb,var(--family) 55%,#fffdf7); box-shadow:none; }

/* ---------- Neobrutalizam: thick outlines, hard shadows, flat colours ---------- */
body[data-theme="brutalist"] {
  --sans:'Space Grotesk',system-ui,sans-serif; --display:'Space Grotesk',system-ui,sans-serif; --mono:"DM Mono",ui-monospace,monospace;
  --bg:#fff4d6; --panel:#ffffff; --panel-solid:#ffffff; --text:#111; --muted:#444; --line:#111; --accent:#2b44ff; --accent-rgb:43,68,255;
  --tile:#fff; --tile-text:#111; --shadow:6px 6px 0 #111; --proton:#ff4f4f; --neutron:#ffd400; --electron:#2b44ff; --scene-dark:0;
  --scene:#fffbea;
  background:radial-gradient(#111 1px,transparent 1.4px) 0 0/22px 22px,#fff4d6;
}
body[data-theme="brutalist"] .stars,body[data-theme="brutalist"] .canvas-wrap::before,body[data-theme="brutalist"] .canvas-wrap::after { display:none; }
body[data-theme="brutalist"] .panel { border:3px solid #111; border-radius:14px; backdrop-filter:none; box-shadow:6px 6px 0 #111; }
body[data-theme="brutalist"] .element-tile { color:#111; border:2.5px solid #111; border-radius:8px; background:var(--family); box-shadow:3px 3px 0 #111; }
body[data-theme="brutalist"] .element-tile::before { display:none; }
body[data-theme="brutalist"] .element-tile strong { font-weight:700; }
body[data-theme="brutalist"] .element-tile span,body[data-theme="brutalist"] .element-tile em,body[data-theme="brutalist"] .element-tile small { opacity:1; }
body[data-theme="brutalist"] .element-tile:hover { transform:translate(-2px,-2px) rotate(-2deg); box-shadow:5px 5px 0 #111; }
body[data-theme="brutalist"] .element-tile.selected { transform:translate(-2px,-2px); border-width:3px; box-shadow:5px 5px 0 #2b44ff; outline:3px solid #fff; outline-offset:-6px; }
body[data-theme="brutalist"] .alkali{--family:#ff7b7b}body[data-theme="brutalist"] .alkaline{--family:#ffb547}body[data-theme="brutalist"] .transition{--family:#7ec8ff}body[data-theme="brutalist"] .post-transition{--family:#6ee7a5}body[data-theme="brutalist"] .metalloid{--family:#c39bff}body[data-theme="brutalist"] .nonmetal{--family:#c8f06a}body[data-theme="brutalist"] .halogen{--family:#ff9ee0}body[data-theme="brutalist"] .noble{--family:#5ef0e8}body[data-theme="brutalist"] .lanthanide{--family:#ffe45c}body[data-theme="brutalist"] .actinide{--family:#ffa98a}
body[data-theme="brutalist"] button,body[data-theme="brutalist"] select,body[data-theme="brutalist"] .stats div,body[data-theme="brutalist"] .search,body[data-theme="brutalist"] .legend button,body[data-theme="brutalist"] .legend-chip { border:2px solid #111; box-shadow:2px 2px 0 #111; }
body[data-theme="brutalist"] .mode-tabs { border:2px solid #111; }
body[data-theme="brutalist"] .mode-tab { border:0; box-shadow:none; }
body[data-theme="brutalist"] .mode-tab.active { color:#fff; background:#2b44ff; box-shadow:none; }
body[data-theme="brutalist"] .brand-mark { color:#111; background:#ffe45c; border:2.5px solid #111; box-shadow:3px 3px 0 #111; }
body[data-theme="brutalist"] .hero-symbol,body[data-theme="brutalist"] .inset-symbol { color:#111; border:3px solid #111; background:var(--family); box-shadow:4px 4px 0 #111; }

/* ---------- Visoki kontrast: accessibility-first, no transparency ---------- */
body[data-theme="contrast"] {
  --bg:#000; --panel:#000; --panel-solid:#000; --text:#fff; --muted:#e6e6e6; --line:#fff; --accent:#ffe600; --accent-rgb:255,230,0;
  --tile:#000; --tile-text:#fff; --shadow:none; --proton:#ff5a5a; --neutron:#ffffff; --electron:#ffe600;
  --scene:#000;
  background:#000; font-size:14px;
}
body[data-theme="contrast"] .stars,body[data-theme="contrast"] .canvas-wrap::before,body[data-theme="contrast"] .canvas-wrap::after { display:none; }
body[data-theme="contrast"] .panel { border:2px solid #fff; border-radius:6px; backdrop-filter:none; }
body[data-theme="contrast"] .element-tile { border:3px solid var(--family); border-radius:4px; background:#000; box-shadow:none; }
body[data-theme="contrast"] .element-tile::before { display:none; }
body[data-theme="contrast"] .element-tile span,body[data-theme="contrast"] .element-tile em,body[data-theme="contrast"] .element-tile small { opacity:1; font-weight:700; }
body[data-theme="contrast"] .element-tile:hover { transform:none; background:#222; }
body[data-theme="contrast"] .element-tile.selected { transform:none; color:#000; background:#ffe600; border-color:#ffe600; box-shadow:0 0 0 3px #fff; }
body[data-theme="contrast"] .element-tile.filtered { opacity:.3; }
body[data-theme="contrast"] .alkali{--family:#ff6b6b}body[data-theme="contrast"] .alkaline{--family:#ffa94d}body[data-theme="contrast"] .transition{--family:#4dabf7}body[data-theme="contrast"] .post-transition{--family:#51cf66}body[data-theme="contrast"] .metalloid{--family:#cc5de8}body[data-theme="contrast"] .nonmetal{--family:#a9e34b}body[data-theme="contrast"] .halogen{--family:#f783ac}body[data-theme="contrast"] .noble{--family:#3bc9db}body[data-theme="contrast"] .lanthanide{--family:#ffd43b}body[data-theme="contrast"] .actinide{--family:#ff8787}
body[data-theme="contrast"] :focus-visible { outline:3px solid #ffe600 !important; outline-offset:2px; }
body[data-theme="contrast"] .mode-tab.active { color:#000; background:#ffe600; box-shadow:none; }
body[data-theme="contrast"] .unavailable,body[data-theme="contrast"] .spectrum-note,body[data-theme="contrast"] .empty-note { color:#e6e6e6; }
body[data-theme="contrast"] a { color:#ffe600; }

/* Shared fixes for the light scenes of the new themes */
body[data-theme="textbook"] .element-hero .eyebrow,body[data-theme="textbook"] .inset-text .eyebrow,body[data-theme="brutalist"] .element-hero .eyebrow,body[data-theme="brutalist"] .inset-text .eyebrow,body[data-theme="textbook"] .group-popover .eyebrow,body[data-theme="brutalist"] .group-popover .eyebrow { color:color-mix(in srgb,var(--family) 40%,#111); }
body[data-theme="contrast"] .hero-symbol,body[data-theme="contrast"] .inset-symbol { color:#fff; border:3px solid var(--family); background:#000; box-shadow:none; }
body[data-theme="textbook"] .particle-key,body[data-theme="brutalist"] .particle-key { color:var(--text); background:rgba(255,255,255,.85); }
body[data-theme="textbook"] .particle-key b,body[data-theme="brutalist"] .particle-key b { color:var(--text); }
body[data-theme="textbook"] .canvas-badge,body[data-theme="brutalist"] .canvas-badge { background:rgba(255,255,255,.85); }
body[data-theme="textbook"] .isotope-status.stable,body[data-theme="brutalist"] .isotope-status.stable,body[data-theme="textbook"] .status-measured,body[data-theme="brutalist"] .status-measured { color:#1d7a4b; }
body[data-theme="textbook"] .particle-tooltip span,body[data-theme="brutalist"] .particle-tooltip span { color:#d5e2f5; }
body[data-theme="textbook"] .spectrum .spectrum-bg,body[data-theme="brutalist"] .spectrum .spectrum-bg { fill:#0b0b0f; }

@media (max-width:520px) { body[data-theme="chalkboard"] .panel { border-width:5px; } body[data-theme="brutalist"] .panel { box-shadow:4px 4px 0 #111; } }