/* Four looks, picked by the player (html[data-theme]). Each theme only sets
tokens; every component below reads them. "classic" follows Telegram's own
colours when opened as a Mini App (--tg-theme-*), else light/dark mode. */
:root, [data-theme="classic"] {
--bg: var(--tg-theme-bg-color, #ffffff);
--bg2: var(--tg-theme-secondary-bg-color, #f2f3f5);
--card: var(--bg2);
--text: var(--tg-theme-text-color, #111418);
--muted: var(--tg-theme-hint-color, #6b7280);
--accent: var(--tg-theme-button-color, #2f80ed);
--accent-text: var(--tg-theme-button-text-color, #ffffff);
--accent2: #f59e0b;
--danger: var(--tg-theme-destructive-text-color, #d93a3a);
--win: #1f9d55;
--sq-light: #ecdab9;
--sq-dark: #c5a076;
--coord: #9c7b57;
--radius: 12px;
--btn-radius: 10px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: var(--font);
--title-case: none;
--board-glow: none;
--line: rgba(128, 128, 128, 0.2);
--gold: #f59e0b;
--lm-fill: rgba(255, 230, 0, 0.38);
--lm-stroke: rgba(0, 0, 0, 0.8);
--lm-edge: rgba(255, 255, 255, 0.6);
--chk-stroke: #ff2222;
--chk-fill: rgba(255, 34, 34, 0.25);
color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
html:not([data-tg])[data-theme="classic"] {
--bg: #17191d; --bg2: #22252b; --text: #e8eaed; --muted: #9aa0a6; --accent: #4c9bff;
--line: rgba(255, 255, 255, 0.15);
}
}
/* Anime arcade: neon on deep navy, fighting-game energy. */
[data-theme="arcade"] {
--bg: #0b1020; --bg2: #141a33; --card: #121833; --text: #e8ecff; --muted: #8b93c7;
--accent: #22d3ee; --accent-text: #04111a; --accent2: #f472b6; --danger: #fb7185; --win: #4ade80;
--sq-light: #33407a; --sq-dark: #1c2350; --coord: #7f8bd6;
--radius: 8px; --btn-radius: 6px;
--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-display: "Russo One", var(--font);
--title-case: uppercase;
--board-glow: 0 0 0 2px #22d3ee55, 0 0 24px #22d3ee44, 0 0 48px #f472b633;
--line: #232c5c;
--gold: #fbbf24;
color-scheme: dark;
}
/* Cinema: black, gold and serif titles, like a film poster. */
[data-theme="cinema"] {
--bg: #0a0a0a; --bg2: #16130e; --card: #14110c; --text: #efe6d2; --muted: #9c8f74;
--accent: #d4af37; --accent-text: #0a0a0a; --accent2: #8b1e1e; --danger: #e05252; --win: #d4af37;
--sq-light: #b9a57c; --sq-dark: #5a4630; --coord: #2a2116;
--radius: 4px; --btn-radius: 2px;
--font: Georgia, "Times New Roman", serif;
--font-display: "Playfair Display", Georgia, serif;
--title-case: uppercase;
--board-glow: 0 18px 40px #000c;
--line: #3a3020;
--gold: #d4af37;
color-scheme: dark;
}
/* Cozy: warm pastels, round and bouncy. */
[data-theme="cozy"] {
--bg: #fff7ec; --bg2: #ffffff; --card: #ffffff; --text: #4a3f35; --muted: #9b8b7a;
--accent: #ff8a65; --accent-text: #ffffff; --accent2: #7cc6a4; --danger: #e5604d; --win: #4caf7d;
--sq-light: #fbefd9; --sq-dark: #9fd3c7; --coord: #5c9c8f;
--radius: 20px; --btn-radius: 999px;
--font: "Nunito", system-ui, sans-serif;
--font-display: "Nunito", system-ui, sans-serif;
--title-case: none;
--board-glow: 0 8px 0 #f1dcc0;
--line: #f1dcc0;
--gold: #f59e0b;
color-scheme: light;
}
/* Canvas: boxing ring canvas, chalk, matte athletic discipline. */
[data-theme="canvas"] {
--bg: #141619; --bg2: #1c1f24; --card: #181b20; --text: #ede9e3; --muted: #878c96;
--accent: #d32f2f; --accent-text: #ffffff; --accent2: #4682b4; --danger: #ef4444; --win: #22c55e;
--sq-light: #b0a893; --sq-dark: #6179a0; --coord: #9bb1c4;
--radius: 4px; --btn-radius: 4px;
--font: "Oswald", "Arial Narrow", "Franklin Gothic Medium", sans-serif-condensed, sans-serif;
--font-display: "Oswald", "Arial Narrow", "Franklin Gothic Medium", sans-serif-condensed, sans-serif;
--title-case: uppercase;
--board-glow: 0 0 0 2px #14161a, 0 0 0 5px #b3261e, 0 0 0 6px #4d0f0b, 0 0 0 8px #ece6da, 0 0 0 9px #7d7666, 0 14px 32px #000c;
--line: #2d333d;
--gold: #e5a93c;
color-scheme: dark;
--rim-in: inset 0 0 0 2px rgba(0,0,0,.5), inset 0 0 0 4px #b3261e, inset 0 0 0 5px rgba(0,0,0,.5);
}
/* Mirror: dark obsidian glass, violet sheen, razor thin serif. */
[data-theme="mirror"] {
--bg: #090712; --bg2: #130f24; --card: #110d20; --text: #f0ecfa; --muted: #857b9e;
--accent: #a855f7; --accent-text: #090712; --accent2: #c084fc; --danger: #f43f5e; --win: #a855f7;
--sq-light: #9b97c8; --sq-dark: #6a5eac; --coord: #3b2f6b;
--radius: 6px; --btn-radius: 4px;
--font: "Cormorant Garamond", "Times New Roman", Garamond, Baskerville, serif;
--font-display: "Cinzel", "Cormorant Garamond", "Times New Roman", serif;
--title-case: uppercase;
--board-glow: 0 0 0 1px #e9e0ff, 0 0 0 3px #3a3270, 0 0 0 4px #b9aaff, 0 0 26px 4px #8f6cff55, 0 16px 40px #000e;
--line: #261c42;
--gold: #d8b4fe;
color-scheme: dark;
--rim-in: inset 0 0 0 1.5px #f5f0ff, inset 0 0 12px #7c5cff88;
}
/* Toon: loud sticker-bomb neon, acid green & magenta on navy, heavy rounded UI. */
[data-theme="toon"] {
--bg: #0a0f24; --bg2: #141c3d; --card: #121936; --text: #ffffff; --muted: #8899c7;
--accent: #ffe600; --accent-text: #0a0f24; --accent2: #ff1493; --danger: #ff3366; --win: #22e55e;
--sq-light: #c09c68; --sq-dark: #41753f; --coord: #ffe600;
--radius: 18px; --btn-radius: 999px;
--font: "Titan One", "Fredoka", "Arial Black", Impact, system-ui, sans-serif;
--font-display: "Titan One", "Fredoka", "Arial Black", Impact, system-ui, sans-serif;
--title-case: uppercase;
--board-glow: 0 0 0 3px #14090a, 0 0 0 6px #f08a1c, 0 0 0 9px #14090a, 0 5px 0 9px #14090a, 0 16px 28px 9px #0008;
--line: #222f59;
--gold: #ffe600;
color-scheme: dark;
--rim-in: inset 0 0 0 2.5px #14090a;
}
/* Dojo: tatami green and vermilion on cream, athletic martial discipline. */
[data-theme="dojo"] {
--bg: #141713; --bg2: #1e241c; --card: #192018; --text: #f5f2e9; --muted: #8c9987;
--accent: #d3381c; --accent-text: #ffffff; --accent2: #4a7c59; --danger: #ef4444; --win: #38a169;
--sq-light: #b09c6c; --sq-dark: #4d7040; --coord: #374c33;
--radius: 6px; --btn-radius: 4px;
--font: "Trebuchet MS", "Lucida Grande", "Segoe UI", sans-serif;
--font-display: "Impact", "Arial Black", sans-serif;
--title-case: uppercase;
--board-glow: 0 0 0 3px #5b3a1e, 0 0 0 6px #7a5230, 0 0 0 7px #2e1b0b, 0 14px 32px #000c;
--line: #273325;
--gold: #e5a93c;
color-scheme: dark;
--rim-in: inset 0 0 0 2px rgba(0,0,0,.5), inset 0 0 0 4px #d9822b, inset 0 0 0 5px rgba(0,0,0,.4);
}
/* Noir: black marble and charcoal, gold hairlines. */
[data-theme="noir"] {
--bg: #0d0e11; --bg2: #16181d; --card: #131519; --text: #eaecee; --muted: #808692;
--accent: #d4af37; --accent-text: #0d0e11; --accent2: #9ca3af; --danger: #ef4444; --win: #d4af37;
--sq-light: #9a9ea9; --sq-dark: #60626e; --coord: #2b303a;
--radius: 3px; --btn-radius: 2px;
--font: "Century Gothic", "Franklin Gothic Medium", system-ui, sans-serif;
--font-display: "Times New Roman", "Baskerville", Georgia, serif;
--title-case: uppercase;
--board-glow: 0 0 0 1px #d4af37, 0 0 0 4px #0b0b0d, 0 0 0 5px #d4af3799, 0 0 26px 4px #ff3ea533, 0 0 30px 6px #35e6ff22, 0 14px 36px #000e;
--line: #2a2e38;
--gold: #d4af37;
color-scheme: dark;
--rim-in: inset 0 0 0 1.5px #d4af37, inset 0 0 0 3px rgba(0,0,0,.6);
}
/* Carnival: deep purple and acid green harlequin. */
[data-theme="carnival"] {
--bg: #11081f; --bg2: #1c0e33; --card: #170b2b; --text: #f6ecff; --muted: #9c84b5;
--accent: #9ef01a; --accent-text: #11081f; --accent2: #b5179e; --danger: #f72585; --win: #9ef01a;
--sq-light: #b0a37f; --sq-dark: #77509c; --coord: #3b174f;
--radius: 14px; --btn-radius: 999px;
--font: "Trebuchet MS", "Lucida Grande", sans-serif;
--font-display: "Impact", "Arial Black", sans-serif;
--title-case: uppercase;
--board-glow: 0 0 0 2px #120819, 0 0 22px 4px #9ef01a33, 0 16px 36px #000c;
--line: #33154d;
--gold: #ffd166;
color-scheme: dark;
--rim-in: inset 0 0 0 1.5px rgba(0,0,0,.6);
--rim-w: 5px; --rim-img: repeating-linear-gradient(45deg, #c0262d 0 7px, #f3ead4 7px 14px);
}
/* Void: bright white-blue, infinite glow. */
[data-theme="void"] {
--bg: #05070F; --bg2: #0B0D14; --card: #0B0D14; --text: #eaf2ff; --muted: #738bb5;
--accent: #00F0FF; --accent-text: #05070F; --accent2: #2A8FD0; --danger: #f43f5e; --win: #00F0FF;
--sq-light: #86a4d8; --sq-dark: #4655b0; --coord: #7C86FF;
--radius: 8px; --btn-radius: 6px;
--font: "Chakra Petch", sans-serif;
--font-display: "Chakra Petch", sans-serif;
--title-case: uppercase;
--board-glow: 0 0 0 1px #bfe9ff, 0 0 18px 3px #35c8ffaa, 0 0 50px 8px #6a7cff44;
--line: #46307C;
--gold: #F3E3B5;
--lm-fill: #46307C;
--lm-stroke: #46307C;
--lm-edge: transparent;
--chk-stroke: #46307C;
--chk-fill: #7B3FE4aa;
color-scheme: dark;
--rim-in: inset 0 0 0 1px #ffffffaa, inset 0 0 16px #3fb8ff88;
}
/* Throne: royal purple and gold on near-black. */
[data-theme="throne"] {
--bg: #0b0712; --bg2: #160e24; --card: #130b1f; --text: #f6edf9; --muted: #8e7a9b;
--accent: #eab308; --accent-text: #0b0712; --accent2: #a855f7; --danger: #ef4444; --win: #eab308;
--sq-light: #b49e64; --sq-dark: #70499c; --coord: #2d1038;
--radius: 4px; --btn-radius: 4px;
--font: "Georgia", "Times New Roman", serif;
--font-display: "Palatino", "URW Palladio L", "Georgia", serif;
--title-case: uppercase;
--board-glow: 0 0 0 2px #1a0d26, 0 0 0 4px #e5c25a, 0 0 0 5px #7a5c14, 0 0 0 7px #2a1239, 0 16px 40px #000f;
--line: #2e173e;
--gold: #eab308;
color-scheme: dark;
--rim-in: inset 0 0 0 2px #e5c25a, inset 0 0 0 3.5px #3a1d52;
}
/* Lab: dark teal grid, acid green. */
[data-theme="lab"] {
--bg: #0b0d0e; --bg2: #1e2225; --card: #1e2225; --text: #f4f1e8; --muted: #8fa083;
--accent: #97ce4c; --accent-text: #1a1a1a; --accent2: #c6f36a; --danger: #ff3b30; --win: #97ce4c;
--sq-light: #78b0a2; --sq-dark: #27645d; --coord: #3a3f44;
--radius: 6px; --btn-radius: 4px;
--font: "Barlow", sans-serif;
--font-display: "Barlow Condensed", sans-serif;
--title-case: uppercase;
--board-glow: 0 0 0 2px #0b1311, 0 0 18px 3px #8cff3a66, 0 14px 32px #000c;
--line: #3a3f44;
--gold: #c6f36a;
--lm-fill: rgba(151, 206, 76, 0.4);
--lm-stroke: rgba(0, 0, 0, 0.8);
--lm-edge: rgba(151, 206, 76, 0.6);
--chk-fill: rgba(255, 59, 48, 0.75);
--chk-stroke: #ff3b30;
color-scheme: dark;
--rim-in: inset 0 0 0 1px rgba(0,0,0,.55);
--rim-w: 5px; --rim-img: repeating-linear-gradient(45deg, #101412 0 6px, #c8e52a 6px 12px);
}
/* Ember: charcoal and ember red-orange. */
[data-theme="ember"] {
--bg: #120b0a; --bg2: #1e1210; --card: #180e0c; --text: #fbeefd; --muted: #947a77;
--accent: #f97316; --accent-text: #120b0a; --accent2: #dc2626; --danger: #ef4444; --win: #f97316;
--sq-light: #ae988a; --sq-dark: #7a4a38; --coord: #2e1c18;
--radius: 4px; --btn-radius: 4px;
--font: system-ui, -apple-system, sans-serif;
--font-display: "Impact", "Arial Black", system-ui, sans-serif;
--title-case: uppercase;
--board-glow: 0 0 0 2px #0e0504, 0 0 0 4px #5a1d14, 0 0 22px 4px #ff5a1a66, 0 14px 36px #000e;
--line: #331915;
--gold: #f97316;
color-scheme: dark;
--rim-in: inset 0 0 0 2px #0e0504, inset 0 0 0 3px #ff7a2a99, inset 0 0 14px #ff4a1088;
}
/* Parlor: warm wood, cream, ochre. */
[data-theme="parlor"] {
--bg: #14100c; --bg2: #1e1914; --card: #19140f; --text: #f5efe4; --muted: #8e8171;
--accent: #d4973b; --accent-text: #14100c; --accent2: #78350f; --danger: #ef4444; --win: #10b981;
--sq-light: #b89c6e; --sq-dark: #86592f; --coord: #442f20;
--radius: 6px; --btn-radius: 4px;
--font: "Georgia", "Baskerville", serif;
--font-display: "Palatino", "Georgia", serif;
--title-case: uppercase;
--board-glow: 0 0 0 3px #3a2412, 0 0 0 6px #6b4527, 0 0 0 7px #d6a64a, 0 0 0 8px #2a190c, 0 14px 34px #000c;
--line: #33271d;
--gold: #d4973b;
color-scheme: dark;
--rim-in: inset 0 0 0 1.5px #d6a64a, inset 0 0 0 3px #3a2412;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--bg); }
body {
background: var(--bg);
color: var(--text);
font: 16px/1.4 var(--font);
-webkit-tap-highlight-color: transparent;
overscroll-behavior: none;
transition: background .3s, color .3s;
}
[data-theme="arcade"] body {
background: radial-gradient(120% 60% at 50% 0%, #1b2559 0%, var(--bg) 60%) fixed;
}
[data-theme="cinema"] body {
background: radial-gradient(100% 70% at 50% 20%, #1c1710 0%, var(--bg) 70%) fixed;
}
[data-theme="canvas"] body {
background: radial-gradient(100% 65% at 50% 15%, #1e2229 0%, var(--bg) 70%) fixed;
}
[data-theme="mirror"] body {
background: radial-gradient(110% 70% at 50% 10%, #1c1335 0%, var(--bg) 65%) fixed;
}
[data-theme="toon"] body {
background: radial-gradient(110% 70% at 50% 10%, #1a2552 0%, var(--bg) 70%) fixed;
}
[data-theme="dojo"] body {
background: radial-gradient(100% 65% at 50% 15%, #202b1e 0%, var(--bg) 70%) fixed;
}
[data-theme="noir"] body {
background: radial-gradient(90% 60% at 50% 15%, #191c22 0%, var(--bg) 70%) fixed;
}
[data-theme="carnival"] body {
background: radial-gradient(110% 70% at 50% 10%, #291047 0%, var(--bg) 65%) fixed;
}
[data-theme="void"] body {
background: radial-gradient(110% 65% at 50% 12%, #46307C 0%, var(--bg) 65%) fixed;
}
[data-theme="throne"] body {
background: radial-gradient(100% 65% at 50% 12%, #211136 0%, var(--bg) 65%) fixed;
}
[data-theme="lab"] body {
background: radial-gradient(700px 520px at 88% 46%, rgba(151,206,76,0.38), rgba(151,206,76,0) 70%),
radial-gradient(480px 360px at 0% 100%, rgba(10,6,2,0.85), rgba(10,6,2,0)),
radial-gradient(340px 220px at 50% 0%, rgba(230,242,255,0.14), rgba(230,242,255,0) 70%),
var(--bg) fixed;
}
[data-theme="ember"] body {
background: radial-gradient(100% 65% at 50% 15%, #2a1512 0%, var(--bg) 68%) fixed;
}
[data-theme="parlor"] body {
background: radial-gradient(100% 65% at 50% 15%, #241c14 0%, var(--bg) 68%) fixed;
}
#app { max-width: 520px; margin: 0 auto; padding: 12px 16px 24px; }
.screen { display: none; }
.screen.active { display: block; }
#screen-home.active { padding-bottom: 150px; } /* room for the dock */
.hidden { display: none !important; }
h1, h2 { font-family: var(--font-display); text-transform: var(--title-case); }
h1 { font-size: 24px; margin: 0; letter-spacing: .02em; }
h2 { font-size: 17px; margin: 18px 0 10px; }
.muted { color: var(--muted); font-size: 14px; }
.top { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 14px; }
.top-right { display: flex; align-items: center; gap: 8px; }
.points { background: var(--bg2); border-radius: 999px; padding: 6px 12px; font-size: 14px; }
.points b { color: var(--accent); }
.icon-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; background: var(--bg2); font-size: 18px; }
.card { background: var(--card); border-radius: var(--radius); padding: 16px; margin: 16px 0; }
[data-theme="arcade"] .card, [data-theme="arcade"] .bot { border: 1px solid #2b3570; }
[data-theme="cinema"] .card { border: 1px solid #3a3020; }
[data-theme="cozy"] .card, [data-theme="cozy"] .bot { box-shadow: 0 4px 0 #f1dcc0; }
[data-theme="canvas"] .card, [data-theme="canvas"] .bot { border: 1px solid #2d333d; }
[data-theme="mirror"] .card, [data-theme="mirror"] .bot { border: 1px solid #261c42; }
[data-theme="toon"] .card, [data-theme="toon"] .bot { border: 2px solid #222f59; box-shadow: 0 4px 0 #060917; }
[data-theme="dojo"] .card, [data-theme="dojo"] .bot { border: 1px solid #273325; }
[data-theme="noir"] .card, [data-theme="noir"] .bot { border: 1px solid #2a2e38; }
[data-theme="carnival"] .card, [data-theme="carnival"] .bot { border: 2px solid #3d175e; box-shadow: 0 4px 0 #07030d; }
[data-theme="void"] .card, [data-theme="void"] .bot { border: 1px solid #46307C; box-shadow: 0 0 16px #00F0FF22; }
[data-theme="void"] #game-badge[data-level]::after { content: " ยท " attr(data-level); }
[data-theme="throne"] .card, [data-theme="throne"] .bot { border: 1px solid #331845; }
[data-theme="lab"] .card, [data-theme="lab"] .bot { border: 1px solid #163437; }
[data-theme="ember"] .card, [data-theme="ember"] .bot { border: 1px solid #331915; }
[data-theme="parlor"] .card, [data-theme="parlor"] .bot { border: 1px solid #33271d; }
button {
font: inherit; border: 0; border-radius: var(--btn-radius); cursor: pointer;
background: var(--bg2); color: var(--text); padding: 10px 12px;
transition: transform .08s ease;
}
button:active { transform: scale(.97); }
button:disabled { opacity: .5; cursor: default; }
button.primary {
width: 100%; margin-top: 10px; background: var(--accent); color: var(--accent-text);
font-weight: 700; padding: 14px; font-family: var(--font-display); text-transform: var(--title-case); letter-spacing: .04em;
}
[data-theme="arcade"] button.primary { box-shadow: 0 0 18px #22d3ee66; }
[data-theme="cozy"] button.primary { box-shadow: 0 4px 0 #d9694a; }
[data-theme="canvas"] button.primary { box-shadow: 0 3px 0 #8b1818; }
[data-theme="mirror"] button.primary { box-shadow: 0 0 20px #a855f755, inset 0 1px 0 #e9d5ff66; }
[data-theme="toon"] button.primary { border: 2px solid #000; box-shadow: 0 4px 0 #000, 0 0 16px #ffe60066; font-weight: 900; }
[data-theme="dojo"] button.primary { box-shadow: 0 3px 0 #871c08; }
[data-theme="noir"] button.primary { box-shadow: 0 2px 0 #8a7120, inset 0 1px 0 #fff4; }
[data-theme="carnival"] button.primary { border: 2px solid #000; box-shadow: 0 4px 0 #000, 0 0 16px #9ef01a66; font-weight: 900; }
[data-theme="void"] button.primary { box-shadow: 0 0 20px #38bdf866, inset 0 1px 0 #e0f2fe88; }
[data-theme="throne"] button.primary { box-shadow: 0 3px 0 #926a04, inset 0 1px 0 #fef08a88; }
[data-theme="lab"] button.primary { box-shadow: 0 3px 0 #137537, 0 0 16px #22c55e44; }
[data-theme="ember"] button.primary { box-shadow: 0 3px 0 #9a3412, 0 0 16px #f9731644; font-weight: 900; }
[data-theme="parlor"] button.primary { box-shadow: 0 3px 0 #8c5d17, inset 0 1px 0 #fed7aa88; }
button.danger { background: transparent; color: var(--danger); }
button.link { background: transparent; color: var(--accent); padding: 6px 0; }
.tabs, .segmented { display: grid; gap: 6px; }
.tabs { display: flex; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.tabs button { flex: 1 0 auto; white-space: nowrap; }
.earned.down { color: var(--danger); }
.bot-elo { font-weight: 700; color: var(--text); font-size: 14px; }
.segmented { grid-template-columns: repeat(3, 1fr); }
.tabs button.on, .segmented button.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.bots { display: flex; flex-direction: column; gap: 8px; }
.bot { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 12px;
background: var(--card); border: 2px solid transparent; border-radius: var(--radius); }
.bot.on { border-color: var(--accent); }
[data-theme="arcade"] .bot.on { box-shadow: 0 0 16px #22d3ee55; }
[data-theme="canvas"] .bot.on { box-shadow: 0 0 12px #d32f2f44; }
[data-theme="mirror"] .bot.on { box-shadow: 0 0 18px #a855f744; }
[data-theme="toon"] .bot.on { box-shadow: 0 4px 0 #000, 0 0 16px #ffe60055; }
[data-theme="dojo"] .bot.on { box-shadow: 0 0 12px #d3381c44; border-color: #d3381c; }
[data-theme="noir"] .bot.on { box-shadow: 0 0 14px #d4af3744; border-color: #d4af37; }
[data-theme="carnival"] .bot.on { box-shadow: 0 4px 0 #000, 0 0 16px #9ef01a55; border-color: #9ef01a; }
[data-theme="void"] .bot.on { box-shadow: 0 0 18px #38bdf855; border-color: #38bdf8; }
[data-theme="throne"] .bot.on { box-shadow: 0 0 18px #eab30844; border-color: #eab308; }
[data-theme="lab"] .bot.on { box-shadow: 0 0 16px #22c55e44; border-color: #22c55e; }
[data-theme="ember"] .bot.on { box-shadow: 0 0 14px #f9731644; border-color: #f97316; }
[data-theme="parlor"] .bot.on { box-shadow: 0 0 14px #d4973b44; border-color: #d4973b; }
.avatar { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--bg2);
display: inline-flex; align-items: center; justify-content: center; font-size: 26px; }
.bot.on .avatar { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-3px); } }
.avatar.small { width: 32px; height: 32px; font-size: 19px; }
.bot-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bot-name { font-weight: 700; font-family: var(--font-display); }
.bot-bio { color: var(--muted); font-size: 13px; line-height: 1.3; }
.bot-side { flex: none; text-align: right; font-size: 12px; color: var(--muted); }
.beaten { color: var(--win); font-weight: 600; }
.games { list-style: none; margin: 0; padding: 0; }
.games li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.games li:first-child { border-top: 0; }
.games .res-w { color: var(--win); font-weight: 600; }
.games .res-l { color: var(--danger); font-weight: 600; }
.games .res-d { color: var(--muted); font-weight: 600; }
.games button { padding: 6px 10px; font-size: 14px; background: var(--accent); color: var(--accent-text); }
.dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
background: color-mix(in srgb, var(--bg) 88%, transparent);
backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
border-top: 1px solid color-mix(in srgb, var(--muted) 18%, transparent);
}
.dock > * { max-width: 488px; margin-left: auto; margin-right: auto; }
.dock-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; }
.odds-btn { padding: 0 10px; font-size: 13px; white-space: nowrap; background: var(--card); }
.odds-btn.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
/* Endgame drills */
.drills { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.drills button { width: 100%; display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px;
padding: 12px; text-align: start; background: var(--card); }
.drills .dr-icon { display: flex; justify-content: center; }
.drills .dr-icon .pc-icon { width: 30px; height: 30px; }
.drills .dr-icon .pc-icon + .pc-icon { margin-left: -12px; }
.pc-icon { width: 20px; height: 20px; vertical-align: -5px; }
.drills .dr-sub { display: block; color: var(--muted); font-size: 13px; font-weight: 400; margin-top: 2px; }
.drills .dr-stars { color: var(--accent); font-size: 14px; letter-spacing: 1px; }
/* Style screen */
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-card { padding: 0; overflow: hidden; text-align: left; border: 2px solid transparent; background: var(--card); }
.theme-card.on { border-color: var(--accent); }
.theme-swatch { display: grid; grid-template-columns: repeat(4, 1fr); height: 54px; }
.theme-card span.name { display: block; padding: 8px 10px; font-weight: 600; font-size: 14px; }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack-card { padding: 0; overflow: hidden; text-align: left; border: 2px solid transparent; background: var(--card); border-radius: var(--radius); }
.pack-card.on { border-color: var(--accent); }
.pack-preview { display: grid; grid-template-columns: repeat(3, 1fr); height: 54px; background: var(--sq-light); }
.pack-preview > :nth-child(2) { background: var(--sq-dark); }
.pack-preview svg, .pack-preview img { width: 100%; height: 100%; display: block; padding: 4px; box-sizing: border-box; }
.pack-card span.name { display: block; padding: 8px 10px; font-weight: 600; font-size: 14px; }
.wardrobe-card span.name { padding-bottom: 0; }
.wardrobe-card span.sub { display: block; padding: 2px 10px 8px; font-size: 12px; }
.wardrobe-card.locked .pack-preview { filter: grayscale(.6) brightness(.8); }
.wardrobe-card .pack-preview > span { display: block; height: 54px; overflow: hidden; }
.play-wardrobe { font-size: 13px; margin-top: 4px; }
.advanced-style { margin-top: 16px; }
.advanced-style > summary { cursor: pointer; font-weight: 600; padding: 10px 0; color: var(--muted, inherit); }
.advanced-style.locked > summary::after { content: " ๐"; }
.squad { display: flex; flex-direction: column; gap: 10px; }
.squad-row { background: var(--card); border-radius: var(--radius); padding: 10px 12px; }
.squad-row .role { font-weight: 600; font-size: 14px; margin-bottom: 6px; display: block; }
.squad-options { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.squad-options button { flex: none; width: 56px; height: 56px; padding: 4px; border: 2px solid transparent;
background: var(--sq-light); }
.squad-options button:nth-child(even) { background: var(--sq-dark); }
.squad-options button.on { border-color: var(--accent); }
/* Coming soon (freeSoon in app.js): seen, tried on, not put on */
.squad-options button.locked, #skins button.locked, #screen-edit-profile .cos-btn.locked > div:first-child { opacity: .5; }
#skins button.locked span, #screen-edit-profile .cos-btn.locked > div:last-child, #screen-edit-profile .chip.locked { color: var(--muted); }
.squad-options svg, .squad-options img { width: 100%; height: 100%; display: block; }
.row-setting { display: flex; justify-content: space-between; align-items: center; margin: 18px 0; }
.toggle { min-width: 72px; font-weight: 600; }
.toggle.on { background: var(--accent); color: var(--accent-text); }
/* Game screen */
.game-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.opp { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-family: var(--font-display); }
.speech { position: relative; background: var(--card); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; font-size: 15px; }
.speech::before { content: ""; position: absolute; top: -6px; right: 22px; width: 12px; height: 12px;
background: var(--card); transform: rotate(45deg); }
.board { position: relative; width: 100%; aspect-ratio: 1; touch-action: none; border-radius: 4px; box-shadow: var(--board-glow); }
.status { text-align: center; min-height: 22px; margin: 12px 0 4px; font-weight: 500; }
.actions { display: flex; justify-content: center; }
.result { text-align: center; background: var(--card); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.result h2 { font-size: 22px; margin: 0 0 4px; }
.earned { color: var(--win); font-weight: 600; }
/* The board, coloured by the theme (cm-chessboard cssClass "themed"). */
.cm-chessboard.themed .board :is(.square.white, .bd-light) { fill: var(--sq-light); }
.cm-chessboard.themed .board :is(.square.black, .bd-dark) { fill: var(--sq-dark); }
/* A board with board-fill.js paints its squares as two shapes under them;
the squares stay for input and markers, transparent (still hit by taps). */
:root .cm-chessboard.themed.bd-filled .board rect.square { fill: transparent; }
.cm-chessboard .board .bd-fill { pointer-events: none; }
.cm-chessboard.themed.border-type-none .board .border { stroke-width: 0; fill: var(--sq-dark); }
.cm-chessboard .markers .marker.marker-square,
.cm-chessboard .markers .marker-square {
fill: var(--lm-fill) !important;
opacity: 1 !important;
stroke: var(--lm-stroke) !important;
stroke-width: 3.5px !important;
filter: drop-shadow(0 0 1px var(--lm-edge)) !important;
}
.cm-chessboard .markers .marker.marker-frame-primary,
.cm-chessboard .markers .marker-frame-primary,
.cm-chessboard .markers .marker.marker-frame {
stroke: #ffffff !important;
stroke-width: 2.5px !important;
opacity: 0.85 !important;
fill: none !important;
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.7));
}
.cm-chessboard .markers .marker.marker-dot,
.cm-chessboard .markers .marker-dot {
fill: rgba(0, 0, 0, 0.32) !important;
stroke: rgba(255, 255, 255, 0.5) !important;
stroke-width: 1.2px !important;
opacity: 1 !important;
}
.cm-chessboard .markers .marker.marker-circle-danger,
.cm-chessboard .markers .marker-circle-danger {
stroke: var(--chk-stroke) !important;
stroke-width: 3.5px !important;
fill: var(--chk-fill) !important;
opacity: 1 !important;
filter: drop-shadow(0 0 1px #000000) drop-shadow(0 0 2px #000000) drop-shadow(0 0 4px rgba(255, 34, 34, 0.6)) !important;
}
[data-theme="void"] .cm-chessboard .markers .marker-frame-primary,
[data-theme="void"] .cm-chessboard .markers .marker-frame {
stroke: #2A8FD0 !important;
stroke-width: 2.5px !important;
opacity: 1 !important;
filter: drop-shadow(0 0 4px #2A8FD0) !important;
}
[data-theme="void"] .cm-chessboard .markers .marker-dot {
fill: #2A8FD0 !important;
opacity: 0.6 !important;
stroke: none !important;
filter: drop-shadow(0 0 2px #2A8FD0) !important;
}
[data-theme="void"] .cm-chessboard .markers .marker-circle-danger {
filter: drop-shadow(0 0 4px #7B3FE4) !important;
}
.cm-chessboard.themed .coordinates { pointer-events: none; user-select: none; }
.cm-chessboard.themed .coordinates .coordinate {
font-size: 8px;
fill: #fff;
stroke: rgba(0, 0, 0, 0.7);
stroke-width: 2.5px;
paint-order: stroke fill;
font-weight: 800 !important;
}
[data-theme="canvas"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 700; }
[data-theme="mirror"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 400; }
[data-theme="toon"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 900; }
[data-theme="dojo"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 700; }
[data-theme="noir"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 400; }
[data-theme="carnival"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 900; }
[data-theme="void"] .cm-chessboard.themed .coordinates .coordinate { font-family: "Manrope", sans-serif; font-weight: 600; }
[data-theme="throne"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 400; }
[data-theme="lab"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font); font-weight: 700; }
[data-theme="ember"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 700; }
[data-theme="parlor"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 400; }
/* Piece motion (fx.js). transform-box makes scale/rotate pivot on the piece. */
.cm-chessboard .pieces g { transform-box: fill-box; transform-origin: 50% 90%; }
.cm-chessboard .pieces g.fx-lifted { translate: 0 -6%; filter: drop-shadow(0 4px 3px #0006); transition: translate .12s ease; }
/* motion.js: the ghost copies that perform each move, and their effects. */
.mv-ghost { position: absolute; pointer-events: none; will-change: transform; }
.mv-body { width: 100%; height: 100%; display: block; overflow: visible; will-change: transform; }
.mv-after .mv-body { opacity: .35; }
.mv-spark { position: absolute; border-radius: 50%; margin: -3px 0 0 -3px; pointer-events: none; box-shadow: 0 0 6px currentColor; }
.mv-beam { position: absolute; height: 4px; margin-top: -2px; border-radius: 2px; transform-origin: 0 50%; pointer-events: none; }
.mv-label { position: absolute; font: 900 26px/1 var(--font-display); text-shadow: 0 2px 0 #000a, 0 0 12px currentColor; pointer-events: none; white-space: nowrap; }
.mv-label.big { font-size: 38px; }
.mv-vignette { position: absolute; inset: 0; border-radius: 4px; pointer-events: none; }
.mv-ring { position: absolute; border: 3px solid; border-radius: 50%; pointer-events: none; }
.mv-slash { position: absolute; height: 3px; margin-top: -1px; background: #fff; border-radius: 2px;
box-shadow: 0 0 10px #fff, 0 0 20px var(--accent); transform-origin: 0 50%; pointer-events: none; }
.fx-layer { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 3; }
.fx-check { position: absolute; border-radius: 50%;
background: radial-gradient(circle, #ff3b3b99 0%, #ff3b3b33 50%, transparent 72%);
animation: checkpulse .7s ease-in-out 2; }
@keyframes checkpulse { 50% { transform: scale(1.25); opacity: .6; } }
.fx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.fx-confetti span { position: absolute; top: 0; width: 8px; height: 12px; border-radius: 2px; }
/* Advantage bar: White's share fills from the left. */
.evalbar { position: relative; height: 22px; margin: 0 0 8px; border-radius: 6px; overflow: hidden;
background: #26222c; border: 1px solid color-mix(in srgb, var(--muted) 30%, transparent); }
.eval-fill { position: absolute; inset: 0 auto 0 0; width: 50%; background: #f1ece2; transition: width .45s ease; }
.eval-label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font: 600 12px/1 var(--font); color: #fff; mix-blend-mode: difference; }
/* Game review */
.result-actions { display: grid; grid-template-columns: auto 1fr; gap: 8px; margin-top: 10px; }
.result-actions .primary { margin: 0; }
.rv-controls { display: grid; grid-template-columns: repeat(4, 44px) 1fr; gap: 6px; }
.rv-tools { display: flex; gap: 6px; margin-top: 6px; }
.rv-tools #rv-analyse { flex: 1; }
.rv-tools #rv-analyse.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.pgn-box { width: 100%; min-height: 90px; font: 12px/1.4 ui-monospace, monospace; background: var(--card); color: var(--text);
border: 1px solid var(--muted); border-radius: var(--radius); padding: 8px; }
.rv-list { display: grid; grid-template-columns: 34px 1fr 1fr; gap: 4px; margin: 6px 0 30px; max-height: 32vh; overflow-y: auto; }
.rv-n { color: var(--muted); font-size: 13px; align-self: center; }
.rv-move { display: flex; justify-content: space-between; padding: 6px 8px; font-size: 14px; text-align: left; background: var(--card); }
.rv-move.on { outline: 2px solid var(--accent); }
.rv-glyph { font-weight: 800; }
.rv-move[data-kind="inaccuracy"] .rv-glyph { color: #f6c445; }
.rv-move[data-kind="mistake"] .rv-glyph { color: #ff9f43; }
.rv-move[data-kind="blunder"] .rv-glyph { color: var(--danger); }
.games button.mini { padding: 2px 6px; font-size: 13px; background: var(--bg2); color: var(--text); }
/* Modes and puzzles */
.modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 14px; }
.modes button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 6px; background: var(--card);
border-radius: var(--radius); }
.mode-icon { font-size: 26px; }
.modes b { font-size: 12px; font-family: var(--font-display); text-align: center; }
.mode-sub { font-size: 11px; color: var(--muted); min-height: 14px; }
/* Chess or checkers (docs/DECISIONS.md #44) */
.kinds { grid-template-columns: 1fr 1fr; margin-bottom: 12px; }
.kinds button { display: flex; align-items: center; justify-content: center; gap: 6px; }
.kind-icon { font-size: 18px; line-height: 1; }
.ck-disc { display: inline-block; width: 16px; height: 16px; border-radius: 50%;
background: radial-gradient(circle at 35% 30%, #ff8a7a, #c0392b 70%); box-shadow: 0 2px 0 #7d1f16; }
body[data-kind="checkers"] .chess-only, body[data-kind="checkers"] #odds,
body[data-kind="checkers"] #bot-tension, body[data-kind="checkers"] #onl-mode [data-mode="tension"] { display: none; }
body[data-kind="checkers"] .dock-row { grid-template-columns: 1fr; }
.ck-board { position: relative; aspect-ratio: 1; max-width: 100%; background: var(--sq-light); border-radius: 6px;
overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.ck-sq { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; background: var(--sq-dark); }
.ck-sq.last { box-shadow: inset 0 0 0 100px color-mix(in srgb, #ffd54a 32%, transparent); }
.ck-board.live .ck-sq.can { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); }
.ck-sq.sel { box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--accent) 38%, transparent); }
.ck-sq.dot::after { content: ""; position: absolute; inset: 37%; border-radius: 50%; background: color-mix(in srgb, var(--accent) 75%, transparent); }
.ck-piece { position: absolute; left: 0; top: 0; width: 12.5%; height: 12.5%; pointer-events: none;
transition: transform .14s ease-out, opacity .2s; will-change: transform; z-index: 1; }
.ck-piece.moving { z-index: 2; }
.ck-piece::before { content: ""; position: absolute; inset: 11%; border-radius: 50%; }
.ck-piece.w::before { background: radial-gradient(circle at 35% 30%, #fffdf7, #e4dccb 70%); box-shadow: 0 3px 0 #a99c80, 0 4px 6px rgba(0,0,0,.35); }
.ck-piece.b::before { background: radial-gradient(circle at 35% 30%, #5b5b66, #22222a 70%); box-shadow: 0 3px 0 #0b0b0e, 0 4px 6px rgba(0,0,0,.45); }
.ck-piece.king::after { content: "โ
"; position: absolute; inset: 0; display: grid; place-items: center;
font-size: clamp(14px, 5vw, 26px); color: #e8b931; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ck-piece.taken { opacity: 0; transform-origin: center; }
/* Leaderboard */
button.points { color: var(--text); font-weight: 400; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-list li { display: grid; grid-template-columns: minmax(36px, auto) 1fr auto; align-items: center; gap: 8px; padding: 9px 10px;
border-top: 1px solid color-mix(in srgb, var(--muted) 20%, transparent); }
.board-list li:first-child { border-top: 0; }
.board-list li.me { background: color-mix(in srgb, var(--accent) 18%, transparent); border-radius: var(--radius); }
.lb-rank { text-align: center; font-weight: 600; color: var(--muted); }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list b { color: var(--accent); font-variant-numeric: tabular-nums; }
#lb-status:empty { display: none; }
.lb-me { margin: 4px 0 10px; text-align: center; color: var(--muted); font-size: 14px; }
.lb-me li { text-align: start; color: var(--text); font-size: 16px; }
.opening { text-align: center; color: var(--muted); font-size: 13px; margin: 0 0 6px; min-height: 16px; }
.pz-stats { text-align: center; color: var(--muted); font-size: 14px; margin: 0 0 8px; min-height: 18px; }
.status[data-kind="ok"] { color: var(--win); }
.status[data-kind="bad"] { color: var(--danger); }
/* Coordinate trainer */
#co-sides { grid-template-columns: 1fr 1fr; margin-bottom: 8px; }
#co-sides.disabled { opacity: .5; pointer-events: none; }
.co-timer { height: 4px; background: var(--bg2); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
#co-bar { height: 100%; width: 100%; background: var(--accent); transition: width .1s linear; }
.co-wrap { position: relative; }
.co-target { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
font: 700 clamp(64px, 24vw, 120px)/1 var(--font-display); color: var(--accent);
text-shadow: 0 2px 12px rgba(0,0,0,.55); opacity: .92; }
.co-target.pop { animation: co-pop .18s ease-out; }
@keyframes co-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: .92; } }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; margin-bottom: 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; padding: 6px 12px; border-radius: 999px; font-size: 13px; background: var(--card); white-space: nowrap; }
.chips button.on { background: var(--accent); color: var(--accent-text); font-weight: 600; }
.pz-actions { display: flex; gap: 8px; justify-content: center; }
.pz-actions button { min-width: 100px; }
.pz-actions .primary { width: auto; margin: 0; padding: 10px 22px; }
/* Draw offers */
.draw-bar { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; background: var(--card);
border: 2px solid var(--accent); border-radius: var(--radius); padding: 8px 10px; margin: 8px 0; font-weight: 600; }
.draw-bar .primary { margin: 0; padding: 8px 14px; width: auto; }
.actions { gap: 8px; }
.result-actions { grid-template-columns: auto auto 1fr; }
/* Clocks */
.segmented.tc { grid-template-columns: repeat(5, 1fr); margin-bottom: 10px; }
.segmented.tc button { padding: 7px 0; font-size: 13px; }
.clock { font: 700 20px/1 ui-monospace, "SF Mono", monospace; text-align: right; padding: 6px 12px; margin: 6px 0;
border-radius: 8px; background: var(--card); color: var(--muted); }
.clock.running { background: var(--accent); color: var(--accent-text); }
.clock.low { background: var(--danger); color: #fff; }
[data-theme="void"] .clock { font-family: "IBM Plex Mono", monospace; font-weight: 500; }
/* Lobby, challenges */
.lobby .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lobby .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby .elo { color: var(--muted); font-size: 13px; }
.lobby button:disabled { background: var(--bg2); color: var(--muted); }
.initial { flex: none; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center;
justify-content: center; background: var(--accent); color: var(--accent-text); font-weight: 700; }
.incoming { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 60;
max-width: 496px; margin: 0 auto; background: var(--card); border-radius: var(--radius); padding: 14px 16px;
box-shadow: 0 10px 40px #0008; border: 2px solid var(--accent); }
.incoming p { margin: 0 0 10px; font-weight: 600; }
.incoming-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.incoming-actions .primary { margin: 0; padding: 10px; }
.toast { position: fixed; left: 50%; top: 14px; transform: translateX(-50%); z-index: 61; background: var(--card);
color: var(--text); padding: 10px 16px; border-radius: 999px; box-shadow: 0 6px 24px #0007; font-size: 14px; }
.skins { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.skins button { flex: none; width: 92px; padding: 6px; border: 2px solid transparent; background: var(--sq-dark); }
.skins button.on { border-color: var(--accent); }
.skins svg { width: 100%; height: 40px; display: block; }
.skins span { display: block; font-size: 12px; margin-top: 4px; color: var(--sq-light); }
/* Animation lab (/lab) */
.lab-fps { font: 600 13px/1 ui-monospace, monospace; color: var(--win); }
.lab-fps.bad, .lab-info.bad { color: var(--danger); }
.lab-info { min-height: 40px; margin: 10px 0; font-size: 14px; }
.lab-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lab-controls button { font-size: 13px; padding: 9px 4px; }
.lab-controls button.on { background: var(--accent); color: var(--accent-text); }
.lab-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 12px 0 30px; }
.lab-list button { font-size: 13px; text-align: left; }
.lab-list button.on { background: var(--accent); color: var(--accent-text); }
/* Character cut-in: a slanted band with speed lines slashing across the screen. */
.cutin { position: fixed; left: 0; right: 0; top: 34%; z-index: 40; pointer-events: none; visibility: hidden; }
.cutin.show { visibility: visible; }
.cutin-band {
display: flex; align-items: center; gap: 14px; padding: 16px 22px; min-height: 104px;
clip-path: polygon(0 18%, 100% 0, 100% 82%, 0 100%);
background:
repeating-linear-gradient(100deg, transparent 0 22px, #ffffff1f 22px 24px),
linear-gradient(100deg, var(--accent2), var(--accent));
color: #fff; transform: translateX(110%);
}
.cutin.show .cutin-band { animation: slash 1.9s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes slash {
0% { transform: translateX(110%) skewX(-8deg); }
18% { transform: translateX(0) skewX(-8deg); }
80% { transform: translateX(-2%) skewX(-8deg); }
100% { transform: translateX(-115%) skewX(-8deg); }
}
.cutin-avatar { font-size: 58px; filter: drop-shadow(0 4px 6px #0007); animation: none; }
.cutin.show .cutin-avatar { animation: pop .5s .15s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes pop { from { transform: scale(.3) rotate(-20deg); } to { transform: scale(1) rotate(0); } }
.cutin-text { display: flex; flex-direction: column; text-shadow: 0 2px 4px #0006; }
.cutin-name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-size: 15px; opacity: .9; }
.cutin-line { font-size: 19px; font-weight: 700; line-height: 1.25; }
[data-theme="cinema"] .cutin-band {
clip-path: none; background: #000; color: var(--accent); border-top: 1px solid #d4af3766; border-bottom: 1px solid #d4af3766;
justify-content: center; text-align: center;
}
[data-theme="cinema"] .cutin.show .cutin-band { animation: fadeband 1.9s ease forwards; }
@keyframes fadeband { 0%, 100% { transform: none; opacity: 0; } 15%, 85% { transform: none; opacity: 1; } }
[data-theme="cinema"] .cutin-line { font-family: var(--font-display); font-style: italic; font-weight: 400; }
[data-theme="cozy"] .cutin-band { clip-path: none; margin: 0 16px; border-radius: 26px; background: #fff; color: var(--text);
box-shadow: 0 6px 0 #f1dcc0; text-shadow: none; }
[data-theme="cozy"] .cutin.show .cutin-band { animation: bounceband 1.9s ease forwards; }
@keyframes bounceband { 0% { transform: scale(.4); opacity: 0; } 12% { transform: scale(1.06); opacity: 1; }
20%, 85% { transform: scale(1); opacity: 1; } 100% { transform: scale(.8); opacity: 0; } }
[data-theme="cozy"] .cutin-text { text-shadow: none; }
[data-theme="classic"] .cutin-band { clip-path: none; background: var(--card); color: var(--text); margin: 0 16px;
border-radius: var(--radius); box-shadow: 0 8px 30px #0004; text-shadow: none; }
[data-theme="classic"] .cutin-text { text-shadow: none; }
[data-theme="canvas"] .cutin-band {
clip-path: none; margin: 0 16px; border-radius: var(--radius); background: #181b20; color: #ede9e3;
border-left: 6px solid var(--accent); border-right: 6px solid var(--accent2);
box-shadow: 0 10px 30px #000b;
}
[data-theme="canvas"] .cutin.show .cutin-band { animation: slamband 1.9s cubic-bezier(.15,.85,.2,1) forwards; }
@keyframes slamband {
0% { transform: translateY(-40px); opacity: 0; }
14% { transform: translateY(0); opacity: 1; }
85% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(30px); opacity: 0; }
}
[data-theme="canvas"] .cutin-text { text-shadow: none; }
[data-theme="canvas"] .cutin-line { font-family: var(--font-display); letter-spacing: .06em; font-weight: 700; }
[data-theme="mirror"] .cutin-band {
clip-path: none; background: #0c0919f0; color: var(--text);
border-top: 1px solid #a855f777; border-bottom: 1px solid #a855f777;
box-shadow: 0 0 30px #a855f726; justify-content: center; text-align: center;
}
[data-theme="mirror"] .cutin.show .cutin-band { animation: mirrorband 1.9s ease forwards; }
@keyframes mirrorband {
0% { transform: scaleX(.8); opacity: 0; }
15% { transform: scaleX(1); opacity: 1; }
85% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(.9); opacity: 0; }
}
[data-theme="mirror"] .cutin-line { font-family: var(--font-display); font-weight: 400; letter-spacing: .08em; color: #f5f0ff; }
[data-theme="mirror"] .cutin-text { text-shadow: 0 0 16px #a855f788; }
[data-theme="toon"] .cutin-band {
clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
background: repeating-linear-gradient(-45deg, #ff1493, #ff1493 16px, #db0d7a 16px, #db0d7a 32px);
color: #ffe600; border: 3px solid #000; box-shadow: 0 8px 0 #000;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
[data-theme="toon"] .cutin.show .cutin-band { animation: toonband 1.9s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes toonband {
0% { transform: scale(.2) rotate(-8deg); opacity: 0; }
15% { transform: scale(1.08) rotate(2deg); opacity: 1; }
24% { transform: scale(1) rotate(-1deg); opacity: 1; }
85% { transform: scale(1) rotate(-1deg); opacity: 1; }
100% { transform: scale(.4) rotate(15deg); opacity: 0; }
}
[data-theme="toon"] .cutin-line { font-family: var(--font-display); letter-spacing: .04em; }
[data-theme="dojo"] .cutin-band {
clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%); margin: 0 16px; border-radius: var(--radius);
background: #192018; color: #f5f2e9; border-left: 6px solid var(--accent); border-bottom: 3px solid var(--accent2);
box-shadow: 0 10px 30px #000b;
}
[data-theme="dojo"] .cutin.show .cutin-band { animation: dojoband 1.9s cubic-bezier(.15,.85,.2,1) forwards; }
@keyframes dojoband {
0% { transform: translateX(-50px) skewX(-4deg); opacity: 0; }
14% { transform: translateX(0) skewX(0); opacity: 1; }
85% { transform: translateX(0) skewX(0); opacity: 1; }
100% { transform: translateX(40px) skewX(4deg); opacity: 0; }
}
[data-theme="dojo"] .cutin-line { font-family: var(--font-display); letter-spacing: .06em; font-weight: 900; }
[data-theme="noir"] .cutin-band {
clip-path: none; margin: 0; background: #08090bf4; color: #eaecee;
border-top: 1px solid #d4af37; border-bottom: 1px solid #d4af37;
box-shadow: 0 0 40px #000c; justify-content: center; text-align: center;
}
[data-theme="noir"] .cutin.show .cutin-band { animation: noirband 1.9s cubic-bezier(.1,.9,.2,1) forwards; }
@keyframes noirband {
0% { transform: scaleY(0); opacity: 0; }
12% { transform: scaleY(1); opacity: 1; }
85% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(0); opacity: 0; }
}
[data-theme="noir"] .cutin-line { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: .08em; color: #d4af37; }
[data-theme="carnival"] .cutin-band {
clip-path: polygon(0 8%, 100% 0, 98% 92%, 2% 100%);
background: repeating-linear-gradient(45deg, #2b0e45, #2b0e45 14px, #44176d 14px, #44176d 28px);
color: #9ef01a; border: 3px solid #9ef01a; box-shadow: 0 6px 0 #000, 0 0 20px #9ef01a44;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
}
[data-theme="carnival"] .cutin.show .cutin-band { animation: carnivalband 1.9s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes carnivalband {
0% { transform: scale(.2) rotate(10deg); opacity: 0; }
15% { transform: scale(1.06) rotate(-2deg); opacity: 1; }
25% { transform: scale(1) rotate(1deg); opacity: 1; }
85% { transform: scale(1) rotate(1deg); opacity: 1; }
100% { transform: scale(.3) rotate(-12deg); opacity: 0; }
}
[data-theme="carnival"] .cutin-line { font-family: var(--font-display); letter-spacing: .05em; }
[data-theme="void"] .cutin-band {
clip-path: none; margin: 0 16px; border-radius: var(--radius); background: #070d1ff2; color: #f0f7ff;
border: 1px solid #38bdf888; box-shadow: 0 0 35px #38bdf844, inset 0 0 20px #38bdf822;
justify-content: center; text-align: center;
}
[data-theme="void"] .cutin.show .cutin-band { animation: voidband 1.9s ease forwards; }
@keyframes voidband {
0% { transform: scale(1.15); opacity: 0; filter: blur(6px); }
15% { transform: scale(1); opacity: 1; filter: blur(0); }
85% { transform: scale(1); opacity: 1; filter: blur(0); }
100% { transform: scale(0.92); opacity: 0; filter: blur(4px); }
}
[data-theme="void"] .cutin-text { text-shadow: 0 0 16px #38bdf8aa; }
[data-theme="void"] .cutin-line { font-family: var(--font-display); letter-spacing: .08em; font-weight: 600; color: #ffffff; }
[data-theme="throne"] .cutin-band {
clip-path: none; margin: 0 16px; border-radius: var(--radius); background: #130a1ff2; color: #f6edf9;
border: 1px solid #eab30888; border-left: 6px solid #eab308; border-right: 6px solid #a855f7;
box-shadow: 0 10px 35px #000c, 0 0 20px #eab30822;
}
[data-theme="throne"] .cutin.show .cutin-band { animation: throneband 1.9s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes throneband {
0% { transform: translateY(-30px) scale(.95); opacity: 0; }
15% { transform: translateY(0) scale(1); opacity: 1; }
85% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(20px) scale(.96); opacity: 0; }
}
[data-theme="throne"] .cutin-text { text-shadow: 0 2px 6px #0008; }
[data-theme="throne"] .cutin-line { font-family: var(--font-display); letter-spacing: .08em; font-weight: 400; color: #fef08a; }
[data-theme="lab"] .cutin-band {
clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); margin: 0 16px; border-radius: var(--radius);
background: #0a181bf2; color: #e1fbf5; border: 1px solid #22c55e88; border-top: 3px solid #06b6d4;
box-shadow: 0 0 30px #22c55e2b; justify-content: center; text-align: center;
}
[data-theme="lab"] .cutin.show .cutin-band { animation: labband 1.9s cubic-bezier(.15,.85,.2,1) forwards; }
@keyframes labband {
0% { transform: scaleX(.7); opacity: 0; filter: brightness(2); }
12% { transform: scaleX(1); opacity: 1; filter: brightness(1); }
85% { transform: scaleX(1); opacity: 1; }
100% { transform: scaleX(.8); opacity: 0; }
}
[data-theme="lab"] .cutin-text { text-shadow: 0 0 12px #22c55e77; }
[data-theme="lab"] .cutin-line { font-family: var(--font-display); letter-spacing: .06em; font-weight: 700; color: #4eed6e; }
[data-theme="ember"] .cutin-band {
clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); margin: 0 16px; border-radius: var(--radius);
background: #1a0e0cf4; color: #fbeefd; border-left: 6px solid #f97316; border-right: 6px solid #dc2626;
box-shadow: 0 10px 35px #000c, 0 0 24px #ea580c22;
}
[data-theme="ember"] .cutin.show .cutin-band { animation: emberband 1.9s cubic-bezier(.15,.85,.2,1) forwards; }
@keyframes emberband {
0% { transform: scale(1.1) translateY(20px); opacity: 0; filter: blur(4px); }
14% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
85% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
100% { transform: scale(.95) translateY(-20px); opacity: 0; filter: blur(4px); }
}
[data-theme="ember"] .cutin-text { text-shadow: 0 0 14px #ea580c88; }
[data-theme="ember"] .cutin-line { font-family: var(--font-display); letter-spacing: .06em; font-weight: 900; color: #fed7aa; }
[data-theme="parlor"] .cutin-band {
clip-path: none; margin: 0 16px; border-radius: var(--radius); background: #19130df2; color: #f5efe4;
border: 1px solid #d4973b66; border-top: 2px solid #d4973b; border-bottom: 2px solid #d4973b;
box-shadow: 0 8px 30px #000b; justify-content: center; text-align: center;
}
[data-theme="parlor"] .cutin.show .cutin-band { animation: parlorband 1.9s ease forwards; }
@keyframes parlorband {
0% { transform: scale(.95); opacity: 0; }
15% { transform: scale(1); opacity: 1; }
85% { transform: scale(1); opacity: 1; }
100% { transform: scale(.97); opacity: 0; }
}
[data-theme="parlor"] .cutin-line { font-family: var(--font-display); font-style: italic; font-weight: 400; letter-spacing: .08em; color: #fde68a; }
.cutin[data-kind="mate"] .cutin-line { font-size: 22px; }
/* Versus intro */
.versus { position: fixed; inset: 0; z-index: 45; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
background: #000d; color: #fff; visibility: hidden; pointer-events: none; }
.versus.show { visibility: visible; }
.vs-side { display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--font-display);
text-transform: uppercase; font-weight: 700; text-align: center; padding: 0 8px; }
.vs-emoji { font-size: 72px; }
.vs-you::before { content: "๐ซต"; display: block; font-size: 64px; margin-bottom: 6px; }
.vs-mark { font-family: var(--font-display); font-size: 54px; font-weight: 900; color: var(--accent);
text-shadow: 0 0 20px var(--accent), 4px 4px 0 var(--accent2); }
.versus.show .vs-left { animation: inleft .45s cubic-bezier(.2,.9,.3,1.2) both; }
.versus.show .vs-right { animation: inright .45s cubic-bezier(.2,.9,.3,1.2) both; }
.versus.show .vs-mark { animation: pop .5s .25s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes inleft { from { transform: translateX(-100vw); } }
@keyframes inright { from { transform: translateX(100vw); } }
[data-theme="canvas"] .versus { background: #0e1014f5; }
[data-theme="canvas"] .vs-mark { color: var(--accent); text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--accent2); }
[data-theme="mirror"] .versus { background: #07040ff2; }
[data-theme="mirror"] .vs-mark { color: #f3e8ff; text-shadow: 0 0 16px var(--accent), 0 0 32px var(--accent2); font-weight: 400; letter-spacing: .08em; }
[data-theme="toon"] .versus { background: #090e22f2; }
[data-theme="toon"] .vs-mark { color: #ffe600; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 6px 6px 0 #ff1493; font-weight: 900; }
[data-theme="dojo"] .versus { background: #0f140ef5; }
[data-theme="dojo"] .vs-mark { color: var(--accent); text-shadow: 3px 3px 0 #000, 6px 6px 0 var(--accent2); font-weight: 900; }
[data-theme="noir"] .versus { background: #08090cf6; }
[data-theme="noir"] .vs-mark { color: #d4af37; text-shadow: 0 0 16px #d4af3788; font-weight: 400; letter-spacing: .12em; }
[data-theme="carnival"] .versus { background: #0c0417f5; }
[data-theme="carnival"] .vs-mark { color: #9ef01a; text-shadow: -3px -3px 0 #000, 3px -3px 0 #000, -3px 3px 0 #000, 3px 3px 0 #000, 6px 6px 0 #b5179e; font-weight: 900; }
[data-theme="void"] .versus { background: #04060ff4; }
[data-theme="void"] .vs-mark { color: #e0f2fe; text-shadow: 0 0 20px #38bdf8, 0 0 40px #818cf8; font-weight: 700; letter-spacing: .1em; }
[data-theme="throne"] .versus { background: #09050ff5; }
[data-theme="throne"] .vs-mark { color: #eab308; text-shadow: 0 0 16px #eab30888, 0 0 32px #a855f766; font-weight: 400; letter-spacing: .1em; }
[data-theme="lab"] .versus { background: #040e10f5; }
[data-theme="lab"] .vs-mark { color: #22c55e; text-shadow: 0 0 16px #22c55e, 0 0 32px #06b6d4; font-weight: 900; letter-spacing: .08em; }
[data-theme="ember"] .versus { background: #0d0706f5; }
[data-theme="ember"] .vs-mark { color: #f97316; text-shadow: 3px 3px 0 #000, 0 0 24px #ea580c, 0 0 48px #dc2626; font-weight: 900; }
[data-theme="parlor"] .versus { background: #0e0b08f5; }
[data-theme="parlor"] .vs-mark { color: #d4973b; text-shadow: 2px 2px 0 #000, 0 0 20px #d4973b55; font-weight: 400; letter-spacing: .1em; }
[data-theme="longnight"] .versus { background: #07111cf5; }
[data-theme="longnight"] .vs-mark { color: #7fd6ff; text-shadow: 3px 3px 0 #000, 0 0 24px #7fd6ff, 0 0 48px #12304a; font-weight: 900; }
.message { text-align: center; margin-top: 30vh; color: var(--muted); }
.spinner { width: 32px; height: 32px; margin: 40vh auto 0; border-radius: 50%;
border: 3px solid var(--bg2); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* The Long Night */
[data-theme="longnight"] {
--bg: #07111c; --bg2: #12304a; --card: #0b1a29; --text: #d6e6f0; --muted: #7395b0;
--accent: #7fd6ff; --accent-text: #07111c; --accent2: #eaf6ff; --danger: #ef4444; --win: #7fd6ff;
--sq-light: #8fadc6; --sq-dark: #35668c; --coord: #7fd6ff;
--radius: 4px; --btn-radius: 4px;
--font: system-ui, -apple-system, sans-serif;
--font-display: "Times New Roman", Times, serif;
--title-case: uppercase;
--board-glow: 0 0 0 2px #dff4ff, 0 0 20px 4px #8fdcff88, 0 0 44px 8px #5fb4ff33, 0 14px 36px #000e;
--line: #12304a;
--gold: #7fd6ff;
--rim-in: inset 0 0 0 2px #eaf8ff, inset 0 0 16px 2px #bfeaff;
}
[data-theme="longnight"] body {
background: radial-gradient(100% 65% at 50% 15%, #0b1e36 0%, var(--bg) 68%) fixed;
}
[data-theme="longnight"] .card, [data-theme="longnight"] .bot { border: 1px solid #12304a; }
[data-theme="longnight"] button.primary { box-shadow: 0 3px 0 #3a81a8, 0 0 16px #7fd6ff44; font-weight: 700; }
[data-theme="longnight"] .bot.on { box-shadow: 0 0 14px #7fd6ff44; border-color: #7fd6ff; }
[data-theme="longnight"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 700; }
[data-theme="longnight"] .cutin-band {
clip-path: polygon(2% 0, 100% 0, 98% 100%, 0 100%); margin: 0 16px; border-radius: var(--radius);
background: #07111cf4; color: #d6e6f0; border-left: 6px solid #7fd6ff; border-right: 6px solid #12304a;
box-shadow: 0 10px 35px #000c, 0 0 24px #7fd6ff22;
}
[data-theme="longnight"] .cutin.show .cutin-band { animation: emberband 1.9s cubic-bezier(.15,.85,.2,1) forwards; }
[data-theme="longnight"] .cutin-text { text-shadow: 0 0 14px #7fd6ff88; }
[data-theme="longnight"] .cutin-line { font-family: var(--font-display); letter-spacing: .06em; font-weight: 900; color: #d6e6f0; }
/* Flower Field (Frieren): a meadow at dusk, a mage's gold */
[data-theme="meadow"] .versus { background: #0d1714f5; }
[data-theme="meadow"] .vs-mark { color: #e8c66a; text-shadow: 2px 2px 0 #000, 0 0 22px #e8c66a88, 0 0 40px #9fe6c844; font-weight: 700; letter-spacing: .08em; }
[data-theme="meadow"] {
--bg: #0d1714; --bg2: #1c2c26; --card: #122019; --text: #eef2e4; --muted: #93a99c;
--accent: #e8c66a; --accent-text: #0d1714; --accent2: #9fe6c8; --danger: #ef4444; --win: #9fe6c8;
--sq-light: #adbb8a; --sq-dark: #5f7f5b; --coord: #e8c66a;
--radius: 10px; --btn-radius: 10px;
--font: system-ui, -apple-system, sans-serif;
--font-display: Georgia, "Times New Roman", serif;
--board-glow: 0 0 0 2px #e8c66a, 0 0 18px 3px #e8c66a55, 0 0 40px 8px #9fe6c822, 0 14px 36px #000d;
--line: #1c2c26;
--gold: #e8c66a;
--rim-in: inset 0 0 0 2px #f6e7b4, inset 0 0 14px 1px #9fe6c866;
}
[data-theme="meadow"] body {
background: radial-gradient(110% 70% at 50% 10%, #1a2e27 0%, var(--bg) 70%) fixed;
}
[data-theme="meadow"] .card, [data-theme="meadow"] .bot { border: 1px solid #23372f; }
[data-theme="meadow"] button.primary { box-shadow: 0 3px 0 #a8873a, 0 0 14px #e8c66a33; font-weight: 700; }
[data-theme="meadow"] .bot.on { box-shadow: 0 0 14px #e8c66a44; border-color: #e8c66a; }
[data-theme="meadow"] .cm-chessboard.themed .coordinates .coordinate { font-family: var(--font-display); font-weight: 700; }
[data-theme="meadow"] .cutin-band {
margin: 0 16px; border-radius: var(--radius);
background: #0d1714f2; color: #eef2e4; border-left: 5px solid #e8c66a; border-right: 5px solid #9fe6c8;
box-shadow: 0 10px 35px #000c, 0 0 24px #e8c66a22;
}
[data-theme="meadow"] .cutin-text { text-shadow: 0 0 14px #e8c66a77; }
[data-theme="meadow"] .cutin-line { font-family: var(--font-display); letter-spacing: .04em; font-weight: 700; color: #eef2e4; }
@keyframes spinner-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
.spinner {
animation: spinner-pulse 1.6s ease-in-out infinite !important;
}
.ck-piece {
transition: none !important;
}
.co-target.pop {
animation: none !important;
}
.cutin-band {
transform: none !important;
}
.cutin.show .cutin-band {
animation: fadeband 1.9s ease forwards !important;
transform: none !important;
}
.cutin.show .cutin-avatar {
animation: none !important;
}
.versus.show .vs-left,
.versus.show .vs-right,
.versus.show .vs-mark {
animation: none !important;
transform: none !important;
}
}
#opp-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.game-top .opp { min-width: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.vs-emoji img { width: 1.25em; height: 1.25em; object-fit: cover; border-radius: 50%; vertical-align: middle; }
.cutin-avatar img { width: 1.3em; height: 1.3em; object-fit: cover; border-radius: 50%; vertical-align: middle; }
/* --- Navigation & Screens Layout (docs/design/home.html) --- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.me { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.me b { font-family: var(--font-display); text-transform: var(--title-case); font-size: 15px; letter-spacing: .02em; }
.ava { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 700 16px var(--font);
background: linear-gradient(135deg, #7c3aed, var(--accent)); color: #fff; position: relative; flex: none; overflow: hidden; }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.ava.frame-neon::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--accent);
box-shadow: 0 0 10px var(--accent), inset 0 0 6px var(--accent2); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(1.06); } }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card);
border: 1px solid var(--line); font-weight: 600; font-size: 14px; color: var(--accent); white-space: nowrap; flex: none; }
.back { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); font-size: 20px; color: var(--muted); cursor: pointer; flex: none; }
/* Hub layout */
.hub { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; flex: 1; }
.resume { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.3); cursor: pointer; }
.resume img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.resume div { flex: 1; min-width: 0; }
.resume b { display: block; font-size: 14px; }
.resume small { color: var(--muted); font-size: 12px; }
.resume span { color: var(--accent); font-weight: 700; font-size: 14px; }
.card.bots {
position: relative; overflow: hidden; padding: 18px; border-radius: 22px;
background: radial-gradient(90% 90% at 85% 40%, rgba(74, 42, 138, 0.7) 0%, rgba(26, 31, 82, 0.8) 55%, var(--card) 100%);
border: 1px solid var(--line); cursor: pointer; min-height: 160px;
}
.card.bots .label, .card small.k { font: 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent2); }
.card.bots .title { max-width: 55%; }
.card.bots .title, .card b.t { display: block; font: 24px var(--font-display); text-transform: var(--title-case); line-height: 1.1; margin-top: 6px; }
.card.bots .stack { display: flex; flex-wrap: wrap; row-gap: 6px; margin-top: 14px; max-width: 52%; }
.card.bots .stack img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid var(--card); margin-right: -9px; }
.card.bots .stack span { flex-basis: 100%; align-self: center; color: var(--muted); font-size: 12px; font-weight: 600; margin-top: 4px; }
.card.bots .face { position: absolute; right: -34px; bottom: -14px; width: 172px; height: 172px; border-radius: 50%; object-fit: cover;
box-shadow: 0 0 0 4px var(--card), 0 0 0 6px var(--accent2), 0 0 40px rgba(244, 114, 182, 0.4); }
.card.bots .play-btn, .card .cta {
position: absolute; left: 18px; bottom: 18px; padding: 10px 22px; border-radius: 14px; background: var(--accent); color: var(--accent-text);
font: 16px var(--font-display); text-transform: var(--title-case); letter-spacing: .05em; border: 0; cursor: pointer; box-shadow: 0 6px 20px rgba(34, 211, 238, 0.35);
}
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.card.online { position: relative; overflow: hidden; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(15, 74, 94, 0.6), var(--card) 75%); border: 1px solid var(--line); cursor: pointer; }
.card.online .live-dot, .card.online .live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--win); margin-right: 6px; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); animation: ping 1.6s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.card.online .label { gap: 4px; font: 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--win); display: flex; align-items: center; }
.card.online h2 { font-size: 20px; margin: 6px 0 4px; }
.card.online p { font-size: 13px; color: var(--muted); margin: 0; }
.card.online .bg-text, .card.online .vs { position: absolute; right: 10px; bottom: 6px; font: 32px var(--font-display); color: rgba(34, 211, 238, 0.15); pointer-events: none; }
.card.puz { position: relative; overflow: hidden; padding: 16px; border-radius: 20px; background: linear-gradient(160deg, rgba(74, 31, 110, 0.6), var(--card) 75%); border: 1px solid var(--line); cursor: pointer; }
.card.puz .label.gold { font: 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.card.puz h2 { font-size: 20px; margin: 6px 0 4px; }
.card.puz p { font-size: 13px; color: var(--muted); margin: 0; max-width: 75%; }
.card.puz .mini-board, .card.puz .mini { position: absolute; right: -12px; bottom: -12px; width: 68px; height: 68px; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr); transform: rotate(-10deg); opacity: .55; pointer-events: none; }
.mini-board i, .mini i { background: var(--sq-light); display: grid; place-items: center; font-style: normal; font-size: 14px; }
.mini-board i.d, .mini i.d { background: var(--sq-dark); }
/* Hero bot card */
.hero {
margin-top: 14px; border-radius: 24px; position: relative; overflow: hidden; display: flex; flex-direction: column;
align-items: center; justify-content: center; text-align: center; padding: 22px 20px 18px;
background: radial-gradient(80% 55% at 50% 30%, rgba(59, 42, 122, 0.7) 0%, rgba(22, 29, 69, 0.8) 60%, var(--card) 100%);
border: 1px solid var(--line);
}
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background:
repeating-linear-gradient(90deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 44px),
repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 44px); }
.hero > * { position: relative; }
.hero .type-badge, .hero .type {
font: 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent2);
background: rgba(244, 114, 182, 0.12); border: 1px solid rgba(244, 114, 182, 0.35); padding: 4px 12px; border-radius: 999px;
}
.hero .portrait-wrap { margin: 16px 0 12px; position: relative; }
.hero .portrait {
width: 168px; height: 168px; border-radius: 50%; object-fit: cover; display: block;
box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--accent), 0 0 35px rgba(34, 211, 238, 0.4), 0 0 70px rgba(244, 114, 182, 0.2);
}
.hero h2, .hero .name { font: 24px var(--font-display); text-transform: var(--title-case); letter-spacing: .02em; margin: 0; }
.hero .elo { color: var(--gold); font-weight: 700; font-size: 15px; margin-top: 4px; }
.hero .beaten { color: var(--win); font-weight: 700; font-size: 13px; margin-top: 4px; }
.hero .quote { color: var(--muted); font-style: italic; font-size: 13px; margin-top: 10px; max-width: 280px; }
.hero .dots { display: flex; gap: 6px; margin-top: 14px; }
.hero .dots .dot, .hero .dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); transition: all .2s; }
.hero .dots .dot.active, .hero .dots i.on { width: 18px; background: var(--accent); }
.hero .arrow {
position: absolute; top: 46%; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
background: rgba(11, 16, 32, 0.7); border: 1px solid var(--line); color: var(--muted); font-size: 18px; cursor: pointer; padding: 0;
}
.hero .arrow.left, .hero .arrow.l { left: 10px; }
.hero .arrow.right, .hero .arrow.r { right: 10px; }
.hero .link, .hero .change { margin-top: 12px; color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; }
/* All opponents bottom sheet */
.sheet-screen { position: fixed; inset: 0; z-index: 200; display: none; }
.sheet-screen.active { display: block; }
.sheet-screen .overlay, .sheet-screen .dim { position: absolute; inset: 0; background: rgba(2, 4, 10, 0.75); }
.sheet-screen .sheet {
position: absolute; left: 0; right: 0; bottom: 0; height: 78%; max-width: 520px; margin: 0 auto;
background: var(--bg2); border-radius: 26px 26px 0 0; border-top: 1px solid var(--line);
padding: 10px 18px 20px; display: flex; flex-direction: column; overflow: hidden;
}
.sheet-screen .handle, .sheet-screen .grab { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.2); margin: 0 auto 12px; flex: none; }
.sheet-screen .title, .sheet-screen h3 { font: 17px var(--font-display); text-transform: var(--title-case); text-align: center; margin: 0 0 12px; flex: none; }
.sheet-screen .pills { display: flex; gap: 6px; margin-bottom: 12px; flex: none; }
.sheet-screen .pills button, .sheet-screen .pills span {
flex: 1; text-align: center; padding: 9px 0; border-radius: 10px; background: var(--card); color: var(--muted); font-weight: 600; font-size: 13px; border: 0; cursor: pointer;
}
.sheet-screen .pills button.on, .sheet-screen .pills span.on { background: var(--accent); color: var(--accent-text); }
.sheet-screen .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; overflow-y: auto; flex: 1; padding-bottom: 20px; }
.sheet-screen .pick {
background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px 10px 12px;
text-align: center; position: relative; cursor: pointer; display: flex; flex-direction: column; align-items: center;
}
.sheet-screen .pick.on { border-color: var(--accent); background: rgba(34, 211, 238, 0.08); box-shadow: 0 0 16px rgba(34, 211, 238, 0.25); }
.sheet-screen .pick img { width: 78px; height: 78px; border-radius: 50%; object-fit: cover; }
.sheet-screen .pick b { display: block; margin-top: 8px; font: 14px var(--font-display); text-transform: var(--title-case); }
.sheet-screen .pick small { color: var(--gold); font-weight: 700; margin-top: 2px; }
.sheet-screen .pick .beat { position: absolute; top: 10px; right: 10px; font-size: 11px; color: var(--win); font-weight: 700; }
/* Puzzles screen */
.daily {
margin-top: 14px; border-radius: 22px; padding: 18px; position: relative; overflow: hidden;
background: linear-gradient(135deg, rgba(59, 29, 110, 0.8), rgba(18, 40, 94, 0.8) 70%); border: 1px solid var(--line);
}
.daily .label, .daily small { color: var(--accent2); font: 11px var(--font-display); letter-spacing: .14em; text-transform: uppercase; }
.daily h2, .daily b { display: block; font: 22px var(--font-display); text-transform: var(--title-case); margin: 6px 0 4px; }
.daily p { color: var(--muted); font-size: 13px; margin: 0; }
.daily .go {
display: inline-block; margin-top: 14px; padding: 10px 18px; border-radius: 12px; background: var(--accent);
color: var(--accent-text); font-weight: 700; border: 0; cursor: pointer; font-size: 14px;
}
.daily .mini-board, .daily .mini {
position: absolute; right: 14px; top: 14px; width: 92px; height: 92px; border-radius: 10px; overflow: hidden;
display: grid; grid-template-columns: repeat(4, 1fr); box-shadow: 0 6px 20px rgba(0,0,0,0.4); transform: rotate(6deg); pointer-events: none;
}
.modes.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.modes.grid button {
background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px;
display: flex; gap: 12px; align-items: center; text-align: left; cursor: pointer;
}
.modes.grid button .icon {
font-style: normal; font-size: 24px; width: 42px; height: 42px; display: grid; place-items: center;
border-radius: 12px; background: var(--bg2); flex: none;
}
.modes.grid button .text b { display: block; font-size: 14px; }
.modes.grid button .text span { color: var(--muted); font-size: 12px; }
/* Online screen */
.hdr-row, .head-row { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 10px; }
.hdr-row h2, .head-row h2 { margin: 0; }
.lobby.list { display: flex; flex-direction: column; gap: 8px; padding: 0; list-style: none; margin-top: 10px; }
.lobby.list li {
display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--card);
border: 1px solid var(--line); border-radius: 14px;
}
.lobby.list li .initial {
width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700;
background: var(--bg2); color: var(--text); position: relative; flex: none;
}
.lobby.list li .initial::after {
content: ""; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%;
background: var(--win); border: 2px solid var(--card);
}
.lobby.list li .who { flex: 1; min-width: 0; }
.lobby.list li .who b { display: block; font-size: 14px; }
.lobby.list li .who .elo { color: var(--muted); font-size: 12px; }
.lobby.list li button {
padding: 8px 14px; border-radius: 10px; background: rgba(34, 211, 238, 0.12); color: var(--accent);
font-weight: 700; font-size: 13px; border: 1px solid rgba(34, 211, 238, 0.35); cursor: pointer; flex: none;
}
.lobby.list li button.mini { background: transparent; color: var(--muted); border-color: var(--line); }
/* Profile screen */
.banner { height: 140px; position: relative; overflow: hidden; background: linear-gradient(120deg, rgba(11, 26, 58, 0.9), rgba(26, 11, 58, 0.9)); border-radius: var(--radius); }
.prof { padding: 0 10px; margin-top: -44px; position: relative; flex: 1; }
.bigava-wrap { display: flex; justify-content: flex-start; }
.bigava {
width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; font: 36px var(--font-display); color: #fff;
background: linear-gradient(135deg, #7c3aed, var(--accent)); border: 4px solid var(--bg); position: relative;
}
.prof .name { font: 24px var(--font-display); text-transform: var(--title-case); margin: 8px 0 2px; }
.badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.badges .badge, .badges span { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.stats.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 4px; text-align: center; }
.stat-card b { display: block; font: 18px var(--font-display); }
.stat-card .muted { color: var(--muted); font-size: 11px; }
.beaten-grid { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.beaten-portrait { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 2px solid var(--win); }
.beaten-portrait.no { filter: grayscale(1) brightness(.45); border-color: var(--line); opacity: .4; }
/* Menu item lists (Archive and Settings) */
.menu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.menu-list .item {
display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px;
background: var(--card); border: 1px solid var(--line); text-align: left; cursor: pointer; width: 100%; color: var(--text);
}
.menu-list .item .icon {
font-style: normal; font-size: 20px; width: 38px; height: 38px; display: grid; place-items: center;
border-radius: 10px; background: var(--bg2); flex: none;
}
.menu-list .item .text { flex: 1; min-width: 0; }
.menu-list .item .text b { display: block; font-size: 14px; }
.menu-list .item .text span { color: var(--muted); font-size: 12px; }
.menu-list .item .chev { color: var(--muted); font-size: 16px; font-weight: 700; flex: none; }
.row-setting { display: flex; justify-content: space-between; align-items: center; }
.row-setting select, .lang-select { background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 14px; }
/* Toggles */
.toggle, .tog { width: 44px; height: 26px; border-radius: 13px; background: #2a3366; position: relative; flex: none; cursor: pointer; padding: 0; border: 0; }
.toggle::after, .tog::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #8b93c7; transition: all .2s; }
.toggle.on, .tog.on { background: var(--accent); }
.toggle.on::after, .tog.on::after { left: 21px; background: var(--accent-text); }
/* Bottom tab bar */
.tabs-bottom, #tab-bar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
display: flex; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 12px));
background: var(--bg); border-top: 1px solid var(--line); max-width: 520px; margin: 0 auto;
}
.tabs-bottom button, #tab-bar button {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
font-size: 11px; color: var(--muted); font-weight: 600; background: transparent; border: 0; padding: 0; cursor: pointer;
}
.tabs-bottom button .icon, #tab-bar button .icon { font-style: normal; font-size: 20px; filter: grayscale(1) opacity(.6); }
.tabs-bottom button.on, #tab-bar button.on { color: var(--accent); }
.tabs-bottom button.on .icon, #tab-bar button.on .icon { filter: none; }
/* Screen padding for tab bar */
#screen-home.active, #screen-archive.active, #screen-profile.active, #screen-settings.active, #screen-puzzles.active, #screen-online.active {
padding-bottom: 84px;
}
/* Play vs bots fits one phone screen: the hero card gives way so Play is never
below the fold or under the tab bar. */
#screen-play.active { display: flex; flex-direction: column; height: calc(100dvh - 24px); padding-bottom: 76px; box-sizing: border-box; }
#screen-play .dock, #screen-universe .dock, #screen-group .dock { position: static; flex: none; margin: 12px 0 0; padding: 0; background: none; box-shadow: none; border: 0; }
.card.bots .stack { margin-bottom: 62px; }
#screen-play .play-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#screen-play .hero { flex: 1; min-height: 0; }
#screen-play .hero .portrait { width: min(168px, 21dvh); height: min(168px, 21dvh); }
/* The banner element is redrawn by cosmetics.js, so the Edit button sits over it, not inside it. */
.prof-banner-wrap { position: relative; }
.prof-banner-wrap .prof-top { position: absolute; top: 14px; left: 16px; right: 16px; display: flex; justify-content: space-between; z-index: 2; }
.prof-banner-wrap #prof-edit { background: color-mix(in srgb, var(--bg) 70%, transparent); }
/* Edit profile sheet: each section is one horizontal row that scrolls. */
#screen-edit-profile .sheet { overflow-y: auto; }
#screen-edit-profile h3 { font: 13px var(--font-display); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 8px; }
#edit-frames, #edit-banners, #edit-effects { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px 6px; flex: none; }
#edit-frames .cos-btn, #edit-banners .cos-btn { flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px;
background: var(--card); border: 2px solid transparent; border-radius: 14px; font-size: 12px; color: var(--text); }
#edit-frames .cos-btn { width: 76px; }
#edit-banners .cos-btn { width: 132px; }
#edit-banners .cos-btn > div:first-child { width: 116px; height: 52px; border-radius: 10px; overflow: hidden; position: relative; }
#edit-frames .cos-btn.on, #edit-banners .cos-btn.on { border-color: var(--accent); }
#edit-effects .chip { flex: none; }
#edit-effects .chip.on { background: var(--accent); color: var(--accent-text); }
#prof-banner, #opp-prof-banner { display: block; height: 150px; position: relative; overflow: hidden; }
.marker-premove { fill: var(--accent); opacity: 0.35; }
/* Friends tile on Home (design screen 0). */
#go-friends { display: grid; margin-top: 12px; cursor: pointer; }
#go-friends .small.wide { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
#go-friends .icon { font-size: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--bg2); flex: none; }
#go-friends .text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#go-friends .text b { font-family: var(--font-display); text-transform: var(--title-case); font-size: 14px; }
#go-friends .text .muted { font-size: 12px; }
#go-friends .chev { color: var(--muted); font-size: 18px; }
/* Lab Match Screen Overrides */
[data-theme="lab"] .player-row {
background: var(--card);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 10px 14px;
}
[data-theme="lab"] .player-row .name {
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
font-size: 18px;
}
[data-theme="lab"] .clock {
font-family: 'VT323', monospace;
font-size: 28px;
background: transparent;
color: var(--text);
border: 1px solid var(--line);
border-radius: 4px;
padding: 4px 10px;
}
[data-theme="lab"] .clock.running {
background: rgba(151, 206, 76, 0.15); /* light green tint */
border-color: var(--accent);
color: var(--accent);
text-shadow: 0 0 10px rgba(151, 206, 76, 0.5);
}
[data-theme="lab"] .clock.low {
background: rgba(255, 59, 48, 0.15);
border-color: var(--danger);
color: var(--danger);
text-shadow: 0 0 10px rgba(255, 59, 48, 0.5);
}
[data-theme="lab"] .game-top {
/* Match the header */
font-family: var(--font-display);
font-weight: 700;
text-transform: uppercase;
color: var(--text);
}
/* Board colours and accent for the Basic themes that had none (2026-10-08):
their preview swatch is [page, accent, light square, dark square], as for
cozy above. Before this, 16 of the 20 Basic themes looked like Classic. */
[data-theme="frost"] { --sq-light: #e0f2fe; --sq-dark: #7dd3fc; --coord: #45748b; --accent: #0284c7; --accent-text: #111111; }
[data-theme="newsprint"] { --sq-light: #e8e3d5; --sq-dark: #b5ad98; --coord: #645f54; }
[data-theme="sakura"] { --sq-light: #fce7f3; --sq-dark: #f472b6; --coord: #863f64; --accent: #e11d48; --accent-text: #ffffff; }
[data-theme="candy"] { --sq-light: #dcfce7; --sq-dark: #fef08a; --coord: #8c844c; --accent: #ec4899; --accent-text: #111111; }
[data-theme="midnight"] { --sq-light: #1e293b; --sq-dark: #64748b; --coord: #aab3bf; --accent: #38bdf8; --accent-text: #111111; }
[data-theme="lava"] { --sq-light: #5b2e1c; --sq-dark: #c89b7b; --coord: #6e5544; --accent: #ff6a2b; --accent-text: #111111; }
[data-theme="royal"] { --sq-light: #5b3e86; --sq-dark: #d9c9f0; --coord: #776f84; --accent: #e9c46a; --accent-text: #111111; }
[data-theme="terminal"] { --sq-light: #0f2311; --sq-dark: #2e5d33; --coord: #8ca68f; --accent: #39ff7a; --accent-text: #111111; }
[data-theme="mono"] { --sq-light: #525252; --sq-dark: #d4d4d4; --coord: #757575; --accent: #ffffff; --accent-text: #111111; }
[data-theme="cyberpunk"] { --sq-light: #00f0ff; --sq-dark: #260c54; --coord: #8879a1; --accent: #00f0ff; --accent-text: #111111; }
[data-theme="emerald"] { --sq-light: #064e3b; --sq-dark: #34d399; --coord: #1d7454; --accent: #10b981; --accent-text: #111111; }
[data-theme="sunset"] { --sq-light: #831843; --sq-dark: #fb923c; --coord: #8a5021; --accent: #f97316; --accent-text: #111111; }
[data-theme="wood"] { --sq-light: #5b3a24; --sq-dark: #8c5b36; --coord: #c0a590; --accent: #c89b7b; --accent-text: #111111; }
[data-theme="marble"] { --sq-light: #333333; --sq-dark: #cccccc; --coord: #707070; --accent: #e5e5e5; --accent-text: #111111; }
[data-theme="leather"] { --sq-light: #4a2c16; --sq-dark: #784b28; --coord: #b59c89; --accent: #a06a3b; --accent-text: #ffffff; }
[data-theme="parchment"] { --sq-light: #dfd3b6; --sq-dark: #8c734b; --coord: #4d3f29; }