@import url('https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;500;700&family=Pixelify+Sans:wght@400;500&display=swap');

/* Waypoint themes. Matrix is theme.css itself; each theme here re-colours the same tokens, so
   every section (boards, schedule, chat, reporting, games) follows without its own rules.
   Each theme has a dark set and a light set; the L button picks between them as it always has.
   The animated scene for a theme lives in /site-appearance/themes/<theme>/ and runs behind the page.
   To add a theme: add its two blocks here, its folder, and its entry in js-runtime/themes.js. */

:root{ --card-fill:rgba(0,0,0,0.55); --radius:0px; }
html.light{ --card-fill:rgba(255,255,255,0.96); }

/* ---------- aero ---------- */
html[data-theme-name="aero"]{
  color-scheme:dark;
  --void:#0d4a78;
  --panel:rgba(6,36,64,.9);
  --panel-menu:rgba(6,36,64,.9);
  --panel-deep:rgba(6,36,64,.9);
  --panel-fill:rgba(4,30,56,.5);
  --panel-fill-soft:rgba(4,30,56,.5);
  --panel-fill-mid:rgba(4,30,56,.5);
  --panel-fill-deep:rgba(4,30,56,.5);
  --panel-input:rgba(2,20,40,.6);
  --card-fill:rgba(3,24,46,.6);
  --line:rgba(170,228,255,.42);
  --border-soft:rgba(170,228,255,.2);
  --green-dim:#d6f0ff;
  --green:#7fdcff;
  --green-bright:#ffffff;
  --amber:#ffe08a;
  --text-body:#f2fbff;
  --text-dim:#a9d4ea;
  --text-faint:#a9d4ea;
  --gutter:#a9d4ea;
  --text-me:#b8f2ff;
  --tag-ack:#a9d4ea;
  --away:#a9d4ea;
  --cyan:#7fdcff;
  --pink:#ffa8c8;
  --ink:#04263f;
  --chip-ink:#ffffff;
  --glow:rgba(127,220,255,.55);
  --glow-soft:rgba(127,220,255,.55);
  --glow-faint:transparent;
  --overlay:rgba(2,16,30,.5);
  --scan:transparent;
  --bg-tabbar:rgba(4,30,56,.5);
  --bg-tab-in:transparent;
  --bg-tab-act:rgba(3,24,46,.6);
  --type-weight:500;
  --type-stroke:0px;
  --font:'Space Mono', ui-monospace, monospace;
  --font-display:'Syncopate', 'Space Mono', sans-serif;
  --radius:4px;
}
html.light[data-theme-name="aero"]{
  color-scheme:light;
  --void:#9fdcff;
  --panel:rgba(255,255,255,.88);
  --panel-menu:rgba(255,255,255,.88);
  --panel-deep:rgba(255,255,255,.88);
  --panel-fill:rgba(255,255,255,.55);
  --panel-fill-soft:rgba(255,255,255,.55);
  --panel-fill-mid:rgba(255,255,255,.55);
  --panel-fill-deep:rgba(255,255,255,.55);
  --panel-input:rgba(255,255,255,.88);
  --card-fill:rgba(255,255,255,.8);
  --line:rgba(11,53,83,.28);
  --border-soft:rgba(11,53,83,.14);
  --green-dim:#0b3553;
  --green:#0a8fd8;
  --green-bright:#0b3553;
  --amber:#a35d00;
  --text-body:#0b3553;
  --text-dim:#3e6b8c;
  --text-faint:#3e6b8c;
  --gutter:#3e6b8c;
  --text-me:#0670b0;
  --tag-ack:#3e6b8c;
  --away:#3e6b8c;
  --cyan:#0a8fd8;
  --pink:#c2255c;
  --ink:#ffffff;
  --chip-ink:#ffffff;
  --glow:rgba(10,143,216,.28);
  --glow-soft:rgba(10,143,216,.28);
  --glow-faint:transparent;
  --overlay:rgba(11,53,83,.3);
  --scan:transparent;
  --bg-tabbar:rgba(255,255,255,.55);
  --bg-tab-in:transparent;
  --bg-tab-act:rgba(255,255,255,.8);
  --type-weight:500;
  --type-stroke:0px;
}

/* ---------- meadow-field ---------- */
html[data-theme-name="meadow-field"]{
  color-scheme:dark;
  --void:#2c4a1c;
  --panel:rgba(20,40,14,.9);
  --panel-menu:rgba(20,40,14,.9);
  --panel-deep:rgba(20,40,14,.9);
  --panel-fill:rgba(24,46,16,.3);
  --panel-fill-soft:rgba(24,46,16,.3);
  --panel-fill-mid:rgba(24,46,16,.3);
  --panel-fill-deep:rgba(24,46,16,.3);
  --panel-input:rgba(12,26,8,.45);
  --card-fill:rgba(18,36,12,.4);
  --line:rgba(251,246,230,.3);
  --border-soft:rgba(251,246,230,.14);
  --green-dim:#e9e2c8;
  --green:#ffd43b;
  --green-bright:#fbf6e6;
  --amber:#ffd43b;
  --text-body:#fbf6e6;
  --text-dim:#c8d2a8;
  --text-faint:#c8d2a8;
  --gutter:#c8d2a8;
  --text-me:#ffc2d6;
  --tag-ack:#c8d2a8;
  --away:#c8d2a8;
  --cyan:#a5d8ff;
  --pink:#f783ac;
  --ink:#23401a;
  --chip-ink:#ffffff;
  --glow:rgba(255,212,59,.35);
  --glow-soft:rgba(255,212,59,.35);
  --glow-faint:transparent;
  --overlay:rgba(10,24,6,.5);
  --scan:transparent;
  --bg-tabbar:rgba(24,46,16,.3);
  --bg-tab-in:transparent;
  --bg-tab-act:rgba(18,36,12,.4);
  --type-weight:500;
  --type-stroke:0px;
  --font:"Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-display:"Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --radius:14px;
}
html.light[data-theme-name="meadow-field"]{
  color-scheme:light;
  --void:#9cc75d;
  --panel:rgba(251,246,230,.94);
  --panel-menu:rgba(251,246,230,.94);
  --panel-deep:rgba(251,246,230,.94);
  --panel-fill:rgba(251,246,230,.36);
  --panel-fill-soft:rgba(251,246,230,.36);
  --panel-fill-mid:rgba(251,246,230,.36);
  --panel-fill-deep:rgba(251,246,230,.36);
  --panel-input:rgba(255,253,244,.6);
  --card-fill:rgba(255,253,244,.48);
  --line:rgba(35,64,26,.3);
  --border-soft:rgba(35,64,26,.15);
  --green-dim:#2e5a1c;
  --green:#c2255c;
  --green-bright:#23401a;
  --amber:#b35c00;
  --text-body:#23401a;
  --text-dim:#4a6634;
  --text-faint:#4a6634;
  --gutter:#4a6634;
  --text-me:#a61e4d;
  --tag-ack:#4a6634;
  --away:#4a6634;
  --cyan:#1c7ed6;
  --pink:#c2255c;
  --ink:#ffffff;
  --chip-ink:#ffffff;
  --glow:transparent;
  --glow-soft:transparent;
  --glow-faint:transparent;
  --overlay:rgba(35,64,26,.3);
  --scan:transparent;
  --bg-tabbar:rgba(251,246,230,.36);
  --bg-tab-in:transparent;
  --bg-tab-act:rgba(255,253,244,.48);
  --type-weight:500;
  --type-stroke:0px;
}

/* ---------- meadow-sky ---------- */
html[data-theme-name="meadow-sky"]{
  color-scheme:dark;
  --void:#0b1026;
  --panel:rgba(14,20,36,.88);
  --panel-menu:rgba(14,20,36,.88);
  --panel-deep:rgba(14,20,36,.88);
  --panel-fill:rgba(16,24,42,.56);
  --panel-fill-soft:rgba(16,24,42,.56);
  --panel-fill-mid:rgba(16,24,42,.56);
  --panel-fill-deep:rgba(16,24,42,.56);
  --panel-input:rgba(10,16,30,.6);
  --card-fill:rgba(20,30,50,.68);
  --line:rgba(255,255,255,.26);
  --border-soft:rgba(255,255,255,.12);
  --green-dim:#dfe6ee;
  --green:#ffc56e;
  --green-bright:#fff6e6;
  --amber:#ffc56e;
  --text-body:#f5f7f9;
  --text-dim:#aab6c6;
  --text-faint:#aab6c6;
  --gutter:#aab6c6;
  --text-me:#8acaff;
  --tag-ack:#aab6c6;
  --away:#aab6c6;
  --cyan:#8acaff;
  --pink:#ff9fb8;
  --ink:#2a1c02;
  --chip-ink:#ffffff;
  --glow:rgba(255,197,110,.4);
  --glow-soft:rgba(255,197,110,.4);
  --glow-faint:transparent;
  --overlay:rgba(4,8,20,.5);
  --scan:transparent;
  --bg-tabbar:rgba(16,24,42,.56);
  --bg-tab-in:transparent;
  --bg-tab-act:rgba(20,30,50,.68);
  --type-weight:500;
  --type-stroke:0px;
  --font:'Space Grotesk', system-ui, sans-serif;
  --font-display:'Space Grotesk', system-ui, sans-serif;
  --radius:18px;
}
html.light[data-theme-name="meadow-sky"]{
  color-scheme:light;
  --void:#a9cde8;
  --panel:rgba(240,245,250,.92);
  --panel-menu:rgba(240,245,250,.92);
  --panel-deep:rgba(240,245,250,.92);
  --panel-fill:rgba(238,243,247,.68);
  --panel-fill-soft:rgba(238,243,247,.68);
  --panel-fill-mid:rgba(238,243,247,.68);
  --panel-fill-deep:rgba(238,243,247,.68);
  --panel-input:#ffffff;
  --card-fill:rgba(250,252,254,.88);
  --line:rgba(27,33,38,.24);
  --border-soft:rgba(27,33,38,.12);
  --green-dim:#1b2126;
  --green:#a24f06;
  --green-bright:#1b2126;
  --amber:#a24f06;
  --text-body:#1b2126;
  --text-dim:#4d5966;
  --text-faint:#4d5966;
  --gutter:#4d5966;
  --text-me:#1756a6;
  --tag-ack:#4d5966;
  --away:#4d5966;
  --cyan:#1756a6;
  --pink:#b02a55;
  --ink:#fff6e6;
  --chip-ink:#ffffff;
  --glow:transparent;
  --glow-soft:transparent;
  --glow-faint:transparent;
  --overlay:rgba(27,33,38,.3);
  --scan:transparent;
  --bg-tabbar:rgba(238,243,247,.68);
  --bg-tab-in:transparent;
  --bg-tab-act:rgba(250,252,254,.88);
  --type-weight:500;
  --type-stroke:0px;
}

/* ---------- crystal-cave ---------- */
html[data-theme-name="crystal-cave"]{
  color-scheme:dark;
  --void:#0d0926;
  --panel:rgba(20,14,52,.9);
  --panel-menu:rgba(20,14,52,.92);
  --panel-deep:rgba(20,14,52,.9);
  --panel-fill:rgba(22,15,60,.5);
  --panel-fill-soft:rgba(22,15,60,.5);
  --panel-fill-mid:rgba(22,15,60,.5);
  --panel-fill-deep:rgba(22,15,60,.5);
  --panel-input:rgba(12,8,36,.6);
  --card-fill:rgba(32,22,78,.62);
  --line:rgba(205,180,255,.3);
  --border-soft:rgba(205,180,255,.15);
  --green-dim:#d8c9ff;
  --green:#7ff0d4;
  --green-bright:#f3ecff;
  --amber:#ffc27a;
  --text-body:#f3eefb;
  --text-dim:#b7aad8;
  --text-faint:#b7aad8;
  --gutter:#b7aad8;
  --text-me:#7ff0d4;
  --tag-ack:#b7aad8;
  --away:#b7aad8;
  --cyan:#7ff0d4;
  --pink:#d9a6ff;
  --ink:#120c30;
  --chip-ink:#ffffff;
  --glow:rgba(190,140,255,.45);
  --glow-soft:rgba(190,140,255,.45);
  --glow-faint:transparent;
  --overlay:rgba(6,4,22,.55);
  --scan:transparent;
  --bg-tabbar:rgba(22,15,60,.5);
  --bg-tab-in:transparent;
  --bg-tab-act:rgba(32,22,78,.62);
  --type-weight:400;
  --type-stroke:0px;
  --font:'Space Grotesk', system-ui, sans-serif;
  --font-display:'Pixelify Sans', 'Space Grotesk', system-ui, sans-serif;
  --radius:10px;
}
html.light[data-theme-name="crystal-cave"]{
  color-scheme:light;
  --void:#8d7fc4;
  --panel:rgba(242,237,252,.94);
  --panel-menu:rgba(242,237,252,.96);
  --panel-deep:rgba(242,237,252,.94);
  --panel-fill:rgba(240,234,252,.66);
  --panel-fill-soft:rgba(240,234,252,.66);
  --panel-fill-mid:rgba(240,234,252,.66);
  --panel-fill-deep:rgba(240,234,252,.66);
  --panel-input:rgba(255,255,255,.82);
  --card-fill:rgba(252,250,255,.82);
  --line:rgba(48,30,100,.3);
  --border-soft:rgba(48,30,100,.16);
  --green-dim:#3c2a78;
  --green:#0d7566;
  --green-bright:#221552;
  --amber:#955200;
  --text-body:#221552;
  --text-dim:#54467e;
  --text-faint:#54467e;
  --gutter:#54467e;
  --text-me:#0d7566;
  --tag-ack:#54467e;
  --away:#54467e;
  --cyan:#0d7566;
  --pink:#7a2fc0;
  --ink:#ffffff;
  --chip-ink:#ffffff;
  --glow:transparent;
  --glow-soft:transparent;
  --glow-faint:transparent;
  --overlay:rgba(34,21,82,.35);
  --scan:transparent;
  --bg-tabbar:rgba(240,234,252,.66);
  --bg-tab-in:transparent;
  --bg-tab-act:rgba(252,250,255,.82);
  --type-weight:400;
  --type-stroke:0px;
}

/* ---------- shared look for the scene themes ---------- */

/* the scene replaces the rain and scanlines */
html[data-theme-name]:not([data-theme-name="matrix"]) canvas#rain,
html[data-theme-name]:not([data-theme-name="matrix"]) .scanlines{display:none;}
html[data-theme-name]:not([data-theme-name="matrix"]),
html[data-theme-name]:not([data-theme-name="matrix"]) body{background:var(--void);}

/* panels are glass over the scene */
html[data-theme-name]:not([data-theme-name="matrix"]) :is(header, .glass, .page-head, .ledger, .form-wrap, .suggest-panel, .game-panel, .chat-body, #schedulePage, .notes-page, .board-list, .settings-pop, .drawer-panel, .card-modal){
  backdrop-filter:blur(12px) saturate(150%);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  border-radius:var(--radius);
}
html[data-theme-name="meadow-field"] :is(header, .glass, .page-head, .ledger, .form-wrap, .suggest-panel, .game-panel, .chat-body, #schedulePage, .notes-page, .board-list, .settings-pop, .drawer-panel, .card-modal){
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
html[data-theme-name="aero"] :is(header, .page-head, .board-list, .board-card, .chat-body, #schedulePage){box-shadow:inset 0 1px 0 rgba(255,255,255,.22);}
html[data-theme-name]:not([data-theme-name="matrix"]) .page-head{background:var(--panel-fill);border:1px solid var(--line);padding:10px 14px;}

/* text stays readable over a moving scene */
html[data-theme-name="crystal-cave"]:not(.light) body{text-shadow:0 1px 2px rgba(6,3,24,.75);}
html[data-theme-name="aero"]:not(.light) body{text-shadow:0 1px 2px rgba(0,20,40,.6);}
html[data-theme-name="meadow-field"]:not(.light) body{text-shadow:0 1px 2px rgba(0,0,0,.7);}
html.light[data-theme-name="meadow-field"] body{text-shadow:0 0 3px rgba(255,253,244,.9);}

/* display type: thin, and a size down for faces much larger than VT323 */
html[data-theme-name]:not([data-theme-name="matrix"]) :is(.brand-row h1, .page-head h2, .board-title, .list-name, .sched-day, .timeline-head h3, .side-sec h3, .card-modal-title, .drawer-panel h3, .settings-pop h3){font-weight:400; -webkit-text-stroke:0;}
html[data-theme-name="meadow-sky"] :is(.brand-row h1, .page-head h2, .sched-day, .board-title){font-weight:300;}
html[data-theme-name="crystal-cave"] :is(header, .page-head, .board-list, .board-card, .chat-body, #schedulePage){box-shadow:inset 0 1px 0 rgba(216,190,255,.2);}
html[data-theme-name="aero"] .brand-row h1{font-size:20px; letter-spacing:0;}
html[data-theme-name="aero"] :is(.page-head h2, .sched-day){font-size:16px; letter-spacing:0;}
html[data-theme-name="aero"] :is(.timeline-head h3, .side-sec h3, .board-title, .settings-pop h3, .drawer-panel h3, .card-modal-title){font-size:14px; letter-spacing:0;}
html[data-theme-name="aero"] .list-name{font-size:13px; letter-spacing:0;}
html[data-theme-name]:not([data-theme-name="matrix"]) .brand-row h1{font-size:22px;}
html[data-theme-name]:not([data-theme-name="matrix"]) :is(.page-head h2, .sched-day){font-size:18px;}
html[data-theme-name]:not([data-theme-name="matrix"]) :is(.timeline-head h3, .side-sec h3, .board-title, .list-name){font-size:16px;}
html[data-theme-name]:not([data-theme-name="matrix"]) :is(.timeline-hours span, .sched-clock b){font-size:14px; font-weight:500;}

/* the scene: a page of its own behind this one */
.theme-scene{position:fixed;inset:0;width:100%;height:100%;border:0;z-index:0;pointer-events:none;background:var(--void);}
.theme-scene.is-loading{visibility:hidden;}