/* style.css — Bastion: Harbor of Chaos */
:root{
 --bg:#0a1420;
 --panel:rgba(16,28,42,0.92);
 --panel-light:rgba(30,46,64,0.95);
 --accent:#e8c84a;
 --accent2:#4ab0e8;
 --danger:#e85a4a;
 --good:#4ada6a;
 --text:#e8ecf0;
 --muted:#8a9aaa;
 --border:rgba(120,160,200,0.2);
 --shadow:0 8px 32px rgba(0,0,0,0.5);
 --font-display:'Arial Narrow','Helvetica Neue',Impact,Haettenschweiler,sans-serif;
 --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
 color-scheme:dark;
}
html[data-theme="light"]{
 --bg:#d8e4f0;
 --panel:rgba(240,246,252,0.95);
 --panel-light:rgba(225,235,245,0.95);
 --text:#1a2a3a;
 --muted:#5a6a7a;
 --border:rgba(40,80,120,0.2);
 --shadow:0 8px 32px rgba(0,0,0,0.15);
 color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;}
body{
 font-family:var(--font-body);
 background:var(--bg); color:var(--text);
 touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
#root{position:fixed;inset:0;width:100%;height:100%;}
#game{position:absolute;inset:0;display:block;touch-action:none;}

/* HUD */
#hud{
 position:absolute;top:0;left:0;right:0;
 display:flex;align-items:center;justify-content:space-between;
 padding:10px 14px;gap:10px;
 background:linear-gradient(180deg,rgba(8,16,24,0.85),rgba(8,16,24,0));
 pointer-events:none;z-index:10;
}
.hud-left{display:flex;align-items:center;gap:10px;}
.wave-badge{
 font-family:var(--font-display);font-weight:700;font-size:22px;
 background:var(--panel);border:1px solid var(--border);
 border-radius:10px;padding:4px 12px;min-width:54px;text-align:center;
 box-shadow:var(--shadow);
}
.wave-badge small{font-size:12px;color:var(--muted);}
.wave-name{
 font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0.05em;
 color:var(--accent);text-transform:uppercase;
 text-shadow:0 2px 8px rgba(0,0,0,0.6);
 max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hud-center{display:flex;flex-direction:column;align-items:center;flex:1;max-width:280px;}
.town-bar{
 position:relative;width:100%;height:18px;
 background:var(--panel);border:1px solid var(--border);
 border-radius:9px;overflow:hidden;box-shadow:var(--shadow);
}
.town-bar-fill{
 position:absolute;left:0;top:0;bottom:0;width:100%;
 background:linear-gradient(90deg,#e85a4a,#e8a84a,#4ada6a);
 transition:width 0.3s ease;
}
.town-bar span{
 position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
 font-size:10px;font-weight:800;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.8);
}
.town-label{font-size:9px;letter-spacing:0.15em;color:var(--muted);margin-top:3px;text-transform:uppercase;}
.hud-right{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.coin-display{
 font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--accent);
 background:var(--panel);border:1px solid var(--border);
 border-radius:10px;padding:4px 12px;box-shadow:var(--shadow);
}
.coin-display::before{content:'◉ ';color:var(--accent);font-size:14px;}
.score-display{font-size:11px;color:var(--muted);}

/* Weapon bar */
.weapon-bar{
 position:absolute;bottom:0;left:0;right:0;
 display:flex;gap:4px;padding:8px 8px 10px;
 background:linear-gradient(0deg,rgba(8,16,24,0.92),rgba(8,16,24,0.6));
 overflow-x:auto;scrollbar-width:thin;z-index:10;
 border-top:1px solid var(--border);
}
.weapon-bar::-webkit-scrollbar{height:4px;}
.weapon-bar::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px;}
.wbtn{
 flex:0 0 auto;min-width:62px;
 display:flex;flex-direction:column;align-items:center;gap:1px;
 padding:6px 8px;border-radius:8px;cursor:pointer;
 background:var(--panel);border:1px solid var(--border);
 color:var(--text);font-family:inherit;transition:all 0.15s;
}
.wbtn:hover{background:var(--panel-light);transform:translateY(-2px);}
.wbtn.active{border-color:var(--accent);background:rgba(232,200,74,0.15);box-shadow:0 0 12px rgba(232,200,74,0.3);}
.wbtn.disabled{opacity:0.4;cursor:not-allowed;}
.wbtn.disabled:hover{transform:none;}
.wname{font-size:9px;font-weight:700;white-space:nowrap;}
.wcost{font-size:9px;color:var(--accent);font-weight:600;}

/* Powerups */
.power-panel{
 position:absolute;top:64px;right:8px;
 display:flex;flex-direction:column;gap:5px;z-index:10;
}
.pbtn{
 display:flex;align-items:center;gap:6px;
 padding:6px 8px;border-radius:8px;cursor:pointer;
 background:var(--panel);border:1px solid var(--border);
 color:var(--text);font-family:inherit;transition:all 0.15s;
 min-width:110px;
}
.pbtn:hover{background:var(--panel-light);transform:translateX(-2px);}
.pbtn.disabled{opacity:0.4;cursor:not-allowed;}
.picon{
 width:22px;height:22px;border-radius:6px;
 background:linear-gradient(135deg,var(--accent2),#2a6a9a);
 display:flex;align-items:center;justify-content:center;
 font-family:var(--font-display);font-weight:700;font-size:12px;color:#fff;flex-shrink:0;
}
.pname{font-size:10px;font-weight:700;flex:1;text-align:left;}
.pcost{font-size:9px;color:var(--accent);font-weight:600;}

/* Overlay */
.overlay{
 position:absolute;inset:0;display:none;
 align-items:center;justify-content:center;
 background:rgba(6,12,20,0.85);backdrop-filter:blur(6px);
 z-index:50;padding:20px;
}
.overlay.show{display:flex;}
.overlay-card{
 background:var(--panel);border:1px solid var(--border);
 border-radius:16px;padding:32px 28px;text-align:center;
 max-width:420px;width:100%;box-shadow:var(--shadow);
 animation:cardIn 0.3s ease;
}
@keyframes cardIn{from{opacity:0;transform:scale(0.9) translateY(10px);}to{opacity:1;transform:none;}}
.overlay-card h1{
 font-family:var(--font-display);font-weight:700;font-size:42px;margin:0 0 4px;
 color:var(--accent);letter-spacing:0.05em;
 text-shadow:0 4px 16px rgba(232,200,74,0.3);
}
.overlay-card h2{
 font-family:var(--font-display);font-weight:700;font-size:28px;margin:0 0 8px;color:var(--accent2);
}
.overlay-card h2.lose{color:var(--danger);}
.overlay-card h1.win{color:var(--good);text-shadow:0 4px 16px rgba(74,218,106,0.4);}
.overlay-card .sub{font-size:14px;color:var(--muted);margin:0 0 16px;letter-spacing:0.1em;text-transform:uppercase;}
.overlay-card .desc{font-size:14px;color:var(--text);margin:0 0 12px;line-height:1.5;}
.overlay-card .hs{font-size:13px;color:var(--muted);margin:8px 0;}
.overlay-card .hs strong{color:var(--accent);font-size:16px;}
.overlay-card .rewards{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:12px 0;}
.overlay-card .rewards span{
 font-size:11px;background:var(--panel-light);padding:4px 10px;
 border-radius:6px;border:1px solid var(--border);color:var(--good);
}
.overlay-card .total{font-size:16px;color:var(--accent);font-weight:700;margin:8px 0;}
.overlay-card .next{font-size:12px;color:var(--muted);margin:8px 0 0;}
.overlay-btns{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.obtn{
 font-family:var(--font-display);font-weight:700;font-size:15px;letter-spacing:0.05em;
 padding:12px 28px;border-radius:10px;cursor:pointer;border:none;
 background:linear-gradient(135deg,var(--accent),#c8a830);color:#1a1a2a;
 box-shadow:0 4px 16px rgba(232,200,74,0.3);transition:all 0.15s;
}
.obtn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,200,74,0.5);}
.obtn:active{transform:translateY(0);}

/* Toast */
.toast{
 position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.9);
 background:var(--panel);border:1px solid var(--accent);
 color:var(--accent);font-family:var(--font-display);font-weight:700;font-size:14px;
 padding:10px 20px;border-radius:10px;box-shadow:var(--shadow);
 opacity:0;pointer-events:none;z-index:40;transition:all 0.3s;letter-spacing:0.03em;
}
.toast.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* Responsive */
@media (max-width:560px){
 .wave-name{display:none;}
 .hud-center{max-width:140px;}
 .coin-display{font-size:16px;padding:3px 8px;}
 .wave-badge{font-size:18px;padding:3px 8px;}
 .pbtn{min-width:90px;padding:5px 6px;}
 .pname{font-size:9px;}
 .wbtn{min-width:54px;padding:5px 6px;}
 .wname{font-size:8px;}
 .overlay-card{padding:24px 18px;}
 .overlay-card h1{font-size:32px;}
}
@media (max-height:500px){
 .power-panel{top:56px;}
 .pbtn{padding:4px 6px;}
}