/* ============================================================
   Tauziehen (Quiz) — zwei Teams rechnen gleichzeitig,
   links Blau, rechts Rot, in der Mitte wird am Seil gezogen.

   Skalierung: die Bühne nimmt genau `--stage-height` (globale Quelle).
   Die Seiten richten ihre Schrift nach der eigenen Spaltenbreite
   (Container-Einheiten), der Ziffernblock nach seiner Fläche (keypad.css),
   die Szene in der Mitte ist ein Kasten mit festem Seitenverhältnis 5 : 2,
   darin EIN SVG (viewBox 1000 × 400), das tugofwar-games.js Bild für Bild
   zeichnet — es skaliert als Ganzes mit. Keine festen px-Maße.
   ============================================================ */

:root {
    --tz-u: min(1vw, 1.6vh);
    --tz-red: var(--red-main, #e74c3c);
    --tz-blue: var(--blue-main, #3498db);
    --tz-green: var(--green-main, #27ae60);
    --tz-grass: #6cc25a;
}

body {
    background: linear-gradient(180deg, #d4efff 0%, #eef8ff 100%);
    overflow: hidden;
}

/* ---------- Bühne: Blau | Tauziehen | Rot ---------- */
.tz-stage {
    height: var(--stage-height);
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(180px, 48%, 900px) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'blue field red';
    gap: calc(var(--tz-u) * 0.9);
    padding: calc(var(--tz-u) * 0.9);
    box-sizing: border-box;
    overflow: hidden;
}

/* Hochformat (Tablet hochkant / Smartphone): drei Spalten nebeneinander
   wären zu schmal für den Ziffernblock — das Tauziehen rückt nach oben
   über die volle Breite, die zwei Teams stehen darunter nebeneinander. */
@media (orientation: portrait) {
    .tz-stage {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 34%) minmax(0, 1fr);
        grid-template-areas:
            'field field'
            'blue red';
    }
}

/* ---------- Team-Seiten ---------- */
.tz-side {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: calc(var(--tz-u) * 1);
    padding: calc(var(--tz-u) * 1.1);
    border-radius: calc(var(--tz-u) * 1.8);
    box-sizing: border-box;
    /* Die Aufgaben-Schrift richtet sich nach der Spaltenbreite (cqw). */
    container-type: inline-size;
    color: #fff;
    box-shadow: 0 calc(var(--tz-u) * 0.6) 0 rgba(0, 0, 0, 0.16);
}

.tz-side-blue {
    grid-area: blue;
    background: var(--tz-blue);
    --tz-team: var(--tz-blue);
}

.tz-side-red {
    grid-area: red;
    background: var(--tz-red);
    --tz-team: var(--tz-red);
}

/* ---------- Aufgabe oben — die Eingabe steht direkt als Lösung darin ---------- */
.tz-task {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: calc(var(--tz-u) * 1.3) calc(var(--tz-u) * 0.8);
    border-radius: calc(var(--tz-u) * 1.3);
    background: rgba(0, 0, 0, 0.16);
    font-family: var(--math-font);
    /* Höchstgröße — lange Aufgaben (100 − 45) schrumpft das JS passend
       (`fitTask`), damit nichts über die Spalte hinausragt. */
    font-size: min(calc(var(--tz-u) * 6), 13cqw);
    line-height: 1;
    white-space: nowrap;
}

.tz-task.tz-task-in .tz-task-text {
    animation: tz-task-in 0.35s ease-out;
}

@keyframes tz-task-in {
    from {
        opacity: 0;
        transform: translateY(-0.4em);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Das Lösungsfeld: leer steht ein blasses „?", sonst die getippte Zahl. */
.tz-answer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2ch; /* das JS reserviert Platz für die längste mögliche Lösung */
    height: 1.35em;
    padding: 0 0.25em;
    border-radius: 0.22em;
    background: #fff;
    color: var(--tz-team);
    box-shadow: inset 0 -0.08em 0 rgba(0, 0, 0, 0.12);
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.tz-answer:empty::before {
    content: '?';
    opacity: 0.35;
}

.tz-answer.tz-right {
    background: var(--tz-green);
    color: #fff;
}

.tz-answer.tz-wrong {
    background: #7d1a12;
    color: #fff;
    animation: tz-shake 0.45s ease;
}

@keyframes tz-shake {
    0%,
    100% {
        transform: none;
    }
    20% {
        transform: translateX(-0.14em);
    }
    40% {
        transform: translateX(0.14em);
    }
    60% {
        transform: translateX(-0.1em);
    }
    80% {
        transform: translateX(0.1em);
    }
}

/* ---------- Ziffernblock unten (globaler Baustein, nur Farben hier) ---------- */
.tz-pad {
    flex: 1 1 0;
    min-height: 0;
}

.tz-side .tz-keypad {
    --kp-key-fg: var(--tz-team);
    --kp-edge: rgba(0, 0, 0, 0.25);
}

/* ---------- Mitte: das Tauziehen ---------- */
.tz-field {
    grid-area: field;
    position: relative;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border-radius: calc(var(--tz-u) * 1.8);
    overflow: hidden;
    container-type: size;
    background: linear-gradient(180deg, #7fcdfc 0%, #c7ebff 100%);
}

.tz-sky {
    position: relative;
    flex: 1.4 1 0;
    min-height: 0;
}

/* Sonne oben rechts — reine Deko. */
.tz-sky::before {
    content: '';
    position: absolute;
    right: 8%;
    top: 14%;
    width: min(14cqw, 22cqh);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fff6b8 0%, #ffd84a 60%, rgba(255, 216, 74, 0) 72%);
}

.tz-grass {
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    background: var(--tz-grass);
}

/* Die Mittellinie läuft über das Gras bis zum unteren Rand weiter
   (Breite = die der Linie im SVG: 10 von 930 sichtbaren Einheiten). */
.tz-grass::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: calc(min(100cqw, 250cqh) * 10 / 930);
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.92);
}

/* Wolken ziehen langsam durch den Himmel. Maße in em, damit eine kleinere
   Wolke nur ihre Schriftgröße braucht (1em = 1cqw des Spielfelds). */
.tz-cloud {
    position: absolute;
    left: 0;
    font-size: 1cqw;
    width: 16em;
    height: 4.6em;
    border-radius: 3em;
    background: #fff;
    opacity: 0.92;
    animation: tz-cloud 90s linear infinite;
}

.tz-cloud::before,
.tz-cloud::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: inherit;
}

.tz-cloud::before {
    width: 6.5em;
    height: 6.5em;
    left: 2.5em;
    top: -3.2em;
}

.tz-cloud::after {
    width: 8em;
    height: 8em;
    left: 6.2em;
    top: -4.6em;
}

.tz-cloud-1 {
    top: 40%;
    animation-delay: -25s;
}

.tz-cloud-2 {
    top: 20%;
    font-size: 0.7cqw;
    animation-duration: 120s;
    animation-delay: -80s;
}

.tz-cloud-3 {
    top: 62%;
    font-size: 0.55cqw;
    opacity: 0.8;
    animation-duration: 140s;
    animation-delay: -10s;
}

@keyframes tz-cloud {
    from {
        transform: translateX(-20cqw);
    }
    to {
        transform: translateX(110cqw);
    }
}

/* Szene: fester Kasten 5 : 2 = das SVG (sichtbar 930 × 372). Gezeichnet
   wird ALLES darin von tugofwar-games.js; hier stehen nur die Farben. */
.tz-scene {
    flex: 0 0 auto;
    position: relative;
    align-self: center;
    width: min(100cqw, 250cqh);
    aspect-ratio: 5 / 2;
}

.tz-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

.tz-hill {
    fill: #a9dc8e;
}

.tz-tree {
    fill: #86c96d;
}

.tz-trunk {
    fill: #8a6a4a;
}

.tz-lawn {
    fill: var(--tz-grass);
}

.tz-lawn-hi {
    fill: #7fd068;
}

.tz-midline {
    fill: rgba(255, 255, 255, 0.92);
}

.tz-shadow {
    fill: rgba(0, 0, 0, 0.16);
}

.tz-dust {
    fill: #d9c49a;
}

/* Figuren: Glieder als runde Striche */
.tz-limb {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tz-pants {
    stroke: #3d4b5c;
}

.tz-pants-far {
    stroke: #2c3744;
}

.tz-pants-fill {
    fill: #3d4b5c;
}

.tz-shoe {
    fill: #2c3e50;
}

.tz-shoe-far {
    fill: #1d2833;
}

.tz-shirt.tz-blue,
.tz-sleeve.tz-blue {
    stroke: var(--tz-blue);
}

.tz-sleeve-far.tz-blue {
    stroke: color-mix(in srgb, var(--tz-blue) 72%, #000);
}

.tz-shirt.tz-red,
.tz-sleeve.tz-red {
    stroke: var(--tz-red);
}

.tz-sleeve-far.tz-red {
    stroke: color-mix(in srgb, var(--tz-red) 72%, #000);
}

/* Gesicht: normal / angestrengt (tz-strain) / froh (tz-happy) */
.tz-blush {
    fill: #ff8a80;
    opacity: 0.45;
}

.tz-hairtie {
    fill: #ff5fa2;
}

.tz-eye {
    fill: #2d3436;
}

.tz-eye-strain,
.tz-eye-happy,
.tz-mouth {
    fill: none;
    stroke: #2d3436;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tz-mouth {
    stroke: #7a3b2e;
}

.tz-mouth-grit {
    fill: #fff;
    stroke: #7a3b2e;
    stroke-width: 1.4;
}

.tz-mouth-open {
    fill: #8e2f24;
}

.tz-eye-strain,
.tz-eye-happy,
.tz-mouth-grit,
.tz-mouth-open {
    display: none;
}

.tz-strain .tz-eye,
.tz-strain .tz-mouth,
.tz-happy .tz-eye,
.tz-happy .tz-mouth {
    display: none;
}

.tz-strain .tz-eye-strain,
.tz-strain .tz-mouth-grit,
.tz-happy .tz-eye-happy,
.tz-happy .tz-mouth-open {
    display: inline;
}

/* Seil: Grundstrang, gegenläufige Drehung (wandert mit dem Seil), Glanz */
.tz-rope-base,
.tz-rope-twist,
.tz-rope-hi {
    fill: none;
    stroke-linecap: round;
}

.tz-rope-base {
    stroke: #b98a4e;
    stroke-width: 9;
}

.tz-rope-twist {
    stroke: #86602f;
    stroke-width: 9;
    stroke-dasharray: 2.5 5.5;
    opacity: 0.5;
}

.tz-rope-hi {
    stroke: #e3bf88;
    stroke-width: 2.6;
    opacity: 0.9;
}

.tz-flag-cloth {
    fill: #ffd23f;
    stroke: #e0a800;
    stroke-width: 1.5;
    stroke-linejoin: round;
}

.tz-flag-knot {
    fill: #f2b705;
}

/* ---------- Start-/Siegerfenster ---------- */
.tz-overlay {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 30, 50, 0.55);
}

.tz-overlay.tz-hidden {
    display: none;
}

/* Siegerfenster erst nach Spielende; beim Sieg bleibt das Tauziehen dahinter
   sichtbar (Verlierer auf allen vieren, Sieger jubeln) — darum heller
   abgedunkelt und die Karte OBEN im Himmel statt mitten über der Szene. */
.tz-overlay.tz-won {
    align-items: flex-start;
    padding-top: calc(var(--header-height, 60px) + 4vh);
    box-sizing: border-box;
    background: rgba(10, 30, 50, 0.25);
}

.tz-card {
    display: none;
    max-width: min(86vw, 620px);
    text-align: center;
    padding: calc(var(--tz-u) * 3);
    border-radius: calc(var(--tz-u) * 2);
    background: #fff;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.tz-overlay.tz-won .tz-card {
    display: block;
    animation: tz-card-in 0.5s cubic-bezier(0.2, 1.3, 0.4, 1);
}

@keyframes tz-card-in {
    from {
        opacity: 0;
        transform: scale(0.6);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.tz-card-title {
    font-family: var(--ui-font);
    font-size: calc(var(--tz-u) * 4.4);
    font-weight: 900;
    margin-bottom: calc(var(--tz-u) * 1.6);
    color: #2d3436;
}

.tz-overlay.tz-won-blue .tz-card-title {
    color: var(--tz-blue);
}

.tz-overlay.tz-won-red .tz-card-title {
    color: var(--tz-red);
}

.tz-card-btn {
    font-family: var(--ui-font);
    font-size: calc(var(--tz-u) * 2.6);
    font-weight: 800;
    color: #fff;
    background: var(--tz-green);
    border: none;
    border-radius: calc(var(--tz-u) * 1.2);
    padding: calc(var(--tz-u) * 1.2) calc(var(--tz-u) * 3.4);
    cursor: pointer;
    box-shadow: 0 calc(var(--tz-u) * 0.5) 0 rgba(0, 0, 0, 0.3);
}

.tz-card-btn:active {
    transform: translateY(calc(var(--tz-u) * 0.4));
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.3);
}

/* ---------- Play-Knopf ---------- */
.tz-play {
    width: calc(var(--tz-u) * 22);
    height: calc(var(--tz-u) * 22);
    border: none;
    border-radius: 50%;
    background: var(--tz-green);
    color: #fff;
    font-size: calc(var(--tz-u) * 9);
    line-height: 1;
    padding: 0 0 0 calc(var(--tz-u) * 1); /* das ▶ wirkt sonst links lastig */
    cursor: pointer;
    box-shadow:
        0 calc(var(--tz-u) * 0.9) 0 rgba(0, 0, 0, 0.3),
        0 0 calc(var(--tz-u) * 6) rgba(39, 174, 96, 0.55);
    animation: tz-play-pulse 1.8s ease-in-out infinite;
}

.tz-play:active {
    transform: translateY(calc(var(--tz-u) * 0.6));
}

@keyframes tz-play-pulse {
    0%,
    100% {
        box-shadow:
            0 calc(var(--tz-u) * 0.9) 0 rgba(0, 0, 0, 0.3),
            0 0 calc(var(--tz-u) * 4) rgba(39, 174, 96, 0.45);
    }
    50% {
        box-shadow:
            0 calc(var(--tz-u) * 0.9) 0 rgba(0, 0, 0, 0.3),
            0 0 calc(var(--tz-u) * 10) rgba(39, 174, 96, 0.8);
    }
}

.tz-overlay.tz-counting .tz-play,
.tz-overlay.tz-won .tz-play {
    display: none;
}

/* ---------- Countdown 3 · 2 · 1 ---------- */
.tz-cd {
    display: none;
    font-family: var(--math-font);
    font-size: calc(var(--tz-u) * 26);
    line-height: 1;
    color: #fff;
    text-shadow: 0 0 calc(var(--tz-u) * 4) rgba(0, 0, 0, 0.45);
}

.tz-overlay.tz-counting .tz-cd {
    display: block;
    animation: tz-cd-pop 0.85s ease-out;
}

@keyframes tz-cd-pop {
    0% {
        opacity: 0;
        transform: scale(2.2);
    }
    22% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0.25;
        transform: scale(0.75);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tz-cloud {
        animation: none;
    }
}