/* ============================================
   WEAPON BUILDER 3D - Styles
   ============================================ */
:root {
    --bg: #0a0a14;
    --surface: #12121e;
    --surface-el: #1a1a2e;
    --surface-hi: #2a2a44;
    --primary: #ff6600;
    --primary-glow: rgba(255,102,0,0.3);
    --secondary: #00aaff;
    --secondary-glow: rgba(0,170,255,0.25);
    --accent: #ffcc00;
    --danger: #ff3344;
    --success: #00ff88;
    --text: #eeeeff;
    --text-dim: #aaaacc;
    --text-muted: #666688;
    --radius: 6px;
    --radius-lg: 12px;
}

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

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    overflow: hidden;
    width: 100vw; height: 100vh;
    user-select: none;
}

.screen {
    position: absolute; top:0; left:0;
    width:100%; height:100%;
    display:none; flex-direction:column;
    align-items:center; justify-content:center;
    z-index:10;
}
.screen.active { display:flex; animation: fadeIn .3s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }

/* ---- MENU ---- */
#screen-menu { background: radial-gradient(ellipse at 50% 30%, #141428 0%, var(--bg) 70%); }
.menu-container { text-align:center; }
.game-title {
    font-size: clamp(2.5rem,7vw,5rem);
    font-weight:900; letter-spacing:.04em; line-height:1.15;
    margin-bottom:.3em; color:var(--text);
    text-shadow:0 0 40px var(--primary-glow);
}
.game-title span {
    background:linear-gradient(135deg,var(--primary),var(--accent));
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent;
    filter:drop-shadow(0 0 20px var(--primary-glow));
}
.subtitle { color:var(--text-muted); font-size:1rem; margin-bottom:2.5rem; letter-spacing:.2em; text-transform:uppercase; }
.menu-buttons { display:flex; flex-direction:column; gap:.75rem; align-items:center; }

/* ---- BUTTONS ---- */
.btn {
    font-family:inherit; font-size:1.05rem; font-weight:700;
    letter-spacing:.1em; padding:.85em 2.5em; border:none;
    border-radius:var(--radius); cursor:pointer;
    transition:all .2s ease; min-width:220px; text-transform:uppercase;
}
.btn-primary { background:linear-gradient(135deg,var(--primary),#ff8833); color:#fff; box-shadow:0 4px 15px var(--primary-glow); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 25px var(--primary-glow); }
.btn-secondary { background:var(--surface-el); color:var(--text); border:2px solid var(--surface-hi); }
.btn-secondary:hover { border-color:var(--secondary); transform:translateY(-2px); }
.btn-ghost { background:transparent; color:var(--text-muted); border:1px solid transparent; }
.btn-ghost:hover { color:var(--text); border-color:var(--surface-hi); }
.btn-sm { font-size:.8rem; padding:.5em 1.2em; min-width:auto; }
.btn-danger { background:var(--danger); color:#fff; }

/* ---- BUILD SCREEN ---- */
#screen-build { z-index:5; justify-content:flex-start; align-items:stretch; }

#game-canvas {
    position:absolute; top:0; left:0;
    width:100%; height:100%; z-index:1;
}

/* Top Bar */
#build-topbar {
    position:absolute; top:0; left:0; right:0; height:44px;
    background:linear-gradient(180deg,rgba(10,10,20,.95),rgba(10,10,20,.7));
    backdrop-filter:blur(8px);
    display:flex; align-items:center; justify-content:space-between;
    padding:0 .75rem; z-index:20;
    border-bottom:1px solid rgba(255,255,255,.05);
}
.topbar-left,.topbar-center,.topbar-right { display:flex; align-items:center; gap:.4rem; }
.weapon-name { font-weight:700; font-size:.9rem; color:var(--accent); margin:0 .3rem; }
.tb-btn {
    font-family:inherit; font-size:.75rem; font-weight:700;
    letter-spacing:.05em; padding:.4em .9em;
    border:1px solid var(--surface-hi); border-radius:4px;
    background:var(--surface); color:var(--text-dim);
    cursor:pointer; transition:all .15s; white-space:nowrap;
}
.tb-btn:hover { background:var(--surface-el); color:var(--text); border-color:var(--text-muted); }
.tb-btn.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.tb-btn.small { padding:.3em .5em; font-size:.7rem; }

/* Side Panels */
.side-panel {
    position:absolute; top:48px; width:200px;
    background:rgba(12,12,22,.92); backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.04);
    border-radius:var(--radius); z-index:20;
    padding:.5rem; max-height:calc(100vh - 56px);
    overflow-y:auto; overflow-x:hidden;
}
.side-panel::-webkit-scrollbar { width:4px; }
.side-panel::-webkit-scrollbar-thumb { background:var(--surface-hi); border-radius:2px; }
.left-panel { left:6px; }
.right-panel { right:6px; width:210px; }

.panel-title {
    font-size:.6rem; letter-spacing:.18em; color:var(--text-muted);
    margin-bottom:.4rem; text-transform:uppercase;
}

/* Part Categories */
.part-category { margin-bottom:.3rem; }
.cat-header {
    font-size:.72rem; font-weight:700; color:var(--text-dim);
    padding:.35rem .4rem; cursor:pointer;
    border-radius:3px; display:flex; justify-content:space-between;
    transition:background .15s;
}
.cat-header:hover { background:var(--surface-el); }
.cat-header .arrow { font-size:.55rem; transition:transform .2s; }
.cat-header.collapsed .arrow { transform:rotate(-90deg); }
.cat-body { display:flex; flex-direction:column; gap:2px; padding:2px 0; }
.cat-body.hidden { display:none; }

.part-item {
    display:flex; align-items:center; gap:.4rem;
    padding:.35rem .5rem; border-radius:3px; cursor:pointer;
    font-size:.75rem; font-weight:600; color:var(--text-dim);
    border:1px solid transparent; transition:all .12s;
}
.part-item:hover { background:var(--surface-el); }
.part-item.selected { background:linear-gradient(135deg,rgba(0,170,255,0.15),rgba(255,102,0,0.1)); border-color:var(--secondary); color:var(--text); box-shadow:0 0 8px var(--secondary-glow); }
.part-item.none-item { color:var(--text-muted); font-style:italic; }
.part-icon { font-size:1rem; width:20px; text-align:center; flex-shrink:0; }

/* Stats */
.stat-row {
    display:flex; align-items:center; gap:.4rem;
    padding:.25rem 0; font-size:.72rem; color:var(--text-dim);
}
.stat-row span:first-child { width:60px; flex-shrink:0; }
.stat-bar {
    flex:1; height:6px; background:var(--surface);
    border-radius:3px; overflow:hidden;
}
.stat-fill {
    height:100%; width:0%; border-radius:3px;
    background:linear-gradient(90deg,#00ccff,#ff6600);
    transition:width .3s ease;
    box-shadow:0 0 4px rgba(0,200,255,0.3);
}
.stat-fill.weight { background:linear-gradient(90deg,var(--success),var(--accent),var(--danger)); }
.stat-fill.heat { background:linear-gradient(90deg,var(--secondary),var(--accent),var(--danger)); }
.stat-val { width:24px; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:var(--text); font-size:.7rem; }
.stat-divider { height:1px; background:var(--surface-hi); margin:.5rem 0; }

.combo-list { font-size:.72rem; color:var(--accent); }
.combo-list div { padding:.15rem 0; }
.no-combo { color:var(--text-muted); font-style:italic; font-size:.7rem; }
.warning-list { font-size:.72rem; color:var(--danger); }
.warning-list div { padding:.15rem 0; }

/* ---- TEST HUD ---- */
.crosshair {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    font-size:30px; color:rgba(0,255,200,.8); font-weight:300;
    text-shadow:0 0 12px rgba(0,255,150,.6), 0 0 4px rgba(255,255,255,.5);
    pointer-events:none; z-index:25;
}
.test-bottom {
    position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
    display:flex; align-items:center; gap:1.5rem;
    background:rgba(10,10,20,.85); backdrop-filter:blur(6px);
    padding:.5rem 1.5rem; border-radius:var(--radius);
    border:1px solid rgba(255,255,255,.05); z-index:25;
}
.test-bar-group { display:flex; align-items:center; gap:.4rem; }
.test-label { font-size:.6rem; font-weight:700; letter-spacing:.1em; color:var(--text-muted); }
.test-bar { width:80px; height:8px; background:var(--surface); border-radius:4px; overflow:hidden; }
.test-bar-fill { height:100%; border-radius:3px; transition:width .1s; }
.heat-fill { background:linear-gradient(90deg,#00aaff,#ff6600,#ff2200); width:0%; }
.ammo-fill { background:var(--accent); width:100%; }
.test-score { font-size:.85rem; font-weight:700; color:var(--accent); }
.test-multiplier {
    font-size:.7rem; font-weight:700; color:#ff4488;
    text-shadow:0 0 8px rgba(255,68,136,.5);
    min-width:40px;
}
.test-info {
    position:absolute; top:90px; left:50%; transform:translateX(-50%);
    font-size:.85rem; font-weight:700; color:var(--primary);
    text-shadow:0 0 10px var(--primary-glow);
    z-index:25; pointer-events:none; text-align:center;
}
.test-wave {
    position:absolute; top:50px; left:50%; transform:translateX(-50%);
    font-size:.7rem; font-weight:700; letter-spacing:.15em;
    color:var(--secondary); text-shadow:0 0 8px rgba(0,170,255,.4);
    z-index:25; pointer-events:none;
}
.test-combo {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-120%);
    font-size:1.8rem; font-weight:900; color:#ffcc00;
    text-shadow:0 0 20px rgba(255,200,0,.6), 0 2px 4px rgba(0,0,0,.5);
    z-index:25; pointer-events:none; opacity:0;
    transition: opacity .15s ease;
}
.test-combo.visible { opacity:1; animation: comboPopIn .3s ease; }
@keyframes comboPopIn { 0%{transform:translate(-50%,-120%) scale(0.5);} 60%{transform:translate(-50%,-120%) scale(1.15);} 100%{transform:translate(-50%,-120%) scale(1);} }

/* Hit marker — X shape that flashes on hit */
.hit-marker {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    width:24px; height:24px; z-index:26; pointer-events:none; opacity:0;
    transition: opacity .05s ease;
}
.hit-marker.flash { opacity:1; }
.hit-marker::before, .hit-marker::after {
    content:''; position:absolute; top:50%; left:50%;
    width:18px; height:2px; background:#ff3344;
    box-shadow:0 0 6px rgba(255,50,70,.8);
}
.hit-marker::before { transform:translate(-50%,-50%) rotate(45deg); }
.hit-marker::after { transform:translate(-50%,-50%) rotate(-45deg); }
.hit-marker.kill::before, .hit-marker.kill::after {
    background:#ffcc00; box-shadow:0 0 10px rgba(255,200,0,.8);
}

/* ---- MODAL ---- */
.modal {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(5,5,10,.9); backdrop-filter:blur(10px);
    display:flex; align-items:center; justify-content:center;
    z-index:100;
}
.modal-content {
    background:var(--surface); border-radius:var(--radius-lg);
    border:1px solid var(--surface-el); padding:2rem;
    max-width:500px; width:90%; text-align:center;
    max-height:80vh; overflow-y:auto;
}
.modal-content h2 { font-size:1.3rem; letter-spacing:.12em; color:var(--primary); margin-bottom:1rem; }
.modal-buttons { margin-top:1rem; display:flex; gap:.5rem; justify-content:center; }

/* PVP button */
.pvp-btn { color:#ff4488!important; border-color:#ff448866!important; }
.pvp-btn:hover { background:#ff448822!important; border-color:#ff4488!important; }
.pvp-btn.active { background:#ff4488!important; color:#fff!important; }

/* Difficulty cards */
.diff-grid { display:grid; grid-template-columns:1fr 1fr; gap:.7rem; margin:.5rem 0; }
.diff-card {
    padding:1rem; background:var(--surface-el); border:2px solid var(--surface-hi);
    border-radius:var(--radius); cursor:pointer; transition:all .2s; text-align:center;
}
.diff-card:hover { transform:translateY(-2px); }
.diff-card.easy:hover { border-color:#44cc66; box-shadow:0 4px 15px rgba(68,204,102,.25); }
.diff-card.medium:hover { border-color:#ffaa00; box-shadow:0 4px 15px rgba(255,170,0,.25); }
.diff-card.hard:hover { border-color:#ff4444; box-shadow:0 4px 15px rgba(255,68,68,.25); }
.diff-card.insane:hover { border-color:#cc44ff; box-shadow:0 4px 15px rgba(204,68,255,.25); }
.diff-icon { font-size:2rem; margin-bottom:.3rem; }
.diff-card h3 { font-size:.85rem; letter-spacing:.1em; margin-bottom:.2rem; }
.diff-card p { font-size:.65rem; color:var(--text-muted); }

/* PVP HUD */
.pvp-hud {
    position:absolute; top:50px; left:12px;
    display:flex; flex-direction:column; gap:.4rem;
    z-index:25; pointer-events:none;
}
.hp-bar-outer { display:flex; align-items:center; gap:.4rem; }
.hp-label { font-size:.6rem; font-weight:700; letter-spacing:.1em; color:var(--text-muted); }
.hp-bar-bg { width:120px; height:10px; background:var(--surface); border-radius:5px; overflow:hidden; border:1px solid #333; }
.hp-bar-fill { height:100%; width:100%; background:linear-gradient(90deg,#ff3344,#ff6644,#44ff66); border-radius:4px; transition:width .15s; }
.hp-val { font-size:.75rem; font-weight:700; color:#44ff66; min-width:28px; }
.enemies-left { font-size:.65rem; font-weight:700; color:#ff4488; letter-spacing:.08em; }

/* PVP victory */
.pvp-win-title { color:#ffcc00!important; text-shadow:0 0 30px rgba(255,200,0,.5); }

/* Damage flash overlay */
#damage-flash {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(255,0,0,.3); pointer-events:none; z-index:24;
    opacity:0; transition:opacity .1s;
}
#damage-flash.flash { opacity:1; }

.tutorial-wide { max-width:700px; }
.tut-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; text-align:left; margin-bottom:1.5rem; }
.tut-section h3 { font-size:.8rem; color:var(--primary); letter-spacing:.1em; margin-bottom:.3rem; }
.tut-section p { font-size:.78rem; color:var(--text-dim); line-height:1.5; margin-bottom:.3rem; }

/* Saved weapons list */
.saved-list { display:flex; flex-direction:column; gap:.5rem; margin:.5rem 0; text-align:left; max-height:300px; overflow-y:auto; }
.saved-item {
    display:flex; align-items:center; justify-content:space-between;
    padding:.6rem .8rem; background:var(--surface-el);
    border-radius:var(--radius); border:1px solid var(--surface-hi);
    transition:all .15s;
}
.saved-item:hover { border-color:var(--secondary); }
.saved-item-name { font-weight:700; font-size:.85rem; }
.saved-item-info { font-size:.65rem; color:var(--text-muted); }
.saved-item-actions { display:flex; gap:.3rem; }
.saved-item-actions button { padding:.25em .5em; }
.no-saves { color:var(--text-muted); font-style:italic; font-size:.85rem; padding:1rem; }

/* ---- TOAST ---- */
.toast {
    position:fixed; top:52px; left:50%;
    transform:translateX(-50%) translateY(-20px);
    background:var(--surface-el); color:var(--text);
    padding:.5em 1.2em; border-radius:var(--radius);
    font-size:.85rem; font-weight:600;
    border:1px solid var(--surface-hi); z-index:200;
    pointer-events:none; opacity:0; transition:all .3s ease;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---- RESPONSIVE ---- */
@media (max-width:768px) {
    .side-panel { width:150px; font-size:.7rem; }
    .right-panel { width:160px; }
    .tut-grid { grid-template-columns:1fr; }
    .game-title { font-size:clamp(2rem,10vw,3.5rem); }
}