:root{
  --bg:#05070c; --bg2:#0b1a12; --panel:rgba(18,26,40,.72); --border:rgba(90,209,255,.16);
  --portal:#7ee787; --portal-b:#3ee07f; --portal-glow:rgba(62,224,127,.6);
  --cyan:#5ad1ff; --gold:#ffd23f; --pink:#ff5db1; --text:#eaf0f7; --muted:#8b97a8;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;overflow:hidden;}
body{
  background:radial-gradient(130% 90% at 50% -10%, #103a22 0%, var(--bg) 58%);
  color:var(--text); font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  user-select:none; -webkit-user-select:none;
}
#app{display:flex; flex-direction:column; height:100dvh; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); gap:6px;}

/* HUD superior */
.hud-top{flex:none;}
.dim-row{display:flex; justify-content:space-between; align-items:baseline; font-size:12.5px; font-weight:800;}
.dim-cur{color:var(--cyan);} .dim-nxt{color:var(--muted); font-weight:600;}
.dim-bar{height:7px; background:rgba(255,255,255,.06); border-radius:6px; margin-top:4px; overflow:hidden;}
.dim-bar>i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--cyan),var(--portal-b)); transition:width .3s;}

/* Contadores */
.counters{flex:none; text-align:center;}
.schm{display:flex; align-items:center; justify-content:center; gap:8px; font-size:34px; font-weight:900; letter-spacing:-.02em;}
.schm .coin{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#bff5c4,var(--portal-b));box-shadow:0 0 14px var(--portal-glow);display:grid;place-items:center;font-size:15px;}
.counters .sub{display:flex; justify-content:center; gap:16px; font-size:12.5px; margin-top:2px;}
.counters .week b{color:var(--gold);} .counters .rate{color:var(--cyan); font-weight:800;}

/* Stage / canvas */
.stage{flex:1; position:relative; min-height:170px; display:flex; align-items:center; justify-content:center;}
#fx{position:absolute; inset:0; width:100%; height:100%; touch-action:manipulation;}
.combo{position:absolute; top:8px; left:50%; transform:translateX(-50%); font-weight:900; font-size:20px; color:var(--gold); text-shadow:0 2px 10px rgba(255,210,63,.5); pointer-events:none; opacity:0; transition:opacity .2s;}
.combo.on{opacity:1;}
.tap-hint{position:absolute; bottom:2px; left:0; right:0; text-align:center; color:var(--muted); font-size:12px; font-weight:600; pointer-events:none;}

/* Energía */
.energy-wrap{flex:none;}
.energy-bar{position:relative; height:26px; border-radius:9px; background:rgba(255,255,255,.06); overflow:hidden; border:1px solid var(--border);}
.energy-bar>i{position:absolute; inset:0; width:100%; transform-origin:left; background:linear-gradient(90deg,#2b6cff,var(--cyan)); transition:width .2s;}
.energy-bar>span{position:absolute; inset:0; display:grid; place-items:center; font-size:12.5px; font-weight:800; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); z-index:1;}
.energy-bar.low>i{background:linear-gradient(90deg,#ff4d4d,#ff8a3d);}

/* Acciones */
.actions{flex:none; display:flex; gap:8px;}
.btn{flex:1; border:none; border-radius:12px; padding:12px 8px; cursor:pointer; font-weight:900; font-size:13px; line-height:1.1; color:#fff;}
.btn:disabled{opacity:.45;}
.refill{background:linear-gradient(135deg,var(--gold),#ff9d00); color:#3a2400;}
.boost{background:linear-gradient(135deg,var(--pink),#c62fff); flex:.6;}

/* Tabs */
.tabs{flex:none; display:flex; gap:6px;}
.tab{flex:1; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:11px; padding:9px; color:var(--muted); font-weight:800; font-size:13px; cursor:pointer;}
.tab.active{background:rgba(62,224,127,.14); color:var(--portal); border-color:var(--portal-b);}

/* Paneles */
.panel{flex:none; display:none; background:var(--panel); backdrop-filter:blur(12px); border:1px solid var(--border); border-radius:16px; padding:10px; height:32dvh; overflow-y:auto;}
.panel.show{display:block;}

/* Mejoras */
.up{display:flex; align-items:center; gap:11px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:9px 11px; margin-bottom:7px; cursor:pointer; transition:box-shadow .15s, border-color .15s;}
.up.afford{border-color:var(--portal-b); box-shadow:0 0 0 1px var(--portal-b),0 0 14px rgba(62,224,127,.16);}
.up .ic{width:38px;height:38px;flex:none;border-radius:10px;background:#0c1220;display:grid;place-items:center;font-size:20px;}
.up .info{flex:1;min-width:0;}
.up .nm{font-weight:800;font-size:13.5px;}
.up .ds{font-size:11px;color:var(--portal);margin-top:1px;font-weight:600;}
.up .buy{text-align:right;flex:none;}
.up .cost{font-weight:900;font-size:13.5px;color:var(--gold);white-space:nowrap;}
.up.afford .cost{color:var(--portal);} .up .cost.cant{color:#ff6b6b;}
.up .lvl{font-size:10.5px;color:var(--muted);}
.up.flash{animation:flash .4s;}
@keyframes flash{0%{background:#1e3a28;}100%{background:rgba(255,255,255,.03);}}

/* Ranking */
.rank-head{font-size:13px;font-weight:800;color:var(--muted);margin:2px 4px 8px;display:flex;justify-content:space-between;}
.rank-head small{color:var(--cyan);font-weight:600;}
.rk{display:flex;align-items:center;gap:10px;padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.05);}
.rk .pos{width:26px;text-align:center;font-weight:900;font-size:14px;color:var(--muted);}
.rk.top1 .pos{color:var(--gold);} .rk.top2 .pos{color:#cfd6e0;} .rk.top3 .pos{color:#e08a4b;}
.rk .av{width:30px;height:30px;border-radius:50%;background:#0c1220;object-fit:cover;flex:none;}
.rk .nm{flex:1;font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.rk .sc{font-weight:900;color:var(--portal);font-size:13.5px;}
.rk.me{background:rgba(90,209,255,.1);border-radius:8px;}
.rank-empty{color:var(--muted);text-align:center;padding:24px 10px;font-size:13px;}
.myrank{margin-top:8px;text-align:center;font-size:12.5px;color:var(--cyan);font-weight:700;min-height:16px;}

.cta{display:block;text-align:center;color:var(--muted);font-size:12px;padding:6px 0 2px;text-decoration:none;}
.cta b{color:var(--portal);}

.mute{position:fixed;top:8px;right:10px;z-index:20;width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:rgba(18,26,40,.7);color:#fff;font-size:16px;cursor:pointer;display:grid;place-items:center;}
.prize{background:rgba(255,210,63,.1);border:1px solid rgba(255,210,63,.25);border-radius:10px;padding:8px 10px;font-size:12px;color:#ffe08a;text-align:center;margin-bottom:8px;}
.prize b{color:var(--gold);}
.poolbox{background:linear-gradient(135deg,rgba(62,224,127,.14),rgba(255,210,63,.12));border:1px solid var(--portal-b);border-radius:12px;padding:11px 12px;font-size:14px;color:#fff;text-align:center;margin-bottom:8px;font-weight:700;}
.poolbox b{color:var(--gold);font-size:17px;}
.poolbox .pl{color:var(--muted);font-weight:600;font-size:12px;}

/* Arena del jefe */
.boss-ov{position:fixed;inset:0;z-index:40;background:radial-gradient(120% 90% at 50% 15%,#3a0d1a,#05070c 68%);display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:22px;}
.boss-ov.show{display:flex;}
.boss-top{display:flex;align-items:center;gap:14px;width:100%;max-width:420px;}
.boss-emoji{font-size:58px;animation:bossbob .6s ease-in-out infinite alternate;}
@keyframes bossbob{from{transform:translateY(0) rotate(-4deg);}to{transform:translateY(-9px) rotate(4deg);}}
.boss-info{flex:1;min-width:0;} .boss-name{font-weight:900;font-size:20px;color:#ff6b6b;} .boss-sub{font-size:12px;color:var(--muted);}
.boss-timer{font-weight:900;font-size:28px;color:var(--gold);min-width:44px;text-align:right;}
.tug{position:relative;width:100%;max-width:420px;height:28px;border-radius:10px;background:linear-gradient(90deg,rgba(255,77,77,.4),rgba(255,77,77,.12));border:1px solid var(--border);overflow:hidden;}
.tug>i{position:absolute;left:0;top:0;bottom:0;width:50%;background:linear-gradient(90deg,#1f9d57,var(--portal-b));transition:width .07s linear;}
.tug-knot{position:absolute;top:-3px;bottom:-3px;width:4px;left:50%;background:#fff;box-shadow:0 0 10px #fff;transition:left .07s linear;}
.tug-lbl{display:flex;justify-content:space-between;width:100%;max-width:420px;font-size:12px;font-weight:800;color:var(--muted);margin-top:-8px;}
.boss-status{min-height:22px;font-weight:900;font-size:15px;color:var(--cyan);text-align:center;}
.boss-tap{width:100%;max-width:420px;padding:24px;border-radius:18px;background:linear-gradient(135deg,var(--portal-b),#1f9d57);color:#06210f;font-weight:900;font-size:22px;text-align:center;cursor:pointer;box-shadow:0 8px 26px var(--portal-glow);display:flex;flex-direction:column;align-items:center;gap:4px;}
.boss-tap:active{transform:scale(.98);}
.boss-tap .bt-ic{font-size:32px;}
.boss-tap.frozen{background:linear-gradient(135deg,#5ad1ff,#2b6cff);color:#04213f;}

#toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);background:rgba(24,34,52,.95);border:1px solid var(--border);color:var(--text);padding:11px 18px;border-radius:12px;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.5);opacity:0;transition:opacity .3s,transform .3s;z-index:50;text-align:center;max-width:88vw;}
#toast.show{opacity:1;transform:translateX(-50%) translateY(6px);}