*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#10151b;color:#eaf1f5;font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif}
body{display:flex;align-items:center;justify-content:center}
#game{position:relative;width:min(1200px,100vw);height:min(760px,100vh);overflow:hidden;background:#172028;user-select:none}
canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.ui{position:absolute;z-index:5;pointer-events:none}
.top{left:18px;right:18px;top:15px;display:flex;gap:10px;align-items:center}
.panel{background:rgba(14,20,25,.88);border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 30px #0007;backdrop-filter:blur(8px);border-radius:14px}
.stat{padding:8px 14px;min-width:108px}
.stat small{display:block;color:#8d9aa4;font-size:10px;text-transform:uppercase;letter-spacing:1px}
.stat b{font-size:20px}
#pause,#restart{pointer-events:auto;border:0;color:#fff;background:#26333c;padding:11px 15px;border-radius:11px;cursor:pointer;font-weight:700}
#pause:hover,#restart:hover{background:#34444f}
.spacer{flex:1}
#towerbar{left:18px;right:18px;bottom:16px;display:flex;gap:10px;align-items:end;pointer-events:none}
.card{pointer-events:auto;width:175px;min-height:94px;padding:12px;background:rgba(14,20,25,.94);border:1px solid rgba(255,255,255,.1);border-radius:15px;cursor:pointer;box-shadow:0 10px 30px #0008}
.card.selected{border-color:#ffd166;box-shadow:0 0 0 2px #ffd16633,0 12px 30px #0009}
.card.disabled{opacity:.45}
.card .name{font-weight:800}.card .desc{font-size:11px;color:#9eabb3;margin-top:4px}.card .cost{font-size:12px;color:#ffd166;margin-top:7px}
#message{left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:26px 34px;min-width:310px;display:none;pointer-events:auto}
#message h1{margin:0 0 7px;font-size:34px}.sub{color:#a9b4bb;margin-bottom:18px}
#message button{border:0;border-radius:12px;padding:12px 22px;background:#ffd166;color:#182026;font-weight:900;cursor:pointer}
#hint{right:18px;top:76px;color:#9ba8b1;font-size:11px;text-align:right}
@media(max-width:700px){
 .stat{min-width:70px;padding:7px 9px}.stat b{font-size:16px}
 .top{left:9px;right:9px}.hint{display:none}
 .card{width:calc((100vw - 42px)/3);min-height:82px;padding:9px}.card .desc{display:none}
 #towerbar{left:9px;right:9px;bottom:9px}
}