* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #050510; color: #c0c0d0; font-family: 'Courier New', monospace; min-height: 100vh; overflow: hidden; }
.hidden { display: none !important; }

#app { display: flex; background: #0a0a1a; border: 1px solid #2a2a4a; border-radius: 4px; overflow: hidden; transform-origin: top left; position: absolute; top: 0; left: 0; }
#game-area { display: flex; flex-direction: column; }
#game-container { position: relative; width: 1260px; height: 800px; }
#game-container canvas { position: absolute; top: 0; left: 0; width: 1260px; height: 800px; touch-action: none; }

/* === 8-BIT ARCADE TICKER === */
@font-face {
    font-family: 'Pixel';
    src: url('data:font/woff2;base64,') format('woff2');
}
#ticker {
    width: 1260px; height: 38px; position: relative; overflow: hidden;
    background: #000000;
    border-bottom: 1px solid #111;
    border-top: 1px solid #111;
}
/* Pixel grid overlay — simulates LED dot matrix */
#ticker::before {
    content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image:
        linear-gradient(rgba(0,0,0,0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.15) 1px, transparent 1px);
    background-size: 3px 3px;
    pointer-events: none; z-index: 2;
}
#ticker-track {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    white-space: nowrap; z-index: 1;
    transition: opacity 0.15s;
}
/* Centered flash text — takes over the whole ticker */
#ticker-center {
    position: absolute; top: 0; left: 0; width: 100%; height: 38px;
    display: flex; align-items: center; justify-content: center;
    z-index: 4; pointer-events: none; opacity: 0;
}
.ticker-center-text {
    font-family: 'Courier New', monospace;
    font-size: 22px; font-weight: bold;
    letter-spacing: 3px; text-transform: uppercase;
    white-space: nowrap; text-align: center;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
}
.ticker-center-alert {
    color: #ffbb00;
    text-shadow:
        0 0 4px #ffbb00,
        0 0 12px rgba(255,187,0,0.8),
        0 0 30px rgba(255,187,0,0.3),
        0 0 50px rgba(255,187,0,0.1);
}
.ticker-center-critical {
    color: #ff2244;
    text-shadow:
        0 0 6px #ff2244,
        0 0 16px rgba(255,34,68,0.9),
        0 0 40px rgba(255,34,68,0.4),
        0 0 60px rgba(255,34,68,0.15);
}
#ticker-flash {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 3; opacity: 0;
}
.ticker-flash-alert { animation: ticker-flash-amber 0.5s ease-out forwards; }
.ticker-flash-critical { animation: ticker-flash-red 0.8s ease-out forwards; }
@keyframes ticker-flash-amber {
    0% { opacity: 1; background: rgba(255,187,0,0.35); }
    40% { opacity: 0.6; background: rgba(255,187,0,0.1); }
    100% { opacity: 0; }
}
@keyframes ticker-flash-red {
    0% { opacity: 1; background: rgba(255,30,30,0.5); }
    20% { opacity: 0.5; background: rgba(255,30,30,0.1); }
    40% { opacity: 1; background: rgba(255,30,30,0.35); }
    60% { opacity: 0.3; background: rgba(255,30,30,0.05); }
    100% { opacity: 0; }
}
@keyframes ticker-flash-gold {
    0% { opacity: 1; background: rgba(255,221,68,0.5); }
    20% { opacity: 0.5; background: rgba(255,221,68,0.1); }
    40% { opacity: 1; background: rgba(255,221,68,0.4); }
    60% { opacity: 0.3; background: rgba(255,221,68,0.05); }
    80% { opacity: 0.6; background: rgba(255,221,68,0.15); }
    100% { opacity: 0; }
}

/* Base message — pixelated arcade text filling the bar */
.ticker-message {
    position: absolute; top: 0;
    height: 38px; line-height: 38px;
    font-family: 'Courier New', monospace;
    font-size: 22px; font-weight: bold;
    letter-spacing: 3px;
    white-space: nowrap;
    animation-fill-mode: forwards;
    pointer-events: none;
    text-transform: uppercase;
    /* Pixelated rendering */
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
    text-rendering: optimizeSpeed;
    image-rendering: pixelated;
}

/* INFO — cool blue pixel glow */
.ticker-info {
    color: #44aaff;
    text-shadow:
        0 0 2px #44aaff,
        0 0 8px rgba(68,170,255,0.6),
        0 0 20px rgba(68,170,255,0.15);
}
/* LORE — dim green phosphor, old terminal feel */
.ticker-lore {
    color: #33cc66;
    text-shadow:
        0 0 2px #33cc66,
        0 0 6px rgba(51,204,102,0.4),
        0 0 15px rgba(51,204,102,0.1);
    letter-spacing: 4px;
}
/* ALERT — hot amber, pulsing */
.ticker-alert {
    color: #ffbb00;
    text-shadow:
        0 0 3px #ffbb00,
        0 0 10px rgba(255,187,0,0.7),
        0 0 25px rgba(255,187,0,0.25),
        0 0 40px rgba(255,187,0,0.08);
    animation: ticker-scroll var(--dur, 20s) linear forwards, ticker-pulse-amber 0.8s ease-in-out infinite;
}
/* CRITICAL — neon red, aggressive pulse */
.ticker-critical {
    color: #ff2244;
    text-shadow:
        0 0 4px #ff2244,
        0 0 12px rgba(255,34,68,0.8),
        0 0 30px rgba(255,34,68,0.35),
        0 0 50px rgba(255,34,68,0.12);
    animation: ticker-scroll var(--dur, 20s) linear forwards, ticker-pulse-red 0.4s ease-in-out infinite;
}

@keyframes ticker-pulse-amber {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
@keyframes ticker-pulse-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(var(--end) - var(--start))); }
}

#sidebar { width: 220px; height: 838px; max-height: 838px; background: #0d0d20; border-left: 1px solid #2a2a4a; padding: 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
#game-title { font-size: 18px; font-weight: bold; text-align: center; color: #fff; text-shadow: 0 0 20px rgba(100,100,255,0.5); letter-spacing: 3px; padding-bottom: 8px; border-bottom: 1px solid #2a2a4a; }

#stats { display: flex; flex-direction: column; gap: 4px; }
.stat { display: flex; justify-content: space-between; align-items: center; padding: 3px 8px; background: #111128; border-radius: 4px; border: 1px solid #1a1a3a; }
.stat-label { font-size: 10px; color: #666; letter-spacing: 2px; }
.stat-value { font-size: 16px; font-weight: bold; color: #fff; }
#lives-value { color: #ff4444; } #lumens-value { color: #ffdd44; } #wave-value { color: #44aaff; }

#tower-panel { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.panel-title { font-size: 10px; color: #666; letter-spacing: 2px; margin-bottom: 4px; flex-shrink: 0; }
#tower-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.tower-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; background: #111128; border: 1px solid #2a2a4a; border-radius: 4px; color: #c0c0d0; font-family: 'Courier New', monospace; font-size: 10px; cursor: pointer; transition: all 0.15s; text-align: center; }
.tower-btn:hover { background: #1a1a3a; border-color: #4a4a6a; }
.tower-btn.selected { border-color: #fff; background: #1a1a40; box-shadow: 0 0 10px rgba(100,100,255,0.3); }
.tower-btn.disabled { opacity: 0.4; cursor: not-allowed; }
.tower-icon { width: 18px; height: 18px; border-radius: 3px; border: 2px solid; }
.tower-info { display: flex; flex-direction: column; align-items: center; }
.tower-name { font-size: 9px; color: #ddd; }
.tower-cost { font-size: 9px; color: #ffdd44; }
.tower-desc { display: none; }

#wave-controls { display: flex; gap: 6px; }
#send-wave-btn { flex: 1; padding: 8px; background: #1a1a40; border: 1px solid #4444aa; border-radius: 4px; color: #aaaaff; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; letter-spacing: 1px; cursor: pointer; transition: all 0.15s; }
#send-wave-btn:hover { background: #2a2a60; border-color: #6666cc; color: #ccccff; box-shadow: 0 0 15px rgba(100,100,255,0.3); }
#send-wave-btn.disabled { opacity: 0.4; cursor: not-allowed; }
#send-wave-btn.early-wave { border-color: #aaaa44; color: #ffdd44; }
#send-wave-btn.early-wave:hover { background: #2a2a20; border-color: #dddd66; box-shadow: 0 0 15px rgba(255,221,68,0.2); }
#speed-btn { width: 44px; padding: 8px 0; background: #1a1a40; border: 1px solid #4444aa; border-radius: 4px; color: #aaaaff; font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.15s; }
#speed-btn:hover { background: #2a2a60; border-color: #6666cc; }

/* Ability bar */
#ability-controls { display: flex; flex-direction: column; gap: 3px; }
.ability-slot { display: flex; gap: 2px; }
.ability-btn { flex: 1; position: relative; padding: 5px 6px; background: #111120; border: 1px solid #333; border-radius: 4px; color: #aaa; font-family: 'Courier New', monospace; font-size: 9px; font-weight: bold; cursor: pointer; transition: all 0.15s; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.ability-btn:hover:not(.on-cooldown):not(.locked) { background: #1a1a30; }
.ability-btn.active { border-color: #fff; color: #fff; box-shadow: 0 0 10px rgba(255,255,255,0.2); }
.ability-btn.on-cooldown { opacity: 0.6; cursor: not-allowed; color: #666; }
.ability-btn.locked { opacity: 0.35; cursor: pointer; border-color: #222; }
.ability-name { font-size: 9px; z-index: 1; }
.ability-hotkey { position: absolute; top: 3px; right: 5px; font-size: 8px; color: #555; z-index: 1; }
.ability-level { font-size: 8px; color: #888; z-index: 1; }
.ability-cd-overlay { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.5); display: none; z-index: 0; }
.ability-duration-bar { position: absolute; bottom: 0; left: 0; height: 2px; display: none; z-index: 0; }
.ability-upgrade-btn { width: 22px; padding: 0; background: #1a2a1a; border: 1px solid #336633; border-radius: 4px; color: #88ff88; font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.15s; }
.ability-upgrade-btn:hover:not(.disabled) { background: #2a3a2a; box-shadow: 0 0 8px rgba(100,255,100,0.2); }
.ability-upgrade-btn.disabled { opacity: 0.3; cursor: not-allowed; }

/* Ability upgrade popup */
#ability-upgrade-popup { position: absolute; right: 12px; width: 196px; background: #0d0d20; border: 1px solid #4444aa; border-radius: 6px; padding: 10px; z-index: 50; box-shadow: 0 0 20px rgba(0,0,0,0.8); }
.ability-popup-title { font-size: 12px; font-weight: bold; margin-bottom: 4px; }
.ability-popup-desc { font-size: 9px; color: #777; margin-bottom: 6px; }
.ability-popup-stats { font-size: 9px; color: #aaa; margin-bottom: 4px; }
.ability-popup-buy { width: 100%; padding: 6px; background: #1a2a1a; border: 1px solid #448844; border-radius: 4px; color: #88ff88; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; cursor: pointer; transition: all 0.15s; }
.ability-popup-buy:hover:not(.disabled) { background: #2a3a2a; box-shadow: 0 0 10px rgba(100,255,100,0.2); }
.ability-popup-buy.disabled { opacity: 0.4; cursor: not-allowed; }

#info-panel { height: 80px; overflow-y: auto; font-size: 11px; color: #555; line-height: 1.6; flex-shrink: 0; }
#info-panel p { margin-bottom: 3px; }

/* Tower info */
#tower-info { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; min-height: 0; }
#tower-info-name { font-size: 13px; font-weight: bold; }
#tower-info-stats { font-size: 10px; color: #aaa; }
.stat-row { display: flex; justify-content: space-between; padding: 1px 0; }
#upgrade-desc { font-size: 9px; color: #777; font-style: italic; }
.t3-desc { font-size: 9px; color: #777; font-style: italic; margin-bottom: 4px; }
.t3-btn { background: #1a2a1a; border: 1px solid #448844; color: #88ff88; font-size: 11px; }
.t3-btn:hover:not(.disabled) { background: #2a3a2a; box-shadow: 0 0 10px rgba(100,255,100,0.2); }

/* Tower powerup list */
#tower-powerups { font-size: 9px; padding: 4px 0; border-top: 1px solid #1a1a3a; }
.tower-powerup-item { padding: 1px 0; }
.tower-powerup-pending { color: #ffdd44; font-weight: bold; animation: pulse-text 1.5s ease-in-out infinite; }
@keyframes pulse-text { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }

.action-btn { width: 100%; padding: 6px; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold; border-radius: 4px; cursor: pointer; transition: all 0.15s; letter-spacing: 1px; }
.action-btn.disabled { opacity: 0.4; cursor: not-allowed; }
#upgrade-btn { background: #2a2a10; border: 1px solid #888844; color: #ffdd44; }
#upgrade-btn:hover:not(.disabled) { background: #3a3a20; box-shadow: 0 0 10px rgba(255,221,68,0.2); }
#sell-btn { background: #2a1010; border: 1px solid #884444; color: #ff6644; }
#sell-btn:hover { background: #3a2020; box-shadow: 0 0 10px rgba(255,100,68,0.2); }
#deselect-btn { background: #1a1a30; border: 1px solid #3a3a5a; color: #8888aa; }
#deselect-btn:hover { background: #2a2a40; }

/* Powerup overlay */
#powerup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 150; }
#powerup-overlay-inner { text-align: center; padding: 20px; }
#powerup-title { font-size: 16px; font-weight: bold; color: #ffdd44; text-shadow: 0 0 15px rgba(255,221,68,0.4); margin-bottom: 16px; letter-spacing: 2px; }
#powerup-cards { display: flex; gap: 12px; justify-content: center; }
.powerup-card { width: 160px; padding: 16px 12px; background: #0d0d20; border: 2px solid #444; border-radius: 8px; cursor: pointer; transition: all 0.2s; text-align: center; font-family: 'Courier New', monospace; }
.powerup-card:hover { transform: translateY(-4px); box-shadow: 0 4px 20px rgba(100,100,255,0.3); }
.powerup-card.powerup-common { border-color: #aaaaaa; }
.powerup-card.powerup-rare { border-color: #4488ff; }
.powerup-card.powerup-epic { border-color: #aa44ff; }
.powerup-card:hover.powerup-common { box-shadow: 0 4px 20px rgba(170,170,170,0.3); }
.powerup-card:hover.powerup-rare { box-shadow: 0 4px 20px rgba(68,136,255,0.3); }
.powerup-card:hover.powerup-epic { box-shadow: 0 4px 20px rgba(170,68,255,0.4); }
.powerup-rarity { font-size: 8px; letter-spacing: 2px; margin-bottom: 8px; }
.powerup-icon { font-size: 28px; margin-bottom: 8px; }
.powerup-name { font-size: 12px; font-weight: bold; color: #fff; margin-bottom: 6px; }
.powerup-desc { font-size: 10px; color: #888; line-height: 1.4; }

/* Menu */
#menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #050510; display: flex; justify-content: center; align-items: center; z-index: 200; }
#menu-content { text-align: center; padding: 20px; }
#menu-title { font-size: 48px; font-weight: bold; color: #fff; text-shadow: 0 0 30px rgba(100,100,255,0.5); letter-spacing: 5px; margin-bottom: 8px; font-family: 'Courier New', monospace; }
#menu-subtitle { color: #666; font-size: 14px; margin-bottom: 24px; font-family: 'Courier New', monospace; }
#menu-stars-total { color: #ffdd44; font-size: 16px; margin-bottom: 24px; font-family: 'Courier New', monospace; }
#map-select { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.map-card { width: 200px; padding: 24px 20px; background: #0d0d20; border: 1px solid #2a2a4a; border-radius: 8px; cursor: pointer; transition: all 0.2s; font-family: 'Courier New', monospace; text-align: center; }
.map-card:hover:not(.locked) { border-color: #6666cc; box-shadow: 0 0 20px rgba(100,100,255,0.2); transform: translateY(-2px); }
.map-card.locked { opacity: 0.35; cursor: not-allowed; }
.map-name { font-size: 18px; color: #fff; margin-bottom: 8px; }
.map-stars { font-size: 28px; color: #ffdd44; }
.map-locked { font-size: 12px; color: #666; }

/* Overlays */
#game-over-overlay, #victory-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); display: flex; justify-content: center; align-items: center; z-index: 100; }
#game-over-content, #victory-content { text-align: center; padding: 40px; }
#game-over-content h1 { font-size: 48px; color: #ff4444; font-family: 'Courier New', monospace; text-shadow: 0 0 30px rgba(255,50,50,0.5); margin-bottom: 16px; }
#game-over-content p { font-size: 18px; font-family: 'Courier New', monospace; color: #aaa; margin-bottom: 24px; }
#victory-content h1 { font-size: 48px; color: #ffdd44; font-family: 'Courier New', monospace; text-shadow: 0 0 30px rgba(255,221,68,0.5); margin-bottom: 16px; }
#star-display { font-size: 48px; color: #ffdd44; margin-bottom: 16px; }
#victory-info { font-size: 16px; font-family: 'Courier New', monospace; color: #aaa; margin-bottom: 24px; }
.overlay-btn { display: block; width: 240px; margin: 8px auto; padding: 12px; background: #1a1a40; border: 1px solid #4444aa; border-radius: 4px; color: #aaaaff; font-family: 'Courier New', monospace; font-size: 14px; font-weight: bold; letter-spacing: 2px; cursor: pointer; transition: all 0.15s; }
.overlay-btn:hover { background: #2a2a60; border-color: #6666cc; color: #ccccff; box-shadow: 0 0 15px rgba(100,100,255,0.3); }

/* Branding */
.brand-menu { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 32px; text-decoration: none; opacity: 0.6; transition: opacity 0.2s; }
.brand-menu:hover { opacity: 1; }
.brand-logo { width: 60px; height: auto; filter: invert(1); }
.brand-tagline { font-size: 11px; color: #666; font-family: 'Courier New', monospace; }
.brand-credit { display: block; text-align: center; margin-top: auto; padding-top: 6px; opacity: 0.4; transition: opacity 0.2s; }
.brand-credit:hover { opacity: 0.8; }
.brand-logo-sm { width: 36px; height: auto; filter: invert(1); }

/* How to Play button on menu */
.how-to-play-btn { margin-top: 16px; width: 200px; background: transparent; border-color: #444488; color: #8888bb; font-size: 12px; letter-spacing: 1px; }
.how-to-play-btn:hover { border-color: #6666cc; color: #aaaaee; }

/* === Tutorial Overlay === */
#tutorial-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(2,2,8,0.92); display: flex; justify-content: center; align-items: center; z-index: 250; }
#tutorial-panel {
    width: 720px; max-height: 80vh;
    background: #0a0a1a; border: 1px solid #2a2a5a; border-radius: 8px;
    box-shadow: 0 0 40px rgba(60,60,180,0.15), 0 0 80px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; overflow: hidden;
    font-family: 'Courier New', monospace;
}
#tutorial-content { padding: 28px 32px 16px; overflow-y: auto; flex: 1; }
.tutorial-title {
    font-size: 18px; font-weight: bold; color: #fff; letter-spacing: 3px; text-align: center;
    text-shadow: 0 0 15px rgba(100,100,255,0.4);
    margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #1a1a3a;
}
.tutorial-sections { display: flex; flex-direction: column; gap: 16px; }
.tutorial-section { display: flex; gap: 14px; align-items: flex-start; }
.tutorial-section-icon { font-size: 22px; width: 32px; text-align: center; flex-shrink: 0; color: #6688cc; margin-top: 2px; }
.tutorial-section-body { flex: 1; }
.tutorial-section-heading { font-size: 12px; font-weight: bold; color: #aabbdd; letter-spacing: 2px; margin-bottom: 4px; }
.tutorial-section-text { font-size: 11px; color: #8899aa; line-height: 1.7; }

/* Tutorial footer */
#tutorial-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 24px; border-top: 1px solid #1a1a3a; background: #08081a;
}
#tutorial-footer-left { display: flex; align-items: center; }
.tutorial-dont-show-label {
    font-size: 10px; color: #555; cursor: pointer; display: flex; align-items: center; gap: 6px;
    user-select: none;
}
.tutorial-dont-show-label input { cursor: pointer; accent-color: #4444aa; }
#tutorial-page-indicator { display: flex; gap: 8px; }
.tutorial-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #222244; cursor: pointer;
    transition: all 0.2s; border: 1px solid #333355;
}
.tutorial-dot.active { background: #4466cc; border-color: #6688ee; box-shadow: 0 0 6px rgba(68,102,204,0.5); }
.tutorial-dot:hover:not(.active) { background: #333366; }
#tutorial-footer-right { display: flex; gap: 8px; }
.tutorial-btn {
    padding: 7px 16px; font-family: 'Courier New', monospace; font-size: 11px; font-weight: bold;
    letter-spacing: 1px; border-radius: 4px; cursor: pointer; transition: all 0.15s;
    background: #111130; border: 1px solid #3a3a6a; color: #8888cc;
}
.tutorial-btn:hover { background: #1a1a40; border-color: #5555aa; color: #aaaaee; }
.tutorial-next-btn { background: #1a1a50; border-color: #4444aa; color: #aaaaff; }
.tutorial-next-btn:hover { background: #2a2a60; border-color: #6666cc; box-shadow: 0 0 10px rgba(100,100,255,0.2); }
.tutorial-start-btn { background: #1a3a1a; border-color: #44aa44; color: #88ff88; }
.tutorial-start-btn:hover { background: #2a4a2a; border-color: #66cc66; box-shadow: 0 0 10px rgba(100,255,100,0.2); }
.tutorial-skip-btn { background: transparent; border-color: #333; color: #555; }
.tutorial-skip-btn:hover { color: #888; border-color: #555; }

/* === In-Game Guide Overlay === */
#guide-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 180; cursor: pointer;
    /* Semi-transparent overlay with pointer-events */
    background: rgba(0,0,0,0.55);
}
#guide-highlight {
    position: absolute; display: none;
    border: 2px solid #ffdd44;
    border-radius: 6px;
    box-shadow: 0 0 0 4000px rgba(0,0,0,0.55), 0 0 20px rgba(255,221,68,0.5), inset 0 0 15px rgba(255,221,68,0.15);
    z-index: 181;
    pointer-events: none;
    animation: guide-pulse 1.5s ease-in-out infinite;
    /* Cut out the overlay darkness in this area */
    background: transparent;
}
@keyframes guide-pulse {
    0%, 100% { border-color: rgba(255,221,68,0.8); box-shadow: 0 0 0 4000px rgba(0,0,0,0.55), 0 0 20px rgba(255,221,68,0.5), inset 0 0 15px rgba(255,221,68,0.15); }
    50% { border-color: rgba(255,221,68,1); box-shadow: 0 0 0 4000px rgba(0,0,0,0.55), 0 0 30px rgba(255,221,68,0.8), inset 0 0 20px rgba(255,221,68,0.25); }
}
#guide-arrow {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 182; pointer-events: none;
    filter: drop-shadow(0 0 4px rgba(255,221,68,0.4));
}
#guide-arrow-path { stroke-dasharray: 6 4; }
#guide-tooltip {
    position: absolute;
    width: 380px; max-width: 90%;
    background: #0a0a20;
    border: 1px solid #3344aa;
    border-radius: 8px;
    padding: 18px 20px 12px;
    box-shadow: 0 0 30px rgba(50,60,180,0.3), 0 4px 20px rgba(0,0,0,0.6);
    z-index: 182;
    pointer-events: auto;
}
#guide-text {
    font-family: 'Courier New', monospace;
    font-size: 13px; color: #c0c8e0;
    line-height: 1.7; letter-spacing: 0.3px;
    white-space: pre-wrap;
}
#guide-footer {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid #1a1a3a;
    gap: 10px;
}
#guide-step {
    font-family: 'Courier New', monospace; font-size: 10px; color: #555;
    letter-spacing: 1px; white-space: nowrap;
}
.guide-dont-show-label {
    font-family: 'Courier New', monospace; font-size: 9px; color: #444;
    display: flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; white-space: nowrap;
}
.guide-dont-show-label input { cursor: pointer; accent-color: #4444aa; }
.guide-skip-btn {
    padding: 5px 12px; font-family: 'Courier New', monospace; font-size: 10px;
    font-weight: bold; letter-spacing: 1px; border-radius: 4px; cursor: pointer;
    background: transparent; border: 1px solid #444; color: #666;
    transition: all 0.15s; white-space: nowrap;
}
.guide-skip-btn:hover { color: #aaa; border-color: #777; }