:root{
    --bg:#161226; --panel:#221c3d; --panel2:#2c2452; --line:#463a82;
    --ink:#efeaff; --dim:#9b90c2; --gold:#ffd166; --star:#9ef0ff;
    --green:#7ae582; --red:#ff5d73;
  }
  *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{height:100%;overflow:hidden;}
  body{
    background:var(--bg);color:var(--ink);
    font-family:"Trebuchet MS","Segoe UI",system-ui,sans-serif;
    display:flex;flex-direction:column;user-select:none;-webkit-user-select:none;
    touch-action:manipulation;
  }
  /* ============ HUD ============ */
  #hud{display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:7px 10px;background:var(--panel);border-bottom:2px solid #3a2f6b;
    font-size:13px;flex-shrink:0;}
  .stat{display:flex;align-items:center;gap:4px;font-weight:bold;white-space:nowrap;}
  #waveLabel{color:var(--dim);font-weight:bold;font-size:11px;letter-spacing:.5px;text-transform:uppercase;}
  .iconBtn{background:var(--panel2);border:2px solid var(--line);border-radius:9px;
    color:var(--ink);font-weight:bold;padding:4px 9px;cursor:pointer;font-size:13px;}
  /* ============ Stage ============ */
  #stage{flex:1;position:relative;min-height:0;}
  canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;}
  #waveBanner{position:absolute;top:10px;left:50%;transform:translateX(-50%);
    background:rgba(34,28,61,.93);border:2px solid var(--gold);border-radius:12px;
    padding:7px 16px;font-weight:bold;font-size:14px;letter-spacing:.5px;
    opacity:0;transition:opacity .3s;pointer-events:none;z-index:6;max-width:92%;text-align:center;}
  #startWaveWrap{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);z-index:5;}
  .wbsub{font-size:11px;font-weight:bold;opacity:.85;display:block;margin-top:1px;}
  /* build picker popup (appears on tapping an empty slot) */
  #buildPicker{position:absolute;z-index:8;transform:translate(-50%,-100%);
    display:flex;flex-wrap:wrap;gap:5px;padding:6px;max-width:208px;justify-content:center;
    background:rgba(13,10,26,.94);border:2px solid var(--gold);border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,.55);}
  .pkBtn{width:58px;background:var(--panel2);border:2px solid var(--line);border-radius:10px;
    color:var(--ink);cursor:pointer;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:1px;}
  .pkBtn img{width:40px;height:40px;object-fit:contain;}
  .pkBtn .pkEm{font-size:34px;line-height:40px;}
  .pkBtn .pkName{font-size:9px;font-weight:bold;color:var(--dim);text-transform:uppercase;}
  .pkBtn .pkCost{font-size:11px;font-weight:bold;color:var(--gold);}
  .pkBtn.cant{opacity:.45;}
  .pkBtn:active{transform:scale(.94);}
  /* abilities */
  #abilBar{position:absolute;left:8px;bottom:10px;display:flex;flex-direction:column;gap:8px;z-index:5;}
  #abilBarR{position:absolute;right:8px;bottom:10px;display:flex;flex-direction:column;gap:8px;z-index:5;}
  .abil{width:52px;height:52px;border-radius:14px;border:2px solid var(--line);
    background:var(--panel2);color:var(--ink);font-size:22px;cursor:pointer;position:relative;
    display:flex;align-items:center;justify-content:center;}
  .abil .cd{position:absolute;inset:0;background:rgba(10,8,20,.72);border-radius:12px;
    display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:bold;color:var(--dim);}
  .abil.ready{border-color:var(--gold);box-shadow:0 0 10px #ffd16655;}
  .abil.targeting{border-color:var(--green);box-shadow:0 0 12px var(--green);}
  .abil.dead{border-color:var(--red);}
  /* ============ Buttons ============ */
  .bigBtn{background:linear-gradient(180deg,#ffd166,#f4a259);color:#3a2410;font-weight:bold;
    border:none;border-radius:14px;padding:12px 26px;font-size:16px;cursor:pointer;
    letter-spacing:.5px;box-shadow:0 4px 0 #b97c2a;}
  .bigBtn:active{transform:translateY(3px);box-shadow:0 1px 0 #b97c2a;}
  .ghostBtn{background:var(--panel2);color:var(--ink);border:2px solid var(--line);
    border-radius:14px;padding:10px 20px;font-size:14px;cursor:pointer;font-weight:bold;}
  /* ============ Bottom panel ============ */
  #bottom{background:var(--panel);border-top:2px solid #3a2f6b;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));flex-shrink:0;min-height:92px;}
  .shopRow{display:flex;gap:7px;}
  .shopBtn{flex:1;background:var(--panel2);border:2px solid var(--line);border-radius:12px;
    color:var(--ink);padding:5px 2px;text-align:center;cursor:pointer;}
  .shopBtn:active{transform:scale(.95);}
  .shopBtn.sel{border-color:var(--gold);background:#3a2f6b;}
  .shopBtn.cant{opacity:.42;}
  .shopBtn .em{font-size:19px;display:block;}
  .shopBtn .nm{font-size:9px;display:block;color:var(--dim);font-weight:bold;text-transform:uppercase;}
  .shopBtn .pr{font-size:11px;color:var(--gold);font-weight:bold;}
  #upPanel{display:none;}
  #upPanel.show{display:block;}
  #shopPanel.hide{display:none;}
  .upHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:12px;font-weight:bold;}
  .upRow{display:flex;gap:8px;}
  .upBtn{flex:1;background:var(--panel2);border:2px solid var(--line);border-radius:12px;
    color:var(--ink);padding:7px 2px;text-align:center;cursor:pointer;font-size:11px;}
  .upBtn:active{transform:scale(.95);}
  .upBtn.cant{opacity:.42;}
  .upBtn b{display:block;font-size:12px;}
  .upBtn .pr{color:var(--gold);font-weight:bold;}
  .upBtn.sellBtn{border-color:#7a3450;}
  .upBtn.sellBtn .pr{color:var(--red);}
  .xBtn{background:none;border:none;color:var(--dim);font-size:18px;cursor:pointer;padding:0 6px;}
  /* ============ Overlays ============ */
  .overlay{position:absolute;inset:0;background:rgba(13,10,26,.93);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:12px;text-align:center;padding:18px;z-index:10;overflow-y:auto;}
  .overlay h1{font-size:27px;letter-spacing:2px;}
  .overlay h2{font-size:21px;}
  .overlay p{color:var(--dim);font-size:13px;max-width:320px;line-height:1.45;}
  .hidden{display:none !important;}
  .wallet{display:flex;gap:16px;font-size:16px;font-weight:bold;}
  .wallet .g{color:var(--gold);} .wallet .s{color:var(--star);}
  .lvlRow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;max-width:340px;}
  .chapterHead{flex-basis:100%;text-align:center;font-weight:bold;font-size:15px;color:var(--gold);
    letter-spacing:1px;margin:6px 0 0;text-shadow:0 1px 8px rgba(255,209,102,.35);}
  .diffRow{display:flex;gap:6px;flex-basis:100%;justify-content:center;margin-bottom:2px;}
  .diffBtn{background:linear-gradient(180deg,#2a2350,#201a3c);border:2px solid #4a3c88;border-radius:10px;
    color:var(--dim);font-weight:bold;font-size:12px;padding:7px 12px;cursor:pointer;}
  .diffBtn.sel{border-color:var(--gold);color:var(--ink);background:linear-gradient(180deg,#3a2f6b,#2c2452);}
  .achList{width:100%;max-width:420px;display:flex;flex-direction:column;gap:6px;padding-bottom:16px;}
  .achItem{display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,#241d44,#1c1733);
    border:2px solid #3a3068;border-radius:12px;padding:8px 12px;opacity:.55;}
  .achItem.got{opacity:1;border-color:var(--gold);background:linear-gradient(180deg,#332a5e,#241d44);}
  .achItem .achIcon{font-size:26px;flex-shrink:0;}
  .achItem .achInfo{flex:1;text-align:left;min-width:0;}
  .achItem .achInfo b{font-size:14px;display:block;}
  .achItem .achInfo span{font-size:11px;color:var(--dim);}
  .achItem .achTick{color:var(--green);font-weight:bold;font-size:18px;}
  .lvlBtn{width:92px;height:92px;border-radius:16px;border:2px solid var(--line);
    background:var(--panel2);color:var(--ink);cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    font-weight:bold;font-size:12px;}
  .lvlBtn .em{font-size:25px;}
  .lvlBtn.locked{opacity:.35;}
  .lvlBtn .stars{font-size:11px;color:var(--gold);min-height:13px;}
  /* upgrades screen */
  #upgScreen{justify-content:flex-start;padding-top:14px;}
  .upgList{width:100%;max-width:420px;display:flex;flex-direction:column;gap:6px;padding-bottom:20px;}
  .upgGroup{font-size:13px;font-weight:bold;color:var(--gold);text-align:left;
    margin-top:10px;letter-spacing:1px;text-transform:uppercase;}
  .upgGroup.starG{color:var(--star);}
  .upgRow{display:flex;align-items:center;gap:8px;background:var(--panel);
    border:2px solid var(--line);border-radius:12px;padding:8px 10px;text-align:left;}
  .upgInfo{flex:1;min-width:0;}
  .upgInfo b{font-size:13px;display:block;}
  .upgInfo span{font-size:11px;color:var(--dim);}
  .pips{font-size:10px;letter-spacing:2px;color:var(--gold);}
  .buyBtn{background:var(--panel2);border:2px solid var(--line);border-radius:10px;
    color:var(--ink);font-weight:bold;padding:8px 10px;cursor:pointer;font-size:12px;min-width:64px;}
  .buyBtn.cant{opacity:.42;}
  .buyBtn.maxed{border-color:var(--green);color:var(--green);opacity:.8;}
  .topRow{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:420px;}
  /* ============ Home extras / Settings / IO ============ */
  .homeRow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px;}
  .homeRow .ghostBtn{padding:8px 14px;font-size:13px;}
  .setRow{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:300px;font-weight:bold;font-size:14px;}
  #volSlider{width:100%;max-width:300px;accent-color:var(--gold);height:26px;}
  .credits{font-size:11px;color:var(--dim);line-height:1.5;}
  #tutScreen p{max-width:320px;line-height:1.5;font-size:15px;}
  .tutDots{letter-spacing:6px;color:var(--gold);font-size:13px;margin:6px 0 10px;}
  #ioText{width:100%;max-width:340px;background:var(--panel);color:var(--ink);
    border:2px solid var(--line);border-radius:10px;padding:10px;font-size:12px;
    font-family:monospace;resize:none;word-break:break-all;}
  .ioBtns{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center;}
  /* ============ Wave preview ============ */
  #wavePreview{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-bottom:8px;}
  .wpItem{background:rgba(34,28,61,.9);border:1px solid var(--line);border-radius:8px;
    padding:2px 7px;font-size:12px;font-weight:bold;white-space:nowrap;}
  /* ============ End-screen star reveal ============ */
  .endStars{display:flex;gap:14px;min-height:50px;align-items:center;justify-content:center;font-size:42px;}
  .endStars .star.off{opacity:.22;filter:grayscale(1);}
  .endStars .star.on{opacity:0;transform:scale(0);animation:starPop .5s ease-out forwards;}
  .endStars .star.s1{animation-delay:.15s;}
  .endStars .star.s2{animation-delay:.45s;}
  .endStars .star.s3{animation-delay:.75s;}
  @keyframes starPop{
    0%{opacity:0;transform:scale(0) rotate(-40deg);}
    60%{opacity:1;transform:scale(1.35) rotate(10deg);}
    100%{opacity:1;transform:scale(1) rotate(0);}
  }
  /* ============ Menu polish (richer than the flat defaults) ============ */
  #hud{background:linear-gradient(180deg,#241d44,#1a1530);}
  #bottom{background:linear-gradient(180deg,#1a1530,#241d44);}
  .iconBtn{background:linear-gradient(180deg,#342c60,#241d44);border-color:#5847a3;}
  .overlay{background:radial-gradient(125% 85% at 50% -5%, #322459 0%, #1a1430 55%, #0c0a18 100%);}
  .overlay h1{
    background:linear-gradient(180deg,#ffffff,#c9b6ff 70%,#9b7bff);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:drop-shadow(0 3px 16px rgba(155,93,229,.55));
  }
  .overlay h2{color:#efeaff;text-shadow:0 2px 12px rgba(0,0,0,.55);}
  .overlay p{color:#b9add9;}
  .wallet>span{
    background:rgba(28,23,51,.9);border:1.5px solid var(--line);border-radius:999px;
    padding:6px 15px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 3px 10px rgba(0,0,0,.35);
  }
  .bigBtn{box-shadow:0 5px 0 #b97c2a,0 9px 20px rgba(0,0,0,.5);}
  .ghostBtn{
    background:linear-gradient(180deg,#362d63,#241d44);
    border:2px solid #6052a8;box-shadow:0 3px 0 #15102b,0 5px 14px rgba(0,0,0,.4);
    transition:transform .06s,box-shadow .06s;
  }
  .ghostBtn:active{transform:translateY(2px);box-shadow:0 1px 0 #15102b;}
  .lvlBtn{
    background:linear-gradient(180deg,#382e69,#241d44);
    border:2px solid #6052a8;box-shadow:0 4px 0 #14102a,0 7px 16px rgba(0,0,0,.45);
    transition:transform .06s,box-shadow .06s;
  }
  .lvlBtn:not(.locked):active{transform:translateY(2px);box-shadow:0 2px 0 #14102a;}
  .lvlBtn .em{filter:drop-shadow(0 2px 5px rgba(0,0,0,.55));}
  .lvlBtn .stars{color:var(--gold);text-shadow:0 1px 4px rgba(255,209,102,.4);}
  .upgRow{
    background:linear-gradient(180deg,#2c2456,#201a3c);
    border:2px solid #4d3f92;box-shadow:0 3px 9px rgba(0,0,0,.35);
  }
  .upgInfo b{color:#f3eeff;}
  .upgGroup{text-shadow:0 1px 7px rgba(255,209,102,.35);}
  .upgGroup.starG{text-shadow:0 1px 7px rgba(158,240,255,.35);}
  .buyBtn{
    background:linear-gradient(180deg,#40347a,#2c2452);
    border:2px solid #7160bf;box-shadow:0 3px 0 #15102b;transition:transform .06s,box-shadow .06s;
  }
  .buyBtn:not(.cant):not(.maxed):active{transform:translateY(2px);box-shadow:0 1px 0 #15102b;}
  .credits{opacity:.85;}
  /* ============ Upgrades: tabs / hero card / refund ============ */
  .upgTabs{display:flex;gap:6px;width:100%;max-width:420px;margin-bottom:6px;position:sticky;top:0;}
  .upgTab{flex:1;background:linear-gradient(180deg,#2a2350,#201a3c);border:2px solid #4a3c88;
    border-radius:10px;color:var(--dim);font-weight:bold;font-size:12px;padding:8px 2px;cursor:pointer;}
  .upgTab.sel{border-color:var(--gold);color:var(--ink);background:linear-gradient(180deg,#3a2f6b,#2c2452);
    box-shadow:0 0 10px rgba(255,209,102,.25);}
  .heroCard{display:flex;align-items:center;gap:12px;width:100%;max-width:420px;
    background:linear-gradient(180deg,#332a5e,#241d44);border:2px solid var(--gold);
    border-radius:14px;padding:10px 12px;box-shadow:0 4px 12px rgba(0,0,0,.4);}
  .heroCard .heroPic{font-size:40px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5));flex-shrink:0;}
  .heroCard .heroPic img{width:52px;height:52px;object-fit:contain;display:block;}
  .heroCard .heroPic .heroEm{font-size:42px;}
  .heroCard.sel{border-color:var(--gold);box-shadow:0 0 12px rgba(255,209,102,.35);}
  .heroCard.locked{opacity:.5;}
  .heroCard:not(.sel):not(.locked){cursor:pointer;}
  .heroCard .heroMeta{display:flex;flex-direction:column;gap:3px;text-align:left;flex:1;min-width:0;}
  .heroBar{height:8px;background:#15102b;border:1px solid var(--line);border-radius:6px;overflow:hidden;margin:2px 0;}
  .heroBarFill{height:100%;background:linear-gradient(90deg,#ffd166,#f4a259);border-radius:6px;transition:width .3s;}
  .heroCard .heroMeta b{font-size:16px;}
  .heroCard .heroMeta span{font-size:11px;color:var(--dim);}
  .heroCard .heroSub{color:var(--star) !important;}
  .refBtn{background:#2c2452;border:2px solid #7a3450;border-radius:10px;color:var(--red);
    font-weight:bold;font-size:14px;min-width:34px;cursor:pointer;}
  .refBtn:active{transform:scale(.92);}
  /* ============ Level editor (overlay over the board) ============ */
  #editor{position:absolute;inset:0;z-index:12;pointer-events:none;}
  #editor>*{pointer-events:auto;}
  .edBar{display:flex;flex-wrap:wrap;gap:5px;align-items:center;padding:6px;
    background:rgba(13,10,26,.9);border-bottom:2px solid var(--line);}
  .edBar button{background:var(--panel2);border:2px solid var(--line);border-radius:8px;
    color:var(--ink);font-weight:bold;font-size:12px;padding:6px 9px;cursor:pointer;}
  .edBar .edMode.sel{border-color:var(--gold);background:#3a2f6b;}
  .edName{font-weight:bold;font-size:12px;min-width:64px;text-align:center;color:var(--gold);}
  .edHint{position:absolute;bottom:8px;left:8px;right:8px;text-align:center;font-size:11px;
    color:var(--ink);background:rgba(13,10,26,.8);border-radius:8px;padding:6px;pointer-events:none;}
  #edExportBox{position:absolute;top:54px;left:8px;right:8px;background:rgba(13,10,26,.96);
    border:2px solid var(--line);border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:6px;}
  #edText{width:100%;height:90px;background:var(--panel);color:var(--ink);border:2px solid var(--line);
    border-radius:8px;padding:8px;font-family:monospace;font-size:11px;resize:none;}
  .edExportBtns{display:flex;gap:8px;}
  .edExportBtns button{flex:1;background:var(--panel2);border:2px solid var(--line);border-radius:8px;
    color:var(--ink);font-weight:bold;padding:8px;cursor:pointer;}