/* Test CYOA Styles */

:root {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-tertiary: #1f2940;
    --text-primary: #eee;
    --text-secondary: #aaa;
    --accent-primary: #4fc3f7;
    --accent-secondary: #00bcd4;
    --accent-positive: #4caf50;
    --accent-negative: #f44336;
    --border-color: rgba(255, 255, 255, 0.1);
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
}

/* Points Display */
.points-display {
    font-size: 1.5em;
    margin: 20px 0;
    padding: 15px 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
}

/* Sections */
.section {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.section-title {
    color: var(--accent-primary);
    border-bottom: 2px solid var(--accent-primary);
}

.info-box {
    background: var(--bg-tertiary);
    border-radius: 8px;
    border-left: 3px solid var(--accent-primary);
}

/* Choice and Option Items */
.choice-item, .option-item, .roll-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.choice-item:hover, .option-item:hover, .roll-item:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 195, 247, 0.2);
}

.choice-item.selected, .option-item.selected {
    border-color: var(--accent-positive);
    background: rgba(76, 175, 80, 0.15);
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.3);
}

.choice-item.disabled-choice, .option-item.disabled-choice {
    opacity: 0.5;
    border-color: var(--border-color);
}

.choice-item h3, .option-item h3 {
    color: var(--accent-primary);
}

/* Grid Group Specific Styles */
.grid-group-container {
    background: var(--bg-tertiary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 30px;
}

.grid-item.option-item {
    background: var(--bg-secondary);
    min-height: 120px;
}

.grid-item.option-item.selected {
    background: rgba(76, 175, 80, 0.2);
}

/* Grid Connectors */
.grid-connector {
    stroke-width: 3px;
    stroke: rgba(200, 200, 200, 0.4);
}

.grid-connector.unavailable {
    stroke: rgba(150, 150, 150, 0.5);
    stroke-dasharray: 8 4;
}

.grid-connector.available {
    stroke: rgba(76, 175, 80, 0.9);
    stroke-dasharray: none;
}

.grid-connector.active {
    stroke: #4caf50;
    stroke-width: 4px;
    stroke-dasharray: none;
}

/* Effect Indicators */
.destiny-indicator {
    border-radius: 4px;
}

.effect-positive {
    background: rgba(76, 175, 80, 0.2);
    color: #81c784;
}

.effect-negative {
    background: rgba(244, 67, 54, 0.2);
    color: #e57373;
}

.effect-special {
    background: rgba(156, 39, 176, 0.2);
    color: #ba68c8;
}

.requirements-indicator {
    background: rgba(255, 152, 0, 0.2);
    color: #ffb74d;
}

/* Character Sheet */
.character-sheet {
    background: var(--bg-secondary);
    border-top: 2px solid var(--accent-primary);
}

.stat-group {
    background: var(--bg-tertiary);
    border-radius: 8px;
}

/* Buttons */
.btn, .control-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.btn:hover, .control-btn:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border-color: var(--accent-primary);
}

.character-sheet-toggle {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* Navigation Menu */
.navigation-menu {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.nav-header {
    background: var(--bg-tertiary);
    border-radius: 8px 8px 0 0;
}

.nav-section-title {
    color: var(--text-secondary);
}

.nav-section-title:hover {
    color: var(--accent-primary);
    background: var(--bg-tertiary);
}

/* Footer */
.footer-section {
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

/* Roll Interface */
.roll-container {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.dice-roll {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.dice-roll.selectable-roll:hover {
    border-color: var(--accent-primary);
    background: rgba(79, 195, 247, 0.1);
}

.roll-button {
    background: var(--accent-primary);
    color: var(--bg-primary);
    border: none;
    border-radius: 6px;
    font-weight: bold;
}

.roll-button:hover {
    background: var(--accent-secondary);
}

/* Repeatable Controls */
.repeatable-controls {
    background: var(--bg-secondary);
}

.repeatable-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.repeatable-btn:hover:not(:disabled) {
    background: var(--accent-primary);
    color: var(--bg-primary);
}

/* Title Container */
.title-container {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.title-container h1 {
    color: var(--accent-primary);
}

/* Group Description */
.group-description {
    color: var(--text-secondary);
}

/* Section Minimize Toggle */
.section-minimize-toggle {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

.section-minimize-toggle:hover {
    background: var(--accent-primary);
    color: var(--bg-primary);
}