/* ============================================
   ChessClub for Joomla - Main Stylesheet
   Design inspired by modern chess platforms
   ============================================ */

:root {
    --cc-bg: #0f1419;
    --cc-bg-2: #1a2030;
    --cc-bg-3: #232a3d;
    --cc-card: #ffffff;
    --cc-card-2: #f7f8fb;
    --cc-text: #1a2030;
    --cc-text-light: #5a6478;
    --cc-text-on-dark: #e6e9f0;
    --cc-border: #e0e4ed;
    --cc-border-dark: #2a3245;
    --cc-primary: #2d7d46;
    --cc-primary-hover: #3a9456;
    --cc-primary-dark: #1f5a32;
    --cc-primary-soft: #d8ece0;
    --cc-primary-a08: rgba(45, 125, 70, 0.08);
    --cc-primary-a15: rgba(45, 125, 70, 0.15);
    --cc-accent: #d97706;
    --cc-accent-hover: #ea8b1e;
    --cc-danger: #dc2626;
    --cc-danger-hover: #ef4444;
    --cc-warn: #f59e0b;
    --cc-success: #16a34a;
    --cc-info: #0284c7;
    --cc-shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.06);
    --cc-shadow: 0 2px 8px rgba(15, 20, 25, 0.08);
    --cc-shadow-lg: 0 8px 24px rgba(15, 20, 25, 0.12);
    --cc-radius: 10px;
    --cc-radius-sm: 6px;
    --cc-radius-lg: 16px;
    --cc-fs-sm: 13px;
    --cc-fs: 15px;
    --cc-fs-lg: 17px;
    --cc-fs-h2: 22px;
    --cc-fs-h1: 28px;
}

/* ===== Layout ===== */
.cc-app {
    max-width: 1280px;
    margin: 0 auto;
    padding: 16px;
    color: var(--cc-text);
    font-size: var(--cc-fs);
    line-height: 1.5;
    box-sizing: border-box;
    container-type: inline-size;
    container-name: ccapp;
}

.cc-app *,
.cc-app *::before,
.cc-app *::after {
    box-sizing: border-box;
}

/* ===== Navigation ===== */
.cc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--cc-bg);
    border-radius: var(--cc-radius);
    padding: 6px;
    margin-bottom: 20px;
}

.cc-nav a {
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 16px;
    color: var(--cc-text-on-dark);
    text-decoration: none;
    border-radius: var(--cc-radius-sm);
    font-weight: 500;
    transition: background .15s, color .15s;
    min-width: 110px;
}

.cc-nav a:hover {
    background: var(--cc-bg-3);
    color: #ffffff;
}

.cc-nav a.active {
    background: var(--cc-primary);
    color: #ffffff;
}

/* ===== Header ===== */
.cc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 20px;
}

.cc-header h1 {
    margin: 0 0 4px 0;
    font-size: var(--cc-fs-h1);
    color: var(--cc-text);
    font-weight: 700;
}

.cc-lead {
    margin: 0;
    color: var(--cc-text-light);
}

.cc-back {
    color: var(--cc-text-light);
    text-decoration: none;
    font-size: var(--cc-fs-sm);
    display: inline-block;
    margin-bottom: 8px;
}

.cc-back:hover {
    color: var(--cc-primary);
}

.cc-meta {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 6px;
}

.cc-tag {
    display: inline-block;
    padding: 3px 10px;
    background: var(--cc-bg-2);
    color: var(--cc-text-on-dark);
    border-radius: 12px;
    font-size: var(--cc-fs-sm);
    font-weight: 500;
}

.cc-difficulty {
    color: var(--cc-text-light);
    letter-spacing: 1px;
}

.cc-difficulty .cc-star.on {
    color: var(--cc-accent);
}

.cc-count {
    color: var(--cc-text-light);
    font-weight: 400;
    font-size: var(--cc-fs);
}

/* ===== Cards ===== */
.cc-card {
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--cc-shadow-sm);
}

.cc-card h2 {
    margin: 0 0 16px 0;
    font-size: var(--cc-fs-h2);
    color: var(--cc-text);
    font-weight: 600;
}

.cc-card.cc-warn {
    background: #fffbeb;
    border-color: #fde68a;
    color: #78350f;
}

.cc-card.cc-warn p {
    margin: 6px 0 0 0;
}

/* ===== Buttons ===== */
.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--cc-card-2);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    color: var(--cc-text);
    font-size: var(--cc-fs);
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s, border-color .15s, transform .05s;
    line-height: 1.2;
    user-select: none;
}

.cc-btn:hover {
    background: #ecf0f7;
    border-color: #c8cfdb;
}


/* ===== Inline SVG ikony v tlačidlách =====
   Nahradili emoji znaky (⏮ ◀ ▶ ⏭ ⇅). Emoji vykresľuje OS vlastným
   farebným fontom (Segoe UI Emoji na Windows), preto boli modré a
   nedali sa prefarbiť cez `color`. SVG dedí currentColor a vyzerá
   rovnako v každom prehliadači a na každom serveri. */
.cc-ico {
    width: 1.15em;
    height: 1.15em;
    display: block;
    flex: 0 0 auto;
    fill: currentColor;
    pointer-events: none;
}

.cc-btn .cc-ico { color: inherit; }

/* Ikona vedľa textu (napr. "Ďalší ▶") */
.cc-btn > .cc-ico:not(:only-child) { margin-left: 2px; }

.cc-btn:active { transform: translateY(1px); }
.cc-btn:disabled { opacity: .5; cursor: not-allowed; }

.cc-btn-primary {
    background: var(--cc-primary);
    color: #ffffff;
    border-color: var(--cc-primary);
}

.cc-btn-primary:hover {
    background: var(--cc-primary-hover);
    border-color: var(--cc-primary-hover);
}

.cc-btn-secondary {
    background: var(--cc-bg-2);
    color: #ffffff;
    border-color: var(--cc-bg-2);
}

.cc-btn-secondary:hover {
    background: var(--cc-bg-3);
    border-color: var(--cc-bg-3);
}

.cc-btn-danger {
    background: var(--cc-danger);
    color: #ffffff;
    border-color: var(--cc-danger);
}

.cc-btn-danger:hover {
    background: var(--cc-danger-hover);
    border-color: var(--cc-danger-hover);
}

.cc-btn-warn {
    background: var(--cc-warn);
    color: #ffffff;
    border-color: var(--cc-warn);
}

.cc-btn-success {
    background: var(--cc-success);
    color: #ffffff;
    border-color: var(--cc-success);
}

/* ===== Forms ===== */
.cc-input {
    padding: 9px 12px;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    font-size: var(--cc-fs);
    font-family: inherit;
    background: #ffffff;
    color: var(--cc-text);
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
}

.cc-input:focus {
    outline: none;
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 3px rgba(45, 125, 70, 0.12);
}

.cc-input.cc-mono {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
    font-size: 13px;
}

.cc-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cc-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cc-form-grid label > span:first-child {
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    color: var(--cc-text-light);
}

.cc-form-grid label.cc-full { grid-column: 1 / -1; }

.cc-toolbar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    align-items: center;
}

.cc-toolbar .cc-input { flex: 1 1 auto; max-width: 280px; }

/* ===== Toggles ===== */
.cc-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
}

.cc-toggle input { width: 18px; height: 18px; cursor: pointer; }

/* ===== Play / Lobby ===== */
.cc-play-grid {
    display: grid;
    grid-template-columns: minmax(0, var(--cc-board-max, 600px)) 320px;
    gap: 20px;
    align-items: start;
}

@container ccapp (max-width: 760px) {
    .cc-play-grid { grid-template-columns: minmax(0, var(--cc-board-max, 600px)) 220px; }
}

@container ccapp (max-width: 480px) {
    .cc-play-grid { grid-template-columns: 1fr; }
}

@supports not (container-type: inline-size) {
    @media (max-width: 520px) {
        .cc-play-grid { grid-template-columns: 1fr; }
    }
}

.cc-board-wrap {
    width: 100%;
    /* Padding makes room for off-board chessground coords (rank numbers on right, file letters on bottom) */
    padding-right: 16px;
    padding-bottom: 18px;
    box-sizing: border-box;
}

.cc-board {
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: var(--cc-board-max, 600px);
    margin: 0 auto;
    position: relative;
    border-radius: var(--cc-radius-sm);
    box-shadow: var(--cc-shadow);
    /* No overflow:hidden — chessground draws coords outside the board edge */
}

.cc-board cg-board {
    border-radius: var(--cc-radius-sm);
    overflow: hidden;
}

.cc-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cc-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 12px;
    justify-content: center;
}

.cc-controls .cc-btn {
    min-width: 44px;
    padding: 8px 12px;
}

.cc-controls-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-top: 12px;
    width: 100%;
    max-width: var(--cc-board-max, 600px);
    margin-left: auto;
    margin-right: auto;
}

.cc-controls-strip .cc-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 4px;
    font-size: 16px;
}

.cc-controls-strip .cc-btn#cc-an-engine-toggle {
    flex: 1.6 1 0;
    font-size: 14px;
}

/* Analysis controls strip — playing state */
.cc-an-board-area .cc-btn.cc-playing {
    background: var(--cc-success);
    color: #ffffff;
    border-color: var(--cc-success);
}

.cc-player-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--cc-bg-2);
    color: var(--cc-text-on-dark);
    border-radius: var(--cc-radius-sm);
}

.cc-player-bar .cc-player-name { font-weight: 600; }
.cc-player-bar .cc-player-color { font-size: var(--cc-fs-sm); opacity: .7; }
.cc-player-bar.active { background: var(--cc-primary); }

.cc-status-line {
    padding: 12px 14px;
    background: var(--cc-card-2);
    border-radius: var(--cc-radius-sm);
    border-left: 3px solid var(--cc-primary);
    font-weight: 500;
}

.cc-moves-pane {
    background: var(--cc-card-2);
    border-radius: var(--cc-radius-sm);
    padding: 12px;
    max-height: 300px;
    overflow-y: auto;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 14px;
    line-height: 1.7;
}

.cc-moves-pane .cc-move {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
    transition: background .1s;
}

.cc-moves-pane .cc-move:hover { background: #e0e4ed; }
.cc-moves-pane .cc-move.current { background: var(--cc-primary); color: #ffffff; }
.cc-moves-pane .cc-mn { color: var(--cc-text-light); margin-right: 4px; font-weight: 500; }

.cc-comment-pane {
    background: #fffbeb;
    border-left: 3px solid var(--cc-accent);
    padding: 10px 14px;
    border-radius: var(--cc-radius-sm);
    font-size: var(--cc-fs-sm);
    color: #78350f;
    min-height: 30px;
}

/* Lobby */
.cc-lobby-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 700px) {
    .cc-lobby-grid { grid-template-columns: 1fr; }
}

.cc-waiting-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cc-waiting-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: var(--cc-card-2);
    border-radius: var(--cc-radius-sm);
    margin-bottom: 6px;
}

.cc-waiting-list li:last-child { margin-bottom: 0; }
.cc-waiting-list .cc-empty { padding: 20px; text-align: center; color: var(--cc-text-light); }

.cc-color-choice {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.cc-color-choice label {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    cursor: pointer;
    transition: all .15s;
}

.cc-color-choice input { display: none; }
.cc-color-choice label:hover { border-color: var(--cc-primary); }
.cc-color-choice input:checked + span { font-weight: 600; }
.cc-color-choice label:has(input:checked) { border-color: var(--cc-primary); background: var(--cc-primary-a08, rgba(45, 125, 70, 0.08)); }

.cc-select {
    width: 100%;
    padding: 9px 10px;
    margin: 6px 0;
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    background: #fff;
    font-size: var(--cc-fs-base, 15px);
    color: var(--cc-text, #222);
    cursor: pointer;
}
.cc-select:focus { outline: none; border-color: var(--cc-primary); }

/* Play-vs-computer strip in Analysis */
.cc-an-play-strip {
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.cc-an-play-label {
    font-size: 13px;
    opacity: .7;
}
.cc-select-inline {
    width: auto;
    margin: 0;
    padding: 7px 9px;
    font-size: 14px;
}

/* ===== Analysis ===== */
.cc-analysis-grid {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.cc-analysis-grid > .cc-an-board-area {
    display: grid;
    grid-template-columns: 28px 1fr;
    grid-template-rows: auto auto auto;
    gap: 16px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: calc(var(--cc-board-max, 600px) + 28px + 16px);
}

/* Eval bar lives in row 1 only, so its height = board height */
.cc-analysis-grid > .cc-an-board-area > .cc-eval-bar {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    align-self: stretch;
    height: auto;
}

.cc-analysis-grid > .cc-an-board-area > .cc-board-wrap {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    width: 100%;
    min-width: 0;
}

/* Controls row 2, column 2 - directly below the board, same width */
.cc-analysis-grid > .cc-an-board-area > .cc-controls-strip {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
    margin-top: 0;
    max-width: 100%;
}

/* Play-vs-computer strip row 3, column 2 - below the controls */
.cc-analysis-grid > .cc-an-board-area > .cc-an-play-strip {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
}

.cc-analysis-grid > .cc-side {
    flex: 0 1 300px;
    min-width: 240px;
    max-width: 360px;
    align-self: flex-start;
}

/* Narrow container (e.g. article column squeezed by Joomla sidebar): shrink everything but keep side-by-side */
@container ccapp (max-width: 760px) {
    .cc-analysis-grid > .cc-side { flex-basis: 220px; min-width: 200px; }
}

@container ccapp (max-width: 600px) {
    .cc-analysis-grid > .cc-side { flex-basis: 200px; min-width: 180px; }
}

/* Very narrow (real mobile only): finally stack vertically */
@container ccapp (max-width: 900px) {
    .cc-analysis-grid {
        flex-wrap: wrap;
    }
    .cc-analysis-grid > .cc-side {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }
    /* Bigger tap targets on the analysis controls */
    .cc-analysis-grid .cc-controls-strip .cc-btn {
        min-width: 44px;
        min-height: 40px;
        font-size: 15px;
    }
    /* Slimmer eval bar so more space is left for the board */
    .cc-analysis-grid > .cc-an-board-area {
        grid-template-columns: 18px 1fr;
        gap: 8px;
    }
    /* Smaller engine info panel — takes less vertical space */
    .cc-engine-info { height: 140px; padding: 10px 12px; font-size: 13px; }
    /* Play-vs-computer strip: wrap onto separate rows if needed */
    .cc-an-play-strip { flex-wrap: wrap; gap: 6px; }
    .cc-an-play-strip .cc-select-inline { flex: 1 1 auto; }
    .cc-an-play-strip .cc-btn { flex: 1 1 100%; min-height: 44px; }
}

/* Older browsers without container query support — fallback to window width */
@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .cc-analysis-grid > .cc-side { flex-basis: 220px; min-width: 200px; }
    }
    @media (max-width: 900px) {
        .cc-analysis-grid {
            flex-wrap: wrap;
        }
        .cc-analysis-grid > .cc-side {
            flex: 1 1 100%;
            max-width: 100%;
        }
        .cc-analysis-grid .cc-controls-strip .cc-btn {
            min-width: 44px;
            min-height: 40px;
            font-size: 15px;
        }
        .cc-analysis-grid > .cc-an-board-area {
            grid-template-columns: 18px 1fr;
            gap: 8px;
        }
        .cc-engine-info { height: 140px; padding: 10px 12px; font-size: 13px; }
        .cc-an-play-strip { flex-wrap: wrap; gap: 6px; }
        .cc-an-play-strip .cc-select-inline { flex: 1 1 auto; }
        .cc-an-play-strip .cc-btn { flex: 1 1 100%; min-height: 44px; }
    }
}

.cc-eval-bar {
    width: 28px;
    height: 100%;
    align-self: stretch;
    background: #1a2030;
    border: 1px solid var(--cc-border-dark);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column-reverse;
    box-shadow: 0 0 0 1px rgba(15, 20, 25, 0.06), var(--cc-shadow-sm);
}

.cc-eval-fill {
    background: #f4f4f4;
    width: 100%;
    height: 50%;
    transition: height .35s ease;
    border-top: 1px solid #cfcfcf;
}

.cc-engine-info {
    background: var(--cc-bg-2);
    color: var(--cc-text-on-dark);
    padding: 12px 14px;
    border-radius: var(--cc-radius-sm);
    font-size: var(--cc-fs-sm);
    font-family: 'SFMono-Regular', Consolas, monospace;
    /* Fixed size so the panel never grows/shrinks with PV length */
    height: 168px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.cc-engine-info .cc-eng-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    flex-shrink: 0;
}

.cc-engine-info .cc-eng-row:last-of-type { margin-bottom: 0; }
.cc-engine-info .cc-eng-label { opacity: .65; }

/* Principal variation — scrolls inside the fixed box if the line is long */
.cc-engine-info .cc-eng-pv {
    word-break: break-word;
    line-height: 1.6;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    opacity: .9;
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.cc-engine-info .cc-eng-pv::-webkit-scrollbar { width: 7px; }
.cc-engine-info .cc-eng-pv::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.22);
    border-radius: 4px;
}

/* ===== Training ===== */
.cc-training-list {
    display: grid;
    gap: 16px;
}

.cc-cat-section h2 {
    color: var(--cc-text);
    font-size: var(--cc-fs-h2);
    border-bottom: 2px solid var(--cc-primary);
    padding-bottom: 6px;
    margin-top: 24px;
}

.cc-chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    margin-top: 12px;
}

.cc-chapter-card {
    background: var(--cc-card);
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius);
    padding: 16px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .1s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cc-chapter-card:hover {
    border-color: var(--cc-primary);
    transform: translateY(-2px);
    box-shadow: var(--cc-shadow);
    color: inherit;
    text-decoration: none;
}

.cc-chapter-card h3 {
    margin: 0;
    font-size: var(--cc-fs-lg);
    font-weight: 600;
    color: var(--cc-text);
}

.cc-chapter-card .cc-chapter-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-light);
}

.cc-progress-bar {
    height: 6px;
    background: var(--cc-border);
    border-radius: 3px;
    overflow: hidden;
}

.cc-progress-bar > span {
    display: block;
    height: 100%;
    background: var(--cc-primary);
    transition: width .35s;
}

.cc-progress-text {
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-light);
}

/* ===== Chapter view ===== */
.cc-chapter-view .cc-rich {
    line-height: 1.7;
    font-size: var(--cc-fs-lg);
}

.cc-chapter-view .cc-rich p { margin: 0 0 1em 0; }
.cc-chapter-view .cc-intro { background: var(--cc-card-2); }

.cc-game-viewer {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.cc-game-viewer > .cc-game-board-area {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: var(--cc-board-max, 600px);
}

.cc-game-viewer > .cc-game-board-area > .cc-board-wrap {
    grid-row: 1 / 2;
    width: 100%;
    min-width: 0;
}

.cc-game-viewer > .cc-game-board-area > .cc-controls-strip {
    grid-row: 2 / 3;
    margin-top: 0;
    max-width: 100%;
}

.cc-game-viewer > .cc-side {
    flex: 0 1 300px;
    min-width: 240px;
    max-width: 360px;
    align-self: flex-start;
}

@container ccapp (max-width: 760px) {
    .cc-game-viewer > .cc-side { flex-basis: 220px; min-width: 200px; }
}

@container ccapp (max-width: 600px) {
    .cc-game-viewer > .cc-side { flex-basis: 200px; min-width: 180px; }
}

@container ccapp (max-width: 900px) {
    .cc-game-viewer { flex-wrap: wrap; }
    .cc-game-viewer > .cc-side {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }
}

@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .cc-game-viewer > .cc-side { flex-basis: 220px; min-width: 200px; }
    }
    @media (max-width: 900px) {
        .cc-game-viewer { flex-wrap: wrap; }
        .cc-game-viewer > .cc-side {
            flex: 1 1 100%;
            max-width: 100%;
        }
    }
}

/* Game viewer autoplay button playing state */
.cc-game-board-area .cc-btn.cc-playing {
    background: var(--cc-success);
    color: #ffffff;
    border-color: var(--cc-success);
}

/* Diagrams */
.cc-diagrams {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.cc-diagram-item {
    background: var(--cc-card-2);
    border-radius: var(--cc-radius-sm);
    padding: 14px 24px 22px 14px; /* extra right/bottom for chessground coords */
    border: 1px solid var(--cc-border);
}

.cc-diagram-item .cc-board {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto 8px;
    display: block;
    position: relative;
}

.cc-diagram-item .cc-board-wrap {
    padding-right: 14px;
    padding-bottom: 16px;
}

.cc-diagram-item h4 {
    margin: 0 0 8px 0;
    font-size: var(--cc-fs);
}

.cc-diagram-item .cc-q {
    font-weight: 500;
    margin-bottom: 8px;
}

.cc-diagram-status {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    margin-top: 8px;
}

.cc-diagram-status.correct { background: #dcfce7; color: #166534; }
.cc-diagram-status.wrong { background: #fee2e2; color: #991b1b; }
.cc-diagram-status.open { background: #e0e4ed; color: #5a6478; }

.cc-hint {
    font-size: var(--cc-fs-sm);
    color: var(--cc-text-light);
    margin-top: 6px;
    font-style: italic;
}

/* Quiz */
.cc-quiz { display: grid; gap: 14px; }

.cc-quiz-item {
    background: var(--cc-card-2);
    border-radius: var(--cc-radius-sm);
    padding: 16px;
    border: 1px solid var(--cc-border);
}

.cc-quiz-item h4 { margin: 0 0 10px 0; }

.cc-quiz-options { display: grid; gap: 6px; }

.cc-quiz-options label {
    padding: 10px 14px;
    background: #ffffff;
    border: 1px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.cc-quiz-options label:hover { border-color: var(--cc-primary); }
.cc-quiz-options input { margin: 0; }
.cc-quiz-options label.correct { background: #dcfce7; border-color: #16a34a; }
.cc-quiz-options label.wrong { background: #fee2e2; border-color: #dc2626; }

/* ===== Library ===== */
.cc-lib-list {
    display: grid;
    gap: 8px;
}

.cc-lib-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    background: var(--cc-card-2);
    border-radius: var(--cc-radius-sm);
    border: 1px solid var(--cc-border);
    transition: border-color .15s;
}

.cc-lib-item:hover { border-color: var(--cc-primary); }

.cc-lib-info .cc-lib-title { font-weight: 600; margin-bottom: 2px; }
.cc-lib-info .cc-lib-sub { font-size: var(--cc-fs-sm); color: var(--cc-text-light); }
.cc-lib-result { font-family: monospace; font-weight: 600; }

.cc-lib-actions { display: flex; gap: 6px; }

/* ===== Modal ===== */
.cc-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 25, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.cc-modal-inner {
    background: var(--cc-card);
    border-radius: var(--cc-radius);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--cc-shadow-lg);
}

.cc-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cc-border);
}

.cc-modal-head h2 { margin: 0; font-size: var(--cc-fs-h2); }

.cc-modal-close {
    width: 36px; height: 36px;
    font-size: 24px;
    line-height: 1;
    padding: 0;
}

.cc-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.cc-modal-foot {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 20px;
    border-top: 1px solid var(--cc-border);
    background: var(--cc-card-2);
    border-radius: 0 0 var(--cc-radius) var(--cc-radius);
}

/* ===== Settings ===== */
.cc-settings-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .cc-settings-grid { grid-template-columns: 1fr; }
}

.cc-set-group { margin-bottom: 18px; }
.cc-set-label {
    display: block;
    font-size: var(--cc-fs-sm);
    font-weight: 500;
    color: var(--cc-text-light);
    margin-bottom: 6px;
}

.cc-theme-picker, .cc-piece-picker {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cc-theme-swatch {
    width: 56px; height: 56px;
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    overflow: hidden;
    cursor: pointer;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    background: none;
}

.cc-theme-swatch.active { border-color: var(--cc-primary); box-shadow: 0 0 0 3px var(--cc-primary-a15, rgba(45, 125, 70, 0.15)); }
.cc-theme-swatch .sw { display: block; }

.cc-theme-brown .sw.a { background: #f0d9b5; }
.cc-theme-brown .sw.b { background: #b58863; }
.cc-theme-brown .sw:nth-child(1), .cc-theme-brown .sw:nth-child(4) { background: #f0d9b5; }
.cc-theme-brown .sw:nth-child(2), .cc-theme-brown .sw:nth-child(3) { background: #b58863; }

.cc-theme-blue .sw:nth-child(1), .cc-theme-blue .sw:nth-child(4) { background: #dee3e6; }
.cc-theme-blue .sw:nth-child(2), .cc-theme-blue .sw:nth-child(3) { background: #788a94; }

.cc-theme-green .sw:nth-child(1), .cc-theme-green .sw:nth-child(4) { background: #ebecd0; }
.cc-theme-green .sw:nth-child(2), .cc-theme-green .sw:nth-child(3) { background: #739552; }

.cc-theme-grey .sw:nth-child(1), .cc-theme-grey .sw:nth-child(4) { background: #e8e8e8; }
.cc-theme-grey .sw:nth-child(2), .cc-theme-grey .sw:nth-child(3) { background: #909090; }

.cc-theme-purple .sw:nth-child(1), .cc-theme-purple .sw:nth-child(4) { background: #ebe2f4; }
.cc-theme-purple .sw:nth-child(2), .cc-theme-purple .sw:nth-child(3) { background: #8476ba; }

.cc-piece-swatch {
    background: var(--cc-card);
    border: 2px solid var(--cc-border);
    border-radius: var(--cc-radius-sm);
    padding: 8px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: var(--cc-fs-sm);
}

.cc-piece-swatch.active {
    border-color: var(--cc-primary);
    box-shadow: 0 0 0 3px var(--cc-primary-a15, rgba(45, 125, 70, 0.15));
}

.cc-piece-preview {
    display: block;
    width: 40px; height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.cc-set-cburnett .cc-piece-preview, .cc-piece-swatch.cc-set-cburnett .cc-piece-preview { background-image: url('../piecesets/cburnett/wN.svg'); }
.cc-set-merida .cc-piece-preview, .cc-piece-swatch.cc-set-merida .cc-piece-preview { background-image: url('../piecesets/merida/wN.svg'); }
.cc-set-alpha .cc-piece-preview, .cc-piece-swatch.cc-set-alpha .cc-piece-preview { background-image: url('../piecesets/alpha/wN.svg'); }

.cc-range { width: 100%; }

.cc-status {
    display: inline-block;
    margin-left: 12px;
    font-size: var(--cc-fs-sm);
}
.cc-status.success { color: var(--cc-success); }
.cc-status.error { color: var(--cc-danger); }

.cc-preview-board {
    max-width: 320px;
    margin: 0 auto;
}

/* ===== Misc ===== */
.cc-loading { text-align: center; padding: 30px; color: var(--cc-text-light); }
.cc-empty { text-align: center; padding: 30px; color: var(--cc-text-light); }
.cc-mono { font-family: 'SFMono-Regular', Consolas, monospace; }

.cc-import-card { display: grid; gap: 12px; }
.cc-import-card textarea { resize: vertical; min-height: 120px; }
.cc-import-card .cc-import-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cc-import-card .cc-import-row .cc-input { flex: 1 1 auto; }

/* Login required */
.cc-login-prompt { text-align: center; padding: 40px 20px; }
.cc-login-prompt h2 { margin-bottom: 10px; }

/* ============================================
   Diagram trainer (chesstempo-style)
   ============================================ */
.cc-trainer-card {
    /* card defaults are inherited */
}

.cc-trainer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

/* Focus mode toggle button in the trainer header */
.cc-focus-toggle {
    padding: 6px 12px;
    font-size: 16px;
    line-height: 1;
    min-width: 40px;
}

/* ========================================================================
   Focus (fullscreen) mode — pins .cc-trainer-card over everything else
   ======================================================================== */
.cc-trainer-card.cc-focused {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: var(--cc-card, #ffffff);
    padding: 12px;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Reserve for iPhone notch / Android gesture bars */
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
}

/* Also handles the real browser Fullscreen API (Chrome/Firefox/Safari/Edge) */
.cc-trainer-card:fullscreen {
    background: var(--cc-card, #ffffff);
    padding: 12px;
    overflow-y: auto;
}

/* Lock the page under the overlay so it can't scroll behind it */
body.cc-focus-lock { overflow: hidden; }

/* In focus mode, the board area should stretch to fit the taller viewport
   instead of being limited by the desktop max-width. */
.cc-trainer-card.cc-focused .cc-trainer-board-area {
    max-width: 100%;
}
.cc-trainer-card.cc-focused .cc-board {
    max-width: min(100%, calc(100vh - 260px));
}

.cc-trainer-header h2 {
    margin: 0;
}

.cc-trainer-meta {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 14px;
}

.cc-trainer-progress {
    background: var(--cc-bg-2);
    color: var(--cc-text-on-dark);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.cc-trainer-stat {
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.cc-trainer-correct {
    background: rgba(40, 167, 69, 0.12);
    color: var(--cc-success, #28a745);
}

.cc-trainer-wrong {
    background: rgba(220, 53, 69, 0.12);
    color: var(--cc-danger, #dc3545);
}

.cc-trainer {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: nowrap;
}

.cc-trainer-board-area {
    /* uses the same grid pattern as analysis cc-an-board-area, but no eval column */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    gap: 12px;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    max-width: var(--cc-board-max, 600px);
}

.cc-trainer-board-area > .cc-board-wrap {
    grid-row: 1 / 2;
    width: 100%;
    min-width: 0;
}

.cc-trainer-board-area > .cc-controls-strip {
    grid-row: 2 / 3;
    margin-top: 0;
    max-width: 100%;
    /* Match the coord-label padding of .cc-board-wrap above so the button
       strip's right edge lines up with the board's right edge. */
    padding-right: 16px;
    box-sizing: border-box;
}

.cc-trainer-side {
    flex: 0 1 320px;
    min-width: 260px;
    max-width: 380px;
    align-self: flex-start;
}

.cc-trainer-question h3 {
    margin: 0 0 12px;
    font-size: 16px;
    line-height: 1.4;
}

.cc-trainer-turn {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.4px;
}

.cc-turn-white {
    background: #fff;
    color: #222;
    border: 1px solid #c9c9c9;
}

.cc-turn-black {
    background: #222;
    color: #fff;
}

.cc-trainer-input-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.cc-trainer-input-row .cc-input {
    flex: 1 1 auto;
    min-width: 0;
}

.cc-trainer-feedback {
    min-height: 22px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 10px;
}

.cc-fb-correct { color: var(--cc-success, #28a745); }
.cc-fb-wrong   { color: var(--cc-danger, #dc3545); }
.cc-fb-reveal  { color: var(--cc-text-light, #777); font-style: italic; }

.cc-trainer-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.cc-trainer-actions .cc-btn {
    font-size: 13px;
    padding: 6px 10px;
}

.cc-trainer-hint-text {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255, 193, 7, 0.1);
    border-left: 3px solid #ffc107;
    border-radius: 4px;
    font-size: 13px;
}

.cc-trainer-summary {
    background: rgba(40, 167, 69, 0.08);
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.cc-trainer-summary h3 {
    margin: 0 0 8px;
    color: var(--cc-success, #28a745);
}

.cc-trainer-summary p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.5;
}

/* Container queries — same breakpoints as analysis */
@container ccapp (max-width: 760px) {
    .cc-trainer > .cc-trainer-side { flex-basis: 240px; min-width: 220px; }
}

@container ccapp (max-width: 600px) {
    .cc-trainer > .cc-trainer-side { flex-basis: 220px; min-width: 200px; }
}

@container ccapp (max-width: 900px) {
    .cc-trainer { flex-wrap: wrap; gap: 8px; }
    .cc-trainer > .cc-trainer-side {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
    }
    /* Bigger tap targets on the board-nav strip (⏮ ◀ ▶ ⏭ ⇅ 🎲) */
    .cc-trainer-controls .cc-btn {
        min-width: 44px;
        min-height: 40px;
        font-size: 15px;
    }
    /* Maximise the board: trim the coord-label padding around it */
    .cc-trainer-board-area > .cc-board-wrap {
        padding-right: 12px;
        padding-bottom: 14px;
    }
    /* Keep the button strip right edge lined up with the board's right edge */
    .cc-trainer-board-area > .cc-controls-strip {
        padding-right: 12px;
    }

    /* ---- Reorder the question card so primary actions sit ABOVE the
       question text and PGN, right under the board & nav strip ---- */
    .cc-trainer-question {
        display: flex;
        flex-direction: column;
        padding: 12px;
        gap: 8px;
    }
    .cc-trainer-question > * { margin: 0; }              /* let gap handle spacing */
    .cc-trainer-question .cc-trainer-actions   { order: 1; margin-top: 0; }
    .cc-trainer-question .cc-trainer-input-row { order: 2; }
    .cc-trainer-question .cc-trainer-feedback  { order: 3; }
    .cc-trainer-question .cc-trainer-meta-row  { order: 4; }
    .cc-trainer-question h3                    { order: 5; font-size: 15px; }
    .cc-trainer-question .cc-trainer-moves     { order: 6; }
    .cc-trainer-question .cc-trainer-hint-text { order: 7; }

    /* Within the actions strip: Preskočiť & Ďalší first, secondary after.
       Use ID-suffix selectors so the same rules cover Tests (cc-tt-*) and
       Diagrams (cc-pz-*) without touching the template. */
    .cc-trainer-actions { flex-wrap: wrap; gap: 8px; }
    .cc-trainer-actions [id$="-skip"]    { order: 1; flex: 1 1 40%; }
    .cc-trainer-actions [id$="-advance"] { order: 2; flex: 1 1 55%; }
    .cc-trainer-actions [id$="-hint"]    { order: 3; flex: 1 1 40%; }
    .cc-trainer-actions [id$="-reveal"]  { order: 4; flex: 1 1 55%; }
    .cc-trainer-actions .cc-btn { min-height: 44px; font-size: 15px; }
    /* Make the primary "Ďalší ▶" button pop visually */
    .cc-trainer-actions [id$="-advance"] { font-weight: 700; }

    /* Answer input row */
    .cc-trainer-input-row .cc-input,
    .cc-trainer-input-row .cc-btn { min-height: 44px; font-size: 15px; }
    /* Prevent the score/stats row from wrapping mid-item */
    .cc-trainer-meta { flex-wrap: wrap; gap: 6px 12px; }
    /* Scroll-anchor: when nextItem() scrolls to the board, land with a nice gap */
    .cc-trainer-board-area { scroll-margin-top: 12px; }
    /* Compact header row (progress + score) */
    .cc-trainer-header { padding: 8px 12px; gap: 8px; }
}

@supports not (container-type: inline-size) {
    @media (max-width: 900px) {
        .cc-trainer > .cc-trainer-side { flex-basis: 240px; min-width: 220px; }
    }
    @media (max-width: 900px) {
        .cc-trainer { flex-wrap: wrap; gap: 8px; }
        .cc-trainer > .cc-trainer-side {
            flex: 1 1 100%;
            max-width: 100%;
        }
        .cc-trainer-controls .cc-btn { min-width: 44px; min-height: 40px; font-size: 15px; }
        .cc-trainer-board-area > .cc-board-wrap { padding-right: 12px; padding-bottom: 14px; }
        .cc-trainer-board-area > .cc-controls-strip { padding-right: 12px; }

        .cc-trainer-question { display: flex; flex-direction: column; padding: 12px; gap: 8px; }
        .cc-trainer-question > * { margin: 0; }
        .cc-trainer-question .cc-trainer-actions   { order: 1; }
        .cc-trainer-question .cc-trainer-input-row { order: 2; }
        .cc-trainer-question .cc-trainer-feedback  { order: 3; }
        .cc-trainer-question .cc-trainer-meta-row  { order: 4; }
        .cc-trainer-question h3                    { order: 5; font-size: 15px; }
        .cc-trainer-question .cc-trainer-moves     { order: 6; }
        .cc-trainer-question .cc-trainer-hint-text { order: 7; }

        .cc-trainer-actions { flex-wrap: wrap; gap: 8px; }
        .cc-trainer-actions [id$="-skip"]    { order: 1; flex: 1 1 40%; }
        .cc-trainer-actions [id$="-advance"] { order: 2; flex: 1 1 55%; font-weight: 700; }
        .cc-trainer-actions [id$="-hint"]    { order: 3; flex: 1 1 40%; }
        .cc-trainer-actions [id$="-reveal"]  { order: 4; flex: 1 1 55%; }
        .cc-trainer-actions .cc-btn { min-height: 44px; font-size: 15px; }

        .cc-trainer-input-row .cc-input,
        .cc-trainer-input-row .cc-btn { min-height: 44px; font-size: 15px; }
        .cc-trainer-board-area { scroll-margin-top: 12px; }
        .cc-trainer-header { padding: 8px 12px; gap: 8px; }
    }
}

/* ============================================
   Trainer review (student progress)
   ============================================ */
.cc-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 13px;
}

.cc-table th, .cc-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--cc-border);
    vertical-align: top;
}

.cc-table th {
    background: var(--cc-card-2);
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    color: var(--cc-text-light, #666);
    letter-spacing: 0.4px;
}

.cc-trainer-table tr.cc-row-ok td { background: rgba(40, 167, 69, 0.06); }
.cc-trainer-table tr.cc-row-bad td { background: rgba(220, 53, 69, 0.06); }

.cc-status-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}
.cc-st-correct { background: rgba(40, 167, 69, 0.15); color: var(--cc-success, #28a745); }
.cc-st-completed { background: rgba(0, 123, 255, 0.15); color: #007bff; }
.cc-st-wrong { background: rgba(220, 53, 69, 0.15); color: var(--cc-danger, #dc3545); }
.cc-st-open { background: rgba(108, 117, 125, 0.15); color: #6c757d; }

.cc-trainer-view .cc-back {
    display: inline-block;
    margin-bottom: 14px;
    color: var(--cc-text-light, #666);
    text-decoration: none;
}
.cc-trainer-view .cc-back:hover {
    color: var(--cc-text, #222);
}

/* ============================================
   Tabs (Diagrams / Quiz)
   ============================================ */
.cc-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--cc-border);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.cc-tab {
    background: transparent;
    border: none;
    padding: 10px 18px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--cc-text-light, #666);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color .15s, border-color .15s;
}

.cc-tab:hover {
    color: var(--cc-text, #222);
}

.cc-tab.active {
    color: var(--cc-primary, #28a745);
    border-bottom-color: var(--cc-primary, #28a745);
}

.cc-tab-count {
    margin-left: 4px;
    font-size: 12px;
    color: var(--cc-text-light, #888);
    font-weight: 500;
}

.cc-tab-panel {
    display: none;
}

.cc-tab-panel.active {
    display: block;
}

/* ============================================
   Game picker (dropdown above board)
   ============================================ */
.cc-game-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 14px;
}

.cc-game-header h2 {
    margin: 0;
}

.cc-game-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.cc-game-picker label {
    color: var(--cc-text-light, #666);
    font-weight: 600;
    margin-bottom: 0;
}

.cc-game-picker select {
    min-width: 220px;
    padding: 6px 10px;
}

/* ============================================
   Trainer ID badge + moves panel
   ============================================ */
.cc-trainer-meta-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.cc-trainer-id {
    display: inline-block;
    padding: 3px 10px;
    background: var(--cc-bg-2, #2a2f3a);
    color: var(--cc-text-on-dark, #fff);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

.cc-trainer-moves {
    background: var(--cc-card-2, #f4f6f8);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    min-height: 30px;
    word-spacing: 4px;
}

.cc-trainer-moves .cc-mn {
    color: var(--cc-text-light, #888);
    margin-right: 2px;
    font-weight: 700;
}

.cc-trainer-moves .cc-move {
    color: var(--cc-text, #222);
    margin-right: 6px;
    font-weight: 600;
}

.cc-trainer-moves .cc-move-ph {
    color: var(--cc-text-light, #aaa);
    font-style: italic;
}

.cc-quiz-id {
    display: inline-block;
    padding: 2px 8px;
    background: var(--cc-bg-2, #2a2f3a);
    color: var(--cc-text-on-dark, #fff);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    font-family: 'SFMono-Regular', Consolas, monospace;
    margin-right: 6px;
    vertical-align: middle;
}

/* ============================================
   Analysis — PGN variation tree
   ============================================ */
#cc-an-moves {
    line-height: 1.9;
    font-size: 14px;
}

#cc-an-moves .cc-move {
    cursor: pointer;
    padding: 1px 4px;
    border-radius: 4px;
    color: var(--cc-text, #1a1a18);
    font-weight: 600;
    transition: background .12s;
}
#cc-an-moves .cc-move:hover {
    background: var(--cc-primary-soft, #d8ece0);
}
#cc-an-moves .cc-move.current {
    background: var(--cc-primary, #2f7d4f);
    color: #fff;
}

#cc-an-moves .cc-move-start {
    font-weight: 500;
    font-style: italic;
    color: var(--cc-text-light, #777);
}

#cc-an-moves .cc-mn {
    color: var(--cc-text-light, #999);
    font-weight: 700;
    margin-right: 1px;
}

/* Comments — shown like in the chapter "annotated game" panel */
#cc-an-moves .cc-pgn-comment {
    color: var(--cc-text-soft, #4a4a48);
    font-style: italic;
    font-weight: 400;
    font-family: var(--cc-serif, Georgia, 'Times New Roman', serif);
}

/* Variations — indented, lighter, recursively nestable */
#cc-an-moves .cc-pgn-var {
    color: var(--cc-text-light, #6a6a68);
    font-size: 13px;
}
#cc-an-moves .cc-pgn-var .cc-move {
    font-weight: 500;
}
#cc-an-moves .cc-pgn-var .cc-pgn-var {
    font-size: 12px;
}

#cc-an-moves .cc-empty-moves {
    color: var(--cc-text-light, #999);
    font-style: italic;
}

/* ============================================
   Analysis — Comments panel (single active comment)
   ============================================ */
.cc-comments-pane {
    font-size: var(--cc-fs-sm);
}

/* Active comment — styled like the "Komentovaná partia" comment box */
.cc-comments-pane.cc-comment-active {
    background: #fffbeb;
    border-left: 3px solid var(--cc-accent);
    padding: 10px 14px;
    border-radius: var(--cc-radius-sm);
    color: #78350f;
    min-height: 30px;
}

.cc-comments-pane.cc-comment-active .cc-comment-move {
    display: inline-block;
    font-family: var(--cc-mono, 'SFMono-Regular', Consolas, monospace);
    font-weight: 700;
    font-size: 12px;
    color: var(--cc-accent);
    margin-right: 8px;
}

.cc-comments-pane.cc-comment-active .cc-comment-text {
    line-height: 1.55;
}

/* Empty state — no comment for the current move */
.cc-comments-pane.cc-comments-empty-state {
    padding: 10px 4px;
}
.cc-comments-pane .cc-comments-empty {
    color: var(--cc-text-light, #999);
    font-style: italic;
    font-size: 14px;
}

/* ========================================================================
   Theme toggle button — sits in .cc-header top-right (above the board)
   ======================================================================== */
.cc-header-with-toggle {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.cc-theme-toggle {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    background: var(--cc-card, #ffffff);
    color: var(--cc-text, #1a2030);
    border: 1px solid var(--cc-border, #e0e4ed);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--cc-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.06));
    transition: background .15s ease, transform .15s ease;
    flex: 0 0 auto;
    align-self: center;
}
.cc-theme-toggle:hover { transform: scale(1.06); }
.cc-theme-toggle:focus { outline: 2px solid var(--cc-primary); outline-offset: 2px; }

/* Fallback (pages without .cc-header): pinned to top-right of .cc-app */
.cc-app:has(> .cc-theme-toggle) { position: relative; }
.cc-app > .cc-theme-toggle {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 5;
}
.cc-app:has(> .cc-theme-toggle) > .cc-nav { padding-right: 48px; }

/* Small screens: slightly smaller */
@container ccapp (max-width: 480px) {
    .cc-theme-toggle { width: 30px; height: 30px; font-size: 14px; }
}

/* ========================================================================
   Dark theme — near-black background, matching card surfaces
   ======================================================================== */
html.cc-dark {
    --cc-card: #121212;
    --cc-card-2: #1c1c1c;
    --cc-text: #f0f0f0;
    --cc-text-light: #a0a0a0;
    --cc-border: #2a2a2a;
    --cc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.6);
    --cc-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
    --cc-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.8);
}

html.cc-dark body {
    background: #000000;
    color: var(--cc-text);
}

/* Cards, inputs, selects, tabs and other light surfaces in dark mode */
html.cc-dark .cc-card,
html.cc-dark .cc-trainer-card,
html.cc-dark .cc-tab-panel,
html.cc-dark .cc-toolbar,
html.cc-dark .cc-input,
html.cc-dark .cc-select,
html.cc-dark .cc-textarea,
html.cc-dark .cc-comment-active {
    background: var(--cc-card);
    color: var(--cc-text);
    border-color: var(--cc-border);
}

/* Buttons: neutral outlined variant (cc-btn without a colour modifier) */
html.cc-dark .cc-btn:not(.cc-btn-primary):not(.cc-btn-success):not(.cc-btn-danger):not(.cc-btn-accent) {
    background: var(--cc-card-2);
    color: var(--cc-text);
    border-color: var(--cc-border);
}
html.cc-dark .cc-btn:not(.cc-btn-primary):not(.cc-btn-success):not(.cc-btn-danger):not(.cc-btn-accent):hover {
    background: #2a2a2a;
}

/* Fullscreen overlay in dark mode */
html.cc-dark .cc-trainer-card.cc-focused,
html.cc-dark .cc-trainer-card:fullscreen {
    background: #000000;
}

/* PGN move list & muted text */
html.cc-dark .cc-moves-list,
html.cc-dark .cc-empty-moves,
html.cc-dark .cc-comments-empty {
    color: var(--cc-text-light);
}

/* Theme toggle button itself in dark mode */
html.cc-dark .cc-theme-toggle {
    background: var(--cc-card-2);
    color: #ffd166;   /* warm sun tint */
    border-color: var(--cc-border);
}