/* litrpg.audio design system: deep-space field, system-blue accent, hexagonal dot-grid HUD. */
/* Wordmark face: Lexend Zetta 500 (SIL OFL), self-hosted. */
@font-face { font-family: "litrpg-wordmark"; src: url("/fonts/wordmark.woff2") format("woff2"); font-weight: 500; font-display: swap; }
/* Display face: Chakra Petch 500/600 (SIL OFL), self-hosted. Headings and HUD numbers. */
@font-face { font-family: "litrpg-display"; src: url("/fonts/display-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "litrpg-display"; src: url("/fonts/display-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --bg: #060a14;
  --glow: #0b2752;
  --panel: rgba(10, 18, 34, 0.72);
  --panel-solid: #0c1424;
  --text: #e7f0ff;
  --dim: #8d9ab5;
  --accent: #3d9bff;
  --accent-rgb: 61, 155, 255;
  --accent-hi: #8cc8ff;
  --cyan: #3ee6ff;
  --accent-ink: #021023;
  --accent-soft: rgba(61, 155, 255, 0.14);
  --track: #131d31;
  --line: #22314d;
  --err: #ff6b7d;
  --ok: #4fe3a1;
  /* Rarity colors, used sparingly: founder/lifetime is legendary. */
  --epic: #b48cff;
  --legendary: #f2c14e;
  --display: "litrpg-display", "Avenir Next Condensed", "Helvetica Neue", Arial, sans-serif;
  --serif: var(--display);
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --brand: "litrpg-wordmark", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dots: radial-gradient(circle, currentColor 0.9px, transparent 1.3px);
}
* { box-sizing: border-box; margin: 0; }
html { color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, var(--glow), transparent 70%) fixed,
    radial-gradient(ellipse 60% 40% at 50% 110%, rgba(62, 230, 255, .07), transparent 70%) fixed,
    var(--bg);
  color: var(--text);
  font-family: var(--sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: var(--accent-ink); }

/* Full-page dot field drawn by fx.js; a static CSS grid shows until it loads. */
#field {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: -1; pointer-events: none;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  color: rgba(141, 170, 220, 0.14);
  background-image: var(--dots), var(--dots);
  background-size: 24px 41.6px; background-position: 0 0, 12px 20.8px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 45%, #000 30%, transparent 100%);
}
body.fx-ready::before { opacity: 0; transition: opacity .6s; }
/* Faint CRT scanlines over everything. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(140, 200, 255, .025) 0 1px, transparent 1px 3px);
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: .01em; }

/* HUD label: small monospace caps, e.g. "// WAITLIST" */
.hud-label {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim);
}
.hud-label::before { content: "// "; color: var(--cyan); }

/* Corner brackets on any .hud element (fields, cards). */
.hud { position: relative; }
.hud::before, .hud::after {
  content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--line); border-style: solid; opacity: .9;
  transition: transform .35s var(--ease), border-color .25s, opacity .25s;
}
.hud::before { top: -5px; left: -5px; border-width: 1px 0 0 1px; }
.hud::after { bottom: -5px; right: -5px; border-width: 0 1px 1px 0; }
.hud:hover::before, .hud:focus-within::before { transform: translate(-3px, -3px); border-color: var(--accent); }
.hud:hover::after, .hud:focus-within::after { transform: translate(3px, 3px); border-color: var(--accent); }

/* Inputs */
.input {
  width: 100%; min-width: 0; padding: 13px 14px; border-radius: 6px; font: inherit; font-size: 1rem;
  color: var(--text); background: var(--panel); border: 1px solid var(--track);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  caret-color: var(--accent);
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.input::placeholder { color: #55637d; }
.input:hover { border-color: var(--line); }
.input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 24px -8px var(--accent);
  background-image: radial-gradient(circle, rgba(var(--accent-rgb), 0.09) 0.9px, transparent 1.3px);
  background-size: 8px 8px;
  animation: drift 6s linear infinite;
}
@keyframes drift { to { background-position: 8px 8px; } }

/* Buttons. A dot pattern sweeps across on hover; a soft light follows the cursor (fx.js sets --mx/--my). */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 6px; font: inherit; font-size: .98rem; font-weight: 600;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--ease), box-shadow .3s, border-color .25s, color .25s, background-color .25s;
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: var(--dots); background-size: 7px 7px;
  transform: translateX(-101%); transition: transform .5s var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(120px circle at var(--mx, 50%) var(--my, 50%), rgba(200, 232, 255, .3), transparent 60%);
  transition: opacity .3s;
}
.btn:hover::before { transform: translateX(0); }
.btn:hover::after { opacity: 1; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn:disabled { opacity: .55; cursor: default; }
.btn:disabled::before, .btn:disabled::after { display: none; }

.btn-primary {
  background: linear-gradient(180deg, #5cb0ff, var(--accent)); color: var(--accent-ink); border: 1px solid var(--accent-hi);
  box-shadow: 0 0 18px -6px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .35);
  font-family: var(--display); letter-spacing: .04em;
}
.btn-primary::before { color: rgba(2, 16, 35, .25); }
.btn-primary:hover { box-shadow: 0 0 0 1px var(--accent-hi), 0 8px 34px -8px var(--accent), inset 0 1px 0 rgba(255, 255, 255, .35); }

.btn-ghost { background: rgba(10, 18, 34, .5); color: var(--text); border: 1px solid var(--line); }
.btn-ghost::before { color: rgba(var(--accent-rgb), .22); }
.btn-ghost:hover { border-color: var(--accent); color: #fff; }
.btn-danger { background: transparent; color: var(--err); border: 1px solid #4a2a26; }
.btn-danger::before { color: rgba(228, 138, 122, .22); }
.btn-danger:hover { border-color: var(--err); }
.btn-sm { padding: 5px 10px; font-size: .82rem; font-weight: 500; }
.btn-block { width: 100%; }

.link-btn {
  background: none; border: 0; padding: 0; font: inherit; font-size: .88rem; color: var(--dim); cursor: pointer;
  background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0 1px;
  background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s var(--ease), color .2s;
}
.link-btn:hover, .link-btn:focus-visible { color: var(--text); background-size: 100% 1px; outline: none; }

/* Cards */
/* Cards read as "system windows": a lit top edge over a dark glass panel. */
.card {
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .06), transparent 120px), var(--panel);
  border: 1px solid var(--line); border-radius: 10px; padding: 24px;
  box-shadow: inset 0 1px 0 rgba(var(--accent-rgb), .28);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: border-color .3s, transform .3s var(--ease), box-shadow .3s;
}
.card.lift:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: 0 12px 40px -20px rgba(var(--accent-rgb), .35); }

/* Status messages */
.msg { min-height: 1.4em; margin-top: 12px; font-size: .95rem; color: var(--dim); }
.msg.ok { color: var(--accent); }
.msg.err { color: var(--err); }
.msg:not(:empty) { animation: rise .35s var(--ease); }

/* Views fade and rise into place instead of snapping. */
.enter { animation: rise .45s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }

/* Loading dots */
.loader { display: inline-flex; gap: 6px; }
.loader i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: blink 1.2s infinite both; }
.loader i:nth-child(2) { animation-delay: .15s; }
.loader i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .2; transform: scale(.7); } 40% { opacity: 1; transform: scale(1); } }

/* "[ SYSTEM ]"-style tag, e.g. <span class="sys-tag">System notice</span> */
.sys-tag {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .7rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--cyan);
  padding: 5px 10px; border: 1px solid rgba(62, 230, 255, .35); border-radius: 3px;
  background: rgba(62, 230, 255, .06); text-shadow: 0 0 10px rgba(62, 230, 255, .5);
}
.sys-tag::before { content: ""; width: 6px; height: 6px; background: var(--cyan); transform: rotate(45deg); box-shadow: 0 0 8px var(--cyan); }
.legendary { color: var(--legendary); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Analytics consent banner (ga.js) */
.consent {
  position: fixed; z-index: 60; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 420px; margin-left: auto; padding: 16px 18px; display: grid; gap: 12px; text-align: left;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .08), transparent 80px), var(--panel-solid);
  animation: rise .45s var(--ease) both;
}
.consent p { margin: 0; font-size: .92rem; color: var(--text); line-height: 1.5; }
.consent a { color: var(--accent-hi); }
.consent-row { display: flex; gap: 8px; justify-content: flex-end; }