/* ======================================================================
   More looks, loaded after styles.css: Blush, Lilac, Neon Night, Rink, Forest, Gold Rush.
   Blush and Rink are light; the rest are dark. Same variables as the themes in styles.css.
   ====================================================================== */
@font-face { font-family: 'Fraunces'; src: url(/fonts/fraunces-latin-600-normal.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Quicksand'; src: url(/fonts/quicksand-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(/fonts/unbounded-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Anton'; src: url(/fonts/anton-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }

/* Blush (light): rose and peach on warm cream, soft serif, the crew's words handwritten */
[data-theme="blush"] {
  --bg: #fdf2f0; --surface: #ffffff; --surface2: #f9e4e2; --line: #efd2ce;
  --text: #3a1c26; --muted: #7c5361; --accent: #c13d68; --accent2: #b94a35; --on-accent: #ffffff;
  --hot: #a3305a; --hot-bg: rgba(193, 61, 104, .1); --sel: rgba(193, 61, 104, .22);
  --c1: #c13d68; --c2: #b8573d; --c3: #8456b3; --c4: #2f7f78;
  --font-display: 'Fraunces', Georgia, serif; --display-weight: 600; --display-case: none; --display-track: -0.015em;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-hand: 'Kalam', 'Segoe Print', cursive; --hand-size: 1.12em;
  --radius: 22px; --radius-sm: 14px; --btn-radius: 999px;
  --page-title: 36px; --sec-size: 21px;
  --btn-bg: linear-gradient(135deg, #c4406b, #ad315a); --btn-shadow: 0 6px 14px -8px rgba(160, 40, 80, .55);
  --nav-bg: rgba(253, 242, 240, .95); --top-bg: rgba(253, 242, 240, .9);
  color-scheme: light;
}
/* Lilac (dark): twilight violet, lavender and pink, rounded letters, a soft aurora */
[data-theme="lilac"] {
  --bg: #1a1430; --surface: #231c3d; --surface2: #2e264f; --line: #43386c;
  --text: #f4effe; --muted: #bcb0dd; --accent: #c6a8ff; --accent2: #ff9fcf; --on-accent: #1d0f3d;
  --hot: #e2d2ff; --hot-bg: rgba(198, 168, 255, .15); --sel: rgba(198, 168, 255, .35);
  --c1: #c6a8ff; --c2: #ff9fcf; --c3: #9fd9ff; --c4: #ffd6a0;
  --font-display: 'Quicksand', 'Nunito', system-ui, sans-serif; --display-weight: 700; --display-case: none; --display-track: -0.01em;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-hand: var(--font-body); --hand-size: 1em;
  --radius: 26px; --radius-sm: 16px; --btn-radius: 999px;
  --page-title: 38px; --sec-size: 21px;
  --btn-bg: linear-gradient(135deg, #d4bbff, #f3a9d6); --btn-shadow: 0 8px 18px -10px rgba(198, 168, 255, .7);
  --nav-bg: rgba(26, 20, 48, .95); --top-bg: rgba(26, 20, 48, .9);
  color-scheme: dark;
}
/* Neon Night (dark): black with electric magenta and cyan, wide heavy letters that glow */
[data-theme="neon"] {
  --bg: #07060c; --surface: #110f1b; --surface2: #1a1729; --line: #2d2945;
  --text: #f6f4ff; --muted: #aca6cc; --accent: #ff3fd5; --accent2: #22e3ff; --on-accent: #1a0016;
  --hot: #5cf0ff; --hot-bg: rgba(34, 227, 255, .12); --sel: rgba(255, 63, 213, .4);
  --c1: #ff3fd5; --c2: #22e3ff; --c3: #c6ff3d; --c4: #ffb02e;
  --font-display: 'Unbounded', system-ui, sans-serif; --display-weight: 800; --display-case: none; --display-track: -0.02em;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-hand: var(--font-body); --hand-size: 1em;
  --radius: 14px; --radius-sm: 10px; --btn-radius: 12px;
  --page-title: 31px; --sec-size: 18px;
  --btn-bg: var(--accent); --btn-shadow: 0 0 18px -4px rgba(255, 63, 213, .7);
  --nav-bg: rgba(7, 6, 12, .95); --top-bg: rgba(7, 6, 12, .9);
  color-scheme: dark;
}
/* Rink (light): fresh ice and white boards, home-jersey blue and goal-light red, tall jersey letters */
[data-theme="rink"] {
  --bg: #edf3f9; --surface: #ffffff; --surface2: #e1eaf4; --line: #c7d5e5;
  --text: #0c1d33; --muted: #4a5f7b; --accent: #0a58bd; --accent2: #c8102e; --on-accent: #ffffff;
  --hot: #0a4aa0; --hot-bg: rgba(10, 88, 189, .1); --sel: rgba(10, 88, 189, .2);
  --c1: #0a58bd; --c2: #c8102e; --c3: #2f6a96; --c4: #b0122b;
  --font-display: 'Big Shoulders Display', 'Arial Narrow', sans-serif; --display-weight: 900; --display-case: uppercase; --display-track: 0.015em;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-hand: var(--font-body); --hand-size: 1em;
  --radius: 12px; --radius-sm: 8px; --btn-radius: 8px;
  --page-title: 48px; --sec-size: 25px;
  --btn-bg: var(--accent); --btn-shadow: 0 4px 10px -6px rgba(10, 40, 90, .55);
  --nav-bg: rgba(237, 243, 249, .96); --top-bg: rgba(237, 243, 249, .9);
  color-scheme: light;
}
/* Forest (dark): deep pine, moss and campfire amber, a sturdy serif, faint map contours */
[data-theme="forest"] {
  --bg: #0e1913; --surface: #15241b; --surface2: #1d3125; --line: #2b4636;
  --text: #edf3e6; --muted: #a9bfa7; --accent: #a3d67f; --accent2: #eaa64c; --on-accent: #0f2108;
  --hot: #c6e9a4; --hot-bg: rgba(163, 214, 127, .14); --sel: rgba(163, 214, 127, .3);
  --c1: #a3d67f; --c2: #eaa64c; --c3: #8fcac2; --c4: #e08f6c;
  --font-display: 'Young Serif', Georgia, serif; --display-weight: 400; --display-case: none; --display-track: -0.01em;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-hand: var(--font-body); --hand-size: 1em;
  --radius: 16px; --radius-sm: 11px; --btn-radius: 12px;
  --page-title: 34px; --sec-size: 20px;
  --btn-bg: var(--accent); --btn-shadow: 0 4px 12px -6px rgba(0, 0, 0, .6);
  --nav-bg: rgba(14, 25, 19, .96); --top-bg: rgba(14, 25, 19, .9);
  color-scheme: dark;
}
/* Gold Rush (dark): sports-bar black, scoreboard gold and red, heavy poster letters */
[data-theme="goldrush"] {
  --bg: #0b0b0a; --surface: #161512; --surface2: #211f1a; --line: #36322a;
  --text: #f7f2e6; --muted: #b5ad9a; --accent: #ffc21a; --accent2: #ff5240; --on-accent: #1a1200;
  --hot: #ffd65c; --hot-bg: rgba(255, 194, 26, .14); --sel: rgba(255, 194, 26, .35);
  --c1: #ffc21a; --c2: #ff5240; --c3: #3fd17f; --c4: #5fb4ff;
  --font-display: 'Anton', Impact, 'Arial Narrow', sans-serif; --display-weight: 400; --display-case: uppercase; --display-track: 0.02em;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-hand: var(--font-body); --hand-size: 1em;
  --radius: 8px; --radius-sm: 6px; --btn-radius: 6px;
  --page-title: 44px; --sec-size: 23px;
  --btn-bg: var(--accent); --btn-shadow: 0 3px 0 #8a6500, 0 6px 14px -6px rgba(0, 0, 0, .8);
  --nav-bg: rgba(11, 11, 10, .96); --top-bg: rgba(11, 11, 10, .92);
  color-scheme: dark;
}

/* ---------- living backgrounds ---------- */
[data-theme="blush"] body::before {
  background: radial-gradient(55% 34% at 8% 0%, rgba(232, 120, 150, .16), transparent 70%), radial-gradient(45% 30% at 96% 4%, rgba(240, 160, 120, .14), transparent 70%), radial-gradient(60% 30% at 50% 100%, rgba(200, 160, 230, .1), transparent 70%);
}
[data-theme="lilac"] body::before {
  background: radial-gradient(60% 36% at 10% 0%, rgba(198, 168, 255, .2), transparent 70%), radial-gradient(50% 32% at 95% 10%, rgba(255, 159, 207, .14), transparent 70%), radial-gradient(70% 30% at 50% 100%, rgba(159, 217, 255, .08), transparent 70%);
  background-size: 140% 140%; animation: aurora 18s ease-in-out infinite alternate;
}
@keyframes aurora { from { background-position: 0 0; } to { background-position: 100% 30%; } }
[data-theme="neon"] body::before {
  background:
    radial-gradient(50% 30% at 0% 0%, rgba(255, 63, 213, .16), transparent 70%), radial-gradient(45% 28% at 100% 8%, rgba(34, 227, 255, .13), transparent 70%),
    linear-gradient(rgba(34, 227, 255, .05) 1px, transparent 1px) 0 0 / 100% 28px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 65%); mask-image: linear-gradient(to bottom, #000, transparent 65%);
}
/* Rink: skate marks on fresh ice */
[data-theme="rink"] body::before {
  background:
    repeating-linear-gradient(-16deg, transparent 0 150px, rgba(110, 150, 195, .14) 150px 151px),
    repeating-linear-gradient(11deg, transparent 0 210px, rgba(110, 150, 195, .1) 210px 211px),
    radial-gradient(80% 40% at 50% -5%, rgba(150, 195, 240, .35), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 75%); mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
/* Forest: topographic contours */
[data-theme="forest"] body::before {
  background:
    repeating-radial-gradient(ellipse at 85% -10%, transparent 0 26px, rgba(163, 214, 127, .07) 26px 27.5px),
    repeating-radial-gradient(ellipse at -10% 40%, transparent 0 34px, rgba(143, 202, 194, .05) 34px 35.5px),
    radial-gradient(60% 35% at 20% 0%, rgba(234, 166, 76, .08), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%); mask-image: linear-gradient(to bottom, #000, transparent 70%);
}
/* Gold Rush: scoreboard bulbs and a sweep of stadium light */
[data-theme="goldrush"] body::before {
  background: radial-gradient(rgba(255, 194, 26, .08) 1.2px, transparent 1.6px) 0 0 / 9px 9px, radial-gradient(70% 40% at 50% -8%, rgba(255, 194, 26, .14), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 55%); mask-image: linear-gradient(to bottom, #000, transparent 55%);
}

/* ---------- signatures ---------- */
/* Blush: soft pill under the active tab, floating cards, handwritten quotes */
[data-theme="blush"] .tab-ind::before { width: 52px; height: 32px; margin-left: -26px; bottom: auto; top: 8px; border-radius: 999px; background: var(--hot-bg); }
[data-theme="blush"] .card { border-color: transparent; box-shadow: 0 1px 2px rgba(120, 40, 60, .06), 0 10px 24px -18px rgba(150, 50, 80, .35); }
[data-theme="blush"] .quote p { font-family: var(--font-hand); font-size: 19px; text-transform: none; }
[data-theme="blush"] .brand-name { color: var(--accent); }
[data-theme="blush"] .hero-text h2 { color: var(--accent); }
[data-theme="blush"] .msg.mine .bubble { background: linear-gradient(135deg, #c4406b, #ad315a); color: #fff; }
[data-theme="blush"] .msg.theirs .bubble { background: #ffffff; color: var(--text); box-shadow: 0 0 0 1px var(--line); }

/* Lilac: glowing pill under the active tab, airy cards, pastel gradient titles */
[data-theme="lilac"] .tab-ind::before { width: 50px; height: 32px; margin-left: -25px; bottom: auto; top: 8px; border-radius: 999px; background: linear-gradient(135deg, rgba(198, 168, 255, .28), rgba(255, 159, 207, .22)); box-shadow: 0 0 18px -4px rgba(198, 168, 255, .6); }
[data-theme="lilac"] .card { border-color: rgba(198, 168, 255, .14); background: linear-gradient(180deg, rgba(198, 168, 255, .05), transparent 60%), var(--surface); }
[data-theme="lilac"] .page-title, [data-theme="lilac"] .hero-text h2 { color: #e9ddff; text-shadow: 0 0 24px rgba(198, 168, 255, .45); }
[data-theme="lilac"] .brand-name { color: var(--accent); }
[data-theme="lilac"] .msg.mine .bubble { background: linear-gradient(135deg, #7d5fd0, #b0508f); color: #fff; }

/* Neon Night: glowing headings, a lit underline on the tab, lit edges */
[data-theme="neon"] .page-title, [data-theme="neon"] .hero-text h2, [data-theme="neon"] .brand-name { color: #fff; text-shadow: 0 0 6px rgba(255, 63, 213, .9), 0 0 22px rgba(255, 63, 213, .55); }
[data-theme="neon"] .card > h3 .i { filter: drop-shadow(0 0 4px currentColor); }
[data-theme="neon"] .tab-ind::before { width: 30px; height: 3px; margin-left: -15px; bottom: auto; top: 0; border-radius: 0 0 3px 3px; background: var(--accent2); box-shadow: 0 0 10px 1px var(--accent2); }
[data-theme="neon"] .tabs button.active .i { color: var(--accent2); filter: drop-shadow(0 0 5px rgba(34, 227, 255, .8)); }
[data-theme="neon"] .card { box-shadow: inset 0 1px 0 rgba(34, 227, 255, .1); }
[data-theme="neon"] .msg.mine .bubble { background: linear-gradient(135deg, #c21fa0, #7a2ad0); color: #fff; }
[data-theme="neon"] .msg.theirs .bubble { box-shadow: inset 0 0 0 1px rgba(34, 227, 255, .25); }

/* Rink: boards with a blue kick plate, red goal-line under the active tab */
[data-theme="rink"] .card { border-bottom: 3px solid color-mix(in srgb, var(--accent) 70%, #fff); box-shadow: 0 6px 14px -12px rgba(10, 40, 90, .4); }
[data-theme="rink"] .tab-ind::before { width: 36px; height: 4px; margin-left: -18px; bottom: auto; top: 0; border-radius: 0 0 3px 3px; background: var(--accent2); }
[data-theme="rink"] .brand-name { color: var(--accent); }
[data-theme="rink"] .hero-text h2 { color: var(--accent); text-shadow: 2px 2px 0 rgba(200, 16, 46, .25); }
[data-theme="rink"] .msg.mine .bubble { background: var(--accent); color: #fff; }
[data-theme="rink"] .msg.theirs .bubble { background: #ffffff; color: var(--text); box-shadow: 0 0 0 1px var(--line); }

/* Forest: campfire glow under the active tab */
[data-theme="forest"] .tab-ind::before { width: 26px; height: 3px; margin-left: -13px; bottom: 6px; border-radius: 3px; background: var(--accent2); box-shadow: 0 0 10px rgba(234, 166, 76, .6); }
[data-theme="forest"] .brand-name { color: var(--accent); }
[data-theme="forest"] .card > h3 .i { color: var(--c2); }
[data-theme="forest"] .msg.mine .bubble { background: #2f5a35; color: #f1f7ea; }

/* Gold Rush: scoreboard gold headings with a hard shadow, a gold bar on every card */
[data-theme="goldrush"] .page-title, [data-theme="goldrush"] .hero-text h2, [data-theme="goldrush"] .brand-name { color: var(--accent); text-shadow: 0 3px 0 rgba(0, 0, 0, .7); }
[data-theme="goldrush"] .card { border-color: transparent; border-top: 3px solid var(--accent); }
[data-theme="goldrush"] .tab-ind::before { width: 40px; height: 4px; margin-left: -20px; bottom: auto; top: 0; border-radius: 0; background: var(--accent); }
[data-theme="goldrush"] .btn:not(.ghost) { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 400; font-size: 17px; }
[data-theme="goldrush"] .msg.mine .bubble { background: var(--accent); color: #1a1200; }

/* ---------- light looks: fix the spots that assume a dark page ---------- */
[data-theme="blush"] .seg, [data-theme="rink"] .seg { background: var(--surface2); border-color: transparent; }
[data-theme="blush"] .seg button.on, [data-theme="rink"] .seg button.on { background: var(--surface); box-shadow: 0 1px 3px rgba(20, 30, 60, .16); }
[data-theme="blush"] .cw-c, [data-theme="rink"] .cw-c { background: #fff; }
[data-theme="blush"] .cw-c:not(.bad), [data-theme="rink"] .cw-c:not(.bad) { color: var(--text); }
[data-theme="blush"] .cw-c.word, [data-theme="rink"] .cw-c.word { background: color-mix(in srgb, var(--c1) 18%, #fff); }
[data-theme="blush"] .cw-c.sel, [data-theme="rink"] .cw-c.sel { background: color-mix(in srgb, var(--c1) 45%, #fff); }
[data-theme="blush"] .cw-c.solved, [data-theme="rink"] .cw-c.solved { background: color-mix(in srgb, var(--c1) 12%, #fff); }
[data-theme="blush"] .cw-clock.done, [data-theme="rink"] .cw-clock.done { color: #fff; }
[data-theme="blush"] .av-i, [data-theme="rink"] .av-i { background: hsl(var(--h, 210) 55% 86%); color: hsl(var(--h, 210) 60% 24%); }

/* ---------- picker tiles and group dots ---------- */
.t-blush b { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 22px; color: #c13d68; }
.t-lilac b { font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 21px; color: #d6c0ff; }
.t-neon b { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 16px; color: #fff; text-shadow: 0 0 6px #ff3fd5, 0 0 16px rgba(255, 63, 213, .6); }
.t-rink b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; text-transform: uppercase; font-size: 25px; color: #0a58bd; }
.t-forest b { font-family: 'Young Serif', Georgia, serif; font-weight: 400; font-size: 21px; color: #a3d67f; }
.t-goldrush b { font-family: 'Anton', Impact, sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .02em; font-size: 22px; color: #ffc21a; }
.grp-dot.t-blush { background: #f9e4e2; color: #c13d68; border-color: #efd2ce; } .grp-dot.t-lilac { background: #2e264f; color: #c6a8ff; }
.grp-dot.t-neon { background: #110f1b; color: #ff3fd5; } .grp-dot.t-rink { background: #e1eaf4; color: #0a58bd; border-color: #c7d5e5; }
.grp-dot.t-forest { background: #1d3125; color: #a3d67f; } .grp-dot.t-goldrush { background: #211f1a; color: #ffc21a; }

/* Each tile is a little preview: the look's own page colour, its colours as dots, its button */
.themes .theme-tile { position: relative; align-content: space-between; min-height: 112px; border: 1px solid rgba(128, 128, 128, .25); }
.themes .theme-tile.on { border: 2px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent); }
.themes .theme-tile .tp-top { display: flex; align-items: center; gap: 5px; opacity: 1; }
.themes .theme-tile .tp-top i { display: block; width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(128, 128, 128, .25); }
.themes .theme-tile .tp-top em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 700; line-height: 1; padding: 5px 9px; opacity: 1; }
.themes .theme-tile .tp-text { display: grid; gap: 2px; opacity: 1; }
.themes .theme-tile .tp-text span { opacity: .8; }
.themes .theme-tile .tp-on { position: absolute; top: 9px; right: 9px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--on-accent); display: none; place-items: center; opacity: 1; box-shadow: 0 0 0 2px rgba(255, 255, 255, .7); }
.themes .theme-tile.on .tp-top em { visibility: hidden; }
.themes .theme-tile.on .tp-on { display: grid; }
.themes .theme-tile .tp-on .i { width: 14px; height: 14px; stroke-width: 3; }
.themes .theme-tile.follow { align-content: center; }
/* Delete buttons: dark letters on the bright red/pink of the dark looks (white would be too faint) */
[data-theme="lilac"] .btn.danger, [data-theme="neon"] .btn.danger, [data-theme="forest"] .btn.danger, [data-theme="goldrush"] .btn.danger { color: var(--on-accent); }
/* Crossword squares: cool white on the violet looks instead of the warm cream */
[data-theme="lilac"] .cw-c:not(.word):not(.sel):not(.solved), [data-theme="neon"] .cw-c:not(.word):not(.sel):not(.solved) { background: #f5f2ff; }
[data-theme="lilac"] .cw-c:not(.bad), [data-theme="neon"] .cw-c:not(.bad) { color: #140f24; }
/* Sign-in page on the light looks */
[data-theme="blush"] .gate h1 { text-shadow: 0 3px 0 rgba(150, 50, 80, .16); }
[data-theme="rink"] .gate h1 { text-shadow: 3px 3px 0 rgba(200, 16, 46, .22); }
[data-theme="blush"] .slogan { background: #fbe1e4; color: #7a2445; box-shadow: 3px 3px 0 #c13d68; }
[data-theme="rink"] .slogan { background: #0c1d33; color: #fff; box-shadow: 3px 3px 0 #c8102e; }
/* Rink: the prompt card takes the jersey blue (the red tint read as pink on ice) */
[data-theme="rink"] .prompt-card { border-color: color-mix(in srgb, var(--c1) 35%, var(--line)); background: linear-gradient(155deg, color-mix(in srgb, var(--c1) 7%, var(--surface)), var(--surface) 70%); }