:root{
  --neon:#39ff14; --neon2:#00e5ff; --hot:#ff2d55; --gold:#ffd60a;
  --bg0:#05060a; --glass:rgba(20,24,34,.55);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg0);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  color:#e8edf2;user-select:none;-webkit-user-select:none;touch-action:none;}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;}
#reveal{z-index:0;}
#tools{z-index:1;}
#site{position:fixed;inset:0;z-index:2;display:grid;gap:7px;padding:8px;
  padding-top:68px;pointer-events:none;
  grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
  grid-auto-rows:78px;align-content:start;}
.block{position:relative;border-radius:14px;overflow:hidden;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(160deg,rgba(255,255,255,.08),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(4px);
  box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform .08s;
  pointer-events:auto;cursor:crosshair;}
/* level-scaled “掉落道具”模块：青色脉冲光环 + 🎁 角标 */
.block.lootblock{border-color:var(--neon2);animation:lb 1.3s ease-in-out infinite;}
.block.lootblock::after{content:'🎁';position:absolute;left:4px;top:3px;font-size:13px;
  filter:drop-shadow(0 1px 2px #000);}
@keyframes lb{0%,100%{box-shadow:0 0 10px rgba(0,229,255,.35),0 6px 20px #000}
  50%{box-shadow:0 0 22px rgba(0,229,255,.85),0 6px 20px #000}}
.block .emoji{font-size:clamp(22px,4.4vw,40px);filter:drop-shadow(0 2px 4px #000);}
.block .lab{font-size:11px;opacity:.85;letter-spacing:.5px;}
.block .val{position:absolute;top:5px;right:7px;font-size:10px;color:var(--gold);font-weight:700;}
.block.super{border-color:var(--gold);box-shadow:0 0 18px rgba(255,214,10,.45),0 6px 20px #000;}
.block.big{grid-column:span 2;grid-row:span 2;}
.block .hp{position:absolute;left:6px;right:6px;bottom:6px;height:5px;border-radius:4px;
  background:rgba(0,0,0,.4);overflow:hidden;}
.block .hp>i{display:block;height:100%;background:linear-gradient(90deg,var(--hot),var(--gold));width:100%;}
.block.hit{transform:scale(.97);}
.block.dead{animation:die .35s forwards;pointer-events:none;}
@keyframes die{to{transform:scale(.2) rotate(18deg);opacity:0;}}

/* wallpaper covers site but lets clicks pass through to site when erased enough */
#wallpaper{z-index:6;pointer-events:none;}
#fx{z-index:5;pointer-events:none;}

/* transparent full-screen input layer (below flies & HUD) */
#input{position:fixed;inset:0;z-index:3;touch-action:none;}

/* HUD */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none;}
#topbar{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;
  gap:10px;padding:8px 12px;background:linear-gradient(180deg,rgba(5,6,10,.9),rgba(5,6,10,0));}
.stat{background:var(--glass);border:1px solid rgba(255,255,255,.12);border-radius:12px;
  padding:6px 12px;backdrop-filter:blur(8px);min-width:64px;}
.stat .k{font-size:10px;opacity:.6;letter-spacing:1px;}
.stat .v{font-size:18px;font-weight:800;line-height:1.1;}
#score .v{color:var(--neon);} #combo .v{color:var(--neon2);}
#combo.pulse{animation:cp .25s;} @keyframes cp{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.spacer{flex:1;}
.iconbtn{pointer-events:auto;width:42px;height:42px;border-radius:12px;border:1px solid rgba(255,255,255,.15);
  background:var(--glass);backdrop-filter:blur(8px);color:#fff;font-size:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;}
.iconbtn:active{transform:scale(.9);}

/* toolbar */
#toolbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;gap:8px;
  background:var(--glass);border:1px solid rgba(255,255,255,.12);padding:8px;border-radius:18px;
  backdrop-filter:blur(10px);pointer-events:auto;max-width:96vw;overflow-x:auto;}
.tool{position:relative;width:56px;height:56px;border-radius:14px;border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .1s,border-color .1s;flex:0 0 auto;}
.tool .e{font-size:24px;} .tool .n{font-size:9px;opacity:.7;margin-top:2px;}
.tool.sel{border-color:var(--neon);box-shadow:0 0 14px rgba(57,255,20,.5);transform:translateY(-4px);}
.tool .cnt{position:absolute;top:-6px;right:-6px;background:var(--hot);color:#fff;font-size:10px;
  font-weight:700;border-radius:10px;padding:1px 5px;min-width:16px;text-align:center;}
.tool.empty{opacity:.35;}

/* floating enemies (DOM) */
.enemy{position:fixed;z-index:4;font-size:26px;pointer-events:auto;cursor:pointer;
  filter:drop-shadow(0 2px 3px #000);will-change:transform;}
.flies{position:fixed;inset:0;z-index:4;pointer-events:none;}
/* tool drop pickups (spawned when a lootblock is destroyed) */
.drop{position:fixed;z-index:4;pointer-events:auto;cursor:pointer;font-size:30px;
  filter:drop-shadow(0 0 8px var(--gold));will-change:transform;
  display:flex;align-items:center;justify-content:center;animation:dp 1.1s ease-in-out infinite;}
.drop .amt{position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:800;color:var(--gold);background:rgba(0,0,0,.6);
  border-radius:8px;padding:0 5px;white-space:nowrap;}
@keyframes dp{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* overlays */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%,rgba(20,30,50,.85),rgba(2,3,6,.96));
  backdrop-filter:blur(6px);padding:20px;}
.card{width:min(440px,92vw);background:var(--glass);border:1px solid rgba(255,255,255,.15);
  border-radius:22px;padding:22px;box-shadow:0 20px 60px rgba(0,0,0,.6);}
.card h1{margin:0 0 6px;font-size:26px;background:linear-gradient(90deg,var(--neon),var(--neon2));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.card h2{margin:14px 0 8px;font-size:16px;color:var(--gold);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;
  padding:12px 20px;border-radius:14px;border:none;cursor:pointer;font-size:16px;font-weight:700;
  background:linear-gradient(90deg,var(--neon),var(--neon2));color:#04140a;width:100%;}
.btn:active{transform:scale(.97);} .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.2);}
.row{display:flex;gap:10px;} .row .btn{flex:1;}
.list{max-height:46vh;overflow-y:auto;margin-top:6px;}
.ach,.rank{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;
  background:rgba(255,255,255,.04);margin-bottom:7px;border:1px solid rgba(255,255,255,.07);}
.ach .ic{font-size:22px;} .ach .t{font-weight:700;font-size:14px;} .ach .d{font-size:11px;opacity:.65;}
.ach.locked{opacity:.4;} .ach .badge{margin-left:auto;font-size:11px;}
.rank .pos{font-weight:800;width:28px;} .rank .nm{flex:1;} .rank .sc{color:var(--neon);font-weight:800;}
.rank.me{background:rgba(57,255,20,.12);border-color:var(--neon);}
.hint{font-size:12px;opacity:.6;line-height:1.5;margin-top:8px;}
.hidden{display:none!important;}
#toast{position:fixed;left:50%;top:72px;transform:translateX(-50%);z-index:30;
  display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;}
.toast{background:var(--glass);border:1px solid var(--gold);color:var(--gold);
  padding:7px 14px;border-radius:12px;font-size:13px;font-weight:700;backdrop-filter:blur(8px);
  animation:tIn .3s, tOut .4s 1.6s forwards;text-shadow:0 0 8px rgba(255,214,10,.5);}
@keyframes tIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1}}
@keyframes tOut{to{opacity:0;transform:translateY(-10px)}}

/* loot card pop */
.loot{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%) scale(.6);z-index:25;
  width:min(320px,86vw);text-align:center;padding:26px 22px;border-radius:22px;
  background:linear-gradient(160deg,rgba(40,30,10,.95),rgba(20,15,5,.95));
  border:2px solid var(--gold);box-shadow:0 0 40px rgba(255,214,10,.5);
  animation:lootIn .45s cubic-bezier(.2,1.4,.4,1) forwards;}
@keyframes lootIn{to{transform:translate(-50%,-50%) scale(1)}}
.loot .big{font-size:54px;filter:drop-shadow(0 0 14px var(--gold));}
.loot h3{margin:8px 0 2px;color:var(--gold);font-size:22px;}
.loot p{margin:2px 0;font-size:13px;opacity:.8;}

/* damage number */
.dmg{position:fixed;z-index:6;font-weight:800;pointer-events:none;font-size:16px;
  text-shadow:0 0 6px #000;animation:dmgUp .8s forwards;}
@keyframes dmgUp{to{transform:translateY(-40px);opacity:0;}}
.shake{animation:shk .3s;} @keyframes shk{0%,100%{transform:translate(0,0)}25%{transform:translate(-6px,3px)}50%{transform:translate(5px,-4px)}75%{transform:translate(-4px,-3px)}}
@media (max-width:520px){
  #site{grid-auto-rows:70px;gap:6px;padding:6px;padding-top:66px;}
  .tool{width:50px;height:50px;}
  .stat{min-width:54px;padding:5px 9px;} .stat .v{font-size:15px;}
}