@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Share+Tech+Mono&display=swap');

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

body {
    background:#0a0a14; color:#d0d0e0;
    font-family:'Share Tech Mono','Courier New',monospace;
    min-height:100vh; display:flex; justify-content:center; align-items:flex-start;
    background-image:
        radial-gradient(ellipse at 20% 80%, rgba(0,255,200,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(255,0,100,0.03) 0%, transparent 50%);
    overflow:hidden;
}

/* Scanline overlay */
body::after {
    content:''; position:fixed; top:0; left:0; width:100%; height:100%;
    background: repeating-linear-gradient(
        0deg, transparent, transparent 2px, rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
    );
    pointer-events:none; z-index:9999;
}

.hidden { display:none !important; }

/* ===== MENU SCREEN ===== */
#menu-screen {
    display:flex; justify-content:center; align-items:center;
    min-height:100vh; width:100%; padding:10px;
}
.menu-box {
    background:linear-gradient(135deg, rgba(10,10,30,0.95), rgba(15,20,50,0.95));
    border:1px solid rgba(0,255,200,0.15);
    border-radius:4px; padding:40px 50px;
    text-align:center; max-width:420px; width:100%;
    box-shadow: 0 0 30px rgba(0,255,200,0.05), inset 0 0 60px rgba(0,0,0,0.3);
    position:relative;
}
.menu-box::before, .menu-box::after {
    content:''; position:absolute; width:20px; height:20px;
    border-color:rgba(0,255,200,0.4); border-style:solid;
}
.menu-box::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.menu-box::after { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

.menu-title {
    font-family:'Orbitron',sans-serif; font-weight:900;
    font-size:2.4em; letter-spacing:3px; text-transform:uppercase;
    background:linear-gradient(135deg,#00ffc8,#ff0066);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    text-shadow:none;
    filter: drop-shadow(0 0 8px rgba(0,255,200,0.3));
}
.menu-sub {
    color:rgba(0,255,200,0.5); margin-bottom:24px;
    font-size:.75em; line-height:1.4; letter-spacing:1px; text-transform:uppercase;
}
.menu-section { margin-top:16px; display:flex; flex-direction:column; gap:10px; }
.menu-back-btn {
    display:inline-flex; align-items:center; gap:4px;
    background:none; border:none; color:rgba(0,255,200,0.5); cursor:pointer;
    font-family:'Share Tech Mono',monospace;
    font-size:.85em; padding:4px 0; margin-bottom:4px;
    transition:color .2s;
}
.menu-back-btn:hover { color:#00ffc8; }
.menu-btn {
    padding:12px 24px; border:1px solid rgba(255,255,255,0.1); border-radius:2px; cursor:pointer;
    font-family:'Orbitron',sans-serif; font-size:.8em; font-weight:600;
    letter-spacing:1px; text-transform:uppercase;
    transition:all .2s;
    background:rgba(255,255,255,0.03); color:#8899aa;
    position:relative; overflow:hidden;
}
.menu-btn::before {
    content:''; position:absolute; top:0; left:-100%; width:100%; height:100%;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
    transition:left .4s;
}
.menu-btn:hover::before { left:100%; }
.menu-btn:hover { background:rgba(255,255,255,0.06); border-color:rgba(255,255,255,0.2); color:#ccc; }

.menu-btn.primary {
    background:linear-gradient(135deg, rgba(0,255,200,0.15), rgba(0,200,255,0.1));
    border-color:rgba(0,255,200,0.4); color:#00ffc8;
}
.menu-btn.primary:hover {
    background:linear-gradient(135deg, rgba(0,255,200,0.25), rgba(0,200,255,0.15));
    box-shadow:0 0 15px rgba(0,255,200,0.15); color:#00ffdc;
}
.menu-btn.tutorial {
    background:rgba(180,0,255,0.12); border-color:rgba(180,0,255,0.35); color:#c77dff;
}
.menu-btn.tutorial:hover {
    background:rgba(180,0,255,0.2); box-shadow:0 0 15px rgba(180,0,255,0.15);
}

.difficulty-row { display:flex; justify-content:center; gap:8px; margin:8px 0; }
.diff-btn {
    width:40px; height:40px; border-radius:2px; border:1px solid rgba(0,255,200,0.3);
    background:transparent; color:rgba(0,255,200,0.6); font-weight:bold; font-size:1.1em;
    cursor:pointer; transition:all .2s; font-family:'Orbitron',sans-serif;
}
.diff-btn:hover { background:rgba(0,255,200,.1); border-color:rgba(0,255,200,0.5); }
.diff-btn.selected { background:rgba(0,255,200,0.2); color:#00ffc8; border-color:#00ffc8; box-shadow:0 0 10px rgba(0,255,200,0.2); }
.diff-desc { font-size:.85em; color:rgba(0,255,200,0.35); min-height:20px; }
label { color:rgba(0,255,200,0.5); font-weight:600; font-family:'Orbitron',sans-serif; font-size:.75em; letter-spacing:1px; text-transform:uppercase; }

/* ===== GAME CONTAINER ===== */
#game-container {
    width:100vw; height:100vh;
    display:flex; flex-direction:column;
    position:relative;
}

/* Top HUD */
#game-hud {
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 12px; background:rgba(10,10,30,0.9);
    border-bottom:1px solid rgba(0,255,200,0.08);
    flex-shrink:0; z-index:10;
}
#hud-left, #hud-right { display:flex; align-items:center; gap:12px; }
#hud-center { text-align:center; display:flex; flex-direction:column; gap:2px; }
#wave-text { font-family:'Orbitron',sans-serif; font-size:.85em; color:#ff6690; letter-spacing:1px; }
#phase-text { font-size:.7em; color:rgba(0,255,200,0.4); }

.hud-item { display:flex; align-items:center; gap:6px; }
.hud-label { font-family:'Orbitron',sans-serif; font-size:.6em; color:rgba(0,255,200,0.5); letter-spacing:1px; text-transform:uppercase; min-width:40px; }
.hud-bar-wrap {
    width:80px; height:10px; background:rgba(255,255,255,0.05);
    border:1px solid rgba(0,255,200,0.15); border-radius:1px;
}
.hud-bar-wrap.energy-bar { border-color:rgba(255,200,0,0.2); }
.hud-bar {
    height:100%; background:linear-gradient(90deg,#00ffc8,#00cc99);
    transition:width .3s;
}
#energy-bar { background:linear-gradient(90deg,#ffcc00,#ff9900); }
.hud-value { font-size:.75em; color:#00ffc8; min-width:24px; text-align:right; }
#energy-text { color:#ffcc00; }
.hud-sub { font-size:.6em; color:rgba(255,200,0,0.4); }

#territory-text, #kills-text { font-size:.7em; color:rgba(0,255,200,0.4); }
#kills-text { color:rgba(255,0,100,0.5); }

.hud-btn {
    padding:4px 8px; border:1px solid rgba(255,255,255,0.1); border-radius:2px;
    background:rgba(255,255,255,0.03); color:#667; cursor:pointer;
    font-family:'Orbitron',sans-serif; font-size:.65em; transition:all .2s;
}
.hud-btn:hover { background:rgba(255,255,255,0.08); color:#aaa; }

/* Canvas */
#game-canvas {
    flex:1; width:100%; cursor:pointer;
    display:block;
}

/* Build Menu */
#build-menu {
    display:flex; justify-content:center; align-items:center; gap:8px;
    padding:6px 12px; background:rgba(10,10,30,0.9);
    border-top:1px solid rgba(0,255,200,0.08);
    flex-shrink:0; z-index:10; flex-wrap:wrap;
}
.build-section {
    display:flex; align-items:center; gap:4px;
}
.build-section-label {
    font-family:'Orbitron',sans-serif; font-size:.5em; color:rgba(0,255,200,0.3);
    letter-spacing:1px; text-transform:uppercase; margin-right:4px;
    writing-mode:horizontal-tb;
}
.build-btn {
    display:flex; flex-direction:column; align-items:center; gap:1px;
    padding:6px 10px; border:1px solid rgba(0,255,200,0.15); border-radius:2px;
    background:rgba(0,255,200,0.03); color:rgba(0,255,200,0.6);
    cursor:pointer; transition:all .2s; min-width:52px;
}
.build-btn:hover { background:rgba(0,255,200,0.08); border-color:rgba(0,255,200,0.3); color:#00ffc8; }
.build-btn.active { background:rgba(0,255,200,0.15); border-color:#00ffc8; color:#00ffc8; box-shadow:0 0 10px rgba(0,255,200,0.15); }
.build-btn.disabled { opacity:.3; cursor:not-allowed; }
.build-btn.disabled:hover { background:rgba(0,255,200,0.03); border-color:rgba(0,255,200,0.15); color:rgba(0,255,200,0.6); }
.build-icon { font-size:1.1em; }
.build-name { font-family:'Orbitron',sans-serif; font-size:.5em; letter-spacing:1px; }
.build-cost { font-size:.55em; color:rgba(255,200,0,0.6); }
.sell-btn { border-color:rgba(255,0,100,0.3); background:rgba(255,0,100,0.05); color:rgba(255,0,100,0.6); }
.sell-btn:hover { background:rgba(255,0,100,0.1); border-color:rgba(255,0,100,0.5); color:#ff0066; }
.wave-btn { padding:8px 20px; font-size:.65em; }

/* Selection Panel */
#selection-panel {
    position:absolute; bottom:70px; left:10px;
    background:rgba(10,10,30,0.95); border:1px solid rgba(0,255,200,0.2);
    border-radius:2px; padding:10px 14px; max-width:220px;
    font-size:.8em; z-index:15;
}
#selection-panel .close-btn { position:absolute; top:2px; right:8px; font-size:1em; cursor:pointer; color:rgba(255,255,255,0.3); }
#selection-panel .close-btn:hover { color:#ff0066; }
#selection-info p { margin:2px 0; }
#selection-info .sel-title { color:#00ffc8; font-family:'Orbitron',sans-serif; font-size:.85em; letter-spacing:1px; }
#selection-info .sel-stat { color:rgba(255,255,255,0.5); }
#selection-info .sel-stat strong { color:#ffcc00; }

/* Wave Banner */
#wave-banner {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    background:rgba(10,10,30,.95); border:1px solid rgba(255,0,100,0.4);
    padding:16px 40px; border-radius:2px;
    font-family:'Orbitron',sans-serif; font-size:1.4em; letter-spacing:2px;
    color:#ff0066; z-index:20; text-align:center;
    box-shadow:0 0 30px rgba(255,0,100,0.15);
    animation:banner-pulse 1s ease-in-out infinite;
}
@keyframes banner-pulse {
    0%,100% { box-shadow:0 0 30px rgba(255,0,100,0.15); }
    50% { box-shadow:0 0 50px rgba(255,0,100,0.3); }
}

/* Modal */
.modal {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(5,5,15,.85); display:flex; justify-content:center;
    align-items:center; z-index:100;
    backdrop-filter:blur(3px);
}
.modal.hidden { display:none; }
.modal-content {
    background:linear-gradient(135deg, rgba(10,10,30,0.98), rgba(15,15,40,0.98));
    border:1px solid rgba(0,255,200,0.15);
    padding:28px; border-radius:4px;
    max-width:600px; width:92%; max-height:80vh; overflow-y:auto; position:relative;
    text-align:center;
}
.modal-content h2 { margin-bottom:12px; color:#00ffc8; font-family:'Orbitron',sans-serif; letter-spacing:1px; }
.modal-content h3 { margin:14px 0 6px; color:#ff6690; font-family:'Orbitron',sans-serif; font-size:.85em; letter-spacing:1px; text-align:left; }
.modal-content p,.modal-content li { margin:4px 0; line-height:1.5; font-size:.88em; text-align:left; }
.modal-content ul { padding-left:18px; text-align:left; }
.close-btn { position:absolute; top:8px; right:14px; font-size:1.4em; cursor:pointer; color:rgba(255,255,255,0.3); }
.close-btn:hover { color:#ff0066; }
.rules-table { width:100%; border-collapse:collapse; margin:8px 0; font-size:.85em; }
.rules-table th,.rules-table td { padding:5px 7px; border:1px solid rgba(0,255,200,0.1); text-align:center; }
.rules-table th { background:rgba(0,255,200,0.05); color:#00ffc8; font-family:'Orbitron',sans-serif; font-size:.8em; }

#game-over-stats { margin:12px 0; text-align:left; }
#game-over-stats p { margin:6px 0; font-size:.9em; }
#game-over-stats strong { color:#00ffc8; }
#game-over-modal .menu-btn { margin-top:8px; }

/* Scrollbar */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background:rgba(0,255,200,0.15); border-radius:2px; }
::-webkit-scrollbar-thumb:hover { background:rgba(0,255,200,0.3); }

/* Footer */
.site-footer {
    position:fixed; bottom:0; left:0; right:0;
    display:flex; justify-content:center; align-items:center; gap:1.5em;
    padding:8px 16px;
    background:linear-gradient(to top, rgba(2,8,24,0.95) 0%, rgba(2,8,24,0) 100%);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    font-size:11px; letter-spacing:0.03em; color:rgba(212,175,55,0.7);
    z-index:50; pointer-events:none;
}
.site-footer a { color:#d4af37; text-decoration:none; pointer-events:auto; transition:color .2s; }
.site-footer a:hover { color:#f1d27a; text-decoration:underline; }
.footer-brand { pointer-events:auto; }
.footer-cross { pointer-events:auto; }
.footer-divider { opacity:0.3; }
.footer-copy { opacity:0.6; }

/* Hide footer when game is active */
#game-container:not(.hidden) ~ .site-footer { display:none; }

/* ===== MOBILE ===== */
@media (max-width:768px) {
    .menu-box { padding:20px 24px; max-width:360px; }
    .menu-title { font-size:1.8em; }
    .menu-sub { font-size:.62em; margin-bottom:14px; }

    #game-hud { padding:4px 8px; gap:6px; }
    .hud-label { font-size:.5em; min-width:30px; }
    .hud-bar-wrap { width:50px; height:8px; }
    .hud-value { font-size:.65em; }
    .hud-sub { font-size:.5em; }
    #wave-text { font-size:.7em; }
    #phase-text { font-size:.55em; }
    #territory-text, #kills-text { font-size:.6em; }

    #build-menu { padding:4px 6px; gap:4px; }
    .build-btn { padding:4px 6px; min-width:42px; }
    .build-icon { font-size:.9em; }
    .build-name { font-size:.42em; }
    .build-cost { font-size:.45em; }
    .build-section-label { font-size:.4em; }
    .wave-btn { padding:6px 14px; font-size:.55em; }

    #selection-panel { bottom:60px; max-width:180px; padding:8px 10px; font-size:.7em; }
    #wave-banner { font-size:1em; padding:12px 24px; }
}

@media (max-width:480px) {
    #hud-left { flex-direction:column; gap:2px; align-items:flex-start; }
    .hud-bar-wrap { width:40px; }
    .build-section-label { display:none; }
}