*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

:root {
    --bg: #f0f4fb;
    --white: #ffffff;
    --blue: #1a3a8f;
    --blue-lt: #2d55c8;
    --green: #16a34a;
    --green-lt: #22c55e;
    --red: #dc2626;
    --red-lt: #ef4444;
    --text: #1a2b4a;
    --muted: #64748b;
    --border: #dce6f5;
    --surface: #f5f8ff;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
    font-family: 'Nunito', 'Segoe UI', sans-serif;
    color: var(--text);
    touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    user-select: none;
    -webkit-user-select: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    outline: none;
    -webkit-appearance: none;
}

.screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.top-bar {
    height: 56px;
    flex-shrink: 0;
    background: var(--blue);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    gap: 12px;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    overflow: hidden;
}

.feld-badge {
    font-size: 13px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}

.disc-badge {
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* UNDO BUTTON — groß und prominent */
.undo-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    white-space: nowrap;
    transition: background 0.15s;
}

.undo-btn:active {
    background: rgba(220, 38, 38, 0.5);
    border-color: rgba(220, 38, 38, 0.7);
}

.undo-btn:disabled {
    opacity: 0.3;
    pointer-events: none;
}

/* ============================================================
   FELD AUSWAHL
   ============================================================ */
#screenFeldSelect {
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.center-wrap {
    width: 100%;
    max-width: 480px;
}

.card-box {
    background: var(--white);
    border-radius: 20px;
    padding: 28px 22px;
    border: 1px solid var(--border);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
}

.screen-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    margin-bottom: 20px;
}

.feld-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.feld-btn {
    padding: 28px 16px;
    background: var(--surface);
    color: var(--text);
    font-size: 20px;
    font-weight: 800;
    border-radius: 14px;
    border: 1.5px solid var(--border);
    transition: all 0.1s;
}

.feld-btn:active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue-lt);
}

/* ============================================================
   SETUP SCREEN
   ============================================================ */
#screenSetup {
    background: var(--bg);
}

.setup-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setup-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.setup-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 8px;
}

.setup-step-indicator {
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-align: right;
}

.sides-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.side-btn {
    padding: 20px 12px;
    background: var(--white);
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
    border-radius: 14px;
    border: 2px solid var(--border);
    line-height: 1.4;
    text-align: center;
    transition: all 0.1s;
}

.side-btn:active,
.side-btn.selected {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue-lt);
}

.server-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.server-btn-opt {
    padding: 18px 16px;
    background: var(--white);
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
    border-radius: 14px;
    border: 2px solid var(--border);
    text-align: left;
    transition: all 0.1s;
}

.server-btn-opt:active,
.server-btn-opt.selected {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue-lt);
}

.btn-back {
    padding: 14px 16px;
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    text-align: center;
}

.btn-back:active {
    background: var(--border);
}

/* ============================================================
   IDLE
   ============================================================ */
.screen-idle {
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.idle-feld {
    font-size: 13px;
    font-weight: 800;
    background: var(--blue);
    color: #fff;
    padding: 5px 18px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.idle-msg {
    font-size: 22px;
    font-weight: 800;
    color: var(--text);
}

.idle-sub {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    max-width: 280px;
    line-height: 1.5;
}

/* ============================================================
   SCORING SCREEN — Tablet-optimiert
   ============================================================ */
.scoring-screen {
    background: var(--white);
}

/* Spieler-Block — je 50% der verfügbaren Höhe */
.player-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 16px 10px;
    min-height: 0;
    background: var(--white);
    position: relative;
}

#block1 {
    border-bottom: 3px solid var(--bg);
}

#block2 {
    background: var(--surface);
}

/* Spieler-Info-Zeile: Dot + Name + Sätze */
.player-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 8px;
}

/* Aufschlag-Dot */
.serve-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--border);
    flex-shrink: 0;
    transition: all 0.25s;
}

.serve-dot.active {
    background: #f6c90e;
    box-shadow: 0 0 12px rgba(246, 201, 14, 0.8);
    width: 16px;
    height: 16px;
}

/* Namen */
.player-names-col {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.pname-main {
    font-size: clamp(40px, 4vw, 28px);
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pname-sub {
    font-size: clamp(40px, 3vw, 22px);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Satz-Boxen */
.sets-row {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
}

.set-box {
    width: clamp(28px, 5vw, 40px);
    height: clamp(28px, 5vw, 40px);
    border-radius: 8px;
    font-size: clamp(14px, 3vw, 20px);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.set-box.won {
    background: rgba(22, 163, 74, 0.15);
    color: var(--green);
    border: 1.5px solid rgba(22, 163, 74, 0.4);
}

.set-box.lost {
    background: rgba(220, 38, 38, 0.1);
    color: var(--red);
    border: 1.5px solid rgba(220, 38, 38, 0.3);
}

/* Score-Anzeige — groß */
.score-display {
    font-size: clamp(80px, 20vw, 140px);
    font-weight: 900;
    color: var(--text);
    line-height: 1;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Score-Buttons */
.score-btns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    flex-shrink: 0;
}

.btn-plus {
    height: clamp(60px, 10vh, 90px);
    background: var(--green);
    color: #fff;
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 900;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s;
}

.btn-plus:active {
    opacity: 0.65;
    transform: scale(0.97);
}

.btn-minus {
    height: clamp(60px, 10vh, 90px);
    background: rgba(220, 38, 38, 0.08);
    color: var(--red);
    font-size: clamp(24px, 5vw, 36px);
    font-weight: 900;
    border-radius: 14px;
    border: 1.5px solid rgba(220, 38, 38, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s;
}

.btn-minus:active {
    opacity: 0.65;
    transform: scale(0.97);
}

/* Satz-Trennlinie */
.satz-bar {
    height: 40px;
    flex-shrink: 0;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.satz-label {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ============================================================
   GEWINNER
   ============================================================ */
.screen-won {
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: var(--bg);
}

.won-title {
    font-size: 16px;
    font-weight: 800;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.won-name {
    font-size: clamp(26px, 6vw, 40px);
    font-weight: 900;
    color: var(--text);
    text-transform: uppercase;
    text-align: center;
    padding: 0 20px;
}

.won-sets {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.won-set-box {
    min-width: 64px;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
}

.won-set-box.won {
    background: rgba(22, 163, 74, 0.15);
    color: var(--green);
    border: 1.5px solid rgba(22, 163, 74, 0.4);
}

.won-set-box.lost {
    background: var(--surface);
    color: var(--muted);
    border: 1.5px solid var(--border);
}

.won-note {
    font-size: 13px;
    color: var(--muted);
    text-align: center;
    max-width: 260px;
    line-height: 1.5;
}

/* ============================================================
   POPUP
   ============================================================ */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10, 20, 50, 0.82);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    padding: 24px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.popup-box {
    background: var(--white);
    border-radius: 24px;
    padding: 32px 24px 24px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    gap: 14px;
    border: 1px solid var(--border);
}

.popup-title {
    font-size: 22px;
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
}

.popup-text {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.65;
    white-space: pre-line;
}

.popup-confirm-btn {
    margin-top: 4px;
    width: 100%;
    padding: 18px;
    background: var(--blue);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    border-radius: 14px;
    min-height: 56px;
    transition: background 0.1s;
}

.popup-confirm-btn:active {
    background: var(--blue-lt);
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--text);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 14px 20px;
    text-align: center;
    z-index: 200;
    pointer-events: none;
    animation: slideDown 0.3s ease;
}

.toast.error {
    background: var(--red);
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* ============================================================
   LANDSCAPE ANPASSUNG (Tablet quer)
   ============================================================ */
@media(orientation:landscape) and (max-height:600px) {
    .top-bar {
        height: 48px;
    }

    .undo-btn {
        height: 36px;
        font-size: 13px;
        padding: 0 16px;
    }

    .score-display {
        font-size: clamp(56px, 12vh, 100px);
    }

    .btn-plus,
    .btn-minus {
        height: clamp(48px, 8vh, 72px);
    }

    .satz-bar {
        height: 34px;
    }

    .pname-main {
        font-size: clamp(14px, 3vh, 22px);
    }

    .pname-sub {
        font-size: clamp(12px, 2.5vh, 18px);
    }
}

/* ============================================================
   TOP-BAR RIGHT (View-Toggle + Undo nebeneinander)
   ============================================================ */
.top-bar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.view-toggle-btn {
    height: 40px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    white-space: nowrap;
    transition: background 0.15s;
}

.view-toggle-btn:active {
    background: rgba(255, 255, 255, 0.25);
}

.view-toggle-btn.active {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

/* ============================================================
   VIEW STACKED — bestehend, wird zu Wrapper
   ============================================================ */
.view-stacked {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   VIEW SIDE — nebeneinander
   ============================================================ */
.view-side {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--white);
}

.satz-bar-side {
    flex-shrink: 0;
}

.side-columns {
    flex: 1;
    display: flex;
    min-height: 0;
}

.side-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 14px 16px 14px;
    min-width: 0;
    min-height: 0;
}

#sideCol1 {
    background: var(--white);
}

#sideCol2 {
    background: var(--surface);
}

.side-divider {
    width: 3px;
    flex-shrink: 0;
    background: var(--bg);
    display: flex;
    align-items: stretch;
}

.side-divider-line {
    width: 100%;
    background: var(--border);
}

/* Namen-Bereich oben in der Side-Spalte */
.side-player-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-bottom: 10px;
}

.side-names {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.side-pname-main {
    font-size: clamp(14px, 3vw, 22px);
    font-weight: 800;
    color: var(--text);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.side-pname-sub {
    font-size: clamp(12px, 2.5vw, 18px);
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Score groß in der Mitte der Side-Spalte */
.side-score {
    font-size: clamp(90px, 20vw, 160px);
    font-weight: 900;
    color: var(--text);
    line-height: 1;
    text-align: center;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* +1 Button groß unten */
.btn-plus-big {
    width: 100%;
    height: clamp(70px, 14vh, 110px);
    background: var(--green);
    color: #fff;
    font-size: clamp(28px, 6vw, 48px);
    font-weight: 900;
    border-radius: 16px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s;
}

.btn-plus-big:active {
    opacity: 0.65;
    transform: scale(0.97);
}

/* Landscape: Side-Ansicht anpassen */
@media(orientation:landscape) and (max-height:600px) {
    .side-score {
        font-size: clamp(64px, 14vh, 120px);
    }

    .btn-plus-big {
        height: clamp(52px, 10vh, 80px);
        font-size: clamp(22px, 5vw, 36px);
    }

    .side-pname-main {
        font-size: clamp(12px, 2.5vh, 18px);
    }
}