/* ChessLounge – Web UI Styles */

/* ── Fonts (self-hosted, DSGVO-konform – kein Google-Fonts-CDN) ──────── */
@font-face {
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Marcellus-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/Inter-Variable.woff2') format('woff2');
}
/* Static instances at every non-400 weight actually used in this codebase (grep
   font-weight: across style.css + main.js), instanced from the variable font's own
   named instances via fonttools. Browsers prefer an exact-weight static face over
   interpolating from the variable range above — needed because live variable-font
   interpolation for the same nominal weight can render visibly lighter in WebKit
   than in Chrome for the same text (confirmed via side-by-side screenshot compare);
   baking each outline once makes text render identically everywhere. 400 needs no
   static face: it's the variable font's own default axis position, not interpolated.
   Whenever a new font-weight value gets used in a component, add a matching static
   instance here the same way, or it will silently inherit this same WebKit-only bug. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/Inter-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Inter-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/Inter-800.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: url('../fonts/Inter-900.woff2') format('woff2');
}

/* ── Splash Screen ─────────────────────────────────────────────────── */
#splash {
    position: fixed;
    inset: 0;
    background: linear-gradient(160deg, #0c1019 0%, #131828 45%, #180d2e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.45s ease;
}
#splash.fade-out {
    opacity: 0;
    pointer-events: none;
}
#splash-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}
#splash-logo {
    width: 130px;
    height: 130px;
    border-radius: 24px;
    object-fit: contain;
    opacity: 0;
    transition: opacity 0.3s ease;
}
@media (min-width: 600px) {
    #splash-logo {
        width: 200px;
        height: 200px;
        border-radius: 34px;
    }
}
#splash-name {
    color: #f2f2ff;
    font-family: 'Marcellus', 'Segoe UI', serif;
    font-size: 27px;
    font-weight: 400;
    margin: -18px 0 0;
    letter-spacing: 1px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.5);
}
#splash-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255,255,255,0.12);
    border-top-color: #e8b84b;
    border-radius: 50%;
    animation: splash-spin 0.85s linear infinite;
}
@keyframes splash-spin {
    to { transform: rotate(360deg); }
}

#chat-send-btn:hover   { background: rgba(100,150,240,.9) !important; }
#chat-reply-btn:hover  { background: rgba(80,190,80,.8)   !important; }
#chat-close-btn:hover,
#chat-inc-close:hover  { background: rgba(255,255,255,.22) !important; color: #fff !important; }
#chat-input::placeholder { color: rgba(255,255,255,.65); }

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

/* Form controls don't inherit font-family by default in any browser's UA
   stylesheet — without this, buttons/inputs silently fall back to a
   platform default font instead of Inter (Arial on Chrome/Windows, the
   much more visibly wrong "MS Shell Dlg" on WebKit/Windows). */
button, input, select, textarea, optgroup {
    font-family: inherit;
}

html {
    overflow: hidden;
    overscroll-behavior: none;
}

body {
    background: #1a1a1a;
    color: #e0e0e0;
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
    position: fixed;
    inset: 0;
}

/* ── Main layout ─────────────────────────────────────────────────── */

#app {
    display: flex;
    flex-direction: row;
    position: absolute;
    inset: 0;
    padding: 8px 0;
    gap: 0;
    overflow: hidden;
    isolation: isolate;
}

#app-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(ellipse at center,
        #6e6e6e 0%, #383838 50%, #1a1a1a 100%);
}

.panel-separator {
    width: 1px;
    background: #606060;
    flex-shrink: 0;
    align-self: stretch;
}

/* ── Left Panel ──────────────────────────────────────────────────── */

#left-panel {
    width: max(0px, calc(100vw - 100svh - 260px));
    min-width: 0;
    max-width: 230px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    gap: 8px;
    overflow: hidden;
}

/* ── Board Area ──────────────────────────────────────────────────── */

#board-area {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 4px;
    position: relative;
}

#btn-menu-float {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #f0c040;
    padding: 4px 8px;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.15s;
    position: relative;
    top: -3px;
}
#btn-menu-float:hover {
    background: rgba(240,192,64,0.12);
}
#clock-right-btns {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
#btn-menu-float-icon {
    font-size: 44px;
    line-height: 1;
    color: #ffffff;
}
#btn-menu-float-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.85);
}

#board-container {
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
    border: 1px solid #303030;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s, border-radius 0.2s;
}
#board-container.no-board-border {
    border: none;
    box-shadow: none;
    border-radius: 0;
    opacity: 0;
}

#chess-board {
    display: block;
    cursor: default;
    user-select: none;
    touch-action: none;
    opacity: 0;
    border-radius: 4px;
}

/* ── Right Panel ─────────────────────────────────────────────────── */

#right-panel {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    padding: 0 12px;
    gap: 5px;
    overflow: hidden;
}

#btn-menu { display: none; }

#logo-copyright {
    font-size: 13px;
    color: #888;
    text-align: center;
    letter-spacing: 0.04em;
    padding: 3px 0 1px;
}

/* ── Eval History Chart ──────────────────────────────────────────── */

#eval-chart-card {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 60px;
    border: 1px solid #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
}

#eval-chart-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 6px 12px;
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #c8c8d8;
}

#eval-chart-collapse-btn {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #c8c8d8;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s;
}

#eval-chart-collapse-btn:hover {
    background: rgba(255,255,255,0.14);
}

#eval-chart-collapse-btn svg {
    display: block;
    transition: transform 0.22s ease;
}

#eval-chart-card.eval-collapsed #eval-chart-collapse-btn svg {
    transform: rotate(180deg);
}

#eval-chart-card.eval-collapsed {
    flex: 0 0 auto;
    min-height: 0;
}


#eval-chart-card.eval-collapsed #eval-chart-header {
    border-bottom: none;
}

#eval-chart-card.eval-collapsed #eval-history-canvas {
    display: none;
}

#eval-history-canvas {
    width: 100%;
    display: block;
    flex: 1 1 0;
    min-height: 0;
}

/* Landscape column order in #right-panel (game-row + clock-eval-col have display:contents) */
#hist-outer     { order: 1; }
#captures-card  { order: 2; }
#eval-chart-card { order: 3; }
#eval-badge     { order: 4; }
#clock-card     { order: 5; }

/* ── Focus Mode (Desktop): nur Brett, Uhr (unverändert) + Zughistorie (füllt
   den frei werdenden Platz automatisch dank flex:1 1 0). ── */
body.focus-mode #left-panel,
body.focus-mode .player-card,
body.focus-mode #engine-card,
body.focus-mode #captures-card,
body.focus-mode #eval-chart-card,
body.focus-mode #material-card {
    display: none !important;
}

.panel-sep-line {
    height: 1px;
    background: #606060;
    flex-shrink: 0;
}

/* ── Focus-Mode Materialbilanz-Zeile (über der Uhr) ─────────────────
   Design entspricht #material-header (dunkler Verlauf, zentrierter Titel,
   rechtsbündige Zahl); eigener Rahmen/Schatten/Radius, da sie hier — anders
   als #material-header innerhalb #material-card — als eigenständige Card
   zwischen den Panel-Geschwistern steht. order:4 platziert sie zwischen
   eval-chart-card(3) und clock-card(5) auf Desktop (display:contents-
   Kontext von #clock-eval-col) UND, da höher als das Standard-order:0 der
   Geschwister, ganz oben in #clock-eval-cols column-reverse-Kontext
   (Phone/Tablet) — beides mit demselben Wert, ohne Breakpoint-Override. ── */
#focus-material-bar {
    display: none;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to bottom, #5c5c5c 0%, #262626 100%);
    border: 1px solid #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 5px 8px;
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #c8c8d8;
    order: 4;
    cursor: pointer;
}
body.focus-mode #focus-material-bar {
    display: flex;
}
#focus-material-title {
    font-size: 13px;
    font-weight: 600;
    color: #c8c8d8;
    letter-spacing: 0.02em;
}
#focus-material-value {
    position: absolute;
    right: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}
#focus-material-value:empty { display: none; }
#focus-material-bar.captures-lead-white { border-color: rgba(200, 220, 255, 0.4); }
#focus-material-bar.captures-lead-black { border-color: rgba(130, 130, 210, 0.5); }

/* ── Focus-Mode: Eval-Badge als alternativer Inhalt derselben Zeile ──────
   Per Klick auf #focus-material-bar/#eval-badge umschaltbar (siehe
   _setFocusInfoBar() in main.js). Standardmäßig versteckt, gleiche order:4-
   Position wie #focus-material-bar; .focus-info-active macht sie kompakt
   (einzeilig: Score + Balken nebeneinander statt übereinander). ── */
body.focus-mode #eval-badge {
    display: none;
    order: 4;
}
body.focus-mode #eval-badge.focus-info-active {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
}
body.focus-mode #eval-badge.focus-info-active #eval-score {
    font-size: 13px;
    min-width: 36px;
}
body.focus-mode #eval-badge.focus-info-active #eval-bar-container {
    flex: 1 1 0;
    height: 8px;
}

/* ── Eval Score ──────────────────────────────────────────────────── */

#eval-badge {
    background: linear-gradient(to bottom, #efefef 0%, #e4e4e4 100%);
    border: 1px solid #6868a0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 6px 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#eval-score {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #1a2a4a;
}

/* ── Eval Bar (horizontal) ───────────────────────────────────────── */

#eval-bar-container {
    height: 10px;
    background: #111;
    border: 1px solid #9090b0;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

#eval-bar-white {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #e8e8e8;
    transition: width 0.4s ease;
    border-radius: 3px 0 0 3px;
}

/* ── Custom Range Slider ─────────────────────────────────────────── */

.elo-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    outline: none;
    cursor: pointer;
    margin: 12px 0;
}

.elo-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe080, #c09030);
    border: 2px solid #a07820;
    box-shadow: 0 0 8px rgba(240,192,64,0.55), 0 2px 4px rgba(0,0,0,0.5);
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.elo-range::-webkit-slider-thumb:hover {
    box-shadow: 0 0 14px rgba(240,192,64,0.8), 0 2px 4px rgba(0,0,0,0.5);
}

.elo-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #ffe080, #c09030);
    border: 2px solid #a07820;
    box-shadow: 0 0 8px rgba(240,192,64,0.55), 0 2px 4px rgba(0,0,0,0.5);
    cursor: pointer;
}

.elo-range::-moz-range-thumb:hover {
    box-shadow: 0 0 14px rgba(240,192,64,0.8), 0 2px 4px rgba(0,0,0,0.5);
}

.elo-range::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: #1a1a28;
}

/* ── ELO Step Buttons (− / +) ────────────────────────────────────── */

.elo-step-btn {
    font-size: 24px;
    font-weight: bold;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    background: linear-gradient(to bottom, #3a3a52, #252538);
    border: 1px solid #505068;
    border-radius: 7px;
    color: #c0c0e0;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
}

.elo-step-btn:hover  { background: linear-gradient(to bottom, #484862, #303045); border-color: #7070a0; }
.elo-step-btn:active { background: linear-gradient(to bottom, #252538, #181828); }

.pm-dialog .elo-step-btn {
    background: var(--dlg-elo-step-bg);
    border-color: var(--dlg-elo-step-bdr);
    color: var(--dlg-elo-step-clr);
}
.pm-dialog .elo-step-btn:hover  { filter: brightness(1.08); }
.pm-dialog .elo-step-btn:active { filter: brightness(0.94); }
.pm-dialog .elo-range::-moz-range-track { background: var(--dlg-pm-detail-bg); }

/* ── Standard Dialog Buttons ─────────────────────────────────────── */

.sdlg-btn {
    font-size: 14px;
    font-weight: bold;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    border-width: 1px;
    border-style: solid;
    width: 100%;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.sdlg-btn-gold {
    color: #f0d080;
    background: #1e1c10;
    border-color: #806030;
}
.sdlg-btn-gold:hover  { background: #2c2818; border-color: #b08840; }
.sdlg-btn-gold:active { background: #141208; }

.sdlg-btn-red {
    color: #ffaaaa;
    background: #2a1010;
    border-color: #803030;
}
.sdlg-btn-red:hover  { background: #3a1818; border-color: #b04848; }
.sdlg-btn-red:active { background: #1a0808; }

.sdlg-btn-cancel {
    color: #c08888;
    background: #221518;
    border-color: #603030;
}
.sdlg-btn-cancel:hover  { background: #2e1a1a; border-color: #904040; color: #d09898; }
.sdlg-btn-cancel:active { background: #180e0e; }

.sdlg-btn-neutral {
    color: #c0c0d8;
    background: #242430;
    border-color: #505068;
}
.sdlg-btn-neutral:hover  { background: #2e2e3c; border-color: #7070a0; color: #d8d8f0; }
.sdlg-btn-neutral:active { background: #1a1a24; }

.sdlg-btn-blue {
    color: #a0a8e0;
    background: #141828;
    border-color: #404878;
}
.sdlg-btn-blue:hover  { background: #2c3a70; border-color: #8090d8; color: #e0eaff; box-shadow: 0 0 10px rgba(80,110,220,0.35); }
.sdlg-btn-blue:active { background: #0e1020; }

/* ── Captures Card ───────────────────────────────────────────────── */

#captures-card {
    background: linear-gradient(to bottom, #efefef 0%, #e4e4e4 100%);
    border: 1px solid #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 0 0 4px;
    flex: 1 1 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Grow to share leftover space evenly, so #captures-divider stays vertically
   centred even when one or both groups have no captured pieces yet. */
#captures-white-group, #captures-black-group {
    flex: 1 1 0;
    min-height: 0;
}

#captures-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    position: relative;
    background: linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%);
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
    padding: 6px 12px;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 4px;
    transition: border-color 0.25s;
}

#captures-collapse-btn {
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #c8c8d8;
    padding: 3px 5px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.15s;
}

#captures-collapse-btn:hover {
    background: rgba(255,255,255,0.14);
}

#captures-collapse-btn svg {
    display: block;
    transition: transform 0.22s ease;
}

#captures-card.captures-collapsed #captures-collapse-btn svg {
    transform: rotate(180deg);
}

#captures-card.captures-collapsed {
    flex: 0 0 auto;
    min-height: 0;
    padding-bottom: 0;
}

#captures-card.captures-collapsed #captures-header {
    border-bottom: none;
    margin-bottom: 0;
}

#captures-card.captures-collapsed .captures-row {
    display: none;
}

#captures-divider {
    height: 1px;
    margin: 3px 8px;
    background: #999;
}

#captures-card.captures-collapsed #captures-divider,
#captures-card.captures-collapsed #captures-white-group,
#captures-card.captures-collapsed #captures-black-group {
    display: none;
}

#captures-header.captures-lead-white {
    border-color: rgba(200, 220, 255, 0.4);
}

#captures-header.captures-lead-black {
    border-color: rgba(130, 130, 210, 0.5);
}

#captures-title {
    font-size: 13px;
    font-weight: 600;
    color: #c8c8d8;
    background: transparent;
    letter-spacing: 0.02em;
}

#captures-material {
    position: absolute;
    right: 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: transparent;
}

#captures-material:empty {
    display: none;
}

.captures-row {
    display: grid;
    padding: 0 8px;
}

.capture-piece-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    display: block;
    max-width: 40px;
}

/* ── Material-Bilanz Card (nur Phone-Portrait, siehe Media-Query unten) ──── */

#material-card {
    display: none;
}

/* ── Profile Card ────────────────────────────────────────────────── */

.player-card {
    background-image: var(--rb-pc-bg, linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    border: 1px solid #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 6px 8px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    text-align: center;
    min-height: 60px;
    position: relative;
    overflow: hidden;
}

.player-card:hover {
    border-color: #888888;
}

.card-name {
    font-size: 18px;
    font-weight: bold;
    color: #f8ecb0;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.presence-dot {
    display: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4cde88;
    box-shadow: 0 0 4px rgba(76,222,136,0.8);
    flex-shrink: 0;
}

.presence-dot.active {
    display: inline-block;
}

.name-pill {
    padding: 0px 10px;
    border-radius: 999px;
    line-height: 1.15;
}

.name-pill.pill-white {
    background: #ffffff;
    color: #000000;
    border: 1.5px solid #999;
}

.name-pill.pill-black {
    background: #1a1a1a;
    color: #ffffff;
    border: 1.5px solid #777;
}

.card-elo {
    font-size: 18px;
    font-weight: bold;
    color: #f0c040;
    line-height: 1.1;
}

.card-sub {
    display: none; /* Genauigkeits-/Phasen-Text ausgeblendet, damit die Card durchgehend 3-zeilig bleibt */
    font-size: 15px;
    font-weight: normal;
    color: #aaa;
}

/* ── Color dot ───────────────────────────────────────────────────── */

.card-elo-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.color-dot {
    position: absolute;
    bottom: 10px;
    left: 9px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    display: none;
    overflow: visible;
    flex-shrink: 0;
}

.color-dot.dot-white {
    display: block;
    background: #ffffff;
    border: 1.5px solid #999;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}

.color-dot.dot-black {
    display: block;
    background: #1a1a1a;
    border: 1.5px solid #777;
}

.color-dot.dot-active {
    box-shadow: 0 0 0 2.5px #f0c040, 0 0 8px rgba(240,192,64,0.85);
    animation: dot-pulse 1.4s ease-in-out infinite;
}

.color-dot.dot-active::before {
    content: '';
    position: absolute;
    inset: -28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,192,64,0.4) 0%, transparent 70%);
    animation: dot-glow 1.4s ease-in-out infinite;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes dot-pulse {
    0%, 100% { box-shadow: 0 0 0 2.5px #f0c040, 0 0 6px rgba(240,192,64,0.7); }
    50%       { box-shadow: 0 0 0 3.5px #ffd86a, 0 0 13px rgba(240,192,64,1.0); }
}

@keyframes dot-glow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%       { opacity: 0.8; transform: scale(1.3); }
}

@keyframes eng-pulse {
    0%, 100% { opacity: .3; transform: scale(.8); }
    50%       { opacity: 1;  transform: scale(1.2); }
}

/* ── Engine Card ─────────────────────────────────────────────────── */

#engine-card {
    background-image: var(--rb-ec-bg, linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    border: 1px solid #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 6px 8px;
    flex-shrink: 0;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    text-align: center;
    min-height: 60px;
    position: relative;
    overflow: hidden;
}

#engine-card:hover {
    border-color: #888888;
}

.engine-sync-icon {
    position: absolute;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: #ffd264;
    opacity: 0.88;
    cursor: pointer;
    transition: opacity 0.15s;
}

.engine-sync-icon-top    { top: 1px; }
.engine-sync-icon-bottom { bottom: 3px; }

.engine-sync-icon:hover {
    opacity: 1;
}

.engine-sync-icon.is-disabled {
    color: rgba(255,255,255,0.25);
    opacity: 1;
    cursor: default;
}

#mode-label {
    background-image: var(--rb-ml-bg, linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    border: 1px solid #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 10px 8px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: #f0c040;
    flex-shrink: 0;
    letter-spacing: 0.2px;
    font-variant-numeric: lining-nums;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1.2;
}
#mode-label:hover {
    border-color: #888888;
}

/* Im Landscape-Layout unsichtbar — Kinder verhalten sich wie direkte Panel-Kinder */
#cards-row      { display: contents; }
#game-row       { display: contents; }
#clock-eval-col { display: contents; }

#engine-name {
    font-size: 18px;
    font-weight: bold;
    color: #f8ecb0;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

#engine-elo {
    font-size: 18px;
    font-weight: bold;
    color: #f0c040;
    line-height: 1.1;
}

#engine-level {
    display: none;
    font-size: 15px;
    font-weight: normal;
    color: #c4c4c4;
}

#profile-level {
    display: none;
    font-size: 15px;
    font-weight: normal;
    color: #c4c4c4;
}

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
    width: 100%;
    min-height: 32px;
    font-size: 15px;
    font-weight: bold;
    border-radius: 6px;
    border: 1px solid #555;
    cursor: pointer;
    padding: 4px 10px;
    flex-shrink: 0;
    transition: background 0.12s, border-color 0.12s;
}

.btn-dark {
    color: #e0e0e0;
    background: linear-gradient(to bottom, #3a3a3a 0%, #282828 100%);
}

.btn-icon {
    width: auto;
    flex: 1;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

#btn-menu, #btn-undo, #btn-hint {
    border-color: #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

#btn-undo, #btn-hint {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

#btn-chat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: #e0e0e0;
    padding: 4px 8px;
    cursor: pointer;
    transition: background 0.15s;
    position: relative;
    top: -1px;
}
#btn-chat:hover {
    background: rgba(255,255,255,0.1);
}
#btn-chat-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.8);
}

#btn-undo {
    position: relative;
    top: -1px;
}

#btn-hint {
    position: relative;
    top: -9px;
}

#btn-menu:hover, #btn-undo:hover, #btn-hint:hover {
    border-color: #909090;
}

.btn-dark:hover {
    background: linear-gradient(to bottom, #484848 0%, #343434 100%);
    border-color: #888;
}

.btn-dark:active {
    background: linear-gradient(to bottom, #282828 0%, #1e1e1e 100%);
}

.btn-gold {
    color: #f0c040;
    background: linear-gradient(to bottom, #2c2810 0%, #1c1a0a 100%);
    border-color: #806020;
}

.btn-gold:hover {
    background: linear-gradient(to bottom, #3c3818 0%, #2a2610 100%);
    border-color: #c09030;
}

/* ── Move History ────────────────────────────────────────────────── */

/* History overlay */
#hist-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9000;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#hist-overlay.active { display: flex; }
#hist-overlay-box {
    width: 80vw;
    max-width: 900px;
    height: 80vh;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    background: linear-gradient(to bottom, #efefef 0%, #e4e4e4 100%);
    cursor: default;
}
#hist-overlay-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #c8c8d8;
    flex-shrink: 0;
}
#hist-overlay-scroll {
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(44,95,138,0.4) transparent;
}
#hist-overlay-scroll::-webkit-scrollbar { width: 8px; }
#hist-overlay-scroll::-webkit-scrollbar-track { background: transparent; }
#hist-overlay-scroll::-webkit-scrollbar-thumb { background: rgba(44,95,138,0.4); border-radius: 4px; }
#hist-overlay-grid {
    display: flex;
    flex-direction: column;
    padding: 4px 12px;
}
#hist-overlay-box .hist-num  { font-size: 17px; width: 44px; height: 52px; padding: 0 4px; }
#hist-overlay-box .hist-btn  { font-size: 16px; padding: 7px 10px; min-height: 42px; height: auto; }
#hist-overlay-box .hist-icon { width: 28px; height: 28px; }
#hist-overlay-box .hist-dot  { font-size: 11px; }

#hist-outer {
    flex: 1 1 0;
    background: linear-gradient(to bottom, #efefef 0%, #e4e4e4 100%);
    border: 1px solid #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    overflow: hidden;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    cursor: default;
}

#hist-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 8px;
    box-sizing: border-box;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: #c8c8d8;
}

.hist-nav-group {
    display: flex;
    gap: 3px;
}

.hist-nav-btn {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 4px;
    color: #c8c8d8;
    cursor: pointer;
    font-size: 11px;
    line-height: 1;
    padding: 0;
    width: 24px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}

.hist-nav-btn:hover:not(:disabled) {
    background: rgba(255,255,255,0.20);
}

.hist-nav-btn:disabled {
    opacity: 0.28;
    cursor: default;
}

#hist-scroll {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(44,95,138,0.4) transparent;
}

#hist-scroll::-webkit-scrollbar { width: 6px; }
#hist-scroll::-webkit-scrollbar-track { background: transparent; }
#hist-scroll::-webkit-scrollbar-thumb { background: rgba(44,95,138,0.4); border-radius: 3px; }

#hist-grid {
    display: flex;
    flex-direction: column;
    padding: 4px 2px 4px 6px;
}

.hist-row {
    display: flex;
    align-items: flex-start;
}

.hist-moves {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
}

.hist-num {
    width: 24px;
    flex-shrink: 0;
    font-size: 15px;
    font-weight: bold;
    color: #6070a0;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 3px;
}

.hist-btn {
    flex: 1 1 80px;
    min-width: 80px;
    display: flex;
    align-items: center;
    gap: 0;
    height: 34px;
    padding: 0 4px;
    font-size: 15px;
    cursor: pointer;
    border-radius: 3px;
    color: #1a2640;
    border: 2px solid transparent;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    position: relative;
}

.hist-start-anchor { flex: none; }

.hist-btn:hover          { background: #b8c8e0; }
.hist-btn.hist-future    { color: #8898bb; }
.hist-btn.hist-active    {
    background: #dde8f5;
    color: #1a2640;
    border-color: #2c5f8a;
    font-weight: bold;
}

.hist-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    display: block;
}

.hist-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 12px;
    line-height: 1;
    pointer-events: none;
}

.hist-dot-blunder { color: rgb(192, 57,  43); }
.hist-dot-mistake { color: rgb( 26, 74, 138); }

.hist-btn.hist-future .hist-dot { opacity: 0.47; }

/* ── Clock Card ──────────────────────────────────────────────────── */

#clock-card {
    background-image: var(--rb-cc-bg, linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    border: 1px solid #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 4px 8px;
    flex-shrink: 0;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: border-color 0.15s, box-shadow 0.15s;
}
#clock-card.clock-clickable {
    cursor: pointer;
}
#clock-card.clock-clickable:hover {
    border-color: #9090c0;
    box-shadow: 0 2px 12px rgba(100,100,180,0.35);
}

#room-name-label {
    font-size: 15px;
    font-weight: bold;
    color: #f0c040;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

#status-label {
    font-size: 15px;
    font-weight: bold;
    color: #b0b0b0;
    text-align: center;
    word-break: break-word;
    margin-bottom: 2px;
}

#status-label:empty {
    visibility: hidden; /* reserviert Platz; display:none würde Höhe wegnehmen */
}
#status-label {
    min-height: 1.2em;
}

#clock-main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#clock-main-row .btn-icon {
    flex: none;
    width: auto;
    padding: 2px 6px;
}


#clock-display {
    font-size: 36px;
    font-weight: bold;
    color: #666;
    text-align: center;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    min-height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    pointer-events: none;
}

#clock-display.active {
    color: #90cc90;
}

#clock-display.low {
    color: #e04040;
}

.sw-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 18px;
    font-weight: bold;
    font-variant-numeric: tabular-nums;
    color: #848484;
    line-height: 1.5;
}

.sw-row.sw-active {
    color: #e0e0e0;
    font-size: 20px;
}

.sw-row.sw-low {
    color: #e04040;
}

.sw-row.sw-row-solo {
    font-size: 32px;
    font-weight: bold;
}

.sw-row.sw-row-solo.sw-active {
    font-size: 36px;
}

.sw-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.sw-dot-w {
    background: #cccccc;
    border: 1px solid #888;
    box-shadow: 0 0 2px rgba(0,0,0,0.4);
}

.sw-dot-b {
    background: #222222;
    border: 1px solid #666;
}

#preset-edit-btn {
    margin-top: 4px;
    padding: 0 10px;
    font-size: 15px;
    font-weight: bold;
    color: #e0e0e0;
    background: linear-gradient(to bottom, #3a3a52 0%, #252538 100%);
    border: 1px solid #505068;
    border-radius: 5px;
    cursor: pointer;
    min-height: 28px;
}

#preset-edit-btn:hover {
    background: linear-gradient(to bottom, #484862 0%, #303045 100%);
    border-color: #70709a;
}

#preset-btn {
    width: 100%;
    margin-top: 4px;
    font-size: 13px;
    font-weight: bold;
    background: linear-gradient(to bottom, #3a3a52 0%, #252538 100%);
    border: 1px solid #505068;
    border-radius: 5px;
    color: #ccc;
    padding: 4px 10px;
    cursor: pointer;
    min-height: 28px;
}

#preset-btn:hover {
    background: linear-gradient(to bottom, #484862 0%, #303045 100%);
    border-color: #70709a;
}

#preset-btn.game-active {
    border-color: #993333;
    color: #e0a0a0;
}
#preset-btn.game-active:hover {
    background: linear-gradient(to bottom, #4a2222 0%, #311515 100%);
    border-color: #bb4444;
}

/* ── Dialogs ─────────────────────────────────────────────────────── */

.dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 900;
    overflow-y: auto;
    padding: 12px;
    box-sizing: border-box;
}

@media (max-height: 500px) {
    .dialog-overlay {
        align-items: flex-start;
        padding: 8px;
    }
}

.hidden { display: none !important; }
.dialog-overlay.hidden { display: none; }

.dialog-box {
    background: linear-gradient(to bottom, #2a2a3c 0%, #252538 100%);
    border: 1px solid #505068;
    border-radius: 12px;
    padding: 24px;
    min-width: 300px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    color: #e0e0e0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6);
}

.dialog-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #f0c040;
    text-align: center;
}

.dialog-section {
    margin-bottom: 14px;
}

.dialog-label {
    font-size: 13px;
    color: #aaa;
    margin-bottom: 6px;
}

.dialog-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.radio-btn {
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #505068;
    background: #1e1e30;
    font-size: 13px;
    color: #ccc;
    transition: all 0.12s;
    user-select: none;
}

.radio-btn:hover { background: #2a2a42; border-color: #70709a; }
.radio-btn.selected { background: #3a3a60; border-color: #8080c0; color: #fff; }

.dialog-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 20px;
    justify-content: flex-end;
}

.dialog-btn {
    padding: 8px 20px;
    border-radius: 6px;
    border: 1px solid #555;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    transition: all 0.12s;
}

.dialog-btn-primary {
    background: linear-gradient(to bottom, #3a3a6a 0%, #252558 100%);
    border-color: #5a5aa0;
    color: #9090d8;
}
.dialog-btn-primary:hover { background: linear-gradient(to bottom, #6868c0 0%, #5050b0 100%); box-shadow: 0 0 14px rgba(100,110,230,0.45); }

.dialog-btn-cancel {
    background: linear-gradient(to bottom, #3a3a3a 0%, #282828 100%);
    color: #ccc;
}
.dialog-btn-cancel:hover { background: linear-gradient(to bottom, #484848 0%, #343434 100%); }

/* ── Settings Dialog (tabbed) ────────────────────────────────────── */

.set-dialog {
    min-width: 520px;
    max-width: 560px;
}

.set-content {
    padding: 16px 20px 20px;
}

/* Tab bar */
.set-tab-bar {
    display: flex;
    border-bottom: none;
    margin-bottom: 0;
    gap: 0;
}

.set-tab {
    padding: 9px 28px;
    font-size: 15px;
    background: #252540;
    color: #a0b0d0;
    border: 1px solid #505070;
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    cursor: pointer;
    margin-right: -1px;
    position: relative;
    transition: background 0.1s, color 0.1s;
}

.set-tab:hover:not(.set-tab-active) {
    background: #303055;
    color: #b0c0e0;
}

.set-tab-active {
    background: #363650;
    color: #8eb4f0;
    font-weight: bold;
    box-shadow: inset 0 -3px 0 #4878cc;
    z-index: 1;
}

/* Tab content pane */
.set-pane {
    background: #363650;
    border: 1px solid #505070;
    border-radius: 0 6px 6px 6px;
    padding: 16px 18px;
    min-height: 270px;
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #585878 transparent;
}
.set-pane::-webkit-scrollbar {
    width: 5px;
}
.set-pane::-webkit-scrollbar-track {
    background: transparent;
}
.set-pane::-webkit-scrollbar-thumb {
    background: #585878;
    border-radius: 3px;
}
.set-pane::-webkit-scrollbar-thumb:hover {
    background: #7878a8;
}

/* Section header (uppercase label) */
.set-sec {
    font-size: 13px;
    font-weight: bold;
    color: #9090c0;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

/* Divider line under section header */
.set-div {
    height: 1px;
    background: #505070;
    margin: 0 0 8px;
}

/* Spacing between sections */
.set-spacing {
    height: 14px;
}

/* Radio button rows */
.set-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #c0cce0;
    padding: 3px 0;
    cursor: pointer;
    user-select: none;
}

.set-radio:hover { color: #dce8fc; }

.set-radio input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #4878cc;
    flex-shrink: 0;
    cursor: pointer;
}

/* Checkbox rows */
.set-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: #c0cce0;
    padding: 3px 0;
    cursor: pointer;
    user-select: none;
}

.set-check:hover { color: #dce8fc; }

.set-check input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #4878cc;
    flex-shrink: 0;
    cursor: pointer;
}

/* Sub-checkbox (indented, smaller) */
.set-check-sub {
    margin-left: 26px;
    font-size: 13px;
    color: #8899bb;
    margin-top: 2px;
}

.set-check-sub:hover { color: #aabbd8; }

/* Sub-radio (indented via wrapper, smaller text) */
.set-radio-sub {
    font-size: 13px;
    color: #8899bb;
    gap: 6px;
}

.set-radio-sub:hover { color: #aabbd8; }

.set-radio-sub input[type="radio"] {
    width: 14px;
    height: 14px;
}

.set-check-disabled {
    opacity: 0.45;
    pointer-events: none;
}

/* Engine vs Engine button */
.set-eve-btn {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: bold;
    color: #c0c8e0;
    background: linear-gradient(to bottom, #363650 0%, #282840 100%);
    border: 1px solid #585878;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s;
}

.set-eve-btn:hover:not(:disabled) { border-color: #8080b8; color: #d8e4f8; }
.set-eve-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Settings Dialog – theme-aware overrides ─────────────────────── */
.set-dialog .set-tab {
    background: var(--dlg-tab-bg);
    color: var(--dlg-tab-inact-clr);
    border-color: var(--dlg-border);
}
.set-dialog .set-tab:hover:not(.set-tab-active) {
    background: var(--dlg-tab-hover-bg);
    color: var(--dlg-tab-hover-clr);
}
.set-dialog .set-tab-active {
    background: var(--dlg-bg);
    color: var(--dlg-tab-active-clr);
    box-shadow: none;
}
.set-dialog .set-pane {
    background: var(--dlg-bg);
    border: 1px solid var(--dlg-border);
    scrollbar-color: var(--dlg-border) transparent;
}
.set-dialog .set-pane::-webkit-scrollbar-thumb { background: var(--dlg-border); }
.set-dialog .set-pane::-webkit-scrollbar-thumb:hover { background: var(--dlg-muted-text); }
.set-dialog .set-sec { color: var(--dlg-muted-text); }
.set-dialog .set-div { background: var(--dlg-sep); }
.set-dialog .set-radio { color: var(--dlg-primary-text); }
.set-dialog .set-radio:hover { color: var(--dlg-tab-active-clr); }
.set-dialog .set-check { color: var(--dlg-primary-text); }
.set-dialog .set-check:hover { color: var(--dlg-tab-active-clr); }
.set-dialog .set-check-sub { color: var(--dlg-muted-text); }
.set-dialog .set-radio-sub { color: var(--dlg-muted-text); }
.set-dialog .set-eve-btn {
    background: var(--dlg-action-bg);
    border: 1px solid var(--dlg-action-border);
    color: var(--dlg-action-color);
}
.set-dialog .set-eve-btn:hover:not(:disabled) { border-color: var(--dlg-muted-text); color: var(--dlg-primary-text); }
.set-dialog .dialog-btn-primary {
    background: var(--dlg-btn-ok-bg);
    border-color: var(--dlg-btn-ok-border);
    color: var(--dlg-btn-ok-color);
}
.set-dialog .dialog-btn-primary:hover { background: var(--dlg-btn-ok-bg-hov); border-color: var(--dlg-btn-ok-bdr-hov); }
.set-dialog .dialog-btn-cancel {
    background: var(--dlg-btn-cancel-bg);
    border-color: var(--dlg-btn-cancel-bdr);
    color: var(--dlg-btn-cancel-clr);
}
.set-dialog .dialog-btn-cancel:hover { background: var(--dlg-btn-cancel-bg-hov); border-color: var(--dlg-btn-cancel-bdr-hov); color: var(--dlg-btn-cancel-clr-hov); }

/* ── Settings Dialog – phone responsive ────────────────────────── */
@media (max-width: 500px) {
    #eval-chart-collapse-btn { display: none; }

    .set-dialog {
        min-width: 0 !important;
        width: min(96vw, 520px);
    }
    .set-dialog > div:first-child {
        padding: 11px 14px !important;
    }
    .set-content {
        padding: 10px 12px 14px;
    }
    .set-tab {
        flex: 1;
        text-align: center;
        padding: 7px 2px;
        font-size: 13px;
    }
    .set-pane {
        padding: 10px 10px;
        min-height: 150px;
        max-height: calc(100svh - 230px);
    }
    .set-sec { font-size: 11px; }
    .set-radio,
    .set-check { font-size: 13px; }
    .set-check-sub {
        font-size: 12px;
        margin-left: 18px;
    }
    .set-radio-sub { font-size: 12px; }
    .set-dialog .dialog-btn { padding: 7px 12px; font-size: 13px; }
    .set-dialog .dialog-btn-row { gap: 6px; margin-top: 10px; }

    /* Setup dialog – portrait phone */
    .setup-dialog {
        min-width: 0 !important;
        width: min(calc(100vw - 24px), 938px);
        max-height: none;
    }
    .setup-dialog > div:first-child {
        padding: 11px 14px !important;
    }
    .setup-dialog-body {
        padding: 10px 10px 14px !important;
    }
    .setup-layout {
        flex-direction: column;
        align-items: center;
    }
    .setup-right {
        width: 100% !important;
    }
    .setup-piece-btn {
        flex: 1 !important;
        height: 52px !important;
    }
}

/* Setup dialog – tablet portrait (e.g. iPad), same stacked layout as phone portrait
   above — the side-by-side layout only has room for the piece palette from ~960px
   wide up, otherwise it gets pushed below the fold and only reachable by scrolling. */
@media (orientation: portrait) and (max-width: 960px) {
    .setup-dialog {
        min-width: 0 !important;
        width: min(calc(100vw - 24px), 938px);
        max-height: none;
    }
    .setup-dialog > div:first-child {
        padding: 11px 14px !important;
    }
    .setup-dialog-body {
        padding: 10px 10px 14px !important;
    }
    .setup-layout {
        flex-direction: column;
        align-items: center;
    }
    .setup-right {
        width: 100% !important;
    }
    .setup-piece-btn {
        flex: 1 !important;
        height: 52px !important;
    }
}

/* ── Settings Dialog + all dialogs – landscape phone ───────────── */
@media (max-height: 500px) {
    .dialog-box {
        max-height: none;
    }
    .set-pane {
        min-height: 100px;
        max-height: 170px;
    }
    .setup-dialog {
        min-width: 0 !important;
        width: min(96vw, 938px);
        max-height: none !important;
        overflow: hidden !important;
    }
    .setup-dialog > div:first-child {
        padding: 11px 14px !important;
    }
    .setup-dialog-body {
        padding: 10px 12px 12px !important;
        overflow-y: auto;
    }
    .setup-right {
        width: 280px !important;
        flex-shrink: 0 !important;
    }
    .setup-piece-btn {
        flex: 1 !important;
        height: 44px !important;
    }
}

/* ── Neues Spiel / Confirm / Game-End Dialogs – theme-aware ─────── */
.ng-dialog { background: var(--dlg-bg); border-color: var(--dlg-border); }
.ng-dialog .dialog-label { color: var(--dlg-muted-text); }
.ng-dialog .radio-btn {
    background: var(--dlg-radio-bg);
    border: 1px solid var(--dlg-radio-border);
    color: var(--dlg-radio-color);
}
.ng-dialog .radio-btn:hover { filter: brightness(0.97); border-color: var(--dlg-muted-text); }
.ng-dialog .radio-btn.selected { background: var(--dlg-radio-sel-bg); border-color: var(--dlg-radio-sel-bdr); color: var(--dlg-primary-text); }
.ng-dialog .sdlg-btn-gold {
    color: #7a5800;
    background: #fefce8;
    border-color: #dfc870;
}
.ng-dialog .sdlg-btn-gold:hover  { background: #fef8d0; border-color: #c8a040; color: #5a3e00; }
.ng-dialog .sdlg-btn-gold:active { background: #fef0b0; }
.ng-dialog .sdlg-btn-red {
    color: #a02020;
    background: #fef0f0;
    border-color: #e0a0a0;
}
.ng-dialog .sdlg-btn-red:hover  { background: #fce0e0; border-color: #c06060; color: #801818; }
.ng-dialog .sdlg-btn-red:active { background: #f8d0d0; }
.ng-dialog .sdlg-btn-cancel {
    color: var(--dlg-sdlg-cancel-clr);
    background: var(--dlg-sdlg-cancel-bg);
    border-color: var(--dlg-sdlg-cancel-bdr);
}
.ng-dialog .sdlg-btn-cancel:hover  { filter: brightness(0.97); }
.ng-dialog .sdlg-btn-cancel:active { filter: brightness(0.93); }
.ng-dialog .sdlg-btn-neutral {
    color: #303048;
    background: #e8e8f2;
    border-color: #a8a8c4;
}
.ng-dialog .sdlg-btn-neutral:hover  { background: #dcdcec; border-color: #8080a8; color: #1e1e38; }
.ng-dialog .sdlg-btn-blue {
    color: var(--dlg-btn-ok-color);
    background: var(--dlg-btn-ok-bg);
    border-color: var(--dlg-btn-ok-border);
}
.ng-dialog .sdlg-btn-blue:hover  { background: var(--dlg-btn-ok-bg-hov); border-color: var(--dlg-btn-ok-bdr-hov); }
.ng-dialog .sdlg-btn-blue:active { filter: brightness(0.94); }
.ng-dialog .sdlg-btn-neutral:active { background: #d0d0e4; }
.ng-dialog .dialog-btn-primary {
    background: var(--dlg-btn-ok-bg);
    border-color: var(--dlg-btn-ok-border);
    color: var(--dlg-btn-ok-color);
}
.ng-dialog .dialog-btn-primary:hover { background: var(--dlg-btn-ok-bg-hov); border-color: var(--dlg-btn-ok-bdr-hov); box-shadow: 0 0 14px rgba(100,110,230,0.4); }
.ng-dialog .dialog-btn-cancel {
    background: var(--dlg-btn-cancel-bg);
    border-color: var(--dlg-btn-cancel-bdr);
    color: var(--dlg-btn-cancel-clr);
}
.ng-dialog .dialog-btn-cancel:hover { background: var(--dlg-btn-cancel-bg-hov); border-color: var(--dlg-btn-cancel-bdr-hov); color: var(--dlg-btn-cancel-clr-hov); }

/* ── Lounge Dialog Scrollbar ─────────────────────────────────────── */
.lounge-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(160,160,210,0.55) transparent;
}
.lounge-scroll::-webkit-scrollbar { width: 5px; }
.lounge-scroll::-webkit-scrollbar-track { background: transparent; }
.lounge-scroll::-webkit-scrollbar-thumb {
    background: rgba(160,160,210,0.5);
    border-radius: 10px;
    transition: background 0.2s;
}
.lounge-scroll::-webkit-scrollbar-thumb:hover { background: rgba(180,180,240,0.85); }

/* ── Dialog Overlay – elegant scrollbar (fallback for very tall dialogs) */
.dialog-overlay { scrollbar-width: thin; scrollbar-color: rgba(160,160,210,0.45) rgba(0,0,0,0.2); }
.dialog-overlay::-webkit-scrollbar { width: 6px; }
.dialog-overlay::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 3px; }
.dialog-overlay::-webkit-scrollbar-thumb {
    background: rgba(160,160,210,0.55);
    border-radius: 10px;
    transition: background 0.2s;
}
.dialog-overlay::-webkit-scrollbar-thumb:hover { background: rgba(180,180,240,0.9); }

/* ── Mensch vs. Computer Dialog Content ─────────────────────────── */
.cpd-content {
    max-height: calc(100vh - 260px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(140,140,180,0.35) transparent;
}
.cpd-content::-webkit-scrollbar { width: 5px; }
.cpd-content::-webkit-scrollbar-track { background: transparent; }
.cpd-content::-webkit-scrollbar-thumb { background: rgba(140,140,180,0.35); border-radius: 3px; }
.cpd-content::-webkit-scrollbar-thumb:hover { background: rgba(140,140,180,0.65); }
.cpd-content .dialog-label { font-size: 14px; font-weight: 600; color: var(--dlg-primary-text); }
.cpd-content .radio-btn { padding: 8px 16px; font-size: 14px; }
.cpd-content .dialog-btn { padding: 9px 22px; font-size: 14px; }

/* ── Context Menu ────────────────────────────────────────────────── */

.context-menu {
    position: fixed;
    background: rgba(42, 42, 42, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(100, 100, 100, 0.5);
    scrollbar-width: thin;
    scrollbar-color: rgba(180,180,180,0.3) transparent;
    border-radius: 6px;
    padding: 4px 0;
    color: #e0e0e0;
    font-size: 15px;
    z-index: 1000;
    min-width: 160px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5);
}

.context-menu::-webkit-scrollbar { width: 4px; }
.context-menu::-webkit-scrollbar-track { background: transparent; }
.context-menu::-webkit-scrollbar-thumb { background: rgba(180,180,180,0.3); border-radius: 2px; }
.context-menu::-webkit-scrollbar-thumb:hover { background: rgba(180,180,180,0.55); }

.context-menu.hidden { display: none; }

.context-menu-light {
    background: rgba(250,250,255,0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(140,140,220,0.6);
    border-radius: 10px;
    color: #202040;
    box-shadow: 0 6px 24px rgba(60,60,160,0.18);
    font-size: 14px;
    font-weight: 500;
}
.context-menu-light .context-item { padding: 10px 18px; }
.context-menu-light .context-item:hover { background: rgba(80,80,200,0.09); color: #2030a0; border-radius: 6px; }
.context-menu-light .context-sep { background: rgba(140,140,210,0.3); margin: 4px 10px; }

.context-item {
    padding: 7px 20px 7px 14px;
    cursor: pointer;
}

.context-item:hover { background: rgba(255,255,255,0.1); }

.context-sep {
    height: 1px;
    background: rgba(255,255,255,0.25);
    margin: 4px 8px;
}

/* ── Game Over Overlay ───────────────────────────────────────────── */

#game-over-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.65);
    z-index: 200;
}
#game-over-overlay.hidden { display: none; }

#game-over-card {
    width: 90%;
    max-width: 500px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #c0c0e0;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}

/* Header – Icon und Titel zentriert gestapelt */
#game-over-header {
    background: linear-gradient(135deg,#1c1c38 0%,#2e1f52 50%,#1a1a38 100%);
    border-bottom: 1px solid rgba(200,160,40,0.3);
    box-shadow: 0 2px 12px rgba(46,31,82,0.35);
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}
#game-over-overlay.outcome-win  #game-over-header { background: linear-gradient(135deg,#1a8020 0%,#229028 50%,#1a8020 100%); border-bottom-color: rgba(80,220,100,0.35); box-shadow: 0 2px 14px rgba(20,140,30,0.45); }
#game-over-overlay.outcome-loss #game-over-header { background: linear-gradient(135deg,#8a1414 0%,#aa1c1c 50%,#8a1414 100%); border-bottom-color: rgba(240,80,80,0.35); box-shadow: 0 2px 14px rgba(160,20,20,0.5); }
#game-over-overlay.outcome-draw #game-over-header { background: linear-gradient(135deg,#806800 0%,#a08400 50%,#806800 100%); border-bottom-color: rgba(240,200,40,0.35); box-shadow: 0 2px 14px rgba(160,130,0,0.5); }

#game-over-icon { line-height: 1; }
#game-over-icon svg { width: 68px; height: 68px; }
#game-over-overlay.outcome-win  #game-over-icon svg { stroke: #a8f0a8; filter: drop-shadow(0 0 8px rgba(160,240,160,0.9)) drop-shadow(0 0 22px rgba(160,240,160,0.6)); }
#game-over-overlay.outcome-loss #game-over-icon svg { stroke: #ffaaaa; filter: drop-shadow(0 0 8px rgba(255,160,160,0.9)) drop-shadow(0 0 22px rgba(255,160,160,0.6)); }
#game-over-overlay.outcome-draw #game-over-icon svg { stroke: #ffe080; filter: drop-shadow(0 0 8px rgba(255,220,100,0.9)) drop-shadow(0 0 22px rgba(255,220,100,0.6)); }

#game-over-result {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.2;
}
#game-over-overlay.outcome-win  #game-over-result { color: #f5cc50; }
#game-over-overlay.outcome-loss #game-over-result { color: #e07878; }
#game-over-overlay.outcome-draw #game-over-result { color: #88aadc; }

/* Body */
#game-over-body {
    background: #f2f2f8;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#game-over-rematch-area { width: 100%; margin-top: 14px; margin-bottom: 0; }

#game-over-reason {
    font-size: 18px;
    font-weight: 800;
    color: #5060a0;
    margin-bottom: 14px;
    letter-spacing: 1px;
}
#game-over-overlay.outcome-win  #game-over-reason { color: #287838; }
#game-over-overlay.outcome-loss #game-over-reason { color: #b03030; }
#game-over-overlay.outcome-draw #game-over-reason { color: #7a6000; }

#game-over-elo {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    border-radius: 20px;
    line-height: 1;
}
#game-over-elo:not(:empty)           { padding: 5px 16px; }
#game-over-elo.elo-gain              { color: #309050; }
#game-over-elo.elo-loss              { color: #c04040; }
#game-over-elo.elo-draw              { color: #5070b0; }
#game-over-elo.elo-unrated           { color: #1a1a2a; font-size: 12px; }
#game-over-elo.elo-gain:not(:empty)  { background: rgba(48,144,80,0.12); }
#game-over-elo.elo-loss:not(:empty)  { background: rgba(192,64,64,0.12); }
#game-over-elo.elo-draw:not(:empty)  { background: rgba(80,112,176,0.12); }
#game-over-elo.elo-unrated:not(:empty){ background: rgba(144,144,176,0.10); }

#game-over-newgame {
    padding: 11px 20px;
    min-width: 130px;
    font-size: 14px;
    font-weight: 700;
    background: linear-gradient(to bottom, #d8f0d8, #c0e0c0);
    border: 1px solid #60a060;
    border-radius: 8px;
    color: #205020;
    cursor: pointer;
    letter-spacing: 0.3px;
    transition: background 0.15s;
}
#game-over-newgame:hover {
    background: linear-gradient(to bottom, #c8e8c8, #b0d8b0);
    border-color: #409040;
}

#game-over-close {
    padding: 11px 20px;
    min-width: 130px;
    font-size: 14px;
    font-weight: 600;
    background: #f0f0f8;
    border: 1px solid #c0c0d8;
    border-radius: 8px;
    color: #505070;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
#game-over-close:hover {
    background: #e4e4f4;
    border-color: #9090c0;
    color: #303050;
}

#game-over-donate { margin-top: 14px; }
#game-over-donate-link {
    font-size: 12.5px;
    font-weight: 600;
    color: #7a7a94;
    text-decoration: none;
    letter-spacing: 0.2px;
    opacity: 0.85;
    transition: opacity 0.15s, color 0.15s;
}
#game-over-donate-link:hover {
    color: #4a4a68;
    opacity: 1;
}
#game-over-donate-link:hover #game-over-donate-text {
    text-decoration: underline;
}
#game-over-donate-icon {
    font-size: 24px;
    vertical-align: middle;
    position: relative;
    top: -4px;
}

/* ── Promotion Dialog ────────────────────────────────────────────── */

#promo-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

#promo-overlay.hidden { display: none; }

#promo-box {
    background: var(--dlg-bg, #2a2a3c);
    border: 1px solid var(--dlg-border, #505068);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.25);
}

#promo-header {
    background: var(--dlg-header-grad, linear-gradient(135deg,#1c1c38 0%,#2e1f52 50%,#1a1a38 100%));
    border-bottom: 1px solid var(--dlg-header-border, rgba(200,160,40,0.3));
    box-shadow: var(--dlg-header-shadow, 0 2px 12px rgba(46,31,82,0.35));
    padding: 14px 20px;
}

#promo-title {
    font-size: 16px;
    font-weight: bold;
    color: var(--dlg-title-color, #e8b84b);
}

#promo-body {
    padding: 16px 20px 20px;
}

#promo-pieces {
    display: flex;
    gap: 10px;
}

.promo-piece {
    width: 72px;
    height: 72px;
    cursor: pointer;
    border-radius: 10px;
    border: 2px solid transparent;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.promo-piece:hover {
    border-color: #8080c0;
    background: rgba(128,128,192,0.15);
    transform: translateY(-2px);
}

.promo-piece:active { transform: translateY(0); }

/* ── Drag piece overlay ──────────────────────────────────────────── */

#drag-piece {
    position: fixed;
    pointer-events: none;
    z-index: 500;
    display: none;
}

/* ── Scrollbar for left panel ────────────────────────────────────── */

#left-panel {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

/* ── Input / Select styling ──────────────────────────────────────── */

input[type=range] {
    width: 100%;
    accent-color: #8080c0;
}

/* ── ELO Dialog specific ─────────────────────────────────────────── */

#elo-display {
    font-size: 36px;
    font-weight: bold;
    color: #f0c040;
    text-align: center;
    margin: 8px 0;
}

/* ── Responsive: Portrait mode ───────────────────────────────────── */

/* ── Analysis bar below board ────────────────────────────────────── */

#board-area.has-analysis-bar {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* board-container sizes exactly to canvas — no extra height, bar docks directly below */
#board-area.has-analysis-bar #board-container {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* canvas constrained to its container (no width/height override — JS inline styles preserved) */
#board-area.has-analysis-bar #chess-board {
    max-width: 100% !important;
}

#gor-floating {
    width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* ── Responsive: Portrait phone (≤599px) — Brett only ───────────── */

@media (orientation: portrait) and (max-width: 599px) {

    body { overflow: hidden; height: 100svh; }

    #captures-collapse-btn { display: none !important; }
    #left-panel, .panel-separator, .panel-sep-line { display: none !important; }

    #app {
        flex-direction: column;
        align-items: stretch;
        height: 100svh;
        width: 100vw;
        padding: 0;
        overflow: hidden;
    }

    #board-area {
        display: flex;
        flex: 1 1 0;
        min-height: 0;
        align-items: center;
        justify-content: center;
        width: 100vw;
        padding: 3px 0 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    #board-container {
        width: auto !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #chess-board {
        max-width: 100vw !important;
        max-height: 100svh !important;
    }

    #right-panel {
        display: flex !important;
        flex-direction: column;
        flex: 0 0 auto;
        width: 100% !important;
        min-width: 0;
        padding: 4px 8px;
        gap: 4px;
        overflow: hidden;
    }

    #btn-menu     { display: none !important; }
    #material-card { order: 0; }
    #game-row     { order: 1; }
    #cards-row    { order: 2; }
    #hist-outer      { order: 0; }
    #captures-card   { order: 0; }
    #eval-chart-card { order: 0; }
    #clock-eval-col  { order: 0; }
    #eval-badge      { order: 0; }
    #clock-card      { order: 0; }

    /* ── Material-Bilanz-Card: volle Breite, zwei Zeilen (Weiß/Schwarz),
       Figurengröße fix auf 1/15 der Zeilenbreite — theoretisches Maximum
       (8 Bauern + 2T + 2L + 2S + 1D) passt so immer in eine Zeile. ── */
    #material-card {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
        box-sizing: border-box;
        flex-shrink: 0;
        background: linear-gradient(to bottom, #efefef 0%, #e4e4e4 100%);
        border: 1px solid #707070;
        box-shadow: 0 2px 8px rgba(0,0,0,0.35);
        border-radius: 8px;
        overflow: hidden;
        padding: 0 0 3px;
    }
    #material-header {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: linear-gradient(to bottom, #5c5c5c 0%, #262626 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        padding: 5px 8px;
        box-sizing: border-box;
        flex-shrink: 0;
        font-size: 13px;
        font-weight: 600;
        color: #c8c8d8;
    }
    #material-collapse-btn {
        position: absolute;
        left: 7px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #c8c8d8;
        padding: 3px 5px;
        display: flex;
        align-items: center;
        border-radius: 4px;
        line-height: 1;
        transition: background 0.15s;
    }
    #material-collapse-btn:hover { background: rgba(255,255,255,0.14); }
    #material-collapse-btn svg { display: block; transition: transform 0.22s ease; }
    #material-card.material-collapsed #material-collapse-btn svg { transform: rotate(180deg); }
    #material-card.material-collapsed { padding-bottom: 0; }
    #material-card.material-collapsed #material-header { border-bottom: none; }
    #material-card.material-collapsed .material-row { display: none; }
    #material-title {
        font-size: 13px;
        font-weight: 600;
        color: #c8c8d8;
        letter-spacing: 0.02em;
    }
    #material-material {
        position: absolute;
        right: 10px;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
    }
    #material-material:empty { display: none; }
    #material-header.captures-lead-white { border-color: rgba(200, 220, 255, 0.4); }
    #material-header.captures-lead-black { border-color: rgba(130, 130, 210, 0.5); }
    .material-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        aspect-ratio: 15 / 1;
        box-sizing: border-box;
        padding: 0 6px;
    }
    .material-piece-img {
        flex: 0 0 calc(100% / 15);
        width: calc(100% / 15);
        height: auto;
        aspect-ratio: 1;
        display: block;
    }

    .card-inactive { display: none !important; }

    #game-row {
        display: flex;
        flex-direction: row;
        gap: 4px;
        width: 100%;
        flex-shrink: 0;
        align-items: stretch;
    }

    #hist-outer, #captures-card, #eval-chart-card, #clock-eval-col {
        flex: 1 1 0;
        min-width: 0;
    }

    #hist-outer { min-height: 0; overflow: hidden; }
    .hist-num { font-size: 12px; height: 27px; width: 20px; }
    .hist-btn { font-size: 12px; height: 27px; }
    .hist-dot { font-size: 9px; }
    .hist-icon { width: 18px; height: 18px; }

    #hist-nav-first, #hist-nav-last,
    #bar-nav-first, #bar-nav-last { display: none !important; }

    #clock-eval-col {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 4px;
        overflow: visible;
    }

    /* ── Focus Mode: nur Brett, Zughistorie (volle Breite, füllt Resthöhe)
       + Badge-Zeile/Uhr (volle Breite, feste Höhe) darunter — analog Desktop. ── */
    body.focus-mode #material-card,
    body.focus-mode #cards-row,
    body.focus-mode #captures-card,
    body.focus-mode #eval-chart-card {
        display: none !important;
    }
    body.focus-mode #hist-outer {
        display: flex !important;
    }
    body.focus-mode #game-row {
        flex-direction: column;
    }
    body.focus-mode #clock-eval-col {
        flex: 0 0 auto;
    }

    #cards-row {
        display: flex;
        flex-direction: row;
        gap: 4px;
        width: 100%;
        flex-shrink: 0;
    }

    #cards-row > * {
        flex: 1 1 0;
        min-width: 0;
    }

    /* ── Uhr-Card: alles verkleinern ── */
    #clock-card {
        padding: 2px 4px;
    }
    #room-name-label {
        font-size: 10px;
        margin-bottom: 1px;
    }
    #status-label {
        font-size: 13px;
        margin-top: 3px;
        margin-bottom: 1px;
    }
    #clock-main-row { gap: 3px; }
    /* Grid statt Flex, nur im Focus-Modus: die beiden äußeren 1fr-Spalten sind per
       Definition immer gleich breit, unabhängig davon, wie viel Platz Menü-Button
       (Icon+Text) bzw. Zurücknehmen/Tipp-Buttons (nur Icons) tatsächlich brauchen —
       dadurch bleibt #clock-display in der mittleren auto-Spalte echt mittig auf
       der ganzen Badge. Im Detailmodus bleibt es bei der bisherigen Flex-Zentrierung
       auf den verbleibenden Platz zwischen den beiden Seiten (Basisregel). */
    body.focus-mode #clock-main-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
    }
    body.focus-mode #clock-main-row #btn-menu-float   { justify-self: start; }
    body.focus-mode #clock-main-row #clock-display    { justify-self: center; }
    body.focus-mode #clock-main-row #clock-right-btns { justify-self: end; }
    #clock-main-row .btn-icon { padding: 1px 3px; }
    #clock-right-btns { gap: 2px; }
    #clock-right-btns svg { width: 13px; height: 13px; }
    #btn-menu-float { padding: 2px 4px; gap: 1px; }
    #btn-menu-float-icon { font-size: 32px; }
    #btn-menu-float-label { font-size: 11px; }
    #clock-display { min-height: 34px; }
    .sw-row { font-size: 13px !important; line-height: 1.3; gap: 3px; }
    .sw-row.sw-active { font-size: 14px !important; }
    /* Angezeigte Uhrzeit wird über dieses Markup gerendert (nicht über
       #clock-displays eigene font-size) — hier greift die tatsächliche Größe. */
    .sw-row.sw-row-solo { font-size: 18px !important; }
    .sw-row.sw-row-solo.sw-active { font-size: 19px !important; }
    body.focus-mode .sw-row.sw-row-solo { font-size: 26px !important; }
    body.focus-mode .sw-row.sw-row-solo.sw-active { font-size: 28px !important; }
    .sw-dot { width: 6px; height: 6px; }
    #eval-badge { padding: 3px 5px; gap: 4px; }
    #eval-badge #eval-score { font-size: 10px; min-width: 28px; }
    #eval-badge #eval-bar-container { height: 5px; }

    /* ── Spieler-Card ── */
    .player-card { padding: 4px 8px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
    .card-name { font-size: 12px; }
    .card-elo { font-size: 12px; }
    .card-sub { font-size: 11px; }
    .card-elo-row { gap: 8px; }
    .color-dot { width: 8px; height: 8px; }
    #profile-level { font-size: 12px; }
    /* Globe/trophy icons are sized via inline style (JS toggles display) — !important
       needed to override that from a media query. Shrunk + shifted left to align
       horizontally with the color dot (left: 9px, inherited from the base rule). */
    #profile-globe { width: 13px !important; height: 13px !important; left: 6px !important; top: 2px !important; }
    #profile-globe svg { width: 13px !important; height: 13px !important; }

    /* ── Engine-Card ── */
    #engine-card { padding: 4px 8px; min-height: 44px; display: flex; flex-direction: column; justify-content: center; }
    #engine-name { font-size: 12px; }
    #engine-elo { font-size: 12px; }
    #engine-level { font-size: 12px; }
    #engine-rated-icon { width: 13px !important; height: 13px !important; left: 6px !important; top: 2px !important; }
    #engine-rated-icon svg { width: 13px !important; height: 13px !important; }
    .engine-sync-icon { width: 18px !important; height: 18px !important; }
    .engine-sync-icon svg { width: 14px !important; height: 14px !important; }
    .engine-sync-icon-top    { top: -1px !important; }
    .engine-sync-icon-bottom { bottom: 1px !important; }

    /* ── Modus-Card ── */
    #mode-label { display: none !important; }

    /* ── Analysebrett: Canvas auf Viewport-Breite begrenzen, Seitenverhältnis beibehalten ── */
    #board-area.has-analysis-bar #chess-board {
        max-width: 100vw !important;
        width: auto !important;
        height: auto !important;
    }

    /* ── Kontextmenü kompakter, damit alle Einträge (inkl. Impressum) ohne Abschneiden passen ── */
    .context-menu   { font-size: 13px; }
    .context-item   { padding: 5px 14px 5px 10px; line-height: 1.25; }
    .context-sep    { margin: 2px 6px; }
}

/* ── Responsive: Portrait tablet (≥600px) — Brett oben, Panel unten */

@media (orientation: portrait) and (min-width: 600px) {

    body { overflow: hidden; height: 100svh; }

    #captures-collapse-btn { display: none !important; }
    #left-panel, .panel-separator, .panel-sep-line { display: none !important; }

    #app {
        flex-direction: column;
        align-items: stretch;
        height: 100svh;
        width: 100%;
        padding: 0;
        overflow: hidden;
    }

    /* Brett nimmt den verbleibenden Platz; schrumpft damit das Panel passt */
    #board-area {
        display: flex;
        flex: 1 1 0;
        min-height: 0;
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 8px 0 0 0;
        overflow: hidden;
    }

    #board-container {
        width: auto !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #chess-board {
        max-width: 100vw !important;
        max-height: calc(100svh - 8px) !important;
    }

    /* Panel: natürliche Höhe, kein Schrumpfen */
    #right-panel {
        display: flex !important;
        flex-direction: column;
        flex: 0 0 auto;
        width: 100% !important;
        min-width: 0;
        padding: 6px 12px;
        gap: 4px;
        overflow: hidden;
    }

    /* Reihenfolge: game-row → cards */
    #btn-menu  { display: none !important; }
    #game-row  { order: 1; }
    #cards-row { order: 2; }
    #hist-outer    { order: 0; }
    #clock-eval-col { order: 0; }
    #eval-badge    { order: 0; }
    #clock-card    { order: 0; }

    /* eval-chart immer versteckt auf Tablet-Portrait; captures bleibt sichtbar */
    #eval-chart-card { display: none !important; }

    /* game-row: Captures | Zughistorie | Uhr nebeneinander */
    #game-row {
        display: flex;
        flex-direction: row;
        gap: 6px;
        width: 100%;
        flex-shrink: 0;
        align-items: stretch;
        /* +10px over the natural stretch height, so Captures/Hist/Clock grow and the
           board (flex: 1 1 0 in #board-area) shrinks by the same amount. */
        min-height: 148px;
    }

    #captures-card, #hist-outer, #eval-chart-card, #clock-eval-col {
        flex: 1 1 0;
        min-width: 0;
    }

    #captures-card { min-height: 0; overflow: hidden; }
    #hist-outer    { min-height: 0; overflow: hidden; }

    /* Uhr oben, Eval unten — column-reverse weil Eval im HTML vor Uhr steht */
    #clock-eval-col {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 6px;
        overflow: visible;
    }

    /* Without this, #clock-card stays at its own natural (smaller) content height and
       the extra row height added above just becomes empty space above it inside
       #clock-eval-col (eval-badge is hidden in this breakpoint, so clock-card is the
       only visible child) — grow it to fill that space instead. */
    #clock-card {
        flex: 1 1 auto;
    }

    /* ── Focus Mode: Layout/Höhe bleiben wie im Normalzustand (Zughistorie
       links, Uhr rechts, gleiche Höhe) — nur Profil-/Engine-Cards ausblenden.
       Da Materialbilanz (global per Focus-Mode-Regel) wegfällt, teilen sich
       die verbleibenden zwei Cards die Breite automatisch neu (statt zu dritt). ── */
    body.focus-mode #cards-row {
        display: none !important;
    }
    /* Materialbilanz-/Eval-Zeile exakt so hoch wie #hist-header (22px Nav-
       Button + 2×5px Padding + 1px Border = 33px); #clock-card (flex:1 1
       auto) schrumpft dadurch automatisch um genau diese Höhe, Gesamthöhe
       bleibt unverändert — unabhängig davon, welche der beiden aktiv ist. */
    body.focus-mode #focus-material-bar,
    body.focus-mode #eval-badge.focus-info-active {
        min-height: 33px;
    }
    /* Nur Tablet-Portrait: Badge-Zeile unter statt über die Uhr — order unter
       den Standard (0) von #clock-card senken, damit sie in #clock-eval-cols
       column-reverse-Kontext ans main-start (unten) statt main-end (oben) rutscht. */
    body.focus-mode #focus-material-bar,
    body.focus-mode #eval-badge {
        order: -1;
    }

    /* User / Engine / Modus nebeneinander, gleich breit */
    #cards-row {
        display: flex;
        flex-direction: row;
        gap: 6px;
        width: 100%;
        flex-shrink: 0;
    }

    #cards-row > * {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Setup dialog – portrait tablet (iPad): keep row layout, smaller canvas + right panel */
    .setup-dialog {
        min-width: 0 !important;
        width: min(96vw, 938px);
    }
    .setup-right {
        width: 240px !important;
        flex-shrink: 0 !important;
    }
    .setup-piece-btn {
        flex: 1 !important;
        height: 44px !important;
    }
}

/* ── Responsive: Landscape mobile (phone) — Brett links, Cards rechts ── */

@media (orientation: landscape) and (max-height: 600px) and (max-width: 950px), (max-height: 550px) and (min-width: 951px) {

    body { overflow: hidden; height: 100svh; }

    #left-panel, .panel-separator, .panel-sep-line { display: none !important; }
    #btn-menu, #mode-label, #engine-card, #profile-card { display: none !important; }
    #captures-collapse-btn, #eval-chart-collapse-btn { display: none !important; }

    #app {
        display: flex;
        flex-direction: row;
        align-items: stretch;
        width: 100vw;
        height: 100svh;
        padding: 0;
        overflow: hidden;
    }

    #board-area {
        display: flex;
        flex: 1 1 0;
        align-items: center;
        justify-content: center;
        height: 100svh;
        padding: 0;
        overflow: hidden;
    }

    #board-container {
        width: auto !important;
        height: auto !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }

    #chess-board {
        max-height: 100svh !important;
        max-width: calc(100vw - 240px) !important;
    }

    /* Rechtes Panel: feste Breite, am rechten Rand */
    #right-panel {
        display: flex !important;
        flex-direction: column;
        flex: 0 0 240px;
        width: 240px;
        height: 100svh;
        padding: 4px 6px;
        gap: 4px;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Wrapper-Divs transparent — Kinder direkt im Panel-Flex */
    #cards-row, #game-row, #clock-eval-col { display: contents; }

    /* Reihenfolge: Spieler → Engine → Zughistorie → Eval → Uhr */
    #profile-card { order: 1; flex-shrink: 0; }
    #engine-card  { order: 2; flex-shrink: 0; }
    #hist-outer      { order: 3; flex: 1 1 0; min-height: 60px; overflow: hidden; }
    #captures-card   { order: 3; flex: 1 1 0; min-height: 60px; overflow: hidden; }
    #eval-chart-card { order: 3; flex: 1 1 0; min-height: 60px; overflow: hidden; }
    #eval-badge      { order: 4; flex-shrink: 0; }
    #clock-card      { order: 5; flex-shrink: 0; }
    .card-inactive   { display: none !important; }

    /* ── Spieler-Card ── */
    .player-card {
        padding: 5px 8px;
        min-height: 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .card-name    { font-size: 12px; }
    .card-elo     { font-size: 12px; }
    .card-sub     { font-size: 10px; }
    .card-elo-row { gap: 6px; }
    .color-dot    { width: 7px; height: 7px; }
    #profile-level { font-size: 11px; }

    /* ── Engine-Card ── */
    #engine-card {
        padding: 5px 8px;
        min-height: 52px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #engine-name  { font-size: 12px; }
    #engine-elo   { font-size: 12px; }
    #engine-level { font-size: 11px; }

    /* ── Zughistorie ── */
    .hist-num  { font-size: 11px; height: 24px; width: 22px; }
    .hist-btn  { font-size: 11px; height: 24px; }
    .hist-dot  { font-size: 9px; }
    .hist-icon { width: 16px; height: 16px; }

    /* ── Eval-Badge ── */
    #eval-badge {
        padding: 3px 6px;
        gap: 6px;
        flex-direction: row;
        align-items: center;
    }
    #eval-badge #eval-score         { font-size: 11px; min-width: 32px; }
    #eval-badge #eval-bar-container { height: 6px; }

    /* ── Uhr-Card ── */
    #clock-card            { padding: 3px 6px; }
    #room-name-label       { font-size: 9px; margin-bottom: 1px; }
    #status-label          { font-size: 13px; margin-top: 2px; margin-bottom: 1px; }
    #clock-display         { min-height: 36px; }
    #clock-main-row        { gap: 2px; }
    #clock-main-row .btn-icon { padding: 1px 2px; }
    #clock-right-btns      { gap: 2px; }
    #clock-right-btns svg  { width: 12px; height: 12px; }
    #btn-menu-float        { padding: 2px 3px; gap: 1px; }
    #btn-menu-float-icon   { font-size: 28px; }
    #btn-menu-float-label  { font-size: 10px; }
    .sw-row                { font-size: 12px !important; line-height: 1.2; gap: 2px; }
    .sw-row.sw-active      { font-size: 13px !important; }
    /* Angezeigte Uhrzeit wird über dieses Markup gerendert (nicht über
       #clock-displays eigene font-size) — hier greift die tatsächliche Größe. */
    .sw-row.sw-row-solo    { font-size: 24px !important; }
    .sw-row.sw-row-solo.sw-active { font-size: 26px !important; }
    .sw-dot                { width: 5px; height: 5px; }
}

/* ── Fullscreen mode (Chrome + Safari on iPad) ───────────────────── */
/* body/#app height is always set via JS inline style in onWindowResize() to
   window.visualViewport.height — see the comment there. Confirmed via on-device diagnostic:
   position:fixed + inset:0 alone renders body/#app at a stale size on Chrome/iPad after a
   Fullscreen visit, so the JS correction is load-bearing here, not optional. Do NOT add a
   !important height rule here for :fullscreen body/#app — !important in a stylesheet beats
   an inline style regardless of specificity, so it would silently defeat the JS correction
   (a `:fullscreen body { height: 100dvh !important }` rule already caused a black-stripe
   incident once this way). */

:fullscreen body,
:-webkit-full-screen body {
    overflow: hidden !important;
}

:fullscreen #app,
:-webkit-full-screen #app {
    position: fixed !important;
    inset: 0 !important;
    /* height intentionally omitted — always set by JS to window.innerHeight */
}

@media (orientation: landscape) {
    :fullscreen #board-area,
    :-webkit-full-screen #board-area {
        padding: 4px 12px !important;
    }
}


/* ── Landscape redesign: left panel hidden, all content right ───── */

#left-panel { display: none !important; }

#right-panel {
    width: 310px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,100,180,0.3) transparent;
}

#clock-card { min-height: 70px; flex-shrink: 0; }
#status-label { min-height: 1.2em; } /* 1 Zeile */

#captures-card { flex: 1 1 0; min-height: 60px; overflow: hidden; cursor: default; }

#eval-badge {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    cursor: pointer;
    flex-shrink: 0;
}
#eval-badge:hover { opacity: 0.85; }
#eval-badge #eval-score { font-size: 14px; min-width: 44px; text-align: right; flex-shrink: 0; }
#eval-badge #eval-bar-container { flex: 1; height: 8px; }

/* Eval chart overlay */
#eval-chart-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9000;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#eval-chart-overlay.active { display: flex; }
#eval-overlay-box {
    display: flex;
    flex-direction: column;
    width: 80vw;
    max-width: 900px;
    height: 80vh;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: default;
}
@media (orientation: portrait) {
    #eval-overlay-box { height: 40vh; }
}
#eval-overlay-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #c8c8d8;
    flex-shrink: 0;
}
#eval-overlay-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: rgba(200,200,220,0.65);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
#eval-overlay-close:hover {
    color: #fff;
    background: rgba(255,255,255,0.12);
}
#eval-overlay-canvas {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: block;
}

/* Captures overlay */
#captures-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9000;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
#captures-overlay.active { display: flex; }
#captures-overlay-box {
    display: flex;
    flex-direction: column;
    width: 80vw;
    max-width: 900px;
    height: 80vh;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.2);
    cursor: default;
}
#captures-overlay-header {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #c8c8d8;
    flex-shrink: 0;
}
#captures-overlay-canvas {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    display: block;
}

/* ── Profile Manager Dialog ──────────────────────────────────────── */

.pm-dialog {
    min-width: 520px;
    max-width: 660px;
    background: var(--dlg-bg);
    border-color: var(--dlg-border);
}
@media (max-width: 500px) {
    .pm-dialog { min-width: 0; width: min(96vw, 520px); }
    .pm-dialog .pm-d-name { font-size: 20px; }
    .pm-dialog .pm-stat-val { font-size: 17px; }
    .pm-dialog .pm-stat-label { font-size: 10px; }
    .pm-dialog .pm-detail-card { padding: 10px 12px; }
}

@media (max-width: 500px) {
    .cpd-content {
        max-height: calc(100vh - 200px);
    }
}

.pm-select {
    flex: 1;
    min-width: 0;
    background: var(--dlg-pm-select-bg);
    color: var(--dlg-pm-select-clr);
    border: 1px solid var(--dlg-pm-select-bdr);
    border-radius: 6px;
    font-size: 15px;
    padding: 8px 10px;
    cursor: pointer;
    outline: none;
}
.pm-input {
    background: var(--dlg-pm-input-bg);
    border: 1px solid var(--dlg-pm-input-bdr);
    border-radius: 6px;
    color: var(--dlg-pm-input-clr);
    font-size: 15px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pm-input:focus {
    border-color: var(--dlg-tab-active-ul);
    box-shadow: 0 0 0 3px rgba(80, 96, 160, 0.15);
}

.pm-select option {
    background: var(--dlg-pm-select-bg);
    color: var(--dlg-pm-select-clr);
    padding: 4px 0;
}

.pm-control-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.pm-control-row .pm-btn {
    flex: none;
    min-width: 175px;
}

.pm-detail-card {
    background: var(--dlg-pm-detail-bg);
    border: 1px solid var(--dlg-pm-detail-bdr);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 12px;
    box-shadow: 0 2px 8px rgba(80,80,160,0.07);
}

.pm-name-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 6px;
}

.pm-d-name {
    font-size: 28px;
    font-weight: bold;
    color: var(--dlg-pm-d-name);
}

.pm-badge {
    font-size: 12px;
    background: #2a2a42;
    border: 1px solid #585878;
    border-radius: 4px;
    padding: 2px 8px;
    color: #b0b0dd;
    white-space: nowrap;
}

.pm-badge-active {
    color: #f0c040;
    border-color: #806020;
    background: #201c0c;
}

.pm-elo-row {
    margin-bottom: 8px;
    line-height: 1.1;
}

.pm-forecast {
    background: var(--dlg-pm-fc-bg);
    border: 1px solid var(--dlg-pm-fc-border);
    border-radius: 5px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--dlg-pm-fc-color);
    margin-bottom: 10px;
    line-height: 1.5;
}

.pm-detail-sep {
    height: 1px;
    background: var(--dlg-pm-sep);
    margin: 8px 0;
}

.pm-stats-row {
    display: flex;
    align-items: stretch;
}

.pm-stat-tile {
    flex: 1;
    text-align: center;
    padding: 4px 0;
}

.pm-stat-label {
    font-size: 14px;
    font-weight: bold;
    color: var(--dlg-pm-stat-label);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pm-stat-val {
    font-size: 26px;
    font-weight: bold;
    color: var(--dlg-pm-stat-val);
    line-height: 1.2;
}

.pm-stat-pct {
    font-size: 12px;
    color: #8080c0;
    font-weight: normal;
}

.pm-stat-sep {
    width: 1px;
    background: var(--dlg-pm-sep);
    margin: 4px;
    flex-shrink: 0;
}

.pm-sep-outer {
    height: 1px;
    background: var(--dlg-pm-sep);
    margin: 4px 0 12px;
}

.pm-dialog .sdlg-btn-gold {
    color: #1a1200;
    background: linear-gradient(to bottom, #e8b848, #c09030);
    border-color: #a07820;
}
.pm-dialog .sdlg-btn-gold:hover  { background: linear-gradient(to bottom, #f0c850, #d0a038); border-color: #c09028; }
.pm-dialog .sdlg-btn-gold:active { background: linear-gradient(to bottom, #c09030, #a07820); }

.pm-dialog .sdlg-btn-cancel {
    color: var(--dlg-sdlg-cancel-clr);
    background: var(--dlg-sdlg-cancel-bg);
    border-color: var(--dlg-sdlg-cancel-bdr);
}
.pm-dialog .sdlg-btn-cancel:hover  { filter: brightness(0.97); }
.pm-dialog .sdlg-btn-cancel:active { filter: brightness(0.93); }

.pm-dialog .sdlg-btn-neutral {
    color: #303048;
    background: #e4e4ee;
    border-color: #a8a8c4;
}
.pm-dialog .sdlg-btn-neutral:hover  { filter: brightness(0.97); }
.pm-dialog .sdlg-btn-neutral:active { filter: brightness(0.93); }

.pm-dialog .sdlg-btn-blue {
    color: var(--dlg-btn-ok-color);
    background: var(--dlg-btn-ok-bg);
    border-color: var(--dlg-btn-ok-border);
}
.pm-dialog .sdlg-btn-blue:hover  { background: var(--dlg-btn-ok-bg-hov); border-color: var(--dlg-btn-ok-bdr-hov); }
.pm-dialog .sdlg-btn-blue:active { filter: brightness(0.94); }

.pm-dialog .sdlg-btn-red {
    color: #a02020;
    background: #fef0f0;
    border-color: #e0a0a0;
}
.pm-dialog .sdlg-btn-red:hover  { background: #fce0e0; border-color: #c06060; color: #801818; }
.pm-dialog .sdlg-btn-red:active { background: #f8d0d0; }

.pm-btn-row {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.pm-btn {
    flex: 1;
    padding: 9px 10px;
    border-radius: 7px;
    border: 1px solid #555;
    cursor: pointer;
    font-size: 13px;
    font-weight: bold;
    transition: background 0.12s, border-color 0.12s;
}

.pm-btn-main {
    background: linear-gradient(to bottom, #3a3a3a 0%, #282828 100%);
    border-color: #555;
    color: #e0e0e0;
}

.pm-btn-main:hover {
    background: linear-gradient(to bottom, #484848 0%, #343434 100%);
    border-color: #888;
}

.pm-btn-del {
    background: linear-gradient(to bottom, #3a3a3a 0%, #282828 100%);
    border-color: #555;
    color: #e08080;
}

.pm-btn-del:hover {
    background: linear-gradient(to bottom, #484848 0%, #343434 100%);
    border-color: #888;
}

.pm-btn-io {
    background: linear-gradient(to bottom, #2a2a3c 0%, #18182a 100%);
    border-color: #484860;
    color: #c0c0d8;
}

.pm-btn-io:hover {
    background: linear-gradient(to bottom, #383852 0%, #242438 100%);
    border-color: #6868a0;
}

.pm-close-btn {
    width: 100%;
    margin-top: 4px;
    flex: none;
}

/* ── Best-Win Bar Label ──────────────────────────────────────────── */

@keyframes bw-pulse {
    0%, 100% { text-shadow: 0 0 6px rgba(240,180,40,0.5), 0 0 12px rgba(240,180,40,0.2); opacity: 1; }
    50%       { text-shadow: 0 0 14px rgba(240,180,40,1),  0 0 28px rgba(240,180,40,0.7); opacity: 0.85; }
}

.bw-val-pulse {
    animation: bw-pulse 2s ease-in-out infinite;
}

@keyframes bw-bar-pulse {
    0%, 100% { box-shadow: 0 0 8px rgba(224,176,48,0.4); }
    50%       { box-shadow: 0 0 22px rgba(224,176,48,0.9), 0 0 40px rgba(224,176,48,0.4); }
}

.bw-bar-pulse {
    animation: bw-bar-pulse 1.8s ease-in-out infinite;
}

/* ── Setup Board Dialog ──────────────────────────────────────────── */

.setup-dialog {
    min-width: 938px;
    max-width: 96vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-color: #c0c0e0;
}

.setup-dialog-body {
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(100,100,180,0.35) transparent;
}

.setup-dialog-body::-webkit-scrollbar {
    width: 6px;
}

.setup-dialog-body::-webkit-scrollbar-track {
    background: transparent;
}

.setup-dialog-body::-webkit-scrollbar-thumb {
    background: rgba(100,100,180,0.35);
    border-radius: 3px;
}

.setup-dialog-body::-webkit-scrollbar-thumb:hover {
    background: rgba(100,100,180,0.6);
}

.setup-layout {
    display: flex;
    gap: 16px;
    align-items: stretch;
}

/* Left column: board canvas + FEN + validation */
.setup-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    flex-shrink: 0;
}

/* Right column: palette + controls */
.setup-right {
    flex-shrink: 0;
    width: 310px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Piece palette: 6 buttons in one row (like Python's QGridLayout 6 cols) ── */
.setup-palette {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    width: 100%;
    margin-bottom: 2px;
}

.setup-palette-label {
    font-size: 11px;
    font-weight: bold;
    color: #7070a0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 8px 0 3px;
}

/* Each button: (310 - 5*4) / 6 = 48.3px → 48px */
.setup-piece-btn {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e0f0;
    border: 1px solid #b0b0d0;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, opacity 0.1s;
    padding: 2px;
}

.setup-piece-btn:hover {
    background: #d0d0e8;
    border-color: #9090c0;
}

.setup-piece-btn.selected {
    background: #d8f0d8;
    border-color: #60b060;
    box-shadow: 0 0 5px rgba(80, 180, 80, 0.4);
}

.setup-piece-btn img {
    pointer-events: none;
}

.setup-btn-disabled,
.setup-piece-btn:disabled {
    opacity: 0.28;
    cursor: not-allowed;
    pointer-events: none;
}

/* Eraser: full width, matches Python's full-row button */
.setup-btn-eraser {
    display: block;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 0;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid #e0a0a0;
    background: #fef0f0;
    color: #a02828;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, border-color 0.1s;
}

.setup-btn-eraser:hover {
    background: #fce0e0;
    border-color: #c06060;
    color: #802020;
}

.setup-btn-eraser.selected {
    background: #ffe0e0;
    border-color: #e06060;
    color: #a02020;
    box-shadow: 0 0 5px rgba(200, 60, 60, 0.3);
}

/* Separator */
.setup-sep {
    height: 1px;
    background: #d8d8ec;
    margin: 10px 0;
}

/* Radio buttons for turn */
.setup-radio-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #1a1a2a;
    cursor: pointer;
    padding: 5px 0;
    user-select: none;
}

.setup-radio-label input[type="radio"] {
    accent-color: #a0c0ff;
    width: 15px;
    height: 15px;
}

.setup-spacer { flex: 1; }

/* Generic action buttons */
.setup-btn {
    display: block;
    width: 100%;
    padding: 9px 10px;
    margin-bottom: 6px;
    border-radius: 6px;
    border: 1px solid #c0c0d8;
    background: linear-gradient(to bottom, #eeeef8 0%, #e4e4f0 100%);
    color: #2020a0;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background 0.1s, border-color 0.1s;
}

.setup-btn:hover {
    background: linear-gradient(to bottom, #e0e0f4 0%, #d4d4ec 100%);
    border-color: #8888c8;
}

/* OK / Cancel row */
.setup-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    justify-content: flex-end;
}

.setup-btn-row .dialog-btn {
    min-width: 110px;
}

/* FEN row (below canvas, same width) */
.setup-fen-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.setup-fen-label {
    font-size: 14px;
    font-weight: bold;
    color: #7070a0;
    white-space: nowrap;
    flex-shrink: 0;
}

.setup-fen-input {
    flex: 1;
    background: #ffffff;
    border: 1px solid #c0c0d8;
    border-radius: 5px;
    color: #1a1a2a;
    font-size: 13px;
    font-family: monospace;
    padding: 7px 10px;
    min-width: 0;
    outline: none;
    transition: border-color 0.1s;
}

.setup-fen-input:focus {
    border-color: #6868a8;
}

.setup-fen-load-btn {
    padding: 7px 14px;
    border-radius: 5px;
    border: 1px solid #c0c0d8;
    background: linear-gradient(to bottom, #eeeef8, #e4e4f0);
    color: #2020a0;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.1s;
}

.setup-fen-load-btn:hover {
    background: linear-gradient(to bottom, #e0e0f4, #d4d4ec);
    border-color: #8888c8;
}

/* Validation message */
.setup-validation {
    min-height: 16px;
    font-size: 12px;
    line-height: 1.4;
    width: 100%;
    margin-top: 20px;
    color: #3a3a5a;
}

.setup-valid  { color: #207020; font-weight: bold; }
.setup-invalid { color: #c03030; font-weight: bold; }

/* ── Setup Dialog – theme-aware overrides ────────────────────────── */
.setup-dialog { border-color: var(--dlg-border); }
.setup-dialog .setup-palette-label { color: var(--dlg-muted-text); }
.setup-dialog .setup-sep { background: var(--dlg-sep); }
.setup-dialog .setup-radio-label { color: var(--dlg-primary-text); }
.setup-dialog .setup-fen-label { color: var(--dlg-muted-text); }
.setup-dialog .setup-fen-input {
    background: var(--dlg-input-bg);
    border-color: var(--dlg-input-border);
    color: var(--dlg-input-text);
}
.setup-dialog .setup-fen-input:focus { border-color: var(--dlg-tab-active-ul); }
.setup-dialog .setup-btn {
    background: var(--dlg-action-bg);
    border-color: var(--dlg-action-border);
    color: var(--dlg-action-color);
}
.setup-dialog .setup-btn:hover { filter: brightness(0.96); border-color: var(--dlg-muted-text); }
.setup-dialog .setup-fen-load-btn {
    background: var(--dlg-action-bg);
    border-color: var(--dlg-action-border);
    color: var(--dlg-action-color);
}
.setup-dialog .setup-fen-load-btn:hover { filter: brightness(0.96); border-color: var(--dlg-muted-text); }
.setup-dialog .setup-validation { color: var(--dlg-primary-text); }

.setup-dialog .dialog-btn-primary {
    background: var(--dlg-btn-ok-bg);
    border-color: var(--dlg-btn-ok-border);
    color: var(--dlg-btn-ok-color);
}
.setup-dialog .dialog-btn-primary:hover { background: var(--dlg-btn-ok-bg-hov); border-color: var(--dlg-btn-ok-bdr-hov); }

.setup-dialog .dialog-btn-cancel {
    background: var(--dlg-btn-cancel-bg);
    border-color: var(--dlg-btn-cancel-bdr);
    color: var(--dlg-btn-cancel-clr);
}
.setup-dialog .dialog-btn-cancel:hover { background: var(--dlg-btn-cancel-bg-hov); border-color: var(--dlg-btn-cancel-bdr-hov); color: var(--dlg-btn-cancel-clr-hov); }

/* ══ UI Light Mode — body.ui-light ══════════════════════════════════
   Betrifft nur: Spieler-Badge, Engine-Badge, Spielmodus-Badge, Uhr-Badge.
   Rückgängig: diesen Block löschen + uiClass aus DIALOG_THEMES.light entfernen
               + applyDialogTheme() auf classList.remove('dlg-dark') kürzen.
   ═════════════════════════════════════════════════════════════════ */

/* Spieler-Karten (User-Badge + Computer-Badge) */
body.ui-light .player-card {
    background-image: var(--rb-pc-bg, linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    border-color: #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.ui-light .player-card:hover {
    border-color: #888888;
}

/* Engine-Badge (Computer) */
body.ui-light #engine-card {
    background-image: var(--rb-ec-bg, linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    border-color: #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.ui-light #engine-card:hover {
    border-color: #888888;
}

/* Spielmodus-Badge */
body.ui-light #mode-label {
    background-image: var(--rb-ml-bg, linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    border-color: #707070;
    color: #f0c040;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
body.ui-light #mode-label:hover {
    border-color: #888888;
}

/* Zeit-Badge (Uhr) */
body.ui-light #clock-card {
    background-image: var(--rb-cc-bg, linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 100%));
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-color: #1a1a1a;
    border-color: #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}


/* Zughistorie */
body.ui-light #hist-outer {
    border-color: #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Figurenopfer-Anzeige */
body.ui-light #captures-card {
    border-color: #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Eval-Badge */
body.ui-light #eval-badge {
    border-color: #7878b8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Eval-History-Canvas */
body.ui-light #eval-history-canvas {
    border-color: #7878b8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Menü- und Undo-Button */
body.ui-light #btn-menu,
body.ui-light #btn-undo,
body.ui-light #btn-hint {
    border-color: #707070;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
body.ui-light #btn-menu:hover,
body.ui-light #btn-undo:hover,
body.ui-light #btn-hint:hover { border-color: #505050; }

/* Schachbrett */
body.ui-light #board-container {
    border-color: #303030;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* Bauernumwandlung – light theme */
body.ui-light .promo-piece { background: rgba(100,80,160,0.06); }
body.ui-light .promo-piece:hover { border-color: #7070b8; background: rgba(100,80,160,0.12); }