/* Rae's House of Games — the eight looks.
 *
 * Every colour in the app comes from a token below. To add a ninth theme,
 * copy a block, change the values, then add it to THEMES in js/theme.js and
 * to the list in functions/_lib/config.js. Nothing else needs touching.
 */

:root,
[data-theme="purple"] {
  --bg: #100e18;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, #2a2050 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #1b2a4a 0%, transparent 55%);
  --card: #1d1a2e;
  --card-2: #252140;
  --line: #322c4d;
  --ink: #f2efff;
  --ink-dim: #a49fc4;
  --accent: #8b7bff;
  --accent-2: #ffc857;
  --green: #4cc38a;
  --amber: #d8a13a;
  --red: #ef6461;
  --slate: #3c3757;
  --slate-ink: #d7d3ea;
  --tile-ink: #0a1310;
  --tile-bg: #16142280;
  --input-bg: #14121f;
  --key-dead-bg: #241f38;
  --key-dead-ink: #6a6486;
  --btn-a: #9a8bff;
  --btn-b: #6f5be0;
  --btn-line: #7a68e8;
  --btn-ink: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --overlay: rgba(8, 7, 12, .6);
}

[data-theme="blue"] {
  --bg: #0b1220;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, #16305c 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #0d3a4f 0%, transparent 55%);
  --card: #131d31;
  --card-2: #1b2941;
  --line: #2a3a58;
  --ink: #eaf2ff;
  --ink-dim: #94a7c4;
  --accent: #4f8cff;
  --accent-2: #5ad2ff;
  --green: #35c08a;
  --amber: #e0a93b;
  --red: #ff6b6b;
  --slate: #33425f;
  --slate-ink: #dbe6f5;
  --tile-ink: #04121e;
  --tile-bg: #0f1a2c80;
  --input-bg: #0e1626;
  --key-dead-bg: #1a2438;
  --key-dead-ink: #5d6f8c;
  --btn-a: #5f9bff;
  --btn-b: #2f6bdc;
  --btn-line: #3f7ae0;
  --btn-ink: #ffffff;
  --shadow: 0 10px 30px rgba(0, 0, 0, .38);
  --overlay: rgba(5, 10, 20, .62);
}

[data-theme="green"] {
  --bg: #0a1410;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, #14402c 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #0e3330 0%, transparent 55%);
  --card: #10201a;
  --card-2: #172d24;
  --line: #244436;
  --ink: #e9fbf1;
  --ink-dim: #93b8a5;
  --accent: #35c07a;
  --accent-2: #b9f06a;
  --green: #4cc38a;
  --amber: #e0b13b;
  --red: #ef6461;
  --slate: #2c473a;
  --slate-ink: #dcefe4;
  --tile-ink: #05150d;
  --tile-bg: #0d1c1680;
  --input-bg: #0c1a14;
  --key-dead-bg: #16281f;
  --key-dead-ink: #5d7d6a;
  --btn-a: #46d08c;
  --btn-b: #1f9c5f;
  --btn-line: #2bad72;
  --btn-ink: #04150c;
  --shadow: 0 10px 30px rgba(0, 0, 0, .38);
  --overlay: rgba(4, 14, 10, .62);
}

[data-theme="pink"] {
  --bg: #170d16;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, #4a1740 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #35143a 0%, transparent 55%);
  --card: #241628;
  --card-2: #31203a;
  --line: #47294b;
  --ink: #ffeef8;
  --ink-dim: #c79ab5;
  --accent: #ff6fae;
  --accent-2: #ffd166;
  --green: #4cc38a;
  --amber: #e0a93b;
  --red: #ff5d7a;
  --slate: #4a2f4a;
  --slate-ink: #f6dced;
  --tile-ink: #1a0410;
  --tile-bg: #1d122080;
  --input-bg: #1b1020;
  --key-dead-bg: #2b1a2e;
  --key-dead-ink: #7d5c75;
  --btn-a: #ff87bd;
  --btn-b: #e04a90;
  --btn-line: #f062a4;
  --btn-ink: #2a0716;
  --shadow: 0 10px 30px rgba(0, 0, 0, .4);
  --overlay: rgba(16, 6, 14, .62);
}

[data-theme="lilac"] {
  --bg: #f5f1ff;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, #e4d9ff 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #fbe7ff 0%, transparent 55%);
  --card: #ffffff;
  --card-2: #f2ecff;
  --line: #ded3f7;
  --ink: #241d3a;
  --ink-dim: #6b6291;
  --accent: #7c5cff;
  --accent-2: #6d28d9;
  --green: #129d68;
  --amber: #c08312;
  --red: #d64550;
  --slate: #cdc4e6;
  --slate-ink: #423a63;
  --tile-ink: #ffffff;
  --tile-bg: #ffffff;
  --input-bg: #ffffff;
  --key-dead-bg: #e7e1f6;
  --key-dead-ink: #a49cc0;
  --btn-a: #8b6cff;
  --btn-b: #6b46f0;
  --btn-line: #7c5cff;
  --btn-ink: #ffffff;
  --shadow: 0 8px 24px rgba(70, 50, 130, .12);
  --overlay: rgba(40, 30, 70, .35);
}

[data-theme="grey"] {
  --bg: #121315;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, #282b31 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #1c1f24 0%, transparent 55%);
  --card: #1a1c1f;
  --card-2: #24272b;
  --line: #33373d;
  --ink: #f1f2f4;
  --ink-dim: #a2a7b0;
  --accent: #8e9bb0;
  --accent-2: #dfe4ec;
  --green: #4cc38a;
  --amber: #d8a13a;
  --red: #ef6461;
  --slate: #3a3f46;
  --slate-ink: #dfe3e8;
  --tile-ink: #0c1210;
  --tile-bg: #16181b80;
  --input-bg: #15171a;
  --key-dead-bg: #232629;
  --key-dead-ink: #6d737b;
  --btn-a: #a5b1c4;
  --btn-b: #6b7889;
  --btn-line: #7e8b9c;
  --btn-ink: #10131a;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --overlay: rgba(8, 9, 11, .65);
}

[data-theme="white"] {
  --bg: #f7f8fa;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, #ffffff 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #eaf0f8 0%, transparent 55%);
  --card: #ffffff;
  --card-2: #f2f4f8;
  --line: #dfe4ec;
  --ink: #1b1f27;
  --ink-dim: #667085;
  --accent: #3b6cf6;
  --accent-2: #b45309;
  --green: #10a37f;
  --amber: #b7791f;
  --red: #d92d20;
  --slate: #cfd5e0;
  --slate-ink: #3f4756;
  --tile-ink: #ffffff;
  --tile-bg: #ffffff;
  --input-bg: #ffffff;
  --key-dead-bg: #e8ecf3;
  --key-dead-ink: #9aa3b2;
  --btn-a: #5b86ff;
  --btn-b: #2f5fe0;
  --btn-line: #3b6cf6;
  --btn-ink: #ffffff;
  --shadow: 0 8px 24px rgba(20, 30, 60, .10);
  --overlay: rgba(20, 25, 40, .35);
}

[data-theme="black"] {
  --bg: #000000;
  --bg-grad:
    radial-gradient(1200px 600px at 20% -10%, #141414 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 0%, #0d0d0d 0%, transparent 55%);
  --card: #0b0b0c;
  --card-2: #141416;
  --line: #26262a;
  --ink: #f5f5f6;
  --ink-dim: #9a9aa2;
  --accent: #ffb020;
  --accent-2: #ffd166;
  --green: #3ec98a;
  --amber: #d8a13a;
  --red: #ff6b6b;
  --slate: #2a2a2e;
  --slate-ink: #d7d7db;
  --tile-ink: #0a0a06;
  --tile-bg: #0a0a0b;
  --input-bg: #0a0a0b;
  --key-dead-bg: #161618;
  --key-dead-ink: #6b6b73;
  --btn-a: #ffc247;
  --btn-b: #e08e0b;
  --btn-line: #f0a520;
  --btn-ink: #1a1200;
  --shadow: 0 10px 30px rgba(0, 0, 0, .7);
  --overlay: rgba(0, 0, 0, .72);
}

/* ---------------------------------------------------------- the picker
 *
 * The blocks above are attribute selectors, so any element carrying
 * data-theme="blue" gets that palette — not just <html>. The picker leans on
 * this on purpose: each swatch button carries its own data-theme, so it paints
 * itself in the colours it is offering. Don't "tidy" it into :root only.
 */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: .5rem;
}
.swatch {
  border: 1px solid var(--line);
  background: var(--card-2);   /* its own theme's card colour — see the note above */
  border-radius: 12px;
  padding: .5rem .35rem .4rem;
  cursor: pointer;
  display: grid;
  gap: .35rem;
  justify-items: center;
}
.swatch.is-active { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.swatch-chips { display: flex; }
.swatch-chip {
  width: 15px; height: 15px; border-radius: 50%;
  border: 1.5px solid var(--card-2); margin-left: -5px;
}
.swatch-chip:first-child { margin-left: 0; }
.swatch-name { font-size: .7rem; color: var(--ink-dim); text-transform: capitalize; }
.swatch.is-active .swatch-name { color: var(--ink); }