/* ==========================================================================
   MORE THEMES (2026-10-14) — ..._20261014150000_more_themes.sql prices them.

   Same contract as the themes in index.html: repaint the tokens and nothing
   else. NO theme touches --font-display (trap: one definition, on :root) or
   the score colours (--red/--yellow/--green). Since 2026-10-14 each theme
   DOES set --hue-1..7, the identity slots behind --c-*, in its own family.
   Each one also owns a ground texture on body, written with the section wash
   kept as its first layer so the page still changes temperature between tabs.

   Contrast was checked, not eyeballed: --text and --text-dim are >= 4.5:1
   against --surface-2 in every theme here. No motion anywhere in this file.
   ========================================================================== */

/* REEL TO REEL — RETIRED from sale 2026-10-14 (THEMES.reel.retired). It was
   brown-black with amber and oxide red: Soul Train with sharper corners, and
   the fourth warm-gold skin in the shop. Anybody who owns or wears it keeps
   it and sees Soul Train's tokens, which are aliased below. */

/* CHROME FROST — cold. Blue-steel ground, ice and polished chrome. */
[data-theme="frost"] {
  --bg:            #070b10;
  --surface:       #0e141c;
  --surface-2:     #151d27;
  --surface-3:     #1d2733;
  --surface-4:     #273342;
  --text:          #eef6ff;
  --text-dim:      #9fb3c8;
  --text-faint:    #5f7287;
  --border:        rgba(214,234,255,0.08);
  --border-strong: rgba(214,234,255,0.18);
  --gold:          #a9e5ff;
  --gold-glow:     rgba(169,229,255,0.26);
  --gold-dim:      rgba(169,229,255,0.12);
  --accent-2:      #c4cbe2;
  --accent-2-dim:  rgba(196,203,226,0.15);
  --radius:        12px;
  --radius-sm:     7px;
  --radius-xs:     4px;
  /* identity hues, in this skin's own family */
  --hue-1: #a9e5ff;
  --hue-2: #b9b4ff;
  --hue-3: #d6e2f0;
  --hue-4: #7fe3d0;
  --hue-5: #6aa8ff;
  --hue-6: #c4cbe2;
  --hue-7: #94c8ff;
}
html[data-theme="frost"] body {
  /* A cold sheen raked across the top, like light off a chrome rim. */
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 0%, var(--section-dim) 0%, transparent 72%),
    linear-gradient(115deg, transparent 20%, rgba(169,229,255,0.05) 38%, transparent 46%, rgba(196,203,226,0.04) 58%, transparent 66%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(169,229,255,0.05) 0%, transparent 70%);
}

/* DEEP CANOPY — forest floor. Green-black, brass light through leaves. */
[data-theme="canopy"] {
  --bg:            #07110b;
  --surface:       #0d1a12;
  --surface-2:     #132319;
  --surface-3:     #1a2e21;
  --surface-4:     #233b2b;
  --text:          #eaf4ea;
  --text-dim:      #9fbea6;
  --text-faint:    #5e7d66;
  --border:        rgba(220,245,225,0.08);
  --border-strong: rgba(220,245,225,0.17);
  --gold:          #d8b45e;
  --gold-glow:     rgba(216,180,94,0.26);
  --gold-dim:      rgba(216,180,94,0.13);
  --accent-2:      #6fcf8e;
  --accent-2-dim:  rgba(111,207,142,0.15);
  /* identity hues, in this skin's own family */
  --hue-1: #6fcf8e;
  --hue-2: #b5d66b;
  --hue-3: #d8b45e;
  --hue-4: #3fbf7f;
  --hue-5: #5fb3a1;
  --hue-6: #e0a85a;
  --hue-7: #8fd9b0;
}
html[data-theme="canopy"] body {
  /* Dappled light: a few soft pools rather than one wash. */
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 0%, var(--section-dim) 0%, transparent 72%),
    radial-gradient(circle at 18% 12%, rgba(216,180,94,0.06) 0%, transparent 28%),
    radial-gradient(circle at 82% 30%, rgba(111,207,142,0.05) 0%, transparent 30%),
    radial-gradient(circle at 40% 85%, rgba(111,207,142,0.045) 0%, transparent 32%);
}

/* SOUL TRAIN — 1970s. Chocolate, mustard, rust, everything rounded. */
[data-theme="soul"], [data-theme="reel"] {
  --bg:            #150b05;
  --surface:       #20120a;
  --surface-2:     #2b190e;
  --surface-3:     #382114;
  --surface-4:     #472b1a;
  --text:          #fff0dc;
  --text-dim:      #d4b08c;
  --text-faint:    #8f6c4f;
  --border:        rgba(255,236,210,0.08);
  --border-strong: rgba(255,236,210,0.18);
  --gold:          #f0b52f;
  --gold-glow:     rgba(240,181,47,0.28);
  --gold-dim:      rgba(240,181,47,0.14);
  --accent-2:      #d0582a;
  --accent-2-dim:  rgba(208,88,42,0.17);
  --radius:        24px;
  --radius-sm:     14px;
  --radius-xs:     9px;
  /* identity hues, in this skin's own family */
  --hue-1: #f0b52f;
  --hue-2: #e07b3f;
  --hue-3: #d0582a;
  --hue-4: #b5a642;
  --hue-5: #c98a5a;
  --hue-6: #ff9a3d;
  --hue-7: #d4a86a;
}
html[data-theme="soul"] body, html[data-theme="reel"] body {
  /* A sunburst rising from below the fold, faint enough to be felt. */
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 0%, var(--section-dim) 0%, transparent 72%),
    radial-gradient(ellipse 90% 50% at 50% 115%, rgba(240,181,47,0.09) 0%, rgba(208,88,42,0.05) 40%, transparent 70%),
    repeating-conic-gradient(from 0deg at 50% 115%, rgba(240,181,47,0.018) 0deg 6deg, transparent 6deg 12deg);
}

/* HARD BOP — jazz sleeve. Midnight navy, electric blue, off-white type. */
[data-theme="bop"] {
  --bg:            #060a16;
  --surface:       #0c1222;
  --surface-2:     #121a2e;
  --surface-3:     #19233b;
  --surface-4:     #222e4a;
  --text:          #f3f1ea;
  --text-dim:      #a6adbf;
  --text-faint:    #626b82;
  --border:        rgba(235,240,255,0.08);
  --border-strong: rgba(235,240,255,0.18);
  --gold:          #4b97ff;
  --gold-glow:     rgba(75,151,255,0.30);
  --gold-dim:      rgba(75,151,255,0.15);
  --accent-2:      #efe9d8;
  --accent-2-dim:  rgba(239,233,216,0.12);
  --radius:        4px;
  --radius-sm:     3px;
  --radius-xs:     2px;
  /* identity hues, in this skin's own family */
  --hue-1: #4b97ff;
  --hue-2: #8fb4ff;
  --hue-3: #ff6b4a;
  --hue-4: #4fd1c5;
  --hue-5: #efe9d8;
  --hue-6: #ffb04a;
  --hue-7: #6c7dff;
}
html[data-theme="bop"] body {
  /* Square corners and one hard block of colour, like a 1950s sleeve. */
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 0%, var(--section-dim) 0%, transparent 72%),
    linear-gradient(180deg, rgba(75,151,255,0.07) 0, rgba(75,151,255,0.07) 3px, transparent 3px),
    radial-gradient(ellipse 50% 40% at 0% 100%, rgba(75,151,255,0.06) 0%, transparent 70%);
}

/* MIDNIGHT VELVET — deep plum, amethyst and champagne. Soft nap. */
[data-theme="velvet"] {
  --bg:            #0d0714;
  --surface:       #170d22;
  --surface-2:     #20132e;
  --surface-3:     #2a1a3c;
  --surface-4:     #36224c;
  --text:          #f6eefb;
  --text-dim:      #bba6cf;
  --text-faint:    #7a6690;
  --border:        rgba(240,225,255,0.08);
  --border-strong: rgba(240,225,255,0.18);
  --gold:          #b98cff;
  --gold-glow:     rgba(185,140,255,0.30);
  --gold-dim:      rgba(185,140,255,0.14);
  --accent-2:      #f0d6a6;
  --accent-2-dim:  rgba(240,214,166,0.14);
  --radius:        20px;
  /* identity hues, in this skin's own family */
  --hue-1: #b98cff;
  --hue-2: #e08cff;
  --hue-3: #ff8cc6;
  --hue-4: #f0d6a6;
  --hue-5: #8ca8ff;
  --hue-6: #ffb08c;
  --hue-7: #c9a6ff;
}
html[data-theme="velvet"] body {
  /* Velvet nap: light pooling in the middle, falling off at every edge. */
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 0%, var(--section-dim) 0%, transparent 72%),
    radial-gradient(ellipse 90% 70% at 50% 40%, rgba(185,140,255,0.06) 0%, transparent 65%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 55%, rgba(0,0,0,0.35) 100%);
}

/* VAPOR SUNSET — sun yellow and hot pink over a violet grid horizon. */
[data-theme="vapor"] {
  --bg:            #120a24;
  --surface:       #1b1033;
  --surface-2:     #24163f;
  --surface-3:     #2f1d4f;
  --surface-4:     #3b2561;
  --text:          #fff0fa;
  --text-dim:      #c9a9d8;
  --text-faint:    #8a6a9e;
  --border:        rgba(255,225,245,0.09);
  --border-strong: rgba(255,225,245,0.19);
  --gold:          #ffcf6e;
  --gold-glow:     rgba(255,207,110,0.28);
  --gold-dim:      rgba(255,207,110,0.14);
  --accent-2:      #ff6ec7;
  --accent-2-dim:  rgba(255,110,199,0.17);
  /* identity hues, in this skin's own family */
  --hue-1: #6ee7ff;
  --hue-2: #b18cff;
  --hue-3: #ff6ec7;
  --hue-4: #ffcf6e;
  --hue-5: #ff9d6e;
  --hue-6: #ff8a5c;
  --hue-7: #9d8cff;
}
html[data-theme="vapor"] body {
  /* The sun on the horizon and the grid running away under it. Grid lines
     are 1px in a 40px tile, so they read as lines and not as a fill. */
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 0%, var(--section-dim) 0%, transparent 72%),
    radial-gradient(ellipse 60% 26% at 50% 100%, rgba(255,207,110,0.10) 0%, rgba(255,110,199,0.06) 45%, transparent 75%),
    linear-gradient(180deg, transparent 72%, rgba(255,110,199,0.035) 72.2%, transparent 72.6%),
    repeating-linear-gradient(90deg, rgba(255,110,199,0.03) 0 1px, transparent 1px 40px);
}

/* STROBE — club. True black, acid yellow, UV magenta, hard edges. The one
   theme where the dim text is barely dim: high contrast is the point. */
[data-theme="strobe"] {
  --bg:            #000000;
  --surface:       #0b0b0b;
  --surface-2:     #141414;
  --surface-3:     #1d1d1d;
  --surface-4:     #282828;
  --text:          #ffffff;
  --text-dim:      #c2c2c2;
  --text-faint:    #7c7c7c;
  --border:        rgba(255,255,255,0.12);
  --border-strong: rgba(255,255,255,0.26);
  --gold:          #e8ff2e;
  --gold-glow:     rgba(232,255,46,0.30);
  --gold-dim:      rgba(232,255,46,0.13);
  --accent-2:      #ff3df2;
  --accent-2-dim:  rgba(255,61,242,0.17);
  --radius:        3px;
  --radius-sm:     2px;
  --radius-xs:     1px;
  /* identity hues, in this skin's own family */
  --hue-1: #e8ff2e;
  --hue-2: #ff3df2;
  --hue-3: #ff2e7e;
  --hue-4: #b4ff2e;
  --hue-5: #2ee8ff;
  --hue-6: #ffb02e;
  --hue-7: #9b5cff;
}
html[data-theme="strobe"] body {
  /* Two lasers crossing the top of the room and nothing else. */
  background-image:
    radial-gradient(ellipse 70% 34% at 50% 0%, var(--section-dim) 0%, transparent 72%),
    linear-gradient(160deg, transparent 30%, rgba(232,255,46,0.05) 30.3%, transparent 30.8%),
    linear-gradient(20deg, transparent 62%, rgba(255,61,242,0.05) 62.3%, transparent 62.8%);
}

/* Shop preview: the signed-in person, at swatch size. --------------------- */

/* The avatar sits over an initial, so a photo that fails to load (or none at
   all) leaves the letter rather than an empty grey blob. */
.sw-me { position: relative; display: inline-block; line-height: 0; border-radius: 50%; }
.sw-me .sw-init {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  border-radius: 50%; line-height: 1;
  font: 800 22px/1 var(--font-display); color: var(--bg);
  background: linear-gradient(135deg, var(--gold), var(--accent-2));
}
.sw-me img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.sw-frame .sw-me { width: 58px; height: 58px; }

/* Theme card: the first bar becomes you — avatar dot and name — so the tiny
   app reads as your app in those colours. */
.sw-th .sw-th-me { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sw-th .sw-th-me .sw-me { width: 16px; height: 16px; flex-shrink: 0; }
.sw-th .sw-th-me .sw-init { font-size: 9px; color: #111; background: rgba(255,255,255,.85); }
.sw-th .sw-th-me u {
  text-decoration: none; font: 700 10px/1.1 var(--font-body); color: rgba(255,255,255,.9);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- The theme shop: compact, and the preview is the description -------

   The sentence under each theme ("Plum dusk, hot orange, pink neon edge") is
   gone: the card shows the theme, so describing it was the caption explaining
   the caption. What is left is the preview, the name, the price and the
   owned/equipped state, on a tighter grid.

   The mini app inside the swatch carries data-theme="<key>", so the theme's
   own token block paints it — background, surface, accent, secondary and the
   five identity hues along the bottom of its card. It is the real theme at
   swatch size, not a hand-picked second copy of its colours. */
#shop-list[data-cat="themes"] { grid-template-columns: repeat(auto-fill, minmax(156px, 1fr)); gap: 12px; }
#shop-list[data-cat="themes"] .shop-item { border-radius: 16px; }
#shop-list[data-cat="themes"] .shop-swatch { aspect-ratio: 4 / 3; }
#shop-list[data-cat="themes"] .shop-item-desc { display: none; }
#shop-list[data-cat="themes"] .shop-item-info { flex: 1 1 auto; padding: 11px 12px 10px; }
#shop-list[data-cat="themes"] .shop-item-name { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#shop-list[data-cat="themes"] .shop-item-cost { margin-top: 5px; font-size: 12px; }
/* Rows stretch to the tallest card; the button sits on the floor of each. */
#shop-list[data-cat="themes"] .shop-item > button {
  margin: 0 12px 12px; width: calc(100% - 24px); min-height: 36px;
  padding: 7px 12px !important; font-size: 13px !important;
}

.sw-th {
  inset: 13% 11%; gap: 6px; padding: 9px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.8), 0 0 24px -8px var(--gold-glow);
}
.sw-th i:nth-child(2) { width: 44%; height: 6px; opacity: 1; background: var(--gold); }
.sw-th i:nth-child(3) {
  width: 100%; height: auto; min-height: 16px; opacity: 1; border-radius: var(--radius-xs);
  background:
    linear-gradient(90deg, var(--hue-1) 0 20%, var(--hue-2) 0 40%, var(--hue-3) 0 60%, var(--hue-4) 0 80%, var(--hue-5) 0) bottom / 100% 3px no-repeat,
    var(--surface-2);
  border: 1px solid var(--border);
}
.sw-th b { right: 9px; bottom: 9px; width: 16px; height: 16px; background: var(--accent-2); box-shadow: 0 0 10px -2px var(--accent-2); }
.sw-th .sw-th-me .sw-init { color: var(--bg); background: var(--gold); }
.sw-th .sw-th-me u { color: var(--text); }

/* Classic has no [data-theme] block — it IS :root — so its preview restates
   the :root values, or it would inherit whichever theme is equipped. */
.sw-th[data-theme="classic"] {
  --bg: #0a0908; --surface-2: #1c1a18; --text: #f0ede8;
  --border: rgba(255,245,235,0.06); --border-strong: rgba(255,245,235,0.13);
  --gold: #F5C842; --gold-glow: rgba(245,200,66,0.18); --accent-2: #ff7a4d;
  --hue-1: #2fd4ff; --hue-2: #b47bff; --hue-3: #ff5fa8; --hue-4: #9ae64b; --hue-5: #5e9bff;
  --radius-sm: 10px; --radius-xs: 7px;
}