/* Aurora — Design-Overlay für die öffentliche Seite (6692 Network:
   index/servers/seiten/bots/GameServer). Wird in jeder Seite als LETZTES
   Stylesheet eingebunden (direkt vor </head>), damit es die seiteneigenen
   <style>-Blöcke und das Nocturne-Basis-Stylesheet aus ds-base.js bei
   gleicher Spezifität überschreibt. Gleiche Sprache wie das Dashboard
   (web/src/styles/aurora.css): Glas-Flächen, Leuchtrand an der Maus
   (--mx/--my setzt aurora-public.js), Sora + JetBrains Mono. */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --color-bg: #0b0a1f;
  --color-accent: #7c6cff;
  --color-accent-2: #2ee0f5;
  --glass: rgba(21, 19, 58, 0.55);
  --glass-strong: rgba(19, 17, 52, 0.85);
  --glass-border: rgba(178, 168, 255, 0.14);
  --glass-border-bright: rgba(178, 168, 255, 0.34);
  --glow-a: #7c6cff;
  --glow-b: #2ee0f5;
  --font-heading: "Sora", "Inter", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-lg: 22px;
  --radius-sm: 10px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background:
    radial-gradient(circle, rgba(233, 233, 237, 0.07) 1px, transparent 1.5px) 0 0 / 28px 28px,
    radial-gradient(1100px 700px at 8% -12%, color-mix(in srgb, var(--glow-a) 24%, transparent), transparent 62%),
    radial-gradient(900px 600px at 104% 108%, color-mix(in srgb, var(--glow-b) 12%, transparent), transparent 60%),
    var(--color-bg);
  background-attachment: fixed;
  min-height: 100vh;
}

/* — Hintergrund-Motive (Canvas aus aurora-public.js) hinter dem Inhalt — */
.aurora-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.wrap { position: relative; z-index: 1; }
/* Startseite: weiches Aurora-Band hinter der Überschrift (rein CSS, zusätzlich zum Canvas) */
.hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 8%; right: 8%; top: 14%; height: 46%;
  background:
    radial-gradient(60% 70% at 30% 50%, color-mix(in srgb, var(--glow-a) 38%, transparent), transparent 70%),
    radial-gradient(50% 60% at 70% 45%, color-mix(in srgb, var(--glow-b) 26%, transparent), transparent 70%);
  filter: blur(70px); opacity: 0.8;
}
/* Überschriften/Kacheln liegen im .wrap-Stacking-Kontext über dem Canvas;
   das Band (z-index -1 in diesem Kontext) bleibt hinter ihnen, aber über
   dem Canvas — genau die gewünschte Tiefenstaffelung. */

/* — Navigation: schwebende Glas-Leiste — */
.nav {
  position: sticky; top: 12px; z-index: 5;
  width: min(1200px, calc(100% - 24px)); margin: 12px auto 0; box-sizing: border-box;
  padding: 8px 10px 8px 18px; gap: 4px;
  border-radius: 999px; border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)), var(--glass);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 20px 60px -30px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.nav .nav-brand { font-weight: 700; letter-spacing: -0.02em; margin-right: auto; padding-right: 12px; }
.nav a { padding: 7px 13px; border-radius: 999px; color: rgba(233, 233, 237, 0.68); font-size: 13.5px; transition: color .15s, background .15s, box-shadow .25s var(--ease-out); }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current='page'] {
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--glow-a) 85%, transparent), color-mix(in srgb, var(--glow-b) 35%, var(--glow-a)));
  box-shadow: 0 0 18px -6px var(--glow-a), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.nav .nav-brand:hover { background: none; color: #fff; }

/* — Typografie — */
.display, .kicker[style*="font-size: 40px"], .server-title h1, .not-found h1 {
  font-family: var(--font-heading); font-weight: 700; letter-spacing: -0.03em;
  background: linear-gradient(92deg, #ffffff 0%, #d9d4ff 70%, #b9f5ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.kicker[style*="font-size: 40px"] { text-transform: none; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px; }
.kicker[style*="font-size: 40px"]::before { display: none; }
.kicker { color: var(--glow-b); }
.kicker::before { background: var(--glow-b); box-shadow: 0 0 10px var(--glow-b); }
/* Der zweite .kicker unter der Seitenüberschrift ist inhaltlich eine
   Unterzeile, kein Label — daher als ruhiger Fließtext statt in
   Versalien; die festen Inline-Maße (width/height) müssen weg, sonst
   läuft der Text aus der Box. */
.kicker:not([style*="font-size"]) {
  text-transform: none; letter-spacing: 0; font-size: 14.5px; line-height: 1.55;
  color: rgba(233, 233, 237, 0.62); width: auto !important; height: auto !important;
  max-width: 58ch; margin-bottom: 8px;
}
.kicker:not([style*="font-size"])::before { display: none; }
.tile-title, .server-name, .dialog-title, .card-title { font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.015em; }
.connect-ip, .connect-val, .tabular-nums { font-family: var(--font-mono); }

/* — Startseiten-Kacheln: Glas + Kategorie-Glow + Leuchtrand an der Maus — */
.tile {
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  background:
    radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--glow-b) 16%, transparent), transparent 62%),
    radial-gradient(circle, rgba(233, 233, 237, 0.12) 1px, transparent 1.5px) 0 0 / 22px 22px,
    var(--tile-glow),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--glass);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.tile:hover {
  border-color: var(--glass-border-bright); transform: translateY(-4px);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.95), 0 0 46px -18px var(--glow-a), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  background-position: 0 0, 0 0, 0 0, 0 0, 0 0;
}
.tile::before { background: linear-gradient(to top, rgba(11, 10, 31, 0.85) 8%, transparent 70%); }
.tile-title { font-size: 23px; }

/* — Karten (Server, Bots, öffentliche Seiten, Detail-Blöcke) — */
.server-card, .public-card, .detail-block {
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  background:
    radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--glow-a) 16%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)),
    var(--glass);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 10px 30px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: border-color .3s var(--ease-out), transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.server-card::before, .public-card::before { display: none; }
.server-card:hover, .public-card:hover {
  border-color: var(--glass-border-bright); transform: translateY(-4px);
  box-shadow: 0 24px 50px -26px rgba(0, 0, 0, 0.95), 0 0 46px -18px var(--glow-a), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.detail-block:hover { border-color: var(--glass-border-bright); }
.server-icon-badge, .lock-icon, .public-icon {
  border-radius: 12px; border: 1px solid color-mix(in srgb, var(--glow-a) 40%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--glow-a) 35%, transparent), color-mix(in srgb, var(--glow-b) 18%, transparent));
  box-shadow: 0 0 18px -8px var(--glow-a);
}
.server-icon, .lock-icon svg { color: #dcd8ff; }
.server-meta { border-top-color: var(--glass-border); }
.public-card .arrow { color: var(--glow-b); }
.status-dot--live { box-shadow: 0 0 8px var(--color-success); }
.status-dot--warn { box-shadow: 0 0 8px var(--color-warning); }
.tag { border-radius: 999px; border: 1px solid transparent; }
.tag-outline { color: #b6f3fb; border-color: color-mix(in srgb, var(--glow-b) 40%, transparent); background: color-mix(in srgb, var(--glow-b) 12%, transparent); }
.connect-ip, .cmd-list code {
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--glass-border); border-radius: 10px; color: #e6e3ff;
}
.cmd-list code { color: #b6f3fb; }

/* — Buttons, Eingaben, Dialog — */
.btn { border-radius: 11px; font-weight: 600; transition: background .15s, border-color .15s, box-shadow .3s var(--ease-out), transform .15s, filter .15s; }
.btn-primary {
  color: #fff; border-color: transparent;
  background: linear-gradient(135deg, var(--glow-a) 0%, color-mix(in srgb, var(--glow-a) 55%, var(--glow-b)) 100%);
  box-shadow: 0 8px 22px -12px var(--glow-a), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 0 30px -6px color-mix(in srgb, var(--glow-a) 85%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-secondary { background: rgba(255, 255, 255, 0.045); border-color: var(--glass-border); color: #e9e9ed; }
.btn-secondary:hover { border-color: var(--glass-border-bright); box-shadow: 0 0 22px -10px var(--glow-a); }
.input { background: rgba(255, 255, 255, 0.04); border-color: var(--glass-border); border-radius: 11px; color: #e9e9ed; }
.input:focus-visible { border-color: var(--glow-a); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--glow-a) 25%, transparent), 0 0 24px -8px var(--glow-a); }
.dialog-backdrop { background: rgba(5, 4, 20, 0.6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.dialog {
  border: 1px solid var(--glass-border-bright); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), var(--glass-strong);
  backdrop-filter: blur(28px) saturate(150%); -webkit-backdrop-filter: blur(28px) saturate(150%);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, 0.95), 0 0 80px -40px var(--glow-a), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.dialog::before { display: none; }
.dialog-title .close:hover { background: rgba(255, 255, 255, 0.08); }

footer { color: rgba(233, 233, 237, 0.45); }
.hidden-access:hover, .hidden-access:focus-visible { background: var(--glow-b); box-shadow: 0 0 10px var(--glow-b); }

:focus-visible { outline: 2px solid var(--glow-b); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--glow-a) 45%, transparent); }

@media (max-width: 720px) {
  .nav { border-radius: 18px; flex-wrap: wrap; padding: 8px 10px; }
  .nav .nav-brand { width: 100%; padding: 4px 8px; }
  .nav a { font-size: 13px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile, .server-card, .public-card, .detail-block, .btn, .nav a { transition: none; }
  .tile:hover, .server-card:hover, .public-card:hover, .btn-primary:hover { transform: none; }
}