/* Leaflet – an unofficial, fan-made BeyondMS quest guide. Single stylesheet, no framework.
   Part 1: layout + components (token-driven). Part 2 (bottom): the Leaflet theme layer (tokens, light/dark, sticker look). */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap; src: url(fonts/nunito-latin.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-style: italic; font-weight: 400 900; font-display: swap; src: url(fonts/nunito-italic-latin.woff2) format("woff2"); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(fonts/fredoka-latin.woff2) format("woff2"); }

:root {
  color-scheme: light;
  --bg: #f5fbff; --ink: #16213c; --head-ink: #0f172a; --muted: #64748b; --muted-2: #475569;
  --card: #ffffff; --glass: rgba(255,255,255,.9); --glass-2: rgba(255,255,255,.75); --glass-border: rgba(255,255,255,.8);
  --line: #e2e8f0; --line-2: #f1f5f9; --soft: #f8fafc;
  --primary: #0ea5e9; --primary-600: #0284c7; --primary-700: #0369a1; --link: #0284c7;
  --accent-bg: #e0f2fe; --accent-ink: #075985; --ring: #38bdf8;
  --green: #059669; --green-bg: #d1fae5; --green-ink: #065f46;
  --amber: #d97706; --amber-bg: #fef3c7; --amber-ink: #92400e;
  --red: #e11d48; --red-bg: #ffe4e6; --red-ink: #9f1239;
  --violet: #7c3aed; --violet-bg: #ede9fe; --violet-ink: #5b21b6;
  --blue: #2563eb; --purple: #7c3aed;
  --shadow-soft: 0 1px 2px rgb(14 40 70 / .04), 0 8px 24px -8px rgb(14 40 70 / .12);
  --shadow-panel: 0 24px 70px -42px rgba(15,80,120,.45);
  --shadow-bar: 0 10px 30px -20px rgba(15,80,120,.35);
  --shadow-hover: 0 14px 34px -24px rgba(14,116,170,.55);
  --shadow-glow: 0 8px 20px -8px rgba(14,165,233,.7);
  --r-sm: .75rem; --r: 1rem; --r-lg: 1.35rem; --r-xl: 1.65rem;
  --font: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
  --radius: var(--r);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b18; --ink: #e2e8f0; --head-ink: #f8fafc; --muted: #94a3b8; --muted-2: #cbd5e1;
  --card: rgba(15,23,42,.82); --glass: rgba(2,6,23,.8); --glass-2: rgba(15,23,42,.75); --glass-border: rgba(255,255,255,.1);
  --line: rgba(255,255,255,.1); --line-2: rgba(255,255,255,.06); --soft: rgba(255,255,255,.04);
  --primary: #38bdf8; --primary-600: #0ea5e9; --primary-700: #7dd3fc; --link: #38bdf8;
  --accent-bg: rgba(14,165,233,.16); --accent-ink: #bae6fd; --ring: #7dd3fc;
  --green: #34d399; --green-bg: rgba(16,185,129,.16); --green-ink: #6ee7b7;
  --amber: #fbbf24; --amber-bg: rgba(245,158,11,.16); --amber-ink: #fcd34d;
  --red: #fb7185; --red-bg: rgba(244,63,94,.16); --red-ink: #fda4af;
  --violet: #a78bfa; --violet-bg: rgba(139,92,246,.18); --violet-ink: #c4b5fd;
  --blue: #60a5fa; --purple: #a78bfa;
  --shadow-soft: 0 1px 2px rgb(0 0 0 / .3), 0 10px 28px -12px rgb(0 0 0 / .6);
  --shadow-panel: 0 24px 70px -42px rgba(0,0,0,.8);
  --shadow-hover: 0 14px 34px -20px rgba(56,189,248,.35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; }
/* sky backdrop: soft mesh + clouds (light) / night sky with stars (dark) — drawn in CSS, no image assets */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 45% at 12% 0%, rgb(56 189 248 / .28), transparent 70%),
    radial-gradient(50% 40% at 88% 6%, rgb(125 211 252 / .32), transparent 70%),
    radial-gradient(70% 30% at 50% 108%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(30% 14% at 8% 96%, rgba(255,255,255,.9), transparent 70%),
    radial-gradient(30% 14% at 92% 94%, rgba(255,255,255,.9), transparent 70%),
    linear-gradient(180deg, #cfeaff 0%, #e6f5ff 28%, #f5fbff 60%, #eef8ff 100%); }
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1px 1px at 120px 80px, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 170px 150px, rgba(186,230,253,.7), transparent 60%),
    radial-gradient(1px 1px at 60px 170px, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(60% 50% at 15% 0%, rgb(14 165 233 / .22), transparent 70%),
    radial-gradient(50% 40% at 85% 10%, rgb(37 99 235 / .22), transparent 70%),
    radial-gradient(60% 40% at 50% 110%, rgb(2 132 199 / .2), transparent 70%),
    linear-gradient(180deg, #0a1633 0%, #070b18 55%);
  background-size: 200px 200px, 200px 200px, 200px 200px, 200px 200px, auto, auto, auto, auto; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; }
code { background: var(--accent-bg); color: var(--accent-ink); padding: 1px 6px; border-radius: 6px; font-size: .86em; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--head-ink); letter-spacing: -.015em; }
h1 { font-size: 2.4rem; font-weight: 900; line-height: 1.08; margin: .4rem 0 .5rem; }
h2 { font-size: 1.35rem; font-weight: 800; margin: 1.8rem 0 .7rem; }
h3 { font-size: 1.05rem; font-weight: 800; margin: 1.2rem 0 .4rem; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
main.wrap { padding-top: 10px; padding-bottom: 56px; min-height: 70vh; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.lead { font-size: 1.08rem; color: var(--muted-2); max-width: 54rem; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .22em; color: var(--primary-700); margin: 0; }
.eyebrow::before { content: "✦"; color: var(--primary); letter-spacing: 0; }
.grad { background: linear-gradient(90deg, #0ea5e9, #38bdf8 55%, #6366f1); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- buttons ---------- */
button, .btn, .more { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border: 0; border-radius: var(--r-sm);
  background: var(--primary); color: #fff; font: 800 .78rem/1 var(--font); text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
  box-shadow: var(--shadow-glow); transition: background-color .2s, transform .1s, box-shadow .2s; text-decoration: none; }
:root[data-theme="dark"] button, :root[data-theme="dark"] .btn { color: #04121f; }
button:hover, .btn:hover, .more:hover { background: var(--primary-600); color: #fff; text-decoration: none; }
button:active, .btn:active { transform: scale(.98); }
.btn-ghost { background: var(--glass); color: var(--head-ink) !important; border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); backdrop-filter: blur(12px); }
.btn-ghost:hover { background: var(--card); color: var(--primary-600) !important; }
.btn-sm { height: 38px; padding: 0 14px; font-size: .72rem; }
button.linkish { background: none; box-shadow: none; color: var(--link); height: auto; padding: 0 4px; font-weight: 800; font-size: .7rem; }
button.linkish:hover { background: none; color: var(--primary-600); text-decoration: underline; }

/* ---------- header (floating glass bar) ---------- */
.site-header { position: sticky; top: 0; z-index: 40; padding: 12px 12px 0; }
.header-bar { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 8px 10px 8px 14px; border-radius: var(--r-lg);
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-bar); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); flex-wrap: wrap; max-width: 1500px; }
.brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--head-ink); }
.brand:hover { text-decoration: none; color: var(--head-ink); }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; font: 900 1.05rem var(--font-head); box-shadow: 0 10px 30px -10px rgb(14 165 233 / .6); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: 800 1.15rem/1 var(--font-head); letter-spacing: -.01em; }
.brand-name span { color: var(--primary); }
.brand-sub { font-size: 9.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; color: var(--primary-700); margin-top: 4px; }
.main-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-left: 10px; }
.main-nav a { position: relative; padding: 8px 0; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--muted-2); }
.main-nav a:hover { color: var(--primary-600); text-decoration: none; }
.main-nav a.on { color: var(--primary-600); }
.main-nav a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--primary); }
.header-actions { display: flex; align-items: center; gap: 8px; }
.theme-toggle { width: 40px; height: 40px; padding: 0; border-radius: 999px; background: var(--soft); color: var(--muted-2) !important; border: 1px solid var(--line); box-shadow: none; font-size: 1rem; }
.theme-toggle:hover { background: var(--accent-bg); color: var(--primary-600) !important; }
.theme-toggle .i-moon { display: none; } :root[data-theme="dark"] .theme-toggle .i-sun { display: none; } :root[data-theme="dark"] .theme-toggle .i-moon { display: inline; }
.nav-toggle { display: none; margin-left: auto; width: 42px; padding: 0; background: var(--soft); color: var(--head-ink) !important; border: 1px solid var(--line); box-shadow: none; font-size: 1.1rem; }
.search-box { position: relative; margin-left: auto; flex: 0 1 300px; }
.search-box input { width: 100%; height: 40px; padding: 0 14px 0 36px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--soft) no-repeat 12px 50%/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); color: var(--ink); font: 500 .9rem var(--font); }
.search-box input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px rgb(56 189 248 / .25); background-color: var(--card); }
.search-dd { position: absolute; top: calc(100% + 8px); right: 0; left: auto; width: max(100%, 380px); background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-panel), var(--shadow-soft); overflow: hidden; backdrop-filter: blur(24px); }
:root[data-theme="dark"] .search-dd { background: #0b1324; }
.dd-item { display: grid; grid-template-columns: 74px 1fr; gap: 0 10px; padding: 9px 12px; color: var(--ink); border-bottom: 1px solid var(--line-2); }
.dd-item:hover, .dd-item.sel { background: var(--accent-bg); text-decoration: none; color: var(--ink); }
.dd-name { font-weight: 700; color: var(--head-ink); }
.dd-extra { grid-column: 2; font-size: .78rem; color: var(--muted); }
.dd-type { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; font-weight: 900; padding: 3px 6px; border-radius: 999px; background: var(--line-2); color: var(--muted-2); align-self: start; text-align: center; }
.t-quest { background: var(--accent-bg); color: var(--accent-ink); } .t-npc { background: var(--violet-bg); color: var(--violet-ink); }
.t-monster { background: var(--red-bg); color: var(--red-ink); } .t-item { background: var(--green-bg); color: var(--green-ink); }
.t-map { background: #e0e7ff; color: #3730a3; } .t-series { background: var(--amber-bg); color: var(--amber-ink); }
:root[data-theme="dark"] .t-map { background: rgba(99,102,241,.2); color: #c7d2fe; }
.dd-all, .dd-empty { display: block; padding: 10px 12px; font-size: .74rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- footer ---------- */
.site-footer { margin-top: 48px; border-top: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(24px); font-size: .88rem; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.6fr; gap: 28px; padding: 36px 20px 20px; }
.footer-grid h4 { font: 900 .72rem var(--font); text-transform: uppercase; letter-spacing: .14em; color: var(--head-ink); margin: 0 0 12px; }
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { margin: 0 0 8px; }
.footer-grid a { color: var(--muted-2); }
.footer-grid a:hover { color: var(--primary-600); }
.footer-brand .brand-name { font-size: 1.25rem; color: var(--primary-600); }
.footer-legal { border-top: 1px solid var(--line); padding: 16px 20px 26px; font-size: .8rem; line-height: 1.6; }
.footer-legal p { margin: 0 0 6px; }

/* ---------- panels / cards (shared) ---------- */
.panel, .server-box, .notice, .filters, .desc, .questlog, section.gaps, .bms-notes, .summary,
.quest-main > section:not(.walkthrough), .map-grid > div > section, .infobox {
  background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-panel), var(--shadow-soft); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }

/* ---------- home ---------- */
.hero { position: relative; margin: 18px 0 8px; padding: 46px 40px 38px; border-radius: var(--r-xl); overflow: hidden;
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-panel); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 70% at 100% 0%, rgb(56 189 248 / .25), transparent 70%), radial-gradient(45% 60% at 0% 100%, rgb(186 230 253 / .45), transparent 70%); }
:root[data-theme="dark"] .hero::before { background: radial-gradient(55% 70% at 100% 0%, rgb(14 165 233 / .25), transparent 70%), radial-gradient(45% 60% at 0% 100%, rgb(37 99 235 / .2), transparent 70%); }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); margin: 14px 0 12px; max-width: 16ch; }
.hero .lead { max-width: 46rem; }
.hero-search, .hero-level { display: flex; gap: 10px; max-width: 680px; margin: 18px 0 0; flex-wrap: wrap; align-items: center; }
.hero-search input { flex: 1; min-width: 220px; height: 52px; padding: 0 16px 0 44px; font: 500 1.02rem var(--font); border-radius: var(--r); border: 1px solid var(--line); color: var(--ink);
  background: var(--card) no-repeat 16px 50%/18px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230ea5e9' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); box-shadow: var(--shadow-soft); }
.hero-search input:focus, .hero-level input:focus, .filters input:focus, .filters select:focus, .filter-input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px rgb(56 189 248 / .25); }
.hero-search button { height: 52px; padding: 0 26px; font-size: .82rem; }
.hero-level { font-weight: 700; color: var(--muted-2); }
.hero-level input { width: 84px; height: 42px; padding: 0 10px; font: 800 1.05rem var(--font); border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--head-ink); margin: 0 4px; }
.hero-level button { background: var(--glass); color: var(--head-ink); border: 1px solid var(--line); box-shadow: var(--shadow-soft); }
.hero-level button:hover { background: var(--card); color: var(--primary-600); }
.stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 16px 0 6px; padding: 10px; border-radius: var(--r-lg);
  background: var(--glass-2); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); backdrop-filter: blur(16px); }
.stats div { background: var(--glass-2); border-radius: 1.1rem; padding: 18px 10px; text-align: center; }
.stats b { display: block; font: 900 1.65rem/1.1 var(--font-head); color: var(--primary-600); }
.stats div:nth-child(2) b { color: var(--violet); } .stats div:nth-child(3) b { color: var(--amber); } .stats div:nth-child(4) b { color: var(--red); }
.stats div:nth-child(5) b { color: var(--green); } .stats div:nth-child(6) b { color: var(--blue); }
.stats span { color: var(--muted); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.card { position: relative; display: flex; flex-direction: column; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; color: var(--ink);
  transition: transform .2s, border-color .2s, box-shadow .2s; }
:root[data-theme="dark"] .card { border-color: rgba(255,255,255,.1); }
.card:hover { transform: translateY(-4px); border-color: #bae6fd; box-shadow: var(--shadow-hover); text-decoration: none; color: var(--ink); }
:root[data-theme="dark"] .card:hover { border-color: rgba(56,189,248,.45); }
.card b { font: 800 1.08rem/1.25 var(--font-head); color: var(--head-ink); }
.card:hover b { color: var(--primary-600); }
.card-lv { align-self: flex-start; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: var(--primary-600); }
.card-sum { font-size: .86rem; color: var(--muted); line-height: 1.55; }
.card::after { content: "Open guide →"; margin-top: auto; padding-top: 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: var(--primary-600); }
.cards.sections .card::after { content: "Explore →"; }
.card.soon { opacity: .7; } .card.soon::after { content: "Coming soon"; color: var(--muted); }
.server-box { padding: 6px 28px 18px; margin-top: 30px; }
.server-box ul { padding-left: 1.1rem; } .server-box li { margin: 7px 0; }
.server-box li::marker { color: var(--primary); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 34px 0 12px; }
.section-head h2 { margin: 4px 0 0; font-size: 1.9rem; font-weight: 900; }

/* ---------- breadcrumbs, tags, badges ---------- */
.crumbs { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); margin: 16px 0 4px; }
.crumbs a { color: var(--primary-700); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted-2); vertical-align: middle; line-height: 1.5; white-space: nowrap; }
.t-green { background: var(--green-bg); color: var(--green-ink); border-color: transparent; } .t-red { background: var(--red-bg); color: var(--red-ink); border-color: transparent; }
.t-amber { background: var(--amber-bg); color: var(--amber-ink); border-color: transparent; }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; padding: 5px 11px; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--muted-2); }
.b-guide, .b-ver { background: var(--green-bg); color: var(--green-ink); border-color: transparent; } .b-auto { background: var(--soft); color: var(--muted-2); }
.b-rep { background: var(--accent-bg); color: var(--accent-ink); border-color: transparent; } .b-event, .b-title { background: var(--amber-bg); color: var(--amber-ink); border-color: transparent; }
.b-custom { background: var(--violet-bg); color: var(--violet-ink); border-color: transparent; }
.lv { font-size: 10.5px; font-weight: 900; color: var(--accent-ink); background: var(--accent-bg); padding: 2px 8px; border-radius: 999px; white-space: nowrap; letter-spacing: .02em; }
.c-blue { color: var(--blue); font-weight: 600; } .c-red { color: var(--red); font-weight: 600; } .c-purple { color: var(--purple); } .c-green { color: var(--green); } .c-bold { font-weight: 700; }

/* ---------- entity chips ---------- */
.ent { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; font-weight: 600; }
.ent .ico, img.ico { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; }
.ico-inline { width: 24px; height: 24px; vertical-align: middle; object-fit: contain; }
.route { display: inline-block; font-size: .82rem; color: var(--muted); margin-top: 4px; padding: 4px 10px; background: var(--soft); border: 1px solid var(--line-2); border-radius: var(--r-sm); }
.route .ent { font-weight: 600; }

/* ---------- guide pages (quest / boss) ---------- */
.quest { display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "head head" "main info"; gap: 0 26px; }
.quest-head { grid-area: head; position: relative; overflow: hidden; margin: 6px 0 22px; padding: 28px 30px 24px; border-radius: var(--r-xl);
  background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-panel); }
.quest-head::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(50% 120% at 100% 0%, rgb(56 189 248 / .28), transparent 70%), radial-gradient(40% 90% at 0% 100%, rgb(186 230 253 / .5), transparent 70%); }
:root[data-theme="dark"] .quest-head::before { background: radial-gradient(50% 120% at 100% 0%, rgb(14 165 233 / .25), transparent 70%), radial-gradient(40% 90% at 0% 100%, rgb(37 99 235 / .18), transparent 70%); }
.quest-head h1 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 6px 0 14px; }
.quest-head .badges { margin: 0; }
.quest-main { grid-area: main; min-width: 0; }
.quest-main > section:not(.walkthrough) { padding: 4px 24px 18px; margin: 0 0 18px; }
.quest-main > section > h2:first-child, .quest-main > section > .wt-head:first-child h2 { margin-top: 18px; }
.quest-main > p.source { margin: 8px 6px; }
.infobox { grid-area: info; align-self: start; position: sticky; top: 96px; padding: 14px; font-size: .9rem; }
.infobox table { width: 100%; border-collapse: collapse; }
.infobox th { text-align: left; color: var(--muted); font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; padding: 8px 10px 8px 2px; vertical-align: top; width: 92px; }
.infobox td { padding: 7px 0; border-bottom: 1px solid var(--line-2); color: var(--head-ink); }
.infobox tr:last-child td { border-bottom: 0; }
.infobox .sub { font-size: .82rem; }
.ib-img { text-align: center; padding: 14px 10px; border-radius: var(--r); margin-bottom: 8px;
  background: radial-gradient(70% 90% at 50% 100%, rgba(255,255,255,.9), transparent 70%), linear-gradient(180deg, #bae6fd, #e0f2fe 60%, #f0f9ff); border: 1px solid var(--glass-border); }
:root[data-theme="dark"] .ib-img { background: radial-gradient(70% 90% at 50% 100%, rgba(56,189,248,.18), transparent 70%), linear-gradient(180deg, #0c2a45, #0b1730); }
.ib-img img { max-height: 130px; image-rendering: pixelated; }
.ib-map { margin: 12px 0 0; text-align: center; font-size: .78rem; color: var(--muted); }
.ib-map img { border-radius: var(--r-sm); border: 1px solid var(--line); }
.summary { font-size: 1.04rem; padding: 14px 22px; margin: 0 0 18px; position: relative; overflow: hidden; }
.summary::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #38bdf8, #0284c7); }
.summary p { margin: .35rem 0; }
.reqs { padding-left: 1.1rem; } .reqs li { margin: 6px 0; } .reqs li::marker { color: var(--primary); }

/* tables (data tables stay tables: drops, rewards, requirements) */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; font-size: .92rem; }
.tbl th, .tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.tbl tr:last-child > td, .tbl tr:last-child > th { border-bottom: 0; }
.tbl thead th, .tbl:not(.rewards) tr:first-child th { background: var(--soft); font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.tbl tbody tr { transition: background-color .15s; }
.tbl tbody tr:hover { background: var(--accent-bg); }
.tbl.rewards th { width: 150px; text-transform: uppercase; font-size: 10.5px; font-weight: 900; letter-spacing: .1em; color: var(--muted); background: var(--soft); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }
ul.src { margin: 4px 0 0; padding-left: 1rem; font-size: .88rem; } ul.src li { margin: 3px 0; } .tbl ul.src { margin: 0; }

/* walkthrough: steps as cards with checklist */
.walkthrough { margin: 6px 0 18px; }
.wt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 4px; }
.wt-head h2 { margin: 0; font-size: 1.6rem; font-weight: 900; }
.progress { display: flex; align-items: center; gap: 10px; font-size: .78rem; font-weight: 800; color: var(--muted-2); padding: 6px 12px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 999px; box-shadow: var(--shadow-soft); }
.progress .bar { width: 140px; height: 8px; background: var(--line); border-radius: 99px; overflow: hidden; }
.progress .bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #38bdf8, #10b981); transition: width .3s; }
ol.steps { list-style: none; counter-reset: step; padding: 0; margin: 14px 0; }
ol.steps > li { counter-increment: step; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); margin: 10px 0; padding: 16px 18px 16px 64px; transition: border-color .2s, box-shadow .2s, opacity .2s; }
:root[data-theme="dark"] ol.steps > li { border-color: rgba(255,255,255,.1); }
ol.steps > li:hover { border-color: #bae6fd; box-shadow: var(--shadow-hover); }
:root[data-theme="dark"] ol.steps > li:hover { border-color: rgba(56,189,248,.4); }
ol.steps > li::before { content: counter(step); position: absolute; left: 16px; top: 15px; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(135deg, #38bdf8, #0284c7); color: #fff; font: 900 .95rem var(--font-head); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 18px -8px rgba(14,165,233,.8); }
ol.steps > li.done { opacity: .62; }
ol.steps > li.done::before { content: "✓"; background: linear-gradient(135deg, #34d399, #059669); box-shadow: 0 8px 18px -8px rgba(5,150,105,.8); }
ol.steps label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
ol.steps input[type=checkbox] { width: 20px; height: 20px; margin-top: 4px; flex: none; accent-color: var(--primary); cursor: pointer; }
ol.steps .step-body ul, ol.steps .step-body ol { margin: 6px 0; }
ol.steps .step-body p { margin: 0 0 .45rem; }
.step-title { display: block; margin-bottom: 4px; font: 800 1.02rem var(--font-head); color: var(--head-ink); }
/* screenshots in frames */
.shots { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 2px 32px; }
figure.shot { margin: 0; max-width: 100%; }
figure.shot a, .gallery figure a { display: block; padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-soft); transition: transform .2s, box-shadow .2s; }
figure.shot a:hover, .gallery figure a:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
figure.shot img { display: block; max-height: 280px; width: auto; cursor: zoom-in; border-radius: calc(var(--r) - 5px); }
.gallery img { display: block; width: 100%; cursor: zoom-in; border-radius: calc(var(--r) - 5px); }
.rewards + .shots, section > .shots { margin-left: 0; }
figcaption { font-size: .78rem; color: var(--muted); margin-top: 6px; max-width: 520px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gallery figure { margin: 0; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(2,6,23,.9); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 20px 60px; }
.lightbox[hidden] { display: none; }
.lightbox figure { margin: 0; text-align: center; max-width: 100%; }
.lightbox img { max-width: 100%; max-height: calc(100vh - 90px); border-radius: var(--r); box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.lightbox figcaption { color: #e2e8f0; margin: 10px auto 0; font-size: .92rem; max-width: 760px; }
.lightbox button { position: absolute; background: rgba(255,255,255,.12); color: #fff; font-size: 1.8rem; height: 46px; width: 46px; padding: 0; border-radius: 999px; box-shadow: none; }
.lightbox button:hover { background: rgba(255,255,255,.22); }
.lb-close { top: 16px; right: 16px; } .lb-prev { left: 12px; top: 50%; } .lb-next { right: 12px; top: 50%; }
body.lb-open { overflow: hidden; }
.tips ul { padding-left: 1.1rem; } .tips li { margin: 7px 0; } .tips li::marker { content: "💡 "; }
.quest-main > section.tips { background: linear-gradient(135deg, rgba(254,243,199,.75), rgba(255,255,255,.9)); }
:root[data-theme="dark"] .quest-main > section.tips { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(2,6,23,.8)); }
.bms-notes { padding: 4px 24px 14px; }
.quest-main > section.bms-notes { background: linear-gradient(135deg, rgba(224,242,254,.9), rgba(255,255,255,.9)); }
:root[data-theme="dark"] .quest-main > section.bms-notes { background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(2,6,23,.8)); }
.questlog { margin: 0 0 18px; padding: 14px 22px; }
.questlog summary { cursor: pointer; font: 800 1rem var(--font-head); color: var(--head-ink); }
.questlog h4 { margin: .9rem 0 .2rem; color: var(--muted); font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font); }
.series-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 18px 0 0; padding: 14px 18px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); font-weight: 600; }
.source { margin-top: 1.2rem; }

/* ---------- entity pages ---------- */
.ent-head { display: flex; gap: 20px; align-items: center; margin: 10px 0 6px; padding: 20px 24px; border-radius: var(--r-xl); background: var(--glass); border: 1px solid var(--glass-border); box-shadow: var(--shadow-panel); }
.ent-head h1 { margin: 0 0 6px; }
.ent-img { max-height: 160px; border-radius: var(--r); padding: 10px; background: linear-gradient(180deg, #bae6fd, #f0f9ff); border: 1px solid var(--glass-border); image-rendering: pixelated; }
:root[data-theme="dark"] .ent-img { background: linear-gradient(180deg, #0c2a45, #0b1730); }
.icon-big { width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.stats-line { display: flex; gap: 8px 16px; flex-wrap: wrap; }
.desc { padding: 12px 18px; }
ul.cols { columns: 2 260px; padding-left: 1.1rem; } ul.cols li { break-inside: avoid; margin: 4px 0; }
ul.qlist { padding-left: 1.1rem; } ul.qlist li { margin: 5px 0; }
ul.drops { columns: 3 220px; padding-left: 0; list-style: none; } ul.drops li { break-inside: avoid; margin: 3px 0; }
.map-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
.minimap { margin: 1.8rem 0 0; text-align: center; }
.minimap img { border: 1px solid var(--line); border-radius: var(--r); background: #000; box-shadow: var(--shadow-soft); }
.ent-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.ent-list li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); font-size: .9rem; transition: border-color .2s, box-shadow .2s; }
.ent-list li:hover { border-color: #bae6fd; box-shadow: var(--shadow-hover); }
.ent-list li[hidden] { display: none; }
.ent-list a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.ent-list .muted { font-size: .78rem; text-align: right; }
ol.series-list { padding: 0; list-style: none; counter-reset: s; display: grid; gap: 8px; }
ol.series-list li { counter-increment: s; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); font-weight: 700; }
ol.series-list li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent-bg); color: var(--accent-ink); font: 900 .8rem var(--font-head); }

/* ---------- filters & forms ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-end; padding: 16px 18px; margin: 14px 0; }
.filters label { display: flex; flex-direction: column; font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); gap: 5px; }
.filters label.chk { flex-direction: row; align-items: center; gap: 8px; font-size: .84rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--muted-2); padding-bottom: 9px; }
.filters label.chk input { accent-color: var(--primary); width: 17px; height: 17px; }
.filters input, .filters select, .filter-input { height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: 500 .92rem var(--font); }
.filters input[type=number] { width: 90px; }
.level-form label.big input { width: 120px; height: 52px; font: 900 1.6rem var(--font-head); color: var(--primary-600); }
.filter-input { width: 100%; max-width: 440px; margin: 8px 0 14px; padding-left: 36px; background: var(--card) no-repeat 12px 50%/15px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.5' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.result-count { font-weight: 700; color: var(--muted-2); }
.more { margin: 18px auto; display: flex; }
.type-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 16px; padding: 5px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r); box-shadow: var(--shadow-soft); width: fit-content; max-width: 100%; }
.type-tabs button { height: 34px; background: transparent; color: var(--muted-2); box-shadow: none; padding: 0 14px; font-size: .7rem; }
.type-tabs button:hover { background: var(--accent-bg); color: var(--accent-ink); }
.type-tabs button.on { background: var(--primary); color: #fff; box-shadow: var(--shadow-glow); }
ul.sres { list-style: none; padding: 0; display: grid; gap: 8px; }
ul.sres li { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); }
ul.sres li a { font-weight: 700; }
.notice { padding: 16px 20px; }

/* quest browser: the sortable table renders as a card grid; the header becomes a "sort by" bar */
#qtable { display: block; background: none; border: 0; border-radius: 0; overflow: visible; }
#qtable thead { display: block; margin: 0 0 12px; }
#qtable thead tr { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 5px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--r); box-shadow: var(--shadow-soft); width: fit-content; max-width: 100%; }
#qtable thead tr::before { content: "Sort by"; font-size: 10.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: 0 6px 0 8px; }
#qtable thead th { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent !important; cursor: pointer; font-size: 10.5px; }
#qtable thead th:hover { background: var(--accent-bg) !important; color: var(--accent-ink); }
#qtable thead th.num { text-align: left !important; }
#qtable tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
#qtable tbody tr { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name lv" "region region" "series series" "npc npc"; gap: 2px 10px; align-content: start;
  padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .2s, border-color .2s, box-shadow .2s; }
#qtable tbody tr:hover { transform: translateY(-3px); border-color: #bae6fd; box-shadow: var(--shadow-hover); background: var(--card); }
:root[data-theme="dark"] #qtable tbody tr { border-color: rgba(255,255,255,.1); }
#qtable tbody td { padding: 0; border: 0; font-size: .84rem; color: var(--muted); }
#qtable tbody td:nth-child(1) { grid-area: name; font-size: .96rem; color: var(--ink); }
#qtable tbody td:nth-child(1) a { font: 800 1.02rem/1.3 var(--font-head); color: var(--head-ink); margin-right: 4px; }
#qtable tbody tr:hover td:nth-child(1) a { color: var(--primary-600); }
#qtable tbody td:nth-child(2) { grid-area: lv; align-self: start; font-size: 10.5px; font-weight: 900; color: var(--accent-ink); background: var(--accent-bg); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
#qtable tbody td:nth-child(2)::before { content: "Lv "; }
#qtable tbody td:nth-child(3) { grid-area: region; margin-top: 6px; }
#qtable tbody td:nth-child(3)::before { content: "📍 "; }
#qtable tbody td:nth-child(4) { grid-area: series; }
#qtable tbody td:nth-child(4):not(:empty)::before { content: "📜 "; }
#qtable tbody td:nth-child(5) { grid-area: npc; }
#qtable tbody td:nth-child(5):not(:empty)::before { content: "💬 "; }
/* level finder results as cards */
.lvlist { padding-left: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.lvlist li { list-style: none; margin: 0 !important; padding: 14px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); transition: transform .2s, border-color .2s, box-shadow .2s; }
.lvlist li:hover { transform: translateY(-3px); border-color: #bae6fd; box-shadow: var(--shadow-hover); }
.lvlist li > a:first-child { font: 800 1rem var(--font-head); color: var(--head-ink); margin-right: 4px; }
.lvlist li > .muted { display: block; font-size: .8rem; margin-top: 6px; }

/* ---------- boss prequests ---------- */
.check { display: inline; background: var(--amber-bg); border: 1px dashed var(--amber); border-radius: 6px; padding: 1px 6px; font-size: .88em; color: var(--ink); }
.check b { color: var(--amber-ink); }
.badge.b-gap { background: var(--amber-bg); color: var(--amber-ink); border: 1px solid transparent; }
.badge.b-boss { background: var(--red-bg); color: var(--red-ink); border-color: transparent; } .badge.b-pq { background: var(--accent-bg); color: var(--accent-ink); border-color: transparent; } .badge.b-access { background: var(--green-bg); color: var(--green-ink); border-color: transparent; }
section.gaps { padding: 4px 24px 16px; margin: 0 0 18px; }
.quest-main > section.gaps, body section.gaps { background: linear-gradient(135deg, rgba(254,243,199,.8), rgba(255,255,255,.9)); }
:root[data-theme="dark"] section.gaps { background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(2,6,23,.8)) !important; }
section.gaps details { margin: 8px 0; padding: 8px 12px; background: var(--glass-2); border-radius: var(--r-sm); }
section.gaps summary { cursor: pointer; }
.t-gap { background: var(--amber-bg); color: var(--amber-ink); border-color: transparent; }
.t-boss { background: var(--red-bg); color: var(--red-ink); }
.boss-card .card-img { height: 64px; width: auto; align-self: flex-start; object-fit: contain; image-rendering: pixelated; margin-bottom: 6px; }
.boss-card::after { content: "View prequest →"; }
.boss-body table { border-collapse: separate; border-spacing: 0; background: var(--card); margin: 10px 0; font-size: .9rem; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.boss-body th, .boss-body td { border-bottom: 1px solid var(--line-2); padding: 8px 12px; }
.boss-body th { background: var(--soft); font-size: 10.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.boss-body pre { background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px; overflow-x: auto; }
.progression td, .progression th { white-space: normal; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .main-nav { gap: 12px; }
  .search-box { flex-basis: 220px; }
}
@media (max-width: 960px) {
  .quest { grid-template-columns: 1fr; grid-template-areas: "head" "info" "main"; }
  .infobox { position: static; margin-bottom: 18px; }
  .ib-map { display: none; }
  .ib-img img { max-height: 90px; }
  .map-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .header-actions { order: 2; margin-left: auto; }
  .main-nav { display: none; order: 4; width: 100%; flex-direction: column; align-items: stretch; gap: 0; margin: 4px 0 6px; padding-top: 6px; border-top: 1px solid var(--line); }
  .main-nav a { padding: 11px 8px; border-radius: 10px; }
  .main-nav a.on::after { display: none; } .main-nav a.on { background: var(--accent-bg); }
  body.nav-open .main-nav { display: flex; }
  .search-box { flex: 1 1 100%; margin: 0 0 4px; order: 3; }
  .search-dd { width: 100%; }
  .header-actions .btn { display: none; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 14px; }
  .site-header { padding: 8px 8px 0; }
  h1 { font-size: 1.8rem; }
  .hero { padding: 28px 20px 24px; border-radius: var(--r-lg); }
  .quest-head { padding: 20px 18px; border-radius: var(--r-lg); }
  .quest-main > section:not(.walkthrough) { padding: 2px 16px 14px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tbl { font-size: .84rem; } .tbl th, .tbl td { padding: 8px; }
  ol.steps > li { padding: 14px 14px 14px 54px; }
  ol.steps > li::before { left: 12px; width: 30px; height: 30px; }
  .shots { margin-left: 0; }
  figure.shot img { max-height: 210px; }
  .lightbox { padding: 10px; }
  .footer-grid { grid-template-columns: 1fr; gap: 18px; }
  .progress .bar { width: 90px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }
/* page headers (list / tool pages) */
.page-head { text-align: center; margin: 26px auto 18px; max-width: 860px; }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3.1rem); margin: 10px 0 8px; }
.page-head .lead, .page-head .muted { margin: 0 auto; }
.page-head .eyebrow::before { display: none; }

/* =====================================================================================================
   LEAFLET THEME — bright, friendly maple palette; sticker cards with offset shadows; four-colour stripe;
   sky title band with grass; coloured step squares; pixel-grass footer edge. Fredoka headings, Nunito text.
   Light + dark (system default, manual toggle). Original CSS/SVG only.
   ===================================================================================================== */
:root {
  color-scheme: light;
  --maple: #e4572e; --sun: #f3a712; --leaf: #5bb043; --sky: #3fa7e8; --plum: #8a5cd6;
  --bg: #fffaf2; --ink: #2d2a32; --head-ink: #231f29; --muted: #6b6473; --muted-2: #4f4857;
  --card: #ffffff; --glass: #ffffff; --glass-2: #fff6e8; --glass-border: #2d2a32; --soft: #fff4e2;
  --line: #e8ddcc; --line-2: #f1e9dc; --outline: #2d2a32; --sticker: #2d2a32;
  --primary: #e4572e; --primary-600: #c8431d; --primary-700: #a83616; --link: #b53a16; --ring: #f3a712;
  --accent-bg: #ffe8dc; --accent-ink: #9c3214;
  --btn-bg: #c8431d; --btn-ink: #ffffff; --btn-alt: #f3a712; --btn-alt-ink: #2d2a32;
  --lv-bg: #2f7d22; --lv-ink: #ffffff;
  --band: #1f78b4; --band-2: #3fa7e8; --grass: #5bb043; --grass-2: #79c95f; --dirt: #8a5a2b; --cloud: #ffffff;
  --green: #2f7d22; --green-bg: #e3f5da; --green-ink: #2a6a1e;
  --amber: #b77600; --amber-bg: #fff0c7; --amber-ink: #7d5200;
  --red: #c8431d; --red-bg: #ffe2d8; --red-ink: #9c3214;
  --violet: #7346c4; --violet-bg: #efe6ff; --violet-ink: #5a33a0; --blue: #1f6fa8; --purple: #7346c4;
  --pastel-1: #ffe2d8; --pastel-2: #fff0c7; --pastel-3: #e3f5da; --pastel-4: #dff0fc; --pastel-5: #efe6ff; --pastel-6: #ffffff;
  --tips-bg: #fff8de; --notes-bg: #eaf6ff; --gaps-bg: #fff3d1;
  --shadow-soft: 3px 3px 0 var(--sticker); --shadow-panel: 4px 4px 0 var(--sticker); --shadow-bar: none;
  --shadow-hover: 6px 6px 0 var(--maple); --shadow-glow: 3px 3px 0 var(--sticker);
  --r-sm: 8px; --r: 10px; --r-lg: 12px; --r-xl: 16px;
  --font: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Fredoka", "Nunito", ui-rounded, system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #17151c; --ink: #ebe6f0; --head-ink: #ffffff; --muted: #aaa2b4; --muted-2: #d0c8d9;
  --card: #25212c; --glass: #25212c; --glass-2: #2d2935; --glass-border: #0b0a0e; --soft: #2d2935;
  --line: #3b3545; --line-2: #322d3b; --outline: #0b0a0e; --sticker: #050407;
  --primary: #ff7a52; --primary-600: #ff8a5c; --primary-700: #ffb79c; --link: #ffa07a; --ring: #f3a712;
  --accent-bg: rgba(255,122,82,.16); --accent-ink: #ffc2a8;
  --btn-bg: #ff8a5c; --btn-ink: #1d1a21; --btn-alt: #f3a712; --btn-alt-ink: #1d1a21;
  --lv-bg: #5bb043; --lv-ink: #10200b;
  --band: #1b3f66; --band-2: #2a5d8f; --grass: #3f8a2e; --grass-2: #4f9f3b; --dirt: #5e3d1e; --cloud: rgba(255,255,255,.75);
  --green: #79d65f; --green-bg: rgba(91,176,67,.18); --green-ink: #a6e690;
  --amber: #ffc857; --amber-bg: rgba(243,167,18,.16); --amber-ink: #ffd98a;
  --red: #ff8a6a; --red-bg: rgba(228,87,46,.18); --red-ink: #ffb39d;
  --violet: #b9a0ff; --violet-bg: rgba(138,92,214,.2); --violet-ink: #d2c2ff; --blue: #7cc4f5; --purple: #b9a0ff;
  --pastel-1: #3a2722; --pastel-2: #3a3220; --pastel-3: #253423; --pastel-4: #1f3040; --pastel-5: #2e2640; --pastel-6: #25212c;
  --tips-bg: #2f2a1c; --notes-bg: #1c2a38; --gaps-bg: #33291a;
  --shadow-hover: 6px 6px 0 var(--maple);
}
body { font-size: 16.5px; font-variant-ligatures: common-ligatures; }
body::before, :root[data-theme="dark"] body::before { background:
  radial-gradient(circle at 1px 1px, rgba(45,42,50,.09) 1px, transparent 1.5px) 0 0/18px 18px,
  linear-gradient(180deg, #e7f5ff 0, var(--bg) 420px); background-size: 18px 18px, auto; }
:root[data-theme="dark"] body::before { background:
  radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 1.5px) 0 0/18px 18px,
  linear-gradient(180deg, #1d2440 0, var(--bg) 420px); background-size: 18px 18px, auto; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 600; letter-spacing: 0; }
h1 { font-weight: 700; }
a:hover { color: var(--primary-700); }
:root[data-theme="dark"] a:hover { color: #ffd2bf; }
code { background: var(--accent-bg); color: var(--accent-ink); }
/* small labels: body font, bold uppercase */
.eyebrow { font: 900 .74rem/1.4 var(--font); letter-spacing: .12em; text-transform: uppercase; color: var(--link); }
.eyebrow::before { content: "◆"; color: var(--sun); font-size: .7rem; letter-spacing: 0; }
.grad { background: none; color: var(--maple); -webkit-text-fill-color: currentColor; text-shadow: 3px 3px 0 #ffd27a; }
:root[data-theme="dark"] .grad { color: #ff8a5c; text-shadow: 3px 3px 0 rgba(0,0,0,.6); }
/* buttons */
button, .btn, .more { background: var(--btn-bg); color: var(--btn-ink); border: 2px solid var(--outline); border-radius: 10px; box-shadow: 3px 3px 0 var(--sticker);
  font: 800 .9rem var(--font); letter-spacing: .01em; text-transform: none; }
:root[data-theme="dark"] button, :root[data-theme="dark"] .btn { color: var(--btn-ink); }
button:hover, .btn:hover, .more:hover { background: var(--btn-bg); color: var(--btn-ink); filter: brightness(1.07); transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--sticker); }
button:active, .btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--sticker); }
button.linkish, button.linkish:hover { background: none; border: 0; box-shadow: none; transform: none; filter: none; color: var(--link); font-size: .8rem; }
.btn-ghost { background: var(--card); color: var(--head-ink) !important; border: 2px solid var(--outline); }
/* header: white bar + four-colour stripe */
.site-header { padding: 0; background: var(--card); border-bottom: 2px solid var(--outline); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 6px; pointer-events: none;
  background: linear-gradient(90deg, var(--maple) 0 25%, var(--sun) 25% 50%, var(--leaf) 50% 75%, var(--sky) 75%); }
.header-bar { max-width: 1240px; margin: 0 auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  min-height: 68px; padding: 8px 20px; gap: 10px; flex-wrap: nowrap; }
.brand { gap: 10px; }
.brand-mark { width: 40px; height: 40px; border-radius: 0; background: none; box-shadow: none; flex: none; }
.brand-mark .bm-bg { fill: #fff4e2; stroke: var(--outline); stroke-width: .7; }
.brand-mark .bm-leaf { fill: var(--maple); }
:root[data-theme="dark"] .brand-mark .bm-bg { fill: #2d2935; stroke: #0b0a0e; }
.brand-name { font: 700 1.6rem/1 var(--font-head); color: var(--head-ink); letter-spacing: 0; }
.brand-name span { color: var(--maple); }
.brand-sub { font: 800 .62rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.main-nav { gap: 2px; margin-left: 6px; flex-wrap: nowrap; }
.main-nav a { padding: 6px 9px; border-radius: 8px; font: 800 .9rem var(--font); text-transform: none; letter-spacing: 0; color: var(--muted-2); }
.main-nav a:hover { background: var(--soft); color: var(--primary-700); }
:root[data-theme="dark"] .main-nav a:hover { color: #ffd2bf; }
.main-nav a.on { background: var(--btn-bg); color: var(--btn-ink); } .main-nav a.on::after { display: none; }
.search-box { flex: 0 1 230px; }
.search-box input { border: 2px solid var(--outline); border-radius: 10px; background-color: var(--card); }
.search-box input:focus { box-shadow: 3px 3px 0 var(--sun); border-color: var(--outline); }
.search-dd { border: 2px solid var(--outline); box-shadow: 4px 4px 0 var(--sticker); border-radius: 12px; background: var(--card); backdrop-filter: none; }
:root[data-theme="dark"] .search-dd { background: var(--card); }
.dd-type { font-family: var(--font); }
.theme-toggle, .nav-toggle { background: var(--card); border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--sticker); color: var(--ink) !important; }
.theme-toggle:hover, .nav-toggle:hover { background: var(--soft); color: var(--ink) !important; }
.header-actions .btn { font-size: .82rem; }
/* footer with pixel-grass edge */
.site-footer { background: #2d2a32; color: #d6cfde; border-top: 0; position: relative; margin-top: 72px; backdrop-filter: none; }
:root[data-theme="dark"] .site-footer { background: #0f0d13; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
  background: linear-gradient(90deg, var(--leaf) 50%, #79c95f 50%) 0 8px/16px 8px repeat-x, linear-gradient(90deg, transparent 50%, var(--leaf) 50%) 0 0/32px 8px repeat-x; }
.site-footer a, .footer-grid a { color: #fff; } .site-footer a:hover { color: #ffd27a; }
.footer-grid h4 { color: var(--sun); font: 900 .74rem var(--font); letter-spacing: .12em; text-transform: uppercase; }
.footer-brand .brand-name { color: #fff; } .footer-brand .brand-sub { color: #bdb4c7; }
.footer-legal { border-top-color: rgba(255,255,255,.15); color: #c9c1d2; }
/* shared sticker surfaces */
.panel, .server-box, .notice, .filters, .desc, .questlog, section.gaps, .bms-notes, .summary,
.quest-main > section:not(.walkthrough), .map-grid > div > section, .infobox, .ent-head, .series-nav {
  background: var(--card); border: 2px solid var(--outline); border-radius: 12px; box-shadow: 4px 4px 0 var(--sticker); backdrop-filter: none; -webkit-backdrop-filter: none; }
.card, ol.steps > li, #qtable tbody tr, .lvlist li, .ent-list li, ol.series-list li, ul.sres li {
  background: var(--card); border: 2px solid var(--outline); border-radius: 12px; box-shadow: 3px 3px 0 var(--sticker); }
:root[data-theme="dark"] .card, :root[data-theme="dark"] ol.steps > li, :root[data-theme="dark"] #qtable tbody tr { border-color: var(--outline); }
.card:hover, #qtable tbody tr:hover, .lvlist li:hover, .ent-list li:hover,
:root[data-theme="dark"] .card:hover { transform: translate(-3px,-3px); border-color: var(--outline); box-shadow: 6px 6px 0 var(--maple); background: var(--card); }
.ent-list li, ol.series-list li, ul.sres li { border-radius: 10px; }
.ent-list li:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--maple); }
/* home */
.hero { margin-top: 30px; isolation: isolate; background: var(--card); border: 2px solid var(--outline); box-shadow: 6px 6px 0 var(--sticker); border-radius: 16px; padding: 48px 44px 40px; }
.hero::before, :root[data-theme="dark"] .hero::before { background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23e4572e' d='M7 0h1v1h-1zM6 1h3v1h-3zM2 2h1v1h-1zM6 2h3v1h-3zM12 2h1v1h-1zM2 3h2v1h-2zM5 3h5v1h-5zM11 3h2v1h-2zM3 4h9v1h-9zM0 5h1v1h-1zM3 5h9v1h-9zM14 5h1v1h-1zM1 6h13v1h-13zM2 7h11v1h-11zM3 8h9v1h-9zM1 9h13v1h-13zM3 10h9v1h-9zM5 11h2v1h-2zM8 11h2v1h-2zM7 12h1v1h-1zM7 13h1v1h-1zM6 14h1v1h-1z'/%3E%3C/svg%3E") no-repeat right 48px top 36px/150px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23f3a712' d='M7 0h1v1h-1zM6 1h3v1h-3zM2 2h1v1h-1zM6 2h3v1h-3zM12 2h1v1h-1zM2 3h2v1h-2zM5 3h5v1h-5zM11 3h2v1h-2zM3 4h9v1h-9zM0 5h1v1h-1zM3 5h9v1h-9zM14 5h1v1h-1zM1 6h13v1h-13zM2 7h11v1h-11zM3 8h9v1h-9zM1 9h13v1h-13zM3 10h9v1h-9zM5 11h2v1h-2zM8 11h2v1h-2zM7 12h1v1h-1zM7 13h1v1h-1zM6 14h1v1h-1z'/%3E%3C/svg%3E") no-repeat right 210px top 150px/64px,
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%235bb043' d='M7 0h1v1h-1zM6 1h3v1h-3zM2 2h1v1h-1zM6 2h3v1h-3zM12 2h1v1h-1zM2 3h2v1h-2zM5 3h5v1h-5zM11 3h2v1h-2zM3 4h9v1h-9zM0 5h1v1h-1zM3 5h9v1h-9zM14 5h1v1h-1zM1 6h13v1h-13zM2 7h11v1h-11zM3 8h9v1h-9zM1 9h13v1h-13zM3 10h9v1h-9zM5 11h2v1h-2zM8 11h2v1h-2zM7 12h1v1h-1zM7 13h1v1h-1zM6 14h1v1h-1z'/%3E%3C/svg%3E") no-repeat right 110px bottom 40px/48px,
  linear-gradient(180deg, var(--card), var(--glass-2)); }
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.9rem); line-height: 1.08; max-width: 17ch; }
.hero-search input { border: 2px solid var(--outline); border-radius: 12px; box-shadow: 3px 3px 0 var(--sticker); background-color: var(--card); }
.hero-search input:focus, .hero-level input:focus, .filters input:focus, .filters select:focus, .filter-input:focus { border-color: var(--outline); box-shadow: 3px 3px 0 var(--sun); }
.hero-level input { border: 2px solid var(--outline); background: var(--card); }
.hero-level button { background: var(--btn-alt); color: var(--btn-alt-ink); border: 2px solid var(--outline); }
.hero-level button:hover { background: var(--btn-alt); color: var(--btn-alt-ink); }
.stats { background: transparent; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; gap: 12px; margin-top: 22px; }
.stats div { border: 2px solid var(--outline); border-radius: 12px; box-shadow: 3px 3px 0 var(--sticker); }
.stats div:nth-child(1) { background: var(--pastel-1); } .stats div:nth-child(2) { background: var(--pastel-2); } .stats div:nth-child(3) { background: var(--pastel-3); }
.stats div:nth-child(4) { background: var(--pastel-4); } .stats div:nth-child(5) { background: var(--pastel-5); } .stats div:nth-child(6) { background: var(--pastel-6); }
.stats b, .stats div:nth-child(n) b { font: 700 1.95rem/1.1 var(--font-head); color: var(--head-ink); }
.stats span { font: 900 .7rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.section-head h2 { font-size: 2rem; font-weight: 700; }
.card b { font: 600 1.22rem/1.2 var(--font-head); }
.card:hover b { color: var(--primary-700); }
:root[data-theme="dark"] .card:hover b { color: #ffd2bf; }
.card-lv { font: 900 .7rem var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--lv-ink); background: var(--lv-bg); padding: 3px 8px; border-radius: 6px; }
.card::after { font: 900 .72rem var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--link); }
.card.soon { opacity: .75; }
.server-box li::marker, .reqs li::marker { content: "◆ "; color: var(--sun); }
/* page heads */
.page-head h1 { font-weight: 700; }
.crumbs { font: 800 .85rem var(--font); letter-spacing: 0; text-transform: none; margin-top: 26px; color: var(--muted); }
.crumbs a { color: var(--link); }
/* guide pages: sky title band with grass */
.quest-head { isolation: isolate; background: linear-gradient(180deg, var(--band), var(--band-2)); border: 2px solid var(--outline); box-shadow: 5px 5px 0 var(--sticker); border-radius: 16px; color: #fff; padding-bottom: 46px; }
.quest-head::before, :root[data-theme="dark"] .quest-head::before { background:
  linear-gradient(transparent calc(100% - 26px), var(--grass) calc(100% - 26px) calc(100% - 18px), var(--dirt) calc(100% - 18px)),
  radial-gradient(40px 18px at 82% 30%, var(--cloud) 98%, transparent), radial-gradient(28px 14px at 86% 24%, var(--cloud) 98%, transparent),
  radial-gradient(34px 14px at 66% 50%, var(--cloud) 98%, transparent); opacity: .95; }
.quest-head h1 { color: #fff; text-shadow: 3px 3px 0 #2d2a32; font-size: clamp(2.1rem, 4.5vw, 3.2rem); }
.quest-head .eyebrow { color: #fff; } .quest-head .eyebrow::before { color: #ffd27a; }
.quest-head .badge { box-shadow: 2px 2px 0 #2d2a32; }
.badge { border: 2px solid var(--outline) !important; border-radius: 8px; font: 800 .78rem var(--font); }
.b-auto { background: var(--card); color: var(--muted-2); }
.infobox { padding: 14px; }
.infobox th { font: 900 .68rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ib-img, :root[data-theme="dark"] .ib-img { background: linear-gradient(transparent 72%, var(--grass) 72% 78%, var(--dirt) 78%), linear-gradient(180deg, #bfe6ff, #e7f5ff); border: 2px solid var(--outline); border-radius: 10px; }
:root[data-theme="dark"] .ib-img { background: linear-gradient(transparent 72%, var(--grass) 72% 78%, var(--dirt) 78%), linear-gradient(180deg, #1b3f66, #2a5d8f); }
.ent-img, :root[data-theme="dark"] .ent-img { background: linear-gradient(transparent 74%, var(--grass) 74% 80%, var(--dirt) 80%), linear-gradient(180deg, #bfe6ff, #e7f5ff); border: 2px solid var(--outline); }
:root[data-theme="dark"] .ent-img { background: linear-gradient(transparent 74%, var(--grass) 74% 80%, var(--dirt) 80%), linear-gradient(180deg, #1b3f66, #2a5d8f); }
.summary::before { background: repeating-linear-gradient(180deg, var(--maple) 0 8px, var(--sun) 8px 16px, var(--leaf) 16px 24px, var(--sky) 24px 32px); width: 6px; }
.wt-head h2 { font-weight: 700; }
.progress { background: var(--card); border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--sticker); backdrop-filter: none; }
.progress .bar { border: 2px solid var(--outline); height: 12px; border-radius: 3px; background: var(--card); }
.progress .bar span { background: repeating-linear-gradient(90deg, var(--leaf) 0 6px, var(--grass-2) 6px 12px); }
/* steps: sticker cards with coloured number squares */
ol.steps > li:hover, :root[data-theme="dark"] ol.steps > li:hover { border-color: var(--outline); box-shadow: 5px 5px 0 var(--sun); }
ol.steps > li::before { border-radius: 8px; background: var(--sun); color: #231f29; border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--sticker); font: 700 1.05rem var(--font-head); }
ol.steps > li:nth-child(4n+2)::before { background: var(--sky); } ol.steps > li:nth-child(4n+3)::before { background: #f07a55; } ol.steps > li:nth-child(4n)::before { background: #7cc663; }
ol.steps > li.done::before, ol.steps > li.done:nth-child(n)::before { content: "✓"; background: var(--leaf); color: #10200b; }
.step-title { font: 600 1.12rem var(--font-head); }
ol.steps input[type=checkbox] { accent-color: var(--leaf); }
figure.shot a, .gallery figure a { background: var(--card); border: 2px solid var(--outline); border-radius: 10px; box-shadow: 4px 4px 0 var(--sticker); padding: 4px; }
figure.shot a:hover, .gallery figure a:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--sky); }
figure.shot img, .gallery img { border-radius: 6px; }
/* tables */
.tbl, .boss-body table { border: 2px solid var(--outline); border-radius: 10px; background: var(--card); box-shadow: 3px 3px 0 var(--sticker); }
.tbl thead th, .tbl:not(.rewards) tr:first-child th, .tbl.rewards th, .boss-body th { background: var(--pastel-2); font: 900 .7rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); }
.tbl tbody tr:hover { background: var(--glass-2); }
.lv, #qtable tbody td:nth-child(2) { background: var(--lv-bg); color: var(--lv-ink); border-radius: 6px; font: 900 .7rem var(--font); letter-spacing: .04em; padding: 3px 8px; }
.tag { border: 1.5px solid var(--outline); font-family: var(--font); }
.quest-main > section.tips, :root[data-theme="dark"] .quest-main > section.tips { background: var(--tips-bg); }
.quest-main > section.bms-notes, :root[data-theme="dark"] .quest-main > section.bms-notes { background: var(--notes-bg); }
.quest-main > section.gaps, body section.gaps, :root[data-theme="dark"] section.gaps { background: var(--gaps-bg) !important; }
section.gaps details { background: var(--card); border: 1.5px solid var(--line); }
.check { border: 1.5px dashed var(--amber); }
.route { background: var(--soft); border: 1.5px solid var(--line); }
.minimap img { border: 2px solid var(--outline); box-shadow: 3px 3px 0 var(--sticker); }
/* lists, browser, level finder, search */
ol.series-list li::before { border: 2px solid var(--outline); background: var(--sun); color: #231f29; font: 700 .85rem var(--font-head); border-radius: 6px; }
.filters label { font: 900 .7rem var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.filters label.chk { font: 700 .88rem var(--font); text-transform: none; letter-spacing: 0; color: var(--muted-2); }
.filters input, .filters select, .filter-input { border: 2px solid var(--outline); border-radius: 10px; background-color: var(--card); }
.level-form label.big input { font: 700 1.6rem var(--font-head); color: var(--primary-700); }
:root[data-theme="dark"] .level-form label.big input { color: var(--primary-700); }
#qtable thead tr, .type-tabs { background: var(--card); border: 2px solid var(--outline); box-shadow: 3px 3px 0 var(--sticker); backdrop-filter: none; }
#qtable thead tr::before { font: 900 .7rem var(--font); letter-spacing: .1em; }
#qtable thead th { font: 800 .82rem var(--font); text-transform: none; letter-spacing: 0; color: var(--muted-2); }
#qtable thead th:hover, .type-tabs button:hover { background: var(--soft) !important; color: var(--primary-700); }
.type-tabs button { border: 0; box-shadow: none; font: 800 .82rem var(--font); }
.type-tabs button:hover { transform: none; filter: none; }
.type-tabs button.on { background: var(--btn-bg); color: var(--btn-ink); border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--sticker); }
#qtable tbody td:nth-child(1) a, .lvlist li > a:first-child { font: 600 1.06rem/1.3 var(--font-head); }
#qtable tbody tr:hover td:nth-child(1) a { color: var(--primary-700); }
:root[data-theme="dark"] #qtable tbody tr:hover td:nth-child(1) a { color: #ffd2bf; }
.dd-all, .dd-empty { font-family: var(--font); }
/* responsive */
@media (max-width: 1180px) { .header-bar { flex-wrap: wrap; } .main-nav { flex-wrap: wrap; } }
@media (max-width: 860px) {
  .search-box { flex: 1 1 100%; order: 5; }
  .header-actions { margin-left: auto; }
  .main-nav a.on { background: var(--btn-bg); }
  .main-nav { border-top: 2px dashed var(--line); }
}
@media (max-width: 640px) {
  .site-header { padding: 0; }
  .header-bar { padding: 8px 12px; }
  .brand-name { font-size: 1.35rem; } .brand-mark { width: 34px; height: 34px; }
  .hero { padding: 30px 20px 26px; }
  .hero::before, :root[data-theme="dark"] .hero::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-0.5 -0.5 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23e4572e' d='M7 0h1v1h-1zM6 1h3v1h-3zM2 2h1v1h-1zM6 2h3v1h-3zM12 2h1v1h-1zM2 3h2v1h-2zM5 3h5v1h-5zM11 3h2v1h-2zM3 4h9v1h-9zM0 5h1v1h-1zM3 5h9v1h-9zM14 5h1v1h-1zM1 6h13v1h-13zM2 7h11v1h-11zM3 8h9v1h-9zM1 9h13v1h-13zM3 10h9v1h-9zM5 11h2v1h-2zM8 11h2v1h-2zM7 12h1v1h-1zM7 13h1v1h-1zM6 14h1v1h-1z'/%3E%3C/svg%3E") no-repeat right 14px top 14px/56px, linear-gradient(180deg, var(--card), var(--glass-2)); }
  .quest-head { padding: 20px 18px 42px; }
  ol.steps > li { padding: 14px 14px 14px 56px; }
}
/* header fit + infobox credit chip */
.main-nav a, .header-actions .btn, .brand { white-space: nowrap; }
.brand-sub { font-size: .58rem; letter-spacing: .06em; }
.main-nav a { padding: 6px 8px; }
.search-box { flex-basis: 210px; }
@media (max-width: 1300px) { .header-bar { flex-wrap: wrap; } .main-nav { flex-wrap: wrap; } .search-box { margin-left: auto; } }
.ib-img .muted.small { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 6px; background: var(--card); color: var(--muted-2); border: 1.5px solid var(--outline); font-size: .74rem; line-height: 1.4; }
ul.lvlist { padding-left: 0; }
#qtable.tbl, #qtable { border: 0; box-shadow: none; background: none; }
:root button.linkish, :root[data-theme="dark"] button.linkish { color: var(--link); background: none; }
/* contrast: keep the sky band dark enough for white text (≥4.5:1), and make band text white */
:root { --band: #1a6ea8; --band-2: #1f7bb8; }
.quest-head .lead, .quest-head p:not(.eyebrow) { color: #fff; }
.quest-head .lead a { color: #ffe08a; }
/* ---------- Quests page: "I'm level" bar + grouped results ---------- */
.level-bar { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; padding: 14px 16px; margin: 0 0 4px;
  background: var(--pastel-2); border: 2px solid var(--outline); border-radius: 12px; box-shadow: 3px 3px 0 var(--sticker); }
.level-bar label.big { flex-direction: row; align-items: center; gap: 10px; }
.level-bar label.big span { font: 700 1.45rem var(--font-head); color: var(--head-ink); text-transform: none; letter-spacing: 0; }
.level-bar input[name=level] { width: 112px; height: 58px; text-align: center; font: 700 1.9rem var(--font-head); color: var(--primary-700); }
:root[data-theme="dark"] .level-bar input[name=level] { color: var(--primary-700); }
.level-bar .hint { flex: 1 1 100%; margin: 0; }
.level-bar #qclear { align-self: center; }
.qfilters.has-level .nolv { display: none; }
.qfilters:not(.has-level) .lv-only, .qfilters:not(.has-level) #qclear { display: none; }
#qtable tbody tr.grp, #qtable tbody tr.grp:hover { grid-column: 1 / -1; display: block; padding: 14px 2px 0; background: none; border: 0; box-shadow: none; transform: none; }
#qtable tbody tr.grp th { display: block; padding: 0; border: 0; background: none; text-align: left; font: 700 1.35rem var(--font-head); color: var(--head-ink); text-transform: none; letter-spacing: 0; }
#qtable tbody tr.grp:first-child { padding-top: 0; }
#qtable thead th:focus-visible { outline: 3px solid var(--ring); }
.result-count b { color: var(--head-ink); }
@media (max-width: 640px) { .level-bar { padding: 12px; } .level-bar label.big span { font-size: 1.2rem; } .level-bar input[name=level] { width: 92px; height: 50px; font-size: 1.6rem; } }

/* ===== Nav v3: Home | Questing | Leveling | Bossing | Monster Book | Blog ===== */
.main-nav a.on { background: var(--accent, #e8590c); color: #fff; box-shadow: 2px 2px 0 var(--ink, #1f2a37); }
:root[data-theme="dark"] .main-nav a.on { color: #1b1206; }
.book-tabs, .subnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.book-tabs a, .subnav .pill { font-weight: 800; font-size: .9rem; padding: 6px 12px; border-radius: 10px; border: 2px solid var(--line-strong, var(--line)); background: var(--card); color: var(--text); text-decoration: none; }
.book-tabs a:hover, .subnav .pill:hover { border-color: var(--accent, #e8590c); }
.book-tabs a.on, .subnav .pill.on { background: var(--ink, #1f2a37); border-color: var(--ink, #1f2a37); color: #fff; }
:root[data-theme="dark"] .book-tabs a.on, :root[data-theme="dark"] .subnav .pill.on { background: var(--text); border-color: var(--text); color: var(--bg); }
@media (max-width: 860px) {
  .main-nav { gap: 4px; }
  .main-nav a { font-size: .95rem; }
}

/* ===== Training finder ===== */
.tfilters .level-bar { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.tfilters .level-bar input[type=number] { width: 96px; height: 52px; text-align: center; font: 700 1.6rem var(--font-head); color: var(--primary-700); }
.spot.ranked .spot-meta .lv, .spot.ranked .spot-meta .rbtag { display: none; }
.tfilters .hint { flex-basis: 100%; margin: 0; }
#tresults h2 { margin-top: 18px; }
.spot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 18px; margin: 12px 0 20px; }
.spot { background: var(--card); border: 2px solid var(--line-strong, var(--line)); border-radius: 14px; padding: 16px 18px; box-shadow: 4px 4px 0 var(--shadow-c, rgba(31,42,55,.18)); scroll-margin-top: 90px; }
.spot:target { outline: 3px solid var(--accent, #e8590c); }
.spot header { position: relative; }
.spot h3 { margin: 0 0 4px; font-size: 1.15rem; }
.spot.ranked h3 { padding-left: 46px; }
.spot .rank { position: absolute; left: 0; top: -2px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: var(--accent, #e8590c); color: #fff; font-family: var(--font-head, inherit); font-weight: 700; box-shadow: 2px 2px 0 var(--ink, #1f2a37); }
.spot.ranked:nth-child(2) .rank { background: #2b8a3e; } .spot.ranked:nth-child(3) .rank { background: #1971c2; } .spot.ranked:nth-child(n+4) .rank { background: #7048e8; }
.spot-meta { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.spot-meta .lv { font-weight: 800; }
.spot-whyrank { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.chip { font-size: .78rem; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--soft, rgba(232,89,12,.1)); color: var(--text); border: 1px solid var(--line); }
.spot-why { margin: 8px 0; }
.spot-mobs { width: 100%; font-size: .9rem; margin: 6px 0 10px; }
.spot-notes { margin: 6px 0; padding-left: 18px; font-size: .93rem; }
.spot-notes li.hl { background: var(--soft, rgba(232,89,12,.1)); border-radius: 6px; padding: 2px 6px; margin-left: -6px; list-style-position: inside; }
.spot-access, .spot-galaxy { font-size: .93rem; margin: 6px 0; }
.spot-sources summary { cursor: pointer; font-weight: 800; font-size: .88rem; }
.spot-src { font-size: .85rem; margin: 6px 0 0; padding-left: 18px; }
.ranked-grid .spot-sources { /* show sources openly on ranked results */ }
.data-picks { list-style: none; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.data-picks li { background: var(--card); border: 2px dashed var(--line-strong, var(--line)); border-radius: 12px; padding: 10px 12px; }
.data-picks .dp-mobs { display: block; font-size: .85rem; margin-top: 4px; }
.galaxy-box h2 { margin-top: 0; }
.rb-rates { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-rates span { background: var(--card); border: 2px solid var(--line); border-radius: 10px; padding: 4px 10px; font-size: .9rem; }

/* ===== Blog ===== */
.post-list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); margin: 12px 0 24px; }
.post-body { max-width: 72ch; font-size: 1.05rem; line-height: 1.7; }
.post-body h2 { margin-top: 1.4em; }
.post-head .badges { display: flex; gap: 6px; flex-wrap: wrap; }
#qtable tbody tr.grp-more td { padding: 6px 12px; font-style: italic; }

/* ===== Recommended RB route ===== */
.rb-route h2 { margin-top: 0; }
.route-steps { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.route-steps li { border: 2px solid var(--line-strong, var(--line)); border-radius: 12px; padding: 8px 12px; background: var(--card); }
.route-steps li.on { border-color: var(--accent, #e8590c); box-shadow: 3px 3px 0 var(--accent, #e8590c); }
.route-steps .route-rb { display: block; font-family: var(--font-head, inherit); }
.route-steps a { font-size: .93rem; }
.tag.t-maple { background: #e8590c; color: #fff; border-color: #c2410c; }
.spot-req { font-size: .93rem; margin: 8px 0; padding: 6px 10px; border-radius: 8px; background: rgba(232, 89, 12, .1); border: 1px solid rgba(232, 89, 12, .35); }

/* ===== Community votes ===== */
.vote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; font-size: .9rem; }
.vote[hidden], .vote:empty { display: none; }
.vote .v-label { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-right: 2px; }
.vote .v-btn { font: inherit; font-weight: 800; line-height: 1; cursor: pointer; min-width: 34px; min-height: 32px; padding: 5px 10px; border-radius: 9px;
  border: 2px solid var(--line-strong, var(--line)); background: var(--card); color: var(--text); box-shadow: 2px 2px 0 var(--line-strong, rgba(31,42,55,.25)); }
.vote .v-btn:hover { border-color: var(--accent, #e8590c); }
.vote .v-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--line-strong, rgba(31,42,55,.25)); }
.vote .v-up.on { background: #2b8a3e; border-color: #2b8a3e; color: #fff; }
.vote .v-down.on { background: #c92a2a; border-color: #c92a2a; color: #fff; }
.vote .v-score { min-width: 2.4em; text-align: center; font-weight: 900; font-family: var(--font-head, inherit); font-size: 1.05rem; }
.vote .v-report { font-size: .85rem; font-weight: 700; }
.vote .v-msg { font-size: .82rem; color: var(--muted); }
.vote-step { margin: 4px 0 4px 34px; font-size: .82rem; }
.vote-step .v-btn { min-height: 28px; padding: 3px 8px; font-size: .8rem; }
.vote-step .v-score { font-size: .9rem; }
.quest-head .vote-page .v-label { color: rgba(255,255,255,.9); }
.quest-head .vote-page .v-score { color: #fff; }
.vote-foot { margin: 14px 0; }
:root .vote .v-btn, :root[data-theme="dark"] .vote .v-btn { background: var(--card); color: var(--text); }
:root .vote .v-up.on, :root[data-theme="dark"] .vote .v-up.on { background: #2b8a3e; border-color: #2b8a3e; color: #fff; }
:root .vote .v-down.on, :root[data-theme="dark"] .vote .v-down.on { background: #c92a2a; border-color: #c92a2a; color: #fff; }

/* ===== New Players guide ===== */
.hero-new { margin: 12px 0 0; font-weight: 700; }
.quest.np-guide { display: block; max-width: 980px; }
.np-toc { position: sticky; top: 70px; z-index: 5; display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 10px; padding: 10px; border-radius: 14px;
  background: var(--card); border: 2px solid var(--line-strong, var(--line)); box-shadow: 3px 3px 0 var(--line-strong, rgba(31,42,55,.2)); }
.np-toc a { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .9rem; padding: 4px 10px 4px 4px; border-radius: 10px; text-decoration: none; color: var(--text); }
.np-toc a:hover { background: var(--soft, rgba(232,89,12,.1)); }
.np-toc .np-n { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--accent, #e8590c); color: #fff; font-family: var(--font-head, inherit); font-size: .85rem; }
.np-toc a:nth-child(6n+2) .np-n { background: #2b8a3e; } .np-toc a:nth-child(6n+3) .np-n { background: #1971c2; } .np-toc a:nth-child(6n+4) .np-n { background: #f59f00; color: #1b1206; } .np-toc a:nth-child(6n+5) .np-n { background: #7048e8; } .np-toc a:nth-child(6n+6) .np-n { background: #c2255c; }
.np-progress { margin: 6px 0 18px; }
.np-chapter { scroll-margin-top: 140px; margin: 26px 0; padding: 20px 22px; background: var(--card); border: 2px solid var(--line-strong, var(--line)); border-radius: 18px; box-shadow: 5px 5px 0 var(--line-strong, rgba(31,42,55,.2)); }
.np-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.np-head h2 { margin: 0; }
.np-num { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--accent, #e8590c); color: #fff; font: 700 1.4rem var(--font-head, inherit); box-shadow: 3px 3px 0 var(--ink, #1f2a37); }
.np-chapter:nth-of-type(6n+2) .np-num { background: #2b8a3e; } .np-chapter:nth-of-type(6n+3) .np-num { background: #1971c2; } .np-chapter:nth-of-type(6n+4) .np-num { background: #f59f00; color: #1b1206; } .np-chapter:nth-of-type(6n+5) .np-num { background: #7048e8; } .np-chapter:nth-of-type(6n+6) .np-num { background: #c2255c; }
.np-lead { font-size: 1.04rem; }
.np-table { overflow-x: auto; margin: 14px 0; }
.np-table caption { text-align: left; font-weight: 800; padding: 4px 0 8px; }
.np-table th[scope=row] { white-space: nowrap; }
.np-cmds dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 8px 16px; margin: 6px 0 0; }
.np-cmds dl > div { border: 1px dashed var(--line-strong, var(--line)); border-radius: 10px; padding: 8px 10px; }
.np-cmds dt code { font-weight: 800; }
.np-cmds dd { margin: 4px 0 0; font-size: .92rem; }
.np-tips ul { padding-left: 20px; }
.np-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 2px dashed var(--line); }
.np-foot .vote { margin: 0; }
.np-checks ul { padding-left: 20px; }
@media (max-width: 860px) { .np-toc { position: static; } .np-chapter { padding: 16px 14px; } }
/* callouts + rebirth skill path */
.np-callout { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0; padding: 12px 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(232,89,12,.12), rgba(245,159,0,.12)); border: 2px solid var(--accent, #e8590c); box-shadow: 3px 3px 0 var(--accent, #e8590c); }
.np-callout p { margin: 0 0 4px; } .np-callout p:last-child { margin-bottom: 0; }
.np-callout-icon { font-size: 1.5rem; line-height: 1.2; }
.sp-start { font-weight: 700; }
.sp-table td, .sp-table th { white-space: normal; }
.sp-table tr.sp-key th, .sp-table tr.sp-key td { background: rgba(232,89,12,.12); font-weight: 800; }
.mb-intro { margin-top: 0; }
.quest.np-guide .quest-head::before, :root[data-theme="dark"] .quest.np-guide .quest-head::before { background:
  linear-gradient(transparent calc(100% - 26px), var(--grass) calc(100% - 26px) calc(100% - 18px), var(--dirt) calc(100% - 18px)),
  radial-gradient(40px 18px at 88% 22%, var(--cloud) 98%, transparent), radial-gradient(28px 14px at 92% 16%, var(--cloud) 98%, transparent); }
.quest.np-guide .quest-head .lead { max-width: 62ch; }