body {
    background-color: #111;
    color: #eee;
    font-family: 'Courier New', Courier, monospace;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    overflow: hidden;
}

#hud {
    font-size: 14px;
    margin-bottom: 10px;
    color: #aaa;
    width: 100%;
    text-align: center;
    height: auto;
    line-height: 1.5;
}

#game-container {
    border: 1px solid #333;
    padding: 10px;
    background-color: #000;
    position: relative; /* For floating elements */
}

.floating-text {
    position: absolute;
    color: #f88;
    font-weight: bold;
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
}

@keyframes floatUp {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-20px); opacity: 0; }
}

.shard-highlight {
    background-color: #442;
    color: #ff0;
    font-weight: bold;
}

.hud-error {
    color: #f55 !important;
    transition: color 0.5s;
}

#game-grid {
    margin: 0;
    line-height: 1;
    cursor: crosshair;
    user-select: none;
    font-size: 14px; /* Adjust based on preference */
}

#instructions {
    margin-top: 10px;
    color: #888;
    font-size: 0.8rem;
}

/* Node Resonance Styles */
.node-lvl1 { color: #fff; text-shadow: 0 0 2px #fff; } /* White */
.node-lvl2 { color: #48f; text-shadow: 0 0 4px #48f; } /* Blue */
.node-lvl3 { color: #0ff; text-shadow: 0 0 6px #0ff; } /* Cyan */
.node-lvl4 { color: #b0f; text-shadow: 0 0 8px #b0f; animation: pulse-violet 2s infinite ease-in-out; } /* Violet */

@keyframes pulse-violet {
    0%, 100% { text-shadow: 0 0 5px #b0f; color: #b0f; }
    50% { text-shadow: 0 0 12px #e0f; color: #e0f; }
}

/* Shardling Inheritance */
.shard-lvl2 { color: #69f; }
.shard-lvl3 { color: #5ff; }
.shard-lvl4 { color: #d5f; }

/* Scaffold */
.scaffold { color: #666; }

/* Echo */
.echo { color: #5aa; }

/* Charged Shardling */
.charged { color: #ff9; }

/* ============================================================================
   PHASE 3: NARRATIVE SIMULATION STYLES
   ============================================================================ */

/* Context Info (warnings/status) */
#context-info {
    margin-top: 5px;
    font-size: 12px;
    text-align: center;
    min-height: 18px;
}

.warning {
    color: #fa0;
    font-weight: bold;
}

.info {
    color: #0af;
}

/* Event Log Panel */
#event-log {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 400px;
    max-height: 300px;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #444;
    border-radius: 4px;
    padding: 10px;
    font-size: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

#event-log-title {
    color: #0ff;
    font-weight: bold;
    margin-bottom: 8px;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
    letter-spacing: 1px;
}

#event-log-content {
    color: #aaa;
    line-height: 1.6;
    max-height: 260px;
    overflow-y: auto;
}

#event-log-content::-webkit-scrollbar {
    width: 6px;
}

#event-log-content::-webkit-scrollbar-track {
    background: #111;
}

#event-log-content::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 3px;
}

.event-new {
    color: #fff;
    animation: fadeIn 0.5s;
    margin-bottom: 6px;
}

.event-recent {
    color: #bbb;
    margin-bottom: 6px;
}

.event-old {
    color: #666;
    margin-bottom: 6px;
}

.event-warning {
    color: #fa0;
}

.event-critical {
    color: #f33;
    font-weight: bold;
}

.event-story {
    color: #0af;
    font-style: italic;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Inspection Tooltip */
#inspection-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #0ff;
    border-radius: 3px;
    padding: 10px;
    font-size: 11px;
    color: #aaa;
    pointer-events: none;
    z-index: 1000;
    min-width: 220px;
    max-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3);
}

.inspect-title {
    color: #0ff;
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 12px;
}

.inspect-role {
    color: #fff;
    font-size: 10px;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inspect-stats {
    margin: 6px 0;
    line-height: 1.8;
}

.stat-bar-container {
    display: inline-block;
    width: 60px;
    height: 6px;
    background: #222;
    border: 1px solid #444;
    vertical-align: middle;
    margin: 0 4px;
}

.stat-bar {
    display: block;
    height: 100%;
    background: #0a8;
    transition: width 0.3s;
}

.stress-bar {
    background: #f60;
}

.inspect-task {
    color: #ddd;
    margin: 4px 0;
}

.inspect-mood {
    color: #aaa;
    margin: 4px 0;
    font-style: italic;
}

.inspect-history {
    color: #666;
    margin: 4px 0;
    font-size: 10px;
}

.inspect-connections {
    color: #aaa;
    margin: 4px 0;
}

.inspect-risk {
    color: #fa0;
    margin: 4px 0;
}

.inspect-warning {
    color: #fa0;
    font-weight: bold;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid #333;
}

/* ============================================================================
   PAUSE & SPEED CONTROL BAR
   ============================================================================ */

#control-bar {
    position: fixed;
    bottom: 20px;
    left: 20px;
    background: rgba(0, 0, 0, 0.92);
    border: 1px solid #0ff;
    padding: 5px 10px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 200;
    user-select: none;
}

#pause-indicator {
    color: #f33;
    font-weight: bold;
    margin-right: 6px;
    display: none;
}

.ctrl-sep {
    color: #444;
}

.speed-btn {
    background: none;
    border: 1px solid #0aa;
    border-radius: 2px;
    color: #888;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    padding: 2px 6px;
    cursor: pointer;
    line-height: 1;
}

.speed-btn:hover {
    background: rgba(0, 255, 255, 0.08);
    color: #ddd;
    border-color: #0ff;
}

.speed-btn.active {
    background: rgba(0, 255, 255, 0.15);
    color: #0ff;
    border-color: #0ff;
}

/* Paused overlay — centered over the game grid */
#paused-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.38);
    color: #888;
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    letter-spacing: 6px;
    pointer-events: none;
    z-index: 50;
}

/* Role-specific trail and character colors */
.trail-gatherer { color: #ff9; }
.trail-maintainer { color: #0ff; }
.trail-builder { color: #f90; }
.trail-explorer { color: #b0f; }

.role-gatherer { color: #ff9; }
.role-maintainer { color: #0ff; }
.role-builder { color: #f90; }
.role-explorer { color: #b0f; }

/* Node stability colors (warm = unstable, cool = stable) */
.node-stable { color: #0af; text-shadow: 0 0 4px #0af; }
.node-active { color: #0ff; text-shadow: 0 0 6px #0ff; }
.node-unstable { color: #f60; text-shadow: 0 0 5px #f60; }
.node-critical { color: #f33; text-shadow: 0 0 8px #f33; }

/* Stress glow effect for overwhelmed shardlings */
.glow-stress {
    animation: glowPulse 1.5s infinite;
}

@keyframes glowPulse {
    0%, 100% { text-shadow: 0 0 3px #f60; }
    50% { text-shadow: 0 0 10px #f90; }
}

/* Pre-death danger glow: shardling is dangerously crowded */
.glow-danger {
    animation: glowDanger 0.3s infinite;
}

@keyframes glowDanger {
    0%, 100% { text-shadow: 0 0 3px #f33; }
    50% { text-shadow: 0 0 10px #f00; }
}

/* Flicker for unstable nodes */
.flicker {
    animation: flicker 0.4s infinite;
}

@keyframes flicker {
    0%, 100% { opacity: 1; }
    25% { opacity: 0.7; }
    50% { opacity: 1; }
    75% { opacity: 0.6; }
}

/* Pulse for high-resonance nodes */
.pulse {
    animation: pulse 2s infinite ease-in-out;
}

@keyframes pulse {
    0%, 100% {
        text-shadow: 0 0 4px currentColor;
        transform: scale(1);
    }
    50% {
        text-shadow: 0 0 12px currentColor;
        transform: scale(1.1);
    }
}

/* Ghost node preview — shown on hover when player can afford a node */
.node-ghost {
    color: #0ff;
    opacity: 0.5;
    box-shadow: none;
    text-shadow: none;
}

.node-ghost-invalid {
    color: #f33;
    opacity: 0.5;
    box-shadow: none;
    text-shadow: none;
}

/* Dashed path line from ghost position to nearest node */
.ghost-path {
    color: #555;
}

/* Void Intrusion — crisis event that drains nearby nodes */
.void-intrusion {
    color: #f00;
    font-weight: bold;
    animation: voidFlare 0.45s infinite;
}

.void-intrusion-dim {
    color: #700;
}

@keyframes voidFlare {
    0%, 100% { color: #f44; text-shadow: 0 0 4px #f00; }
    50%       { color: #f00; text-shadow: 0 0 14px #f22; }
}

/* Recruit button accent */
.recruit-btn {
    color: #ff9 !important;
    border-color: #aa7 !important;
}
.recruit-btn:hover {
    background: rgba(255,240,100,0.1) !important;
    border-color: #ff9 !important;
}

/* ============================================================================
   TUTORIAL OVERLAY
   ============================================================================ */

#tutorial-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    font-family: 'Courier New', Courier, monospace;
}

#tutorial-modal {
    width: 60%;
    max-width: 720px;
    min-width: 320px;
    background: #0a0a0a;
    border: 2px solid #0ff;
    box-shadow: 0 0 28px rgba(0, 255, 255, 0.22);
    padding: 30px 36px;
    color: #ccc;
}

.tutorial-page-indicator {
    color: #444;
    font-size: 11px;
    text-align: right;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.tutorial-title {
    color: #0ff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 20px;
    border-bottom: 1px solid #1a3a3a;
    padding-bottom: 10px;
}

.tutorial-body {
    font-size: 13px;
    line-height: 1.85;
    color: #bbb;
    min-height: 120px;
}

.tutorial-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    border-top: 1px solid #1a3a3a;
    padding-top: 14px;
}

.tutorial-nav-spacer {
    flex: 1;
}

.tutorial-btn {
    background: none;
    border: 1px solid #0aa;
    color: #0cc;
    font-family: 'Courier New', Courier, monospace;
    font-size: 12px;
    padding: 4px 12px;
    cursor: pointer;
    letter-spacing: 1px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.tutorial-btn:hover {
    background: rgba(0, 255, 255, 0.12);
    color: #fff;
    border-color: #0ff;
}

.tutorial-btn-close {
    border-color: #555;
    color: #888;
}

.tutorial-btn-close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #ccc;
    border-color: #888;
}