/* 🎨 Blakeit in the portal themes (Nate 2026-11-04): the theme picked on the portal's Profile page now dresses Blakeit too.
   portal/themes.js (loaded in index.html) sets <html data-theme="neon|pixel|jackpot|vector|bubble|cosmic|comic|forge"> and the mouse pointer.
   Only Blakeit's frame changes: background, side menu, top bar, logo, headings, buttons and accent colours. The white cards,
   Pals and game screens keep their look so everything stays easy to read. A background colour picked in Settings still wins. */

/* ================= Neon Grid (the default) ================= */
html[data-theme="neon"] { --purple: #a63dff; --purple-d: #5b1a9a; --side: #07010f; --bgc: #0b0218; --th-a: #00f0ff; --th-b: #ff2bd6; --th-font: 'Orbitron', 'Nunito', sans-serif; }
html[data-theme="neon"] #sidebar { background: linear-gradient(180deg, #1a0533, #07010f); box-shadow: 1px 0 0 rgba(0,240,255,.45), 6px 0 24px rgba(255,43,214,.18); }
html[data-theme="neon"] .logo { font-family: var(--th-font); font-weight: 900; font-size: 30px; letter-spacing: .04em; color: #fff; text-shadow: 0 0 8px #00f0ff, 0 0 22px #ff2bd6; }
html[data-theme="neon"] #nav a { color: #cfe9ff; font-family: var(--th-font); font-size: 15px; letter-spacing: .03em; }
html[data-theme="neon"] #nav a:hover { background: rgba(0,240,255,.1); }
html[data-theme="neon"] #nav a.active { background: linear-gradient(90deg, #ff2bd6, #a63dff); color: #fff; box-shadow: 0 0 16px rgba(255,43,214,.55); }
html[data-theme="neon"] #topbar { background: rgba(10,2,30,.65); box-shadow: 0 1px 0 rgba(0,240,255,.35); }
html[data-theme="neon"] #topbar h1 { font-family: var(--th-font); font-weight: 900; font-size: 26px; letter-spacing: .04em; text-shadow: 0 0 10px #ff2bd6; }
html[data-theme="neon"] .btn { font-family: var(--th-font); font-size: 14px; letter-spacing: .04em; box-shadow: inset 0 -4px rgba(0,0,0,.3), 0 0 14px rgba(166,61,255,.45); }
html[data-theme="neon"] .card { box-shadow: 0 0 0 2px rgba(0,240,255,.35), 0 0 18px rgba(255,43,214,.18); }

/* ================= 👾 Pixel Blaster ================= */
html[data-theme="pixel"] { --purple: #2f6bff; --purple-d: #1b3fa8; --side: #000; --bgc: #000; --gold: #ffe600; --red: #ff3030; --green: #2fd43c; --th-font: 'Pixelify Sans', monospace; }
html[data-theme="pixel"] #sidebar { background: #000; box-shadow: 4px 0 0 #fff; }
html[data-theme="pixel"] .logo { font-family: var(--th-font); font-weight: 700; font-size: 40px; color: #ffe600; text-shadow: 3px 3px 0 #ff3030, 6px 6px 0 #2f6bff; }
html[data-theme="pixel"] #nav a { font-family: var(--th-font); font-weight: 600; font-size: 19px; color: #fff; border-radius: 0; }
html[data-theme="pixel"] #nav a.active { background: #ffe600; color: #000; box-shadow: 4px 4px 0 #ff3030; }
html[data-theme="pixel"] .side-user { border-radius: 0; background: #1b1b3a; box-shadow: 4px 4px 0 #2f6bff; }
html[data-theme="pixel"] #topbar { background: #000; box-shadow: 0 4px 0 #fff; backdrop-filter: none; }
html[data-theme="pixel"] #topbar h1 { font-family: var(--th-font); font-weight: 700; color: #ffe600; text-shadow: 3px 3px 0 #ff3030; }
html[data-theme="pixel"] .token-pill { border-radius: 0; font-family: var(--th-font); box-shadow: 4px 4px 0 #ff3030; }
html[data-theme="pixel"] .btn { font-family: var(--th-font); font-weight: 600; border-radius: 0; box-shadow: inset 0 -4px rgba(0,0,0,.35), 4px 4px 0 #000; }
html[data-theme="pixel"] .card, html[data-theme="pixel"] .modal, html[data-theme="pixel"] .toast { border-radius: 0; box-shadow: 0 0 0 4px #000, 8px 8px 0 #2f6bff; }
html[data-theme="pixel"] h1, html[data-theme="pixel"] h2, html[data-theme="pixel"] h3, html[data-theme="pixel"] .titan { font-family: var(--th-font); font-weight: 700; }
html[data-theme="pixel"] input, html[data-theme="pixel"] select { border-radius: 0; }

/* ================= Jackpot Alley ================= */
html[data-theme="jackpot"] { --purple: #e8132b; --purple-d: #8a0716; --side: #14030a; --bgc: #2a0612; --gold: #ffc934; --th-font: 'Bungee', 'Nunito', sans-serif; }
html[data-theme="jackpot"] #sidebar { background: linear-gradient(180deg, #3d0a1a, #14030a); box-shadow: 2px 0 0 #ffc934, 6px 0 0 #6a0f24, 8px 0 24px rgba(0,0,0,.5); }
html[data-theme="jackpot"] .logo { font-family: var(--th-font); font-size: 34px; color: #ffc934; text-shadow: 0 3px 0 #8a0716, 0 0 18px rgba(255,201,52,.55); }
html[data-theme="jackpot"] #nav a { font-family: var(--th-font); font-size: 15px; color: #fff1d6; }
html[data-theme="jackpot"] #nav a:hover { background: rgba(255,201,52,.12); }
html[data-theme="jackpot"] #nav a.active { background: linear-gradient(180deg, #ffe680, #ffc934); color: #3a0610; box-shadow: 0 0 16px rgba(255,201,52,.6); }
html[data-theme="jackpot"] .side-user { background: rgba(70,8,22,.85); box-shadow: 0 0 0 2px #ffc934; }
html[data-theme="jackpot"] #topbar { background: rgba(42,6,18,.85); box-shadow: 0 2px 0 #ffc934; }
html[data-theme="jackpot"] #topbar h1 { font-family: var(--th-font); font-size: 28px; color: #ffc934; text-shadow: 0 3px 0 #8a0716; }
html[data-theme="jackpot"] .btn { font-family: var(--th-font); font-size: 15px; box-shadow: inset 0 -4px rgba(0,0,0,.3), 0 0 0 2px #ffc934; }
html[data-theme="jackpot"] .card { box-shadow: 0 0 0 3px #ffc934, 0 0 0 6px #6a0f24, 0 10px 24px rgba(0,0,0,.5); }
html[data-theme="jackpot"] h1, html[data-theme="jackpot"] h2, html[data-theme="jackpot"] h3, html[data-theme="jackpot"] .titan { font-family: var(--th-font); font-weight: 400; }

/* ================= The Matrix ================= */
html[data-theme="vector"] { --purple: #1d8f3c; --purple-d: #0d4a1e; --side: #000; --bgc: #000; --gold: #ffb000; --green: #1d9a3c; --th-font: 'VT323', monospace; --th-mono: 'Share Tech Mono', monospace; }
html[data-theme="vector"] #sidebar { background: #000c03; box-shadow: 1px 0 0 rgba(57,255,106,.6), 4px 0 20px rgba(57,255,106,.15); }
html[data-theme="vector"] .logo { font-family: var(--th-font); font-size: 52px; color: #39ff6a; text-shadow: 0 0 10px rgba(57,255,106,.8); }
html[data-theme="vector"] #nav a { font-family: var(--th-mono); font-size: 16px; color: #c4ffd2; }
html[data-theme="vector"] #nav a:hover { background: rgba(57,255,106,.12); }
html[data-theme="vector"] #nav a.active { background: #39ff6a; color: #001a07; box-shadow: 0 0 14px rgba(57,255,106,.7); }
html[data-theme="vector"] .side-user { background: rgba(0,20,6,.8); box-shadow: 0 0 0 1px rgba(57,255,106,.6); }
html[data-theme="vector"] #topbar { background: rgba(0,12,3,.85); box-shadow: 0 1px 0 rgba(57,255,106,.6); }
html[data-theme="vector"] #topbar h1 { font-family: var(--th-font); font-weight: 400; font-size: 42px; color: #39ff6a; text-shadow: 0 0 10px rgba(57,255,106,.7); }
html[data-theme="vector"] .btn { font-family: var(--th-mono); font-size: 15px; box-shadow: inset 0 -4px rgba(0,0,0,.35), 0 0 12px rgba(57,255,106,.35); }
html[data-theme="vector"] .card { box-shadow: 0 0 0 1px rgba(57,255,106,.7), 0 0 18px rgba(57,255,106,.2); }
html[data-theme="vector"] h1, html[data-theme="vector"] h2, html[data-theme="vector"] h3, html[data-theme="vector"] .titan { font-family: var(--th-mono); }
/* ================= 🫧 Bubblegum Pop (Nate 2026-11-05) ================= */
html[data-theme="bubble"] { --purple: #ff5aae; --purple-d: #c2337f; --side: #ffd1ec; --bgc: #ffe8f4; --gold: #ffcf3f; --th-font: 'Fredoka', 'Nunito', sans-serif; }
html[data-theme="bubble"] #sidebar { background: linear-gradient(180deg, #ffd1ec, #c9f6ec); box-shadow: 3px 0 0 #fff, 8px 0 24px rgba(255,90,174,.25); }
html[data-theme="bubble"] .logo { font-family: var(--th-font); font-weight: 700; font-size: 38px; color: #fff; -webkit-text-stroke: 2px #ff5aae; text-shadow: 0 4px 0 #ff5aae; }
html[data-theme="bubble"] #nav a { font-family: var(--th-font); font-weight: 600; font-size: 18px; color: #7a2a68; border-radius: 999px; }
html[data-theme="bubble"] #nav a:hover { background: rgba(255,255,255,.6); }
html[data-theme="bubble"] #nav a.active { background: #fff; color: #ff4fa3; box-shadow: 0 4px 0 #ffb3dc; }
html[data-theme="bubble"] .side-user { background: rgba(255,255,255,.7); color: #7a2a68; border-radius: 22px; }
html[data-theme="bubble"] #topbar { background: rgba(255,232,244,.85); box-shadow: 0 3px 0 #fff; }
html[data-theme="bubble"] #topbar h1 { font-family: var(--th-font); font-weight: 700; color: #ff4fa3; text-shadow: 0 3px 0 #fff; }
html[data-theme="bubble"] .btn { font-family: var(--th-font); font-weight: 600; border-radius: 999px; }
html[data-theme="bubble"] .card { border-radius: 26px; box-shadow: 0 0 0 3px #fff, 0 6px 0 #ffb3dc, 0 12px 24px rgba(255,90,174,.2); }
html[data-theme="bubble"] h1, html[data-theme="bubble"] h2, html[data-theme="bubble"] h3, html[data-theme="bubble"] .titan { font-family: var(--th-font); font-weight: 700; }

/* ================= 🌌 Cosmic Drift ================= */
html[data-theme="cosmic"] { --purple: #9b5cff; --purple-d: #5a2fc0; --side: #07041a; --bgc: #0a0626; --gold: #ffd76a; --th-font: 'Audiowide', 'Nunito', sans-serif; }
html[data-theme="cosmic"] #sidebar { background: radial-gradient(ellipse at 30% 0%, #2a1670, #07041a 70%); box-shadow: 1px 0 0 rgba(127,233,255,.45), 6px 0 24px rgba(155,92,255,.25); }
html[data-theme="cosmic"] .logo { font-family: var(--th-font); font-size: 32px; color: #fff; text-shadow: 0 0 10px #7fe9ff, 0 0 26px #9b5cff; }
html[data-theme="cosmic"] #nav a { font-family: var(--th-font); font-size: 15px; color: #dfe6ff; }
html[data-theme="cosmic"] #nav a:hover { background: rgba(127,233,255,.12); }
html[data-theme="cosmic"] #nav a.active { background: linear-gradient(90deg, #9b5cff, #5a8cff); color: #fff; box-shadow: 0 0 18px rgba(155,92,255,.7); }
html[data-theme="cosmic"] .side-user { background: rgba(20,14,60,.85); box-shadow: 0 0 0 1px rgba(127,233,255,.45); }
html[data-theme="cosmic"] #topbar { background: rgba(10,6,38,.8); box-shadow: 0 1px 0 rgba(127,233,255,.45); }
html[data-theme="cosmic"] #topbar h1 { font-family: var(--th-font); font-weight: 400; color: #fff; text-shadow: 0 0 12px #7fe9ff; }
html[data-theme="cosmic"] .btn { font-family: var(--th-font); font-size: 14px; box-shadow: inset 0 -4px rgba(0,0,0,.3), 0 0 14px rgba(155,92,255,.5); }
html[data-theme="cosmic"] .card { box-shadow: 0 0 0 2px rgba(127,233,255,.45), 0 0 22px rgba(155,92,255,.3); }
html[data-theme="cosmic"] h1, html[data-theme="cosmic"] h2, html[data-theme="cosmic"] h3, html[data-theme="cosmic"] .titan { font-family: var(--th-font); font-weight: 400; }

/* ================= 💥 Comic Pow ================= */
html[data-theme="comic"] { --purple: #ff3b3b; --purple-d: #b01010; --side: #ffe14d; --bgc: #fff6d6; --gold: #ffcf1f; --th-font: 'Bangers', 'Nunito', sans-serif; }
html[data-theme="comic"] #sidebar { background: #ffe14d radial-gradient(circle, rgba(255,59,59,.3) 1.4px, transparent 1.6px) 0 0 / 10px 10px; box-shadow: 4px 0 0 #111; }
html[data-theme="comic"] .logo { font-family: var(--th-font); font-size: 46px; letter-spacing: .04em; color: #fff; -webkit-text-stroke: 2px #111; text-shadow: 3px 3px 0 #ff3b3b, 6px 6px 0 #111; transform: rotate(-3deg); }
html[data-theme="comic"] #nav a { font-family: var(--th-font); font-size: 21px; letter-spacing: .05em; color: #111; }
html[data-theme="comic"] #nav a:hover { background: #fff; }
html[data-theme="comic"] #nav a.active { background: #ff3b3b; color: #fff; box-shadow: 0 0 0 3px #111, 4px 4px 0 #111; }
html[data-theme="comic"] .side-user { background: #fff; color: #111; box-shadow: 0 0 0 3px #111, 4px 4px 0 #111; }
html[data-theme="comic"] #topbar { background: #fff; box-shadow: 0 3px 0 #111; }
html[data-theme="comic"] #topbar h1 { font-family: var(--th-font); font-weight: 400; font-size: 34px; letter-spacing: .05em; color: #ffe14d; -webkit-text-stroke: 1.5px #111; text-shadow: 3px 3px 0 #111; }
html[data-theme="comic"] .btn { font-family: var(--th-font); font-size: 18px; letter-spacing: .05em; border: 3px solid #111; box-shadow: 4px 4px 0 #111; }
html[data-theme="comic"] .card, html[data-theme="comic"] .modal { box-shadow: 0 0 0 3px #111, 7px 7px 0 #111; }
html[data-theme="comic"] h1, html[data-theme="comic"] h2, html[data-theme="comic"] h3, html[data-theme="comic"] .titan { font-family: var(--th-font); font-weight: 400; letter-spacing: .04em; }

/* ================= 🔥 Lava Forge ================= */
html[data-theme="forge"] { --purple: #e8530f; --purple-d: #8a2a05; --side: #140d0a; --bgc: #1a110c; --gold: #ffd23f; --th-font: 'Black Ops One', 'Nunito', sans-serif; }
html[data-theme="forge"] #sidebar { background: linear-gradient(180deg, #2e241e, #140d0a); box-shadow: 2px 0 0 #ff5a1a, 6px 0 24px rgba(255,90,26,.25); }
html[data-theme="forge"] .logo { font-family: var(--th-font); font-size: 34px; 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 8px rgba(255,90,26,.6)); }
html[data-theme="forge"] #nav a { font-family: var(--th-font); font-size: 15px; color: #fbe9d8; }
html[data-theme="forge"] #nav a:hover { background: rgba(255,138,28,.12); }
html[data-theme="forge"] #nav a.active { background: linear-gradient(180deg, #ffb03a, #e8530f); color: #1a0a00; box-shadow: 0 0 16px rgba(255,90,26,.6); }
html[data-theme="forge"] .side-user { background: rgba(40,28,22,.9); box-shadow: 0 0 0 2px #5a3218; }
html[data-theme="forge"] #topbar { background: rgba(26,17,12,.88); box-shadow: 0 2px 0 #ff5a1a; }
html[data-theme="forge"] #topbar h1 { font-family: var(--th-font); font-weight: 400; color: #ffb03a; text-shadow: 0 0 12px rgba(255,90,26,.6); }
html[data-theme="forge"] .btn { font-family: var(--th-font); font-size: 14px; box-shadow: inset 0 -4px rgba(0,0,0,.35), 0 0 0 1px #ffd23f; }
html[data-theme="forge"] .card { box-shadow: 0 0 0 2px #5a3218, inset 0 -3px 0 #ff5a1a, 0 10px 24px rgba(0,0,0,.5); }
html[data-theme="forge"] h1, html[data-theme="forge"] h2, html[data-theme="forge"] h3, html[data-theme="forge"] .titan { font-family: var(--th-font); font-weight: 400; }
/* ================= 🌙 Dark mode for Bubblegum Pop and Comic Pow (Nate 2026-11-05; set on the portal Profile page) ================= */
html[data-theme="bubble"][data-dark] { --side: #24122a; --bgc: #1c0f22; }
html[data-theme="bubble"][data-dark] #sidebar { background: linear-gradient(180deg, #2c1832, #10221f); box-shadow: 2px 0 0 #4a2650, 8px 0 24px rgba(0,0,0,.4); }
html[data-theme="bubble"][data-dark] .logo { color: #2c1832; -webkit-text-stroke: 2px #ff7ac0; text-shadow: 0 4px 0 #8a2060; }
html[data-theme="bubble"][data-dark] #nav a { color: #ffd6ec; } html[data-theme="bubble"][data-dark] #nav a:hover { background: rgba(255,122,192,.12); }
html[data-theme="bubble"][data-dark] #nav a.active { background: #ff7ac0; color: #2c1832; box-shadow: 0 4px 0 #8a2060; }
html[data-theme="bubble"][data-dark] .side-user { background: rgba(60,30,66,.85); color: #ffd6ec; }
html[data-theme="bubble"][data-dark] #topbar { background: rgba(36,18,42,.9); box-shadow: 0 2px 0 #4a2650; }
html[data-theme="bubble"][data-dark] #topbar h1 { color: #ff8fcb; text-shadow: none; }
html[data-theme="bubble"][data-dark] .card { box-shadow: 0 0 0 2px #4a2650, 0 6px 0 #5a2456, 0 12px 24px rgba(0,0,0,.4); }
html[data-theme="comic"][data-dark] { --side: #1c1c24; --bgc: #14141b; }
html[data-theme="comic"][data-dark] #sidebar { background: #1c1c24 radial-gradient(circle, rgba(140,90,200,.25) 1.4px, transparent 1.6px) 0 0 / 10px 10px; box-shadow: 4px 0 0 #000; }
html[data-theme="comic"][data-dark] .logo { color: #e8c23a; text-shadow: 3px 3px 0 #b02020, 6px 6px 0 #000; }
html[data-theme="comic"][data-dark] #nav a { color: #ececf4; } html[data-theme="comic"][data-dark] #nav a:hover { background: #2c2c38; }
html[data-theme="comic"][data-dark] #nav a.active { background: #c42a2a; color: #fff; box-shadow: 0 0 0 3px #000, 4px 4px 0 #000; }
html[data-theme="comic"][data-dark] .side-user { background: #2c2c38; color: #ececf4; box-shadow: 0 0 0 3px #000, 4px 4px 0 #000; }
html[data-theme="comic"][data-dark] #topbar { background: #1c1c24; box-shadow: 0 3px 0 #000; }
html[data-theme="comic"][data-dark] #topbar h1 { color: #e8c23a; -webkit-text-stroke: 1.5px #000; text-shadow: 3px 3px 0 #000; }
/* the white cards dim to a soft grey / pink so the page isn't glaring, but everything on them stays easy to read */
html[data-theme="comic"][data-dark] .card, html[data-theme="comic"][data-dark] .modal { background: #d9d9e2; }
html[data-theme="bubble"][data-dark] .card, html[data-theme="bubble"][data-dark] .modal { background: #ecd6e4; }
/* Settings → Background: the first swatch (🎨) means "use my portal theme's background" */
.bg-sw.theme { display: inline-grid; place-items: center; font-size: 18px; background: conic-gradient(#ff2bd6, #00f0ff, #ffe600, #39ff6a, #ff2bd6); }