/* ===== GameFunJunkies – site.css ===== */

/* Theme */
:root {
  --bg:#0f0f12;
  --panel:#18181d;
  --panel-2:#1c1f26;
  --soft:#22242b;
  --soft-2:#2b2e36;
  --text:#eaeaea;
  --muted:#9aa0aa;
  --accent:#3b82f6;
  --accent-2:#60a5fa;
  --ok:#16a34a;
  --warn:#f59e0b;
  --err:#ef4444;
  --focus:#93c5fd;
}

/* Base */
* { box-sizing:border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial; }
a { color:var(--text); text-decoration:none; }
img { max-width:100%; height:auto; display:block; }
.container { width:min(1100px, 92%); margin:0 auto; }

/* Header / Nav */
.site-header { position:sticky; top:0; z-index:20;
  background:linear-gradient(180deg, rgba(24,24,29,.95), rgba(24,24,29,.85));
  backdrop-filter:blur(6px); border-bottom:1px solid #22242b; }
.header-row { display:flex; align-items:center; gap:.75rem; padding:.75rem 0; }
.brand-link { display:inline-block; font-weight:700; letter-spacing:.3px;
  background:var(--accent); color:#fff; padding:.38rem .6rem; border-radius:.55rem; }
.main-nav { display:flex; gap:.5rem; margin-left:1rem; }
.nav-right { margin-left:auto; display:flex; align-items:center; gap:.5rem; }

@media (max-width: 700px) {
  .main-nav { display:none; }
}

/* Buttons */
.neo-btn, button.neo-btn {
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.5rem .75rem; border-radius:.6rem;
  background:var(--soft); border:1px solid var(--soft-2); color:var(--text);
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
  cursor:pointer;
}
.neo-btn:hover { background:#2a2d35; border-color:#3a3f48; transform:translateY(-1px); }
.neo-btn:active { transform:translateY(0); }
.neo-btn[disabled], .is-disabled { opacity:.6; pointer-events:none; }

.admin-btn { background:#23304a; border-color:#2d3a58; font-weight:600; }
.admin-btn:hover { background:#2a3a5a; border-color:#3b4d74; }

.btn-accent { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-accent:hover { background:var(--accent-2); border-color:var(--accent-2); }

/* Forms */
.inline-form { display:inline; }
form { max-width:640px; }
label { display:block; margin:.5rem 0 .25rem; color:var(--muted); font-size:.95rem; }
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
  width:100%; padding:.6rem .7rem; color:var(--text); background:var(--panel);
  border:1px solid var(--soft-2); border-radius:.55rem; outline:0;
}
input:focus, textarea:focus, select:focus {
  border-color:var(--focus); box-shadow:0 0 0 3px rgba(147,197,253,.15);
}
.helptext { color:var(--muted); font-size:.85rem; }
.errorlist { margin:.4rem 0; padding-left:1rem; color:var(--err); }

/* Layout */
main.container { padding:1.2rem 0 2rem; }
.section { background:var(--panel); border:1px solid var(--soft-2);
  border-radius:.75rem; padding:1rem; }
.grid { display:grid; gap:1rem; }
.grid-2 { grid-template-columns:repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
@media (max-width: 900px) { .grid-3 { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns:1fr; } }

/* Messages (django.contrib.messages) */
.messages { list-style:none; margin:.6rem 0 1rem; padding:0; display:grid; gap:.6rem; }
.msg { padding:.7rem .85rem; border-radius:.6rem; background:var(--panel);
  border:1px solid var(--soft-2); }
.msg.success { border-color:#1f5130; background:#0f2116; }
.msg.info    { border-color:#244b6a; background:#0f1b24; }
.msg.warning { border-color:#6b4e1f; background:#231a0f; }
.msg.error   { border-color:#6a1f29; background:#261216; }

/* Tables */
.table { width:100%; border-collapse:separate; border-spacing:0; }
.table th, .table td { padding:.6rem .75rem; text-align:left; }
.table thead th { background:var(--panel-2); color:var(--muted); font-weight:600; }
.table tbody tr { border-bottom:1px solid #20222a; }
.table tbody tr:hover { background:#15161a; }

/* Cards */
.card { background:var(--panel); border:1px solid var(--soft-2);
  border-radius:.8rem; padding:1rem; }
.card h3 { margin:.2rem 0 .6rem; }

/* Utilities */
.center { text-align:center; }
.right { text-align:right; }
.m-0 { margin:0; } .mt-1 { margin-top:.25rem; } .mt-2 { margin-top:.5rem; } .mt-3 { margin-top:1rem; }
.mb-1 { margin-bottom:.25rem; } .mb-2 { margin-bottom:.5rem; } .mb-3 { margin-bottom:1rem; }
.p-1 { padding:.25rem; } .p-2 { padding:.5rem; } .p-3 { padding:1rem; }
.badge { display:inline-block; padding:.15rem .45rem; border-radius:.4rem; background:#23252c; border:1px solid #2e323b; color:#cfd3dc; font-size:.78rem; }

/* Footer */
.site-footer { border-top:1px solid #22242b; padding:1rem 0; color:var(--muted); }

/* Links im Text */
.prose a { color:var(--accent-2); text-decoration:underline; text-underline-offset:2px; }
.prose a:hover { color:#8cc4ff; }

/* Code */
code, pre { font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }
pre { background:#0b0b0e; padding:.8rem; border-radius:.6rem; border:1px solid #20222a; overflow:auto; }

/* Forms – Buttons Row */
.form-actions { display:flex; gap:.5rem; margin-top:1rem; }
.form-actions .spacer { flex:1; }

/* Alerts (inline info) */
.alert { padding:.8rem 1rem; border-radius:.6rem; border:1px solid var(--soft-2); background:var(--panel); }
.alert.ok { border-color:#1f5130; background:#0f2116; }
.alert.warn { border-color:#6b4e1f; background:#231a0f; }
.alert.err { border-color:#6a1f29; background:#261216; }

/* ====== APPENDED FANCY SKIN ====== */
/***** === Fancy Skin (non-breaking) — appended === *****/

/* ---------- Theme extensions (from "index - fancy.html") ---------- */
/* Nur Farben/Looks, keine Layout-Sizes. */
:root {
  /* Fancy palette */
  --f-red: #ff2b2b;
  --f-red-2: #c41818;
  --f-blue-1: #0c2a63;
  --f-blue-2: #03183f;
  --f-ink: #eaf2ff;
  --f-ink-dim: #c9d8ff;

  /* Glas-Card Tönung */
  --glass: hsla(220, 70%, 8%, .55);
}

/* Light-Scheme Ink-Kontrast anlehnen an Fancy */
@media (prefers-color-scheme: light) {
  :root { --f-ink: #0b1020; --f-ink-dim: #1b2950; }
}

/* ---------- Seite / Hintergrund ---------- */
/* Ersetzt nicht die Container-Breiten – nur die Optik. */
html, body { height: 100%; }

/* Fancy radialer „Aurora“-Verlauf als Seitenhintergrund */
body {
  color: var(--f-ink);
  background:
    radial-gradient(120vmax 120vmax at 50% 20%, rgba(12,42,99,.9) 0%, #092353 45%, #03183f 100%),
    radial-gradient(60vmax 60vmax at 80% 70%, rgba(0,110,255,.12), transparent 70%),
    radial-gradient(60vmax 60vmax at 20% 80%, rgba(255,30,30,.09), transparent 70%),
    var(--bg); /* Fallback aus bestehendem Theme */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* Subtiles Logo-Wasserzeichen – benötigt GFJ-Logo.png im Projekt */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  background: url('/static/core/img/GFJ-Logo-transparent.png') no-repeat center / min(64vmin, 70vh);
  opacity: .18;
  filter: blur(2px) saturate(.7);
  transform: scale(1.05);
  pointer-events: none;
  z-index: 0;
}

/* Aurora + Grain über Pseudo-Element, damit kein HTML geändert werden muss */
body::after {
  content: "";
  position: fixed;
  inset: -30vmax;
  z-index: 0;
  pointer-events: none;
  /* Aurora-Flecken + Körnung als data-URL */
  background:
    radial-gradient(closest-side, rgba(0,132,255,.18), transparent 70%) 10% 10%/60vmax 60vmax no-repeat,
    radial-gradient(closest-side, rgba(255,43,43,.14), transparent 70%) 80% 70%/70vmax 70vmax no-repeat,
    /* Grain */
    url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'>\
<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2'/></filter>\
<rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/></svg>") center/140px 140px repeat;
  filter: blur(10px) saturate(1.1);
  opacity: .12;
  animation: fancy-float 24s ease-in-out infinite;
}
@keyframes fancy-float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50%     { transform: translate3d(2%,-2%,0) scale(1.04); }
}

/* ---------- Karten / Panels (Glas-Optik) ---------- */
/* Behalte bestehende card-Paddings & -Radii, tausche nur Oberflächen aus. */
.card, .section {
  backdrop-filter: blur(18px) saturate(1.2);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    var(--glass);
  border: 1px solid rgba(255,255,255,.08);
  /* vorhandene border-radius/padding bleiben aus site.css bestehen */
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.04) inset;
  position: relative;
  overflow: clip; /* nur optisch, kein Layout-Impact */
}

/* Dezenter animierter Akzent-Ring wie in Fancy-Karte */
.card::after, .section::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  background:
    conic-gradient(from 120deg at 50% 50%,
      rgba(255,43,43,.35), rgba(0,132,255,.35), rgba(255,43,43,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  padding: 2px;
  opacity: .28;
  filter: blur(.5px);
  pointer-events: none;
  animation: spin 18s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Typo / Headline Neon-Unterstreichung ---------- */
.underline {
  position: relative;
  display: inline-block;
  padding-bottom: .25rem;
}
.underline::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; border-radius: 999px;
  background: linear-gradient(90deg, var(--f-red), #ff6a6a, var(--f-red-2));
  box-shadow: 0 0 14px rgba(255,55,55,.6);
  animation: flicker 5.5s ease-in-out infinite;
}
@keyframes flicker {
  0%,100% { opacity: 1 }
  45% { opacity: .7 }
  48% { opacity: .95 }
  50% { opacity: .65 }
  55% { opacity: .9 }
}

/* ---------- Chips (Feature Badges im Fancy-Stil) ---------- */
.chips { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
.chip {
  --b: rgba(255,255,255,.1);
  color: var(--f-ink);
  border: 1px solid var(--b);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  padding: .5rem .8rem;
  border-radius: 999px;
  font-size: .95rem;
  display: inline-flex; align-items: center; gap: .45rem;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.chip svg { width: 1.1em; height: 1.1em; opacity: .9; }

/* ---------- Buttons – Fancy Gradient CTAs (zusätzlich zu .neo-btn) ---------- */
.btn {
  --bg1: var(--f-red); --bg2: var(--f-red-2);
  display: inline-block;
  padding: .95rem 1.2rem;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--bg1), var(--bg2));
  color: #fff; font-weight: 800; letter-spacing: .03em; text-decoration: none;
  box-shadow: 0 10px 22px rgba(255,43,43,.35), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  position: relative; isolation: isolate;
}
.btn:hover   { transform: translateY(-2px); box-shadow: 0 14px 26px rgba(255,43,43,.45), inset 0 1px 0 rgba(255,255,255,.55); }
.btn:active  { transform: translateY(0); }
.btn::after {
  content: "";
  position: absolute; inset: -2px; border-radius: 18px;
  background: conic-gradient(from 0deg, #fff5, #fff0 30%, #fff5 60%, #fff0 100%);
  filter: blur(6px); opacity: .5; z-index: -1;
}
.btn.secondary {
  --bg1: #0072ff; --bg2: #0050bd;
  box-shadow: 0 10px 22px rgba(0,114,255,.32), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ---------- Logos – 3D Tilt Effekt (nur Look, keine Größe) ---------- */
.logoWrap { perspective: 1200px; }
.logo {
  transform-style: preserve-3d;
  transition: transform .18s ease;
  filter:
    drop-shadow(0 18px 40px rgba(0,142,255,.35))
    drop-shadow(0 0 18px rgba(255,30,30,.25));
}

/* ---------- Footer (Fancy-Farben) ---------- */
.site-footer { color: var(--f-ink-dim); }
.site-footer a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(255,255,255,.25); }
.site-footer a:hover { opacity: .9; }

/* ---------- Reduced Motion Respekt ---------- */
@media (prefers-reduced-motion: reduce) {
  body::after, .card::after, .section::after, .logo { animation: none !important; transition: none !important; transform: none !important; }
}


/* ---- index.html ------ */
.gradient-text {
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--ok));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-title {
  font-size: clamp(2.2rem, 4.5vw + 1rem, 5rem);
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.5px;
  text-shadow: 0 0 20px color-mix(in srgb, var(--accent) 30%, transparent);
}

.index-section01 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  background: radial-gradient(1200px 600px at 50% -20%, color-mix(in srgb, var(--accent) 12%, transparent) , transparent 60%), radial-gradient(900px 400px at 110% 20%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 60%), radial-gradient(900px 400px at -10% 80%, color-mix(in srgb, var(--ok) 10%, transparent), transparent 60%);
}

.rack-container {
  min-height: 100vh;   /* klassisch */
  min-height: 100dvh;  /* “dynamic viewport height” – korrekt bei mobiler Adressleiste */
}

/* ---- Leaderboard ---- */

:root{
  --bg:#0b0c10;
  --card:#11131a;
  --muted:#8b90a0;
  --text:#e6e8ef;
  --accent:#6ee7b7;
  --border:#1f2430;
}

.leaderboard{
  max-width:1000px;
  margin:1.5rem auto;
  background:var(--card);
  padding:1rem 1.25rem;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

.lb-header{
  display:flex;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.lb-title{
  font-size:1.5rem;
  line-height:1.2;
  margin:0;
  color:var(--text);
}

.lb-controls{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  padding:.4rem .6rem;
  border-radius:12px;
}

.lb-controls label{
  font-size:.9rem;
  color:var(--muted);
}

.lb-controls select{
  background:transparent;
  color:var(--text);
  border:1px solid var(--border);
  padding:.3rem .5rem;
  border-radius:8px;
}

/* Tabelle */
.lb-table-wrap{
  overflow:auto;
  margin-top:.75rem;
  border-radius:12px;
  border:1px solid var(--border);
}

.lb-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}

.lb-table thead th{
  position:sticky;
  top:0;
  background:linear-gradient(#151826,#121521);
  color:var(--muted);
  text-align:left;
  font-weight:600;
  letter-spacing:.02em;
}

.lb-table th,
.lb-table td{
  padding:.75rem .9rem;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}

.lb-table tbody tr:nth-child(odd){ background:rgba(255,255,255,.02); }
.lb-table tbody tr:hover{ background:rgba(110,231,183,.07); }

.lb-table .mono{
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

.lb-table .user{
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.lb-table .star{
  font-size:1.1rem;
  text-align:center;
}

.lb-table .empty{
  color:var(--muted);
  text-align:center;
}

/* Pager */
.lb-pager{
  display:flex;
  align-items:center;
  gap:.5rem;
  justify-content:center;
  margin-top:1rem;
  flex-wrap:wrap;
}

.lb-pager .btn{
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  padding:.45rem .7rem;
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  background:rgba(255,255,255,.03);
}

.lb-pager .btn:hover{ outline:1px solid rgba(110,231,183,.3); }
.lb-pager .btn.is-disabled{ opacity:.5; pointer-events:none; }
.pager-status{ color:var(--muted); padding:0 .5rem; }

/* Mobile: weniger wichtige Spalten ausblenden */
@media (max-width: 640px){
  .lb-controls label{ display:none; }
  .lb-table th:nth-child(3), .lb-table td:nth-child(3), /* Score */
  .lb-table th:nth-child(4), .lb-table td:nth-child(4), /* Level */
  .lb-table th:nth-child(7), .lb-table td:nth-child(7)  /* Datum */
  { display:none; }
}



/* Dropdown (Clan-Admin) */
.dropdown { position: relative; display:inline-block; }
.dropdown > summary { list-style: none; cursor: pointer; }
.dropdown[open] > summary { outline: 2px solid var(--focus); }
.dropdown .dropdown-menu {
  position: absolute; right: 0; top: 40px; min-width: 200px;
  background: var(--panel); border: 1px solid var(--soft-2); border-radius: 10px;
  padding: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.4); z-index: 50;
}
.dropdown .dropdown-menu a {
  display: block; padding: 8px 10px; text-decoration: none; color: var(--text); border-radius: 8px;
}
.dropdown .dropdown-menu a:hover { background: var(--soft-2); }


/* --- Viewport height tuning (no scroll on home) --- */
/* Diese Ergänzung steuert NUR die Höhe; keine Layout-Änderung (kein grid/flex). */
:root {
  --header-h: 0px;
  --footer-h: 0px;
}

/* Hauptbereich füllt den verfügbaren Viewport abzüglich Header/Footer */
main.container {
  min-height: calc(100dvh - var(--header-h) - var(--footer-h));
  /* optional: verhindert 1px Scroll-Leisten bei Rundungsfehlern */
  /* overflow: clip; */
}

/* Home-Container auf gleiche verfügbare Höhe begrenzen */
.rack-container {
  min-height: calc(100dvh - var(--header-h) - var(--footer-h));
}