/* ================= PORTAL THEMES (themes.js): 8 arcade looks for the portal's main page =================
   Neon Grid = portal.css as it is (the default). The other three are below, each switched on by
   html[data-theme="…"] (html.themed = any theme but Neon Grid). Only index.html and profile.html load this file. */

/* ---------- 🎨 the theme picker inside the account menu (every theme, Neon Grid included): 4 choices on one row ---------- */
.th-pick { display: flex; flex-direction: column; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--t-line, rgba(0,240,255,.2)); }
.th-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; font-size: 12px; font-weight: 800; color: var(--muted); padding: 0 4px; }
.th-label small { flex-basis: 100%; font-size: 11px; font-weight: 700; }
.th-name { color: var(--t-title, #fff); font-size: 14px; }
/* the chosen theme's name is shown in its own lettering */
.th-name.th-neon { font-family: 'Orbitron', sans-serif; font-size: 13px; letter-spacing: .04em; }
.th-name.th-pixel { font-family: 'Pixelify Sans', monospace; font-size: 16px; font-weight: 700; }
.th-name.th-jackpot { font-family: 'Bungee', sans-serif; font-weight: 400; }
.th-name.th-vector { font-family: 'VT323', monospace; font-size: 20px; font-weight: 400; line-height: .8; }
.th-name.th-bubble { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 15px; } .th-name.th-cosmic { font-family: 'Audiowide', sans-serif; font-size: 13px; }
.th-name.th-comic { font-family: 'Bangers', sans-serif; font-size: 18px; letter-spacing: .04em; } .th-name.th-forge { font-family: 'Black Ops One', sans-serif; font-size: 14px; }
.th-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.acct .me-menu .th-opt { width: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px 5px; border-radius: 10px; text-align: center; }
.th-opt .th-sw { width: 34px; height: 34px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,.3); display: grid; place-items: center;
  font: 900 18px 'Nunito', sans-serif; font-style: normal; color: #fff; text-shadow: 0 0 3px #000, 0 0 6px #000; }
.th-opt span { font: 800 10px/1.15 'Nunito', sans-serif; letter-spacing: 0; text-transform: none; color: var(--text); }
.th-opt[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--yellow); }
.th-opt[aria-checked="true"] .th-sw { box-shadow: 0 0 0 2px var(--yellow); }
.me-menu { width: 280px; max-height: calc(100vh - 90px); overflow-y: auto; }

/* ---------- shared by the three new themes: everything reads its colours from these --t- values ---------- */
html.themed body::before, html.themed body::after { transform: none; -webkit-mask-image: none; mask-image: none; animation: none; opacity: 1; background: none; left: 0; right: 0; top: 0; bottom: 0; height: auto; }
html.themed h1, html.themed h2, html.themed h3, html.themed .ptabs button, html.themed .chip, html.themed .btn { font-family: var(--t-hfont); }
html.themed .back, html.themed .acct .who, html.themed .acct button, html.themed .chip, html.themed .ptabs button, html.themed .top > .pab-btn, html.themed .top > .fs-btn, html.themed .fs-exit {
  background: var(--t-soft); border: var(--t-bw) solid var(--t-line); color: var(--t-ink); border-radius: var(--t-r); }
html.themed .acct button.fr, html.themed .acct button.me, html.themed .top > .pab-btn, html.themed .top > .fs-btn, html.themed .fs-exit { border-radius: var(--t-round); }
html.themed .back:hover, html.themed .acct button:hover, html.themed .chip:hover, html.themed .ptabs button:hover { background: var(--t-hover); filter: none; }
html.themed .acct button.go, html.themed .chip.on, html.themed .ptabs button.on, html.themed .acct button.fr.on, html.themed .top > .pab-btn.on, html.themed .acct .me[aria-expanded="true"] {
  background: var(--t-on); border-color: var(--t-on); color: var(--t-on-ink); box-shadow: var(--t-on-glow); }
html.themed .acct .bal { background: var(--t-soft); border: var(--t-bw) solid var(--t-coin); color: var(--t-coin); border-radius: var(--t-r); box-shadow: none; }
html.themed .search { background: var(--t-soft); color: var(--text); border: var(--t-bw) solid var(--t-line); border-radius: var(--t-r); }
html.themed .search:focus { border-color: var(--t-on); box-shadow: var(--t-on-glow); }
html.themed .tile, html.themed .panel { background: var(--card); color: var(--text); border-radius: var(--t-r); box-shadow: var(--t-card); }
html.themed .tile:hover, html.themed .tile:focus-visible { box-shadow: var(--t-card-hi); }
html.themed .tile h3 { color: var(--t-title); }
html.themed .tag { background: transparent; color: var(--t-tag); border: 1px solid var(--t-tag); border-radius: var(--t-r); }
html.themed .btn { border-radius: var(--t-r); }
html.themed .me-menu, html.themed .ft-chat, html.themed #acc-toast { background: var(--t-menu); border: var(--t-bw) solid var(--t-line); border-radius: var(--t-r); box-shadow: var(--t-card); }
html.themed .me-menu .me-head { border-bottom-color: var(--t-line); } html.themed .me-menu .me-head span, html.themed .me-menu .me-msg { color: var(--text); }
html.themed .lbx-val, html.themed .lbx-name i { color: var(--text); } html.themed .lbx-card li { border-radius: var(--t-r); }
html.themed .ft-add input, html.themed .ft-say input, html.themed select { border: 1px solid var(--t-line); border-radius: var(--t-r); background: var(--t-soft); }
/* 👥 Friends tab on the light themes (Bubblegum Pop, Comic Pow): names, headings, waves and chat bubbles were white on white (Nate 2026-11-06) */
html[data-theme="bubble"]:not([data-dark]) .ft, html[data-theme="comic"]:not([data-dark]) .ft { --ft-ink: var(--text); }
html .ft h2, html .ft h3, html .ft-n b, html .ft-ch-top b { color: var(--ft-ink, #fff); }
html[data-theme="bubble"]:not([data-dark]) .ft-row, html[data-theme="comic"]:not([data-dark]) .ft-row { background: color-mix(in srgb, var(--text) 5%, transparent); }
html[data-theme="bubble"]:not([data-dark]) :is(.ft-waves, .ft-quick) button, html[data-theme="comic"]:not([data-dark]) :is(.ft-waves, .ft-quick) button,
html[data-theme="bubble"]:not([data-dark]) .ft-msg.them, html[data-theme="comic"]:not([data-dark]) .ft-msg.them { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); }
html[data-theme="bubble"]:not([data-dark]) .ft-ghost, html[data-theme="comic"]:not([data-dark]) .ft-ghost { background: color-mix(in srgb, var(--text) 10%, transparent) !important; color: var(--text) !important; }
html[data-theme="bubble"]:not([data-dark]) .ft-say, html[data-theme="comic"]:not([data-dark]) .ft-say { border-top-color: color-mix(in srgb, var(--text) 15%, transparent); }
html.themed .wheel-hub { border-color: var(--t-on); box-shadow: var(--t-on-glow); background: var(--t-menu); color: var(--t-title); }
html.themed .wheel-modal { background: rgba(0,0,0,.8); }

/* ================= 👾 PIXEL BLASTER: 8-bit space shooter (black space, stars, blocky pixel borders) ================= */
html[data-theme="pixel"] {
  --cyan: #2f9bff; --pink: #ff3030; --yellow: #ffe600; --purple: #2f6bff; --purple-d: #1b3fa8; --green: #3cff3c; --red: #ff3030; --gold: #ffe600;
  --bg: #000; --card: #0b0b1a; --text: #ffffff; --muted: #a8b0d8;
  --t-hfont: 'Pixelify Sans', monospace; --t-line: #fff; --t-soft: #000; --t-ink: #fff; --t-hover: #1b1b3a; --t-bw: 3px; --t-r: 0; --t-round: 0;
  --t-on: #ffe600; --t-on-ink: #000; --t-on-glow: 4px 4px 0 #ff3030; --t-coin: #ffe600; --t-title: #ffe600; --t-tag: #3cff3c; --t-menu: #000;
  --t-card: 0 -4px 0 #fff, 0 4px 0 #fff, -4px 0 0 #fff, 4px 0 0 #fff, 8px 8px 0 #2f6bff;
  --t-card-hi: 0 -4px 0 #ffe600, 0 4px 0 #ffe600, -4px 0 0 #ffe600, 4px 0 0 #ffe600, 12px 12px 0 #ff3030;
  --glow: var(--t-card);
}
html[data-theme="pixel"] body { background: #000; }
/* two layers of stars drifting down the screen */
html[data-theme="pixel"] body::before {
  background-image: radial-gradient(2px 2px at 20px 30px, #fff 50%, transparent 51%), radial-gradient(2px 2px at 140px 90px, #ffe600 50%, transparent 51%),
    radial-gradient(2px 2px at 90px 170px, #fff 50%, transparent 51%), radial-gradient(3px 3px at 200px 230px, #2f9bff 50%, transparent 51%),
    radial-gradient(2px 2px at 260px 40px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60px 260px, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 170px 10px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 230px 140px, #ff3030 50%, transparent 51%);
  background-size: 300px 300px; animation: px-stars 30s linear infinite; }
html[data-theme="pixel"] body::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 2px, transparent 2px 4px); }
@keyframes px-stars { to { background-position: 0 300px; } }
html[data-theme="pixel"] .logo { font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: 40px; letter-spacing: .02em; color: #ffe600; text-shadow: 3px 3px 0 #ff3030, 6px 6px 0 #2f6bff; line-height: 1.3; }
html[data-theme="pixel"] .hub-top .logo::after { content: '▶ Insert coin'; display: block; margin-top: 2px; font-size: 16px; font-weight: 500; color: #fff; text-shadow: none; animation: px-blink 1.1s steps(1) infinite; }
@keyframes px-blink { 50% { opacity: 0; } }
html[data-theme="pixel"] h1, html[data-theme="pixel"] h2, html[data-theme="pixel"] h3 { font-weight: 700; letter-spacing: .02em; line-height: 1.2; }
html[data-theme="pixel"] .tile h3 { font-size: 22px; }
html[data-theme="pixel"] .lbx-card h3, html[data-theme="pixel"] .ft h3 { font-size: 21px; } html[data-theme="pixel"] .ft h2, html[data-theme="pixel"] .wheel-box h2, html[data-theme="pixel"] .ver-box h2 { font-size: 26px; }
html[data-theme="pixel"] .ptabs button { font-size: 19px; font-weight: 600; padding: 8px 16px; }
html[data-theme="pixel"] .chip { font-size: 16px; font-weight: 500; padding: 6px 12px; }
html[data-theme="pixel"] .btn { font-size: 16px; font-weight: 600; box-shadow: 4px 4px 0 #000, inset 0 -4px rgba(0,0,0,.35); }
html[data-theme="pixel"] .tag { font-family: 'Pixelify Sans', monospace; font-size: 13px; padding: 1px 6px; }
html[data-theme="pixel"] .grid { gap: 26px; }
html[data-theme="pixel"] .tile:hover, html[data-theme="pixel"] .tile:focus-visible { transform: translate(-4px, -4px); }
html[data-theme="pixel"] .tile .art { border-bottom: 4px solid #fff; }
html[data-theme="pixel"] .tile .art::after { display: none; } /* flat colour behind the pixel-art picture */
html[data-theme="pixel"] .lbx-rank { font-family: 'Pixelify Sans', monospace; font-weight: 700; font-size: 17px; color: #ffe600; }
html[data-theme="pixel"] .lbx-card li.me { box-shadow: 0 0 0 3px #ffe600; }
@media (max-width: 560px) {
  html[data-theme="pixel"] .logo { font-size: 32px; text-shadow: 2px 2px 0 #ff3030, 4px 4px 0 #2f6bff; } html[data-theme="pixel"] .hub-top .logo::after { font-size: 14px; }
  html[data-theme="pixel"] .ptabs button { font-size: 15px; padding: 7px 9px; } html[data-theme="pixel"] .chip { font-size: 15px; padding: 5px 10px; }
  html[data-theme="pixel"] .grid { gap: 22px; padding-right: 8px; }
}

/* ================= 🎰 JACKPOT ALLEY: pinball cabinet (deep red, gold, marquee bulbs, spinning sunburst) ================= */
html[data-theme="jackpot"] {
  --cyan: #ffc934; --pink: #ff3a4f; --yellow: #ffe680; --purple: #e8132b; --purple-d: #8a0716; --green: #2fd47a; --red: #ff3a4f; --gold: #ffc934;
  --bg: #14030a; --card: linear-gradient(180deg, #3d0a1a, #220510); --text: #fff1d6; --muted: #e0b48f;
  --t-hfont: 'Bungee', 'Nunito', sans-serif; --t-line: #ffc934; --t-soft: rgba(70,8,22,.85); --t-ink: #fff1d6; --t-hover: #6a0f24; --t-bw: 2px; --t-r: 16px; --t-round: 50%;
  --t-on: #ffc934; --t-on-ink: #3a0610; --t-on-glow: 0 0 16px rgba(255,201,52,.6); --t-coin: #ffe680; --t-title: #ffc934; --t-tag: #ffe680; --t-menu: #2a0612;
  --t-card: 0 0 0 2px #ffc934, 0 0 0 5px #6a0f24, 0 10px 24px rgba(0,0,0,.5);
  --t-card-hi: 0 0 0 2px #fff1b0, 0 0 0 5px #e8132b, 0 0 30px rgba(255,201,52,.55);
  --glow: var(--t-card);
}
html[data-theme="jackpot"] body { background: radial-gradient(ellipse at 50% 0%, #6a0f24 0%, #2a0612 50%, #0c0206 100%) fixed; }
/* slowly turning sunburst behind everything, like the back glass of a pinball machine */
html[data-theme="jackpot"] body::before { left: 50%; top: -100vmax; right: auto; bottom: auto; width: 200vmax; height: 200vmax; margin-left: -100vmax;
  background: repeating-conic-gradient(rgba(255,201,52,.09) 0 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%); animation: jp-spin 120s linear infinite; }
html[data-theme="jackpot"] body::after { background: radial-gradient(ellipse at 50% 40%, transparent 50%, rgba(0,0,0,.55) 100%); }
@keyframes jp-spin { to { transform: rotate(360deg); } }
html[data-theme="jackpot"] .logo { font-family: 'Bungee Shade', 'Bungee', sans-serif; font-weight: 400; font-size: 40px; letter-spacing: 0; color: #ffc934; text-shadow: 0 0 14px rgba(255,201,52,.6), 0 0 34px rgba(232,19,43,.8); }
/* a row of chasing marquee bulbs under the top bar */
html[data-theme="jackpot"] .hub-top { padding-bottom: 14px; }
html[data-theme="jackpot"] .hub-top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 10px; pointer-events: none;
  background: radial-gradient(circle, #fff6c8 0 2.5px, #ffc934 3px, rgba(255,201,52,.25) 4.5px, transparent 5.5px) 0 50% / 20px 10px repeat-x;
  animation: jp-chase .7s steps(2) infinite; }
@keyframes jp-chase { to { background-position: 20px 50%; } }
html[data-theme="jackpot"] h1, html[data-theme="jackpot"] h2, html[data-theme="jackpot"] h3 { font-weight: 400; letter-spacing: .02em; }
html[data-theme="jackpot"] .tile h3 { font-size: 19px; }
html[data-theme="jackpot"] .ptabs button { font-size: 16px; border-radius: 999px; } html[data-theme="jackpot"] .chip { font-size: 13px; border-radius: 999px; }
html[data-theme="jackpot"] .search { border-radius: 999px; }
html[data-theme="jackpot"] .tile .art { box-shadow: inset 0 -6px rgba(0,0,0,.3); }
html[data-theme="jackpot"] .tile .art::after { background: linear-gradient(170deg, rgba(255,255,255,.28), transparent 45%); } /* glossy playfield glass */
html[data-theme="jackpot"] .btn { font-weight: 400; background: linear-gradient(#ff3a4f, #b00d20); box-shadow: 0 0 0 2px #ffc934, inset 0 -4px rgba(0,0,0,.3); }
html[data-theme="jackpot"] .btn.green { background: linear-gradient(#ffe680, #ffc934); color: #3a0610; }
html[data-theme="jackpot"] .lbx-rank { font-family: 'Bungee', sans-serif; font-weight: 400; color: #ffc934; }
html[data-theme="jackpot"] .lbx-card li { background: rgba(255,201,52,.07); } html[data-theme="jackpot"] .lbx-card li.me { box-shadow: 0 0 0 2px #ffc934; }
html[data-theme="jackpot"] .tag { border-radius: 999px; }
@media (max-width: 560px) { html[data-theme="jackpot"] .logo { font-size: 30px; } html[data-theme="jackpot"] .ptabs button { font-size: 14px; } }

/* ================= 📡 THE MATRIX (id "vector", was Vector Strike): green-glow screen, radar sweep, amber coins ================= */
html[data-theme="vector"] {
  --cyan: #39ff6a; --pink: #ff4d4d; --yellow: #ffb000; --purple: #1d8f3c; --purple-d: #0d4a1e; --green: #39ff6a; --red: #ff4d4d; --gold: #ffb000;
  --bg: #000; --card: rgba(0,14,4,.88); --text: #c4ffd2; --muted: #5fcf7c;
  --t-hfont: 'VT323', monospace; --t-line: rgba(57,255,106,.6); --t-soft: rgba(0,20,6,.8); --t-ink: #c4ffd2; --t-hover: rgba(57,255,106,.16); --t-bw: 1px; --t-r: 2px; --t-round: 2px;
  --t-on: #39ff6a; --t-on-ink: #001a07; --t-on-glow: 0 0 14px rgba(57,255,106,.7); --t-coin: #ffb000; --t-title: #39ff6a; --t-tag: #39ff6a; --t-menu: #000c03;
  --t-card: 0 0 0 1px rgba(57,255,106,.6), 0 0 16px rgba(57,255,106,.15), inset 0 0 24px rgba(57,255,106,.06);
  --t-card-hi: 0 0 0 1px #39ff6a, 0 0 26px rgba(57,255,106,.45), inset 0 0 24px rgba(57,255,106,.12);
  --glow: var(--t-card);
}
html[data-theme="vector"] body { background: radial-gradient(ellipse at 50% 30%, #031a09 0%, #000 70%) fixed; font-family: 'Share Tech Mono', monospace; font-weight: 400; }
/* a radar in the bottom corner, sweeping round */
html[data-theme="vector"] body::before { left: auto; top: auto; right: -22vmax; bottom: -22vmax; width: 64vmax; height: 64vmax; border-radius: 50%; opacity: .55;
  background: conic-gradient(from 0deg, rgba(57,255,106,.45), rgba(57,255,106,0) 70deg, transparent),
    repeating-radial-gradient(circle, transparent 0 calc(12.5% - 1px), rgba(57,255,106,.35) calc(12.5% - 1px) 12.5%),
    linear-gradient(transparent calc(50% - .5px), rgba(57,255,106,.35) 0 calc(50% + .5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(57,255,106,.35) 0 calc(50% + .5px), transparent 0);
  animation: vx-sweep 5s linear infinite; }
html[data-theme="vector"] body::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px); animation: vx-flicker 6s steps(1) infinite; }
@keyframes vx-sweep { to { transform: rotate(360deg); } }
@keyframes vx-flicker { 0%, 96%, 100% { opacity: 1; } 97% { opacity: .6; } }
html[data-theme="vector"] .logo { font-family: 'VT323', monospace; font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: .04em; color: #39ff6a; text-shadow: 0 0 6px #39ff6a, 0 0 22px rgba(57,255,106,.6); }
html[data-theme="vector"] .logo::before { content: '> '; color: #ffb000; text-shadow: 0 0 6px #ffb000; }
html[data-theme="vector"] .hub-top .logo::after { content: '_'; animation: px-blink 1s steps(1) infinite; }
html[data-theme="vector"] h1, html[data-theme="vector"] h2, html[data-theme="vector"] h3 { font-weight: 400; letter-spacing: .04em; text-shadow: 0 0 8px rgba(57,255,106,.55); }
html[data-theme="vector"] .tile h3 { font-size: 27px; line-height: 1; }
html[data-theme="vector"] .lbx-card h3, html[data-theme="vector"] .ft h3 { font-size: 26px; } html[data-theme="vector"] .ft h2, html[data-theme="vector"] .wheel-box h2, html[data-theme="vector"] .ver-box h2 { font-size: 32px; }
html[data-theme="vector"] .ptabs button { font-size: 24px; padding: 6px 16px; text-transform: uppercase; }
html[data-theme="vector"] .chip { font-size: 20px; padding: 4px 12px; text-transform: uppercase; }
html[data-theme="vector"] .btn { font-size: 20px; background: transparent; color: #39ff6a; box-shadow: 0 0 0 1px #39ff6a, 0 0 10px rgba(57,255,106,.35); }
html[data-theme="vector"] .btn:hover { background: #39ff6a; color: #001a07; }
html[data-theme="vector"] .tile p { font-size: 13px; line-height: 1.4; }
html[data-theme="vector"] .tag { font-family: 'VT323', monospace; font-size: 16px; padding: 0 8px; text-transform: uppercase; }
/* the game pictures glow green like an old screen, and power up to full colour when you point at them */
html[data-theme="vector"] .tile .art { filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(3) brightness(.6) contrast(1.2); transition: filter .25s; border-bottom: 1px solid rgba(57,255,106,.6); }
html[data-theme="vector"] .tile:hover .art, html[data-theme="vector"] .tile:focus-visible .art { filter: none; }
html[data-theme="vector"] .tile .art::after { background: repeating-linear-gradient(0deg, rgba(0,0,0,.3) 0 1px, transparent 1px 3px); }
html[data-theme="vector"] .lbx-rank { font-family: 'VT323', monospace; font-weight: 400; font-size: 22px; color: #ffb000; }
html[data-theme="vector"] .lbx-card li { background: rgba(57,255,106,.05); } html[data-theme="vector"] .lbx-card li.me { box-shadow: 0 0 0 1px #ffb000; background: rgba(255,176,0,.08); }
html[data-theme="vector"] .acct .bal { text-shadow: 0 0 6px rgba(255,176,0,.6); }
@media (max-width: 560px) { html[data-theme="vector"] .logo { font-size: 42px; } html[data-theme="vector"] .ptabs button { font-size: 18px; padding: 6px 10px; } }

/* ================= 🫧 BUBBLEGUM POP (Nate 2026-11-05; Claude's design): pastel pink + mint, round bubbly letters, floating bubbles ================= */
html[data-theme="bubble"] {
  --cyan: #5fe0c8; --pink: #ff7ac0; --yellow: #fff06a; --purple: #ff5aae; --purple-d: #c2337f; --green: #3fd6a0; --red: #ff5a7a; --gold: #ffcf3f;
  --bg: #ffe3f2; --card: #ffffff; --text: #5a2050; --muted: #a45f93;
  --t-hfont: 'Fredoka', 'Nunito', sans-serif; --t-line: #ffb3dc; --t-soft: #fff4fa; --t-ink: #7a2a68; --t-hover: #ffe0f0; --t-bw: 2px; --t-r: 22px; --t-round: 50%;
  --t-on: #ff7ac0; --t-on-ink: #fff; --t-on-glow: 0 4px 0 #c2337f, 0 0 16px rgba(255,122,192,.45); --t-coin: #e09a00; --t-title: #ff4fa3; --t-tag: #2fb79c; --t-menu: #fff7fb;
  --t-card: 0 0 0 3px #fff, 0 6px 0 #ffb3dc, 0 12px 26px rgba(255,90,174,.25);
  --t-card-hi: 0 0 0 3px #fff, 0 8px 0 #5fe0c8, 0 16px 32px rgba(95,224,200,.4);
  --glow: var(--t-card);
}
html[data-theme="bubble"] body { background: linear-gradient(160deg, #ffe3f2, #e3fff7 60%, #fff8d6) fixed; }
html[data-theme="bubble"] body::before { background-image: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0 3px, rgba(255,255,255,.35) 4px 13px, rgba(255,122,192,.25) 14px, transparent 15px),
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.9) 0 2px, rgba(255,255,255,.3) 3px 8px, rgba(95,224,200,.3) 9px, transparent 10px);
  background-size: 260px 300px, 180px 220px; background-position: 30px 60px, 120px 10px; animation: bb-rise 26s linear infinite; }
@keyframes bb-rise { to { background-position: 30px -240px, 120px -430px; } }
html[data-theme="bubble"] .logo { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 44px; color: #fff; -webkit-text-stroke: 2px #ff5aae; text-shadow: 0 5px 0 #ff5aae, 0 10px 18px rgba(255,90,174,.4); letter-spacing: .01em; }
html[data-theme="bubble"] h1, html[data-theme="bubble"] h2, html[data-theme="bubble"] h3 { font-weight: 700; }
html[data-theme="bubble"] .tile h3 { font-size: 21px; }
html[data-theme="bubble"] .ptabs button, html[data-theme="bubble"] .chip, html[data-theme="bubble"] .search, html[data-theme="bubble"] .tag { border-radius: 999px; font-weight: 600; }
html[data-theme="bubble"] .tile:hover, html[data-theme="bubble"] .tile:focus-visible { transform: translateY(-6px) scale(1.02); }
html[data-theme="bubble"] .tile .art::after { background: radial-gradient(ellipse at 25% 15%, rgba(255,255,255,.5), transparent 45%); }
html[data-theme="bubble"] .btn { font-weight: 600; border-radius: 999px; box-shadow: inset 0 -4px rgba(0,0,0,.15), 0 4px 0 rgba(194,51,127,.45); }
html[data-theme="bubble"] .lbx-rank { font-family: 'Fredoka', sans-serif; font-weight: 700; color: #ff4fa3; }
html[data-theme="bubble"] .lbx-card li { background: #fff0f8; } html[data-theme="bubble"] .lbx-card li.me { box-shadow: 0 0 0 2px #5fe0c8; }

/* ================= 🌌 COSMIC DRIFT: deep space, twinkling stars, a slow purple nebula, glowing cyan edges ================= */
html[data-theme="cosmic"] {
  --cyan: #7fe9ff; --pink: #ff7ae0; --yellow: #ffe680; --purple: #9b5cff; --purple-d: #5a2fc0; --green: #5fffc0; --red: #ff6a8a; --gold: #ffd76a;
  --bg: #05031a; --card: linear-gradient(180deg, rgba(30,20,80,.92), rgba(12,8,40,.92)); --text: #e8ecff; --muted: #a9b3e8;
  --t-hfont: 'Audiowide', 'Nunito', sans-serif; --t-line: rgba(127,233,255,.55); --t-soft: rgba(20,14,60,.85); --t-ink: #e8ecff; --t-hover: rgba(127,233,255,.14); --t-bw: 1.5px; --t-r: 14px; --t-round: 50%;
  --t-on: #9b5cff; --t-on-ink: #fff; --t-on-glow: 0 0 18px rgba(155,92,255,.75); --t-coin: #ffd76a; --t-title: #7fe9ff; --t-tag: #ff7ae0; --t-menu: #0c0830;
  --t-card: 0 0 0 1.5px rgba(127,233,255,.45), 0 0 24px rgba(155,92,255,.25);
  --t-card-hi: 0 0 0 1.5px #7fe9ff, 0 0 34px rgba(127,233,255,.45);
  --glow: var(--t-card);
}
html[data-theme="cosmic"] body { background: radial-gradient(ellipse at 20% 10%, #2a1670 0%, transparent 50%), radial-gradient(ellipse at 85% 80%, #4a1460 0%, transparent 45%), #05031a fixed; }
html[data-theme="cosmic"] body::before { background-image: radial-gradient(1.5px 1.5px at 30px 40px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 120px 150px, #cfe9ff 50%, transparent 51%),
    radial-gradient(2px 2px at 210px 70px, #fff 50%, transparent 51%), radial-gradient(1px 1px at 80px 230px, #ffd6f6 50%, transparent 51%), radial-gradient(1.5px 1.5px at 260px 200px, #7fe9ff 50%, transparent 51%);
  background-size: 300px 280px; animation: cz-twinkle 4s ease-in-out infinite alternate; }
html[data-theme="cosmic"] body::after { background: radial-gradient(ellipse at 60% 40%, rgba(155,92,255,.16), transparent 60%); animation: cz-drift 40s ease-in-out infinite alternate; }
@keyframes cz-twinkle { to { opacity: .45; } }
@keyframes cz-drift { to { transform: translate(-6%, 4%) scale(1.15); } }
html[data-theme="cosmic"] .logo { font-family: 'Audiowide', sans-serif; font-weight: 400; font-size: 40px; color: #fff; text-shadow: 0 0 10px #7fe9ff, 0 0 28px #9b5cff; letter-spacing: .05em; }
html[data-theme="cosmic"] h1, html[data-theme="cosmic"] h2, html[data-theme="cosmic"] h3 { font-weight: 400; letter-spacing: .03em; }
html[data-theme="cosmic"] .tile h3 { font-size: 18px; text-shadow: 0 0 10px rgba(127,233,255,.5); }
html[data-theme="cosmic"] .ptabs button, html[data-theme="cosmic"] .chip, html[data-theme="cosmic"] .tag, html[data-theme="cosmic"] .search { border-radius: 999px; }
html[data-theme="cosmic"] .tile:hover, html[data-theme="cosmic"] .tile:focus-visible { transform: translateY(-4px); }
html[data-theme="cosmic"] .tile .art::after { background: radial-gradient(circle at 70% 20%, rgba(255,255,255,.18), transparent 40%); }
html[data-theme="cosmic"] .btn { font-weight: 400; box-shadow: inset 0 -4px rgba(0,0,0,.3), 0 0 14px rgba(155,92,255,.5); }
html[data-theme="cosmic"] .lbx-rank { font-family: 'Audiowide', sans-serif; color: #7fe9ff; }
html[data-theme="cosmic"] .lbx-card li { background: rgba(127,233,255,.06); } html[data-theme="cosmic"] .lbx-card li.me { box-shadow: 0 0 0 1.5px #ff7ae0; }

/* ================= 💥 COMIC POW: comic-book page, thick black ink, halftone dots, speech-bubble cards ================= */
html[data-theme="comic"] {
  --cyan: #2f8bff; --pink: #ff3b3b; --yellow: #ffe14d; --purple: #ff3b3b; --purple-d: #b01010; --green: #2fc24e; --red: #ff3b3b; --gold: #ffcf1f;
  --bg: #fff6d6; --card: #ffffff; --text: #111; --muted: #555;
  --t-hfont: 'Bangers', 'Nunito', sans-serif; --t-line: #111; --t-soft: #fff; --t-ink: #111; --t-hover: #ffe14d; --t-bw: 3px; --t-r: 6px; --t-round: 50%;
  --t-on: #ff3b3b; --t-on-ink: #fff; --t-on-glow: 4px 4px 0 #111; --t-coin: #111; --t-title: #111; --t-tag: #2f8bff; --t-menu: #fff;
  --t-card: 0 0 0 3px #111, 7px 7px 0 #111;
  --t-card-hi: 0 0 0 3px #111, 10px 10px 0 #ff3b3b;
  --glow: var(--t-card);
}
html[data-theme="comic"] body { background: #fff6d6 radial-gradient(circle, rgba(255,59,59,.22) 1.4px, transparent 1.6px) 0 0 / 12px 12px fixed; }
html[data-theme="comic"] body::before { left: auto; top: 70px; right: 3vw; bottom: auto; width: 240px; height: 240px; opacity: .18;
  background: repeating-conic-gradient(#ffe14d 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: cp-spin 40s linear infinite; }
@keyframes cp-spin { to { transform: rotate(360deg); } }
html[data-theme="comic"] .logo { font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 52px; letter-spacing: .04em; color: #ffe14d; -webkit-text-stroke: 2px #111; text-shadow: 4px 4px 0 #ff3b3b, 7px 7px 0 #111; transform: rotate(-3deg); }
html[data-theme="comic"] .hub-top .logo::after { content: 'POW!'; display: inline-block; margin-left: 10px; font-size: 22px; color: #fff; background: #2f8bff; padding: 0 8px; -webkit-text-stroke: 1px #111; text-shadow: none; border: 2px solid #111; transform: rotate(8deg); }
html[data-theme="comic"] h1, html[data-theme="comic"] h2, html[data-theme="comic"] h3 { font-weight: 400; letter-spacing: .05em; }
html[data-theme="comic"] .tile h3 { font-size: 25px; }
html[data-theme="comic"] .ptabs button { font-size: 20px; } html[data-theme="comic"] .chip { font-size: 17px; }
html[data-theme="comic"] .tile:hover, html[data-theme="comic"] .tile:focus-visible { transform: translate(-3px, -3px) rotate(-1deg); }
html[data-theme="comic"] .tile .art { border-bottom: 3px solid #111; }
html[data-theme="comic"] .tile .art::after { background: radial-gradient(circle, rgba(0,0,0,.18) 1px, transparent 1.3px) 0 0 / 7px 7px; }
html[data-theme="comic"] .btn { font-weight: 400; font-size: 19px; letter-spacing: .05em; border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
html[data-theme="comic"] .lbx-rank { font-family: 'Bangers', sans-serif; font-size: 22px; color: #ff3b3b; }
html[data-theme="comic"] .lbx-card li { background: #fff6d6; } html[data-theme="comic"] .lbx-card li.me { box-shadow: 0 0 0 3px #2f8bff; }

/* ================= 🔥 LAVA FORGE: dark iron, molten orange edges, embers floating up ================= */
html[data-theme="forge"] {
  --cyan: #ffb03a; --pink: #ff5a1a; --yellow: #ffd23f; --purple: #e8530f; --purple-d: #8a2a05; --green: #7fd04a; --red: #ff3a1a; --gold: #ffd23f;
  --bg: #120c09; --card: linear-gradient(180deg, #2e241e, #1a120e); --text: #fbe9d8; --muted: #c9a588;
  --t-hfont: 'Black Ops One', 'Nunito', sans-serif; --t-line: #8a4a1c; --t-soft: rgba(40,28,22,.9); --t-ink: #fbe9d8; --t-hover: #3e2a1e; --t-bw: 2px; --t-r: 6px; --t-round: 8px;
  --t-on: #ff8a1c; --t-on-ink: #1a0a00; --t-on-glow: 0 0 18px rgba(255,138,28,.6); --t-coin: #ffd23f; --t-title: #ffb03a; --t-tag: #ff8a1c; --t-menu: #1e1510;
  --t-card: 0 0 0 2px #5a3218, inset 0 -3px 0 #ff5a1a, 0 10px 24px rgba(0,0,0,.55);
  --t-card-hi: 0 0 0 2px #ff8a1c, inset 0 -3px 0 #ffd23f, 0 0 30px rgba(255,90,26,.5);
  --glow: var(--t-card);
}
html[data-theme="forge"] body { background: radial-gradient(ellipse at 50% 110%, #7a2205 0%, #2a120a 40%, #0c0806 75%) fixed; }
html[data-theme="forge"] body::before { background-image: radial-gradient(2px 2px at 40px 200px, #ffb03a 50%, transparent 51%), radial-gradient(1.5px 1.5px at 150px 120px, #ff5a1a 50%, transparent 51%),
    radial-gradient(2px 2px at 230px 260px, #ffd23f 50%, transparent 51%), radial-gradient(1px 1px at 90px 40px, #ff8a1c 50%, transparent 51%);
  background-size: 280px 300px; animation: fg-embers 14s linear infinite; }
html[data-theme="forge"] body::after { background: linear-gradient(0deg, rgba(255,90,26,.14), transparent 30%); }
@keyframes fg-embers { to { background-position: 30px -300px; } }
html[data-theme="forge"] .logo { font-family: 'Black Ops One', sans-serif; font-weight: 400; font-size: 42px; letter-spacing: .03em; color: #ffd23f;
  background: linear-gradient(180deg, #fff3c0, #ffd23f 40%, #ff8a1c 70%, #d42a0a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 10px rgba(255,90,26,.6)); }
html[data-theme="forge"] h1, html[data-theme="forge"] h2, html[data-theme="forge"] h3 { font-weight: 400; letter-spacing: .03em; }
html[data-theme="forge"] .tile h3 { font-size: 19px; }
html[data-theme="forge"] .tile:hover, html[data-theme="forge"] .tile:focus-visible { transform: translateY(-4px); }
html[data-theme="forge"] .tile .art { border-bottom: 2px solid #ff5a1a; }
html[data-theme="forge"] .tile .art::after { background: linear-gradient(0deg, rgba(255,90,26,.22), transparent 50%); }
html[data-theme="forge"] .btn { font-weight: 400; background: linear-gradient(#ff8a1c, #c23a08); box-shadow: inset 0 -4px rgba(0,0,0,.35), 0 0 0 1px #ffd23f; }
html[data-theme="forge"] .lbx-rank { font-family: 'Black Ops One', sans-serif; color: #ffb03a; }
html[data-theme="forge"] .lbx-card li { background: rgba(255,138,28,.06); } html[data-theme="forge"] .lbx-card li.me { box-shadow: 0 0 0 2px #ff8a1c; }
@media (max-width: 560px) { html[data-theme="bubble"] .logo, html[data-theme="cosmic"] .logo, html[data-theme="forge"] .logo { font-size: 32px; } html[data-theme="comic"] .logo { font-size: 40px; } }

/* every theme's own game pictures (theme-icons.js); The Matrix's green-screen filter isn't needed on them */
.tile .art .th-icon { width: 92px; height: 92px; position: relative; z-index: 1; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.tile .art.wheel-art .th-icon { width: 70px; height: 70px; }
/* light themes: the yellow "Ready to spin!" / quests line needs a darker colour to be readable */
html[data-theme="bubble"] .wheel-when, html[data-theme="comic"] .wheel-when { color: var(--t-title); }

/* ================= 🌙 DARK MODE for the two bright themes (Nate 2026-11-05; a setting on the Profile page, html[data-dark]) =================
   The same look, lettering, bubbles / halftone and pointers, only darker: deep plum for Bubblegum Pop, a night-time comic page for Comic Pow. */
html[data-theme="bubble"][data-dark] {
  --bg: #1c0f22; --card: #2c1832; --text: #ffe3f2; --muted: #d59bc4;
  --t-line: #6a3a66; --t-soft: #2a1530; --t-ink: #ffd6ec; --t-hover: #3e2044; --t-coin: #ffcf3f; --t-title: #ff8fcb; --t-tag: #5fe0c8; --t-menu: #24122a;
  --t-on-glow: 0 4px 0 #8a2060, 0 0 16px rgba(255,122,192,.35);
  --t-card: 0 0 0 2px #4a2650, 0 6px 0 #5a2456, 0 12px 26px rgba(0,0,0,.45);
  --t-card-hi: 0 0 0 2px #ff7ac0, 0 8px 0 #2f8a7a, 0 16px 32px rgba(95,224,200,.25);
}
html[data-theme="bubble"][data-dark] body { background: linear-gradient(160deg, #24102c, #0f1f22 60%, #241c10) fixed; }
html[data-theme="bubble"][data-dark] body::before { opacity: .35; }
html[data-theme="bubble"][data-dark] .logo { color: #2c1832; -webkit-text-stroke: 2px #ff7ac0; text-shadow: 0 5px 0 #8a2060, 0 0 22px rgba(255,122,192,.45); }
html[data-theme="bubble"][data-dark] .tile .art::after { background: radial-gradient(ellipse at 25% 15%, rgba(255,255,255,.18), transparent 45%); }
html[data-theme="bubble"][data-dark] .lbx-card li { background: #3a1f40; }
html[data-theme="comic"][data-dark] {
  --bg: #14141b; --card: #22222c; --text: #ececf4; --muted: #a8a8bc;
  --t-line: #e8e8f0; --t-soft: #1c1c24; --t-ink: #ececf4; --t-hover: #3a3420; --t-coin: #ffe14d; --t-title: #ffe14d; --t-tag: #6aa8ff; --t-menu: #1c1c24;
  --t-on-glow: 4px 4px 0 #000; --t-card: 0 0 0 3px #000, 7px 7px 0 #000; --t-card-hi: 0 0 0 3px #000, 10px 10px 0 #c42a2a;
}
html[data-theme="comic"][data-dark] body { background: #14141b radial-gradient(circle, rgba(140,90,200,.22) 1.4px, transparent 1.6px) 0 0 / 12px 12px fixed; }
html[data-theme="comic"][data-dark] body::before { opacity: .07; }
html[data-theme="comic"][data-dark] .logo { color: #e8c23a; -webkit-text-stroke: 2px #000; text-shadow: 4px 4px 0 #b02020, 7px 7px 0 #000; }
html[data-theme="comic"][data-dark] .hub-top .logo::after { background: #2a5fb0; color: #ececf4; border-color: #000; }
html[data-theme="comic"][data-dark] .tile .art { border-bottom-color: #000; }
html[data-theme="comic"][data-dark] .btn { border-color: #000; box-shadow: 4px 4px 0 #000; }
html[data-theme="comic"][data-dark] .lbx-card li { background: #1a1a22; }
/* the Dark mode switch under the theme choices */
.th-dark { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--t-soft, rgba(255,255,255,.06)); cursor: pointer; font-size: 14px; color: var(--text); }
.th-dark input { width: 20px; height: 20px; flex: none; } .th-dark small { display: block; font-size: 11px; color: var(--muted); font-weight: 700; }

/* calmer screens for people who turn motion off */
@media (prefers-reduced-motion: reduce) { html.themed body::before, html.themed body::after, html.themed .hub-top::after, html.themed .hub-top .logo::after { animation: none !important; } }

/* Pixel Blaster's pixel-art game pictures (themes.js Theme.art) */
.tile .art .px-icon { width: 76px; height: 76px; image-rendering: pixelated; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.45)); position: relative; z-index: 1; }
.tile .art.wheel-art .px-icon { width: 64px; height: 64px; }