/* Layout concept: a night sky that turns into a game menu. Full-bleed cinematic bands,
   HUD-style labels, one lunar-gold call to action, rarity colors taken from the game itself. */
:root {
  color-scheme: dark;
  --ink-rgb: 10, 7, 6; --ink1-rgb: 19, 13, 10;
  --ink-0: #0a0706; --ink-1: #130d0a; --ink-2: #1d1410; --ink-3: #2b1e17;
  --line-rgb: 255, 214, 170;
  --line: rgba(var(--line-rgb), .12);
  --line-strong: rgba(var(--line-rgb), .26);
  --moon-rgb: 252, 244, 233;
  --moon: #fcf4e9; --moon-dim: #d3c3af; --moon-mute: #96836f;
  --accent-rgb: 255, 122, 69;
  --violet: #ff7a45; --violet-hi: #ffb48a;
  --glow-rgb: 255, 214, 160; --crater-rgb: 190, 130, 80; --shade-rgb: 86, 38, 12;
  --m1: #fffaf0; --m2: #fbe8c8; --m3: #f1c58e; --m4: #c88a52; --m5: #6e4222;
  --o2: #ffe6c0; --o3: #ffaa5e; --o4: #9c3f17;
  --sky: radial-gradient(120% 80% at 70% 0%, rgba(255, 140, 60, .32), transparent 60%), radial-gradient(70% 60% at 20% 10%, rgba(180, 40, 30, .22), transparent 70%);
  --gold: #ffc24a;
  --gold-hi: #ffe2a3;
  --gold-ink: #231400;
  --danger: #ff4d5e;
  --r-common: #9aa3b5;
  --r-uncommon: #4ade80;
  --r-rare: #60a5fa;
  --r-epic: #a78bfa;
  --r-legendary: #fbbf24;
  --r-mythical: #f472b6;
  --review: #ffe45c;
  --review-ink: #1a1500;

  --f-display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --f-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-hud: 'Chakra Petch', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --nav-h: 72px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--ink-0); }
body {
  margin: 0; background: var(--ink-0); color: var(--moon);
  font-family: var(--f-body); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }
::selection { background: var(--violet); color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.hud { font-family: var(--f-hud); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 600; }
.display { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; line-height: .86; letter-spacing: .005em; }
.sec { position: relative; isolation: isolate; }
.sec-pad { padding-block: clamp(80px, 11vw, 150px); }
.eyebrow { display: inline-flex; align-items: center; gap: .6em; color: var(--violet-hi); }
.eyebrow::before { content: ''; width: 28px; height: 2px; background: currentColor; }
.h2 { font-size: clamp(3rem, 7.4vw, 6.4rem); margin-top: .9rem; }
.h2 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--moon); }
.lede { color: var(--moon-dim); font-size: clamp(1rem, 1.3vw, 1.14rem); max-width: 56ch; margin-top: 1.2rem; }

/* ---------- Buttons ---------- */
.btn {
  --bg: transparent; position: relative; display: inline-flex; align-items: center; gap: .7em;
  padding: 1.05em 1.6em; border: 0; border-radius: 4px; text-decoration: none;
  font-family: var(--f-hud); font-weight: 700; font-size: .86rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--bg); transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .3s;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  will-change: transform;
}
.btn svg { width: 1.2em; height: 1.2em; flex: none; }
.btn-gold { --bg: var(--gold); color: var(--gold-ink); box-shadow: 0 10px 40px -10px rgba(255, 201, 92, .6); overflow: hidden; }
.btn-gold::after {
  content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.75) 50%, transparent 65%);
  transform: translateX(-120%); animation: shine 4.5s var(--ease-io) infinite 2s;
}
.btn-gold:hover { --bg: var(--gold-hi); box-shadow: 0 16px 60px -8px rgba(255, 201, 92, .8); }
.btn-ghost { color: var(--moon); background: rgba(var(--moon-rgb), .06); box-shadow: inset 0 0 0 1px var(--line-strong); backdrop-filter: blur(10px); }
.btn-ghost:hover { background: rgba(var(--moon-rgb), .13); }
.btn-lg { font-size: .95rem; padding: 1.2em 1.9em; }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

.chip { display: inline-flex; align-items: center; gap: .45em; padding: .32em .7em; border-radius: 3px; font-family: var(--f-hud); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: color-mix(in srgb, var(--c, var(--violet)) 18%, transparent); color: color-mix(in srgb, var(--c, var(--violet)) 70%, white); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c, var(--violet)) 45%, transparent); white-space: nowrap; }
.chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--violet)); box-shadow: 0 0 8px var(--c, var(--violet)); }
.rar { --c: var(--r-common); }
.rar[data-r="uncommon"] { --c: var(--r-uncommon); } .rar[data-r="rare"] { --c: var(--r-rare); } .rar[data-r="epic"] { --c: var(--r-epic); }
.rar[data-r="legendary"] { --c: var(--r-legendary); } .rar[data-r="mythical"] { --c: var(--r-mythical); }

/* ---------- Boot screen ---------- */
#boot {
  position: fixed; inset: 0; z-index: 200; background: var(--ink-0); display: grid; place-items: center;
  transition: clip-path 1s var(--ease-io), visibility 0s 1s;
  clip-path: inset(0 0 0 0);
}
.is-ready #boot { clip-path: inset(0 0 100% 0); visibility: hidden; }
.boot-in { display: grid; justify-items: center; gap: 22px; }
.boot-moon { width: 84px; height: 84px; }
.boot-moon circle, .boot-moon path { fill: none; stroke: var(--moon); stroke-width: 2; }
.boot-moon path { stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 1.4s var(--ease-io) forwards; stroke: var(--gold); }
.boot-moon circle { opacity: .18; }
.boot-word { font-family: var(--f-display); font-weight: 900; font-size: 2.2rem; letter-spacing: .5em; padding-left: .5em; }
.boot-bar { width: 180px; height: 2px; background: var(--line); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--violet), var(--gold)); transition: width .3s; }
.boot-pct { color: var(--moon-mute); }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* Page loading screen (LunaLoader.razor): same look, indeterminate bar. */
.luna-loading { position: fixed; inset: 0; z-index: 200; background: var(--ink-0); display: grid; place-items: center; }
.luna-loading .boot-bar i { width: 40%; animation: boot-slide 1.1s var(--ease-io) infinite; }
@keyframes boot-slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
@media (prefers-reduced-motion: reduce) { .luna-loading .boot-bar i { animation: none; width: 100%; } }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: var(--nav-h);
  padding-top: env(safe-area-inset-top, 0px);
  transition: transform .5s var(--ease-out), background .4s, box-shadow .4s;
}
.nav.solid { background: rgba(var(--ink1-rgb), .72); backdrop-filter: blur(18px) saturate(140%); box-shadow: 0 1px 0 var(--line); }
.nav.hide { transform: translateY(-100%); }
.nav-in { height: 100%; display: flex; align-items: center; gap: 28px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.brand span { font-family: var(--f-display); font-weight: 900; font-size: 1.45rem; letter-spacing: .06em; text-transform: uppercase; }
.brand b { color: var(--gold); font-weight: 900; }
.nav-links { display: flex; gap: 6px; margin-left: 12px; }
.nav-links a { position: relative; padding: 8px 12px; text-decoration: none; color: var(--moon-dim); transition: color .25s; }
.nav-links a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out); }
.nav-links a:hover { color: var(--moon); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 0; background: rgba(var(--moon-rgb),.06); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s; }
.icon-btn:hover { background: rgba(var(--moon-rgb),.14); }
.icon-btn svg { width: 18px; height: 18px; }
.sound-bars { display: flex; gap: 2px; align-items: flex-end; height: 14px; }
.sound-bars i { width: 3px; height: var(--h, 6px); background: var(--moon-dim); border-radius: 1px; transition: height .3s; }
.sound-on .sound-bars i { background: var(--gold); animation: eq 1s ease-in-out infinite; }
.sound-on .sound-bars i:nth-child(2) { animation-delay: -.3s; } .sound-on .sound-bars i:nth-child(3) { animation-delay: -.6s; } .sound-on .sound-bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
.nav .btn { padding: .8em 1.2em; font-size: .76rem; }
.nav-login { color: var(--moon-dim); text-decoration: none; padding: 8px 10px; }
.nav-login:hover { color: var(--moon); }
.burger { display: none; }
.mnav { position: fixed; inset: 0; z-index: 85; background: rgba(var(--ink-rgb),.96); backdrop-filter: blur(12px); display: grid; align-content: center; gap: 6px; padding: 100px var(--gutter) 40px; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.mnav.open { opacity: 1; visibility: visible; transition: opacity .4s; }
.mnav a { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 12vw, 4rem); text-transform: uppercase; text-decoration: none; line-height: 1.05; transform: translateY(30px); opacity: 0; transition: transform .6s var(--ease-out), opacity .6s; }
.mnav.open a { transform: none; opacity: 1; }
.mnav a:nth-child(2) { transition-delay: .05s; } .mnav a:nth-child(3) { transition-delay: .1s; } .mnav a:nth-child(4) { transition-delay: .15s; } .mnav a:nth-child(5) { transition-delay: .2s; }
.mnav .btn { margin-top: 24px; justify-self: start; }

@media (max-width: 980px) {
  .nav-links, .nav-login, .nav .btn-gold { display: none; }
  .burger { display: grid; }
}

/* ---------- Cursor ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 300; pointer-events: none; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 1.5px solid rgba(var(--moon-rgb),.55); transition: width .3s var(--ease-out), height .3s var(--ease-out), margin .3s var(--ease-out), background .3s, border-color .3s; mix-blend-mode: difference; display: none; }
.cursor.big { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(255,255,255,.9); border-color: transparent; }
.cursor-dot { position: fixed; left: 0; top: 0; z-index: 301; pointer-events: none; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--gold); display: none; }
@media (pointer: fine) { .has-cursor .cursor, .has-cursor .cursor-dot { display: block; } }

/* ---------- Moon-phase scroll meter ---------- */
.phase { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 80; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 50%; background: rgba(var(--ink1-rgb),.7); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,.4); display: grid; place-items: center; }
.phase svg { width: 34px; height: 34px; }
.phase .tip { position: absolute; right: 62px; white-space: nowrap; background: var(--ink-3); padding: 6px 10px; border-radius: 4px; opacity: 0; transform: translateX(6px); transition: .3s; pointer-events: none; }
.phase:hover .tip { opacity: 1; transform: none; }

/* ---------- Review tooling (not part of the design) ---------- */
.rv-tabs { position: absolute; z-index: 40; top: 16px; left: var(--gutter); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; background: rgba(10, 8, 0, .78); border: 1.5px dashed var(--review); border-radius: 8px; backdrop-filter: blur(8px); max-width: calc(100% - 2 * var(--gutter)); }
.rv-tabs .rv-label { font-family: var(--f-hud); font-size: .64rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--review); padding: 0 6px 0 4px; }
.rv-tabs button { border: 0; padding: 6px 10px; border-radius: 5px; background: rgba(255, 228, 92, .1); color: #fff6c7; font-family: var(--f-hud); font-size: .7rem; font-weight: 600; letter-spacing: .06em; }
.rv-tabs button[aria-selected="true"] { background: var(--review); color: var(--review-ink); }
.hero .rv-tabs { top: auto; bottom: 62px; left: auto; right: var(--gutter); }
.no-review .rv-tabs { display: none; }
.rv-fab { position: fixed; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 95; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 0; border-radius: 999px; background: var(--review); color: var(--review-ink); font-family: var(--f-hud); font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.rv-fab b { background: var(--review-ink); color: var(--review); border-radius: 999px; padding: 1px 7px; font-size: .7rem; }
.rv-panel { position: fixed; z-index: 96; left: 0; top: 0; bottom: 0; width: min(440px, 100vw); background: #0d0b04; color: #f7f2da; border-right: 2px dashed var(--review); transform: translateX(-102%); transition: transform .5s var(--ease-out); overflow-y: auto; padding: calc(22px + env(safe-area-inset-top, 0px)) 22px calc(30px + env(safe-area-inset-bottom, 0px)); }
.rv-panel.open { transform: none; }
.rv-panel h3 { font-family: var(--f-hud); font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--review); }
.rv-panel h4 { font-family: var(--f-hud); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; margin: 22px 0 8px; color: var(--review); }
.rv-panel p, .rv-panel li { font-size: .9rem; color: #e6dfbd; line-height: 1.55; }
.rv-panel ul { padding-left: 1.1rem; margin: 6px 0 0; display: grid; gap: 6px; }
.rv-close { position: absolute; right: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,228,92,.4); background: transparent; color: var(--review); font-size: 1.1rem; }
.rv-sec { border-top: 1px dashed rgba(255,228,92,.3); padding-top: 12px; margin-top: 16px; }
.rv-opt { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; align-items: start; width: 100%; text-align: left; padding: 10px; margin-top: 6px; border-radius: 8px; border: 1px solid rgba(255,228,92,.18); background: rgba(255,228,92,.04); color: inherit; }
.rv-opt[aria-pressed="true"] { border-color: var(--review); background: rgba(255,228,92,.14); }
.rv-opt .k { grid-row: span 2; width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; background: rgba(255,228,92,.18); color: var(--review); font-family: var(--f-hud); font-weight: 700; }
.rv-opt[aria-pressed="true"] .k { background: var(--review); color: var(--review-ink); }
.rv-opt .t { font-weight: 700; font-size: .92rem; color: #fff8dc; }
.rv-opt .d { font-size: .82rem; color: #cfc7a2; line-height: 1.45; }
.rv-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.rv-row button { border: 1px solid rgba(255,228,92,.45); background: transparent; color: var(--review); padding: 9px 12px; border-radius: 6px; font-family: var(--f-hud); font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.rv-row button.primary { background: var(--review); color: var(--review-ink); }
.rv-picks { margin-top: 10px; font-family: var(--f-hud); font-size: .8rem; background: rgba(255,228,92,.08); padding: 10px; border-radius: 6px; user-select: all; }

/* ---------- Reveal ---------- */
.rv-wait { opacity: 0; transform: translateY(34px); }
.rv-go { transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); transition-delay: var(--d, 0s); }

/* =========================================================
   FOOTER
   ========================================================= */
.foot { background: #000; border-top: 1px solid var(--line); padding-block: 64px calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--moon-dim); }
.foot-grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 30px; }
.foot h4 { color: var(--moon); margin-bottom: 14px; }
.foot a { display: block; text-decoration: none; padding: 4px 0; font-size: .92rem; transition: color .2s; }
.foot a:hover { color: var(--gold); }
.foot-bottom { margin-top: 50px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; font-size: .85rem; }
.socials { display: flex; flex-wrap: wrap; gap: 8px; }
.socials a { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .8rem; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .wall-col, .ticker-track { animation: none !important; }
}

/* =========================================================
   SHARED SUB-PAGE SYSTEM
   ========================================================= */
.ico { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.22em; object-fit: contain; flex: none; }
.ico.lg { width: 28px; height: 28px; }
.page-hero { position: relative; overflow: hidden; isolation: isolate; padding-top: calc(var(--nav-h) + clamp(50px, 7vw, 100px)); padding-bottom: clamp(40px, 5vw, 70px); border-bottom: 1px solid var(--line); }
.page-hero::before { content: ''; position: absolute; inset: 0; z-index: -3; background: radial-gradient(70% 90% at 80% 0%, color-mix(in srgb, var(--accent, var(--violet)) 30%, transparent), transparent 65%), radial-gradient(50% 60% at 0% 100%, rgba(var(--accent-rgb),.12), transparent 70%), var(--ink-0); }
.page-hero .stars { z-index: -1; opacity: .7; }
.page-hero video.bgv, .page-hero .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; opacity: .42; filter: saturate(1.1); }
.page-hero .bgfade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ink-0) 10%, rgba(var(--ink-rgb),.55) 55%, rgba(var(--ink-rgb),.2)), linear-gradient(0deg, var(--ink-0), transparent 55%); }
.page-hero h1 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(3.4rem, 9vw, 8rem); line-height: .86; margin-top: 16px; }
.page-hero h1 em { font-style: normal; color: transparent; -webkit-text-stroke: 1.5px var(--moon); }
.page-hero .lede { margin-top: 18px; }
.hero-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.hero-kpis { display: flex; flex-wrap: wrap; gap: 10px; }
.kpi { padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: rgba(var(--ink1-rgb),.55); backdrop-filter: blur(10px); min-width: 120px; }
.kpi b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.kpi span { color: var(--moon-mute); }

.subnav { position: sticky; top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)); z-index: 30; background: rgba(var(--ink-rgb),.82); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 10px; }
.subnav a { flex: none; position: relative; padding: 9px 14px; border-radius: 6px; text-decoration: none; color: var(--moon-dim); font-family: var(--f-hud); font-weight: 600; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; transition: color .2s, background .2s; }
.subnav a:hover { color: var(--moon); background: rgba(var(--moon-rgb),.05); }
.subnav a[aria-current="page"] { color: var(--gold-ink); background: var(--gold); }

.layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); padding-block: 34px 90px; align-items: start; }
.rail { position: sticky; top: calc(var(--nav-h) + 70px); display: grid; gap: 22px; max-height: calc(100svh - var(--nav-h) - 90px); overflow-y: auto; padding-right: 6px; scrollbar-width: thin; }
.rail h4 { margin: 0 0 10px; color: var(--moon-mute); }
.search { position: relative; }
.search input { width: 100%; padding: 13px 14px 13px 42px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(var(--ink1-rgb),.8); color: var(--moon); font: inherit; outline: none; transition: border-color .2s, box-shadow .2s; }
.search input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(255,201,92,.12); }
.search svg { position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--moon-mute); }
.toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.tog { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 6px; border: 1px solid var(--line); background: rgba(var(--moon-rgb),.03); color: var(--moon-dim); font-family: var(--f-hud); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: all .2s; }
.tog:hover { color: var(--moon); border-color: var(--line-strong); }
.tog[aria-pressed="true"] { color: #fff; border-color: var(--c, var(--gold)); background: color-mix(in srgb, var(--c, #ffc95c) 20%, transparent); box-shadow: 0 0 16px -4px var(--c, #ffc95c); }
.elgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.elgrid button { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); background: rgba(var(--moon-rgb),.03); display: grid; place-items: center; padding: 0; transition: transform .2s var(--ease-back), border-color .2s, background .2s; }
.elgrid button .ico { width: 62%; height: 62%; }
.elgrid button:hover { transform: scale(1.1); }
.elgrid button[aria-pressed="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 14px -2px var(--c); }
.sel { width: 100%; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: rgba(var(--ink1-rgb),.8); color: var(--moon); font: inherit; }
.bar-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; color: var(--moon-dim); }
.count-pill { font-family: var(--f-hud); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--moon-mute); }
.count-pill b { color: var(--moon); font-variant-numeric: tabular-nums; }

/* Lunadex cards */
.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 176px), 1fr)); gap: 14px; }
.dcard { --c: var(--r-common); position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--moon); background: radial-gradient(80% 60% at 50% 45%, color-mix(in srgb, var(--el, var(--violet)) 34%, transparent), transparent 75%), linear-gradient(170deg, var(--ink-2), var(--ink-1)); border: 1px solid color-mix(in srgb, var(--c) 32%, transparent); transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, border-color .3s, box-shadow .3s; animation: cardIn .6s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes cardIn { from { opacity: 0; translate: 0 18px; scale: .97; } }
.dcard:hover { border-color: var(--c); box-shadow: 0 20px 40px -18px color-mix(in srgb, var(--c) 70%, transparent); }
.dcard .art { position: relative; min-height: 0; display: grid; place-items: center; padding: 16% 10% 0; }
.dcard .art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)); transition: transform .45s var(--ease-back); }
.dcard:hover .art img { transform: scale(1.08) translateY(-4px); }
.dcard .meta { padding: 10px 12px 12px; display: grid; gap: 4px; }
.dcard .nm { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; font-size: 1.12rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcard .row { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-family: var(--f-hud); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--moon-mute); }
.dcard .row .r { color: var(--c); font-weight: 700; }
.dcard .no { position: absolute; left: 10px; top: 9px; font-family: var(--f-hud); font-size: .62rem; color: var(--moon-mute); letter-spacing: .08em; }
.dcard .els { position: absolute; right: 8px; top: 7px; display: flex; gap: 2px; }
.dcard .els .ico { width: 18px; height: 18px; }
.dcard .sheen { position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge; background: linear-gradient(115deg, transparent 20%, rgba(255,0,132,.35) 35%, rgba(0,207,255,.35) 50%, rgba(255,255,0,.3) 65%, transparent 80%); background-size: 250% 250%; background-position: var(--mx, 50%) var(--my, 50%); transition: opacity .3s; }
.dcard[data-r="legendary"] .sheen, .dcard[data-r="mythical"] .sheen { opacity: .25; }
.dcard:hover .sheen { opacity: .6; }
[data-r="uncommon"] { --c: var(--r-uncommon); } [data-r="rare"] { --c: var(--r-rare); } [data-r="epic"] { --c: var(--r-epic); }
[data-r="legendary"] { --c: var(--r-legendary); } [data-r="mythical"] { --c: var(--r-mythical); } [data-r="common"] { --c: var(--r-common); }
.empty-state { padding: 60px 20px; text-align: center; color: var(--moon-dim); border: 1px dashed var(--line-strong); border-radius: 14px; }
.empty-state b { display: block; font-family: var(--f-display); font-weight: 900; font-size: 2rem; text-transform: uppercase; color: var(--moon); }

/* Panels + tables */
.panel { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(170deg, rgba(var(--ink1-rgb),.55), rgba(var(--ink1-rgb),.65)); padding: clamp(16px, 2.4vw, 26px); min-width: 0; }
.panel h3 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: 1.7rem; line-height: 1; }
.panel-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 12px; max-height: 75vh; }
table.tbl { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--ink-2); text-align: left; padding: 11px 14px; font-family: var(--f-hud); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--moon-mute); font-weight: 700; white-space: nowrap; }
.tbl th button { all: unset; cursor: pointer; }
.tbl th[aria-sort] { color: var(--gold); }
.tbl td { padding: 10px 14px; border-top: 1px solid var(--line); color: var(--moon-dim); vertical-align: middle; }
.tbl td.nm { color: var(--moon); font-weight: 700; white-space: nowrap; }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: rgba(var(--moon-rgb),.04); }
.tbl .num { text-align: right; }
.cmd-code { font-family: var(--f-hud); font-weight: 700; color: var(--gold); background: rgba(255,201,92,.1); padding: 2px 7px; border-radius: 4px; white-space: nowrap; }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 20px; background: rgba(3,2,9,.72); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; }
.modal.open { opacity: 1; visibility: visible; transition: opacity .3s; }
.modal-card { position: relative; width: min(920px, 100%); max-height: calc(100svh - 40px); overflow-y: auto; border-radius: 18px; border: 1px solid var(--line-strong); background: linear-gradient(170deg, var(--ink-2), var(--ink-0)); transform: translateY(20px) scale(.97); transition: transform .45s var(--ease-out); }
.modal.open .modal-card { transform: none; }
.modal-x { position: absolute; right: 14px; top: 14px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(var(--ink-rgb),.7); color: var(--moon); font-size: 1rem; }
.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 160; transform: translate(-50%, 30px); opacity: 0; display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 10px; background: var(--ink-3); border: 1px solid var(--line-strong); box-shadow: 0 20px 50px rgba(0,0,0,.5); transition: transform .45s var(--ease-back), opacity .3s; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* Page transition: a moon wipe between pages */
.pt { position: fixed; inset: 0; z-index: 250; pointer-events: none; background: var(--ink-0); clip-path: circle(0% at var(--px, 50%) var(--py, 50%)); transition: clip-path .55s var(--ease-io); }
.pt.go { clip-path: circle(150% at var(--px, 50%) var(--py, 50%)); pointer-events: auto; }
.pt::after { content: ''; position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--m1), var(--m3) 60%, var(--m4)); box-shadow: 0 0 60px rgba(var(--glow-rgb),.5); transform: scale(0); transition: transform .4s var(--ease-back) .2s; }
.pt.go::after { transform: scale(1); }
.pt-in main, .pt-in .page-hero { animation: ptIn .8s var(--ease-out) both; }
@keyframes ptIn { from { clip-path: circle(0% at 50% 30%); } to { clip-path: circle(150% at 50% 30%); } }

/* =========================================================
   EFFECTS LIBRARY
   ========================================================= */
.fx-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 140; pointer-events: none; }
.dmg { position: absolute; z-index: 20; pointer-events: none; font-family: var(--f-display); font-weight: 900; font-size: 2.2rem; color: #fff; -webkit-text-stroke: 1.5px rgba(0,0,0,.5); text-shadow: 0 4px 14px rgba(0,0,0,.6); animation: dmgUp .9s var(--ease-out) forwards; white-space: nowrap; }
.dmg.crit { color: var(--gold); font-size: 3rem; }
.dmg.heal { color: #86efac; }
.dmg.bad { color: #fca5a5; }
@keyframes dmgUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -80px) scale(1); } }
.shockwave { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; border: 4px solid var(--sw, #ff4d5e); box-shadow: 0 0 40px var(--sw, #ff4d5e), inset 0 0 30px var(--sw, #ff4d5e); pointer-events: none; animation: swave .9s ease-out forwards; z-index: 15; }
@keyframes swave { to { transform: scale(24); opacity: 0; border-width: 1px; } }
.evolve-stage { position: relative; display: grid; place-items: center; }
.evolving .evo-img { animation: evoPulse var(--ep, .5s) ease-in-out infinite alternate; }
@keyframes evoPulse { from { filter: brightness(0) invert(1) drop-shadow(0 0 20px #fff); transform: scale(.96); } to { filter: brightness(0) invert(1) drop-shadow(0 0 50px #fff); transform: scale(1.04); } }
.evo-rays { position: absolute; inset: -20%; pointer-events: none; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.5) 0deg 3deg, transparent 3deg 14deg); -webkit-mask: radial-gradient(circle, #000 5%, transparent 55%); mask: radial-gradient(circle, #000 5%, transparent 55%); opacity: 0; transition: opacity .6s; animation: spinR 10s linear infinite; }
.evolving .evo-rays { opacity: 1; }
.evo-flash { position: fixed; inset: 0; z-index: 145; background: #fff; opacity: 0; pointer-events: none; }
.evo-flash.go { animation: evoFlash 1.3s ease-out; }
@keyframes evoFlash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes spinR { to { rotate: 360deg; } }
.scratch { position: relative; border-radius: 16px; overflow: hidden; touch-action: none; }
.scratch canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; transition: opacity .8s; z-index: 3; }
.scratch.done canvas { opacity: 0; pointer-events: none; }
.levelup { position: fixed; left: 50%; top: 45%; z-index: 150; transform: translate(-50%, -50%); pointer-events: none; text-align: center; }
.levelup b { display: block; font-family: var(--f-display); font-weight: 900; font-size: clamp(3rem, 10vw, 7rem); text-transform: uppercase; line-height: .9; background: linear-gradient(180deg, #fff, var(--gold) 60%, #e8962a); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(255,201,92,.6)); animation: luPop 2s var(--ease-back) forwards; white-space: nowrap; }
.levelup span { display: block; font-family: var(--f-hud); letter-spacing: .3em; text-transform: uppercase; color: var(--moon); animation: luPop 2s var(--ease-back) .1s both; }
.levelup .ring { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 3px solid var(--gold); animation: swave 1.2s ease-out forwards; }
@keyframes luPop { 0% { opacity: 0; transform: scale(.3); } 20% { opacity: 1; transform: scale(1.1); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05) translateY(-20px); } }
.chest { position: relative; width: 150px; height: 150px; display: grid; place-items: center; cursor: pointer; border: 0; background: transparent; padding: 0; }
.chest > img, .chest > .ico { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 16px 20px rgba(0,0,0,.6)); }
.chest.shaking > * { animation: chestShake .1s linear infinite; }
@keyframes chestShake { 25% { transform: rotate(-7deg) scale(1.04); } 75% { transform: rotate(7deg) scale(1.04); } }
.chest.opened > * { animation: chestPop .6s var(--ease-back) forwards; }
@keyframes chestPop { 40% { transform: scale(1.4); filter: brightness(3) drop-shadow(0 0 40px #ffc95c); } 100% { transform: scale(.85); opacity: .3; } }
.loot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.loot span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,201,92,.12); border: 1px solid rgba(255,201,92,.4); font-weight: 700; animation: lootIn .6s var(--ease-back) both; animation-delay: var(--d, 0s); }
@keyframes lootIn { from { opacity: 0; transform: translateY(20px) scale(.5); } }
video.alpha { background: transparent; }

@media (max-width: 960px) {
  .layout { grid-template-columns: 1fr; }
  .rail { position: static; max-height: none; overflow: visible; }
  .elgrid { grid-template-columns: repeat(10, 1fr); }
}
@media (max-width: 560px) { .elgrid { grid-template-columns: repeat(6, 1fr); } .dex { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (prefers-reduced-motion: reduce) { .pt { display: none; } .dcard { animation: none; } }
.rail-toggle { display: none; }
@media (max-width: 960px) {
  .rail-toggle { display: inline-flex; justify-content: center; }
  .rail.collapsed > :not(.search):not(.rail-toggle) { display: none; }
}
.spr { display: inline-block; background-repeat: no-repeat; flex: none; }
i.ico { width: 1.15em; height: 1.15em; vertical-align: -.22em; }
i.ico.lg { width: 28px; height: 28px; }
.spr-titan { width: 100%; aspect-ratio: 1; display: block; }
.spr-big { height: 100%; max-width: 100%; aspect-ratio: 1; width: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,.65)); }

.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { position: fixed; left: 16px; top: 16px; width: auto; height: auto; clip-path: none; z-index: 300; padding: 10px 14px; background: var(--gold); color: var(--gold-ink); border-radius: 6px; }
@media (max-width: 600px) { .phase .tip { display: none; } }

/* Card art always fits inside its frame, with padding, and never covers the text below it. */
.dcard .art { position: relative; padding: 0; }
.dcard .art img { position: absolute; left: 10%; right: 10%; top: 16%; bottom: 4%; width: 80%; height: 80%; max-width: none; object-fit: contain; object-position: center bottom; }

/* ---------- Alternative themes (review: switch in the options panel) ---------- */
html[data-theme="jade"] {
  --ink-rgb: 4, 12, 11; --ink1-rgb: 7, 19, 16;
  --ink-0: #040c0b; --ink-1: #071310; --ink-2: #0d1e19; --ink-3: #153027;
  --line-rgb: 170, 255, 220; --moon-rgb: 238, 252, 246;
  --moon: #eefcf6; --moon-dim: #a9cfc2; --moon-mute: #6d9486;
  --accent-rgb: 46, 230, 166; --violet: #2ee6a6; --violet-hi: #9ff5d4;
  --glow-rgb: 190, 255, 230; --crater-rgb: 80, 160, 130; --shade-rgb: 6, 50, 40;
  --m1: #fbfffd; --m2: #dcf7ee; --m3: #a6e3cf; --m4: #5fae94; --m5: #24584a;
  --o2: #d5fff0; --o3: #4fe3b0; --o4: #0d6b52;
  --sky: radial-gradient(120% 80% at 70% 0%, rgba(46, 230, 166, .22), transparent 60%), radial-gradient(70% 60% at 20% 10%, rgba(255, 194, 74, .1), transparent 70%);
}
html[data-theme="crimson"] {
  --ink-rgb: 12, 5, 8; --ink1-rgb: 21, 8, 13;
  --ink-0: #0c0508; --ink-1: #15080d; --ink-2: #220d16; --ink-3: #341522;
  --line-rgb: 255, 190, 205; --moon-rgb: 255, 241, 243;
  --moon: #fff1f3; --moon-dim: #ddb6be; --moon-mute: #9b707a;
  --accent-rgb: 255, 61, 110; --violet: #ff3d6e; --violet-hi: #ffa0b7;
  --glow-rgb: 255, 170, 170; --crater-rgb: 160, 50, 60; --shade-rgb: 70, 6, 20;
  --m1: #fff2ec; --m2: #ffc7b5; --m3: #f2836b; --m4: #b53a35; --m5: #4e0f19;
  --o2: #ffd3d9; --o3: #ff5f84; --o4: #7a0f2c;
  --sky: radial-gradient(120% 80% at 70% 0%, rgba(255, 50, 70, .3), transparent 60%), radial-gradient(70% 60% at 20% 10%, rgba(255, 160, 60, .12), transparent 70%);
}

/* When the main nav slides away, sticky bars move up to the top edge instead of leaving a gap. */
.subnav { transition: top .35s var(--ease-out); }
html.nav-off .subnav { top: env(safe-area-inset-top, 0px); }
html.nav-off .rail, html.nav-off .an-side, html.nav-off .toc { top: 24px; }

.foot-staff { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 34px; color: var(--moon-mute); }
.foot-staff a { display: inline; padding: 0; font-size: .72rem; color: var(--moon-dim); }
.rv-opts { display: grid; gap: 6px; }
.rv-opts button { text-align: left; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,228,92,.3); background: transparent; color: inherit; }
.rv-opts button[aria-pressed="true"] { border-color: var(--review); background: rgba(255,228,92,.14); }
/* Card hover follows rarity: grey, green, blue, purple, gold, pink. No rainbow foil. */
.dcard .sheen { mix-blend-mode: screen; background: linear-gradient(115deg, transparent 25%, color-mix(in srgb, var(--c) 45%, transparent) 45%, rgba(255,255,255,.22) 50%, color-mix(in srgb, var(--c) 45%, transparent) 55%, transparent 75%); background-size: 250% 250%; }
.dcard[data-r="legendary"] .sheen, .dcard[data-r="mythical"] .sheen { opacity: .18; }
.dcard:hover .sheen { opacity: .55; }
.dcard:hover { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 22px 44px -16px color-mix(in srgb, var(--c) 75%, transparent), inset 0 0 40px -10px color-mix(in srgb, var(--c) 45%, transparent); }

/* Footer socials: brand icons only */
.socials { display: flex; flex-wrap: wrap; gap: 10px; }
.socials a { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 1px solid var(--line-strong); color: var(--moon-dim); transition: color .2s, background .2s, border-color .2s, transform .3s var(--ease-back); }
.socials a svg { width: 18px; height: 18px; fill: currentColor; }
.socials a:hover, .socials a:focus-visible { color: var(--gold-ink); background: var(--gold); border-color: var(--gold); transform: translateY(-3px); }

/* Staff menu (Dev panel, Art portal) */
.nav-staff { position: relative; }
.nav-staff > button { padding: 8px 12px; border: 0; background: none; color: var(--gold); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.nav-staff.on > button, .nav-staff > button:hover { color: var(--gold-hi); }
.nav-staff-menu { position: absolute; left: 0; top: calc(100% + 8px); min-width: 250px; padding: 8px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(var(--ink-rgb), .96); backdrop-filter: blur(14px); box-shadow: 0 20px 40px rgba(0,0,0,.5); display: grid; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .25s var(--ease-out), visibility .2s; text-transform: none; letter-spacing: normal; font-family: var(--f-body); }
.nav-staff:hover .nav-staff-menu, .nav-staff:focus-within .nav-staff-menu, .nav-staff.open .nav-staff-menu { opacity: 1; visibility: visible; transform: none; }
.nav-staff-menu a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 8px; text-decoration: none; color: var(--moon); }
.nav-staff-menu a::after { display: none; }
.nav-staff-menu a:hover, .nav-staff-menu a:focus-visible { background: rgba(var(--moon-rgb), .07); }
.nav-staff-menu b { font-size: .95rem; }
.nav-staff-menu small { color: var(--moon-mute); font-size: .78rem; }
.nav-staff-note { padding: 6px 12px 4px; font-size: .7rem; color: var(--moon-mute); border-top: 1px solid var(--line); margin-top: 4px; }
/* Keep the nav on one line at laptop widths */
.brand span, .nav-login, .nav .btn { white-space: nowrap; }
@media (max-width: 1240px) { .nav-links { gap: 0; margin-left: 4px; } .nav-links a, .nav-staff > button { padding: 8px 8px; } .nav-right { gap: 8px; } }
@media (max-width: 1100px) { .nav-links { font-size: .66rem; } .nav-staff > button span { display: none; } }
.nav-staff > button { white-space: nowrap; }

/* Logged-in nav: account menu */
button.nav-login { background: none; border: 0; cursor: pointer; }
.brand, .nav-links a, .nav-staff, .nav-right > * { flex-shrink: 0; }
.nav-links { white-space: nowrap; min-width: 0; }
.nav-acct { position: relative; }
.nav-av { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px 0 5px; border-radius: 999px; border: 0; background: rgba(var(--moon-rgb), .06); box-shadow: inset 0 0 0 1px var(--line); color: var(--moon); cursor: pointer; }
.nav-av:hover, .nav-acct.open .nav-av { box-shadow: inset 0 0 0 1px var(--gold); }
.nav-av img { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; object-fit: cover; }
.nav-av span { font-size: .66rem; white-space: nowrap; } .nav-av i { font-style: normal; font-size: .6rem; color: var(--moon-mute); }
.nav-acct-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 8px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(var(--ink-rgb), .97); backdrop-filter: blur(14px); box-shadow: 0 20px 50px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 5; }
.nav-acct.open .nav-acct-menu, .nav-acct:focus-within .nav-acct-menu { opacity: 1; visibility: visible; transform: none; }
.nav-acct-who { display: flex; gap: 10px; align-items: center; padding: 8px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.nav-acct-who img { width: 38px; height: 38px; border-radius: 50%; } .nav-acct-who b { display: block; } .nav-acct-who small { color: var(--moon-mute); font-size: .76rem; }
.nav-acct-menu a, .nav-acct-menu button { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; border: 0; background: none; color: var(--moon); text-decoration: none; font: inherit; font-size: .92rem; cursor: pointer; }
.nav-acct-menu a:hover, .nav-acct-menu button:hover { background: rgba(var(--moon-rgb), .07); }
.nav-acct-menu button { color: #ff9aa2; }
@media (max-width: 1320px) { .nav-av span { display: none; } .nav-av { padding: 0 8px 0 5px; } }
@media (max-width: 1160px) { .nav-in { gap: 16px; } .brand span { font-size: 1.25rem; } .nav .btn { padding: .8em .9em; } }
@media (max-width: 1060px) { .nav .btn-gold { font-size: 0; gap: 0; padding: 0; width: 42px; height: 42px; justify-content: center; } .nav .btn-gold svg { width: 18px; height: 18px; } }
@media (max-width: 980px) { .nav-acct { display: none; } }
/* Sound toggle: speaker with ✕ when muted, waves when on */
.snd { width: 20px; height: 20px; color: var(--moon-dim); transition: color .25s; }
.snd .snd-on { display: none; } .sound-on .snd .snd-on { display: inline; } .sound-on .snd .snd-off { display: none; }
.sound-on .snd { color: var(--gold); }
.sound-on .snd .w1 { animation: sndw 1.2s ease-in-out infinite; } .sound-on .snd .w2 { animation: sndw 1.2s ease-in-out -.4s infinite; }
@keyframes sndw { 50% { opacity: .35; } }
#soundBtn:hover .snd { color: var(--moon); } .sound-on #soundBtn:hover .snd { color: var(--gold-hi, #ffd98a); }
/* Filter rail: no inner scrollbar. Tighter spacing; when taller than the window it scrolls with the page and sticks by its bottom edge (top is set in luna.js). */
@media (min-width: 981px) { .rail { max-height: none; overflow: visible; gap: 16px; padding-right: 0; } .rail h4 { margin-bottom: 8px; } }

/* Ask Luna support chat */
.ask-fab { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(82px + env(safe-area-inset-bottom, 0px)); z-index: 85; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; background: linear-gradient(135deg, #ffd27a, #ff9a4d); color: #1a1008; box-shadow: 0 10px 30px rgba(255,170,80,.35), inset 0 0 0 1px rgba(255,255,255,.35); cursor: pointer; transition: transform .3s var(--ease-back); }
.ask-fab:hover { transform: scale(1.08); }
.ask-fab svg { width: 24px; height: 24px; } .ask-fab .ask-x { display: none; } .ask-fab.open .ask-x { display: inline; } .ask-fab.open .ask-o { display: none; }
.ask-hint { position: absolute; right: 62px; white-space: nowrap; padding: 7px 12px; border-radius: 999px; background: var(--ink-3, #221a14); color: var(--moon); font-family: var(--f-hud); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; box-shadow: 0 8px 20px rgba(0,0,0,.4); opacity: 0; transform: translateX(8px); transition: .35s; pointer-events: none; }
.ask-fab.hint .ask-hint, .ask-fab:hover .ask-hint { opacity: 1; transform: none; } .ask-fab.open .ask-hint { opacity: 0; }
.ask-win { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(146px + env(safe-area-inset-bottom, 0px)); z-index: 86; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100svh - 190px)); display: grid; grid-template-rows: auto 1fr auto auto auto; border-radius: 18px; border: 1px solid var(--line-strong); background: rgba(var(--ink-rgb), .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: 0 30px 80px rgba(0,0,0,.6); overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transform-origin: bottom right; transition: opacity .25s, transform .3s var(--ease-out), visibility .25s; }
.ask-win.open { opacity: 1; visibility: visible; transform: none; }
.ask-head { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,201,92,.12), transparent 70%); }
.ask-head img { width: 36px; height: 36px; border-radius: 50%; } .ask-head div { flex: 1; } .ask-head b { display: block; }
.ask-head small { display: flex; align-items: center; gap: 6px; color: var(--moon-mute); font-size: .74rem; } .ask-head small i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; }
.ask-min { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: none; color: var(--moon-dim); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ask-log { overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ask-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: .9rem; line-height: 1.45; }
.ask-msg.luna { align-self: flex-start; background: rgba(var(--moon-rgb), .07); border-bottom-left-radius: 4px; color: var(--moon); }
.ask-msg.you { align-self: flex-end; background: linear-gradient(135deg, #ffd27a, #ff9a4d); color: #1a1008; border-bottom-right-radius: 4px; font-weight: 600; }
.ask-msg a { color: var(--gold); }
.ask-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ask-links a { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,201,92,.35); text-decoration: none; font-size: .78rem; }
.ask-msg.typing { display: flex; gap: 4px; padding: 12px 14px; } .ask-msg.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--moon-dim); animation: askDot 1s infinite; } .ask-msg.typing i:nth-child(2) { animation-delay: .15s; } .ask-msg.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes askDot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.ask-sug { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 10px; } .ask-sug button { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: none; color: var(--moon-dim); font-size: .78rem; cursor: pointer; } .ask-sug button:hover { border-color: var(--gold); color: var(--moon); }
.ask-in { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.ask-in input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--moon); font: inherit; }
.ask-in button { width: 42px; border-radius: 10px; border: 0; background: var(--gold); color: #1a1008; cursor: pointer; } .ask-in button svg { width: 18px; height: 18px; }
.ask-note { margin: 0; padding: 0 14px 10px; color: var(--moon-mute); font-size: .68rem; }
/* Phone menu, redesigned: starts under the header, scrolls, sized to fit */
.mnav { display: block; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--nav-h) + 18px) var(--gutter) calc(30px + env(safe-area-inset-bottom, 0px)); }
.mnav-in { max-width: 560px; display: grid; gap: 18px; }
.mnav a, .mnav .btn { font-family: inherit; font-weight: inherit; font-size: inherit; text-transform: none; transform: none; opacity: 1; line-height: normal; }
.mnav-me { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--line-strong); background: rgba(var(--moon-rgb), .04); }
.mnav-me img { width: 42px; height: 42px; border-radius: 50%; } .mnav-me div { flex: 1; } .mnav-me b { display: block; } .mnav-me small { color: var(--moon-mute); font-size: .8rem; }
.mnav-me button { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,138,148,.4); background: none; color: #ff9aa2; font-weight: 600; }
.mnav-main { display: grid; }
.mnav .mnav-main a { display: flex; align-items: baseline; gap: 14px; padding: 6px 0; border-bottom: 1px solid var(--line); font-family: var(--f-display); font-weight: 900; font-size: clamp(1.9rem, 9.5vw, 2.8rem); line-height: 1.05; text-transform: uppercase; text-decoration: none; color: var(--moon); opacity: 0; transform: translateY(16px); transition: transform .5s var(--ease-out), opacity .5s, color .2s; transition-delay: calc(var(--i) * .04s); }
.mnav.open .mnav-main a { opacity: 1; transform: none; }
.mnav-main a span { font-family: var(--f-hud); font-size: .7rem; color: var(--moon-mute); letter-spacing: .1em; min-width: 22px; }
.mnav-main a i { margin-left: auto; font-style: normal; font-size: 1.2rem; color: var(--moon-mute); transition: transform .25s, color .25s; }
.mnav-main a:hover i, .mnav-main a[aria-current] i { color: var(--gold); transform: translateX(4px); }
.mnav-main a[aria-current] { color: var(--gold); }
.mnav-sub { display: flex; flex-wrap: wrap; gap: 8px; }
.mnav .mnav-sub a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--moon-dim); text-decoration: none; font-size: .9rem; }
.mnav-staff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--gold); }
.mnav-staff .hud { font-size: .6rem; color: var(--moon-mute); margin-right: 2px; }
.mnav .mnav-staff a { padding: 6px 12px; border-radius: 999px; background: rgba(255,201,92,.08); border: 1px solid rgba(255,201,92,.25); color: var(--gold); text-decoration: none; font-size: .84rem; }
.mnav-cta { display: grid; gap: 10px; margin-top: 4px; }
.mnav .mnav-cta .btn { justify-content: center; font-family: var(--f-hud); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; padding: 1em 1.4em; margin: 0; }
body.menu-open .ask-fab, body.menu-open .ask-win, body.menu-open .phase { opacity: 0; pointer-events: none; }
.mnav { align-content: start; } .mnav .mnav-cta .btn { justify-self: stretch; width: 100%; }
/* Blazor NavLink marks the current page with .on */
.nav-links a.on { color: var(--moon); }
.nav-links a.on::after { transform: scaleX(1); }
.mnav .mnav-main a.on { color: var(--gold); }
.mnav-main a.on i { color: var(--gold); transform: translateX(4px); }
.nav-acct-menu a.nav-acct-out { color: #ff9aa2; }
.mnav-me a { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255,138,148,.4); color: #ff9aa2; font-weight: 600; text-decoration: none; font-size: .9rem; }
.site { min-height: 100vh; display: flex; flex-direction: column; } .site > main { flex: 1 0 auto; }
.legacy-page { padding-top: var(--nav-h, 72px); }

/* Blazor's FocusOnNavigate moves focus to the h1 for screen readers; don't draw a ring around it. */
h1:focus, h1:focus-visible, [tabindex="-1"]:focus { outline: none; }
/* Hover ring that keeps colours true (staff tools, data-cursor="ring") */
.cursor.big.ring { background: transparent; border: 2px solid var(--gold); mix-blend-mode: normal; }