:root{
  --bg:#08090C;
  --surface:#0E1015;
  --surface-2:#14171D;
  --line:rgba(255,255,255,.07);
  --line-strong:rgba(255,255,255,.12);
  --accent:#C4F550;
  --accent-ink:#0A0B0F;
  --p2:#FF6E5A;
  --txt:#F2F4F7;
  --muted:rgba(242,244,247,.5);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
.tabular-nums{font-variant-numeric:tabular-nums}
.is-hidden{display:none !important}

::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:999px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.18)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  border-bottom:1px solid var(--line);
  background:rgba(8,9,12,.88);
  backdrop-filter:blur(14px);
}
.logo-mark{display:grid;place-items:center;height:34px;width:34px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface-2)}
.logo-mark svg{height:22px;width:22px;display:block}
.icon-btn{
  display:grid;place-items:center;height:36px;width:36px;flex:none;
  border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  color:rgba(242,244,247,.65);transition:color .15s,background .15s,border-color .15s;
}
.icon-btn:hover{background:rgba(255,255,255,.07);color:#fff;border-color:var(--line-strong)}
.icon-btn svg{height:17px;width:17px}
.icon-btn .snd-off{display:none}
.icon-btn.is-off .snd-on{display:none}
.icon-btn.is-off .snd-off{display:block}
.icon-btn.is-off{color:rgba(242,244,247,.32)}

/* ---------- atoms ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px}
.label{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:rgba(242,244,247,.4)}
.pill{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  border-radius:999px;padding:5px 11px;
  font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:rgba(242,244,247,.55);
}
.dot{height:7px;width:7px;border-radius:999px;background:var(--accent);flex:none;display:inline-block}
.dot-lg{height:11px;width:11px}
.dot-accent{animation:blink 2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:13px;padding:11px 16px;font-size:14px;font-weight:800;
  transition:background .15s,color .15s,border-color .15s,transform .08s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn svg{height:16px;width:16px}
.btn-primary{background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent)}
.btn-primary:hover{background:#d2ff61;border-color:#d2ff61}
.btn-ghost{background:rgba(255,255,255,.03);color:rgba(242,244,247,.82);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(255,255,255,.07);color:#fff;border-color:var(--line-strong)}

.segmented{display:inline-flex;align-items:center;gap:3px;border-radius:13px;border:1px solid var(--line);background:rgba(255,255,255,.025);padding:3px}
.seg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border-radius:10px;padding:7px 12px;font-size:12.5px;font-weight:800;
  color:rgba(242,244,247,.5);transition:background .15s,color .15s;
}
.seg-btn svg{height:14px;width:14px}
.seg-btn:hover{color:#fff;background:rgba(255,255,255,.05)}
.seg-btn.is-active{background:var(--accent);color:var(--accent-ink)}
.seg-btn.is-active:hover{background:var(--accent);color:var(--accent-ink)}

.range{
  -webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;
}
.range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:rgba(255,255,255,.10)}
.range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;height:18px;width:18px;border-radius:999px;
  background:var(--accent);border:3px solid #0E1015;margin-top:-6px;
}
.range::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.10)}
.range::-moz-range-thumb{height:14px;width:14px;border:3px solid #0E1015;border-radius:999px;background:var(--accent)}

.flag-btn{border-radius:999px;transition:transform .12s;flex:none}
.flag-btn:hover{transform:scale(1.04)}

.step{display:flex;gap:10px}
.step-num{
  display:grid;place-items:center;flex:none;height:24px;width:24px;border-radius:8px;
  background:rgba(196,245,80,.12);color:var(--accent);font-size:11px;font-weight:800;
}

/* ---------- Pikabu store ---------- */
.shop-grid{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.shop-item{display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:0;border:1px solid var(--line);border-radius:13px;background:rgba(255,255,255,.02);padding:12px}
.shop-item h3{font-size:13px;font-weight:800}
.shop-item p{margin-top:3px;font-size:11px;line-height:1.45;color:rgba(242,244,247,.42)}
.shop-buy{flex:none;padding:8px 11px;font-size:11px}
.shop-buy:disabled{opacity:.55;cursor:wait}
.shop-owned{flex:none;color:var(--accent);font-size:11px;font-weight:800}

/* ---------- battle hud ---------- */
.hud{border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:10px 12px;min-width:0}
.hud-top{display:flex;align-items:center;gap:9px;min-width:0}
.hud-r .hud-top{justify-content:flex-end}
.hud-flag{height:34px;width:34px;border-radius:999px;object-fit:cover;flex:none}
.hud-name{font-size:13.5px;font-weight:800;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-sub{display:flex;gap:6px;font-size:10.5px;color:rgba(242,244,247,.4);margin-top:1px}
.hp-track{height:9px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}
.hp-fill{height:100%;border-radius:999px;transition:width .16s linear,background .2s}
.hp-a{background:var(--accent)}
.hp-b{background:var(--p2)}
.hp-spawn{background:rgba(255,255,255,.45);transition:width .1s linear}
.hud-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:5px;font-size:10.5px;color:rgba(242,244,247,.45)}
.badge{
  flex:none;border-radius:999px;border:1px solid rgba(139,155,255,.4);background:rgba(139,155,255,.14);
  color:#B9C2FF;padding:2px 7px;font-size:10px;font-weight:800;white-space:nowrap;
}
.streak{
  flex:none;border-radius:999px;background:var(--accent);color:var(--accent-ink);
  padding:1px 7px;font-size:10px;font-weight:800;
}
.hud-r .streak{margin-left:0}

/* ---------- arena ---------- */
.arena{
  display:block;width:100%;aspect-ratio:1/1;height:auto;
  border-radius:20px;border:1px solid var(--line);background:#0A0C11;
}
.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:14px;border-radius:20px;background:rgba(6,7,10,.72);backdrop-filter:blur(6px);z-index:5}
.overlay.is-open{display:flex}
.result-card{
  width:100%;max-width:340px;border-radius:18px;border:1px solid var(--line-strong);
  background:var(--surface);padding:18px;text-align:center;animation:pop .22s ease-out;
}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.stat{border:1px solid var(--line);background:rgba(255,255,255,.02);border-radius:11px;padding:7px 9px}
.stat-k{display:block;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:rgba(242,244,247,.38)}
.stat-v{display:block;font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:1px}

/* ---------- log ---------- */
.log{max-height:232px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.log-row{display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.35;animation:slidein .18s ease-out}
@keyframes slidein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.log-row img{height:13px;width:19px;border-radius:2px;object-fit:cover;flex:none}
.log-row .log-name{font-weight:800;white-space:nowrap}
.log-row .log-txt{color:rgba(242,244,247,.45)}
.log-row.is-accent .log-txt{color:var(--accent)}
.log-row.is-ko{background:rgba(196,245,80,.08);border-radius:8px;padding:4px 6px}

/* ---------- leaders ---------- */
.lb-head{display:flex;align-items:center;gap:10px;padding:9px 12px;border-bottom:1px solid var(--line);color:rgba(242,244,247,.35)}
.lb-row{display:flex;align-items:center;gap:10px;padding:9px 12px;transition:background .12s}
.lb-row:hover{background:rgba(255,255,255,.025)}
.lb-row.is-mine{background:rgba(196,245,80,.055)}
.lb-rank{width:32px;flex:none;text-align:center;font-size:12px;font-weight:800;color:rgba(242,244,247,.3);font-variant-numeric:tabular-nums}
.lb-rank.is-top{color:var(--accent)}
.lb-flag{height:19px;width:28px;flex:none;border-radius:3px;object-fit:cover;background:#1a1d24}
.lb-name{flex:1;min-width:0;font-size:13px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-val{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;text-align:right;min-width:58px}
.lb-sub{font-size:10px;color:rgba(242,244,247,.32);text-align:right;margin-top:1px;font-variant-numeric:tabular-nums}
.skeleton{height:38px;border-radius:10px;background:rgba(255,255,255,.04);animation:pulse 1.4s ease-in-out infinite;margin:8px 12px}
@keyframes pulse{0%,100%{opacity:.45}50%{opacity:.9}}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:10px;background:rgba(4,5,8,.72);backdrop-filter:blur(6px)}
.modal.is-open{display:flex}
.modal-card{
  display:flex;flex-direction:column;width:100%;max-width:660px;max-height:min(86vh,760px);
  border-radius:18px;border:1px solid var(--line-strong);background:#0B0D12;overflow:hidden;
  animation:pop .18s ease-out;
}
.search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);height:15px;width:15px;color:rgba(242,244,247,.35);display:grid;place-items:center;pointer-events:none}
.search-icon svg,.search-icon i{height:15px;width:15px;display:block}
.search-input{
  width:100%;border-radius:11px;border:1px solid var(--line);background:rgba(255,255,255,.03);
  padding:9px 12px 9px 34px;font-size:13px;font-weight:600;color:var(--txt);outline:none;
}
.search-input::placeholder{color:rgba(242,244,247,.3);font-weight:500}
.search-input:focus{border-color:rgba(196,245,80,.5);background:rgba(255,255,255,.05)}
.pick{
  display:flex;align-items:center;gap:8px;border-radius:9px;padding:7px 9px;
  border:1px solid transparent;font-size:12.5px;font-weight:700;text-align:left;
  transition:background .12s,border-color .12s;
}
.pick:hover{background:rgba(255,255,255,.05)}
.pick.is-active{background:rgba(196,245,80,.10);border-color:rgba(196,245,80,.45)}
.pick img{height:15px;width:22px;border-radius:2px;object-fit:cover;flex:none;background:#1a1d24}
.pick span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);
  border-radius:12px;border:1px solid var(--line-strong);background:#14171D;
  padding:9px 14px;font-size:12px;font-weight:700;color:rgba(242,244,247,.85);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:80;
}
.toast.is-open{opacity:1;transform:translate(-50%,0)}