:root {
  --bg: #090c10;
  --bg-soft: #0d1117;
  --panel: #111720;
  --panel-2: #151d27;
  --panel-3: #1a2430;
  --line: #25303d;
  --line-bright: #344455;
  --text: #f3f7fa;
  --muted: #98a6b5;
  --muted-2: #6f7d8d;
  --aqua: #39e6d0;
  --aqua-soft: #1aa89b;
  --red: #ff4d5d;
  --red-soft: #bb3341;
  --green: #5ee28a;
  --amber: #f6c85f;
  --shadow: 0 18px 60px rgba(0,0,0,.34);
  --radius: 14px;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    var(--bg);
  background-size: 34px 34px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
img { max-width: 100%; }

.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 16px; top: 16px; z-index: 999; background: #fff; color: #000; padding: 8px 12px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(9,12,16,.9);
  backdrop-filter: blur(14px);
}

.nav-wrap {
  width: min(var(--max), calc(100% - 36px));
  height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 900; letter-spacing: -.02em; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid rgba(57,230,208,.4);
  background: #101820;
  clip-path: polygon(10% 0, 100% 0, 100% 90%, 90% 100%, 0 100%, 0 10%);
  color: var(--aqua);
  font-size: 14px;
}
.brand-word { font-size: 19px; }
.brand-word .accent { color: var(--red); }

.nav-links { display: flex; align-items: center; gap: 7px; }
.nav-link { color: var(--muted); padding: 9px 12px; border-radius: 9px; font-size: 14px; font-weight: 700; }
.nav-link:hover, .nav-link.active { color: #fff; background: rgba(255,255,255,.055); }
.nav-actions { display: flex; align-items: center; gap: 9px; }
.menu-btn { display:none; background:none; color:#fff; border:1px solid var(--line); border-radius:9px; padding:8px 10px; }

.btn {
  min-height: 42px;
  border-radius: 9px;
  padding: 0 16px;
  border: 1px solid var(--line);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 800;
  font-size: 14px;
  transition: .18s ease;
  background: var(--panel-2);
  color: #fff;
}
.btn:hover { transform: translateY(-1px); border-color: var(--line-bright); }
.btn-primary { background: var(--aqua); color: #04110f; border-color: var(--aqua); }
.btn-primary:hover { background: #68f1df; }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }

.container { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }
.section { padding: 92px 0; }
.section-compact { padding: 62px 0; }
.eyebrow { color: var(--aqua); font-size: 12px; font-weight: 900; letter-spacing: .17em; text-transform: uppercase; }
.section-title { margin: 8px 0 12px; font-size: clamp(30px, 5vw, 48px); line-height: 1.05; letter-spacing: -.045em; }
.section-lead { max-width: 700px; color: var(--muted); font-size: 17px; margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.hero { padding: 96px 0 80px; overflow: hidden; position: relative; }
.hero::after {
  content: "";
  position: absolute;
  width: 440px; height: 440px; right: -160px; top: 30px;
  border: 1px solid rgba(57,230,208,.14);
  transform: rotate(18deg);
  box-shadow: inset 0 0 0 38px rgba(57,230,208,.018), inset 0 0 0 76px rgba(255,77,93,.012);
  pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 58px; align-items: center; position: relative; z-index: 1; }
.hero h1 { font-size: clamp(48px, 8vw, 82px); line-height: .95; letter-spacing: -.065em; margin: 14px 0 20px; max-width: 760px; }
.hero h1 .aqua { color: var(--aqua); }
.hero h1 .red { color: var(--red); }
.hero-copy { color: #b4bfca; font-size: 18px; max-width: 660px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-note { margin-top: 22px; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:13px; }
.dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 16px rgba(94,226,138,.55); }

.server-card { border: 1px solid var(--line); background: rgba(17,23,32,.88); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.server-card-top { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 20px; border-bottom:1px solid var(--line); background:#0f151d; }
.server-card-title { font-weight:900; font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.server-card-body { padding: 22px; }
.ip-row { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; background:#0b1016; border:1px solid var(--line); padding:11px 12px; border-radius:10px; }
.ip-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; overflow-wrap:anywhere; }
.status-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
.status-stat { border:1px solid var(--line); background:#0d131a; padding:13px; border-radius:10px; }
.status-stat b { display:block; font-size:18px; }
.status-stat span { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }

.mode-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#0b0f14; }
.mode-strip-inner { display:grid; grid-template-columns:repeat(5,1fr); }
.mode { padding:19px 12px; text-align:center; color:var(--muted); font-size:13px; font-weight:900; border-right:1px solid var(--line); }
.mode:last-child { border-right:0; }
.mode strong { color:#fff; display:block; font-size:15px; }

.features-grid { margin-top:34px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.feature-card { border:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:22px; min-height:198px; transition:.2s ease; }
.feature-card:hover { border-color:#3a4857; transform:translateY(-2px); }
.feature-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:9px; background:#0c1319; border:1px solid var(--line); color:var(--aqua); font-weight:1000; margin-bottom:18px; }
.feature-card h3 { margin:0 0 8px; font-size:18px; }
.feature-card p { margin:0; color:var(--muted); font-size:14px; }
.feature-card.favorite { border-color:rgba(57,230,208,.4); box-shadow:inset 0 0 0 1px rgba(57,230,208,.08); }

.kit-showcase { display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center; }
.kit-window { background:#0d1218; border:1px solid #394654; border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
.kit-window-bar { padding:13px 15px; display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); background:#161e28; font-family:ui-monospace,monospace; }
.kit-title { color:var(--aqua); font-weight:900; }
.kit-editor-body { display:grid; grid-template-columns:1fr 138px; gap:12px; padding:14px; }
.inventory { display:grid; grid-template-columns:repeat(9,1fr); gap:5px; }
.slot { aspect-ratio:1; min-width:0; border:1px solid #465462; background:#252e39; box-shadow:inset 0 0 0 2px rgba(0,0,0,.18); display:grid; place-items:center; color:#dae3eb; font-size:clamp(11px,1.7vw,19px); }
.slot.hot { border-color:#8b6970; background:#33252a; }
.slot.aqua-slot { border-color:var(--aqua-soft); color:var(--aqua); }
.kit-tools { display:flex; flex-direction:column; gap:7px; }
.tool { border:1px solid var(--line); background:#121923; border-radius:8px; padding:10px; font-size:12px; color:var(--muted); }
.tool b { display:block; color:#fff; margin-bottom:3px; }
.search-demo { border-color:rgba(57,230,208,.45); }
.search-input-demo { margin-top:7px; background:#080c11; border:1px solid #33404c; padding:7px 8px; color:#d7e1e8; border-radius:5px; font-family:ui-monospace,monospace; }
.check-list { display:grid; gap:10px; margin-top:24px; }
.check { display:flex; gap:10px; align-items:flex-start; color:#c4ced7; font-size:14px; }
.check::before { content:"✓"; color:var(--aqua); font-weight:1000; }

.inspiration { border:1px solid var(--line); background:#0f151c; border-radius:14px; padding:22px 24px; display:flex; gap:16px; align-items:flex-start; }
.inspiration-mark { width:4px; min-height:60px; background:var(--red); border-radius:999px; flex:none; }
.inspiration h3 { margin:0 0 6px; }
.inspiration p { margin:0; color:var(--muted); }

.cta-panel { border:1px solid var(--line); background:#101720; border-radius:18px; padding:34px; display:flex; justify-content:space-between; gap:28px; align-items:center; }
.cta-panel h2 { margin:0 0 7px; font-size:30px; letter-spacing:-.03em; }
.cta-panel p { margin:0; color:var(--muted); }
.cta-actions { display:flex; flex-wrap:wrap; gap:10px; }

.page-hero { padding:66px 0 42px; border-bottom:1px solid var(--line); background:#0b1016; }
.page-hero h1 { font-size:clamp(38px,7vw,64px); line-height:1; letter-spacing:-.055em; margin:10px 0 14px; }
.page-hero p { color:var(--muted); max-width:730px; margin:0; font-size:16px; }

/* Leaderboard */
.leaderboard-shell { padding:42px 0 92px; }
.lb-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.lb-tabs { display:flex; gap:7px; flex-wrap:wrap; }
.tab-btn { background:#0f151c; color:var(--muted); border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-weight:800; font-size:13px; }
.tab-btn:hover, .tab-btn.active { color:#07110f; background:var(--aqua); border-color:var(--aqua); }
.search-box { min-width:min(100%,300px); display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:#0c1117; border-radius:9px; padding:0 12px; }
.search-box input { width:100%; min-height:40px; background:transparent; border:0; outline:0; color:#fff; }
.lb-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; margin:12px 2px; color:var(--muted); font-size:13px; }
.live-badge { display:inline-flex; align-items:center; gap:7px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; font-size:11px; }
.live-badge .light { width:7px; height:7px; border-radius:50%; background:var(--muted-2); }
.live-badge.connected { color:var(--green); }
.live-badge.connected .light { background:var(--green); box-shadow:0 0 12px rgba(94,226,138,.6); }
.lb-card { border:1px solid var(--line); border-radius:12px; overflow:hidden; background:#0c1117; }
.lb-head, .lb-row { display:grid; grid-template-columns:70px minmax(220px,1.35fr) 100px 120px 130px minmax(180px,1fr); align-items:center; gap:10px; padding:0 18px; }
.lb-head { min-height:44px; color:var(--muted-2); text-transform:uppercase; font-size:10px; letter-spacing:.1em; font-weight:900; border-bottom:1px solid var(--line); background:#10161e; }
.lb-row { min-height:68px; border-bottom:1px solid rgba(37,48,61,.75); }
.lb-row:last-child { border-bottom:0; }
.lb-row:hover { background:#101720; }
.rank-num { color:#778798; font-family:ui-monospace,monospace; font-weight:900; }
.rank-num.top { color:var(--amber); }
.player-cell { display:flex; align-items:center; gap:11px; min-width:0; }
.avatar { width:36px; height:36px; border-radius:7px; display:grid; place-items:center; background:#17222d; border:1px solid #2e3d4c; font-weight:1000; color:var(--aqua); flex:none; }
.player-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:850; }
.tier-badge { display:inline-flex; align-items:center; justify-content:center; min-width:54px; border:1px solid #44515f; background:#161f29; border-radius:7px; padding:5px 7px; font-weight:1000; font-size:12px; }
.tier-HT1,.tier-LT1 { color:#ffda72; border-color:#725e2c; }
.tier-HT2,.tier-LT2 { color:#ff8d85; border-color:#6a3935; }
.tier-HT3,.tier-LT3 { color:#ffb168; border-color:#684b2e; }
.tier-HT4,.tier-LT4 { color:#d1d7df; }
.tier-HT5,.tier-LT5 { color:#86a7ff; border-color:#3a4c76; }
.score { font-family:ui-monospace,monospace; color:#d9e2ea; }
.mode-badges { display:flex; gap:5px; flex-wrap:wrap; }
.mode-mini { font-size:10px; font-weight:900; border:1px solid var(--line); border-radius:5px; padding:3px 5px; color:var(--muted); }
.lb-empty { padding:54px 24px; text-align:center; color:var(--muted); }
.lb-empty strong { color:#fff; display:block; font-size:18px; margin-bottom:6px; }

/* Store */
.store-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }
.store-card { border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:24px; display:flex; flex-direction:column; min-height:260px; }
.store-card .tag { width:max-content; color:var(--aqua); border:1px solid rgba(57,230,208,.28); background:rgba(57,230,208,.05); border-radius:999px; padding:4px 8px; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.store-card h3 { font-size:22px; margin:17px 0 8px; }
.store-card p { margin:0; color:var(--muted); font-size:14px; }
.store-card .btn { margin-top:auto; align-self:flex-start; }
.disclaimer { margin-top:18px; color:var(--muted-2); font-size:12px; }

/* Play */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:32px; }
.step { border:1px solid var(--line); background:var(--panel); border-radius:14px; padding:23px; }
.step-num { width:30px; height:30px; border-radius:7px; display:grid; place-items:center; background:var(--aqua); color:#03110f; font-weight:1000; margin-bottom:17px; }
.step h3 { margin:0 0 7px; }
.step p { color:var(--muted); margin:0; font-size:14px; }
.faq { display:grid; gap:10px; margin-top:28px; }
details { border:1px solid var(--line); background:#0e141b; border-radius:10px; padding:14px 16px; }
summary { cursor:pointer; font-weight:800; }
details p { color:var(--muted); margin:10px 0 0; }

.site-footer { border-top:1px solid var(--line); padding:34px 0; background:#080b0f; }
.footer-grid { display:flex; justify-content:space-between; gap:22px; align-items:center; flex-wrap:wrap; }
.footer-links { display:flex; gap:16px; flex-wrap:wrap; color:var(--muted); font-size:13px; }
.footer-copy { color:var(--muted-2); font-size:12px; }

.toast { position:fixed; left:50%; bottom:26px; transform:translate(-50%,18px); opacity:0; pointer-events:none; background:#111923; border:1px solid #33404e; color:#fff; padding:10px 14px; border-radius:9px; box-shadow:var(--shadow); transition:.2s ease; z-index:100; font-size:13px; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (max-width: 920px) {
  .hero-grid, .kit-showcase { grid-template-columns:1fr; }
  .hero { padding-top:72px; }
  .hero h1 { max-width:650px; }
  .features-grid, .store-grid, .steps { grid-template-columns:repeat(2,1fr); }
  .mode-strip-inner { grid-template-columns:repeat(3,1fr); }
  .mode:nth-child(3) { border-right:0; }
  .mode:nth-child(-n+3) { border-bottom:1px solid var(--line); }
  .lb-head, .lb-row { grid-template-columns:55px minmax(190px,1.3fr) 85px 100px 110px; }
  .lb-modes-col { display:none; }
}

@media (max-width: 720px) {
  .nav-actions .btn-ghost { display:none; }
  .menu-btn { display:block; }
  .nav-links { display:none; position:absolute; left:18px; right:18px; top:72px; padding:10px; background:#0d1218; border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); flex-direction:column; align-items:stretch; }
  .nav-links.open { display:flex; }
  .nav-link { padding:11px 12px; }
  .features-grid, .store-grid, .steps { grid-template-columns:1fr; }
  .kit-editor-body { grid-template-columns:1fr; }
  .kit-tools { display:grid; grid-template-columns:repeat(2,1fr); }
  .status-row { grid-template-columns:1fr; }
  .cta-panel { align-items:flex-start; flex-direction:column; }
  .lb-head { display:none; }
  .lb-row { grid-template-columns:42px 1fr auto; gap:8px; padding:13px 12px; }
  .lb-score-col, .lb-record-col, .lb-modes-col { display:none; }
  .lb-tier-col { justify-self:end; }
  .section { padding:70px 0; }
  .page-hero { padding-top:48px; }
}

@media (max-width: 460px) {
  .container, .nav-wrap { width:min(100% - 24px, var(--max)); }
  .nav-actions .btn-primary { display:none; }
  .hero { padding-top:56px; }
  .hero h1 { font-size:47px; }
  .mode-strip-inner { grid-template-columns:repeat(2,1fr); }
  .mode { border-bottom:1px solid var(--line); }
  .mode:nth-child(2n) { border-right:0; }
  .inventory { gap:3px; }
  .slot { border-width:1px; }
}

/* v2 polish */
.feature-focus { background:#0a0f14; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.systems-section { padding-top:80px; }
.compact-hero { padding:58px 0 34px; }
.compact-hero h1 { margin-bottom:0; }
.join-card { max-width:760px; }
.play-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; }

.lb-row {
  width:100%;
  color:inherit;
  text-align:left;
  border:0;
  border-bottom:1px solid rgba(37,48,61,.75);
  background:transparent;
  cursor:pointer;
}
.lb-row:focus-visible { outline:2px solid var(--aqua); outline-offset:-2px; }
.player-ident { min-width:0; }
.player-online { display:flex; align-items:center; gap:6px; margin-top:2px; color:var(--muted-2); font-size:10px; font-weight:750; }
.status-dot { width:6px; height:6px; border-radius:50%; background:#566270; display:inline-block; flex:none; }
.status-dot.online { background:var(--green); box-shadow:0 0 9px rgba(94,226,138,.5); }
.lb-record-col { display:flex; gap:8px; align-items:center; font-family:ui-monospace,monospace; font-size:12px; }
.mode-mini b { color:#dfe7ee; }
.lb-empty span { display:block; margin-top:4px; }

.player-modal { position:fixed; inset:0; z-index:200; display:grid; place-items:center; opacity:0; transition:opacity .16s ease; }
.player-modal.open { opacity:1; }
.player-modal-backdrop { position:absolute; inset:0; background:rgba(2,5,8,.76); backdrop-filter:blur(8px); }
.player-panel { position:relative; width:min(560px,calc(100% - 28px)); max-height:min(720px,calc(100vh - 40px)); overflow:auto; border:1px solid var(--line-bright); background:#0d131a; border-radius:16px; padding:24px; box-shadow:0 28px 90px rgba(0,0,0,.56); }
.player-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:8px; border:1px solid var(--line); color:#fff; background:#151d27; font-size:22px; line-height:1; }
.player-panel-head { display:flex; align-items:center; gap:14px; padding-right:40px; }
.avatar-lg { width:50px; height:50px; font-size:15px; }
.player-panel-name { font-size:24px; font-weight:950; letter-spacing:-.03em; }
.player-panel-sub { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; margin-top:2px; }
.player-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin:22px 0; }
.player-stats > div { border:1px solid var(--line); background:#101720; border-radius:10px; padding:12px; }
.player-stats b { display:block; font-size:18px; }
.player-stats span { color:var(--muted-2); text-transform:uppercase; letter-spacing:.07em; font-size:9px; font-weight:900; }
.player-modes-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:9px; }
.player-mode-card { border:1px solid var(--line); background:#10161e; border-radius:10px; padding:12px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:7px 10px; }
.player-mode-card > span { font-weight:850; }
.player-mode-card small { grid-column:1 / -1; color:var(--muted-2); }

.store-hero { border-bottom:1px solid var(--line); background:linear-gradient(120deg,#0b1016 0%,#10141b 60%,#171014 100%); padding:78px 0; }
.store-hero-inner { display:flex; align-items:end; justify-content:space-between; gap:28px; }
.store-hero h1 { font-size:clamp(44px,8vw,78px); line-height:.95; letter-spacing:-.06em; margin:10px 0 14px; }
.store-hero p { margin:0; color:var(--muted); font-size:17px; }
.store-main-btn { min-width:150px; }

.error-page { min-height:100vh; display:grid; place-items:center; padding:40px 0; }
.error-card { text-align:center; max-width:620px; }
.error-code { color:var(--aqua); font-family:ui-monospace,monospace; font-size:clamp(72px,18vw,150px); font-weight:1000; line-height:.8; letter-spacing:-.08em; opacity:.88; }
.error-card h1 { font-size:36px; margin:24px 0 8px; }
.error-card p { color:var(--muted); margin:0 0 24px; }
.error-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }

@media (max-width:720px) {
  .store-hero-inner { align-items:flex-start; flex-direction:column; }
  .player-stats { grid-template-columns:repeat(2,1fr); }
  .player-modes-grid { grid-template-columns:1fr; }
}

/* v3: real Minecraft heads + MCTiers-style mode identity */
.player-head {
  display:block;
  object-fit:cover;
  image-rendering:pixelated;
  background:#111820;
  overflow:hidden;
}
.player-head.avatar-lg { width:56px; height:56px; }
.mode-icon { width:18px; height:18px; display:inline-block; object-fit:contain; vertical-align:middle; flex:none; }
.mode-icon-mini { width:14px; height:14px; }
.tab-mode-icon { width:17px; height:17px; }
.mode-icon-lg { width:28px; height:28px; margin:0 auto 8px; filter:drop-shadow(0 3px 9px rgba(0,0,0,.3)); }
.mode[data-mode-key] { position:relative; box-shadow:inset 0 2px 0 color-mix(in srgb, var(--mode-color, #26313d) 75%, transparent); }
.mode[data-mode-key]:hover { background:color-mix(in srgb, var(--mode-color, #1a2028) 12%, #0b0f14); }
.tab-btn { display:inline-flex; align-items:center; gap:7px; }
.tab-btn.active { box-shadow:inset 0 -2px 0 var(--mode-color, var(--aqua)); }
.mode-mini { display:inline-flex; align-items:center; gap:4px; border-color:color-mix(in srgb, var(--mode-color, #33404c) 40%, var(--line)); background:color-mix(in srgb, var(--mode-color, #151b22) 7%, #11171e); }
.player-mode-card { border-color:color-mix(in srgb, var(--mode-color, #33404c) 35%, var(--line)); }
.player-mode-card .mode-name { display:flex; align-items:center; gap:7px; font-weight:850; }
.player-mode-card .mode-name .mode-icon { width:19px; height:19px; }

/* v4: real in-game custom kit editor screenshot */
.kit-screenshot-frame {
  margin:0;
  border:1px solid #394654;
  border-radius:14px;
  background:#080b0f;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.kit-screenshot-frame img {
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  image-rendering:auto;
}
@media (max-width:920px) {
  .mode-strip-inner { grid-template-columns:repeat(5,1fr); }
  .mode:nth-child(3) { border-right:1px solid var(--line); }
  .mode:nth-child(-n+3) { border-bottom:0; }
}
@media (max-width:720px) {
  .mode-strip-inner { grid-template-columns:repeat(3,1fr); }
  .mode:nth-child(3) { border-right:0; }
  .mode:nth-child(-n+3) { border-bottom:1px solid var(--line); }
}
@media (max-width:460px) {
  .mode-strip-inner { grid-template-columns:repeat(2,1fr); }
}

/* v5: refined rankings + full ranked mode set */
:root { --panel-glow: rgba(57,230,208,.08); }
.mode-strip-inner { grid-template-columns: repeat(8, 1fr); }
.mode { min-height: 92px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; transition:background .18s ease, transform .18s ease; }
.mode:hover { transform: translateY(-1px); }
.mode strong { font-size:14px; letter-spacing:.01em; }
.lb-toolbar { padding:12px; border:1px solid var(--line); background:rgba(13,17,23,.82); border-radius:12px; }
.lb-tabs { flex:1; min-width:0; }
.tab-btn { min-height:38px; padding:8px 11px; background:#0b1117; }
.tab-btn.active { color:#fff; background:color-mix(in srgb, var(--mode-color, var(--aqua)) 16%, #0e151c); border-color:color-mix(in srgb, var(--mode-color, var(--aqua)) 62%, var(--line)); box-shadow:inset 0 -2px 0 var(--mode-color, var(--aqua)); }
.search-box { background:#090e13; }
.points-key { display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:13px 0 16px; }
.points-key-label { color:var(--muted-2); text-transform:uppercase; font-size:10px; font-weight:950; letter-spacing:.12em; margin-right:2px; }
.point-chip { display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:#10161e; border-radius:999px; padding:5px 8px; font-size:10px; font-weight:900; }
.point-chip b { color:#fff; font-family:ui-monospace,monospace; font-size:10px; }
.lb-card { box-shadow:0 16px 50px rgba(0,0,0,.2); }
.lb-head, .lb-row { grid-template-columns:70px minmax(220px,1.4fr) 100px 110px 130px minmax(210px,1.1fr); }
.lb-row { transition:background .14s ease; }
.lb-row:hover { background:linear-gradient(90deg, rgba(57,230,208,.035), rgba(255,255,255,.018)); }
.lb-score-col { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-weight:900; color:#e7edf2; }
.mode-mini { white-space:nowrap; }
.player-panel { border-color:#334251; background:linear-gradient(180deg,#0e151d,#0b1016); }
.player-stats > div { background:#0e151d; }
.player-mode-card { min-height:70px; }
.compact-hero { background:radial-gradient(circle at 75% 0%, rgba(57,230,208,.07), transparent 34%), #0b1016; }
@media (max-width:1100px) { .mode-strip-inner { grid-template-columns:repeat(4,1fr); } .mode:nth-child(4n){border-right:0;} }
@media (max-width:920px) { .mode-strip-inner { grid-template-columns:repeat(4,1fr); } }
@media (max-width:720px) { .mode-strip-inner { grid-template-columns:repeat(2,1fr); } .mode:nth-child(2n){border-right:0;} .points-key { overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; } .point-chip { flex:none; } }

/* Selected leaderboard mode: make the active mode tier unmistakable in the Modes column. */
.mode-mini.selected-mode-mini {
  border-color: color-mix(in srgb, var(--mode-color, #33404c) 60%, #ffffff 12%);
  background: color-mix(in srgb, var(--mode-color, #33404c) 14%, #101720);
  box-shadow: inset 2px 0 0 var(--mode-color, #33404c);
}
.mode-mini.selected-mode-mini b {
  color: #ffffff;
}

/* v8: resilient external player-head resolution */
.player-head:not([data-head-loaded="1"]) {
  background:linear-gradient(110deg,#111820 30%,#1b2631 45%,#111820 60%);
  background-size:220% 100%;
  animation:head-loading 1.35s linear infinite;
}
.player-head[data-head-loaded="1"] { animation:none; }
@keyframes head-loading { to { background-position:-220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .player-head:not([data-head-loaded="1"]) { animation:none; }
}

/* Last-known leaderboard state: rankings stay readable even while the game server
   or JSON endpoint is temporarily unavailable. */
.live-badge.cached { color: var(--amber); }
.live-badge.cached .light { background: var(--amber); box-shadow: 0 0 12px rgba(246,200,95,.45); }

/* ===== Store v10 ===== */
.store-app { min-height: 75vh; }
.store-hero-v2 { position: relative; overflow: hidden; border-bottom: 1px solid var(--line, #202a34); }
.store-hero-v2::before { content:""; position:absolute; inset:-40% 40% -60% -10%; background:radial-gradient(circle at 45% 45%, rgba(33,231,210,.12), transparent 58%); pointer-events:none; }
.store-hero-split { display:grid; grid-template-columns:1fr auto; align-items:center; gap:36px; position:relative; }
.store-hero-split h1 { max-width:760px; }
.coin-accent { color:#f0c75e; }
.store-balance-card { min-width:240px; border:1px solid #354353; background:linear-gradient(145deg,#141b23,#0d1218); border-radius:18px; padding:20px 24px; box-shadow:0 24px 70px rgba(0,0,0,.25); }
.balance-label { display:block; color:#7890a9; text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:800; }
.store-balance-card strong { display:block; margin:5px 0 2px; font-size:34px; color:#fff; }
.store-balance-card small { color:#8ea2b8; }
.coin-orb { color:#f0c75e; text-shadow:0 0 16px rgba(240,199,94,.35); }
.store-section-tight { padding-top:46px; }
.store-layout { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start; }
.store-main-column { min-width:0; }
.store-account-column { position:sticky; top:90px; }
.store-section-head,.account-section-title { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; }
.store-section-head h2,.account-section-title h2 { margin:4px 0 0; }
.store-sync-pill { border:1px solid #285d57; background:#0d201e; color:#6ee7d8; padding:7px 10px; border-radius:999px; font-size:12px; font-weight:800; }
.store-sync-pill.offline { border-color:#4b3f28; background:#211a0d; color:#d7b770; }
.rank-product-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.rank-product { position:relative; overflow:hidden; border:1px solid #2a3643; border-radius:20px; padding:25px; background:linear-gradient(155deg,#151d26 0%,#0d1218 72%); min-height:350px; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,.18); }
.rank-product-plus { border-color:#654a79; background:linear-gradient(155deg,#1b1622 0%,#0e1117 72%); }
.product-glow { position:absolute; width:240px; height:240px; border-radius:50%; filter:blur(70px); opacity:.14; right:-110px; top:-120px; background:#20e7d2; pointer-events:none; }
.rank-product-plus .product-glow { background:#c074ef; opacity:.18; }
.product-topline { display:flex; justify-content:space-between; align-items:center; color:#91a3b6; }
.rank-crown { width:39px; height:39px; display:grid; place-items:center; border:1px solid #2c6f67; background:#0d2522; color:#4df0dc; border-radius:12px; font-size:17px; }
.rank-product-plus .rank-crown { border-color:#704f87; background:#24172e; color:#d899ff; }
.rank-duration { font-size:12px; text-transform:uppercase; letter-spacing:.13em; font-weight:800; }
.rank-product h3 { font-size:38px; margin:28px 0 8px; letter-spacing:-.03em; }
.rank-product-plus h3 { color:#dd9cff; }
.rank-product p { color:#94a7bb; margin:0 0 21px; min-height:48px; }
.rank-perks { display:grid; gap:10px; margin-bottom:25px; }
.rank-perks span { color:#c6d0da; font-size:14px; padding-left:23px; position:relative; }
.rank-perks span::before { content:"✓"; position:absolute; left:0; color:#38dbc7; font-weight:900; }
.rank-product-plus .rank-perks span::before { color:#ca7df1; }
.product-footer { margin-top:auto; border-top:1px solid #26313c; padding-top:20px; display:flex; align-items:end; justify-content:space-between; gap:14px; }
.product-price small { display:block; color:#74899e; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:800; }
.product-price strong { font-size:26px; }
.btn-vipplus { background:linear-gradient(135deg,#b463df,#7c4da1); color:#fff; border-color:transparent; }
.btn-vipplus:hover { filter:brightness(1.08); }
.rank-product button:disabled { opacity:.42; cursor:not-allowed; }
.skeleton-card { min-height:350px; background:linear-gradient(110deg,#111820 35%,#18222d 50%,#111820 65%); background-size:200% 100%; animation:storeShimmer 1.4s linear infinite; }
@keyframes storeShimmer { to { background-position:-200% 0; } }
.account-card,.purchase-history-card { border:1px solid #2b3744; background:#0f151c; border-radius:18px; padding:20px; }
.account-card-head { display:flex; align-items:center; gap:12px; padding-bottom:17px; border-bottom:1px solid #202b35; }
.account-card-head > div { display:grid; gap:2px; }
.account-card-head small { color:#8094a8; }
.account-icon,.account-avatar { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:#102826; color:#36e4d0; border:1px solid #285d57; font-weight:900; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:6px; background:#0a0f14; padding:5px; border-radius:12px; margin:18px 0 14px; }
.auth-tab { border:0; background:transparent; color:#7890a7; border-radius:9px; padding:10px; font-weight:800; cursor:pointer; }
.auth-tab.active { background:#17212b; color:#fff; }
.auth-form { display:none; gap:12px; }
.auth-form.is-active { display:grid; }
.auth-form[hidden] { display:none !important; }
.link-form { display:grid; gap:12px; }
.auth-form label,.link-form label { display:grid; gap:6px; color:#9db0c2; font-size:12px; font-weight:800; }
.auth-form input,.link-form input { width:100%; border:1px solid #31404e; background:#090e13; color:#f7fbff; border-radius:10px; padding:12px 13px; outline:none; }
.auth-form input:focus,.link-form input:focus { border-color:#25cdbb; box-shadow:0 0 0 3px rgba(37,205,187,.08); }
.auth-submit { width:100%; margin-top:2px; }
.account-identity { display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; margin-top:18px; }
.account-identity > div:nth-child(2) { display:grid; }
.account-identity small { color:#8396a9; }
.linked-player { display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; margin-top:17px; padding:13px; border:1px solid #29483f; background:#0c1c19; border-radius:13px; }
.linked-head-wrap img { width:48px; height:48px; image-rendering:pixelated; border-radius:9px; }
.linked-player > div:last-child { display:grid; gap:2px; min-width:0; }
.linked-player small,.linked-player span { color:#7f968f; font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.link-callout { display:grid; gap:4px; margin-top:17px; padding:13px; border-radius:12px; background:#121b24; border:1px solid #283746; }
.link-callout span { color:#8fa3b7; font-size:13px; line-height:1.45; }
.link-callout code { color:#fff; background:#080d12; border:1px solid #26313c; border-radius:5px; padding:1px 5px; }
.account-message { min-height:21px; margin-top:12px; color:#8ea1b4; font-size:13px; }
.account-message.success { color:#5fdfc6; }
.account-message.error { color:#ef7e83; }
.purchase-history-card { margin-top:24px; }
.purchase-history-list { display:grid; }
.purchase-row { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 0; border-top:1px solid #222d37; }
.purchase-row:first-child { border-top:0; }
.purchase-row > div:first-child { display:grid; gap:3px; }
.purchase-row small { color:#758a9f; }
.purchase-row-price { display:flex; align-items:center; gap:12px; }
.purchase-status { text-transform:capitalize; font-size:11px; font-weight:900; padding:5px 8px; border-radius:999px; border:1px solid #3a4651; color:#aab7c4; }
.status-completed { border-color:#2c6b5e; color:#69dfc5; background:#0c1e1a; }
.status-pending,.status-processing { border-color:#695a2e; color:#dbc26b; background:#211b0b; }
.status-failed { border-color:#6b3438; color:#e9848b; background:#210d0f; }
.purchase-empty { color:#7d91a6; padding:12px 0; }
.purchase-modal { position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:22px; opacity:0; transition:opacity .12s ease; }
.purchase-modal.open { opacity:1; }
.purchase-modal[hidden] { display:none; }
.purchase-modal-backdrop { position:absolute; inset:0; background:rgba(3,6,9,.78); backdrop-filter:blur(7px); }
.purchase-modal-panel { position:relative; width:min(430px,100%); border:1px solid #354250; background:#111820; border-radius:18px; padding:25px; box-shadow:0 35px 100px rgba(0,0,0,.48); }
.purchase-modal-panel h2 { font-size:28px; margin:5px 0 20px; }
.confirm-price,.confirm-balance { display:flex; align-items:center; justify-content:space-between; padding:13px 0; border-top:1px solid #25303a; color:#8da1b5; }
.confirm-price strong { color:#fff; font-size:22px; }
.confirm-balance b { color:#d3dce5; }
.purchase-modal-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
@media (max-width: 980px) { .store-layout{grid-template-columns:1fr}.store-account-column{position:static;order:-1}.store-hero-split{grid-template-columns:1fr}.store-balance-card{width:100%}.rank-product-grid{grid-template-columns:1fr 1fr} }
@media (max-width: 680px) { .rank-product-grid{grid-template-columns:1fr}.rank-product{min-height:320px}.store-section-head{align-items:flex-start;flex-direction:column}.purchase-row{align-items:flex-start}.purchase-row-price{flex-direction:column;align-items:flex-end}.store-balance-card strong{font-size:28px} }

/* Store v13: compact account controls + balance refresh */
.balance-card-top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.balance-refresh { width:30px; height:30px; border-radius:9px; border:1px solid #30404f; background:#0c131a; color:#9db0c2; display:grid; place-items:center; cursor:pointer; font-size:17px; line-height:1; transition:.15s ease; }
.balance-refresh:hover { color:#fff; border-color:#3c5c68; background:#121d25; }
.balance-refresh:disabled { opacity:.65; cursor:default; }
.balance-refresh.is-loading { animation:storeRefreshSpin .8s linear infinite; }
@keyframes storeRefreshSpin { to { transform:rotate(360deg); } }
.account-card-head { display:grid; grid-template-columns:auto minmax(0,1fr) auto; }
.account-card-title { min-width:0; }
.account-toggle { border:1px solid #30404f; background:#0b1117; color:#9db0c2; border-radius:9px; padding:7px 10px; font-size:12px; font-weight:800; cursor:pointer; }
.account-toggle:hover { color:#fff; background:#121b23; }
.account-card-body[hidden] { display:none !important; }
.account-card-body { padding-top:1px; }