@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;
}

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 ===== */
#menu-screen {
    display:flex; justify-content:center; align-items:center;
    min-height:100vh; width:100%; padding:10px;
}
.menu-box {
    text-align:center; max-width:420px; width:100%; padding:40px 30px;
    background:rgba(8,8,18,0.85); border:1px solid rgba(0,255,200,0.15);
    border-radius:12px;
}
.menu-title {
    font-family:'Orbitron',sans-serif; font-size:3.2rem; font-weight:900;
    letter-spacing:6px; line-height:1.1; margin-bottom:8px;
    color:#e0e0f0;
    text-shadow: 0 0 20px rgba(0,255,200,0.3), 0 0 40px rgba(0,255,200,0.1);
}
.menu-title .accent { color:#00ffc8; }
.menu-sub {
    font-size:0.75rem; letter-spacing:2px; color:rgba(0,255,200,0.5);
    margin-bottom:30px; text-transform:uppercase;
}
.menu-label {
    font-family:'Orbitron',sans-serif; font-size:0.85rem; color:#00ffc8;
    margin-bottom:12px; text-transform:uppercase; letter-spacing:2px;
}
.menu-page { display:flex; flex-direction:column; gap:10px; }
.menu-btn {
    font-family:'Orbitron',sans-serif; font-size:0.95rem; font-weight:600;
    padding:14px 20px; border:1px solid rgba(0,255,200,0.3); border-radius:8px;
    background:rgba(0,255,200,0.05); color:#00ffc8; cursor:pointer;
    transition: all 0.2s; letter-spacing:1px;
}
.menu-btn:hover { background:rgba(0,255,200,0.15); border-color:#00ffc8; box-shadow:0 0 15px rgba(0,255,200,0.2); }
.menu-btn.primary { background:rgba(0,255,200,0.12); border-color:#00ffc8; }
.menu-btn.primary:hover { background:rgba(0,255,200,0.25); }
.menu-btn.outline { background:transparent; border-color:rgba(0,255,200,0.2); color:rgba(0,255,200,0.6); }
.menu-btn.outline:hover { border-color:#00ffc8; color:#00ffc8; }
.menu-btn.small { padding:10px 16px; font-size:0.8rem; }
.diff-btn { font-size:0.85rem; padding:12px 16px; }

/* ===== MODAL ===== */
.modal-overlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(4,4,10,0.92); z-index:500;
    display:flex; justify-content:center; align-items:center; padding:20px;
}
.modal-box {
    background:#0c0c1a; border:1px solid rgba(0,255,200,0.2); border-radius:12px;
    padding:30px; max-width:520px; width:100%; max-height:80vh; overflow-y:auto;
    text-align:center;
}
.modal-box h2 {
    font-family:'Orbitron',sans-serif; color:#00ffc8; margin-bottom:16px;
    font-size:1.4rem; letter-spacing:2px;
}
.help-scroll { text-align:left; margin-bottom:20px; }
.help-step { margin-bottom:16px; }
.help-step h3 {
    font-family:'Orbitron',sans-serif; font-size:0.85rem; color:#00ffc8;
    margin-bottom:4px; letter-spacing:1px;
}
.help-step p { font-size:0.82rem; line-height:1.5; color:#a0a0c0; }

/* ===== GAME CONTAINER ===== */
#game-container {
    position:fixed; top:0; left:0; width:100%; height:100%;
    display:flex; flex-direction:column; background:#080812;
}

/* HUD */
#hud {
    display:flex; align-items:center; gap:16px; padding:6px 14px;
    background:rgba(8,8,18,0.9); border-bottom:1px solid rgba(0,255,200,0.12);
    flex-shrink:0; flex-wrap:wrap; z-index:10;
}
.hud-group { display:flex; align-items:center; gap:4px; }
.hud-label { font-size:0.7rem; color:rgba(200,200,220,0.5); text-transform:uppercase; letter-spacing:1px; }
.hud-val { font-family:'Orbitron',sans-serif; font-size:0.85rem; color:#00ffc8; font-weight:600; }
.hud-sub { font-size:0.65rem; color:rgba(0,255,200,0.4); }
.hud-phase {
    font-family:'Orbitron',sans-serif; font-size:0.75rem; font-weight:700;
    color:#ff0066; letter-spacing:2px; text-transform:uppercase;
    padding:3px 10px; border:1px solid rgba(255,0,102,0.3); border-radius:4px;
}
.hud-right { margin-left:auto; }
.hud-music-btn {
    padding:4px 10px; border:1px solid rgba(255,200,0,0.2); border-radius:4px;
    background:rgba(255,200,0,0.06); color:rgba(255,200,100,0.5);
    font-family:'Share Tech Mono',monospace; font-size:0.75rem;
    cursor:pointer; transition:all 0.2s; margin-left:8px;
}
.hud-music-btn:hover { background:rgba(255,200,0,0.12); color:#ffcc66; border-color:rgba(255,200,0,0.4); }
.hud-music-btn.muted { opacity:0.4; color:#556; border-color:rgba(255,255,255,0.06); background:rgba(255,255,255,0.03); }

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

/* Phase banner */
#phase-banner {
    position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:100; pointer-events:none;
}
#phase-banner-text {
    font-family:'Orbitron',sans-serif; font-size:1.8rem; font-weight:900;
    color:#00ffc8; letter-spacing:4px; text-transform:uppercase;
    text-shadow: 0 0 30px rgba(0,255,200,0.5), 0 0 60px rgba(0,255,200,0.2);
    opacity:1; transition: opacity 0.8s;
}
#phase-banner.fading #phase-banner-text { opacity:0; }

/* Selection panel */
#select-panel {
    position:fixed; right:10px; top:60px; width:200px; padding:14px;
    background:rgba(8,8,18,0.92); border:1px solid rgba(0,255,200,0.15);
    border-radius:8px; z-index:20;
}
#select-panel h3 {
    font-family:'Orbitron',sans-serif; font-size:0.85rem; color:#00ffc8;
    margin-bottom:8px; letter-spacing:1px;
}
#sel-stats { font-size:0.75rem; line-height:1.8; color:#a0a0c0; }
#sel-special { font-size:0.7rem; color:#ff0066; margin-top:6px; font-style:italic; }

/* Scout direction picker */
#scout-picker {
    position:fixed; bottom:80px; left:50%; transform:translateX(-50%);
    background:rgba(8,8,18,0.95); border:1px solid rgba(0,255,200,0.3);
    border-radius:10px; padding:12px 18px; z-index:50; text-align:center;
}
#scout-picker p { font-size:0.75rem; color:#00ffc8; margin-bottom:8px; font-family:'Orbitron',sans-serif; letter-spacing:1px; }
.scout-dirs { display:flex; gap:6px; justify-content:center; }
.scout-dir-btn {
    width:38px; height:38px; border:1px solid rgba(0,255,200,0.3); border-radius:6px;
    background:rgba(0,255,200,0.05); color:#00ffc8; font-size:1.1rem;
    cursor:pointer; transition:all 0.15s;
}
.scout-dir-btn:hover { background:rgba(0,255,200,0.2); border-color:#00ffc8; }

/* Deploy bar */
#deploy-bar {
    display:flex; align-items:center; gap:6px; padding:6px 10px;
    background:rgba(8,8,18,0.9); border-top:1px solid rgba(0,255,200,0.12);
    flex-shrink:0; overflow-x:auto; z-index:10;
}
.deploy-btn {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:6px 10px; min-width:62px; border:1px solid rgba(0,255,200,0.2);
    border-radius:6px; background:rgba(0,255,200,0.04); cursor:pointer;
    transition:all 0.15s; flex-shrink:0;
}
.deploy-btn:hover { background:rgba(0,255,200,0.12); border-color:#00ffc8; }
.deploy-btn.active { background:rgba(0,255,200,0.18); border-color:#00ffc8; box-shadow:0 0 10px rgba(0,255,200,0.2); }
.deploy-btn:disabled { opacity:0.3; cursor:default; }
.deploy-btn:disabled:hover { background:rgba(0,255,200,0.04); border-color:rgba(0,255,200,0.2); }
.dbtn-icon {
    font-family:'Orbitron',sans-serif; font-size:1rem; font-weight:700;
    color:#00ffc8; line-height:1;
}
.dbtn-name { font-size:0.55rem; color:rgba(200,200,220,0.6); text-transform:uppercase; letter-spacing:0.5px; }
.dbtn-cost { font-size:0.65rem; color:#d4af37; font-weight:bold; }
.deploy-spacer { flex:1; }

/* Game over */
#go-title { font-size:1.8rem !important; }
#go-condition { font-size:0.85rem; color:#a0a0c0; margin-bottom:16px; }
#go-stats {
    text-align:left; font-size:0.8rem; line-height:2; color:#a0a0c0;
    margin-bottom:20px; padding:12px; background:rgba(0,255,200,0.03);
    border:1px solid rgba(0,255,200,0.1); border-radius:6px;
}
#go-stats strong { color:#00ffc8; }

/* Footer */
.site-footer {
    position:fixed; bottom:0; left:0; right:0; display:flex; justify-content:center;
    align-items:center; gap:10px; padding:8px 16px; font-size:11px;
    color:rgba(200,200,220,0.4); z-index:50; pointer-events:none;
}
.site-footer a { color:#d4af37; text-decoration:none; pointer-events:auto; transition:color 0.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; }
#game-container:not(.hidden) ~ .site-footer { display:none; }

/* Responsive */
@media (max-width:600px) {
    .menu-title { font-size:2.2rem; letter-spacing:3px; }
    #hud { gap:8px; padding:4px 8px; }
    .hud-label { font-size:0.6rem; }
    .hud-val { font-size:0.75rem; }
    #deploy-bar { gap:4px; padding:4px 6px; }
    .deploy-btn { padding:4px 6px; min-width:52px; }
    #select-panel { width:160px; padding:10px; right:5px; top:50px; }
    #phase-banner-text { font-size:1.2rem; }
}

/* Share */
.share-section { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(212,175,55,0.15); }
.share-label { font-size: 11px; color: rgba(212,175,55,0.4); letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase; }
.share-buttons { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.btn-share { padding: 6px 14px; background: rgba(8,8,18,0.6); border: 1px solid rgba(212,175,55,0.2); border-radius: 4px; color: rgba(212,175,55,0.6); font-family: 'Share Tech Mono', monospace; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.btn-share:hover { border-color: rgba(212,175,55,0.5); color: #d4af37; background: rgba(212,175,55,0.08); }
.btn-share.copied { border-color: #4ade80; color: #4ade80; }
.share-flavor { font-size: 13px; color: rgba(200,200,220,0.5); margin-bottom: 12px; text-align: center; }