/* For My Stream theme contract v1 */

:root,
:root[data-theme='game-room'] {
  color: #fff8ed;
  background: #21162e;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-display: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-accent: Georgia, serif;
  --font-interface: "Trebuchet MS", "Segoe UI", sans-serif;
  --night: #21162e;
  --night-deep: #160f21;
  --cream: #f7eddd;
  --paper: #fff9ee;
  --ink: #211929;
  --peach: #ff8c76;
  --yellow: #f4d85e;
  --cyan: #55cfdf;
  --violet: #9173e6;
  --muted-light: #c9bdd0;
  --shell-text: #fff8ed;
  --shell-muted: #ddd0e0;
  --shell-faint: #9f90a7;
  --shell-art: radial-gradient(circle at 78% 18%, rgba(130,90,194,.2), transparent 28%), radial-gradient(circle at 20% 42%, rgba(255,99,124,.1), transparent 25%), #21162e;
  --chrome-line: rgba(255,255,255,.17);
  --nav-text: #d2c8d6;
  --focus: #55cfdf;
  --logo-bg: #f4d85e;
  --logo-ink: #21162e;
  --logo-border: #fff4ad;
  --logo-radius: 50% 46% 48% 43%;
  --logo-shadow: 0 0 0 4px rgba(244,216,94,.09);
  --logo-transform: rotate(-4deg);
  --hero-accent: #ff8c76;
  --hero-shadow: 4px 4px 0 rgba(116,57,91,.45);
  --hero-accent-style: italic;
  --button-bg: #f4d85e;
  --button-ink: #21162e;
  --button-border: #fff1a5;
  --button-shadow: 5px 5px 0 #100a18;
  --button-radius: 0;
  --table-bg: #302041;
  --table-border: #160f21;
  --table-radius: 46% 48% 44% 49% / 9% 8% 10% 8%;
  --table-shadow: 14px 17px 0 #140d1e, inset 0 0 70px rgba(11,6,17,.3);
  --table-transform: rotate(1.2deg);
  --marquee-bg: #f4d85e;
  --marquee-ink: #21162e;
  --marquee-border: #160f21;
  --marquee-transform: rotate(-.65deg);
  --games-background: #f7eddd;
  --surface-text: #211929;
  --surface-muted: #645a69;
  --surface-faint: #877c89;
  --card-bg: #fff9ee;
  --card-border: #211929;
  --card-radius: 0;
  --card-shadow: 6px 7px 0 #c8bcae;
  --card-shadow-hover: 8px 10px 0 rgba(33,25,41,.22);
  --card-transform-a: rotate(.22deg);
  --card-transform-b: rotate(-.2deg);
  --featured-bg: #2c1721;
  --featured-text: #fff9ee;
  --featured-muted: #d9cfd8;
  --featured-faint: #a99cab;
  --featured-shadow: 8px 9px 0 #c8bcae;
  --featured-transform: rotate(-.25deg);
  --about-bg: #4d3977;
  --about-text: #fff8ed;
  --about-muted: #e0d7ea;
  --about-detail: #fff4dc;
  --about-shadow: 9px 10px 0 #110b19;
  --about-radius: 0;
  --about-transform: rotate(.22deg);
  --support-bg: #71d1df;
  --support-scene: #f06fba;
  --support-text: #211929;
  --support-muted: #28535a;
  --support-shadow: 8px 9px 0 #120c1a;
  --support-transform: rotate(-.2deg);
  --idea-bg: #f4d85e;
  --idea-text: #211929;
  --idea-muted: #6f5f3a;
  --idea-shadow: 7px 8px 0 #100a18;
  --idea-transform: rotate(.2deg);
  --texture-opacity: .32;
  --games-texture-opacity: .25;
  --texture-image: url('/shared/v1/grain.svg');
  --heading-transform: none;
  --heading-spacing: -.055em;
  --panel-line: 3px;
}

:root[data-theme='midnight-library'] {
  color: #d6d7d8;
  background: #171d25;
  font-family: "Segoe UI", Arial, sans-serif;
  --font-body: "Segoe UI", Arial, sans-serif;
  --font-display: "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --font-accent: "Segoe UI", Arial, sans-serif;
  --font-interface: Arial, "Segoe UI", sans-serif;
  --night: #171d25;
  --night-deep: #0e141b;
  --cream: #192a38;
  --paper: #22384a;
  --ink: #e5edf5;
  --peach: #66c0f4;
  --yellow: #a4d007;
  --cyan: #66c0f4;
  --violet: #2a6788;
  --muted-light: #8f98a0;
  --shell-text: #f3f6f8;
  --shell-muted: #c7d5df;
  --shell-faint: #82909b;
  --shell-art: radial-gradient(ellipse at 68% 16%, rgba(102,192,244,.15), transparent 31%), linear-gradient(135deg, #1b2838 0%, #171d25 54%, #0e141b 100%);
  --chrome-line: rgba(102,192,244,.25);
  --nav-text: #c7d5df;
  --focus: #a4d007;
  --logo-bg: linear-gradient(135deg, #75c5f0, #1a9fff);
  --logo-ink: #0e141b;
  --logo-border: rgba(255,255,255,.62);
  --logo-radius: 50%;
  --logo-shadow: 0 0 18px rgba(102,192,244,.35);
  --logo-transform: none;
  --hero-accent: #66c0f4;
  --hero-shadow: 0 0 28px rgba(102,192,244,.24);
  --hero-accent-style: normal;
  --button-bg: linear-gradient(90deg, #75b022, #588a1b);
  --button-ink: #f1f7e9;
  --button-border: #a4d007;
  --button-shadow: 0 0 18px rgba(164,208,7,.16);
  --button-radius: 2px;
  --table-bg: linear-gradient(145deg, #22384a, #172431);
  --table-border: #3c6680;
  --table-radius: 5px;
  --table-shadow: 0 24px 60px rgba(0,0,0,.46), inset 0 1px rgba(255,255,255,.07);
  --table-transform: none;
  --marquee-bg: linear-gradient(90deg, #1a9fff, #66c0f4);
  --marquee-ink: #071019;
  --marquee-border: #0e141b;
  --marquee-transform: none;
  --games-background: linear-gradient(180deg, #1b2b3a, #15232f);
  --surface-text: #e5edf5;
  --surface-muted: #aebdca;
  --surface-faint: #8396a5;
  --card-bg: linear-gradient(135deg, #22384a, #1b2f40);
  --card-border: #36576f;
  --card-radius: 3px;
  --card-shadow: 0 12px 28px rgba(0,0,0,.32);
  --card-shadow-hover: 0 16px 34px rgba(0,0,0,.42), 0 0 0 1px #66c0f4;
  --card-transform-a: none;
  --card-transform-b: none;
  --featured-bg: linear-gradient(145deg, #101923, #20374a);
  --featured-text: #f5f8fa;
  --featured-muted: #c6d4df;
  --featured-faint: #8fa3b2;
  --featured-shadow: 0 18px 42px rgba(0,0,0,.4);
  --featured-transform: none;
  --about-bg: linear-gradient(115deg, #203c50, #193047);
  --about-text: #f4f8fb;
  --about-muted: #cad8e2;
  --about-detail: #d8e8f2;
  --about-shadow: 0 16px 38px rgba(0,0,0,.34);
  --about-radius: 4px;
  --about-transform: none;
  --support-bg: #20384a;
  --support-scene: #182736;
  --support-text: #f2f6f8;
  --support-muted: #b9cad6;
  --support-shadow: 0 16px 38px rgba(0,0,0,.36);
  --support-transform: none;
  --idea-bg: linear-gradient(90deg, #75b022, #5b8e1d);
  --idea-text: #f7fbf0;
  --idea-muted: #e2efd0;
  --idea-shadow: 0 14px 30px rgba(0,0,0,.33);
  --idea-transform: none;
  --texture-opacity: .08;
  --games-texture-opacity: .06;
  --texture-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.05) 3px 4px);
  --heading-transform: none;
  --heading-spacing: -.035em;
  --panel-line: 1px;
}

:root[data-theme='neon-terminal'] {
  color: #eefcfd;
  background: #080b0d;
  font-family: Bahnschrift, "Arial Narrow", Arial, sans-serif;
  --font-body: Bahnschrift, "Arial Narrow", Arial, sans-serif;
  --font-display: "Bahnschrift Condensed", "Arial Narrow", Impact, sans-serif;
  --font-accent: Consolas, "Courier New", monospace;
  --font-interface: Consolas, "Courier New", monospace;
  --night: #080b0d;
  --night-deep: #020404;
  --cream: #101719;
  --paper: #111c1e;
  --ink: #e9ffff;
  --peach: #fcee09;
  --yellow: #fcee09;
  --cyan: #00f0ff;
  --violet: #ff2a6d;
  --muted-light: #8ba4a6;
  --shell-text: #f3ffff;
  --shell-muted: #c3dcde;
  --shell-faint: #779092;
  --shell-art: linear-gradient(rgba(0,240,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,240,255,.035) 1px, transparent 1px), radial-gradient(circle at 82% 12%, rgba(0,240,255,.13), transparent 28%), #080b0d;
  --chrome-line: rgba(0,240,255,.45);
  --nav-text: #a8c6c8;
  --focus: #fcee09;
  --logo-bg: #fcee09;
  --logo-ink: #080b0d;
  --logo-border: #080b0d;
  --logo-radius: 0;
  --logo-shadow: 4px 4px 0 #00f0ff;
  --logo-transform: skewX(-8deg);
  --hero-accent: #fcee09;
  --hero-shadow: 3px 3px 0 #ff2a6d, 6px 6px 0 rgba(0,240,255,.72);
  --hero-accent-style: normal;
  --button-bg: #fcee09;
  --button-ink: #080b0d;
  --button-border: #00f0ff;
  --button-shadow: 6px 6px 0 #ff2a6d;
  --button-radius: 0;
  --table-bg: #101719;
  --table-border: #00f0ff;
  --table-radius: 0;
  --table-shadow: 10px 10px 0 rgba(255,42,109,.72), inset 0 0 55px rgba(0,240,255,.08);
  --table-transform: none;
  --marquee-bg: #fcee09;
  --marquee-ink: #080b0d;
  --marquee-border: #00f0ff;
  --marquee-transform: none;
  --games-background: #0d1214;
  --surface-text: #edffff;
  --surface-muted: #b1cbcd;
  --surface-faint: #7e999b;
  --card-bg: #111c1e;
  --card-border: #00f0ff;
  --card-radius: 0;
  --card-shadow: 7px 7px 0 rgba(0,240,255,.17);
  --card-shadow-hover: 7px 7px 0 #ff2a6d, 0 0 22px rgba(0,240,255,.2);
  --card-transform-a: none;
  --card-transform-b: none;
  --featured-bg: #0c1113;
  --featured-text: #efffff;
  --featured-muted: #b8d4d6;
  --featured-faint: #7f9b9d;
  --featured-shadow: 10px 10px 0 #ff2a6d;
  --featured-transform: none;
  --about-bg: #111b1d;
  --about-text: #f2ffff;
  --about-muted: #bad4d6;
  --about-detail: #fcee09;
  --about-shadow: 9px 9px 0 #00f0ff;
  --about-radius: 0;
  --about-transform: none;
  --support-bg: #10191b;
  --support-scene: #fcee09;
  --support-text: #f1ffff;
  --support-muted: #b6ced0;
  --support-shadow: 9px 9px 0 #ff2a6d;
  --support-transform: none;
  --idea-bg: #fcee09;
  --idea-text: #080b0d;
  --idea-muted: #343500;
  --idea-shadow: 8px 8px 0 #00f0ff;
  --idea-transform: none;
  --texture-opacity: .17;
  --games-texture-opacity: .13;
  --texture-image: repeating-linear-gradient(0deg, transparent 0 5px, rgba(0,240,255,.08) 5px 6px);
  --heading-transform: uppercase;
  --heading-spacing: -.025em;
  --panel-line: 2px;
}

:root[data-theme='graphic-rebellion'] {
  color: #fffdf4;
  background: #0a0909;
  font-family: "Arial Black", Arial, sans-serif;
  --font-body: Arial, "Segoe UI", sans-serif;
  --font-display: Impact, "Arial Black", sans-serif;
  --font-accent: Impact, "Arial Black", sans-serif;
  --font-interface: "Arial Black", Arial, sans-serif;
  --night: #0a0909;
  --night-deep: #000;
  --cream: #fffdf4;
  --paper: #fffdf4;
  --ink: #0a0909;
  --peach: #e60012;
  --yellow: #ffe500;
  --cyan: #fffdf4;
  --violet: #e60012;
  --muted-light: #d6d0c9;
  --shell-text: #fffdf4;
  --shell-muted: #f1ebe3;
  --shell-faint: #b7aea6;
  --shell-art: radial-gradient(circle, rgba(255,255,255,.11) 1.2px, transparent 1.4px), linear-gradient(117deg, transparent 0 62%, rgba(230,0,18,.93) 62% 78%, transparent 78%), #0a0909;
  --chrome-line: rgba(255,253,244,.5);
  --nav-text: #fffdf4;
  --focus: #ffe500;
  --logo-bg: #e60012;
  --logo-ink: #fffdf4;
  --logo-border: #fffdf4;
  --logo-radius: 0;
  --logo-shadow: 5px 5px 0 #fffdf4;
  --logo-transform: rotate(-7deg) skewX(-7deg);
  --hero-accent: #fffdf4;
  --hero-shadow: 5px 5px 0 #0a0909, 9px 9px 0 #e60012;
  --hero-accent-style: normal;
  --button-bg: #e60012;
  --button-ink: #fffdf4;
  --button-border: #0a0909;
  --button-shadow: 6px 6px 0 #fffdf4;
  --button-radius: 0;
  --table-bg: #fffdf4;
  --table-border: #0a0909;
  --table-radius: 0;
  --table-shadow: 13px 13px 0 #e60012;
  --table-transform: rotate(1.2deg);
  --marquee-bg: #e60012;
  --marquee-ink: #fffdf4;
  --marquee-border: #0a0909;
  --marquee-transform: rotate(-1deg);
  --games-background: radial-gradient(circle, rgba(10,9,9,.12) 1.4px, transparent 1.6px), #fffdf4;
  --surface-text: #0a0909;
  --surface-muted: #373131;
  --surface-faint: #5d5555;
  --card-bg: #fffdf4;
  --card-border: #0a0909;
  --card-radius: 0;
  --card-shadow: 8px 8px 0 #e60012;
  --card-shadow-hover: 11px 11px 0 #0a0909;
  --card-transform-a: rotate(.65deg);
  --card-transform-b: rotate(-.75deg);
  --featured-bg: #0a0909;
  --featured-text: #fffdf4;
  --featured-muted: #eee8e1;
  --featured-faint: #beb6af;
  --featured-shadow: 11px 11px 0 #e60012;
  --featured-transform: rotate(-.6deg);
  --about-bg: #e60012;
  --about-text: #fffdf4;
  --about-muted: #fffdf4;
  --about-detail: #ffe500;
  --about-shadow: 12px 12px 0 #0a0909;
  --about-radius: 0;
  --about-transform: rotate(.7deg);
  --support-bg: #fffdf4;
  --support-scene: #0a0909;
  --support-text: #0a0909;
  --support-muted: #332d2d;
  --support-shadow: 10px 10px 0 #e60012;
  --support-transform: rotate(-.55deg);
  --idea-bg: #ffe500;
  --idea-text: #0a0909;
  --idea-muted: #373100;
  --idea-shadow: 10px 10px 0 #e60012;
  --idea-transform: rotate(.45deg);
  --texture-opacity: .16;
  --games-texture-opacity: .12;
  --texture-image: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1.5px);
  --heading-transform: uppercase;
  --heading-spacing: .005em;
  --panel-line: 4px;
}

:root[data-theme='cozy-pixel'] {
  color: #f8edce;
  background: #24351f;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-body: "Trebuchet MS", "Segoe UI", sans-serif;
  --font-display: Consolas, "Courier New", monospace;
  --font-accent: Georgia, serif;
  --font-interface: Consolas, "Courier New", monospace;
  --night: #24351f;
  --night-deep: #152215;
  --cream: #efe0b6;
  --paper: #fff0c8;
  --ink: #2d281d;
  --peach: #d97843;
  --yellow: #f2c14e;
  --cyan: #73b9b6;
  --violet: #8c6b82;
  --muted-light: #d1c7a9;
  --shell-text: #fff2cf;
  --shell-muted: #e5d8b8;
  --shell-faint: #b4ab8c;
  --shell-art: linear-gradient(90deg, rgba(255,255,255,.025) 50%, transparent 50%), linear-gradient(rgba(255,255,255,.025) 50%, transparent 50%), linear-gradient(180deg, #30482c, #24351f);
  --chrome-line: rgba(246,229,185,.34);
  --nav-text: #e6d9b9;
  --focus: #f2c14e;
  --logo-bg: #f2c14e;
  --logo-ink: #2d281d;
  --logo-border: #6f4d2d;
  --logo-radius: 2px;
  --logo-shadow: 4px 4px 0 #152215;
  --logo-transform: none;
  --hero-accent: #f2c14e;
  --hero-shadow: 3px 3px 0 #152215;
  --hero-accent-style: normal;
  --button-bg: #f2c14e;
  --button-ink: #2d281d;
  --button-border: #6f4d2d;
  --button-shadow: 5px 5px 0 #152215;
  --button-radius: 2px;
  --table-bg: #6e5136;
  --table-border: #332719;
  --table-radius: 3px;
  --table-shadow: 10px 10px 0 #152215, inset 0 0 0 4px rgba(255,240,200,.12);
  --table-transform: none;
  --marquee-bg: #f2c14e;
  --marquee-ink: #2d281d;
  --marquee-border: #332719;
  --marquee-transform: none;
  --games-background: #efe0b6;
  --surface-text: #2d281d;
  --surface-muted: #655b45;
  --surface-faint: #7b7057;
  --card-bg: #fff0c8;
  --card-border: #493823;
  --card-radius: 2px;
  --card-shadow: 7px 7px 0 #a57643;
  --card-shadow-hover: 9px 9px 0 #6b9b59;
  --card-transform-a: none;
  --card-transform-b: none;
  --featured-bg: #3a2d22;
  --featured-text: #fff0c8;
  --featured-muted: #eadbbb;
  --featured-faint: #c4b38f;
  --featured-shadow: 8px 8px 0 #a57643;
  --featured-transform: none;
  --about-bg: #6b9b59;
  --about-text: #fff6dc;
  --about-muted: #f2e9ce;
  --about-detail: #fff0bd;
  --about-shadow: 8px 8px 0 #3d5e34;
  --about-radius: 2px;
  --about-transform: none;
  --support-bg: #73b9b6;
  --support-scene: #d99a4e;
  --support-text: #2d281d;
  --support-muted: #3f5d59;
  --support-shadow: 8px 8px 0 #365c59;
  --support-transform: none;
  --idea-bg: #f2c14e;
  --idea-text: #2d281d;
  --idea-muted: #66511e;
  --idea-shadow: 7px 7px 0 #a57643;
  --idea-transform: none;
  --texture-opacity: .2;
  --games-texture-opacity: .16;
  --texture-image: repeating-linear-gradient(0deg, transparent 0 7px, rgba(73,56,35,.08) 7px 8px), repeating-linear-gradient(90deg, transparent 0 7px, rgba(73,56,35,.06) 7px 8px);
  --heading-transform: none;
  --heading-spacing: -.045em;
  --panel-line: 3px;
}

/* Stable cross-product aliases */
:root {
  --fms-font-body: var(--font-body);
  --fms-font-display: var(--font-display);
  --fms-font-accent: var(--font-accent);
  --fms-font-interface: var(--font-interface);
  --fms-page-bg: var(--night);
  --fms-page-bg-deep: var(--night-deep);
  --fms-page-text: var(--shell-text);
  --fms-page-muted: var(--shell-muted);
  --fms-page-faint: var(--shell-faint);
  --fms-page-art: var(--shell-art);
  --fms-line: var(--chrome-line);
  --fms-focus: var(--focus);
  --fms-accent-primary: var(--hero-accent);
  --fms-accent-secondary: var(--violet);
  --fms-accent-highlight: var(--yellow);
  --fms-accent-cool: var(--cyan);
  --fms-surface-bg: var(--card-bg);
  --fms-surface-text: var(--surface-text);
  --fms-surface-muted: var(--surface-muted);
  --fms-surface-faint: var(--surface-faint);
  --fms-surface-border: var(--card-border);
  --fms-surface-radius: var(--card-radius);
  --fms-surface-shadow: var(--card-shadow);
  --fms-surface-shadow-hover: var(--card-shadow-hover);
  --fms-button-bg: var(--button-bg);
  --fms-button-text: var(--button-ink);
  --fms-button-border: var(--button-border);
  --fms-button-shadow: var(--button-shadow);
  --fms-button-radius: var(--button-radius);
  --fms-texture-image: var(--texture-image);
  --fms-texture-opacity: var(--texture-opacity);
  --fms-heading-transform: var(--heading-transform);
  --fms-heading-spacing: var(--heading-spacing);
  --fms-panel-line: var(--panel-line);
  --fms-motion-fast: 170ms;
  --fms-motion-standard: 260ms;
  --fms-motion-easing: ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --fms-motion-fast: 0ms;
    --fms-motion-standard: 0ms;
  }
}