* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    background: #0a0e1a;
    color: #e0e0e0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
}

.screen { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; }
.screen.hidden { display: none; }

/* ===== MENU ===== */
#menu-screen h1 { font-size: 2.5rem; color: #4fc3f7; margin-bottom: 0.3rem; }
.subtitle { color: #78909c; margin-bottom: 2rem; font-size: 1.1rem; }

#level-select { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.level-card {
    background: #1a2332;
    border: 2px solid #2a3a4a;
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    width: 200px;
    text-align: center;
}
.level-card:hover { border-color: #4fc3f7; background: #1e2d42; transform: translateY(-2px); }
.level-card.locked { opacity: 0.4; cursor: not-allowed; }
.level-card.completed { border-color: #66bb6a; }
.level-card h3 { color: #4fc3f7; margin-bottom: 0.5rem; }
.level-card .level-info { font-size: 0.85rem; color: #78909c; }
.level-card .level-stars { color: #ffd54f; font-size: 1.2rem; margin-top: 0.5rem; }

.menu-footer { margin-top: 2rem; display: flex; gap: 1rem; }
.menu-footer button { background: #1a2332; color: #78909c; border: 1px solid #2a3a4a; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; }
.menu-footer button:hover { color: #e0e0e0; border-color: #4fc3f7; }

/* ===== GAME SCREEN ===== */
#game-screen { justify-content: flex-start; padding: 0; }

#top-bar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.4rem 1rem;
    background: #111827;
    border-bottom: 1px solid #1e293b;
    width: 100%;
    height: 44px;
    flex-shrink: 0;
}
.stat { display: flex; align-items: center; gap: 0.4rem; font-size: 1rem; font-weight: bold; }
.stat span:first-child { font-size: 1.2rem; }
#gold { color: #ffd54f; }
#hp { color: #ef5350; }
#wave { color: #4fc3f7; }

.controls { margin-left: auto; display: flex; gap: 0.5rem; }
.controls button {
    background: #1e293b; color: #e0e0e0; border: 1px solid #334155;
    padding: 0.3rem 0.8rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
}
.controls button:hover { background: #334155; }
.controls button.active { background: #4fc3f7; color: #0a0e1a; font-weight: bold; }

#game-area {
    display: flex;
    flex: 1;
    width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}

/* BAG-PLAY-04: lock display aspect to 960×640; letterbox/center — no flex stretch */
#game-canvas {
    flex: none;
    display: block;
    width: 960px;
    height: 640px;
    max-width: 100%;
    max-height: calc(100vh - 140px);
    margin: 0 auto;
    object-fit: contain;
    cursor: crosshair;
    background: #1a1208;
}

#info-panel {
    width: 220px;
    background: #111827;
    border-left: 1px solid #1e293b;
    padding: 0.8rem;
    overflow-y: auto;
    flex-shrink: 0;
}
#info-panel.hidden { display: none; }
#info-panel h3 { color: #4fc3f7; margin-bottom: 0.5rem; font-size: 1rem; }
#info-stats { font-size: 0.85rem; line-height: 1.6; margin-bottom: 0.8rem; }
#info-stats .stat-row { display: flex; justify-content: space-between; }
#info-stats .stat-label { color: #78909c; }
#info-stats .stat-value { color: #e0e0e0; font-weight: bold; }

#info-actions { display: flex; flex-direction: column; gap: 0.4rem; }
#info-actions button {
    padding: 0.5rem; border-radius: 6px; cursor: pointer; font-size: 0.85rem;
    border: 1px solid; font-weight: bold;
}
.btn-upgrade { background: #1b5e20; color: #a5d6a7; border-color: #2e7d32 !important; }
.btn-upgrade:hover { background: #2e7d32; }
.btn-upgrade:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sell { background: #4a1a1a; color: #ef9a9a; border-color: #7a2020 !important; }
.btn-sell:hover { background: #7a2020; }

#bottom-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    background: #111827;
    border-top: 1px solid #1e293b;
    width: 100%;
    height: 64px;
    flex-shrink: 0;
    overflow-x: auto;
}

.tower-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a2332;
    border: 2px solid #2a3a4a;
    border-radius: 8px;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
    min-width: 70px;
    transition: all 0.15s;
}
.tower-btn:hover { border-color: #4fc3f7; background: #1e2d42; }
.tower-btn.selected { border-color: #4fc3f7; background: #1e3050; }
.tower-btn.disabled { opacity: 0.35; cursor: not-allowed; }
.tower-btn .tower-icon { font-size: 1.4rem; }
.tower-btn .tower-name { font-size: 0.65rem; color: #90a4ae; }
.tower-btn .tower-cost { font-size: 0.75rem; color: #ffd54f; font-weight: bold; }

.tower-group-label {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--accent, #4fc3f7);
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.4rem;
    text-transform: uppercase;
    background: rgba(79, 195, 247, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(79, 195, 247, 0.2);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    flex-shrink: 0;
    height: auto;
    margin-right: 2px;
}
.tower-icon-img {
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 0 4px rgba(255,255,255,0.2));
    width: 24px;
    height: 24px;
}
.tower-btn:hover .tower-icon-img {
    filter: drop-shadow(0 0 8px rgba(79, 195, 247, 0.5));
}

/* ===== RESULT ===== */
#result-screen h1 { font-size: 2rem; margin-bottom: 1rem; }
#result-screen .win { color: #66bb6a; }
#result-screen .lose { color: #ef5350; }
#result-stats { margin-bottom: 1.5rem; text-align: center; line-height: 2; }
#result-screen button {
    background: #1e293b; color: #e0e0e0; border: 1px solid #334155;
    padding: 0.7rem 2rem; border-radius: 8px; cursor: pointer; font-size: 1rem; margin: 0.3rem;
}
#result-screen button:hover { background: #334155; }

/* ===== HOW TO PLAY ===== */
#how-screen h1 { margin-bottom: 1.5rem; }
.how-content { max-width: 500px; line-height: 2; text-align: left; margin-bottom: 1.5rem; }
#how-screen button { background: #1e293b; color: #e0e0e0; border: 1px solid #334155; padding: 0.5rem 1.5rem; border-radius: 6px; cursor: pointer; }

/* ===== LAB UI ===== */
.lab-grid {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    max-width: 800px;
    justify-content: center;
}
.upgrade-card {
    background: #1a2332;
    padding: 1.5rem;
    border: 1px solid #2a3a4a;
    border-radius: 12px;
    text-align: center;
    width: 240px;
    transition: all 0.2s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
}
.upgrade-card:hover {
    transform: translateY(-5px);
    border-color: #4fc3f7;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.upgrade-card h3 {
    color: #4fc3f7;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
}
.upgrade-card p {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
    color: #78909c;
}
.btn-buy-upgrade {
    padding: 0.7rem;
    background: #1b5e20;
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
    transition: background 0.2s;
}
.btn-buy-upgrade:hover {
    background: #2e7d32;
}

/* ===== NOTIFICATIONS ===== */
.notification {
    position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
    background: #1e293b; border: 1px solid #334155; border-radius: 8px;
    padding: 0.6rem 1.5rem; color: #4fc3f7; font-weight: bold;
    animation: notif 2s ease-out forwards; z-index: 100;
}
@keyframes notif { 0% { opacity: 1; top: 60px; } 70% { opacity: 1; } 100% { opacity: 0; top: 30px; } }