:root{
  --bg:#06070d;
  --bg-2:#0a0c14;
  --panel:#121521;
  --panel-2:#171b2b;
  --panel-3:#1c2135;
  --line:#23283f;
  --line-strong:#323958;
  --text:#f2f4ff;
  --muted:#9aa3c7;
  --dim:#6b7396;
  --click:#a8ff6a;
  --click-2:#5fd92b;
  --level:#b9c2e6;
  --prestige:#ff78ca;
  --super:#b98aff;
  --honor:#ffd77a;
  --heat:#ff5454;
  --rebirth:#ff5b5b;
  --diamond:#ffffff;
  --challenge:#b71c1c;
  --good:#b6ff8c;
  --bad:#ff8383;
  --radius-xl:12px;
  --radius-lg:10px;
  --radius-md:8px;
  --radius-sm:6px;
  --shadow:0 16px 50px rgba(0,0,0,.45);
  --shadow-soft:0 8px 28px rgba(0,0,0,.30);
  --max-w:1180px;
}
*{
  box-sizing:border-box;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(1200px 700px at 15% -10%, rgba(168,255,106,.055), transparent 60%),
    radial-gradient(900px 600px at 90% -5%, rgba(185,138,255,.06), transparent 55%),
    linear-gradient(180deg, #07080f 0%, #05060b 100%);
  font:15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit}
button{border:0;cursor:pointer;background:none}
a{color:#cfe1ff}
.wrap{width:min(var(--max-w), calc(100% - 32px));margin:auto}
.top{
  position:sticky;top:0;z-index:40;
  background:rgba(7,8,15,.82);
  backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0 8px}
.brandLine{display:flex;align-items:center;gap:14px;width:100%;justify-content:space-between}
.logo{font-weight:900;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:#dfe5ff}
.logo b{color:var(--click)}
.pill{border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.035);padding:8px 12px;color:var(--muted);font-size:12px}
.pill:empty{display:none}
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:10px;
  padding:4px 0 14px;
}
.stat{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.022));
  border-radius:var(--radius-md);
  padding:11px 13px;
  min-width:0;
  box-shadow:var(--shadow-soft);
}
.stat .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.stat .v{font-size:20px;font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.stat .v strong{font-weight:850}
.click{color:var(--click)}
.level{color:var(--level)}
.prestige{color:var(--prestige)}
.super{color:var(--super)}
.honor{color:var(--honor)}
.heat{color:var(--heat)}
.rebirth{color:var(--rebirth)}
.diamond{color:var(--diamond)}
.challenge{color:var(--challenge)}
main{padding:22px 0 44px}
.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:16px;margin-bottom:18px}
.card{
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow);
  padding:20px;
  position:relative;
  overflow:visible;
}
.title{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;font-weight:700}
.big{font-size:clamp(34px, 6.5vw, 70px);font-weight:900;letter-spacing:-.045em;margin:2px 0 8px}
.sub{color:var(--muted);max-width:66ch}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.sep{height:1px;background:var(--line);margin:16px 0}
.btn{
  border:1px solid var(--line-strong);
  background:#e9ecff;
  color:#0a0d18;
  border-radius:var(--radius-sm);
  padding:11px 16px;
  font-weight:800;
  letter-spacing:.03em;
  transition:transform .12s ease, filter .12s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  clip-path: polygon(6px 0%, 100% 0%, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0% 100%, 0% 6px);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:disabled{opacity:.40;cursor:not-allowed;transform:none;filter:none;box-shadow:none}
.btn.dark{background:#151928;color:#eaf0ff;border-color:#2a304b}
.btn.dark:hover{background:#1c2238;border-color:#384166}
.btn.ghost{background:rgba(255,255,255,.03);color:#d5dcff;border-color:#2a304b}
.btn.ghost:hover{background:rgba(255,255,255,.07);border-color:#384166}
.btn.clickBtn{
  background:linear-gradient(180deg, #b8ff85, #9ef559);
  color:#071c00;
  border-color:rgba(168,255,106,.65);
  min-height:50px;
  font-size:15px;
  box-shadow:0 4px 16px rgba(168,255,106,.20);
}
.btn.prestigeBtn{
  background:linear-gradient(180deg, #ff96d7, #ff72c6);
  color:#1b0013;
  border-color:rgba(255,120,202,.55);
  box-shadow:0 4px 16px rgba(255,120,202,.20);
}
.btn.superBtn{
  background:linear-gradient(180deg, #c7a1ff, #b17aff);
  color:#140028;
  border-color:rgba(185,138,255,.55);
  box-shadow:0 4px 16px rgba(185,138,255,.20);
}
.btn.heatBtn{
  background:linear-gradient(180deg, #ff6c6c, #ff4c4c);
  color:#240000;
  border-color:rgba(255,84,84,.55);
  box-shadow:0 4px 16px rgba(255,84,84,.20);
}
.btn.rebirthBtn{
  background:linear-gradient(180deg, #ff7a7a, #ff5757);
  color:#240000;
  border-color:rgba(255,91,91,.55);
  box-shadow:0 4px 16px rgba(255,91,91,.20);
}
.btn.challengeBtn{
  background:linear-gradient(180deg, #991b1b, #7f1414);
  color:#fff0f0;
  border-color:rgba(220,38,38,.55);
  box-shadow:0 4px 16px rgba(183,28,28,.22);
}