/* Page-specific CSS - Layouts and page-specific overrides */

/* ===== HOME PAGE ===== */
.home-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 60px var(--spacing-lg);
}

.hero {
    text-align: center;
    margin-bottom: 50px;
}

.ascii-art {
    color: var(--text-bright);
    font-size: 0.688rem;
    line-height: 1.2;
    margin-bottom: var(--spacing-md);
    overflow-x: auto;
}

.tagline {
    color: var(--text-dim);
    font-size: 1.25rem;
}

.home-actions {
    display: flex;
    gap: var(--spacing-lg);
    margin-bottom: 40px;
}

.saved-games-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: 40px;
}

.saved-games-section h3 {
    color: var(--accent-color);
    margin-bottom: var(--spacing-md);
    font-size: 0.875rem;
    text-transform: uppercase;
}

.games-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.game-card {
    display: block;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-color);
    transition: all var(--transition-normal);
}

.game-card:hover {
    border-color: var(--text-color);
    background: var(--bg-secondary);
}

.game-card-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.game-world { color: var(--text-bright); }
.game-turn { color: var(--text-dim); font-size: 0.813rem; }
.game-char { color: var(--accent-color); font-size: 0.875rem; }

.features h3 {
    color: var(--text-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: var(--spacing-md);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-md);
}

.feature {
    text-align: center;
    padding: var(--spacing-md) 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.feature-icon { 
    display: block; 
    font-size: 1.75rem; 
    margin-bottom: var(--spacing-sm); 
}

.feature-text { 
    font-size: 0.75rem; 
    color: var(--text-dim); 
}

/* ===== GAME PAGE ===== */
.game-layout {
    display: flex;
    height: 100vh;
    overflow: hidden;
}

.game-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Game Header */
.game-header {
    display: flex;
    align-items: center;
    padding: 10px var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    gap: var(--spacing-md);
}

.world-name {
    color: var(--text-bright);
    font-size: 14px;
}

.char-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.char-name { 
    color: var(--accent-color); 
    font-size: 14px; 
}

.hp-mini {
    width: 80px;
    height: 8px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.hp-mini-fill {
    height: 100%;
    transition: width var(--transition-slow);
}

.hp-good { background: var(--text-color); }
.hp-warn { background: var(--warning-color); }
.hp-danger { background: var(--error-color); }

.hp-text { color: var(--text-dim); font-size: 12px; }
.gold-mini { color: var(--warning-color); font-size: 13px; }

/* Location Banner */
.location-banner {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.location-icon { font-size: 14px; }
.location-name { color: var(--text-bright); font-size: 14px; }

/* Story Output */
.story-output {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
}

.loading-message,
.error-message {
    text-align: center;
    padding: 40px;
    color: var(--text-dim);
}

.error-message { 
    color: var(--error-color); 
}

/* Turn debug container */
.turn-debug {
    margin-bottom: 5px;
    padding: var(--spacing-sm);
    background: rgba(0, 68, 0, 0.2);
    border-left: 2px solid var(--border-color);
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.turn-debug .message {
    margin-bottom: 5px;
    padding: 5px var(--spacing-sm);
}

.turn-debug .message:last-child {
    margin-bottom: 0;
}

/* Context details */
.context-details {
    margin-bottom: 10px;
    border: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
}

.context-details summary {
    padding: var(--spacing-sm) 12px;
    cursor: pointer;
    color: var(--accent-color);
    font-size: 12px;
    user-select: none;
}

.context-details summary:hover {
    background: rgba(0, 255, 255, 0.1);
}

.context-details[open] summary {
    border-bottom: 1px solid var(--border-color);
}

.context-content {
    max-height: 400px;
    overflow-y: auto;
}

.context-section {
    padding: 10px;
    border-bottom: 1px solid var(--border-color);
}

.context-section:last-child {
    border-bottom: none;
}

.context-section h5 {
    color: var(--text-bright);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.context-section pre {
    font-size: 11px;
    color: var(--text-dim);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
    background: var(--bg-color);
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

/* Character Sheet in Panel */
.char-sheet {
    padding: 0;
}

.char-name-big {
    color: var(--text-bright);
    font-size: 20px;
    text-align: center;
    margin-bottom: 5px;
}

.char-class-level {
    color: var(--accent-color);
    font-size: 13px;
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.char-combat-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.char-combat-row .char-hp-section {
    flex: 1;
    margin-bottom: 0;
}

.char-hp-section {
    margin-bottom: var(--spacing-lg);
}

.char-hp-bar {
    height: 16px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 5px;
    overflow: hidden;
}

.char-hp-fill { 
    height: 100%; 
    transition: width var(--transition-slow); 
}

.char-ac {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px var(--spacing-md);
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.ac-icon { font-size: 20px; }
.ac-value { font-size: 24px; font-weight: bold; color: var(--text-bright); }
.ac-label { font-size: 10px; color: var(--text-dim); text-transform: uppercase; }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

.stat-box {
    text-align: center;
    padding: 10px 5px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}

.stat-name { display: block; color: var(--accent-color); font-size: 11px; }
.stat-val { display: block; color: var(--text-bright); font-size: 18px; font-weight: bold; }
.stat-mod { display: block; color: var(--text-dim); font-size: 12px; }

.char-section {
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.char-section:last-child { 
    border-bottom: none; 
}

.char-section h4 {
    color: var(--accent-color);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: var(--spacing-sm);
}

.gold-big { 
    color: var(--warning-color); 
    font-size: 20px; 
}

.inventory {
    list-style: none;
    padding: 0;
}

.inventory li {
    padding: 4px 0;
    font-size: 13px;
    color: var(--text-color);
}

.inventory li::before {
    content: "• ";
    color: var(--text-dim);
}

.abilities-list {
    list-style: none;
    padding: 0;
}

.ability-item {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px dotted var(--border-color);
}

.ability-item:last-child { 
    border-bottom: none; 
}

.ability-name {
    display: block;
    color: var(--text-bright);
    font-size: 13px;
    margin-bottom: 3px;
}

.ability-desc {
    display: block;
    color: var(--text-dim);
    font-size: 12px;
    line-height: 1.4;
}

.backstory-text {
    font-size: 13px;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.5;
}

/* World Panel */
.world-info {
    padding: 0;
}

.world-stats {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

.world-stat {
    flex: 1;
    text-align: center;
}

.world-stat span:first-child {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
}

.world-stat span:last-child {
    display: block;
    color: var(--text-bright);
    font-size: 18px;
}

.entity-browser {
    margin-top: 10px;
}

.entity-group {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-sm);
}

.entity-group summary {
    padding: 10px 12px;
    cursor: pointer;
    color: var(--text-color);
    font-size: 13px;
}

.entity-group summary:hover { 
    background: var(--bg-secondary); 
}

.entity-list {
    list-style: none;
    padding: 0;
    border-top: 1px solid var(--border-color);
}

.entity-item {
    padding: var(--spacing-sm) 12px var(--spacing-sm) 25px;
    cursor: pointer;
    font-size: 13px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
}

.entity-item:last-child { 
    border-bottom: none; 
}

.entity-item:hover { 
    background: var(--bg-secondary); 
}

.entity-name { color: var(--text-color); }
.hidden-badge { color: var(--warning-color); font-size: 10px; }

/* Entity Detail */
.entity-detail {
    animation: fadeIn var(--transition-normal);
}

.back-btn {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 13px;
    cursor: pointer;
    padding: 0;
    margin-bottom: var(--spacing-md);
}

.back-btn:hover { 
    color: var(--text-color); 
}

.entity-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--spacing-md);
}

.entity-icon { font-size: 24px; }
.entity-header h3 { color: var(--text-bright); font-size: 18px; margin: 0; }

.entity-summary {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: var(--spacing-md);
}

.dm-notes {
    background: rgba(255, 170, 0, 0.1);
    border-left: 3px solid var(--warning-color);
    padding: 10px 12px;
    margin-bottom: var(--spacing-md);
    border-radius: var(--radius-sm);
}

.dm-notes h4 { color: var(--warning-color); font-size: 12px; margin-bottom: var(--spacing-sm); }
.dm-notes p { font-size: 13px; color: var(--text-dim); }

.entity-facts,
.entity-links { 
    margin-bottom: var(--spacing-md); 
}

.entity-facts h4,
.entity-links h4 {
    color: var(--accent-color);
    font-size: 12px;
    margin-bottom: var(--spacing-sm);
}

.entity-facts ul,
.entity-links ul {
    list-style: none;
    padding: 0;
}

.entity-facts li,
.entity-links li {
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px dotted var(--border-color);
}

.entity-facts li:last-child,
.entity-links li:last-child { 
    border-bottom: none; 
}

.entity-facts li.secret { 
    color: var(--warning-color); 
}

.link-type { 
    color: var(--accent-color); 
}

/* Quest Panel */
.quest-log {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.quest-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.quest-section-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px 12px;
    color: var(--text-color);
    font-size: 13px;
    cursor: pointer;
}

.quest-section-title:hover {
    background: var(--bg-secondary);
}

.quest-status-icon {
    font-size: 14px;
}

.quest-list {
    padding: var(--spacing-sm);
    border-top: 1px solid var(--border-color);
}

.quest-card {
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.quest-card:last-child {
    margin-bottom: 0;
}

.quest-card:hover {
    border-color: var(--text-dim);
    background: var(--bg-secondary);
}

.quest-card.quest-active {
    border-left: 3px solid var(--accent-color);
}

.quest-card.quest-completed {
    border-left: 3px solid var(--text-color);
    opacity: 0.7;
}

.quest-card.quest-failed {
    border-left: 3px solid var(--error-color);
    opacity: 0.7;
}

.quest-header {
    margin-bottom: 5px;
}

.quest-name {
    color: var(--text-bright);
    font-size: 13px;
}

.quest-summary {
    color: var(--text-dim);
    font-size: 12px;
    margin-bottom: var(--spacing-sm);
}

.quest-objectives {
    font-size: 11px;
    color: var(--text-color);
    margin-bottom: var(--spacing-sm);
}

.quest-objective {
    padding: 2px 0;
}

.quest-more {
    color: var(--text-dim);
    font-style: italic;
}

.quest-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-dim);
}

.empty-quests {
    text-align: center;
    padding: var(--spacing-xl);
}

.empty-quests .empty-icon {
    font-size: 32px;
    opacity: 0.5;
    margin-bottom: var(--spacing-sm);
}

/* Settings Modal */
.setting-row {
    margin-bottom: var(--spacing-md);
}

.setting-row label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-color);
    cursor: pointer;
}

.setting-row input[type="checkbox"] {
    accent-color: var(--accent-color);
    width: 18px;
    height: 18px;
}

.setting-desc {
    font-size: 12px;
    color: var(--text-dim);
    margin: 5px 0 0 28px;
}

.danger-zone {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.danger-zone h4 {
    color: var(--error-color);
    font-size: 12px;
    margin-bottom: 10px;
}

/* ===== SESSION ZERO PAGE ===== */
.session-zero-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg-color);
    overflow: hidden;
}

.session-zero-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Chat Main Area */
.chat-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    border-right: 1px solid var(--border-color);
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    min-height: 0;
}

/* World Bible Panel */
.world-bible {
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary);
    overflow: hidden;
}

.bible-header {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}

.bible-header h2 {
    margin: 0;
    font-size: 16px;
    color: var(--text-bright);
}

.bible-content {
    flex: 1;
    overflow-y: auto;
    padding: 10px;
}

.bible-footer {
    padding: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* Bible Sections */
.bible-section {
    margin-bottom: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

/* World Content */
.world-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.world-title {
    color: var(--text-bright);
    font-weight: bold;
    font-size: 14px;
}

.world-tone {
    color: var(--accent-color);
    font-size: 12px;
}

.world-description {
    color: var(--text-color);
    line-height: 1.4;
    font-size: 12px;
}

.world-conflict {
    color: var(--text-dim);
    font-size: 11px;
    padding-top: 6px;
    border-top: 1px solid var(--border-color);
}

/* Character Content */
.character-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.char-race-class {
    color: var(--accent-color);
    font-size: 12px;
}

.char-title {
    color: var(--accent-color);
    font-size: 12px;
    font-style: italic;
}

.char-backstory {
    color: var(--text-color);
    font-size: 12px;
    line-height: 1.4;
}

/* Section List */
.section-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 150px;
    overflow-y: auto;
}

/* Begin Adventure Button */
.begin-btn {
    width: 100%;
    padding: 12px;
    background: var(--accent-color);
    border: none;
    border-radius: var(--radius-md);
    color: var(--bg-color);
    font-family: inherit;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    transition: all var(--transition-normal);
}

.begin-btn:hover {
    background: var(--text-bright);
    transform: scale(1.02);
}

/* Clickable content */
.clickable {
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm);
    margin: calc(-1 * var(--spacing-sm));
}

.clickable:hover {
    background: rgba(0, 255, 255, 0.05);
}

.click-hint {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: var(--spacing-sm);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.clickable:hover .click-hint {
    opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .session-zero-layout {
        grid-template-columns: 1fr;
    }
    
    .world-bible {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 300px;
        transform: translateX(100%);
        transition: transform var(--transition-slow);
        z-index: 100;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
    }
    
    .world-bible.open {
        transform: translateX(0);
    }
    
    .chat-main {
        border-right: none;
    }
}

@media (max-width: 768px) {
    .home-actions { 
        flex-direction: column; 
    }
    
    .feature-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .char-summary { 
        flex-wrap: wrap; 
        justify-content: center; 
    }
    
    .hp-mini { 
        width: 60px; 
    }
    
    .side-panel {
        position: fixed;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        max-width: 320px;
        z-index: 100;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.5);
    }
    
    .stats-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

@media (max-width: 480px) {
    .ascii-art { 
        font-size: 0.438rem; 
    }
    
    .game-header { 
        flex-wrap: wrap; 
        padding: var(--spacing-sm) 10px; 
    }
    
    .header-center { 
        order: 3; 
        width: 100%; 
        margin-top: var(--spacing-sm); 
    }
}