/* litrpg.audio design system: dark field, gold accent, hexagonal dot-grid HUD. */
:root {
  --bg: #0b0d12;
  --glow: #3a2414;
  --panel: rgba(18, 22, 32, 0.72);
  --panel-solid: #121620;
  --text: #f4efe6;
  --dim: #9aa0b3;
  --accent: #d6b65a;
  --accent-ink: #17130a;
  --accent-soft: rgba(214, 182, 90, 0.14);
  --track: #1d2230;
  --line: #262c3c;
  --err: #e48a7a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "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), var(--bg) 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(154, 160, 179, 0.13);
  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; }

/* 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(--accent); }

/* 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: #5d6476; }
.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(214, 182, 90, 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(255, 246, 220, .28), 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: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.btn-primary::before { color: rgba(23, 19, 10, .22); }
.btn-primary:hover { box-shadow: 0 0 0 1px var(--accent), 0 8px 30px -10px var(--accent); }

.btn-ghost { background: rgba(18, 22, 32, .5); color: var(--text); border: 1px solid var(--line); }
.btn-ghost::before { color: rgba(214, 182, 90, .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 */
.card {
  background: var(--panel); border: 1px solid var(--track); border-radius: 10px; padding: 24px;
  -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(214, 182, 90, .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); } }

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