:root{
  --bg:#071019;
  --panel:#0c1722cc;
  --panel2:#14283a;
  --line:#244052;
  --line-2:#37566f;
  --text:#eaf6ff;
  --muted:#8da6b8;
  --muted-2:#688296;
  --cyan:#22d3ee;
  --orange:#f59e0b;
  --green:#34d399;
  --red:#fb7185;
  --purple:#a78bfa;
  --glass:rgba(10,20,30,.72);
  --shadow:0 18px 46px rgba(0,0,0,.34);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:radial-gradient(circle at 50% 12%,#173149 0,#0a141d 42%,#04090e 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;overflow:hidden}
button,input{font:inherit}
button{cursor:pointer;color:var(--text);border:1px solid #33556b;background:linear-gradient(180deg,#173148,#102434);border-radius:12px;padding:9px 11px;transition:.18s transform,.18s background,.18s border-color,.18s opacity,.18s box-shadow;box-shadow:0 8px 20px rgba(0,0,0,.2)}
button:hover{transform:translateY(-1px);background:linear-gradient(180deg,#1b3b55,#15324a);border-color:#5b89a3;box-shadow:0 12px 24px rgba(0,0,0,.28)}
button:active{transform:translateY(0) scale(.99)}
button:disabled{cursor:not-allowed;opacity:.4;transform:none;box-shadow:none}
input{background:#09131d;border:1px solid #29485d;border-radius:10px;color:#fff;outline:none;transition:.15s border-color,.15s box-shadow}
input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,211,238,.12)}
.primary{background:linear-gradient(180deg,#1197b0,#0c6a7e);border-color:#2fd4ef;font-weight:800}
.primary:hover{background:linear-gradient(180deg,#17aac5,#0f7891)}
.secondary{background:linear-gradient(180deg,#192a3d,#122030)}
.danger{background:linear-gradient(180deg,#7e263e,#59192d);border-color:#ca5a79;font-weight:800}
.tiny{padding:4px 8px;font-size:11px}
.big{padding:13px 16px;font-size:16px}
.warn{color:#ffd483}
.good{color:var(--green)}
.bad{color:var(--red)}

#topbar{height:66px;display:flex;align-items:center;gap:18px;padding:10px 14px;border-bottom:1px solid #21394a;background:rgba(7,17,28,.9);backdrop-filter:blur(12px)}
.brand,.logo{font-weight:1000;letter-spacing:2px}
.brand{font-size:20px;min-width:150px}
.brand span,.logo span{color:var(--cyan);text-shadow:0 0 14px rgba(34,211,238,.28)}
.resources{display:flex;gap:8px;flex:1;justify-content:center;flex-wrap:wrap}
.resource{min-width:98px;padding:6px 10px;border:1px solid #233f52;background:linear-gradient(180deg,#0d1924,#0a141d);border-radius:10px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.resource b{display:block;font-size:14px}
.resource small{font-size:10px;color:var(--muted)}
.room-box{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap}
.room-box b{color:var(--text);font-size:15px;letter-spacing:1px}
.room-box button{padding:3px 7px}

main{height:calc(100vh - 104px);display:grid;grid-template-columns:300px minmax(500px,1fr) 334px;gap:0}
.panel{overflow-y:auto;background:var(--panel);backdrop-filter:blur(12px);padding:12px;border-right:1px solid #1d3444}
.panel::-webkit-scrollbar{width:8px}
.panel::-webkit-scrollbar-thumb{background:#29485d;border-radius:999px}
.right-panel{border-right:0;border-left:1px solid #1d3444}
.panel section{margin-bottom:16px;padding:10px;border:1px solid rgba(38,65,84,.65);background:linear-gradient(180deg,rgba(11,23,33,.82),rgba(8,18,26,.68));border-radius:16px;box-shadow:var(--shadow)}
.panel h2{font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:#d7efff;margin:2px 0 10px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.section-title span{color:var(--muted);font-size:10px}
.stack{display:flex;flex-direction:column;gap:8px}
.econ{display:grid;grid-template-columns:1fr auto;gap:4px;padding:9px;background:linear-gradient(180deg,#0b1721,#0a151f);border:1px solid #203849;border-radius:12px;transition:.16s transform,.16s border-color,.16s background}
.econ:hover{transform:translateY(-1px);border-color:#335d73;background:linear-gradient(180deg,#0d1c28,#0b1822)}
.econ .name{font-weight:780;font-size:12px}
.econ .rate{color:var(--green);font-size:10px}
.econ .cost{grid-column:1/2;color:var(--muted);font-size:10px;line-height:1.45}
.econ button{grid-row:1/3;grid-column:2;padding:6px 10px;font-size:12px;min-width:40px}
.info-card{background:linear-gradient(180deg,#0b1721,#0a151f);border:1px solid #203849;border-radius:12px;padding:10px;font-size:12px;line-height:1.55;margin-bottom:7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
.muted{color:var(--muted)}
.kv{display:flex;justify-content:space-between;gap:12px;align-items:center}
.kv span:last-child{color:#d8ebf7}

.mine-button{width:100%;height:78px;background:radial-gradient(circle at 50% 10%,#28a499,#0f4f59 58%,#0b2831);border-color:#2fbcae;box-shadow:inset 0 0 28px #22d3ee18,0 16px 28px rgba(0,0,0,.22);position:relative;overflow:hidden}
.mine-button::after{content:"";position:absolute;inset:-80% auto auto -20%;width:40%;height:220%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:rotate(18deg);animation:shine 3.6s linear infinite}
.mine-button:hover{filter:brightness(1.08)}
.mine-button.active{transform:scale(.987);filter:brightness(1.14)}
.mine-button span{display:block;font-weight:900;font-size:12px;letter-spacing:.5px}
.mine-button small{display:block;color:#bdfbf1;margin-top:7px}

.game-wrap{position:relative;min-width:0;background:#050c12;overflow:hidden}
#game{width:100%;height:100%;display:block}
.canvas-hint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);font-size:10px;color:#8ba2b3;background:#06111cdd;border:1px solid #1d3546;border-radius:20px;padding:7px 12px;pointer-events:none;white-space:nowrap;backdrop-filter:blur(6px);box-shadow:0 12px 25px rgba(0,0,0,.28)}
.wave-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);pointer-events:none;background:rgba(6,18,29,.9);border:1px solid #2d5067;border-radius:13px;padding:8px 15px;font-size:12px;font-weight:800;box-shadow:0 10px 22px rgba(0,0,0,.34);backdrop-filter:blur(8px)}
.toast{position:absolute;top:58px;left:50%;transform:translate(-50%,-10px);opacity:0;transition:.2s;padding:9px 14px;border-radius:10px;background:#132638;border:1px solid #365971;font-size:12px;pointer-events:none;box-shadow:0 12px 24px rgba(0,0,0,.3)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.error{border-color:#a9445d;background:#351621}
.toast.ok{border-color:#2a9979;background:#10362e}

.tower-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tower-card{position:relative;text-align:left;min-height:88px;padding:9px;background:linear-gradient(180deg,#0d1c28,#09131b);border:1px solid #203849;border-radius:13px;overflow:hidden}
.tower-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.05),transparent 35%,transparent 65%,rgba(255,255,255,.03));opacity:.7;pointer-events:none}
.tower-card.selected{outline:2px solid var(--cyan);background:linear-gradient(180deg,#103240,#0b2028);box-shadow:0 0 0 4px rgba(34,211,238,.08)}
.tower-card.locked{opacity:.42}
.tower-card .icon{font-size:19px}
.tower-card .tname{font-size:11px;font-weight:820}
.tower-card .stats{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.35}
.tower-card .cost{font-size:9px;color:#e0c886;margin-top:5px;line-height:1.4}
.ability{width:100%;display:flex;justify-content:space-between;margin-bottom:8px;padding:10px 12px}
.players{display:flex;flex-direction:column;gap:6px}
.player{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;padding:8px;background:linear-gradient(180deg,#0b1721,#09131b);border-radius:10px;border:1px solid rgba(32,56,73,.55);font-size:11px}
.dot{width:8px;height:8px;border-radius:50%;box-shadow:0 0 10px currentColor}

footer{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-top:1px solid #1c3546;background:rgba(7,17,28,.92);color:var(--muted);font-size:11px}
#baseHealth{color:#f9c7ce;font-weight:700}

.overlay{position:fixed;inset:0;display:none;place-items:center;background:radial-gradient(circle at 50% 25%,#142b3e 0,#071019ee 45%,#03070b 100%);z-index:20}
.overlay.show{display:grid}
.lobby-card{width:min(448px,92vw);padding:30px;border:1px solid #28485d;background:rgba(11,23,35,.9);backdrop-filter:blur(16px);border-radius:18px;box-shadow:0 30px 90px #000b}
.logo{font-size:38px;text-align:center}
.tagline{text-align:center;color:var(--muted);font-size:12px;margin:3px 0 24px}
.lobby-card label{display:block;color:var(--muted);font-size:11px;margin:8px 0 5px}
.lobby-card input{width:100%;padding:11px 12px}
.lobby-card>.primary{width:100%;margin-top:9px}
.separator{display:flex;align-items:center;gap:10px;color:#5f7a8c;font-size:10px;margin:16px 0}
.separator:before,.separator:after{content:"";height:1px;background:#203849;flex:1}
.join-row{display:grid;grid-template-columns:1fr auto;gap:7px}
.join-row input{text-transform:uppercase;letter-spacing:3px}
.small{font-size:10px;color:#6f899b;text-align:center;margin-top:14px;line-height:1.5}

@keyframes shine{0%{transform:translateX(-120%) rotate(18deg)}100%{transform:translateX(260%) rotate(18deg)}}

@media (max-width: 1380px){
  main{grid-template-columns:270px minmax(420px,1fr) 300px}
}