/* ==== 1. Basis / Global ==== */

/* ==== Design-Tokens: Einheitliches Farbsystem ====
 * Wenige Grundfarben, konsistent im gesamten Projekt.
 * Light-Theme-Defaults in :root, Dark-Theme-Override in body.dark-theme.
 * Spiel-Canvas-Inhalte (Spielfeld, Zellen, Score-Punktfarben) bleiben bewusst original.
 */
:root {
    --c-accent: #667eea;        /* Primäraktion / Hervorhebung */
    --c-accent-hover: #5568d3;  /* Akzent-Hover */
    --c-accent-2: #764ba2;      /* Akzent-Gradient-Ende */

    --c-surface: #f8f9fa;       /* Karte / Display / heller Grund */
    --c-surface-2: #dbe3ff;     /* Hover / Alternativfläche (blaustichig) */
    --c-border: #e0e0e0;        /* Rahmen */

    --c-text: #333;             /* Primärtext */
    --c-muted: #666;            /* Sekundärtext */

    --c-success: #10b981;       /* Erfolg (Equals / kopiert) */
    --c-success-hover: #059669;
    --c-danger: #ef4444;        /* Gefahr (Clear / Reset) */
    --c-danger-hover: #dc2626;
    --c-warning: #f59e0b;       /* Warnung */

    /* Editor-spezifische Zusatz-Tokens (Fallbacks, wenn kein Param gesetzt) */
    --c-bg: #111827;
    --c-radius: 16px;
    --c-accent-text: #ffffff;
    --c-badge-bg: rgba(17, 24, 39, 0.82);
    --c-badge-fg: #ffffff;
}

body.dark-theme {
    --c-surface: #1f2340;
    --c-surface-2: #3d4a78;
    --c-border: #2e2e46;
    --c-text: #e0e0e0;
    --c-muted: #b0b0b0;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Sichtbarer Fokus für Tastatur-Nutzer (a11y) – gilt global für Buttons, Links, Eingaben und fokussierbare Canvas-Spiele */
:focus-visible {
    outline: 3px solid #FFE726;
    outline-offset: 2px;
    border-radius: 6px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    padding: 20px;
    color: var(--c-text);
}

.container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Dark Theme (Basis) */
body.dark-theme {
    background:
        radial-gradient(1400px 900px at 100% -10%, rgba(102, 126, 234, 0.20), transparent 65%) fixed,
        radial-gradient(1200px 800px at -10% 105%, rgba(118, 75, 162, 0.18), transparent 60%) fixed,
        radial-gradient(1000px 700px at 50% 120%, rgba(102, 126, 234, 0.10), transparent 65%) fixed,
        linear-gradient(135deg, #1a1a2e 0%, #16213e 100%) scroll;
    background-repeat: no-repeat;
    color: var(--c-text);
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: var(--c-accent-text);
    border: none;
    font-size: 38px;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(36, 49, 108, 0.4);
    transition: all 0.3s;
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 30px rgba(102, 126, 234, 0.6);
}

.back-to-top:active {
    transform: translateY(-2px);
}

body.dark-theme .back-to-top {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 20px rgba(7, 14, 46, 0.6);
}

/* Hidden class für Filterung */
.hidden {
    display: none;
}

/* Inspect-Modus im Embed-Widget (Editor: Element auswählen) */
body.boza-widget.inspect {
    cursor: crosshair;
}

body.boza-widget.inspect a,
body.boza-widget.inspect button,
body.boza-widget.inspect input,
body.boza-widget.inspect select,
body.boza-widget.inspect textarea,
body.boza-widget.inspect label {
    cursor: crosshair;
}

/* Im Widget ohne Touch-Eingabe (Maus/Trackpad) die Mobile-Steuerung ausblenden.
 * Höhere Spezifität als die Spiel-@media-Regeln; Tetris-Toggle (force-show) bleibt aktiv. */
body.boza-widget.no-touch .mobile-controls:not(.force-show) {
    display: none;
}