/* ── BASTION · modern tower defense ─────────────────────────────────
   All UI sizes derive from --u (1 design px = stage width / 1280),
   so the whole interface scales with the battlefield.               */

:root{
  --bg:#05070a;
  --ink:#e9f1f7;
  --dim:#8b9aa9;
  --lime:#c0f000;
  --cyan:#35e0d0;
  --orange:#ff9a3c;
  --magenta:#ff4d8d;
  --panel:rgba(13,19,25,.76);
  --panel-2:rgba(22,30,38,.82);
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --u:1px;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);overflow:hidden;
  font-family:Outfit,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{user-select:none}

#stage{position:fixed;inset:0;overflow:hidden;background:#05070a}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}

.hidden{display:none !important}

/* ── HUD ───────────────────────────────────────────────────────── */
.hud{position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;gap:calc(var(--u)*10);
  padding:calc(var(--u)*16) calc(var(--u)*18);pointer-events:none;z-index:20}
.hud-left,.hud-right{display:flex;gap:calc(var(--u)*8);align-items:center}
.hud-mid{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;
  gap:calc(var(--u)*12);pointer-events:none;min-width:0}
.hud-right{pointer-events:auto}

.pill{display:flex;align-items:center;gap:calc(var(--u)*7);
  height:calc(var(--u)*38);padding:0 calc(var(--u)*14) 0 calc(var(--u)*11);
  background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*19);
  backdrop-filter:blur(14px) saturate(1.2);box-shadow:var(--shadow);
  font-size:calc(var(--u)*16);font-weight:600;letter-spacing:.02em;
  transition:transform .16s ease, border-color .16s}
.pill .ic{width:calc(var(--u)*17);height:calc(var(--u)*17);fill:none;stroke:var(--magenta);
  stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}
.pill.gold .ic{stroke:var(--lime)}
.pill b{font-weight:700;min-width:calc(var(--u)*18);text-align:left}
.pill.bump{transform:scale(1.07);border-color:var(--line-2)}
.pill.low{animation:pulseRed 1.1s infinite}
@keyframes pulseRed{0%,100%{box-shadow:0 0 0 0 rgba(255,77,141,0)}50%{box-shadow:0 0 0 calc(var(--u)*5) rgba(255,77,141,.16)}}

.wavecount{font-size:calc(var(--u)*12.5);letter-spacing:.24em;color:var(--dim);font-weight:600;
  text-shadow:0 1px 6px rgba(0,0,0,.8)}
.wavecount b{color:var(--ink);font-size:calc(var(--u)*14);letter-spacing:.12em}
.wavecount .dim{opacity:.55}
.wavebars{display:flex;gap:calc(var(--u)*3)}
.wavebars i{display:block;width:calc(var(--u)*15);height:calc(var(--u)*3);border-radius:2px;
  background:rgba(255,255,255,.14)}
.wavebars i.done{background:rgba(192,240,0,.75)}
.wavebars i.now{background:var(--lime);box-shadow:0 0 calc(var(--u)*8) rgba(192,240,0,.8)}
.wavebars i.boss{background:rgba(255,77,141,.35)}
.wavebars i.boss.now{background:var(--magenta);box-shadow:0 0 calc(var(--u)*8) rgba(255,77,141,.8)}

.ibtn{display:grid;place-items:center;width:calc(var(--u)*38);height:calc(var(--u)*38);
  padding:0;background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*12);
  color:var(--ink);font-family:inherit;font-size:calc(var(--u)*14);font-weight:600;cursor:pointer;
  backdrop-filter:blur(14px);box-shadow:var(--shadow);
  transition:background .15s,border-color .15s,transform .12s}
.ibtn:hover{background:var(--panel-2);border-color:var(--line-2);transform:translateY(-1px)}
.ibtn:active{transform:translateY(0) scale(.96)}
.ibtn .ic{width:calc(var(--u)*18);height:calc(var(--u)*18);fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ibtn.on{color:#0a0d10;background:var(--lime);border-color:transparent}
.ibtn.muted .snd-wave{opacity:.15}

/* ── Wave bar ──────────────────────────────────────────────────── */
.wavebar{position:relative;display:flex;align-items:center;gap:calc(var(--u)*10);
  height:calc(var(--u)*38);padding:0 calc(var(--u)*5) 0 calc(var(--u)*14);
  background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*19);
  backdrop-filter:blur(14px);box-shadow:var(--shadow);pointer-events:auto;
  transition:opacity .2s,transform .2s}
.wavebar.hidden{display:none !important}
.wb-txt{display:flex;align-items:baseline;gap:calc(var(--u)*7);line-height:1}
.wb-label{font-size:calc(var(--u)*9.5);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.wb-txt b{font-size:calc(var(--u)*15);font-weight:600;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.wavebar.urgent .wb-txt b{color:var(--lime)}
.wavebar.final .wb-label{color:var(--magenta)}

.btn{font-family:inherit;font-weight:600;font-size:calc(var(--u)*14);color:var(--ink);
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);border-radius:calc(var(--u)*12);
  padding:calc(var(--u)*10) calc(var(--u)*16);cursor:pointer;letter-spacing:.02em;
  transition:transform .12s,background .15s,border-color .15s,box-shadow .15s}
.btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--lime);color:#0a0d10;border-color:transparent;
  box-shadow:0 6px 22px rgba(192,240,0,.28)}
.btn.primary:hover{background:#ccff1a;box-shadow:0 8px 28px rgba(192,240,0,.38)}
.btn.ghost{background:transparent}
.btn.big{font-size:calc(var(--u)*17);padding:calc(var(--u)*14) calc(var(--u)*44);border-radius:calc(var(--u)*14)}
.btn.icon-only{padding:calc(var(--u)*8) calc(var(--u)*13);font-size:calc(var(--u)*16)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}

.btn.send{display:flex;align-items:center;gap:calc(var(--u)*7);padding:calc(var(--u)*6) calc(var(--u)*11);
  font-size:calc(var(--u)*12.5);border-radius:calc(var(--u)*13)}
.btn.send em{font-style:normal;font-size:calc(var(--u)*11);font-weight:700;color:#0a0d10;
  background:rgba(10,13,16,.16);padding:calc(var(--u)*3) calc(var(--u)*7);border-radius:calc(var(--u)*7)}
.btn.send:disabled{opacity:.45}

/* ── Build bar ─────────────────────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:calc(var(--u)*18);
  backdrop-filter:blur(16px) saturate(1.15);box-shadow:var(--shadow)}

.buildbar{position:absolute;left:50%;bottom:calc(var(--u)*18);transform:translateX(-50%);
  display:flex;flex-direction:column;gap:calc(var(--u)*6);padding:calc(var(--u)*9);z-index:19;
  animation:slideUp .18s ease-out}
.build-desc{font-size:calc(var(--u)*11);color:var(--dim);text-align:center;line-height:1.25;
  padding:0 calc(var(--u)*6);min-height:calc(var(--u)*14)}
.build-cards{display:flex;gap:calc(var(--u)*8)}
@keyframes slideUp{from{opacity:0;transform:translate(-50%,calc(var(--u)*10))}to{opacity:1;transform:translate(-50%,0)}}

.tcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*3);
  width:calc(var(--u)*92);padding:calc(var(--u)*9) calc(var(--u)*6) calc(var(--u)*8);
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:calc(var(--u)*13);
  color:var(--ink);font-family:inherit;cursor:pointer;
  transition:background .15s,border-color .15s,transform .12s}
.tcard:hover{background:rgba(255,255,255,.09);border-color:var(--line-2);transform:translateY(-2px)}
.tcard .t-ic{width:calc(var(--u)*30);height:calc(var(--u)*30);fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.tcard .t-name{font-size:calc(var(--u)*12.5);font-weight:600;letter-spacing:.01em}
.tcard .t-cost{font-size:calc(var(--u)*12);font-weight:700;color:var(--lime);font-variant-numeric:tabular-nums}
.tcard .t-key{position:absolute;top:calc(var(--u)*5);right:calc(var(--u)*6);font-size:calc(var(--u)*9);
  color:var(--dim);border:1px solid var(--line);border-radius:calc(var(--u)*4);padding:0 calc(var(--u)*3)}
.tcard.poor{opacity:.45}
.tcard.poor .t-cost{color:var(--magenta)}
.tcard[data-tower="archer"]{color:var(--lime)}
.tcard[data-tower="mage"]{color:var(--cyan)}
.tcard[data-tower="mortar"]{color:var(--orange)}
.tcard[data-tower="barracks"]{color:#9fb4c8}
.tcard[data-tower="cancel"]{color:var(--dim);justify-content:center;width:calc(var(--u)*70)}
.tcard[data-tower="cancel"] .t-name{font-size:calc(var(--u)*12)}

/* ── Tower panel ───────────────────────────────────────────────── */
.towerpanel{position:absolute;right:calc(var(--u)*18);bottom:calc(var(--u)*18);width:calc(var(--u)*252);
  padding:calc(var(--u)*15) calc(var(--u)*16) calc(var(--u)*14);z-index:19;
  display:flex;flex-direction:column;gap:calc(var(--u)*11);animation:slideIn .16s ease-out}
@keyframes slideIn{from{opacity:0;transform:translateX(calc(var(--u)*8))}to{opacity:1;transform:none}}

.tp-head{display:flex;align-items:baseline;justify-content:space-between;gap:calc(var(--u)*8)}
.tp-name{font-size:calc(var(--u)*17);font-weight:600;letter-spacing:.01em}
.tp-lvl{font-size:calc(var(--u)*10.5);letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.tp-stats{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*6) calc(var(--u)*10);
  font-size:calc(var(--u)*12);color:var(--dim)}
.tp-stats span{display:flex;justify-content:space-between;gap:calc(var(--u)*6)}
.tp-stats i{font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums}
.tp-note{font-size:calc(var(--u)*11.5);color:var(--dim);line-height:1.4;margin:0}
.tp-actions{display:flex;gap:calc(var(--u)*7)}
.tp-actions .btn{flex:1;padding:calc(var(--u)*9) calc(var(--u)*8);font-size:calc(var(--u)*13)}
.tp-actions .btn.sell{flex:0 0 auto;padding-inline:calc(var(--u)*12);color:var(--dim)}
.tp-actions .btn.sell:hover{color:var(--magenta);border-color:rgba(255,77,141,.4)}

/* ── Overlay screens ───────────────────────────────────────────── */
.overlay{position:absolute;inset:0;z-index:40;display:grid;place-items:center;
  padding:calc(var(--u)*24);
  background:radial-gradient(ellipse at 50% 35%,rgba(9,14,19,.62),rgba(3,5,8,.9) 70%);
  backdrop-filter:blur(7px);animation:fade .22s ease-out}
.overlay.hidden{display:none !important}
@keyframes fade{from{opacity:0}to{opacity:1}}

.screen{width:min(calc(var(--u)*720),100%);max-height:100%;overflow:auto;
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*20);
  padding:calc(var(--u)*28) calc(var(--u)*30);
  background:linear-gradient(180deg,rgba(22,30,39,.86),rgba(11,16,21,.92));
  border:1px solid var(--line);border-radius:calc(var(--u)*24);
  box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.06);
  animation:pop .24s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(calc(var(--u)*12)) scale(.985)}to{opacity:1;transform:none}}
.screen h2{margin:0;font-size:calc(var(--u)*26);font-weight:600;letter-spacing:.01em}
.screen-head{display:flex;align-items:center;gap:calc(var(--u)*14);width:100%}

/* brand / title */
.brand{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*6)}
.brand-mark{width:calc(var(--u)*62);height:calc(var(--u)*62);margin-bottom:calc(var(--u)*2);
  filter:drop-shadow(0 0 calc(var(--u)*16) rgba(192,240,0,.35))}
.bm-shield{fill:rgba(192,240,0,.08);stroke:var(--lime);stroke-width:2.4;stroke-linejoin:round}
.bm-cross{stroke:rgba(192,240,0,.5);stroke-width:2.4;stroke-linecap:round}
.wordmark{margin:0;font-size:calc(var(--u)*74);font-weight:800;letter-spacing:.16em;
  line-height:.95;padding-left:.16em;
  background:linear-gradient(175deg,#f2ffcf 8%,var(--lime) 42%,#4fc9a6 96%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 30px rgba(192,240,0,.22))}
.tagline{margin:0;font-size:calc(var(--u)*14.5);color:var(--dim);letter-spacing:.14em;text-transform:uppercase}
.menu-actions{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*9);width:calc(var(--u)*250)}
.menu-actions.row{flex-direction:row;width:auto;gap:calc(var(--u)*10)}
.menu-actions .btn{width:100%}
.menu-actions.row .btn{width:auto}
.footnote{font-size:calc(var(--u)*11.5);letter-spacing:.12em;text-transform:uppercase;color:rgba(139,154,169,.7)}

/* level cards */
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(var(--u)*230),1fr));
  gap:calc(var(--u)*14);width:100%}
.lvl{position:relative;display:flex;flex-direction:column;gap:calc(var(--u)*8);text-align:left;
  padding:calc(var(--u)*16);border-radius:calc(var(--u)*16);cursor:pointer;font-family:inherit;
  color:var(--ink);background:rgba(255,255,255,.045);border:1px solid var(--line);
  transition:transform .14s,border-color .14s,background .14s}
.lvl:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:var(--line-2)}
.lvl .lvl-no{font-size:calc(var(--u)*10.5);letter-spacing:.2em;color:var(--lime);text-transform:uppercase}
.lvl h3{margin:0;font-size:calc(var(--u)*19);font-weight:600}
.lvl p{margin:0;font-size:calc(var(--u)*12);color:var(--dim);line-height:1.45}
.lvl .lvl-foot{display:flex;align-items:center;justify-content:space-between;margin-top:calc(var(--u)*2)}
.lvl .lvl-stars{color:var(--lime);letter-spacing:.12em;font-size:calc(var(--u)*14)}
.lvl .lvl-stars .off{color:rgba(255,255,255,.18)}
.lvl .lvl-diff{font-size:calc(var(--u)*11);color:var(--dim);letter-spacing:.06em}
.lvl.locked{opacity:.42;cursor:not-allowed;filter:saturate(.4)}
.lvl.locked:hover{transform:none;background:rgba(255,255,255,.045);border-color:var(--line)}
.lvl .lock{position:absolute;top:calc(var(--u)*14);right:calc(var(--u)*14);font-size:calc(var(--u)*13);color:var(--dim)}

/* how to play */
.how{display:flex;flex-direction:column;gap:calc(var(--u)*12);width:100%}
.how-row{display:flex;gap:calc(var(--u)*12);align-items:flex-start;
  padding:calc(var(--u)*11) calc(var(--u)*13);border-radius:calc(var(--u)*12);
  background:rgba(255,255,255,.035);border:1px solid var(--line)}
.how-row b{display:grid;place-items:center;flex:0 0 calc(var(--u)*22);height:calc(var(--u)*22);
  border-radius:50%;background:var(--lime);color:#0a0d10;font-size:calc(var(--u)*12)}
.how-row p{margin:0;font-size:calc(var(--u)*13);line-height:1.5;color:#c3d0dc}
.how-row i{color:var(--ink);font-style:normal;font-weight:600}
kbd{font-family:ui-monospace,monospace;font-size:.9em;padding:.1em .35em;border-radius:4px;
  background:rgba(255,255,255,.09);border:1px solid var(--line-2)}

/* result */
.result-title{font-size:calc(var(--u)*34) !important;letter-spacing:.02em}
.result-title.win{color:var(--lime);text-shadow:0 0 calc(var(--u)*28) rgba(192,240,0,.3)}
.result-title.lose{color:var(--magenta)}
.stars{display:flex;gap:calc(var(--u)*10);font-size:calc(var(--u)*40);line-height:1}
.stars span{color:rgba(255,255,255,.12);transition:color .3s,transform .3s}
.stars span.on{color:var(--lime);text-shadow:0 0 calc(var(--u)*22) rgba(192,240,0,.55);transform:scale(1.05)}
.result-sub{margin:0;font-size:calc(var(--u)*13);color:var(--dim);text-align:center;line-height:1.5}

/* toast */
.toast{position:absolute;left:50%;top:calc(var(--u)*120);transform:translate(-50%,-8px);
  padding:calc(var(--u)*9) calc(var(--u)*18);border-radius:calc(var(--u)*11);
  background:rgba(255,77,141,.14);border:1px solid rgba(255,77,141,.4);color:#ffd7e4;
  font-size:calc(var(--u)*13);font-weight:600;letter-spacing:.02em;opacity:0;pointer-events:none;
  transition:opacity .18s,transform .18s;z-index:60;white-space:nowrap;backdrop-filter:blur(10px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.good{background:rgba(192,240,0,.12);border-color:rgba(192,240,0,.4);color:#eaffb8}

/* portrait hint */
@media (max-aspect-ratio: 1/1) and (max-width: 900px){
  #stage::after{content:"Best in landscape";position:absolute;left:0;right:0;bottom:8px;text-align:center;
    font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(139,154,169,.55);z-index:70}
}

/* boss health bar */
.bossbar{position:absolute;left:50%;top:calc(var(--u)*66);transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*4);
  width:calc(var(--u)*300);z-index:19;pointer-events:none;animation:fade .3s ease-out}
.bb-name{font-size:calc(var(--u)*10.5);letter-spacing:.26em;text-transform:uppercase;color:#ff9fb4}
.bb-track{width:100%;height:calc(var(--u)*7);border-radius:4px;background:rgba(0,0,0,.55);
  border:1px solid rgba(255,77,141,.35);overflow:hidden;box-shadow:0 4px 16px rgba(0,0,0,.5)}
.bb-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#ff4d6b,#ff2d55);
  box-shadow:0 0 12px rgba(255,77,107,.7);transition:width .12s linear}
.btn.send.busy em{display:none}
/* wave banner */
.wavebanner{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%) scale(.92);
  display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*2);
  pointer-events:none;opacity:0;transition:opacity .3s ease,transform .35s cubic-bezier(.2,.9,.3,1.3);
  z-index:30;text-align:center}
.wavebanner.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.wavebanner span{font-size:calc(var(--u)*13);letter-spacing:.5em;text-transform:uppercase;
  color:rgba(233,241,247,.75);padding-left:.5em;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.wavebanner b{font-size:calc(var(--u)*58);font-weight:800;line-height:1;letter-spacing:.04em;
  color:#fff;text-shadow:0 0 calc(var(--u)*34) rgba(192,240,0,.45),0 4px 24px rgba(0,0,0,.8)}

/* wave composition chips */
.wb-lead{font-size:calc(var(--u)*9.5);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-right:calc(var(--u)*7)}
.wc{display:inline-flex;align-items:center;gap:calc(var(--u)*4);margin-right:calc(var(--u)*8);
  font-size:calc(var(--u)*11.5);font-weight:600;color:#d5e2ec;font-variant-numeric:tabular-nums}
.wc i{width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;display:block;
  box-shadow:0 0 calc(var(--u)*6) currentColor}

.tp-hint{margin:0;font-size:calc(var(--u)*11.5);color:var(--lime);line-height:1.3;font-weight:600}