/* ==========================================================================
   10er Startscreen: Anordnung, Switches, Slider, Dropdown, Start-Button
   ========================================================================== */

/* Die vier Einstellungs-Gruppen sauber im Raster nebeneinander */
.settings-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem 2rem;
    justify-content: initial;
    margin-top: 0.5rem;
}

.settings-group {
    min-width: 0;
}

.settings-group h3 {
    margin-top: 0;
    margin-bottom: 0.6rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #5c4a32;
}

/* Optionen-Liste in einer Gruppe */
.zehner-options {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* eine Switch-Zeile: Text links, Schalter rechts */
.start-main label.zehner-switch-option,
.settings-row label.zehner-switch-option,
.zehner-options label.zehner-switch-option,
.zehner-switch-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    font-weight: 600;
    color: #3d3428;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.zehner-switch-option:hover {
    background: #e4d7bf;
}

/* echte Checkbox aus dem sichtbaren Bereich schieben */
.zehner-switch-option input[type="checkbox"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Switch-Bahn */
.zehner-switch {
    position: relative;
    flex: 0 0 52px;
    flex-shrink: 0;
    width: 52px;
    min-width: 52px;
    height: 28px;
    border: 2px solid #c4c4c4;
    border-radius: 999px;
    background: #d3d3d3;
    transition: background 0.2s ease, border-color 0.2s ease;
}

/* Switch-Knopf */
.zehner-switch::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease;
}

/* eingeschaltet -> gruen, Knopf rechts */
.zehner-switch-option input[type="checkbox"]:checked + .zehner-switch {
    background: #3a6b3f;
    border-color: #285030;
}

.zehner-switch-option input[type="checkbox"]:checked + .zehner-switch::before {
    transform: translateX(24px);
}

.zehner-switch-option input[type="checkbox"]:focus-visible + .zehner-switch {
    box-shadow: 0 0 0 3px rgba(92, 74, 50, 0.25);
}

.zehner-options small {
    color: #6b5c45;
    font-size: 0.85rem;
    padding-left: 0.2rem;
}

/* Zahlenraum-Slider */
#rangeSlider10er {
    width: 100%;
    max-width: 16rem;
    margin-top: 0.5rem;
    accent-color: #3a6b3f;
    cursor: pointer;
}

/* Dauer-Dropdown */
#duration10er {
    width: 100%;
    max-width: 14rem;
    margin-top: 0.5rem;
    padding: 0.55rem 2.5rem 0.55rem 0.85rem;
    border: 2px solid #8a7555;
    border-radius: 10px;
    background-color: #f8f2e8;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%235c4a32' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    color: #3d3428;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#duration10er:hover {
    border-color: #5c4a32;
}

#duration10er:focus {
    outline: none;
    border-color: #5c4a32;
    box-shadow: 0 0 0 3px rgba(92, 74, 50, 0.2);
}

/* Start-Button: farbig und sauber statt weissem Kasten */
.zehner-start-button {
    margin-top: 1.5rem;
    padding: 0.6rem 1.5rem;
    border: 2px solid #285030;
    border-radius: 12px;
    background: #3a6b3f;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(40, 80, 48, 0.4);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

.zehner-start-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(40, 80, 48, 0.4);
    background: #325c37;
    color: #ffffff;
}

.zehner-start-button:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(40, 80, 48, 0.4);
}

/* auf schmalen Screens: Gruppen untereinander */
@media (max-width: 760px) {
    .settings-row {
        grid-template-columns: 1fr;
    }
}

.aufgabe {
    position: relative;
}

.game-center.correct-flash {
    animation: flashGreen 0.4s ease-out;
}

.game-center.wrong-flash {
    animation: flashRed 0.4s ease-out;
}

.game-center.correct-flash .box,
.game-center.correct-flash .tip-text,
.game-center.correct-flash input,
.game-center.correct-flash button {
    animation: borderGreen 0.4s ease-out;
}

.game-center.wrong-flash .box,
.game-center.wrong-flash .tip-text,
.game-center.wrong-flash input,
.game-center.wrong-flash button {
    animation: borderRed 0.4s ease-out;
}

@keyframes flashRed {
    0% { background-color: #f5b6b6; border-color: #b3261e; }
}

@keyframes flashGreen {
    0% { background-color: #d9f2d9; border-color: #2e7d32; }
}

@keyframes borderRed {
    0% { border-color: #b3261e; }
}

@keyframes borderGreen {
    0% { border-color: #2e7d32; }
}

.box.success {
    animation: boxHop 0.4s ease-out;
}

@keyframes boxHop {
    30% { transform: translateY(-8px); }
}

.particle {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border-radius: 50%;
    background: #2e7d32;
    pointer-events: none;
    animation: particleFly 0.6s ease-out forwards;
}

@keyframes particleFly {
    to {
        transform: translate(var(--dx), var(--dy)) scale(0.2);
        opacity: 0;
    }
}

/* Tipp unter der Aufgabe */
.tip-row {
    margin: 0.5rem 0;
}

.tip-text {
    display: inline-block;
    margin: 0.3rem 0 0 0;
    padding: 0.3rem 0.6rem;
    border: 2px dashed #555;
    font-style: italic;
}

/* Live-Panel rechts: Werte links, Uhr rechts daneben */
.live-layout {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.live-stats {
    flex: 1;
    min-width: 0;
}

.live-score-label {
    margin-bottom: 0;
}

.live-score {
    font-size: 2.2rem;
    font-weight: 700;
    margin-top: 0;
}

#liveOps .stats-label {
    font-weight: 700;
}

.stats-grid.zehner-settings-grid {
    grid-template-columns: auto max-content;
    margin: 0.35rem 0 1rem 0;
}

#displayOperations {
    font-weight: 700;
}

#timeCell10er {
    color: #2e7d32;
}

#time10er {
    font-weight: 700;
}

.zehner-player-line {
    margin-bottom: 1rem;
}

#rankingList10er {
    width: max-content;
    max-width: 100%;
    margin: 0;
    padding-left: 1.9rem;
    line-height: 1.8;
}

/* Anker für die absolut positionierte Uhr */
.zehner-right-panel {
    position: relative;
}

#livePanel10er .countdown-clock {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: clamp(72px, 7vw, 96px);
    height: auto;
    aspect-ratio: 1;
    margin: 0;
}

/* runde Countdown-Uhr im linken Panel */
.countdown-clock {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 2px solid #285030;
    flex-shrink: 0;
}

/* Auswertung: Label | Anzahl | Ø-Zeit bündig in Spalten */
.stats-grid {
    display: grid;
    grid-template-columns: auto max-content max-content;
    column-gap: 1.2rem;
    row-gap: 0.25rem;
    align-items: baseline;
}

.stats-label {
    text-align: left;
}

.stats-count,
.stats-time {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Zahlenstrahl in der Auswertung: Segmentbreite proportional zum Bereich */
.zahlenstrahl {
    display: flex;
    margin-top: 0.5rem;
}

.strahl-segment {
    flex-basis: 0;
    border-top: 3px solid black;
    border-left: 2px solid black;
    padding: 0.3rem 0.4rem 0 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.strahl-segment:last-child {
    border-right: 2px solid black;
}

.strahl-range {
    font-weight: 600;
}

.strahl-count,
.strahl-time {
    font-variant-numeric: tabular-nums;
}

/* 10er Aufgabe */

.aufgabe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
}

.box {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3rem;
    min-height: 3rem;
    padding: 0.5rem;
    background: #f8f2e8;
    border: 2px solid #5c4a32;
    font-size: 1.25rem;
    font-weight: 600;
}

#answer10er {
    width: 5rem;
    text-align: center;
}

#feedback10er {
    margin-top: 0.75rem;
    min-height: 1.5rem;
}
/* ==========================================================================
   10er Spielbildschirm: Aktions-Buttons farbig
   ========================================================================== */

#buttonRestart10er,
#buttonAbort10er {
    width: 100%;
    margin-top: 0.6rem;
    padding: 0.6rem 1.25rem;
    border: 2px solid #5c4a32;
    border-radius: 12px;
    font: inherit;
    font-weight: 700;
    color: #f8f2e8;
    cursor: pointer;
    box-shadow: 0 3px 0 rgba(92, 74, 50, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s ease;
}

#buttonRestart10er:hover,
#buttonAbort10er:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 0 rgba(92, 74, 50, 0.35);
    color: #f8f2e8;
}

#buttonRestart10er:active,
#buttonAbort10er:active {
    transform: translateY(1px);
    box-shadow: 0 2px 0 rgba(92, 74, 50, 0.35);
}

/* Neu starten -> gruen */
#buttonRestart10er {
    background: #4c8a52;
    border-color: #3a6b3f;
}

#buttonRestart10er:hover {
    background: #427848;
}

/* Spiel abbrechen -> rot */
#buttonAbort10er {
    background: #b3261e;
    border-color: #8a1c16;
}

#buttonAbort10er:hover {
    background: #9c211a;
}