/* Three candidate looks, every colour taken from the game (pick with ?theme=a|b|c). Loaded after style.css. */

/* All three drop the stock-template tells: highlighter headlines, square bullets, beige paper. */
[data-theme] .title span { background: none; padding: 0; }
[data-theme] .eyebrow::before { display: none; }

/* A. The game's own menus: navy popup panels, dark wells, Lilita titles, the orange name-tag pill. */
[data-theme="a"] { --panel: rgb(22 34 74 / 0.94); --well: #0c1430; background: #0c1430; color: #c9d6f2; }
[data-theme="a"] .sec, [data-theme="a"] .sec-tint, [data-theme="a"] .sec-deep { background: #0c1430; }
[data-theme="a"] .sec-dusk, [data-theme="a"] .sec-tint { background: #101a3e; }
[data-theme="a"] .title { color: #fff; text-shadow: 0 3px 0 #070b18; }
[data-theme="a"] .title span { color: #ffd23f; }
[data-theme="a"] .eyebrow { color: #fff; background: #ff7a3c; border: 3px solid #070b18; border-radius: 999px; padding: 2px 14px 4px; box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.25); letter-spacing: 0.08em; }
[data-theme="a"] h3, [data-theme="a"] .world figcaption, [data-theme="a"] .moods figcaption, [data-theme="a"] .card span, [data-theme="a"] summary, [data-theme="a"] .facts b { color: #fff; }
[data-theme="a"] .lead, [data-theme="a"] p, [data-theme="a"] .facts span { color: #c9d6f2; }
[data-theme="a"] .world small, [data-theme="a"] .world em, [data-theme="a"] .tag { color: #8fa3d0; }
[data-theme="a"] .steps, [data-theme="a"] .road, [data-theme="a"] .facts { border: 0; gap: 16px; }
[data-theme="a"] .step, [data-theme="a"] .stop, [data-theme="a"] .facts, [data-theme="a"] .faq > div:last-child, [data-theme="a"] .armory {
  background: var(--panel); border: 5px solid #070b18 !important; border-radius: 22px; box-shadow: inset 0 0 0 2px #3a5aa0; padding: 22px !important; }
[data-theme="a"] .stop::before { display: none; }
[data-theme="a"] .stop.now { box-shadow: inset 0 0 0 2px #45d4ff; }
[data-theme="a"] .step-n { color: #ffd23f; -webkit-text-stroke: 0; text-shadow: 0 3px 0 #070b18; }
[data-theme="a"] .tile, [data-theme="a"] .world img, [data-theme="a"] .moods img, [data-theme="a"] .lineup, [data-theme="a"] .screen { border: 5px solid #070b18; border-radius: 18px; box-shadow: inset 0 0 0 2px #3a5aa0; }
[data-theme="a"] .t-pets { background: #16224a; }
[data-theme="a"] .slot { background: #0c1430; border-color: #23336a; }
[data-theme="a"] .armory-info { background: #0c1430; border-color: #23336a; }
[data-theme="a"] .facts div, [data-theme="a"] details { border-color: #23336a; }
[data-theme="a"] .btn-sun { background: #3fbf6a; color: #fff; text-shadow: 0 2px 0 #070b18; border-color: #070b18; border-radius: 999px; }
[data-theme="a"] .nav.solid { background: rgb(12 20 48 / 0.94); }
[data-theme="a"] .nav-links a { color: #fff; }
[data-theme="a"] .marquee { border-top-color: #3a5aa0; }

/* B. The worlds themselves: each section sits on a blurred, dimmed render of a real stage. */
[data-theme="b"] { background: #1a1420; color: #f1e6dc; }
[data-theme="b"] .sec, [data-theme="d"] .sec { background: #1a1420; isolation: isolate; overflow: hidden; }
[data-theme="b"] .sec::before, [data-theme="d"] .sec::before { content: ''; position: absolute; inset: -40px; z-index: -1; background: var(--bg) center / cover; filter: blur(16px) saturate(1.2) brightness(0.5); }
[data-theme="b"] #how, [data-theme="d"] #how { --bg: url('media/dusk.webp'); }
[data-theme="b"] #trailer, [data-theme="d"] #trailer { --bg: url('media/w1.webp'); }
[data-theme="b"] #features, [data-theme="d"] #features { --bg: url('media/w4.webp'); }
[data-theme="b"] #armory, [data-theme="d"] #armory { --bg: url('media/forge.webp'); }
[data-theme="b"] #worlds, [data-theme="d"] #worlds { --bg: url('media/w2.webp'); }
[data-theme="b"] #cards, [data-theme="d"] #cards { --bg: url('media/night.webp'); }
[data-theme="b"] #town, [data-theme="d"] #town { --bg: url('media/harvest.webp'); }
[data-theme="b"] #plan, [data-theme="d"] #plan { --bg: url('media/w5.webp'); }
[data-theme="b"] #about, [data-theme="d"] #about { --bg: url('media/winter.webp'); }
[data-theme="b"] #faq, [data-theme="d"] #faq { --bg: url('media/w6.webp'); }
[data-theme="b"] .title { color: #fff; text-shadow: 0 4px 0 rgb(0 0 0 / 0.5); }
[data-theme="b"] .title span { color: #ffd23f; }
[data-theme="b"] .eyebrow, [data-theme="b"] .world small, [data-theme="b"] .world em, [data-theme="b"] .tag { color: #ffd23f; }
[data-theme="b"] h3, [data-theme="b"] .world figcaption, [data-theme="b"] .moods figcaption, [data-theme="b"] .card span, [data-theme="b"] summary, [data-theme="b"] .facts b { color: #fff; }
[data-theme="b"] p, [data-theme="b"] .lead, [data-theme="b"] .facts span { color: #eadfd6; }
[data-theme="b"] .steps, [data-theme="b"] .road, [data-theme="b"] .facts, [data-theme="b"] details:first-child { border-color: #fff; }
[data-theme="b"] .step + .step, [data-theme="b"] .stop + .stop, [data-theme="b"] .facts div, [data-theme="b"] details { border-color: rgb(255 255 255 / 0.2); }
[data-theme="b"] .step-n { color: #ffd23f; -webkit-text-stroke: 0; }
[data-theme="b"] .tile, [data-theme="b"] .world img, [data-theme="b"] .moods img, [data-theme="b"] .lineup { border-color: rgb(255 255 255 / 0.85); }
[data-theme="b"] .armory { background: rgb(20 14 26 / 0.7); }
[data-theme="b"] .nav.solid { background: rgb(20 14 26 / 0.85); }
[data-theme="b"] .nav-links a { color: #fff; }

/* C. The logo's own palette and lean: ink, yellow, honey, white; titles skewed like the wordmark. */
[data-theme="c"] { background: #14101c; color: #e9e3ef; }
[data-theme="c"] .sec, [data-theme="c"] .sec-tint, [data-theme="c"] .sec-deep, [data-theme="c"] .sec-dusk { background: #14101c; }
[data-theme="c"] .sec + .sec { border-top: 0; }
[data-theme="c"] .sec-tint, [data-theme="c"] #features, [data-theme="c"] #cards { background: #1b1526; clip-path: polygon(0 3vw, 100% 0, 100% calc(100% - 3vw), 0 100%); margin: -3vw 0; padding-top: calc(clamp(80px, 10vw, 136px) + 3vw); padding-bottom: calc(clamp(80px, 10vw, 136px) + 3vw); }
[data-theme="c"] .title { color: #fff; font-style: normal; transform: skewX(-8deg); transform-origin: 0 100%; text-shadow: 4px 4px 0 #000; }
[data-theme="c"] .title span { color: #ffd23f; text-shadow: 4px 4px 0 #b86a00; }
[data-theme="c"] .eyebrow { color: #ffd23f; }
[data-theme="c"] .eyebrow::after { content: ''; display: inline-block; width: 26px; height: 5px; margin-left: 10px; vertical-align: 3px; background: linear-gradient(#ffd23f 0 2px, transparent 2px 3px, #ffaa28 3px); transform: skewX(-30deg); }
[data-theme="c"] h3, [data-theme="c"] .world figcaption, [data-theme="c"] .moods figcaption, [data-theme="c"] .card span, [data-theme="c"] summary, [data-theme="c"] .facts b { color: #fff; }
[data-theme="c"] p, [data-theme="c"] .lead, [data-theme="c"] .facts span { color: #c9c0d4; }
[data-theme="c"] .world small, [data-theme="c"] .world em, [data-theme="c"] .tag { color: #ffaa28; }
[data-theme="c"] .steps, [data-theme="c"] .road, [data-theme="c"] .facts, [data-theme="c"] details:first-child { border-color: #ffd23f; }
[data-theme="c"] .step + .step, [data-theme="c"] .stop + .stop, [data-theme="c"] .facts div, [data-theme="c"] details { border-color: #2e2540; }
[data-theme="c"] .step-n { color: #ffd23f; -webkit-text-stroke: 0; transform: skewX(-10deg); text-shadow: 4px 4px 0 #b86a00; }
[data-theme="c"] .tile, [data-theme="c"] .world img, [data-theme="c"] .moods img, [data-theme="c"] .lineup, [data-theme="c"] .screen { border: 3px solid #fff; border-radius: 4px; box-shadow: 6px 6px 0 #000; }
[data-theme="c"] .armory { background: #0f0c16; border-color: #2e2540; border-radius: 4px; }
[data-theme="c"] .slot, [data-theme="c"] .armory-info { border-radius: 2px; }
[data-theme="c"] .stop.now .tag { color: #14101c; }
[data-theme="c"] .nav.solid { background: rgb(20 16 28 / 0.94); box-shadow: 0 2px 0 #ffd23f; }
[data-theme="c"] .nav-links a { color: #fff; }
[data-theme="c"] .btn-sun { border-radius: 2px; transform: skewX(-8deg); }

/* Glass (on B): frosted panels with a thin light edge over the blurred worlds; a floating pill nav. */
[data-theme="b"] { --glass: rgb(255 255 255 / 0.08); --glass-2: rgb(255 255 255 / 0.14); --edge: rgb(255 255 255 / 0.22); }
[data-theme="b"] .nav { top: 14px; left: 50%; right: auto; transform: translateX(-50%); width: min(1180px, calc(100% - 24px)); padding: 8px 8px 8px 20px; border-radius: 999px;
  background: rgb(24 18 32 / 0.38); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); border: 1px solid var(--edge); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); }
[data-theme="b"] .nav.solid { background: rgb(24 18 32 / 0.62); box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); }
[data-theme="b"] .nav-logo img { opacity: 1; transform: none; height: 34px; }
[data-theme="b"] .nav-links a { color: rgb(255 255 255 / 0.86); font-weight: 700; }
[data-theme="b"] .nav-links a:hover { color: #fff; }
[data-theme="b"] .btn { border-radius: 999px; }
[data-theme="b"] .btn-sm { border: 0; box-shadow: none; padding: 9px 18px; }
[data-theme="b"] .news { position: relative; z-index: 1; }
[data-theme="b"] .waitlist { background: rgb(24 18 32 / 0.66); backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3); border: 1px solid var(--edge); border-radius: 18px; box-shadow: 0 20px 50px rgb(0 0 0 / 0.3); }
[data-theme="b"] .waitlist label { color: #fff; }
[data-theme="b"] .waitlist input { background: rgb(255 255 255 / 0.1); border: 1px solid var(--edge); border-radius: 999px; color: #fff; padding: 11px 16px; }
[data-theme="b"] .waitlist input::placeholder { color: rgb(255 255 255 / 0.55); }
[data-theme="b"] .waitlist .btn { border: 0; box-shadow: none; }
[data-theme="b"] .waitlist-note { color: rgb(255 255 255 / 0.6); }
[data-theme="b"] .scroll-cue { background: rgb(24 18 32 / 0.4); backdrop-filter: blur(10px); border: 1px solid var(--edge); border-radius: 999px; padding: 6px 16px; }
[data-theme="b"] .bubble { background: rgb(255 248 232 / 0.82); backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / 0.6); border-radius: 14px; box-shadow: 0 14px 30px rgb(0 0 0 / 0.25); }
[data-theme="b"] .bubble b { border: 0; border-radius: 999px; }
[data-theme="b"] .bubble::after { border-top-color: rgb(255 248 232 / 0.82); }
[data-theme="b"] .marquee { background: rgb(20 14 26 / 0.92); border-top: 1px solid var(--edge); }
[data-theme="b"] .marquee span::after { border-radius: 50%; width: 6px; height: 6px; }

[data-theme="b"] .steps, [data-theme="b"] .road, [data-theme="b"] .facts { border: 0; gap: 14px; }
[data-theme="b"] .step, [data-theme="b"] .stop, [data-theme="b"] .facts, [data-theme="b"] .faq > div:last-child, [data-theme="b"] .armory, [data-theme="b"] .world, [data-theme="b"] .moods figure {
  background: var(--glass); border: 1px solid var(--edge) !important; border-radius: 20px; backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), 0 20px 40px rgb(0 0 0 / 0.18); padding: 24px !important; }
[data-theme="b"] .world, [data-theme="b"] .moods figure { padding: 10px 10px 16px !important; }
[data-theme="b"] .world img, [data-theme="b"] .moods img { border: 0; border-radius: 12px; }
[data-theme="b"] .world figcaption, [data-theme="b"] .moods figcaption { padding-left: 6px; }
[data-theme="b"] .stop::before { display: none; }
[data-theme="b"] .stop.now { background: rgb(255 210 63 / 0.16); border-color: rgb(255 210 63 / 0.6) !important; }
[data-theme="b"] .stop.now .tag { background: #ffd23f; color: #14101c; border-radius: 999px; padding: 1px 10px; }
[data-theme="b"] .step-n { font-size: 44px; color: #fff; opacity: 0.9; }
[data-theme="b"] .tile { border: 1px solid var(--edge); border-radius: 20px; box-shadow: 0 20px 40px rgb(0 0 0 / 0.25); background: rgb(255 255 255 / 0.06); }
[data-theme="b"] .tile-text { background: linear-gradient(transparent, rgb(20 14 26 / 0.7)); backdrop-filter: blur(0); }
[data-theme="b"] .t-pets { background: rgb(255 255 255 / 0.08); backdrop-filter: blur(20px); }
[data-theme="b"] .lineup, [data-theme="b"] .screen { border: 1px solid var(--edge); border-radius: 20px; box-shadow: 0 30px 60px rgb(0 0 0 / 0.35); }
[data-theme="b"] .slot { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px; }
[data-theme="b"] .slot:hover, [data-theme="b"] .slot.on { background: rgb(255 255 255 / 0.14); }
[data-theme="b"] .armory-info { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); border-radius: 16px; }
[data-theme="b"] .armory-tabs button { border-color: rgb(255 255 255 / 0.2); color: rgb(255 255 255 / 0.75); }
[data-theme="b"] .facts div:last-child, [data-theme="b"] details:last-child { border-bottom: 0; }
[data-theme="b"] details:first-child { border-top: 0; }
[data-theme="b"] .join::before { background: rgb(20 14 26 / 0.45); backdrop-filter: blur(6px); }
[data-theme="b"] .join .title { -webkit-text-stroke: 0; text-shadow: 0 4px 20px rgb(0 0 0 / 0.4); }
[data-theme="b"] .foot { background: #120d18; }
[data-theme="b"] .nav { top: 48px; transition: top 0.3s, background 0.3s, box-shadow 0.3s; }
[data-theme="b"] .nav.solid { top: 12px; }

/* D. Gamey windows over the blurred worlds: the first style's chunky panels (cream, ink edge, hard shadow). */
[data-theme="d"] { --ink: #14101c; --win: #fff8e8; background: #1a1420; color: #f1e6dc; }
[data-theme="d"] .title { color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; text-shadow: 0 5px 0 var(--ink); }
[data-theme="d"] .title span { color: #ffd23f; }
[data-theme="d"] .eyebrow { color: var(--ink); background: #ffd23f; border: 3px solid var(--ink); padding: 3px 12px; transform: rotate(-2deg); box-shadow: 3px 3px 0 var(--ink); letter-spacing: 0.1em; }
[data-theme="d"] .lead, [data-theme="d"] .about > div > p { color: #f4ebe3; text-shadow: 0 1px 2px rgb(0 0 0 / 0.5); }
/* Windows */
[data-theme="d"] .steps, [data-theme="d"] .road, [data-theme="d"] .facts { border: 0; gap: 16px; }
[data-theme="d"] .step, [data-theme="d"] .stop, [data-theme="d"] .facts, [data-theme="d"] .faq > div:last-child, [data-theme="d"] .world, [data-theme="d"] .moods figure, [data-theme="d"] .waitlist {
  background: var(--win); color: #3d2b30; border: 4px solid var(--ink) !important; border-radius: 10px; box-shadow: 6px 6px 0 var(--ink); padding: 22px !important; }
[data-theme="d"] .world, [data-theme="d"] .moods figure { padding: 8px 8px 14px !important; }
[data-theme="d"] .world img, [data-theme="d"] .moods img { border: 3px solid var(--ink); border-radius: 6px; }
[data-theme="d"] h3, [data-theme="d"] .world figcaption, [data-theme="d"] .moods figcaption, [data-theme="d"] summary, [data-theme="d"] .facts b, [data-theme="d"] .waitlist label { color: var(--ink); }
[data-theme="d"] .world small { color: #8a6f72; } [data-theme="d"] .world em { color: #8a6f72; }
[data-theme="d"] .step-n { color: #ffd23f; -webkit-text-stroke: 2px var(--ink); }
[data-theme="d"] .stop::before { display: none; }
[data-theme="d"] .stop.done { background: #c9f0d6; } [data-theme="d"] .stop.now { background: #ffe58a; transform: rotate(-1.5deg); }
[data-theme="d"] .stop.now .tag { background: var(--ink); color: #ffd23f; padding: 0 6px; }
[data-theme="d"] .tag { color: #8a6f72; }
[data-theme="d"] .facts div { border-color: rgb(61 43 48 / 0.15); }
[data-theme="d"] .facts div:last-child { border-bottom: 0; }
[data-theme="d"] .tile, [data-theme="d"] .lineup, [data-theme="d"] .screen { border: 4px solid var(--ink); border-radius: 10px; box-shadow: 6px 6px 0 var(--ink); }
[data-theme="d"] .tile-text { background: linear-gradient(transparent, rgb(20 16 28 / 0.9)); }
[data-theme="d"] .t-tall { background: #2b2133; }
[data-theme="d"] .t-pets { background: var(--win); }
[data-theme="d"] .t-pets .tile-text { background: none; } [data-theme="d"] .t-pets h3 { color: var(--ink); } [data-theme="d"] .t-pets p { color: #3d2b30; }
[data-theme="d"] .card span { color: #fff; text-shadow: 0 2px 0 var(--ink); }
/* Waitlist: a game window */
[data-theme="d"] .waitlist { padding: 16px 18px 14px !important; }
[data-theme="d"] .waitlist input { border-radius: 6px; background: #fff; color: var(--ink); }
[data-theme="d"] .waitlist-note { color: #8a6f72; }
[data-theme="d"] .btn { border-radius: 8px; }
/* FAQ: tight rows, one open */
[data-theme="d"] .faq > div:last-child { padding: 6px 22px !important; }
[data-theme="d"] details { border-color: rgb(61 43 48 / 0.15); }
[data-theme="d"] details:first-child { border-top: 0; } [data-theme="d"] details:last-child { border-bottom: 0; }
[data-theme="d"] summary { padding: 14px 30px 14px 0; font-size: 20px; }
[data-theme="d"] summary::after { top: 12px; }
[data-theme="d"] details p { color: #3d2b30; padding-bottom: 14px; }
summary:focus { outline: none; } summary:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; border-radius: 4px; }
/* Nav: a clean bar at the top, a floating game pill once you scroll */
[data-theme="d"] .nav { top: 35px; background: linear-gradient(rgb(20 14 26 / 0.55), transparent); transition: top 0.3s, background 0.3s, box-shadow 0.3s, transform 0.3s, width 0.3s, border-radius 0.3s; }
[data-theme="d"] .nav-links a { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6); }
[data-theme="d"] .nav.solid { top: 12px; left: 50%; right: auto; transform: translateX(-50%); width: min(1180px, calc(100% - 24px)); padding: 8px 8px 8px 18px; border-radius: 12px;
  background: var(--win); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); backdrop-filter: none; }
[data-theme="d"] .nav.solid .nav-links a { color: var(--ink); text-shadow: none; }
[data-theme="d"] .nav.solid .nav-logo img { height: 34px; }
/* Hero stickers: slapped on, bold and readable */
[data-theme="d"] .bubble, [data-theme="b"] .bubble { background: var(--ink, #14101c); color: #fff; font: 400 clamp(20px, 2vw, 26px)/1.2 'Lilita One', 'Arial Black', system-ui, sans-serif; border: 5px solid #fff; border-radius: 14px; box-shadow: 6px 7px 0 rgb(20 16 28 / 0.55); padding: 14px 18px 16px; backdrop-filter: none; max-width: min(360px, 84vw); }
[data-theme="d"] .bubble b, [data-theme="b"] .bubble b { margin: 0 0 6px; background: none; border: 0; padding: 0; color: #ffd23f; font: 400 15px 'Lilita One', 'Arial Black', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
[data-theme="d"] .bubble::after, [data-theme="b"] .bubble::after { display: none; }
[data-theme="d"] .bubble-npc b, [data-theme="b"] .bubble-npc b { color: #ff9fc4; }
[data-theme="d"] .scroll-cue { background: var(--win); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); border-radius: 8px; }
[data-theme="d"] .join::before { background: rgb(20 14 26 / 0.45); }
[data-theme="d"] .marquee { background: var(--ink); }
[data-theme="d"] .tile-text h3 { color: #fff; }
[data-theme="d"] .t-pets .tile-text h3 { color: var(--ink); }

/* Round 5: tight, smooth FAQ. */
[data-theme="b"] details { border-bottom: 1px solid rgb(255 255 255 / 0.14); }
[data-theme="b"] .faq > div:last-child { padding: 6px 24px !important; }
[data-theme="b"] summary { padding: 16px 30px 16px 0; font-size: 20px; }
[data-theme="b"] details p { overflow: hidden; padding-bottom: 16px; margin-top: -4px; }
summary:focus { outline: none; } summary:focus-visible { outline: 2px solid #ffd23f; outline-offset: 2px; border-radius: 4px; }

/* Round 6: gamey glass. The game's own UI language on the glass: name-tag pills, chunky lipped buttons,
   pixel-notched panel corners, stepped section edges (the game's block transition), stage cards, a HUD. */
[data-theme="b"] body { cursor: url('media/cursor.png') 6 4, auto; }
[data-theme="b"] a, [data-theme="b"] button, [data-theme="b"] summary, [data-theme="b"] .slot { cursor: url('media/cursor-hot.png') 6 4, pointer; }
/* name-tag eyebrow (the game's orange tag) */
[data-theme="b"] .eyebrow { color: #fff; background: #ff7a3c; border: 3px solid #14101c; border-radius: 999px; padding: 2px 14px 4px; box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.25), 0 3px 0 #14101c; letter-spacing: 0.08em; font-size: 13px; text-shadow: 0 1px 0 #14101c; }
/* chunky pill buttons with a lip */
[data-theme="b"] .btn { border: 3px solid #14101c !important; box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.22), 0 4px 0 #14101c !important; }
[data-theme="b"] .btn:active { transform: translateY(3px); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22), 0 1px 0 #14101c !important; }
/* stepped section edges: each section bites into the one above with the game's block pattern */
[data-theme="b"] .sec { margin-top: -24px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' shape-rendering='crispEdges'%3E%3Crect y='16' width='48' height='8'/%3E%3Crect y='8' width='16' height='8'/%3E%3Crect x='24' y='8' width='24' height='8'/%3E%3Crect width='8' height='8'/%3E%3Crect x='32' width='8' height='8'/%3E%3C/svg%3E") 0 0 / 48px 24px repeat-x, linear-gradient(#000 0 0) 0 24px / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' shape-rendering='crispEdges'%3E%3Crect y='16' width='48' height='8'/%3E%3Crect y='8' width='16' height='8'/%3E%3Crect x='24' y='8' width='24' height='8'/%3E%3Crect width='8' height='8'/%3E%3Crect x='32' width='8' height='8'/%3E%3C/svg%3E") 0 0 / 48px 24px repeat-x, linear-gradient(#000 0 0) 0 24px / 100% 100% no-repeat; }
/* worlds as stage cards */
[data-theme="b"] .world { position: relative; }
[data-theme="b"] .lvchip { position: absolute; top: 18px; right: 18px; font: 400 14px 'Lilita One', 'Arial Black', system-ui, sans-serif; color: #14101c; background: #45d4ff; border: 2px solid #14101c; border-radius: 999px; padding: 1px 10px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2); }
[data-theme="b"] .bosstag { font: 400 11px 'Lilita One', 'Arial Black', system-ui, sans-serif; letter-spacing: 0.08em; color: #fff; background: #e0503c; border: 2px solid #14101c; border-radius: 4px; padding: 0 6px; margin-right: 8px; vertical-align: 1px; }
[data-theme="b"] .world em { color: #fff; font-weight: 800; }
/* quest log */
[data-theme="b"] .stop h3 { padding-left: 30px; position: relative; }
[data-theme="b"] .stop h3::before { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border: 3px solid #fff; border-radius: 3px; }
[data-theme="b"] .stop.done h3::before { background: #3fbf6a; border-color: #14101c; box-shadow: inset 0 0 0 3px #3fbf6a, inset 0 0 0 6px #fff; }
[data-theme="b"] .stop.done h3 { text-decoration: line-through; text-decoration-thickness: 2px; opacity: 0.85; }
[data-theme="b"] .stop.now h3::before { border-color: #ffd23f; animation: blink 1s steps(2) infinite; }
/* hero: the big slammed screenshot on the free side */
.slam { position: absolute; top: 15%; width: min(820px, 54vw); margin: 0; opacity: 0; pointer-events: none; border: 7px solid #fff; box-shadow: 10px 12px 0 rgb(20 16 28 / 0.55); background: #14101c; }
.slam[data-side="right"] { right: 5%; } .slam[data-side="left"] { left: 5%; }
.slam img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.slam::before { content: ''; position: absolute; top: -18px; left: 50%; width: 110px; height: 28px; margin-left: -55px; background: rgb(255 210 63 / 0.9); transform: rotate(-3deg); z-index: 1; }
@media (max-width: 760px) { .slam { top: auto; bottom: 30%; width: 70vw; } .slam[data-side] { left: 15%; right: auto; } }
/* HUD: level and XP bar, bottom left */
.hud { position: fixed; left: 16px; bottom: 16px; z-index: 39; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; background: rgb(20 14 26 / 0.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 2px solid rgb(255 255 255 / 0.25); border-radius: 999px; font-family: 'Lilita One', 'Arial Black', system-ui, sans-serif; color: #fff; }
.hud-lv { background: #ffd23f; color: #14101c; border: 2px solid #14101c; border-radius: 999px; padding: 2px 10px; font-size: 14px; box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.2); }
.hud-lv b { font-weight: 400; }
.hud-xp { width: 140px; height: 10px; background: rgb(0 0 0 / 0.5); border: 2px solid #14101c; border-radius: 6px; overflow: hidden; }
.hud-xp i { display: block; height: 100%; background: linear-gradient(#7dffa0 0 50%, #3fbf6a 50%); transform-origin: 0 50%; transform: scaleX(0); }
.hud-zone { font-size: 14px; letter-spacing: 0.03em; min-width: 120px; }
@media (max-width: 600px) { .hud-zone { display: none; } .hud-xp { width: 90px; } }
[data-theme="b"] #how { margin-top: 0; -webkit-mask: none; mask: none; }

/* Round 7: steps carry real assets; cards reserve their size so jumps land right. */
.card img { aspect-ratio: 62 / 88; }
[data-theme="b"] .step { padding: 0 !important; overflow: hidden; display: flex; flex-direction: column; }
.step-art { position: relative; height: 210px; overflow: hidden; background: rgb(0 0 0 / 0.25); }
.step-art > img, .step-art > video { width: 100%; height: 100%; object-fit: cover; }
.step-weapons { display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; padding: 18px; gap: 6px; height: 100%; }
.step-weapons img { image-rendering: pixelated; max-width: none; }
.step-body { padding: 18px 22px 22px; position: relative; }
.step-body .step-n { position: absolute; top: -34px; right: 18px; font-size: 56px; margin: 0; }

/* Round 8: die-cut sticker ornaments, animated pets, locked worlds, counts, quest art, calm FAQ. */
.deco { position: absolute; z-index: 2; pointer-events: none; width: auto; max-width: none; transform: rotate(var(--r, 0deg));
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(5px 7px 0 rgb(20 16 28 / 0.45)); }
.deco.round { filter: drop-shadow(5px 7px 0 rgb(20 16 28 / 0.45)); }  /* the head already has its own die-cut rim */
@media (max-width: 900px) { .deco { display: none; } .join .deco { display: block; transform: rotate(var(--r)) scale(0.6); } }
.tile-pets { inset: 26px 14px 120px !important; grid-template-columns: 1fr 1fr !important; grid-auto-rows: 1fr; }
.tile-pets img { max-width: none; image-rendering: pixelated; }
.world.locked img { filter: grayscale(1) blur(6px) brightness(0.45); }
.world.locked { position: relative; }
.lock { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 64px; height: 64px; display: grid; place-items: center;
  font: 400 40px 'Lilita One', 'Arial Black', system-ui, sans-serif; color: #14101c; background: #ffd23f; border: 3px solid #14101c; border-radius: 50%; box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.2), 0 4px 0 #14101c; }
.world.locked figcaption { opacity: 0.8; }
.counts { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin: 6px 0 22px; }
.counts div { text-align: center; padding: 14px 6px; border-radius: 16px; background: rgb(255 255 255 / 0.08); border: 1px solid rgb(255 255 255 / 0.2); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.counts b { display: block; font: 400 clamp(28px, 3vw, 40px)/1 'Lilita One', 'Arial Black', system-ui, sans-serif; color: #ffd23f; text-shadow: 0 3px 0 #14101c; }
.counts span { font: 800 13px 'Nunito', system-ui, sans-serif; color: #f1e6dc; letter-spacing: 0.04em; }
.counts .more { background: rgb(255 210 63 / 0.18); border-color: rgb(255 210 63 / 0.6); }
@media (max-width: 900px) { .counts { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 560px) { .counts { grid-template-columns: repeat(2, 1fr); } }
[data-theme="b"] .stop { padding: 0 0 18px !important; overflow: hidden; }
[data-theme="b"] .stop > :not(.stop-art) { margin-left: 18px; margin-right: 18px; }
.stop-art { position: relative; height: 120px; margin-bottom: 14px; overflow: hidden; }
.stop-art img, .stop-art video { width: 100%; height: 100%; object-fit: cover; }
.stop-art .veil { filter: grayscale(1) blur(5px) brightness(0.5); }
.stop-art .lock { width: 48px; height: 48px; font-size: 30px; top: 50%; }
.join { overflow: hidden; }
/* FAQ: no height animation (it fought the smooth scroll); the answer fades in */
details[open] p { animation: faqIn 0.25s ease-out; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

/* Phones (audit 2026-10-08): screenshot + sticker sit above the street so the heroes stay visible;
   the HUD pill would cover text, so it hides; the last count tile spans the row. */
@media (max-width: 760px) {
  .slam { top: 13% !important; bottom: auto !important; width: 80vw !important; left: 10% !important; right: auto !important; }
  .bubble { top: 41% !important; bottom: auto !important; }
}
@media (max-width: 600px) {
  .hud { display: none; }
  .counts .more { grid-column: span 2; }
}

/* Nav button sits centred in the pill: no drop below it, equal space on top, bottom and right. */
[data-theme="b"] .nav .btn-sm { box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22) !important; border-width: 2px !important; padding: 9px 18px; }
[data-theme="b"] .nav .btn-sm:hover { transform: translateY(-1px); }
[data-theme="b"] .nav { padding: 7px 7px 7px 20px; }