/**
 * Minimax Visualisierung — Page-specific Styles
 *
 * Nur minimax-spezifische Regeln.
 * Gemeinsame Playground-Styles: css/viz-playground.css
 * Benötigt: tokens.css, style.css, responsive.css, viz-playground.css
 *
 * @version 2.0
 */

/* =========================================
   MINIMAX-SPECIFIC STATS
   ========================================= */

#stats {
    font-size: var(--font-size-sm, 0.9rem);
    color: var(--color-text-muted, #7f8c8d);
    font-family: var(--font-mono, 'Courier New', monospace);
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================
   ABP HELP BOX
   ========================================= */

.abp-help {
    margin-top: var(--space-xs, 0.25rem);
    padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
    background: var(--color-bg, #f8f9fa);
    border: 1px solid var(--color-border-light, #dfe6e9);
    border-radius: var(--border-radius, 6px);
    font-size: var(--font-size-xs, 0.8rem);
    color: var(--color-text-muted, #4b5563);
    line-height: 1.35;
}

.abp-help strong {
    color: var(--color-text, #2c3e50);
}


/* =========================================
   PARAMETER PANEL (Diagramm-Modus)
   ========================================= */

.param-panel {
    background: var(--color-surface, #ffffff);
    padding: var(--space-lg, 1.5rem);
    border-radius: var(--border-radius-lg, 8px);
    box-shadow: 0 4px 15px var(--color-shadow, rgba(0, 0, 0, 0.1));
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1rem);
    width: 100%;
    max-width: 400px;
    box-sizing: border-box;
}

.param-panel h3 {
    margin: 0;
    text-align: center;
    color: var(--color-text, #2c3e50);
}

.param-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs, 0.25rem) 0;
}

.param-row label {
    font-weight: 600;
    color: var(--color-text-muted, #7f8c8d);
    font-size: var(--font-size-sm, 0.9rem);
    min-width: 120px;
}

.param-row input[type="range"] {
    flex: 1;
    margin: 0 var(--space-sm, 0.5rem);
}

.param-row .param-value {
    font-family: var(--font-mono, 'Courier New', monospace);
    color: var(--color-text, #2c3e50);
    min-width: 40px;
    text-align: right;
    font-size: var(--font-size-sm, 0.9rem);
}

.param-buttons {
    display: flex;
    gap: var(--space-sm, 0.5rem);
    justify-content: center;
    margin-top: var(--space-xs, 0.25rem);
    flex-wrap: wrap;
}

.param-info {
    padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
    background: var(--color-bg, #f8f9fa);
    border: 1px solid var(--color-border-light, #dfe6e9);
    border-radius: var(--border-radius, 6px);
    font-size: var(--font-size-xs, 0.8rem);
    color: var(--color-text-muted, #4b5563);
    line-height: 1.35;
}

.param-info strong {
    color: var(--color-text, #2c3e50);
}

.generic-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.25rem);
    font-size: var(--font-size-base, 0.95rem);
}


/* =========================================
   UTILITIES
   ========================================= */

.viz-input--narrow {
    width: 60px;
}

.generic-stats hr,
.board-card hr {
    border: none;
    border-top: 1px solid var(--color-border-light, #ddd);
    margin: var(--space-xs, 0.25rem) 0;
}