/**
 * QUIZFUSSBALL — Modul-Layout (Fach: quiz / Gruppe: wettkampf)
 *
 * Reines Modul-Layout dieses Spiels. Header/Navigation/Vollbild/Settings
 * kommen aus global/ui (injectUI + SettingsBuilder) — hier bewusst NICHT
 * nachgebaut. Auch keine bare `button{}`-Regel: die würde sonst die globalen
 * Nav-/Settings-Buttons mit übersteuern.
 *
 * SKALIERUNG: Alle Maße sind relativ (vh/vw/vmin/clamp) statt fester Pixel.
 * Dadurch passt sich das ganze Spielfeld automatisch der Fenstergröße an —
 * der Browser rechnet die Prozente selbst, keine JS-Größenlogik nötig. Das
 * Layout ist eine Flex-Spalte über die volle Viewport-Höhe: Kopfzeile oben,
 * Stadion füllt den Rest (flex:1), Anzeige/Steuerung nehmen ihre Eigenhöhe.
 * Einzig die ovale Pferderennbahn wird in JS aus der Container-Größe berechnet
 * (absolute Positionen) — siehe quizfussball-wettkampf.js.
 */

/* Volle Höhe als Flex-Spalte: header → scoreboard → undo → stadium(flex:1) → controls.
   overflow:hidden verhindert Scrollen; das Stadion absorbiert den Rest. */
html, body { height: 100%; }
body {
    background-color: #1b5e20; /* Startwert Fußball; im Pferdemodus per JS auf Sand gesetzt */
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Die global gebaute Kopfzeile bleibt oben in ihrer Eigenhöhe. */
.header { flex: 0 0 auto; }

/* --- SCOREBOARD --- */
.scoreboard {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 4vw, 60px);
    font-size: clamp(28px, 7vh, 88px);
    font-weight: bold;
    background-color: rgba(0,0,0,0.6);
    border: clamp(3px, 0.6vh, 6px) solid white;
    border-radius: 16px;
    padding: clamp(6px, 1.4vh, 25px) clamp(20px, 3vw, 50px);
    width: fit-content;
    margin: clamp(6px, 1.4vh, 20px) auto clamp(4px, 1vh, 10px) auto;
    flex: 0 0 auto;
}
.score-red { color: #ff5252; }
.score-blue { color: #64b5f6; }
.score-separator {
    font-size: clamp(30px, 7.5vh, 96px);
    font-weight: bold;
    margin: 0 clamp(8px, 1.5vw, 20px);
}

/* --- ZWEITRANG-STEUERUNG (Undo bleibt auf dem Spielfeld) --- */
.secondary-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 0 auto clamp(4px, 1vh, 10px) auto;
    flex: 0 0 auto;
}
.undo-btn {
    height: clamp(36px, 6vh, 56px);
    padding: 0 clamp(12px, 2vw, 24px);
    font-size: clamp(14px, 2.2vh, 20px);
    font-weight: bold;
    color: white;
    background: rgba(0,0,0,0.45);
    border: 3px solid white;
    border-radius: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.undo-btn:active { transform: translateY(3px); }

/* --- STADION / FELD --- */
/* flex:1 → füllt die verbleibende Höhe; min-height:0 erlaubt Schrumpfen. */
.stadium {
    flex: 1 1 0;
    min-height: 0;
    width: 96%;
    max-width: 1600px;
    margin: clamp(6px, 1.2vh, 20px) auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 12px;
    position: relative;
}

.stadium.sand-bg {
    background: #f2dab4;
    border: clamp(4px, 0.8vh, 8px) solid white;
    padding: clamp(10px, 2vh, 25px);
}

.stadium.football-bg {
    background: repeating-linear-gradient(
        90deg,
        #2e7d32,
        #2e7d32 6%,
        #388e3c 6%,
        #388e3c 12%
    );
}

/* Fußball-Linien komplett */
.stadium.football-bg::before {
    content: "";
    position: absolute;
    inset: 8px; /* enger am Rand, umfasst alle Spielfelder */
    border: 6px solid white;
    pointer-events: none;
    z-index: 1;
}

.penalty-area {
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: clamp(70px, 12vw, 200px); /* Strafraum skaliert mit der Breite */
    border: 6px solid white;
    pointer-events: none;
    z-index: 1;
}

.penalty-left {
    left: 20px;
    border-right: none;
}

.penalty-right {
    right: 20px;
    border-left: none;
}

/* Fußballfeld: füllt das Stadion vollständig; Zellen strecken sich über die Höhe. */
.field {
    display: grid;
    gap: clamp(3px, 0.8vh, 8px);
    height: 100%;
    grid-auto-rows: 1fr; /* die eine Reihe füllt die volle Stadionhöhe (sonst kollabieren die Zellen auf Texthöhe) */
}

.field.inactive {
    display: none !important;
}

.cell {
    /* Keine feste Höhe mehr — die Grid-Zelle füllt die Stadionhöhe. */
    border: 2px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 4vh, 48px);
    position: relative;
    z-index: 2;
    min-height: 0;
}

/* --- PFERDERENNBAHN (Oval) --- */
/* height:100% → füllt das Stadion; Zellgröße/Positionen rechnet JS aus dem Container. */
.race-track {
    display: grid;
    position: relative;
    margin: 0 auto;
    gap: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: #e0c097;
    border: clamp(3px, 0.6vh, 6px) solid white;
    border-radius: 12px;
}
.race-track.inactive {
    display: none !important;
}
.race-cell {
    position: absolute;
    /* Größe wird in JS gesetzt (aus Container abgeleitet); Fallback hier. */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(20px, 4vh, 40px);
    border: 2px solid rgba(255,255,255,0.18);
    z-index: 2;
    pointer-events: auto;
}

.horse-red, .horse-blue {
    font-size: clamp(48px, 10vh, 112px);
    line-height: 1;
    display: block;
}

.horse-red { color: #e53935; }
.horse-blue { color: #1e88e5; }

/* --- TORE --- */
.goal-red { background-color: rgba(198, 40, 40, 0.85); font-weight: bold; }
.goal-blue { background-color: rgba(21, 101, 192, 0.85); font-weight: bold; }
.goal-red::after, .goal-blue::after {
    content: "🥅";
    font-size: clamp(24px, 4vh, 48px);
    position: absolute;
    bottom: 10px;
}
.goal-red::after { left: 50%; transform: translateX(-50%); }
.goal-blue::after { left: 50%; transform: translateX(-50%); }

/* --- LINIEN --- */
.middle-line {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 50%;
    width: clamp(4px, 0.8vw, 8px);
    background: white;
    z-index: 1;
}
.center-circle {
    position: absolute;
    width: clamp(120px, 26vh, 320px);
    height: clamp(120px, 26vh, 320px);
    border: clamp(4px, 0.8vh, 8px) solid white;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* --- BALL --- */
.ball { font-size: clamp(40px, 8vh, 140px); z-index: 5; }

/* --- ANGRIFF-BUTTONS + GENERATOR --- */
.controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(20px, 5vw, 50px);
    margin: clamp(6px, 1.2vh, 20px) 0;
    flex: 0 0 auto;
}
.control { text-align: center; }

.red-btn, .blue-btn {
    background: none;
    border: none;
    box-shadow: none;
    color: white;
    cursor: pointer;
}
.attack-btn {
    font-size: clamp(48px, 9vh, 96px);
    width: clamp(70px, 14vh, 140px);
    height: clamp(70px, 14vh, 140px);
    padding: 0;
}

/* Generator-Trikot */
#middleJersey {
    width: clamp(120px, 22vh, 320px);
    height: clamp(165px, 30vh, 440px);
    background-image: url("trikot.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    font-size: clamp(60px, 11vh, 160px);
    font-weight: bold;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    position: relative;
}
#middleJersey::before {
    content: "";
    position: absolute;
    width: 47%;
    height: 43%;
    background: white;
    border-radius: 18px;
    z-index: -1;
}
#middleJersey span {
    position: relative;
    z-index: 1;
}

/* --- ANIMATIONEN (Tor-Jubel + Schuss) --- */
.goal-animation {
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(60px, 12vh, 120px);
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    animation: goalFade 1.8s ease-out forwards;
    z-index: 9999;
}
@keyframes goalFade {
    0% { opacity: 0; transform: translate(-50%, -60%) scale(0.8); }
    20% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -40%) scale(1.3); }
}

.shot {
    position: fixed;
    font-size: clamp(100px, 20vh, 240px);
    animation: shotAnim 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 9998;
}
@keyframes shotAnim {
    0% { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; }
    25% { transform: translate(200px, -100px) scale(1.2) rotate(15deg); opacity: 1; }
    50% { transform: translate(400px, -200px) scale(1) rotate(-10deg); opacity: 1; }
    75% { transform: translate(500px, -250px) scale(0.8) rotate(5deg); opacity: 1; }
    100% { transform: translate(600px, -300px) scale(0.6) rotate(0deg); opacity: 0; }
}