:root{
  --bg0:#060a12;
  --bg1:#0a1322;
  --panel:#0d1a2c;
  --panel2:#12243c;
  --line:#1d3350;
  --text:#e9f2ff;
  --muted:#7f93ac;
  --cyan:#4de1ff;
  --lime:#b6ff2e;
  --magenta:#ff4dd8;
  --mint:#5dffb0;
  --orange:#ff8a2a;
  --gold:#ffd23e;
  --red:#ff4d6d;
  --danger:#ff4d6d;
  --warn:#ffd23e;
  --good:#5dffb0;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg0);
  color:var(--text);
  font-family:'Rajdhani',sans-serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  touch-action:none;
}
#app{height:100vh;width:100vw;position:relative;overflow:hidden;display:flex;flex-direction:column}
.grid-bg{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 520px at 15% -5%, rgba(77,225,255,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(255,77,216,.10), transparent 60%),
    radial-gradient(700px 500px at 80% -10%, rgba(182,255,46,.05), transparent 55%),
    var(--bg1);
  background-image:
    radial-gradient(900px 520px at 15% -5%, rgba(77,225,255,.10), transparent 60%),
    radial-gradient(900px 600px at 90% 110%, rgba(255,77,216,.10), transparent 60%),
    radial-gradient(700px 500px at 80% -10%, rgba(182,255,46,.05), transparent 55%),
    linear-gradient(rgba(77,225,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,225,255,.05) 1px, transparent 1px),
    var(--bg1);
  background-size:auto,auto,auto,44px 44px,44px 44px,auto;
  mask-image:radial-gradient(ellipse at 50% 35%, #000 25%, transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 35%, #000 25%, transparent 78%);
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.45;
  background:repeating-linear-gradient(0deg, transparent 0 3px, rgba(0,0,0,.16) 3px 4px);
}

.screen{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center}
.hidden{display:none !important}
.muted{color:var(--muted)}

/* ============ BOTONES ============ */
.btn{
  font-family:'Oxanium',sans-serif;font-weight:700;letter-spacing:.12em;
  border-radius:8px;cursor:pointer;border:1px solid var(--line);
  background:var(--panel2);color:var(--text);font-size:14px;
  padding:10px 22px;transition:transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  text-transform:uppercase;user-select:none;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none !important}
.btn-primary{
  border-color:var(--cyan);color:#03121a;
  background:linear-gradient(180deg,var(--cyan),#23b6d6);
  box-shadow:0 0 18px rgba(77,225,255,.35), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover{box-shadow:0 0 26px rgba(77,225,255,.6), inset 0 1px 0 rgba(255,255,255,.5)}
.btn-secondary{
  border-color:var(--magenta);color:#20021a;
  background:linear-gradient(180deg,var(--magenta),#c82fb0);
  box-shadow:0 0 18px rgba(255,77,216,.3);
}
.btn-secondary:hover{box-shadow:0 0 26px rgba(255,77,216,.55)}
.btn-ghost{border-color:var(--line);background:transparent;color:var(--muted)}
.btn-ghost:hover{color:var(--text);border-color:var(--cyan);box-shadow:0 0 14px rgba(77,225,255,.25)}
.btn-mini{padding:6px 12px;font-size:12px;border-color:var(--gold);color:var(--gold);background:rgba(255,210,62,.06)}
.btn-mini:hover{box-shadow:0 0 14px rgba(255,210,62,.4)}
.btn-icon{padding:6px 10px;font-size:14px;min-width:44px;border-color:var(--line);background:var(--panel)}
.btn-icon.active{color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 12px rgba(77,225,255,.3)}
.cost-tag{opacity:.9;font-family:'Share Tech Mono',monospace}
.btn-blink{animation:btnPulse 1.6s ease-in-out infinite}
@keyframes btnPulse{0%,100%{box-shadow:0 0 12px rgba(77,225,255,.25)}50%{box-shadow:0 0 30px rgba(77,225,255,.7)}}

/* ============ TÍTULO ============ */
.title-inner{text-align:center;display:flex;flex-direction:column;gap:30px;align-items:center;padding:20px;max-width:680px}
.logo-kicker{font-family:'Share Tech Mono',monospace;font-size:12px;letter-spacing:.5em;color:var(--muted);text-transform:uppercase}
.logo{font-family:'Oxanium',sans-serif;font-weight:800;line-height:.9;margin:8px 0 6px;user-select:none}
.logo-line{display:block;font-size:clamp(52px,10.5vw,104px);background:linear-gradient(180deg,#fff,#9fd8ff);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 60px rgba(77,225,255,.25)}
.logo-accent{background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--lime));-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 22px rgba(255,77,216,.35));animation:hue 8s linear infinite}
@keyframes hue{to{filter:hue-rotate(360deg)}}
.logo-sub{color:var(--muted);letter-spacing:.06em;font-size:16px;font-weight:600;max-width:520px}
.title-actions{display:flex;flex-direction:column;gap:13px;align-items:center;min-width:300px}
.title-actions .btn{width:100%;font-size:16px;padding:14px}
.highscore-line{display:flex;gap:10px;align-items:center;font-family:'Share Tech Mono',monospace;color:var(--muted);font-size:13px}
.hs-label{letter-spacing:.3em}
#hs-round{color:var(--gold);font-size:18px}
.synergy-legend{width:min(620px,92vw)}
.legend-title{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.4em;color:var(--muted);margin-bottom:12px}
.legend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px}
.legend-card{
  border:1px solid var(--line);background:rgba(13,26,44,.75);border-radius:10px;padding:8px 10px;
  display:flex;align-items:center;gap:10px;text-align:left;backdrop-filter:blur(4px);
  border-left:3px solid var(--cls,#4de1ff);
}
.legend-icon{width:40px;height:40px;flex:0 0 40px}
.legend-icon img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 6px var(--cls,#4de1ff))}
.cls-name{font-weight:800;font-size:13px;letter-spacing:.05em;text-transform:uppercase}
.cls-bonus{font-size:11px;color:var(--muted);line-height:1.25}

/* ============ HUD ============ */
#screen-game{flex-direction:column;gap:8px;padding:10px 14px;overflow:hidden}
#screen-game.locked #shop-bar,#screen-game.locked #bench{pointer-events:none;opacity:.55;filter:saturate(.7)}
#screen-game.locked #btn-levelup,#screen-game.locked #btn-reroll{pointer-events:none;opacity:.4}
#hud{
  width:100%;max-width:1120px;display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(180deg,rgba(13,26,44,.92),rgba(8,16,28,.92));
  border:1px solid var(--line);border-radius:12px;padding:8px 16px;backdrop-filter:blur(6px);
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.hud-left,.hud-right{display:flex;align-items:center;gap:20px}
.hud-item{display:flex;align-items:center;gap:8px}
.hud-key{font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--muted)}
.hud-val{font-family:'Oxanium',sans-serif;font-weight:800;font-size:20px;min-width:24px}
.hud-gold{color:var(--gold);text-shadow:0 0 14px rgba(255,210,62,.4)}
#hud-round{color:var(--cyan)}
.hud-boss{
  font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.2em;color:#ffb48a;
  border:1px solid rgba(255,77,109,.6);border-radius:6px;padding:4px 10px;
  background:rgba(255,77,109,.1);animation:btnPulse 1.4s ease-in-out infinite;
}
#hud-units{color:var(--mint)}

/* ============ SINERGIAS ============ */
#synergy-bar{width:100%;max-width:1120px;display:flex;gap:8px;flex-wrap:wrap;min-height:26px}
.syn-chip{
  display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.04em;
  border:1px solid;border-radius:999px;padding:3px 12px;cursor:default;transition:transform .12s ease;
}
.syn-chip:hover{transform:translateY(-2px)}
.syn-chip.inactive{opacity:.28;border-color:var(--line);color:var(--muted)}
.syn-chip.active{box-shadow:0 0 12px currentColor;text-shadow:0 0 8px rgba(0,0,0,.4)}
.syn-dots{font-family:'Share Tech Mono',monospace;font-size:9px}
.syn-count{background:rgba(0,0,0,.4);border-radius:999px;padding:0 6px;font-family:'Share Tech Mono',monospace;font-size:10px;min-width:16px;text-align:center}

/* ============ ARENA ============ */
#arena{
  width:100%;max-width:1120px;flex:1;min-height:0;position:relative;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 60px rgba(0,0,0,.5), 0 8px 40px rgba(0,0,0,.45);
  background:var(--bg1);
}
#arena-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:default}
.side-tag{
  position:absolute;top:10px;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.32em;
  color:var(--muted);z-index:5;padding:3px 12px;border-radius:5px;background:rgba(6,10,18,.65);
  border:1px solid;pointer-events:none;text-shadow:0 1px 3px #000;
}
.side-tag-left{left:14px;color:var(--cyan);border-color:rgba(77,225,255,.4)}
.side-tag-right{right:14px;color:var(--red);border-color:rgba(255,77,109,.4)}

/* ============ PANEL DE UNIDAD ============ */
#unit-panel{
  position:absolute;right:12px;bottom:12px;width:270px;z-index:10;
  background:linear-gradient(180deg,rgba(13,26,44,.96),rgba(8,14,26,.96));
  border:1px solid var(--cls,#4de1ff);border-radius:12px;padding:12px;
  box-shadow:0 8px 30px rgba(0,0,0,.6), 0 0 20px color-mix(in srgb, var(--cls,#4de1ff) 25%, transparent);
  animation:panelIn .25s ease;pointer-events:auto;
}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}}
.up-close{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:6px;
  background:rgba(255,77,109,.14);border:1px solid rgba(255,77,109,.6);color:var(--red);
  font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.up-close:hover{background:rgba(255,77,109,.3)}
.up-head{display:flex;gap:10px;align-items:center;margin-bottom:8px;padding-right:22px}
.up-portrait{width:54px;height:54px;flex:0 0 54px}
.up-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 8px var(--cls,#4de1ff))}
.up-name{font-family:'Oxanium',sans-serif;font-weight:800;font-size:16px;letter-spacing:.02em}
.up-star{color:var(--gold);font-size:13px}
.up-class{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.up-ability{margin-bottom:8px}
.up-ability .up-val{color:var(--text);font-size:13px}
.up-lab{font-family:'Share Tech Mono',monospace;font-size:9.5px;letter-spacing:.18em;color:var(--muted);display:block;margin-bottom:2px}
.up-stats{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;background:rgba(6,10,18,.55);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.us{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.us-k{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--muted)}
.us-v{font-family:'Oxanium',sans-serif;font-weight:800;font-size:13px;color:var(--text)}
.up-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.up-row .up-lab{margin:0}
.up-row .up-val{font-size:12.5px;font-weight:700;text-align:right}
.up-syn .up-val{color:var(--cls,#4de1ff)}
.up-syn.off .up-val{color:var(--muted);font-weight:600}
.up-fus .up-val{color:var(--gold)}
.up-fus.max .up-val{color:var(--mint)}
.up-foot{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.up-sell{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--gold)}
.up-hint{font-size:11px;color:var(--muted)}

.up-merge{
  background:rgba(255,210,62,.08);border:1px solid rgba(255,210,62,.5);border-radius:10px;
  padding:8px 10px;margin-bottom:6px;animation:btnPulse 1.4s ease-in-out infinite;
}
.up-mlab{font-family:'Oxanium',sans-serif;font-weight:800;font-size:12px;letter-spacing:.08em;color:var(--gold);margin-bottom:2px}
.up-mprev{font-family:'Share Tech Mono',monospace;font-size:11px;color:var(--text);margin-bottom:7px}
.btn-up{
  width:100%;font-family:'Oxanium',sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;
  color:#201500;background:linear-gradient(180deg,#ffe27a,var(--gold));
  border:1px solid #ffd23e;border-radius:8px;padding:8px;cursor:pointer;
  box-shadow:0 0 16px rgba(255,210,62,.5);
  transition:transform .12s ease, box-shadow .2s ease;
}
.btn-up:hover{transform:translateY(-2px);box-shadow:0 0 24px rgba(255,210,62,.8)}
.btn-up:active{transform:translateY(0)}
.btn-up:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}

/* ============ BANQUILLO ============ */
#bench{
  width:100%;max-width:1120px;border-radius:12px;padding:8px 14px;
  display:flex;align-items:center;gap:14px;
  background:linear-gradient(180deg,rgba(13,26,44,.85),rgba(8,16,28,.85));
  border:1px solid var(--line);backdrop-filter:blur(6px);
}
.bench-label{font-family:'Share Tech Mono',monospace;font-size:11px;letter-spacing:.25em;color:var(--muted);white-space:nowrap}
.bench-list{display:flex;gap:8px;flex-wrap:wrap;flex:1;min-height:64px}
.bench-slot{width:58px;height:64px;border:1px dashed var(--line);border-radius:10px;opacity:.5}
.bench-unit{
  width:58px;height:64px;border-radius:10px;border:1px solid var(--cls,#4de1ff);cursor:grab;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  background:linear-gradient(180deg,var(--panel2),var(--bg1));
  box-shadow:0 2px 10px rgba(0,0,0,.45), 0 0 12px color-mix(in srgb, var(--cls,#4de1ff) 25%, transparent);
  transition:transform .12s ease, box-shadow .15s ease;
  touch-action:none;
}
.bench-unit:hover{transform:translateY(-3px);box-shadow:0 6px 18px rgba(0,0,0,.5), 0 0 16px color-mix(in srgb, var(--cls,#4de1ff) 45%, transparent)}
.bench-unit.selected{outline:2px solid var(--gold);box-shadow:0 0 16px rgba(255,210,62,.6)}
.bench-unit.merge-ready{
  border-color:var(--gold);
  box-shadow:0 0 16px rgba(255,210,62,.55);
  animation:btnPulse 1.4s ease-in-out infinite;
}
.bu-ready{
  position:absolute;top:2px;left:2px;font-family:'Oxanium',sans-serif;font-weight:800;font-size:11px;
  color:#201500;background:var(--gold);border-radius:5px;padding:0 5px;z-index:3;
  box-shadow:0 0 8px rgba(255,210,62,.8);
}
.bench-unit:active{cursor:grabbing}
.bu-portrait{width:34px;height:34px;pointer-events:none}
.bu-portrait img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 5px var(--cls,#4de1ff))}
.bu-name{font-size:8px;font-weight:700;max-width:54px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);pointer-events:none}
.bu-meta{display:flex;gap:5px;align-items:center;font-family:'Share Tech Mono',monospace;pointer-events:none}
.bu-price{font-size:9px;color:var(--gold)}
.bu-star{font-size:8px;color:var(--gold)}
.bu-sell{
  position:absolute;top:3px;right:3px;width:17px;height:17px;border-radius:5px;
  background:rgba(255,77,109,.16);border:1px solid rgba(255,77,109,.65);color:var(--red);
  font-size:11px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  opacity:0;transition:opacity .12s ease;z-index:2;
}
.bench-unit:hover .bu-sell{opacity:1}
.bench-hint{font-size:11px;color:var(--muted);max-width:190px;display:none}
@media(min-width:860px){.bench-hint{display:block}}

/* ============ TIENDA ============ */
#shop-bar{
  width:100%;max-width:1120px;border-radius:12px;padding:10px 14px;
  display:flex;align-items:stretch;gap:12px;
  background:linear-gradient(180deg,rgba(13,26,44,.85),rgba(8,16,28,.85));
  border:1px solid var(--line);backdrop-filter:blur(6px);
}
.shop-list{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;flex:1}
.shop-item{
  border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--panel2),var(--bg1));
  padding:8px;cursor:pointer;position:relative;display:flex;flex-direction:column;gap:3px;
  border-top:3px solid var(--cls,#4de1ff);
  transition:transform .12s ease, box-shadow .18s ease, border-color .15s ease;
  user-select:none;
}
.shop-item:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.5), 0 0 16px color-mix(in srgb, var(--cls,#4de1ff) 35%, transparent)}
.shop-item:active{transform:scale(.97)}
.shop-item.affordable{box-shadow:0 0 12px rgba(255,210,62,.12)}
.shop-item.merge-ready{
  border-top:3px solid var(--gold);
  box-shadow:0 0 18px rgba(255,210,62,.35);
  animation:btnPulse 1.4s ease-in-out infinite;
}
.shop-item.sold{opacity:.32;pointer-events:none;filter:saturate(.3)}
.si-portrait{width:100%;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:none}
.si-portrait img{height:44px;width:auto;filter:drop-shadow(0 0 6px var(--cls,#4de1ff));pointer-events:none}
.si-name{font-size:12px;font-weight:700;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
.si-class{font-size:9px;font-family:'Share Tech Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--cls,#4de1ff);pointer-events:none}
.si-stats{font-family:'Share Tech Mono',monospace;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:4px;pointer-events:none}
.si-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;pointer-events:none}
.si-cost{font-family:'Oxanium',sans-serif;font-weight:800;color:var(--gold);font-size:13px}
.si-merge{font-family:'Share Tech Mono',monospace;font-size:9px;color:var(--gold)}
.shop-actions{display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:150px}
.shop-actions .btn{font-size:13px;padding:9px 12px;width:100%}

/* ============ OVERLAYS ============ */
.overlay{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,14,.8);backdrop-filter:blur(6px);animation:fadein .2s ease;
}
.overlay-dark{background:rgba(4,8,14,.55);backdrop-filter:blur(2px)}
@keyframes fadein{from{opacity:0}}
.count-num{
  font-family:'Oxanium',sans-serif;font-weight:800;font-size:150px;color:var(--cyan);
  text-shadow:0 0 60px rgba(77,225,255,.8), 0 0 120px rgba(77,225,255,.4);
}
.count-num.pop{animation:countPop .75s cubic-bezier(.2,1.6,.4,1)}
.count-num.go{color:var(--lime);text-shadow:0 0 60px rgba(182,255,46,.8)}
@keyframes countPop{0%{transform:scale(1.6);opacity:0}60%{transform:scale(.92);opacity:1}100%{transform:scale(1)}}

.result-box{
  border:1px solid var(--line);border-radius:16px;padding:30px 44px;text-align:center;
  background:linear-gradient(180deg,var(--panel2),var(--bg1));
  box-shadow:0 0 70px rgba(0,0,0,.6);animation:pop .35s cubic-bezier(.2,1.4,.4,1);max-width:92vw;min-width:340px;
}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.result-title{font-family:'Oxanium',sans-serif;font-weight:800;font-size:44px;letter-spacing:.08em;margin-bottom:4px}
.result-title.win{color:var(--lime);text-shadow:0 0 30px rgba(182,255,46,.5)}
.result-title.lose{color:var(--red);text-shadow:0 0 30px rgba(255,77,109,.5)}
.result-sub{color:var(--muted);margin-bottom:16px;font-size:16px}
.result-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.stat-chip{border:1px solid var(--line);border-radius:10px;padding:8px 16px;background:rgba(6,10,18,.6);min-width:92px}
.sc-key{display:block;font-family:'Share Tech Mono',monospace;font-size:9px;letter-spacing:.2em;color:var(--muted);margin-bottom:3px}
.sc-val{font-family:'Oxanium',sans-serif;font-weight:800;font-size:20px;color:var(--text)}
#btn-next{margin-top:4px;font-size:15px}

.help-box{
  border:1px solid var(--line);border-radius:16px;padding:26px 32px;max-width:580px;width:92vw;max-height:86vh;overflow:auto;
  background:linear-gradient(180deg,var(--panel2),var(--bg1));box-shadow:0 0 60px rgba(0,0,0,.6);
  animation:pop .35s cubic-bezier(.2,1.4,.4,1);
}
.help-box h3{font-family:'Oxanium',sans-serif;font-weight:800;letter-spacing:.1em;color:var(--cyan);margin-bottom:14px;font-size:20px}
.help-content{display:flex;flex-direction:column;gap:10px;font-size:14.5px;line-height:1.45;margin-bottom:18px}
.help-content p b{color:var(--gold)}

.go-inner{text-align:center;display:flex;flex-direction:column;gap:18px;align-items:center;padding:20px}
.go-title{font-family:'Oxanium',sans-serif;font-weight:800;font-size:clamp(30px,6vw,54px);color:var(--red);text-shadow:0 0 34px rgba(255,77,109,.4)}
.go-sub{color:var(--muted);font-size:17px}
.go-stats{display:flex;gap:14px}
.go-stat{border:1px solid var(--line);border-radius:12px;padding:14px 22px;background:var(--panel);min-width:140px}
.go-stat-key{display:block;font-family:'Share Tech Mono',monospace;font-size:10px;letter-spacing:.25em;color:var(--muted);margin-bottom:6px}
.go-stat-val{font-family:'Oxanium',sans-serif;font-weight:800;font-size:26px;color:var(--gold)}
.go-inner .btn{width:240px;font-size:15px;padding:13px}

.toast{
  position:fixed;bottom:118px;left:50%;transform:translateX(-50%);z-index:60;
  background:rgba(8,14,24,.96);border:1px solid var(--line);color:var(--text);
  padding:10px 20px;border-radius:8px;font-weight:700;letter-spacing:.05em;font-size:14px;
  box-shadow:0 6px 20px rgba(0,0,0,.5);animation:pop .25s ease;
}
.toast.warn{border-color:var(--red);color:var(--red)}
.toast.ok{border-color:var(--mint);color:var(--mint)}

.tooltip{
  position:fixed;z-index:70;pointer-events:none;max-width:250px;
  background:rgba(8,14,26,.97);border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:13px;line-height:1.5;box-shadow:0 8px 24px rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
}
.tooltip b{font-family:'Oxanium',sans-serif;font-size:13px;letter-spacing:.03em}
.tip-text{color:var(--text)}
.tip-meta{color:var(--muted);font-family:'Share Tech Mono',monospace;font-size:10.5px;letter-spacing:.03em}
.tip-star{color:var(--gold);font-size:10px}

/* ============ RESPONSIVE ============ */
@media(max-width:820px){
  #screen-game{padding:6px;gap:6px}
  #hud{flex-wrap:wrap;gap:8px;padding:6px 10px}
  .hud-item{gap:5px}
  .hud-key{display:none}
  #hud-boss{font-size:9px;padding:3px 7px}
  #unit-panel{right:8px;bottom:8px;width:min(250px,46vw);font-size:12px}
  #unit-panel .up-portrait{width:40px;height:40px;flex-basis:40px}
  #bench{padding:6px}
  .bench-list{min-height:54px;gap:6px}
  .bench-unit,.bench-slot{width:46px;height:54px}
  .bu-name{display:none}
  .shop-list{gap:6px}
  .shop-item{padding:6px;border-radius:10px}
  .shop-item .si-name{font-size:9px}
  .si-portrait{height:36px}
  .si-portrait img{height:36px}
  .shop-actions{min-width:0;flex-direction:row}
  .shop-actions .btn{font-size:11px;padding:8px}
  .bench-hint{display:none}
  .side-tag{font-size:8px}
}