/* Leon-Games Design-Tokens & Basis-Stile, siehe ARCHITEKTUR.md §10 */
:root {
    --bg: #0f1117;
    --surface: #161a23;
    --surface-2: #1c212c;
    --surface-3: #232936;
    --border: #2a3140;
    --accent: #6c5ce7;
    --accent-hover: #8577ec;
    --accent-soft: rgba(108, 92, 231, 0.15);
    --success: #2ecc71;
    --danger: #e74c3c;
    --warning: #f1c40f;
    --text: #e6e9f0;
    --text-dim: #98a0b3;
    --text-faint: #6b7383;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    --font: 'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-title: 'Rajdhani', 'Segoe UI', sans-serif;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-title);
    font-weight: 600;
    letter-spacing: 0.3px;
    margin: 0 0 0.5em;
    color: #fff;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }

a { color: var(--accent-hover); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- App-Loading (vor Blazor-Start) ---- */
.app-loading {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: var(--bg);
}
.app-loading__logo { font-family: var(--font-title); font-size: 2rem; font-weight: 700; color: var(--accent-hover); letter-spacing: 1px; }
.app-loading__logo-img { display: block; height: auto; }
.sidebar__logo { height: 34px; width: auto; display: block; }
.app-loading__spinner, .spinner {
    width: 38px; height: 38px;
    border: 3px solid var(--surface-3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--surface-3);
    color: var(--text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s var(--ease), transform 0.18s var(--ease), border-color 0.18s var(--ease);
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); }
.btn--ghost { background: transparent; border-color: var(--border); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn--danger:hover { background: rgba(231, 76, 60, 0.12); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--block { width: 100%; }
.btn--sm { padding: 0.35rem 0.7rem; font-size: 0.85rem; }

/* ---- Forms ---- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-size: 0.85rem; color: var(--text-dim); margin-bottom: 0.35rem; font-weight: 500; }
.input, .select {
    width: 100%;
    padding: 0.65rem 0.8rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font: inherit;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.input:focus, .select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.input::placeholder { color: var(--text-faint); }

/* ---- Cards / Surfaces ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
}
.card--glass {
    background: rgba(22, 26, 35, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* ---- Alerts ---- */
.alert { padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 1rem; border: 1px solid transparent; }
.alert--error { background: rgba(231, 76, 60, 0.12); border-color: rgba(231, 76, 60, 0.4); color: #f3a79d; }
.alert--success { background: rgba(46, 204, 113, 0.12); border-color: rgba(46, 204, 113, 0.4); color: #8fe6b4; }
.alert--info { background: var(--accent-soft); border-color: rgba(108, 92, 231, 0.4); color: #c3bcf5; }

/* ---- Badges / Chips ---- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--surface-3); color: var(--text-dim); }
.badge--accent { background: var(--accent-soft); color: var(--accent-hover); }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--text-faint); }
.status-dot--online { background: var(--success); }
.status-dot--away { background: var(--warning); }
.status-dot--offline { background: var(--text-faint); }

/* ---- XP-Balken ---- */
.xpbar { height: 12px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.xpbar__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); border-radius: 999px; transition: width 0.4s var(--ease); }

/* ---- Tabellen ---- */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-faint); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--surface-2); }
.table tr:hover td { background: var(--surface-2); }

/* ---- Avatar ---- */
.avatar { border-radius: 50%; object-fit: cover; background: var(--surface-3); flex-shrink: 0; }
.avatar--placeholder { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-title); font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), #4a3fb0); }

/* ---- Layout-Grid ---- */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 1rem;
    position: sticky;
    top: 0;
    height: 100vh;
}
.sidebar__brand { font-family: var(--font-title); font-size: 1.5rem; font-weight: 700; color: #fff; padding: 0.5rem 0.75rem 1.25rem; }
.sidebar__brand span { color: var(--accent-hover); }
.nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--text-dim);
    font-weight: 500;
    margin-bottom: 0.15rem;
    transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-link.active { background: var(--accent-soft); color: var(--accent-hover); }
.nav-link__icon { width: 18px; text-align: center; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
    height: 62px;
    border-bottom: 1px solid var(--border);
    background: rgba(15, 17, 23, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 10;
}
.content { padding: 1.75rem; max-width: 1180px; width: 100%; margin: 0 auto; }

.user-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0.3rem 0.3rem 0.75rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); cursor: pointer; }
.user-chip small { color: var(--text-dim); }

/* ---- Game-Kacheln ---- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.1rem; }
.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.tile:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.tile__art { height: 130px; background: linear-gradient(135deg, var(--surface-3), var(--surface-2)); display: flex; align-items: center; justify-content: center; }
.tile__art img { width: 64px; height: 64px; border-radius: var(--radius-sm); }
.tile__art .tile__mono { font-family: var(--font-title); font-size: 2.2rem; font-weight: 700; color: var(--accent-hover); }
.tile__body { padding: 0.9rem 1rem; }
.tile__title { font-family: var(--font-title); font-weight: 600; font-size: 1.1rem; color: #fff; }
.tile__meta { color: var(--text-faint); font-size: 0.82rem; margin-top: 0.25rem; }

/* ---- Achievements ---- */
.ach { display: flex; gap: 0.8rem; align-items: center; padding: 0.8rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ach__icon { width: 42px; height: 42px; border-radius: var(--radius-sm); background: linear-gradient(135deg, var(--accent), #4a3fb0); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }

/* ---- Utility ---- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: 0.5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; }
.wrap { flex-wrap: wrap; }
.between { justify-content: space-between; }
.center { align-items: center; }
.grow { flex: 1; }
.muted { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.text-center { text-align: center; }
.big-num { font-family: var(--font-title); font-size: 2rem; font-weight: 700; color: #fff; }

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(1200px 600px at 50% -10%, rgba(108,92,231,0.18), transparent), var(--bg); }
.auth-card { width: 100%; max-width: 400px; }
.auth-brand { font-family: var(--font-title); font-size: 2.1rem; font-weight: 700; text-align: center; margin-bottom: 0.25rem; }
.auth-brand span { color: var(--accent-hover); }

#blazor-error-ui { position: fixed; bottom: 0; left: 0; right: 0; background: var(--danger); color: #fff; padding: 0.75rem 1.25rem; display: none; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }

/* ---- Admin ---- */
.admin-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1.25rem; }
.admin-tab { padding: 0.6rem 1rem; color: var(--text-dim); font-weight: 600; border-bottom: 2px solid transparent; }
.admin-tab:hover { color: var(--text); text-decoration: none; }
.admin-tab.active { color: var(--accent-hover); border-bottom-color: var(--accent); }
.stat-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem 1.25rem; }
.stat-tile .label { color: var(--text-faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-tile .value { font-family: var(--font-title); font-size: 1.9rem; font-weight: 700; color: #fff; margin-top: 0.25rem; }
.meter { height: 8px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 0.6rem; }
.meter__fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hover)); }
.meter__fill--warn { background: linear-gradient(90deg, var(--warning), #e67e22); }
.modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal { width: 100%; max-width: 460px; }
.role-check { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0; }
.mono { font-family: ui-monospace, 'Cascadia Code', monospace; font-size: 0.85rem; }
textarea.input { resize: vertical; min-height: 70px; font-family: ui-monospace, 'Cascadia Code', monospace; }

@media (max-width: 720px) {
    .sidebar { display: none; }
    .content { padding: 1rem; }
}

/* ---- Spiel-Seite (/play) + Vollbild ----
   Gilt für JEDES Spiel: ins Vollbild geht der Container mit iframe + Statusleiste,
   nicht das iframe selbst — sonst wären Vollbild-Knopf und Match-Overlay unerreichbar. */
/* 100vh statt 100dvh berechnet auf Tablets/Handys oft falsch (Adressleiste wird mitgerechnet,
   obwohl sie den sichtbaren Bereich einschränkt) — das iframe bekommt dann eine Höhe, die nicht
   zum tatsächlich sichtbaren Viewport passt, und Scroll-Gesten laufen ins Leere. 100dvh (dynamic
   viewport height) folgt der echten sichtbaren Höhe; 100vh bleibt als Fallback für ältere Browser
   stehen (wird von allen, die dvh kennen, durch die spätere Regel überschrieben). */
.play-root { display: flex; flex-direction: column; height: calc(100vh - 56px); height: calc(100dvh - 56px); touch-action: pan-y; }
.play-root:fullscreen { height: 100vh; height: 100dvh; width: 100vw; background: #0f1117; }
.play-root:-webkit-full-screen { height: 100vh; height: 100dvh; width: 100vw; background: #0f1117; }
/* Rückfall für Browser ohne Element.requestFullscreen (z. B. iOS Safari). */
.play-root--pseudo-fs { position: fixed; inset: 0; z-index: 2000; height: 100vh; height: 100dvh; width: 100vw; background: #0f1117; }

/* Auf Touch-Geräten (Tablet/Handy) verlassen wir uns nicht länger darauf, dass eine Wisch-Geste
   zuverlässig INS verschachtelte iframe hinein scrollt (play-root + iframe:flex:1) — das ist über
   Browser/Geräte hinweg unzuverlässig, siehe Bugreports "kann nicht scrollen". Stattdessen bekommt
   play-root dort keine feste Höhe mehr, das iframe genug Mindesthöhe für ein volles Spielbrett,
   und die ÄUSSERE Seite übernimmt das Scrollen — die funktioniert nachweislich auch auf Tablets.
   Etwas Leerraum am Ende ist der Preis dafür, aber Erreichbarkeit geht vor.
   Die 1800px hier sind nur der Startwert, bis die erste echte Messung ankommt: game.html meldet
   seine tatsächliche Inhaltshöhe per postMessage (__qwixxHeight), qwixxPlay.js setzt sie dann
   inline als !important-Höhe. Ohne das war 1800px bei langen Presets (viele Farbreihen + Glücks-/
   Ultra-Zahlen-Block) zu knapp — der untere Teil blieb dann unerreichbar, weil Wisch-Gesten nicht
   zuverlässig ins verschachtelte iframe scrollen (§ Bugreport "Glückszahlen sehr weit unten,
   kann nicht scrollen" / "Vollbild-Knopf kaum erreichbar"). */
@media (pointer: coarse), (max-width: 1024px) {
  .play-root:not(:fullscreen):not(.play-root--pseudo-fs) {
    height: auto;
    min-height: calc(100dvh - 56px);
  }
  /* !important nötig: das iframe hat im Markup ein Inline-style="flex:1;..." (Play.razor) —
     Inline-Styles schlagen jede externe Regel unabhängig von deren Spezifität, ohne !important
     hätte diese Regel also nie gegriffen (das war der eigentliche Grund, warum der vorige
     Versuch "gar nichts gebracht hat"). */
  .play-root:not(:fullscreen):not(.play-root--pseudo-fs) iframe {
    flex: none !important;
    min-height: 1800px !important;
    height: auto !important;
  }
}

/* Manche Tablet-Browser leiten Wisch-Scroll-Gesten nicht zuverlässig in ein verschachteltes
   iframe weiter, wenn dessen Höhe über Flexbox statt eines festen Werts kommt (play-root nutzt
   flex:1 fürs iframe) — explizit touch-action setzen und altes iOS-Momentum-Scroll aktivieren,
   damit das Spielfeld im iframe per Finger scrollbar bleibt (§ Qwixx-Tablet-Scroll-Bug). */
.play-root iframe { touch-action: pan-y; -webkit-overflow-scrolling: touch; }