/* ============================================
   Range Lab - Practice/Training Styles
   Premium Dark Green Casino Theme
   ============================================ */

/* ===== Training Page Layout ===== */
.training-page {
    min-height: calc(100vh - var(--nav-height));
    display: grid;
    grid-template-columns: 320px 1fr;
    background: var(--color-bg-primary);
    overflow-x: hidden;
}

.training-sidebar {
    padding: var(--space-5);
    background: var(--color-bg-secondary);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-height: none;
    overflow: visible;
}

.training-main {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.training-dashboard {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

/* Always show dashboard panels - no collapsed state */

.dashboard-tabs {
    display: inline-flex;
    align-self: flex-start;
    gap: var(--space-2);
    padding: 4px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
}

.dashboard-tab {
    padding: 6px 10px;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    font-weight: var(--font-semibold);
}

.dashboard-tab.active {
    background: var(--gradient-primary);
    color: #000;
}

.dashboard-toggle {
    display: none; /* Always show dashboard, hide toggle button */
}

.dashboard-panels {
    display: flex;
    flex-direction: column;
}

.dashboard-panel {
    display: none;
    gap: var(--space-2);
}

.dashboard-panel.active {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-2);
}

.dashboard-panel[data-panel="overview"].active {
    grid-template-columns: 1fr;
    align-items: start;
}

.dashboard-panel[data-panel="overview"] .training-stats {
    max-width: none;
}

.dashboard-panel[data-panel="analytics"].active {
    grid-template-columns: 1fr auto;
    align-items: start;
}

.dashboard-panel[data-panel="path"].active {
    grid-template-columns: 1fr;
}

.dashboard-panel[data-panel="analytics"] .training-analytics {
    grid-column: 1;
    grid-row: 1;
}

.dashboard-panel[data-panel="analytics"] .training-weekly {
    grid-column: 2;
    grid-row: 1;
    min-width: 180px;
    max-width: 200px;
}

.training-arena {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
    min-height: 520px;
}

.arena-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    min-height: 520px;
    justify-content: center;
}

.arena-center .table-container {
    flex: 0;
    width: 100%;
}


/* ===== Training Mode Selector ===== */
.training-modes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.training-mode {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.training-mode:hover {
    border-color: var(--color-border-light);
    background: var(--color-bg-elevated);
}

.training-mode.active {
    border-color: var(--color-gold);
    background: var(--color-gold-muted);
}

.training-mode-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-tertiary);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-primary);
    border-radius: var(--radius-md);
}

.training-mode.active .training-mode-icon {
    background: var(--color-gold);
    color: var(--color-bg-primary);
}

.training-mode-info {
    flex: 1;
}

.training-mode-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.training-mode-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ===== Training Settings ===== */
.training-settings {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

#difficulty-toggle {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#difficulty-toggle .toggle-btn {
    padding: var(--space-2) var(--space-2);
    font-size: var(--text-xs);
}

.setting-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.setting-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== Daily Limit Card ===== */
.training-limit {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.training-limit-header {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

.training-limit-count {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--font-extrabold);
    color: var(--color-gold);
}

.training-limit-sub {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

/* ===== Training Stats (Overview Stats) ===== */
.training-stats {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.training-stat {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0;
    background: transparent;
    border: none;
}

.training-stat-value {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--color-gold);
    line-height: 1;
}

.training-stat-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.training-stat.success .training-stat-value { color: var(--color-green); }
.training-stat.danger .training-stat-value { color: var(--color-red); }

/* ===== Training Lock Overlay ===== */
.training-lock {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 10, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.training-lock.active {
    display: flex;
}

.training-lock-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-width: 420px;
    text-align: center;
    box-shadow: var(--shadow-xl);
}

.training-lock-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-3);
}

.training-lock-subtitle {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

/* ===== Poker Table Display ===== */
.table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px var(--space-4);
}

.poker-table {
    position: relative;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 2 / 1;
    background: var(--color-felt);
    border: 8px solid var(--color-felt-border);
    border-radius: 200px;
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.4),
        var(--shadow-xl);
}

/* Inner table border decoration */
.poker-table::before {
    content: '';
    position: absolute;
    inset: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 180px;
    pointer-events: none;
    z-index: 0;
}

/* Table Pot */
.table-pot {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-4);
    background: rgba(0, 0, 0, 0.6);
    border-radius: var(--radius-md);
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-gold);
    z-index: 2;
}

/* Board Cards */
.board-cards {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: var(--space-2);
    z-index: 2;
}

.board-card {
    width: 56px;
    height: 78px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.board-card.dealt {
    background: linear-gradient(145deg, #fff 0%, #f5f5f5 100%);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-suit-spade);
}

.board-card.dealt.red {
    color: var(--color-suit-heart);
}

.board-card.dealt.blue {
    color: var(--color-suit-diamond);
}

/* Player Positions */
.table-positions {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}

.table-position {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    pointer-events: auto;
}

.position-seat {
    width: 80px;
    padding: var(--space-2);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    text-align: center;
    border-radius: var(--radius-sm);
}

.position-seat.active {
    border-color: var(--color-gold);
}

.position-seat.hero {
    border-color: var(--color-green);
    border-width: 2px;
    /* Override layout.css .hero styles */
    min-height: auto;
    display: block;
    overflow: visible;
    background: var(--color-bg-tertiary);
}

.position-seat.hero::before,
.position-seat.hero::after {
    display: none !important;
    content: none !important;
}

.position-seat.hero .position-label {
    color: var(--color-green);
    font-weight: var(--font-bold);
}

.position-seat.villain {
    border-color: var(--color-red);
}

.position-seat.villain .position-label {
    color: var(--color-red);
}

.position-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.position-stack {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
}

.position-cards {
    display: flex;
    gap: 2px;
}

.position-card {
    width: 36px;
    height: 50px;
    background: linear-gradient(145deg, #fff 0%, #f5f5f5 100%);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.position-card.hidden {
    background: linear-gradient(135deg, var(--color-gold-dark) 0%, var(--color-gold) 100%);
    color: transparent;
}

.position-card.red { color: var(--color-suit-heart); }
.position-card.blue { color: var(--color-suit-diamond); }

/* Position Placements (6-max) - keep labels inside the table area */
.table-position[data-seat="btn"] { bottom: 2%; left: 67%; transform: translateX(-50%); }
.table-position[data-seat="sb"] { bottom: 22%; right: 1%; }
.table-position[data-seat="bb"] { top: 22%; right: 1%; }
.table-position[data-seat="utg"] { top: 2%; left: 67%; transform: translateX(-50%); }
.table-position[data-seat="mp"] { top: 2%; left: 33%; transform: translateX(-50%); }
.table-position[data-seat="co"] { bottom: 2%; left: 33%; transform: translateX(-50%); }

/* Dealer Button */
.dealer-button {
    position: absolute;
    width: 28px;
    height: 28px;
    background: linear-gradient(145deg, #fff 0%, #ddd 100%);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    color: var(--color-bg-primary);
    box-shadow: var(--shadow-md);
}

/* ===== Hero Hand Display ===== */
.hero-hand-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    background: linear-gradient(180deg, var(--color-bg-secondary) 0%, var(--color-bg-tertiary) 100%);
    border-top: 1px solid var(--color-border);
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.hero-hand-label {
    font-size: var(--text-xs);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: var(--font-bold);
    margin-bottom: 0;
}

.hero-cards {
    display: grid;
    grid-template-columns: repeat(2, 74px);
    column-gap: var(--space-2);
    justify-content: center;
    height: 108px;
    width: auto;
    margin: 0 auto;
}

.hero-card {
    width: 74px;
    height: 104px;
    background: linear-gradient(145deg, #ffffff 0%, #f8f8f8 50%, #eeeeee 100%);
    border: 3px solid rgba(212, 175, 55, 0.4);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono);
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: #1a1a2e;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 175, 55, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
    position: relative;
}

.hero-card:first-child {
    transform: rotate(-5deg);
    z-index: 2;
}

.hero-card:last-child {
    transform: rotate(5deg);
    z-index: 1;
}

.hero-cards:hover .hero-card:first-child {
    transform: rotate(-5deg) translateY(-4px);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(212, 175, 55, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero-cards:hover .hero-card:last-child {
    transform: rotate(5deg) translateY(-4px);
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.5),
        0 0 25px rgba(212, 175, 55, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero-card.red {
    color: var(--color-suit-heart);
}

.hero-card.blue {
    color: var(--color-blue);
}

.hero-card.green {
    color: var(--color-primary);
}

.hero-card .card-suit {
    font-size: var(--text-xl);
    margin-top: -4px;
}

/* ===== Action Panel ===== */
.action-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-6);
    background: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border);
}

.training-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-start;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
}

.toolbar-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--color-text-muted);
    padding: 2px 6px;
    border-right: 1px solid var(--color-border);
}

.toolbar-item:last-of-type {
    border-right: none;
}

.toolbar-label {
    color: var(--color-text-muted);
}

.toolbar-value {
    font-size: 11px;
    color: var(--color-gold);
    font-weight: var(--font-semibold);
}

.toolbar-actions {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-left: auto;
}

.toolbar-actions .btn {
    padding: 2px 6px;
    font-size: 10px;
    min-height: auto;
    line-height: 1.2;
}

#focus-lock-toggle {
    padding: 2px 8px;
    font-size: 9px;
    white-space: nowrap;
}

.action-info {
    text-align: center;
}

.hint-controls .btn {
    min-width: 140px;
}

.action-prompt {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-2);
}

.action-context {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.action-buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
}

.hint-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: center;
}

.hint-counter {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.hint-meter {
    width: 140px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.hint-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-red), var(--color-gold));
}

.hint-strip {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: rgba(218, 165, 32, 0.12);
    border: 1px solid rgba(218, 165, 32, 0.3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.action-btn {
    flex: 1;
    max-width: 200px;
    padding: var(--space-4) var(--space-6);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-base);
}

.action-btn.fold {
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.action-btn.fold:hover {
    background: var(--color-red);
    border-color: var(--color-red);
    color: white;
}

.action-btn.check,
.action-btn.call {
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.action-btn.check:hover,
.action-btn.call:hover {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: white;
}

.action-btn.raise,
.action-btn.bet {
    background: var(--color-bg-card);
    color: var(--color-text-secondary);
    border-color: var(--color-border);
}

.action-btn.raise:hover,
.action-btn.bet:hover {
    background: var(--color-green);
    border-color: var(--color-green);
    color: white;
}

.action-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Raise Slider */
.raise-controls {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
}

.raise-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    background: var(--color-bg-tertiary);
    outline: none;
}

.raise-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-gold);
    cursor: pointer;
}

.raise-amount {
    font-family: var(--font-mono);
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--color-gold);
    min-width: 80px;
    text-align: right;
}

.raise-presets {
    display: flex;
    gap: var(--space-2);
}

.raise-preset {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.raise-preset:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* ===== Result Display ===== */
.result-panel {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.9);
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    backdrop-filter: blur(4px);
}

.result-panel.active {
    opacity: 1;
    visibility: visible;
}

.result-panel.active .result-content {
    animation: resultSlideIn 0.3s ease-out;
}

@keyframes resultSlideIn {
    from {
        transform: translateY(20px) scale(0.95);
        opacity: 0;
    }
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.result-content {
    max-width: 600px;
    padding: var(--space-8);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    text-align: center;
    box-shadow: var(--shadow-2xl);
}

.result-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    border-radius: 50%;
}

.result-icon.correct {
    background: rgba(16, 185, 129, 0.2);
    border: 3px solid var(--color-green);
    animation: resultCorrect 0.5s ease-out;
    color: var(--color-green);
}

.result-icon.incorrect {
    background: rgba(239, 68, 68, 0.2);
    border: 3px solid var(--color-red);
    animation: resultIncorrect 0.5s ease-out;
    color: var(--color-red);
}

@keyframes resultCorrect {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes resultIncorrect {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

.result-title {
    font-size: var(--text-2xl);
    margin-bottom: var(--space-2);
}

.result-title.correct { color: var(--color-green); }
.result-title.incorrect { color: var(--color-red); }

.result-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.result-analysis {
    text-align: left;
    padding: var(--space-5);
    background: var(--color-bg-tertiary);
    border-left: 3px solid var(--color-gold);
    margin-bottom: var(--space-6);
}

.result-analysis-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gold);
    margin-bottom: var(--space-3);
}

.result-analysis-text {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: var(--leading-relaxed);
}

.result-ev {
    display: flex;
    gap: var(--space-6);
    justify-content: center;
    margin-bottom: var(--space-6);
}

.result-ev-item {
    text-align: center;
}

.result-ev-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.result-ev-value {
    font-family: var(--font-mono);
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
}

.result-ev-value.positive { color: var(--color-green); }
.result-ev-value.negative { color: var(--color-red); }

.result-takeaway {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.result-rubric {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
}

.result-feedback {
    margin-top: var(--space-4);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    text-align: left;
}

.feedback-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.feedback-list {
    margin: 0;
    padding-left: 16px;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.rubric-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.rubric-items {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.rubric-item {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-tertiary);
    text-align: center;
}

.rubric-item .rubric-label {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}

.rubric-item .rubric-status {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
}

.rubric-item.strong {
    border-color: rgba(32, 180, 110, 0.4);
    color: var(--color-green);
}

.rubric-item.needs {
    border-color: rgba(228, 72, 72, 0.4);
    color: var(--color-red);
}

.rubric-item.steady {
    border-color: rgba(218, 165, 32, 0.35);
    color: var(--color-gold);
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .training-page {
        grid-template-columns: 1fr;
    }

    .training-sidebar {
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .training-arena {
        grid-template-columns: 1fr;
    }

    .arena-center {
        order: -1;
    }

    .arena-panel {
        max-height: none;
        overflow: visible;
        padding-right: 0;
    }

    .training-modes {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .training-mode {
        flex: 1;
        min-width: 200px;
    }

    .poker-table {
        max-width: 600px;
    }
}

@media (max-width: 640px) {
    .table-container {
        padding: var(--space-4);
    }

    .poker-table {
        border-width: 4px;
        border-radius: 100px;
    }

    .board-card {
        width: 40px;
        height: 56px;
        font-size: var(--text-base);
    }

    .hero-card {
        width: 60px;
        height: 84px;
        font-size: var(--text-2xl);
    }

    .action-buttons {
        flex-direction: column;
    }

    .action-btn {
        max-width: 100%;
    }
}

/* ===== Training Progress & Path ===== */
.training-progress {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.training-progress .btn-ghost {
    padding: 6px 10px;
    font-size: var(--text-xs);
    align-self: flex-start;
}

.training-progress-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.toggle-group.compact {
    display: flex;
    gap: 4px;
    margin-top: 0;
}

.toggle-group.compact .toggle-btn {
    padding: 2px 6px;
    font-size: 10px;
    min-width: 24px;
}

.toggle-group.compact .toggle-btn.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.training-path {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-height: auto;
    max-height: none;
}

.training-ratings {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.training-analytics,
.training-weekly {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.training-analytics-header,
.training-weekly-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.training-analytics-header h4,
.training-weekly-header h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.training-analytics-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    padding: var(--space-1);
    min-height: 340px;
}

.training-analytics-chart canvas {
    width: min(460px, 100%);
    height: auto;
    aspect-ratio: 1 / 1;
}

.training-weekly-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
}

.weekly-card {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.weekly-label {
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.weekly-value {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-gold);
}

.weekly-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.training-ratings-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: var(--space-1);
}

.training-ratings-header h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
}

.ratings-sub {
    font-size: 10px;
    font-weight: var(--font-normal);
    color: var(--color-text-muted);
}

.training-ratings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rating-row {
    display: grid;
    grid-template-columns: 100px 1fr 36px;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.rating-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--text-xs);
}

.rating-bar {
    height: 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.rating-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold), var(--color-primary));
}

.rating-score {
    font-weight: var(--font-semibold);
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: right;
}

.rating-insight {
    font-size: 10px;
    color: var(--color-text-muted);
    margin-top: -4px;
    margin-bottom: var(--space-1);
}

.rating-confidence,
.summary-ratings-confidence {
    display: grid;
    grid-template-columns: 65px 1fr 32px;
    align-items: center;
    gap: var(--space-2);
    font-size: 10px;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.confidence-meter {
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, rgba(218, 165, 32, 0.6), rgba(218, 165, 32, 0.9));
}

.confidence-fill.mid {
    background: linear-gradient(90deg, rgba(32, 180, 110, 0.4), rgba(32, 180, 110, 0.8));
}

.confidence-fill.high {
    background: linear-gradient(90deg, rgba(32, 180, 110, 0.7), rgba(32, 180, 110, 1));
}

.confidence-fill.low {
    background: linear-gradient(90deg, rgba(228, 72, 72, 0.6), rgba(228, 72, 72, 0.9));
}

.training-path-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.path-header-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.training-path-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-height: 400px;
    overflow-y: auto;
    padding-right: var(--space-2);
}

.path-node {
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.path-node:hover {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.path-node.locked {
    opacity: 0.5;
    cursor: not-allowed;
}

.path-node.locked:hover {
    border-color: var(--color-border);
    transform: none;
}

.path-node.complete {
    border-color: var(--color-green);
    background: rgba(32, 180, 110, 0.12);
}

.path-node.exam-ready {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 1px rgba(218, 165, 32, 0.2);
}

.path-node.active {
    border-color: var(--color-gold);
    background: var(--color-gold-muted);
}

.path-node-title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-1);
}

.path-node-desc {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.path-node-meta {
    margin-top: var(--space-1);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-secondary);
}

.path-node-meter {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.meter-bar {
    flex: 1;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.meter-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold), var(--color-primary));
}

.meter-label {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.mastery-ring {
    position: relative;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.mastery-ring .ring-track {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(var(--color-border) 0deg, var(--color-border) 360deg);
}

.mastery-ring .ring-fill {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: conic-gradient(var(--color-gold) calc(var(--percent) * 3.6deg), rgba(255, 255, 255, 0.08) 0deg);
}

.mastery-ring .ring-label {
    position: relative;
    z-index: 2;
    font-weight: var(--font-semibold);
}

.path-progress {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* ===== Training Summary ===== */
.training-summary {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 10, 0.75);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
}

.training-summary.active {
    display: flex;
}

.training-summary-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding: var(--space-8);
    max-width: 420px;
    text-align: center;
    box-shadow: var(--shadow-xl);
}

.training-summary-title {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    margin-bottom: var(--space-3);
}

.training-summary-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-6);
}

.training-summary-unlock {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.training-summary-unlock.success {
    color: var(--color-green);
}

.training-summary-reco {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.training-summary-badge {
    margin-bottom: var(--space-4);
}

.summary-badge {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
}

.summary-badge.high {
    border-color: rgba(218, 165, 32, 0.5);
    color: var(--color-gold);
}

.summary-badge.mid {
    border-color: rgba(32, 180, 110, 0.4);
    color: var(--color-green);
}

.summary-badge.low {
    border-color: rgba(228, 72, 72, 0.4);
    color: var(--color-red);
}

.badge-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
}

.badge-sub {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.training-summary-hints {
    margin-bottom: var(--space-4);
    text-align: left;
}

.summary-hints-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.summary-hints-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.summary-hints-meter {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.summary-hints-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
}

.summary-hints-note {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.training-summary-confidence {
    text-align: left;
    margin-bottom: var(--space-4);
}

.summary-confidence-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.summary-confidence-bars {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    align-items: end;
    gap: var(--space-2);
    height: 80px;
    padding: var(--space-2);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.confidence-bar {
    width: 100%;
    border-radius: var(--radius-sm);
    background: linear-gradient(180deg, var(--color-gold), rgba(218, 165, 32, 0.25));
}

.summary-breakdown {
    margin-top: var(--space-4);
    text-align: left;
}

.summary-breakdown-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.summary-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.summary-breakdown-row {
    display: grid;
    grid-template-columns: 1fr 120px 40px;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.summary-breakdown-bar {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.summary-breakdown-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-gold));
}

.summary-ratings {
    margin-top: var(--space-4);
    text-align: left;
}

.summary-ratings-title {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.summary-ratings-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.summary-ratings-row {
    display: grid;
    grid-template-columns: 1fr 120px 40px;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.summary-ratings-insight {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin-top: -2px;
}

.summary-ratings-bar {
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    overflow: hidden;
}

.summary-ratings-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold), var(--color-primary));
}

.coach-strip {
    margin-top: var(--space-2);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.coach-pill {
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-tertiary);
    border: 1px solid var(--color-border);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: var(--font-semibold);
}

.coach-text {
    flex: 1;
    min-width: 140px;
}

.coach-tag {
    padding: 4px 8px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    font-weight: var(--font-semibold);
}