/* ─────────────────────────────────────────────────────────────────────
   pages.css — site-wide page primitives + per-page additions.
   Use alongside dark.css + dark-pages.css + homepage.css.
   All classes namespaced with .pg-* (page) or page-specific prefixes
   (auth-, dash-, shop-, etc.) so nothing collides with the legacy site.
   ───────────────────────────────────────────────────────────────────── */

/* ──────────────────────────────────────────
   Shared page shell (header + body)
   ────────────────────────────────────────── */
.pg {
  padding-top: 100px;
  padding-bottom: 80px;
  min-height: 100vh;
  position: relative;
}
.pg-head {
  padding: 56px 0 38px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.pg-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 30%, transparent), transparent);
}
.pg-eyebrow {
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.pg-eyebrow::before {
  content: ""; width: 8px; height: 8px; background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
}
.pg-title {
  font-family: var(--font-pixel);
  font-size: clamp(28px, 4.2vw, 52px);
  margin: 0;
  line-height: 1.05;
  letter-spacing: -.01em;
}
.pg-sub {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.55;
  max-width: 640px;
}
.pg-head-actions {
  position: absolute;
  right: 0; bottom: 24px;
  display: flex; gap: 8px; align-items: center;
}
.pg-body {
  padding: 48px 0 0;
}

/* Breadcrumb (pages with a back link) */
.pg-crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute); margin-bottom: 14px;
  letter-spacing: .04em;
}
.pg-crumbs a {
  color: var(--ink-soft);
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: color .15s, border-color .15s;
}
.pg-crumbs a:hover { color: var(--accent); border-color: var(--accent); }
.pg-crumbs .sep { color: var(--ink-mute); }

/* Sub-tabs (used on Dashboard, Wiki, etc.) */
.pg-tabs {
  display: flex; gap: 4px; margin-top: 28px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.pg-tabs::-webkit-scrollbar { display: none; }
.pg-tab {
  padding: 12px 18px;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
  background: none; border-left: none; border-right: none; border-top: none;
}
.pg-tab:hover { color: var(--ink); }
.pg-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Empty state */
.pg-empty {
  text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.pg-empty .icon { display: inline-block; margin-bottom: 16px; opacity: 0.6; }
.pg-empty h3 { font-family: var(--font-pixel); font-size: 16px; margin: 0 0 8px; }
.pg-empty p { margin: 0; color: var(--ink-soft); font-size: 14px; max-width: 380px; margin-inline: auto; }
.pg-empty .actions { margin-top: 22px; display: inline-flex; gap: 10px; }

/* ──────────────────────────────────────────
   AUTH (Login, Register, Password reset)
   ────────────────────────────────────────── */
.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 0;
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-1), var(--bg-2));
  box-shadow: 0 40px 80px -40px rgba(0,0,0,0.7);
  margin: 28px auto 0;
  max-width: 980px;
}
.auth-aside {
  padding: 42px 42px 36px;
  background:
    radial-gradient(ellipse 500px 400px at 100% 0%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--surface-2), var(--bg-3));
  border-right: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.auth-aside h2 {
  font-family: var(--font-pixel);
  font-size: clamp(24px, 3vw, 34px);
  margin: 24px 0 16px;
  line-height: 1.1;
}
.auth-aside p { color: var(--ink-soft); margin: 0 0 24px; font-size: 14px; line-height: 1.55; }
.auth-aside-perks {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 12px;
}
.auth-aside-perks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.5;
}
.auth-aside-perks li::before {
  content: ""; width: 8px; height: 8px;
  background: var(--accent); flex-shrink: 0; margin-top: 6px;
  box-shadow: 0 0 8px var(--accent);
}
.auth-aside-perks b { color: var(--ink); font-weight: 600; }

.auth-aside-foot {
  position: absolute; bottom: 24px; left: 42px; right: 42px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute);
}
.auth-aside-foot b { color: var(--ink-soft); }

.auth-form-wrap {
  padding: 42px 42px 36px;
  display: flex; flex-direction: column;
  background: var(--bg-2);
}
.auth-form-wrap h1 {
  font-family: var(--font-pixel);
  font-size: 22px;
  margin: 0 0 8px;
}
.auth-form-wrap > p.sub {
  color: var(--ink-soft);
  font-size: 14px;
  margin: 0 0 28px;
}

.auth-field {
  display: flex; flex-direction: column;
  gap: 6px; margin-bottom: 16px;
}
.auth-field label {
  font-family: var(--font-pixel);
  font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.auth-field input,
.auth-field select,
.auth-field textarea,
.pg-input {
  font-family: var(--font-mono);
  font-size: 14px;
  background: var(--bg-3);
  color: var(--ink);
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus,
.pg-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
.auth-field .hint {
  font-size: 12px; color: var(--ink-mute);
  margin-top: 2px;
}
.auth-field .err { color: var(--redstone); font-size: 12px; }

.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 4px 0 20px;
  font-size: 13px;
}
.auth-row label {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink-soft); cursor: pointer;
}
.auth-row a { color: var(--accent); }
.auth-row a:hover { text-decoration: underline; }

.auth-submit {
  width: 100%;
  margin-top: 4px;
}
.auth-foot {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
  text-align: center;
  color: var(--ink-soft);
  font-size: 13.5px;
}
.auth-foot a { color: var(--accent); }
.auth-foot a:hover { text-decoration: underline; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--ink-mute); font-size: 11px;
  font-family: var(--font-pixel); letter-spacing: .2em;
  margin: 22px 0;
}
.auth-divider::before, .auth-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.auth-step {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 22px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-mute);
}
.auth-step .pill {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border-radius: 4px;
  background: var(--bg-3); color: var(--ink-mute);
  border: 1px solid var(--line);
  font-family: var(--font-pixel); font-size: 10px;
}
.auth-step .pill.is-active {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
}
.auth-step .pill.is-done {
  background: var(--emerald); color: #051a0c; border-color: var(--emerald);
}
.auth-step .sep { flex: 1; height: 1px; background: var(--line); }

.auth-err {
  background: rgba(255,66,66,.08);
  border: 1px solid rgba(255,66,66,.3);
  color: #ff8a8a;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}
.auth-ok {
  background: rgba(43,209,126,.06);
  border: 1px solid rgba(43,209,126,.3);
  color: #6fe6a3;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 16px;
}

@media (max-width: 760px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 460px; }
  .auth-aside { padding: 32px 28px; border-right: none; border-bottom: 1px solid var(--line); }
  .auth-aside-foot { position: relative; bottom: auto; left: auto; right: auto; margin-top: 28px; }
  .auth-form-wrap { padding: 32px 28px; }
}

/* ──────────────────────────────────────────
   DASHBOARD
   ────────────────────────────────────────── */
.dash-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 22px;
}
.dash-hero {
  background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 14%, var(--surface-1)), var(--bg-2));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 22px;
  align-items: center;
}
.dash-skin-slot {
  width: 100px; height: 100px;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px),
    radial-gradient(circle, color-mix(in oklab, var(--accent) 22%, transparent), transparent 65%);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.dash-user h2 {
  font-family: var(--font-pixel); font-size: 26px;
  margin: 0 0 6px; letter-spacing: -.01em;
}
.dash-user .rank {
  font-family: var(--font-pixel); font-size: 10px;
  letter-spacing: .18em; color: var(--accent);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 14px;
}
.dash-user .rank::before {
  content: ""; width: 6px; height: 6px; background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}
.dash-user .meta {
  display: flex; flex-wrap: wrap; gap: 16px;
  color: var(--ink-mute); font-size: 13px;
  font-family: var(--font-mono);
}
.dash-user .meta b { color: var(--ink); font-weight: 600; }

.dash-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
  margin-top: 22px;
}
.dash-stat {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 18px;
  position: relative; overflow: hidden;
}
.dash-stat::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--tint, var(--accent));
  box-shadow: 0 0 12px var(--tint, var(--accent));
}
.dash-stat .lbl {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute); margin-bottom: 8px;
}
.dash-stat .val {
  font-family: var(--font-pixel); font-size: 22px;
  color: var(--tint, var(--accent));
}
.dash-stat .delta { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
.dash-stat .delta.up { color: var(--emerald); }
.dash-stat .delta.down { color: var(--redstone); }

.dash-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}
.dash-card h3 {
  font-family: var(--font-pixel); font-size: 14px;
  margin: 0 0 16px; letter-spacing: .04em;
}
.dash-card .h-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.dash-card .h-row h3 { margin: 0; }
.dash-card .h-row a { font-size: 12px; color: var(--accent); }

.dash-activity {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
}
.dash-activity li {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.dash-activity li:last-child { border-bottom: none; }
.dash-activity .ico {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,.04);
  font-size: 14px;
}
.dash-activity .text b { color: var(--ink); font-weight: 600; }
.dash-activity .text { color: var(--ink-soft); }
.dash-activity .time {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}

@media (max-width: 980px) {
  .dash-grid { grid-template-columns: 1fr; }
  .dash-hero { grid-template-columns: 80px 1fr; gap: 16px; padding: 20px; }
  .dash-hero > :nth-child(3) { grid-column: 1 / -1; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .dash-stats { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────
   SHOP
   ────────────────────────────────────────── */
.shop-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}
.shop-cat-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.shop-cat-list button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px;
  border: 0; background: transparent;
  color: var(--ink-soft); text-align: left;
  font-size: 13px; border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-weight: 500;
}
.shop-cat-list button:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.shop-cat-list button.is-active {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}
.shop-cat-list .count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
}
.shop-cat-divider {
  height: 1px; background: var(--line);
  margin: 12px 4px;
}
.shop-cat-head {
  font-family: var(--font-pixel); font-size: 9px;
  letter-spacing: .2em; color: var(--ink-mute);
  text-transform: uppercase;
  padding: 0 12px 6px;
}

.shop-products {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.shop-product {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  position: relative;
}
.shop-product:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--tint) 50%, var(--line-strong));
  box-shadow: 0 18px 40px -20px rgba(0,0,0,0.6);
}
.shop-product-art {
  height: 96px;
  display: grid; place-items: center;
  background: radial-gradient(circle, color-mix(in oklab, var(--tint) 14%, transparent), transparent 70%);
  border-radius: 8px;
  border: 1px solid var(--line);
}
.shop-product h4 {
  font-family: var(--font-pixel); font-size: 13px;
  margin: 0; letter-spacing: -.01em;
}
.shop-product p {
  font-size: 12.5px; color: var(--ink-soft);
  margin: 0; line-height: 1.5;
  min-height: 36px;
}
.shop-product .row {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.shop-product .price {
  font-family: var(--font-pixel); font-size: 14px;
  color: var(--tint, var(--accent));
}
.shop-product .price .cur {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute);
  margin-left: 4px;
}
.shop-product .badge {
  position: absolute; top: 12px; right: 12px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .15em;
  padding: 4px 8px; border-radius: 3px;
  background: var(--accent-2); color: #2a0d00;
}
.shop-product .badge.sale { background: var(--redstone); color: #2a0500; }
.shop-product .badge.new  { background: var(--emerald); color: #052a14; }

@media (max-width: 880px) {
  .shop-layout { grid-template-columns: 1fr; }
  .shop-cat-list {
    flex-direction: row; overflow-x: auto;
    scrollbar-width: none; gap: 4px;
    padding-bottom: 8px;
  }
  .shop-cat-list button { white-space: nowrap; flex-shrink: 0; }
  .shop-cat-divider { display: none; }
  .shop-cat-head { display: none; }
}

/* ──────────────────────────────────────────
   LEADERBOARD
   ────────────────────────────────────────── */
.lb-shell {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.lb-head {
  display: grid;
  grid-template-columns: 60px 1fr repeat(3, 100px);
  gap: 16px;
  padding: 14px 22px;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute); text-transform: uppercase;
  border-bottom: 1px solid var(--line);
  background: rgba(0,0,0,0.2);
}
.lb-row-x {
  display: grid;
  grid-template-columns: 60px 1fr repeat(3, 100px);
  gap: 16px;
  align-items: center;
  padding: 14px 22px;
  border-bottom: 1px solid var(--line);
  transition: background .15s;
}
.lb-row-x:last-child { border-bottom: none; }
.lb-row-x:hover { background: rgba(255,255,255,0.02); }
.lb-row-x .rank {
  font-family: var(--font-pixel); font-size: 14px;
  color: var(--ink-mute);
}
.lb-row-x.is-top .rank { color: var(--gold); }
.lb-row-x .player {
  display: flex; align-items: center; gap: 12px;
}
.lb-row-x .player .skin {
  width: 32px; height: 32px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  flex-shrink: 0;
}
.lb-row-x .player .name { font-weight: 600; font-size: 14px; }
.lb-row-x .player .clan {
  font-size: 12px; color: var(--accent-3);
}
.lb-row-x .stat {
  font-family: var(--font-mono); font-size: 14px;
  color: var(--ink);
  text-align: right;
}
.lb-row-x .stat.dim { color: var(--ink-mute); font-size: 13px; }

@media (max-width: 720px) {
  .lb-head, .lb-row-x { grid-template-columns: 40px 1fr 80px; gap: 12px; padding: 12px 16px; }
  .lb-head .h-2, .lb-head .h-3, .lb-row-x .stat.dim { display: none; }
}

/* ──────────────────────────────────────────
   GENERIC LIST / CARDS
   ────────────────────────────────────────── */
.pg-list {
  display: grid; gap: 12px;
}
.pg-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 16px 18px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  align-items: center;
  transition: border-color .15s, background .15s;
}
.pg-row:hover { border-color: var(--line-strong); background: var(--surface-2); }
.pg-row .ico {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  font-size: 16px;
}
.pg-row .meta h4 { margin: 0 0 4px; font-size: 14px; }
.pg-row .meta p { margin: 0; font-size: 12.5px; color: var(--ink-soft); }
.pg-row .when {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}

/* ──────────────────────────────────────────
   STATUS PAGE
   ────────────────────────────────────────── */
.status-summary {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 32px;
}
.status-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.status-card .lbl {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute); margin-bottom: 8px;
}
.status-card .val {
  font-family: var(--font-pixel); font-size: 20px; color: var(--ink);
}
.status-card.ok .val { color: var(--emerald); }
.status-card.warn .val { color: var(--gold); }
.status-card.down .val { color: var(--redstone); }
.status-card .sub { font-size: 12px; color: var(--ink-soft); margin-top: 4px; }

.status-list .pg-row { grid-template-columns: 12px 1fr auto; }
.status-list .pulse {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 10px var(--emerald);
}
.status-list .pulse.warn { background: var(--gold); box-shadow: 0 0 10px var(--gold); }
.status-list .pulse.down { background: var(--redstone); box-shadow: 0 0 10px var(--redstone); }

@media (max-width: 760px) {
  .status-summary { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────
   WIKI
   ────────────────────────────────────────── */
.wiki-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
}
.wiki-nav {
  position: sticky; top: 100px;
  align-self: start;
}
.wiki-nav h4 {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute); margin: 18px 0 8px;
  text-transform: uppercase;
}
.wiki-nav h4:first-child { margin-top: 0; }
.wiki-nav a {
  display: block;
  padding: 7px 10px;
  font-size: 13.5px;
  color: var(--ink-soft);
  border-radius: 6px;
  transition: background .15s, color .15s;
}
.wiki-nav a:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.wiki-nav a.is-active {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.wiki-article h2 {
  font-family: var(--font-pixel); font-size: clamp(22px, 3vw, 30px);
  margin: 32px 0 16px; line-height: 1.1;
}
.wiki-article h2:first-child { margin-top: 0; }
.wiki-article h3 {
  font-family: var(--font-pixel); font-size: 15px;
  margin: 28px 0 10px;
}
.wiki-article p {
  color: var(--ink-soft);
  font-size: 15px; line-height: 1.6;
  margin: 0 0 14px;
  max-width: 720px;
}
.wiki-article code {
  font-family: var(--font-mono); font-size: 13px;
  background: rgba(255,255,255,.05);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--accent);
}
.wiki-article pre {
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px 18px;
  font-family: var(--font-mono); font-size: 13px;
  overflow-x: auto;
  margin: 0 0 18px;
}
.wiki-article ul { padding-left: 22px; color: var(--ink-soft); margin: 0 0 14px; }
.wiki-article ul li { margin: 4px 0; }

@media (max-width: 880px) {
  .wiki-layout { grid-template-columns: 1fr; }
  .wiki-nav { position: relative; top: 0; padding-bottom: 16px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
}

/* ──────────────────────────────────────────
   FAQ
   ────────────────────────────────────────── */
.faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-q {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 22px;
  cursor: pointer;
  transition: border-color .15s;
}
.faq-q[open] { border-color: var(--line-strong); }
.faq-q summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; gap: 16px;
  font-size: 15px; font-weight: 500;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-pixel); font-size: 14px;
  color: var(--accent);
  transition: transform .2s;
}
.faq-q[open] summary::after { content: "−"; }
.faq-q p {
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 14px; line-height: 1.6;
}

/* ──────────────────────────────────────────
   NOT FOUND
   ────────────────────────────────────────── */
.nf-shell {
  text-align: center; padding: 80px 24px;
  position: relative;
}
.nf-code {
  font-family: var(--font-pixel);
  font-size: clamp(80px, 14vw, 180px);
  line-height: 1;
  margin: 0 0 18px;
  color: var(--accent);
  text-shadow: 6px 6px 0 rgba(0,0,0,0.5);
  letter-spacing: -.02em;
}
.nf-title { font-family: var(--font-pixel); font-size: 22px; margin: 0 0 14px; }
.nf-sub { color: var(--ink-soft); max-width: 460px; margin: 0 auto 32px; font-size: 15px; line-height: 1.55; }
.nf-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; }

/* ──────────────────────────────────────────
   FORM helpers (Report, Settings, etc.)
   ────────────────────────────────────────── */
.pg-form {
  display: grid; gap: 18px;
  max-width: 640px;
}
.pg-form-row {
  display: flex; flex-direction: column; gap: 6px;
}
.pg-form-row label {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute); text-transform: uppercase;
}
.pg-form-row textarea { min-height: 120px; resize: vertical; }
.pg-form-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 8px;
}

/* ──────────────────────────────────────────
   ROADMAP / CHANGELOG (timeline)
   ────────────────────────────────────────── */
.timeline {
  position: relative;
  padding-left: 32px;
}
.timeline::before {
  content: ""; position: absolute;
  top: 8px; bottom: 8px; left: 9px;
  width: 1px; background: var(--line-strong);
}
.tl-item {
  position: relative;
  padding: 0 0 28px;
}
.tl-item::before {
  content: ""; position: absolute;
  left: -28px; top: 6px;
  width: 12px; height: 12px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 12px var(--accent), 0 0 0 4px var(--bg-0);
}
.tl-item.is-done::before { background: var(--emerald); box-shadow: 0 0 12px var(--emerald), 0 0 0 4px var(--bg-0); }
.tl-item.is-future::before { background: var(--surface-3); box-shadow: 0 0 0 4px var(--bg-0); }
.tl-date {
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: .15em;
  color: var(--accent); margin-bottom: 6px;
}
.tl-item.is-done .tl-date { color: var(--emerald); }
.tl-item.is-future .tl-date { color: var(--ink-mute); }
.tl-item h3 {
  font-family: var(--font-pixel); font-size: 15px;
  margin: 0 0 8px;
}
.tl-item p { color: var(--ink-soft); font-size: 14px; margin: 0; line-height: 1.55; max-width: 640px; }
.tl-item ul {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.tl-item ul li {
  color: var(--ink-soft); font-size: 13px;
  display: flex; align-items: flex-start; gap: 8px;
}
.tl-item ul li::before { content: "›"; color: var(--accent); flex-shrink: 0; }

/* ──────────────────────────────────────────
   ACCOUNT / SETTINGS section
   ────────────────────────────────────────── */
.acct-section + .acct-section { margin-top: 32px; }
.acct-section h3 {
  font-family: var(--font-pixel); font-size: 13px;
  margin: 0 0 4px;
}
.acct-section .sub {
  font-size: 13px; color: var(--ink-soft);
  margin: 0 0 16px;
}
.acct-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
  padding: 16px 0;
  border-bottom: 1px dashed var(--line);
}
.acct-row:last-child { border-bottom: none; }
.acct-row .k { font-size: 14px; }
.acct-row .v { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }

/* ──────────────────────────────────────────
   PAGE TRANSITIONS (smooth, subtle)
   Note: animation uses transform-only (no opacity). If the tab is hidden
   when the animation should run, browsers pause it — opacity-based animations
   would leave the page invisible. Transform-only keeps the content visible
   even if the animation never plays.
   ────────────────────────────────────────── */
.page-shell {
  animation: pageEnter 0.42s cubic-bezier(.2,.8,.3,1);
  animation-fill-mode: both;
}
@keyframes pageEnter {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .page-shell { animation: none; }
}

/* Subtle stagger for sections inside a page. */
.page-shell .pg-head    { animation: pageHeadIn 0.5s cubic-bezier(.2,.8,.3,1) .05s both; }
.page-shell .pg-body    { animation: pageBodyIn 0.55s cubic-bezier(.2,.8,.3,1) .12s both; }
@keyframes pageHeadIn {
  from { transform: translateY(6px); }
  to   { transform: translateY(0); }
}
@keyframes pageBodyIn {
  from { transform: translateY(10px); }
  to   { transform: translateY(0); }
}

/* ──────────────────────────────────────────
   TOAST notifications
   ────────────────────────────────────────── */
.toast-host {
  position: fixed; bottom: 24px; right: 24px;
  display: flex; flex-direction: column-reverse; gap: 8px;
  z-index: 999; pointer-events: none;
}
.toast {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 12px 16px 12px 12px;
  display: flex; align-items: center; gap: 12px;
  font-size: 13.5px;
  color: var(--ink);
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.6);
  animation: toastIn 0.32s cubic-bezier(.2,.8,.3,1) both;
  min-width: 240px; max-width: 360px;
  pointer-events: auto;
}
.toast.is-leaving { animation: toastOut 0.24s ease both; }
.toast .ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.toast.ok .ico  { background: var(--emerald); color: #052a14; }
.toast.warn .ico { background: var(--gold);    color: #1f1500; }
.toast.err .ico  { background: var(--redstone); color: #fff; }
.toast.info .ico { background: var(--accent); color: var(--accent-fg); }
.toast .msg { line-height: 1.4; }
.toast .msg b { color: var(--ink); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px) translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateX(20px); }
}

/* ──────────────────────────────────────────
   COUNTDOWN
   ────────────────────────────────────────── */
.countdown {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-soft);
}
.countdown .seg {
  display: inline-flex; align-items: baseline; gap: 2px;
  padding: 2px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.countdown .n {
  font-family: var(--font-pixel); font-size: 11px;
  color: var(--accent);
  letter-spacing: .04em;
}
.countdown .u {
  font-size: 9px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: .15em;
}

/* ──────────────────────────────────────────
   HAMBURGER MOBILE MENU
   ────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  padding: 0;
  width: 36px; height: 36px;
  cursor: pointer;
  position: relative;
}
.nav-hamburger span,
.nav-hamburger::before,
.nav-hamburger::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px;
  height: 2px;
  background: var(--ink);
  transition: transform .25s, opacity .15s;
}
.nav-hamburger::before { top: 11px; }
.nav-hamburger span    { top: 17px; }
.nav-hamburger::after  { top: 23px; }
.nav-hamburger.is-open::before { transform: translateY(6px) rotate(45deg); }
.nav-hamburger.is-open span    { opacity: 0; }
.nav-hamburger.is-open::after  { transform: translateY(-6px) rotate(-45deg); }

.mobile-menu {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
  background: var(--bg-1);
  z-index: 49;
  padding: 24px;
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform .32s cubic-bezier(.2,.8,.3,1), opacity .2s;
  overflow-y: auto;
}
.mobile-menu.is-open {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu .group {
  margin-bottom: 28px;
}
.mobile-menu .group h5 {
  font-family: var(--font-pixel); font-size: 9px;
  letter-spacing: .22em; color: var(--ink-mute);
  margin: 0 0 12px; text-transform: uppercase;
}
.mobile-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 12px;
  font-size: 15px; color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  transition: color .15s, background .15s;
}
.mobile-menu a:hover, .mobile-menu a.is-active {
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 6%, transparent);
}
.mobile-menu a .arrow { color: var(--ink-mute); }

@media (max-width: 880px) {
  .nav-hamburger { display: block; }
  .nav-links { display: none !important; }
}

/* ──────────────────────────────────────────
   VIP billing cycle toggle
   ────────────────────────────────────────── */
.vip-cycle {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 32px;
}
.vip-cycle button {
  padding: 8px 18px;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: .15em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .2s, color .2s;
  display: inline-flex; align-items: center; gap: 8px;
}
.vip-cycle button.is-active {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 0 16px color-mix(in oklab, var(--accent) 30%, transparent);
}
.vip-cycle .save {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--emerald);
  padding: 2px 6px;
  background: rgba(43,209,126,0.12);
  border: 1px solid rgba(43,209,126,0.3);
  border-radius: 4px;
  letter-spacing: .04em;
}
.vip-cycle button.is-active .save { background: rgba(0,0,0,0.18); border-color: rgba(0,0,0,0.25); color: #053a1a; }

/* ──────────────────────────────────────────
   COOKIE BANNER (bottom-left toast-style card)
   ────────────────────────────────────────── */
.cookie-banner {
  position: fixed; left: 24px; bottom: 24px;
  z-index: 95;
  max-width: 380px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  padding: 18px 20px 16px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; gap: 12px;
  animation: cookieIn 0.4s cubic-bezier(.2,.8,.3,1) .8s both;
}
@keyframes cookieIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner h4 {
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: .15em;
  color: var(--accent); margin: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.cookie-banner h4::before {
  content: "🍪"; font-size: 14px;
}
.cookie-banner p {
  margin: 0; font-size: 13px; line-height: 1.55;
  color: var(--ink-soft);
}
.cookie-banner p a { color: var(--accent); border-bottom: 1px dashed var(--accent); padding-bottom: 1px; }
.cookie-banner .actions {
  display: flex; gap: 8px; margin-top: 4px;
}
.cookie-banner .actions .btn { padding: 8px 14px; font-size: 12px; flex: 1; justify-content: center; }
@media (max-width: 560px) {
  .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* ──────────────────────────────────────────
   PROFILE DROPDOWN (auth'd nav)
   ────────────────────────────────────────── */
.nav-profile { position: relative; }
.nav-profile-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  font-size: 13px; color: var(--ink);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.nav-profile-trigger:hover { border-color: var(--accent); }
.nav-profile-trigger .avatar {
  width: 24px; height: 24px;
  background: var(--bg-3);
  border-radius: 50%;
  display: grid; place-items: center;
  overflow: hidden;
}
.nav-profile-trigger .name {
  font-weight: 600; font-family: var(--font-mono); font-size: 12.5px;
}
.nav-profile-trigger .arrow {
  margin-left: 2px; font-size: 9px; color: var(--ink-mute);
  transition: transform .15s;
}
.nav-profile-trigger.is-open .arrow { transform: rotate(180deg); }

.nav-profile-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 280px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--bg-2) 98%, white 0%),
    color-mix(in oklab, var(--bg-2) 100%, black 5%));
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,0.7),
    0 1px 0 rgba(255,255,255,0.04) inset;
  padding: 8px;
  z-index: 60;
  animation: menuIn 0.18s ease-out both;
  overflow: hidden;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
/* Subtle accent glow at top */
.nav-profile-menu::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 50%, transparent), transparent);
}
.nav-profile-menu .head {
  position: relative;
  padding: 14px 14px 16px;
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 6px;
  background:
    radial-gradient(ellipse 200px 80px at 0% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%);
  border-radius: 10px;
}
.nav-profile-menu .head .avatar {
  width: 44px; height: 44px;
  background: var(--bg-3);
  border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line-strong));
  border-radius: 10px;
  display: grid; place-items: center;
  overflow: hidden;
  box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 30%, transparent);
  flex-shrink: 0;
}
.nav-profile-menu .head .meta { min-width: 0; flex: 1; }
.nav-profile-menu .head .meta .name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-profile-menu .head .meta .rank {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .18em;
  color: var(--accent);
  margin-top: 4px;
  text-shadow: 0 0 8px color-mix(in oklab, var(--accent) 40%, transparent);
}
.nav-profile-menu .head .avatar-status {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--emerald);
  border: 2px solid var(--bg-2);
  border-radius: 50%;
  bottom: 14px; left: 46px;
  box-shadow: 0 0 8px var(--emerald);
}

.nav-profile-menu a,
.nav-profile-menu button {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: 10px 12px;
  font-size: 13.5px;
  color: var(--ink-soft);
  border: 0; background: transparent;
  text-align: left; cursor: pointer;
  border-radius: 8px;
  transition: background .12s, color .12s, transform .15s;
  min-height: 38px;
  font-weight: 500;
  letter-spacing: -.005em;
}
.nav-profile-menu a:hover,
.nav-profile-menu button:hover {
  background: rgba(255,255,255,0.04);
  color: var(--ink);
}
body.daymode .nav-profile-menu a:hover,
body.daymode .nav-profile-menu button:hover {
  background: rgba(43,124,217,0.08);
}
/* Subtle slide indicator on hover */
.nav-profile-menu a::before,
.nav-profile-menu button::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--accent);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height .18s cubic-bezier(.2,.8,.3,1);
}
.nav-profile-menu a:hover::before,
.nav-profile-menu button:hover::before {
  height: 18px;
  box-shadow: 0 0 8px var(--accent);
}

.nav-profile-menu .ico {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
.nav-profile-menu a:hover .ico,
.nav-profile-menu button:hover .ico {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  transform: scale(1.05);
}
body.daymode .nav-profile-menu .ico { background: rgba(20,40,80,0.05); }
body.daymode .nav-profile-menu a:hover .ico,
body.daymode .nav-profile-menu button:hover .ico {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
}

/* Right-side value (e.g. wallet balance, notification count) */
.nav-profile-menu .val {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: .02em;
  padding: 2px 8px;
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  transition: background .15s, color .15s;
}
.nav-profile-menu a:hover .val {
  background: color-mix(in oklab, var(--accent) 14%, transparent);
  color: var(--accent);
}
.nav-profile-menu .val.accent { color: var(--accent); }
.nav-profile-menu .val.warn   { color: var(--accent-2); }
.nav-profile-menu .val.dot {
  background: var(--accent-2);
  color: #fff;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  font-size: 10px;
  letter-spacing: 0;
}

.nav-profile-menu .div {
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
}

.nav-profile-menu .logout {
  color: var(--accent-2);
  margin-top: 2px;
}
.nav-profile-menu .logout::before { background: var(--redstone) !important; }
.nav-profile-menu .logout:hover {
  color: var(--redstone);
  background: rgba(255,66,66,0.06);
}
.nav-profile-menu .logout .ico {
  background: rgba(255,66,66,0.10);
  color: var(--redstone);
}
.nav-profile-menu .logout:hover .ico {
  background: rgba(255,66,66,0.20);
}

/* Daymode profile menu polish */
body.daymode .nav-profile-menu {
  background: linear-gradient(180deg, #ffffff, #fafbfd) !important;
  border-color: rgba(20,40,80,0.14);
  box-shadow:
    0 30px 60px -20px rgba(20,40,80,0.30),
    0 1px 0 rgba(255,255,255,0.6) inset;
}
body.daymode .nav-profile-menu .head .avatar-status {
  border-color: #ffffff;
}

/* ──────────────────────────────────────────
   DISCORD WIDGET BLOCK
   ────────────────────────────────────────── */
.discord-block {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, rgba(88,101,242,0.10), var(--surface-1));
  border: 1px solid color-mix(in oklab, #5865F2 30%, var(--line-strong));
  border-radius: 16px;
  padding: 32px;
  position: relative; overflow: hidden;
}
.discord-block::before {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(88,101,242,0.25), transparent 70%);
  pointer-events: none;
}
.discord-block .body { position: relative; z-index: 1; }
.discord-block h3 {
  font-family: var(--font-pixel); font-size: 24px; margin: 0 0 12px;
  display: flex; align-items: center; gap: 12px;
}
.discord-block h3 .badge {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  padding: 3px 8px;
  background: #5865F2; color: #fff;
  border-radius: 4px;
  text-transform: uppercase;
}
.discord-block p { color: var(--ink-soft); margin: 0 0 18px; font-size: 14.5px; line-height: 1.55; max-width: 460px; }
.discord-block .stats {
  display: flex; gap: 24px; margin-bottom: 22px;
}
.discord-block .stat .n {
  font-family: var(--font-pixel); font-size: 18px; color: var(--ink);
}
.discord-block .stat .l {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
  letter-spacing: .08em; text-transform: uppercase;
}
.discord-block .stat .n .live { color: var(--emerald); }
.discord-block .actions { display: flex; gap: 10px; position: relative; z-index: 1; }
.discord-block .actions .btn-discord {
  background: #5865F2;
  border-color: #5865F2;
  color: #fff;
}
.discord-block .actions .btn-discord:hover {
  background: #4752c4;
  border-color: #4752c4;
}

.discord-block aside {
  background: rgba(20,26,38,0.4);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  position: relative; z-index: 1;
}
.discord-block aside h5 {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute); margin: 0 0 12px;
  text-transform: uppercase;
}
.discord-channel {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px;
  font-size: 13px; color: var(--ink-soft);
  border-radius: 4px;
  transition: background .12s;
}
.discord-channel:hover { background: rgba(255,255,255,0.04); }
.discord-channel .hash { color: var(--ink-mute); font-family: var(--font-mono); }
.discord-channel .count {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
}
.discord-channel.live .hash { color: var(--redstone); }
.discord-channel.live .count { color: var(--redstone); }

@media (max-width: 880px) {
  .discord-block { grid-template-columns: 1fr; padding: 22px; }
}

/* ──────────────────────────────────────────
   NEWSLETTER SIGNUP
   ────────────────────────────────────────── */
.newsletter {
  background:
    radial-gradient(ellipse 600px 280px at 100% 50%, color-mix(in oklab, var(--accent-2) 14%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-1), var(--bg-2));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
}
.newsletter h3 {
  font-family: var(--font-pixel); font-size: clamp(22px, 2.6vw, 28px);
  margin: 0 0 10px;
  line-height: 1.1;
}
.newsletter p {
  margin: 0 0 4px;
  color: var(--ink-soft); font-size: 14.5px; line-height: 1.55;
  max-width: 440px;
}
.newsletter-form {
  display: flex; gap: 8px; align-items: stretch;
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 6px;
}
.newsletter-form input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font-family: var(--font-mono); font-size: 14px;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}
.newsletter-form .btn { padding: 10px 18px; flex-shrink: 0; }
.newsletter-foot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-mute);
}
@media (max-width: 760px) {
  .newsletter { grid-template-columns: 1fr; padding: 24px; }
}

/* ──────────────────────────────────────────
   PROGRESS BAR / XP
   ────────────────────────────────────────── */
.xp-bar {
  display: flex; flex-direction: column; gap: 6px;
}
.xp-bar .meta {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
}
.xp-bar .meta b { color: var(--ink); font-weight: 600; }
.xp-bar .track {
  height: 8px;
  background: var(--bg-3);
  border-radius: 4px; overflow: hidden;
  position: relative;
  border: 1px solid var(--line);
}
.xp-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 60%, var(--emerald)));
  border-radius: 3px;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 50%, transparent);
  transition: width .8s cubic-bezier(.2,.8,.3,1);
}

/* ──────────────────────────────────────────
   MINI CHART (sparkline / bar)
   ────────────────────────────────────────── */
.mini-bars {
  display: flex; align-items: flex-end; gap: 4px;
  height: 64px;
}
.mini-bars .b {
  flex: 1; min-width: 4px;
  background: var(--surface-3);
  border-radius: 2px 2px 0 0;
  transition: background .15s;
}
.mini-bars .b.up   { background: var(--emerald); }
.mini-bars .b.down { background: var(--redstone); }
.mini-bars .b.flat { background: var(--accent); }
.mini-bars:hover .b { opacity: 0.5; }
.mini-bars:hover .b:hover { opacity: 1; transform: scaleY(1.05); transform-origin: bottom; }

/* Uptime bar (small daily blocks) */
.uptime-bars {
  display: grid;
  grid-template-columns: repeat(60, 1fr);
  gap: 2px;
  height: 28px;
}
.uptime-bars .u {
  background: var(--emerald);
  border-radius: 1px;
  transition: opacity .15s;
}
.uptime-bars .u.warn { background: var(--gold); }
.uptime-bars .u.down { background: var(--redstone); }
.uptime-bars .u:hover { opacity: 0.6; }

/* ──────────────────────────────────────────
   PROFILE: match history rows
   ────────────────────────────────────────── */
.match-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px; align-items: center;
  padding: 12px 16px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
}
.match-row .result {
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: .15em;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(43,209,126,0.12); color: var(--emerald);
  border: 1px solid rgba(43,209,126,0.3);
}
.match-row .result.loss { background: rgba(255,66,66,0.10); color: var(--redstone); border-color: rgba(255,66,66,0.3); }
.match-row .result.draw { background: rgba(255,195,64,0.10); color: var(--gold); border-color: rgba(255,195,64,0.3); }
.match-row .mode { font-size: 13px; }
.match-row .mode b { color: var(--ink); }
.match-row .mode .sub { font-size: 11px; color: var(--ink-mute); margin-top: 2px; font-family: var(--font-mono); }
.match-row .stat-num { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.match-row .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }

/* ──────────────────────────────────────────
   SEARCH BOX
   ────────────────────────────────────────── */
.pg-search {
  display: flex; align-items: center; gap: 0;
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0 12px;
  max-width: 480px;
  margin-bottom: 22px;
  transition: border-color .15s, box-shadow .15s;
}
.pg-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
.pg-search .ico {
  color: var(--ink-mute);
  font-size: 14px;
}
.pg-search input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  padding: 12px 12px;
  font-size: 14px; color: var(--ink);
  outline: none;
  font-family: var(--font-mono);
}
.pg-search kbd {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
  padding: 3px 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: 0 1px 0 var(--line);
}

.search-results-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13.5px;
  border: 1px dashed var(--line);
  border-radius: 12px;
}

/* ──────────────────────────────────────────
   ACTIVITY HEATMAP (GitHub-style 7-row daily grid)
   ────────────────────────────────────────── */
.heatmap-wrap {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px 18px;
}
.heatmap-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap; gap: 8px;
}
.heatmap-head h3 {
  font-family: var(--font-pixel); font-size: 11px;
  letter-spacing: .15em; margin: 0;
  color: var(--ink);
}
.heatmap-head .legend {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
}
.heatmap-head .legend .lv {
  width: 10px; height: 10px;
  border-radius: 2px;
}
.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.heatmap-grid::-webkit-scrollbar { height: 4px; }
.heatmap-cell {
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  transition: transform .12s, background .15s;
  cursor: pointer;
}
.heatmap-cell.lv-1 { background: color-mix(in oklab, var(--accent) 22%, var(--bg-3)); border-color: transparent; }
.heatmap-cell.lv-2 { background: color-mix(in oklab, var(--accent) 45%, var(--bg-3)); border-color: transparent; }
.heatmap-cell.lv-3 { background: color-mix(in oklab, var(--accent) 70%, var(--bg-3)); border-color: transparent; }
.heatmap-cell.lv-4 { background: var(--accent); border-color: transparent; box-shadow: 0 0 6px color-mix(in oklab, var(--accent) 40%, transparent); }
.heatmap-cell:hover {
  transform: scale(1.4);
  border-color: var(--accent);
  z-index: 2;
}
.heatmap-foot {
  margin-top: 16px;
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}
.heatmap-foot b { color: var(--ink); font-weight: 600; }

/* ──────────────────────────────────────────
   ANIMATED DRIFTING VOXELS (subtle background life)
   ────────────────────────────────────────── */
.global-ambient .drift {
  position: absolute;
  width: 22px; height: 22px;
  opacity: 0.06;
  animation: drift 48s ease-in-out infinite;
  filter: blur(0.5px);
}
.global-ambient .drift svg { width: 100%; height: 100%; }
.global-ambient .drift:nth-child(1) { top: 12%; left: 6%;  animation-delay: 0s;   }
.global-ambient .drift:nth-child(2) { top: 30%; left: 88%; animation-delay: -8s;  }
.global-ambient .drift:nth-child(3) { top: 56%; left: 18%; animation-delay: -16s; }
.global-ambient .drift:nth-child(4) { top: 74%; left: 72%; animation-delay: -22s; }
.global-ambient .drift:nth-child(5) { top: 88%; left: 38%; animation-delay: -4s;  }
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(20px, -16px, 0) rotate(5deg); }
  50%      { transform: translate3d(-12px, 28px, 0) rotate(-3deg); }
  75%      { transform: translate3d(-24px, 8px, 0) rotate(2deg); }
}

/* ──────────────────────────────────────────
   SEARCH BUTTON variant
   ────────────────────────────────────────── */
/* ──────────────────────────────────────────
   POLISH — refined card hovers + button micro-interactions
   ────────────────────────────────────────── */

/* Cards: smoother hover with subtle tilt + glow */
.dash-card, .shop-product, .hp-mode, .hp-why-card, .ach-card,
.feat-card, .mode-card, .mode-mini, .vip-card {
  transition:
    transform .25s cubic-bezier(.2,.8,.3,1),
    border-color .2s,
    box-shadow .25s,
    background .2s;
  will-change: transform;
}
.dash-card:hover, .shop-product:hover, .hp-why-card:hover,
.feat-card:hover, .ach-card:hover {
  transform: translateY(-3px);
}

/* Featured cards lift more */
.mode-feat:hover,
.hp-mode.is-featured:hover { transform: translateY(-6px); }

/* Button press feedback */
.btn:active, .nav-bell:active, .nav-hamburger:active,
.shop-product .btn:active, .mode-feat .btn:active {
  transform: scale(0.97);
  transition-duration: .08s;
}

/* Smoother button hover */
.btn { transition: transform .15s, background .15s, border-color .15s, box-shadow .2s; }
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0) scale(.98); }

/* Section dividers — subtle voxel chain (decorative) */
.section + .section::before {
  content: "";
  display: block;
  width: 80px;
  height: 6px;
  margin: -12px auto 30px;
  background-image:
    linear-gradient(90deg, var(--accent), var(--accent));
  background-size: 6px 6px;
  background-repeat: repeat-x;
  opacity: 0.15;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 70%);
}

/* Typography refinement */
.section-title, .pg-title, .hp-wordmark, .hp-mode-name,
.mode-feat h3, .featured-streamer h3 {
  font-feature-settings: "tnum", "ss01";
}
.hp-tagline, .pg-sub, .section-sub {
  text-wrap: pretty;
}

/* Selection refinement */
::selection {
  background: color-mix(in oklab, var(--accent) 80%, transparent);
  color: var(--bg-0);
}

/* Image-style placeholder polish — voxel SVGs get subtle entrance */
.voxel-svg { transition: filter .25s, transform .25s; }
.shop-product:hover .voxel-svg,
.hp-mode:hover .voxel-svg,
.mode-feat:hover .voxel-svg,
.mode-mini:hover .voxel-svg {
  filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
  transform: scale(1.05) rotate(-3deg);
}

/* Heatmap cell micro animation on first reveal */
.heatmap-cell {
  animation: cellPop .3s cubic-bezier(.5,1.4,.4,1) backwards;
}
.heatmap-cell:nth-child(odd)  { animation-delay: .02s; }
.heatmap-cell:nth-child(even) { animation-delay: .04s; }
@keyframes cellPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Smooth shadow on the IP plaque (hero) */
.hp-ip { transition: all .25s; }
.hp-ip:hover { transform: translateY(-1px); }

/* Refined chip pill on hero */
.chip {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Nav button polish — micro-shadow on hover */
.nav-actions { transition: border-color .2s; }
.nav-actions:hover { border-color: var(--line-strong); }

/* ──────────────────────────────────────────
   POLISH ROUND 2 — VIP cards · footer socials · toast accents · skeletons
   ────────────────────────────────────────── */

/* VIP cards — metallic accent + shine sweep on hover */
.vip-grid .shop-product {
  position: relative;
  overflow: visible;  /* allow EN POPÜLER badge to sit above the card */
  isolation: isolate;
}
.vip-grid .shop-product::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  background: linear-gradient(115deg,
    transparent 30%,
    color-mix(in oklab, var(--tint) 18%, transparent) 50%,
    transparent 70%);
  transform: translateX(-100%);
  transition: transform .8s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
  clip-path: inset(0 round 12px);
  -webkit-clip-path: inset(0 round 12px);
}
/* Featured tier metallic border — clip to card */
.vip-grid .shop-product.is-featured::before {
  clip-path: inset(0 round 12px);
  -webkit-clip-path: inset(0 round 12px);
}
.vip-grid .shop-product:hover::after {
  transform: translateX(100%);
}
.vip-grid .shop-product > * { position: relative; z-index: 1; }
.vip-grid .shop-product > .badge,
.vip-grid .shop-product > .vip-flag { z-index: 3; }
.vip-grid .shop-product.is-featured {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--tint) 10%, var(--surface-1)), var(--bg-2)),
    linear-gradient(135deg, color-mix(in oklab, var(--tint) 30%, transparent), transparent 60%);
}
/* Subtle metallic glow on featured tier */
.vip-grid .shop-product.is-featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--tint) 80%, transparent),
    color-mix(in oklab, var(--tint) 20%, transparent) 50%,
    transparent);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

/* Toast left accent stripe */
.toast {
  position: relative;
  padding-left: 16px;
}
.toast::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
}
.toast.ok::before  { background: var(--emerald); }
.toast.warn::before{ background: var(--gold); }
.toast.err::before { background: var(--redstone); }
.toast.info::before{ background: var(--accent); }

/* Footer — socials row + brand strip */
.footer-socials {
  display: flex; gap: 8px;
  margin-top: 14px;
}
.footer-socials a {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink-soft);
  font-size: 13px;
  transition: border-color .15s, color .15s, transform .15s, background .15s;
  text-decoration: none;
}
.footer-socials a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: color-mix(in oklab, var(--accent) 10%, var(--surface-1));
  transform: translateY(-2px);
}

.footer-status-strip {
  margin-top: 32px;
  padding: 14px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-soft);
}
.footer-status-strip .left {
  display: inline-flex; align-items: center; gap: 10px;
}
.footer-status-strip .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald); box-shadow: 0 0 8px var(--emerald);
  animation: hpPulse 1.6s ease-in-out infinite;
}
.footer-status-strip a {
  color: var(--accent);
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
}
.footer-status-strip a:hover { border-color: var(--accent); }
.footer-status-strip b { color: var(--ink); font-weight: 600; }

/* Shop product skeleton (loading state) */
.shop-skeleton {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  height: 220px;
  position: relative;
  overflow: hidden;
}
.shop-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 30%,
    rgba(255,255,255,0.04) 50%,
    transparent 70%);
  animation: skelShimmer 1.8s linear infinite;
}
@keyframes skelShimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.shop-skeleton .bar {
  background: var(--bg-3);
  border-radius: 4px;
  height: 8px;
  margin-top: 12px;
}
.shop-skeleton .bar.art { height: 96px; margin: 0; border-radius: 8px; }
.shop-skeleton .bar.t   { width: 70%; height: 11px; margin-top: 14px; }
.shop-skeleton .bar.s   { width: 90%; }
.shop-skeleton .bar.s2  { width: 60%; }
.shop-skeleton .bar.r   { width: 40%; height: 14px; margin-top: 14px; }

/* Refined chip on hero pill */
.chip {
  transition: border-color .2s, background .2s;
}
.chip:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, transparent);
}

/* Hero status console — subtle scanline overlay for "live" feel */
.hp-status::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg,
    transparent 0 2px,
    rgba(255,255,255,0.012) 2px 3px);
  opacity: 0.6;
  border-radius: inherit;
}
.hp-status { position: relative; }

/* Section eyebrow refinement — subtle pulsing dot */
.section-eyebrow::before {
  animation: eyebrowPulse 2.4s ease-in-out infinite;
}
@keyframes eyebrowPulse {
  0%, 100% { opacity: 0.6; box-shadow: 0 0 6px var(--accent); }
  50%      { opacity: 1; box-shadow: 0 0 12px var(--accent); }
}

/* Achievement card · subtle confetti pop on hover (rare only) */
.ach-card.rare:hover .ico {
  animation: rareSpin .8s ease-in-out;
}
@keyframes rareSpin {
  0%   { transform: rotate(0deg) scale(1); }
  50%  { transform: rotate(-12deg) scale(1.08); }
  100% { transform: rotate(0deg) scale(1); }
}

/* Form input focus — refined ring */
.auth-field input:focus,
.auth-field select:focus,
.pg-input:focus {
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Better link underline on inline text */
.wiki-article p a:not(.btn):not(.mode-link),
.pg-sub a:not(.btn) {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 30%, transparent);
  transition: border-color .15s;
}
.wiki-article p a:hover { border-color: var(--accent); }

/* Subtle border on mobile menu items for better separation */
.mobile-menu a { transition: color .15s, background .15s, padding-left .15s; }
.mobile-menu a:hover { padding-left: 16px; }

/* Card glow on featured items */
.mode-feat,
.featured-streamer {
  box-shadow: 0 30px 80px -40px rgba(0,0,0,0.6);
}
.mode-feat:hover {
  box-shadow: 0 40px 100px -40px color-mix(in oklab, var(--tint) 30%, rgba(0,0,0,0.7));
}

/* Scroll progress strip at the very top */
.nav-scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 50%, var(--accent-3)));
  transform-origin: 0 50%;
  transform: scaleX(var(--progress, 0));
  transition: transform 80ms linear;
  box-shadow: 0 0 12px color-mix(in oklab, var(--accent) 50%, transparent);
}

/* Nav — refined */
.nav {
  padding: 14px 0;
  background: color-mix(in oklab, var(--bg-0) 82%, transparent);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 80%, transparent);
}
.nav-inner { gap: 24px; align-items: center; }

/* Logo — subtle glow + breathing room */
.logo {
  gap: 12px;
  padding-right: 8px;
  border-right: 1px solid var(--line);
}
.logo-cube {
  width: 28px; height: 28px;
  border-radius: 7px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 22px rgba(63, 169, 245, .42);
  transition: box-shadow .25s, transform .25s;
}
.logo:hover .logo-cube {
  transform: rotate(-4deg);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.16),
    0 0 28px rgba(63, 169, 245, .55);
}
.logo-cube::before {
  width: 14px; height: 14px;
  transition: transform .25s;
}
.logo:hover .logo-cube::before { transform: rotate(60deg); }
.logo span:not(.logo-cube) {
  font-size: 13px;
  letter-spacing: .04em;
  font-feature-settings: "tnum";
}

/* Nav links — typographic, underline-on-hover */
.nav-links { gap: 0; align-items: center; height: 36px; }
.nav-links a {
  position: relative;
  padding: 0 14px;
  height: 36px;
  display: inline-flex; align-items: center;
  white-space: nowrap;
  font-size: 13px; font-weight: 500;
  letter-spacing: -.005em;
  color: var(--ink-soft);
  border-radius: 0;
  background: transparent;
  transition: color .15s;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .2s cubic-bezier(.2,.8,.3,1);
}
.nav-links a:hover { color: var(--ink); background: transparent; box-shadow: none; }
.nav-links a:hover::after { transform: scaleX(.6); }
.nav-links a.is-active {
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}
.nav-links a.is-active::after {
  transform: scaleX(1);
  height: 2px;
  bottom: 3px;
  box-shadow: 0 0 8px var(--accent);
}

/* Search bar replacing ⌘K button */
.nav-search {
  display: inline-flex; align-items: center; gap: 10px;
  height: 36px;
  padding: 0 10px 0 12px;
  background: color-mix(in oklab, var(--bg-3) 70%, transparent);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--ink-mute);
  cursor: pointer;
  min-width: 220px;
  font-family: var(--font-mono); font-size: 12.5px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.nav-search:hover {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--line-strong));
  background: color-mix(in oklab, var(--bg-3) 90%, transparent);
}
.nav-search:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 25%, transparent);
}
.nav-search .ico { font-size: 13px; color: var(--ink-mute); flex-shrink: 0; }
.nav-search .placeholder { flex: 1; text-align: left; color: var(--ink-mute); }
.nav-search kbd {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
  padding: 3px 6px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  letter-spacing: .02em;
  flex-shrink: 0;
}

/* Compact action group — pill containing dn toggle + bell */
.nav-actions {
  display: inline-flex; align-items: center;
  height: 36px;
  padding: 0 4px;
  background: color-mix(in oklab, var(--bg-3) 50%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  gap: 2px;
}
.nav-actions > * { transition: background .15s, color .15s; }
.nav-actions .dn-toggle {
  padding: 0 6px;
  border: 0 !important;
  background: transparent !important;
  border-radius: 6px;
  height: 28px;
}
.nav-actions .dn-toggle:hover { background: rgba(255,255,255,0.06) !important; }
.nav-actions .nav-bell {
  width: 30px; height: 30px;
  border: 0 !important;
  background: transparent !important;
  border-radius: 6px;
  font-size: 14px;
}
.nav-actions .nav-bell:hover {
  background: rgba(255,255,255,0.06) !important;
  color: var(--accent) !important;
}
.nav-actions .nav-bell .dot {
  top: -1px; right: -1px;
  min-width: 14px; height: 14px;
  font-size: 8px;
  border-radius: 7px;
}
.nav .nav-cta .divider { display: none; }   /* replaced by .nav-actions group */

/* Profile pill — slightly refined */
.nav-profile-trigger {
  height: 36px;
  padding: 3px 14px 3px 4px;
  background: color-mix(in oklab, var(--bg-3) 50%, transparent);
  border: 1px solid var(--line);
}
.nav-profile-trigger:hover {
  background: color-mix(in oklab, var(--bg-3) 80%, transparent);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--line-strong));
}
.nav-profile-trigger .avatar {
  width: 28px; height: 28px;
  box-shadow: 0 0 0 2px var(--bg-2);
}

/* Login button — refined ghost+accent feel */
.nav .nav-cta .btn--primary {
  height: 36px;
  padding: 0 18px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 10px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--accent) 90%, white 0%),
    color-mix(in oklab, var(--accent) 75%, black 15%)
  );
  border: 1px solid color-mix(in oklab, var(--accent) 70%, white 30%);
  box-shadow: 0 8px 24px -10px color-mix(in oklab, var(--accent) 40%, transparent), inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Hamburger refined */
.nav-hamburger {
  width: 36px; height: 36px;
  background: color-mix(in oklab, var(--bg-3) 50%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.nav-hamburger:hover { background: color-mix(in oklab, var(--bg-3) 80%, transparent); }

/* Responsive nav: hide search field on narrow */
@media (max-width: 1080px) {
  .nav-search { min-width: 160px; }
  .nav-search .placeholder { display: none; }
}
@media (max-width: 880px) {
  .nav-search { display: none; }
  .logo { border-right: 0; padding-right: 0; }
}

/* ──────────────────────────────────────────
   GLOBAL AMBIENT (fixed background) — replaces per-page sky
   ────────────────────────────────────────── */
.global-ambient {
  position: fixed; inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1400px 800px at 15% 0%,   rgba(63,169,245,0.08), transparent 60%),
    radial-gradient(ellipse 1100px 700px at 95% 5%,   rgba(183,148,244,0.07), transparent 60%),
    radial-gradient(ellipse 1200px 700px at 50% 50%,  rgba(255,125,59,0.04),  transparent 60%),
    radial-gradient(ellipse 1300px 700px at 10% 95%,  rgba(63,169,245,0.05),  transparent 60%),
    radial-gradient(ellipse 1100px 700px at 90% 100%, rgba(43,209,126,0.04),  transparent 60%);
}
.global-ambient::before {
  /* Scattered stars across the entire viewport */
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 7% 8%,   rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 18% 14%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 28% 6%,  rgba(255,255,255,0.50), transparent 60%),
    radial-gradient(1px 1px at 42% 22%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1px 1px at 55% 9%,  rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 68% 18%, rgba(255,255,255,0.40), transparent 60%),
    radial-gradient(1px 1px at 78% 4%,  rgba(255,255,255,0.55), transparent 60%),
    radial-gradient(1px 1px at 88% 12%, rgba(255,255,255,0.45), transparent 60%),
    radial-gradient(1px 1px at 95% 22%, rgba(255,255,255,0.35), transparent 60%),
    radial-gradient(1px 1px at 5% 30%,  rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1px 1px at 22% 38%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1px 1px at 38% 46%, rgba(255,255,255,0.20), transparent 60%),
    radial-gradient(1px 1px at 58% 36%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1px 1px at 75% 48%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1px 1px at 90% 36%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(1px 1px at 12% 62%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1px 1px at 32% 70%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,0.30), transparent 60%),
    radial-gradient(1px 1px at 70% 72%, rgba(255,255,255,0.25), transparent 60%),
    radial-gradient(1px 1px at 85% 64%, rgba(255,255,255,0.30), transparent 60%);
}
/* Disable per-page ambient now that we have a global one. */
.ambient-sky { display: none !important; }

/* ──────────────────────────────────────────
   HOMEPAGE flow fixes — reduce break between sections
   ────────────────────────────────────────── */
.hp-hero {
  min-height: 80vh;        /* was 100vh — too stretched on tall screens */
  padding: 110px 0 50px;   /* tighter bottom */
}
@media (max-width: 980px) {
  .hp-hero { min-height: auto; padding-bottom: 40px; }
}
/* Remove the section-alt's hard band — use it as a soft tonal shift only */
.section-alt {
  background:
    linear-gradient(180deg,
      transparent 0%,
      color-mix(in oklab, var(--accent) 3%, transparent) 35%,
      color-mix(in oklab, var(--accent) 3%, transparent) 65%,
      transparent 100%);
}
/* Section padding — tighter so the page reads as one flow */
.section { padding: clamp(56px, 7vw, 96px) 0; }

/* Hero floaters — extend beyond hero so they bleed into next section */
.hp-hero { overflow: visible; }
.hp-floaters {
  position: absolute;
  inset: 0 0 -120px 0;     /* bleed 120px below hero */
  overflow: visible;
}

/* Subtle section bridge — faint accent-line below hero */
.hp-hero::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1px;
  transform: translateX(-50%);
  width: min(60%, 580px);
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 40%, transparent), transparent);
  pointer-events: none;
}

/* Section heading polish — softer, more space between eyebrow and title */
.section-eyebrow { font-size: 10px; letter-spacing: .2em; }
.section-title { font-size: clamp(28px, 4vw, 44px); }
.section-sub { font-size: 15px; }

/* ──────────────────────────────────────────
   LIVE ACTIVITY TICKER (between hero and modes)
   ────────────────────────────────────────── */
.ticker {
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  position: relative;
}
.ticker::before, .ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 80px; z-index: 2;
  pointer-events: none;
}
.ticker::before { left: 0;  background: linear-gradient(90deg, var(--bg-0), transparent); }
.ticker::after  { right: 0; background: linear-gradient(-90deg, var(--bg-0), transparent); }
.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 12px 0;
  animation: tickerSlide 60s linear infinite;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
@keyframes tickerSlide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink-soft);
}
.ticker-item .ico {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.04);
  border-radius: 4px; font-size: 11px;
}
.ticker-item .who { color: var(--accent); font-weight: 600; }
.ticker-item .what b { color: var(--ink); font-weight: 600; }
.ticker-item .sep {
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
  margin: 0 8px;
}
.ticker-item.boom .ico   { background: rgba(255,125,59,0.14); color: var(--accent-2); }
.ticker-item.win .ico    { background: rgba(43,209,126,0.14); color: var(--emerald); }
.ticker-item.shop .ico   { background: rgba(63,169,245,0.14); color: var(--accent); }
.ticker-item.flag .ico   { background: rgba(255,195,64,0.14); color: var(--gold); }
.ticker-item.gift .ico   { background: rgba(183,148,244,0.14); color: var(--accent-3); }
.ticker-label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .2em;
  color: var(--ink-mute); text-transform: uppercase;
  border-right: 1px solid var(--line);
  margin-right: 24px;
  height: 36px;
}
.ticker-label .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
  animation: hpPulse 1.6s ease-in-out infinite;
}

/* ──────────────────────────────────────────
   MODES — featured + secondary cards (refresh)
   ────────────────────────────────────────── */
.modes-split {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  margin-top: 28px;
}
.mode-feat {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 600px 320px at 100% 0%, color-mix(in oklab, var(--tint) 16%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--tint) 6%, var(--surface-1)), var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--tint) 35%, var(--line-strong));
  border-radius: 18px;
  padding: 36px 36px 30px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 100%;
}
.mode-feat::before {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 280px; height: 280px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 14px, transparent 14px 28px);
  opacity: 0.4;
  border-radius: 50%;
  pointer-events: none;
}
.mode-feat .ico-wrap {
  width: 96px; height: 96px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    radial-gradient(circle, color-mix(in oklab, var(--tint) 22%, transparent), transparent 70%);
  position: relative;
  z-index: 1;
}
.mode-feat .flag {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .22em;
  color: var(--tint);
  display: inline-flex; align-items: center; gap: 8px;
}
.mode-feat .flag::before {
  content: ""; width: 8px; height: 8px;
  background: var(--tint);
  box-shadow: 0 0 10px var(--tint);
}
.mode-feat h3 {
  font-family: var(--font-pixel);
  font-size: clamp(28px, 3.6vw, 38px);
  margin: 0; line-height: 1.05;
  letter-spacing: -.01em;
}
.mode-feat p {
  color: var(--ink-soft);
  margin: 0; font-size: 15px; line-height: 1.55;
  max-width: 460px;
}
.mode-feat .perks {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 4px;
}
.mode-feat .perks span {
  font-family: var(--font-mono); font-size: 11px;
  padding: 5px 11px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--ink-soft);
}
.mode-feat .stats {
  display: flex; gap: 26px;
  padding: 16px 0;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
}
.mode-feat .stats .stat .n {
  font-family: var(--font-pixel); font-size: 18px; color: var(--ink);
}
.mode-feat .stats .stat .l {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute); letter-spacing: .04em; text-transform: uppercase;
}
.mode-feat .cta-row {
  display: flex; gap: 10px; align-items: center;
  margin-top: 6px;
}

.mode-mini {
  background: linear-gradient(180deg, var(--surface-1), var(--bg-2));
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative; overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .25s;
}
.mode-mini:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--tint) 50%, var(--line-strong));
  box-shadow: 0 24px 50px -28px rgba(0,0,0,0.7);
}
.mode-mini .head {
  display: flex; align-items: center; gap: 14px;
}
.mode-mini .head .ico-wrap {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle, color-mix(in oklab, var(--tint) 22%, transparent), transparent 70%);
  flex-shrink: 0;
}
.mode-mini .head .meta { min-width: 0; }
.mode-mini .tag {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .2em;
  color: var(--tint);
}
.mode-mini h4 {
  font-family: var(--font-pixel); font-size: 16px;
  margin: 2px 0 0; letter-spacing: -.01em;
}
.mode-mini p { color: var(--ink-soft); margin: 0; font-size: 13px; line-height: 1.5; }
.mode-mini .foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  margin-top: auto;
}
.mode-mini .link {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .15em;
  color: var(--tint); text-transform: uppercase;
}
.mode-mini .stat {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute);
}

.modes-secondary {
  display: grid; grid-template-rows: 1fr 1fr; gap: 18px;
}

@media (max-width: 980px) {
  .modes-split { grid-template-columns: 1fr; }
  .mode-feat { padding: 26px 22px; }
}

/* ──────────────────────────────────────────
   TOP PLAYERS preview strip
   ────────────────────────────────────────── */
.top-players {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.top-player {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 14px;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
  text-decoration: none;
  position: relative;
}
.top-player:hover {
  transform: translateY(-4px);
  border-color: color-mix(in oklab, var(--tint) 50%, var(--line-strong));
  box-shadow: 0 18px 40px -24px rgba(0,0,0,0.6);
}
.top-player .rank {
  position: absolute; top: 8px; left: 10px;
  font-family: var(--font-pixel); font-size: 10px;
  color: var(--tint);
  letter-spacing: .04em;
}
.top-player.podium-1 .rank { color: var(--gold); }
.top-player.podium-2 .rank { color: var(--iron); }
.top-player.podium-3 .rank { color: #cd7f32; }
.top-player .avatar {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  background: var(--bg-3);
  border-radius: 10px;
  border: 1px solid var(--line);
  margin-top: 6px;
}
.top-player .name {
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  font-weight: 600;
}
.top-player .val {
  font-family: var(--font-pixel); font-size: 11px; color: var(--tint);
}
.top-player .lbl {
  font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute);
  letter-spacing: .04em; text-transform: uppercase;
}

@media (max-width: 880px) {
  .top-players { grid-template-columns: repeat(3, 1fr); }
  .top-players .top-player:nth-child(n+4) { display: none; }
}
@media (max-width: 540px) {
  .top-players { grid-template-columns: repeat(2, 1fr); }
}

/* ──────────────────────────────────────────
   FEATURED STREAMER strip
   ────────────────────────────────────────── */
.featured-streamer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: linear-gradient(135deg, rgba(255,66,66,0.10), var(--surface-1) 60%);
  border: 1px solid color-mix(in oklab, #ff4242 30%, var(--line-strong));
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}
.featured-streamer .preview {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 14px, transparent 14px 28px),
    radial-gradient(circle at center, rgba(255,66,66,0.15), transparent 70%),
    var(--bg-2);
  min-height: 220px;
  display: grid; place-items: center;
  border-right: 1px solid var(--line);
}
.featured-streamer .preview .live {
  position: absolute; top: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--redstone); color: #fff;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .15em;
  padding: 4px 10px; border-radius: 4px;
}
.featured-streamer .preview .live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #fff;
  animation: hpPulse 1.6s ease-in-out infinite;
}
.featured-streamer .preview .viewers {
  position: absolute; bottom: 14px; left: 14px;
  font-family: var(--font-mono); font-size: 11px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 10px; border-radius: 4px;
}
.featured-streamer .body {
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 12px;
  justify-content: center;
}
.featured-streamer .badge {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .22em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.featured-streamer h3 {
  font-family: var(--font-pixel); font-size: 22px;
  margin: 0; letter-spacing: -.01em;
}
.featured-streamer p { color: var(--ink-soft); margin: 0; font-size: 13.5px; line-height: 1.55; }
.featured-streamer .stats {
  display: flex; gap: 18px; padding-top: 8px;
}
.featured-streamer .stat .n { font-family: var(--font-pixel); font-size: 16px; color: var(--ink); }
.featured-streamer .stat .l { font-family: var(--font-mono); font-size: 10px; color: var(--ink-mute); letter-spacing: .04em; text-transform: uppercase; }
@media (max-width: 880px) {
  .featured-streamer { grid-template-columns: 1fr; }
  .featured-streamer .preview { border-right: 0; border-bottom: 1px solid var(--line); }
}
.cmdk-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: grid; place-items: start center;
  padding-top: 96px;
  animation: cmdkBg .18s ease-out both;
}
@keyframes cmdkBg { from { opacity: 0; } to { opacity: 1; } }
.cmdk {
  width: 560px; max-width: calc(100vw - 32px);
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 50px 100px -20px rgba(0,0,0,0.7);
  animation: cmdkIn .22s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes cmdkIn {
  from { opacity: 0; transform: translateY(-12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.cmdk-input {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-2);
}
.cmdk-input .ico { color: var(--ink-mute); font-size: 16px; }
.cmdk-input input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font-family: var(--font-mono); font-size: 16px;
  color: var(--ink);
  outline: none;
}
.cmdk-input kbd {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
  padding: 3px 8px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 4px;
}
.cmdk-list {
  max-height: 56vh; overflow-y: auto;
  padding: 6px 6px 12px;
}
.cmdk-list::-webkit-scrollbar { width: 8px; }
.cmdk-list::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 4px; }
.cmdk-group {
  padding: 8px 14px 4px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .22em;
  color: var(--ink-mute); text-transform: uppercase;
}
.cmdk-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .1s;
  font-size: 14px;
  color: var(--ink-soft);
}
.cmdk-item .ico {
  width: 24px; height: 24px;
  background: rgba(255,255,255,0.04);
  border-radius: 5px;
  display: grid; place-items: center;
  font-size: 12px; color: var(--accent);
  flex-shrink: 0;
}
.cmdk-item .meta { flex: 1; min-width: 0; }
.cmdk-item .meta .t { color: var(--ink); font-weight: 500; }
.cmdk-item .meta .s { color: var(--ink-mute); font-size: 12px; font-family: var(--font-mono); margin-top: 2px; }
.cmdk-item .hint { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.cmdk-item.is-selected, .cmdk-item:hover {
  background: var(--bg-3);
  color: var(--ink);
}
.cmdk-item.is-selected .ico, .cmdk-item:hover .ico {
  background: var(--accent);
  color: var(--accent-fg);
}
.cmdk-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-mute);
  font-size: 13.5px;
}
.cmdk-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
}
.cmdk-footer kbd {
  font-family: var(--font-mono); font-size: 10px;
  padding: 2px 5px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 3px;
  margin: 0 2px;
}

/* ──────────────────────────────────────────
   NOTIFICATIONS BELL + PANEL
   ────────────────────────────────────────── */
.nav-bell {
  position: relative;
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 0;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-soft);
  transition: border-color .15s, color .15s;
}
.nav-bell:hover { border-color: var(--accent); color: var(--accent); }
.nav-bell .dot {
  position: absolute; top: -4px; right: -4px;
  background: var(--redstone);
  color: #fff;
  font-family: var(--font-pixel);
  font-size: 8px;
  min-width: 16px; height: 16px;
  border-radius: 8px;
  padding: 0 4px;
  display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--bg-0);
  letter-spacing: .04em;
}
.notify-panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: 360px; max-width: calc(100vw - 32px);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.7);
  z-index: 60;
  animation: menuIn .18s ease-out both;
  overflow: hidden;
}
.notify-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.notify-head h4 { font-family: var(--font-pixel); font-size: 11px; letter-spacing: .15em; margin: 0; color: var(--ink); }
.notify-head button {
  background: 0; border: 0;
  color: var(--accent); font-size: 12px;
  cursor: pointer;
}
.notify-list { max-height: 60vh; overflow-y: auto; padding: 4px 0; }
.notify-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  position: relative;
  transition: background .12s;
  cursor: pointer;
}
.notify-item:last-child { border-bottom: none; }
.notify-item:hover { background: var(--bg-3); }
.notify-item.unread::before {
  content: ""; position: absolute; left: 8px; top: 18px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
}
.notify-item .ico {
  width: 32px; height: 32px;
  background: var(--bg-3);
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-left: 8px;
}
.notify-item.unread { background: rgba(63,169,245,0.05); }
.notify-item.unread .ico { background: rgba(63,169,245,0.14); color: var(--accent); }
.notify-item .body { flex: 1; min-width: 0; }
.notify-item .body p { margin: 0 0 4px; line-height: 1.4; }
.notify-item .body p b { color: var(--ink); font-weight: 600; }
.notify-item .body p { color: var(--ink-soft); }
.notify-item .when { font-family: var(--font-mono); font-size: 11px; color: var(--ink-mute); }
.notify-foot {
  padding: 10px 16px;
  background: var(--bg-2);
  text-align: center;
}
.notify-foot a {
  font-size: 12px; color: var(--accent);
  font-family: var(--font-pixel); letter-spacing: .1em;
}

/* ──────────────────────────────────────────
   ACHIEVEMENT card improvements
   ────────────────────────────────────────── */
.ach-card {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.ach-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in oklab, var(--tint) 50%, var(--line-strong));
  box-shadow: 0 18px 40px -22px rgba(0,0,0,0.6);
}
.ach-card.locked { opacity: 0.55; }
.ach-card.locked:hover { opacity: 1; }
.ach-card .head {
  display: flex; align-items: flex-start; justify-content: space-between;
}
.ach-card .ico {
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: radial-gradient(circle, color-mix(in oklab, var(--tint) 22%, transparent), transparent 70%);
  border: 1px solid var(--line);
  border-radius: 12px;
  font-size: 24px;
}
.ach-card.rare .ico {
  background: radial-gradient(circle, color-mix(in oklab, var(--gold) 30%, transparent), transparent 70%);
  border-color: var(--gold);
  box-shadow: 0 0 16px color-mix(in oklab, var(--gold) 35%, transparent);
}
.ach-card .badge-row {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
}
.ach-card .status {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .15em;
  padding: 4px 8px; border-radius: 3px;
  background: rgba(255,255,255,0.04);
  color: var(--ink-mute);
  text-transform: uppercase;
}
.ach-card.done .status { background: rgba(43,209,126,0.12); color: var(--emerald); border: 1px solid rgba(43,209,126,0.3); }
.ach-card .rarity {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .15em;
  color: var(--gold);
}
.ach-card h4 { font-family: var(--font-pixel); font-size: 13px; margin: 0; letter-spacing: -.01em; }
.ach-card p { color: var(--ink-soft); font-size: 13px; line-height: 1.5; margin: 0; }
.ach-card .progress {
  display: flex; flex-direction: column; gap: 4px;
  margin-top: auto;
}
.ach-card .progress .label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
}
.ach-card .progress .label b { color: var(--ink); font-weight: 600; }
.ach-card .progress .track {
  height: 4px;
  background: var(--bg-3); border-radius: 2px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.ach-card .progress .fill {
  height: 100%;
  background: var(--tint, var(--accent));
  box-shadow: 0 0 8px color-mix(in oklab, var(--tint, var(--accent)) 50%, transparent);
  transition: width .8s cubic-bezier(.2,.8,.3,1);
}
.ach-card .reward {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.ach-card .reward b { color: var(--accent); font-weight: 600; }

.ach-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 28px;
}
@media (max-width: 720px) {
  .ach-stats { grid-template-columns: 1fr 1fr; }
}

/* ──────────────────────────────────────────
   FRIENDS ONLINE WIDGET
   ────────────────────────────────────────── */
.friends-widget .row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px; align-items: center;
  padding: 9px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.friends-widget .row:last-child { border-bottom: none; }
.friends-widget .row .avatar {
  width: 28px; height: 28px;
  background: var(--bg-3);
  border-radius: 4px;
  display: grid; place-items: center;
  position: relative;
  overflow: hidden;
}
.friends-widget .row .name { font-weight: 500; color: var(--ink); }
.friends-widget .row .loc { font-size: 11px; color: var(--ink-mute); font-family: var(--font-mono); margin-top: 1px; }
.friends-widget .row .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 6px var(--emerald);
}
.friends-widget .row .dot.away { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.friends-widget .row .dot.offline { background: var(--ink-mute); box-shadow: none; }
@media (max-width: 768px) {
  .pg { padding-top: 80px; padding-bottom: 60px; }
  .pg-head { padding: 36px 0 24px; }
  .pg-head-actions { position: relative; right: auto; bottom: auto; margin-top: 14px; }
}


/* ──────────────────────────────────────────
   DAYMODE — comprehensive refinement (warm sky palette)
   ────────────────────────────────────────── */

body.daymode {
  --bg-0:        #e8f1fb;
  --bg-1:        #dfeaf6;
  --bg-2:        #f4f8fc;
  --bg-3:        #ffffff;
  --surface-1:   #ffffff;
  --surface-2:   #fafbfd;
  --surface-3:   #f0f4fa;
  --line:        rgba(20, 40, 70, 0.10);
  --line-strong: rgba(20, 40, 70, 0.18);
  --accent:      #2b7cd9;
  --accent-fg:   #ffffff;
  --accent-2:    #e35d20;
  --accent-3:    #7c54d8;
  --emerald:     #1b9b5e;
  --gold:        #c98a06;
  --redstone:    #d92828;
  --diamond:     #2b7cd9;
  --ink:         #0e1a2e;
  --ink-soft:    #3a4868;
  --ink-mute:    #6a7892;
  --shadow-card: 0 18px 36px -22px rgba(20,40,80,0.18), 0 1px 0 rgba(255,255,255,0.6) inset;
  --glow-diamond: 0 0 0 1px rgba(43,124,217,0.20), 0 8px 20px -10px rgba(43,124,217,0.30);
  background: linear-gradient(180deg, #9bc8ee 0%, #b7d8f0 30%, #d9e8f5 60%, #f4ebd8 90%, #f5d9b5 100%);
}
body.daymode .global-ambient {
  background:
    radial-gradient(ellipse 1400px 800px at 80% 0%, rgba(255,210,140,0.50), transparent 60%),
    radial-gradient(ellipse 1100px 700px at 20% 5%, rgba(255,255,255,0.50), transparent 60%),
    radial-gradient(ellipse 1200px 700px at 50% 80%, rgba(255,200,150,0.30), transparent 60%);
}
body.daymode .global-ambient::before { display: none; }
body.daymode .global-ambient .drift { opacity: 0.22; filter: drop-shadow(0 2px 4px rgba(20,40,80,0.15)); }

body.daymode .nav {
  background: color-mix(in oklab, #b7d8f0 70%, transparent);
  border-bottom: 1px solid rgba(20,40,80,0.10);
}
body.daymode .nav-links a { color: #2a3a55; }
body.daymode .nav-links a:hover { color: var(--ink); }
body.daymode .nav-links a.is-active { color: var(--accent); }
body.daymode .logo span:not(.logo-cube) { color: var(--ink); }
body.daymode .logo { border-right-color: rgba(20,40,80,0.10); }

body.daymode .nav-actions { background: rgba(255,255,255,0.6); border-color: rgba(20,40,80,0.12); }
body.daymode .nav-actions .nav-bell { color: #2a3a55 !important; }
body.daymode .nav-actions .nav-bell:hover { background: rgba(43,124,217,0.10) !important; }
body.daymode .nav-profile-trigger { background: rgba(255,255,255,0.7); border-color: rgba(20,40,80,0.12); color: var(--ink); }
body.daymode .nav-profile-trigger .avatar { box-shadow: 0 0 0 2px rgba(255,255,255,0.8); }
body.daymode .nav-profile-trigger .arrow { color: var(--ink-mute); }
body.daymode .nav-hamburger { background: rgba(255,255,255,0.6); border-color: rgba(20,40,80,0.12); }
body.daymode .nav-hamburger::before, body.daymode .nav-hamburger span, body.daymode .nav-hamburger::after { background: var(--ink); }
body.daymode .mobile-menu { background: #f4f8fc; }
body.daymode .mobile-menu a { color: var(--ink-soft); border-color: rgba(20,40,80,0.08); }
body.daymode .nav-profile-menu { background: #fff; }
body.daymode .nav-profile-menu .head { border-color: rgba(20,40,80,0.08); }
body.daymode .nav-profile-menu a:hover, body.daymode .nav-profile-menu button:hover { background: rgba(43,124,217,0.08); color: var(--accent); }
body.daymode .nav-bell .dot { box-shadow: 0 0 0 2px rgba(255,255,255,0.8); }
body.daymode .notify-panel { background: #fff; }
body.daymode .notify-item.unread { background: rgba(43,124,217,0.06); }
body.daymode .notify-item:hover { background: rgba(20,40,80,0.04); }
body.daymode .notify-item .ico { background: rgba(20,40,80,0.04); }

body.daymode .hp-wordmark .a { color: var(--ink); text-shadow: 3px 3px 0 rgba(255,255,255,0.6); }
body.daymode .hp-wordmark .b { color: var(--accent); text-shadow: 3px 3px 0 rgba(255,255,255,0.7), 0 0 60px rgba(43,124,217,0.35); }
body.daymode .hp-eyebrow { color: var(--ink-soft); }
body.daymode .countdown .seg { background: rgba(255,255,255,0.6); border-color: rgba(20,40,80,0.12); }
body.daymode .countdown .u { color: var(--ink-mute); }
body.daymode .countdown .n { color: var(--accent); }
body.daymode .hp-tagline { color: var(--ink-soft); }
body.daymode .hp-tagline strong { color: var(--ink); }
body.daymode .hp-tagline em { color: var(--accent-2); }
body.daymode .hp-meta { color: var(--ink-soft); }
body.daymode .hp-meta b { color: var(--ink); }

body.daymode .hp-ip { background: linear-gradient(180deg, #ffffff, #f4f8fc); border-color: rgba(20,40,80,0.14); box-shadow: 0 14px 30px -16px rgba(20,40,80,0.20); }
body.daymode .hp-ip:hover { border-color: var(--accent); }
body.daymode .hp-ip .lbl { color: var(--ink-mute); border-right-color: rgba(20,40,80,0.10); }
body.daymode .hp-ip .addr { color: var(--accent); }
body.daymode .hp-ip .copy { background: var(--accent); color: #fff; }

body.daymode .hp-status { background: linear-gradient(180deg, #0f1827, #0a1220); border-color: rgba(20,40,80,0.30); box-shadow: 0 30px 60px -30px rgba(20,40,80,0.40); }
body.daymode .hp-status-bar { background: rgba(0,0,0,0.35); border-color: rgba(255,255,255,0.06); }
body.daymode .hp-status-bar .title { color: #8aa0bd; }
body.daymode .hp-status-row { border-color: rgba(255,255,255,0.05); }
body.daymode .hp-status-row .k { color: #8aa0bd; }
body.daymode .hp-status-row .v { color: #e8edf6; }
body.daymode .hp-status-row .v.accent { color: #5dafff; }
body.daymode .hp-status-row .v.emerald { color: #4be398; }
body.daymode .hp-status-actions { background: linear-gradient(180deg, transparent, rgba(43,124,217,0.06)); border-color: rgba(255,255,255,0.06); }
body.daymode .hp-status-actions .btn { background: rgba(255,255,255,0.08); color: #e8edf6; border-color: rgba(255,255,255,0.12); }
body.daymode .hp-status-actions .btn--primary { background: linear-gradient(180deg, #5dafff, #2b7cd9); color: #fff; border-color: #5dafff; }

body.daymode .chip { background: rgba(255,255,255,0.65); border-color: rgba(43,124,217,0.30); color: var(--accent); }

body.daymode .ticker { background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.7)); border-color: rgba(20,40,80,0.10); }
body.daymode .ticker::before { background: linear-gradient(90deg, #d9e8f5, transparent); }
body.daymode .ticker::after { background: linear-gradient(-90deg, #d9e8f5, transparent); }
body.daymode .ticker-item { color: var(--ink-soft); }
body.daymode .ticker-item .what b { color: var(--ink); }
body.daymode .ticker-item .ico { background: rgba(20,40,80,0.05); }
body.daymode .ticker-label { color: var(--ink-mute); border-color: rgba(20,40,80,0.10); }

body.daymode .section-title, body.daymode .pg-title { color: var(--ink); }
body.daymode .section-sub, body.daymode .pg-sub { color: var(--ink-soft); }
body.daymode .section-eyebrow, body.daymode .pg-eyebrow { color: var(--accent); }

body.daymode .dash-card,
body.daymode .shop-product,
body.daymode .feat-card,
body.daymode .mode-card,
body.daymode .mode-mini,
body.daymode .vip-card,
body.daymode .hp-mode,
body.daymode .hp-why-card,
body.daymode .ach-card,
body.daymode .stat-tile,
body.daymode .dash-stat,
body.daymode .status-card,
body.daymode .lb-shell,
body.daymode .pg-row,
body.daymode .heatmap-wrap,
body.daymode .pg-empty,
body.daymode .top-player {
  background: #ffffff !important;
  border-color: rgba(20,40,80,0.10);
  box-shadow: 0 12px 28px -22px rgba(20,40,80,0.22), 0 1px 0 rgba(255,255,255,0.6) inset;
}
body.daymode .dash-card h3,
body.daymode .shop-product h4,
body.daymode .hp-mode-name,
body.daymode .mode-feat h3,
body.daymode .hp-why-card h4,
body.daymode .ach-card h4 { color: var(--ink); }
body.daymode .shop-product p,
body.daymode .hp-mode-tag,
body.daymode .feat-card p,
body.daymode .ach-card p { color: var(--ink-soft); }

body.daymode .mode-feat {
  background:
    radial-gradient(ellipse 600px 320px at 100% 0%, color-mix(in oklab, var(--tint) 14%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--tint) 5%, #ffffff), #fafbfd) !important;
  border-color: color-mix(in oklab, var(--tint) 35%, rgba(20,40,80,0.12));
}
body.daymode .mode-feat p { color: var(--ink-soft); }
body.daymode .mode-feat .perks span { background: rgba(20,40,80,0.04); border-color: rgba(20,40,80,0.10); color: var(--ink-soft); }
body.daymode .mode-feat .stats { border-color: rgba(20,40,80,0.10); }
body.daymode .mode-feat .stats .stat .n { color: var(--ink); }
body.daymode .mode-feat .stats .stat .l { color: var(--ink-mute); }

body.daymode .featured-streamer {
  background: linear-gradient(135deg, rgba(217,40,40,0.06), #ffffff 60%);
  border-color: color-mix(in oklab, #d92828 25%, rgba(20,40,80,0.14));
}
body.daymode .featured-streamer .preview {
  background:
    repeating-linear-gradient(45deg, rgba(20,40,80,0.03) 0 14px, transparent 14px 28px),
    radial-gradient(circle at center, rgba(217,40,40,0.10), transparent 70%),
    #f4f8fc;
}
body.daymode .featured-streamer h3 { color: var(--ink); }
body.daymode .featured-streamer p { color: var(--ink-soft); }

body.daymode .top-player .name { color: var(--ink); }
body.daymode .top-player .avatar { background: #f4f8fc !important; border-color: rgba(20,40,80,0.08); }

body.daymode .discord-block {
  background: linear-gradient(135deg, rgba(88,101,242,0.10), #ffffff 60%);
  border-color: color-mix(in oklab, #5865F2 30%, rgba(20,40,80,0.14));
}
body.daymode .discord-block aside { background: rgba(20,40,80,0.03); border-color: rgba(20,40,80,0.08); }
body.daymode .discord-channel { color: var(--ink-soft); }
body.daymode .discord-channel .hash { color: var(--ink-mute); }
body.daymode .discord-block p { color: var(--ink-soft); }
body.daymode .discord-block .stat .n { color: var(--ink); }
body.daymode .discord-block .stat .l { color: var(--ink-mute); }

body.daymode .newsletter {
  background:
    radial-gradient(ellipse 600px 280px at 100% 50%, rgba(227,93,32,0.10), transparent 70%),
    linear-gradient(180deg, #ffffff, #fafbfd);
  border-color: rgba(20,40,80,0.14);
}
body.daymode .newsletter h3 { color: var(--ink); }
body.daymode .newsletter p { color: var(--ink-soft); }
body.daymode .newsletter-form { background: #fff; border-color: rgba(20,40,80,0.14); }
body.daymode .newsletter-form input { color: var(--ink); }
body.daymode .newsletter-foot { color: var(--ink-mute); }

body.daymode .section-alt { background: linear-gradient(180deg, transparent 0%, rgba(255,255,255,0.35) 35%, rgba(255,255,255,0.45) 65%, transparent 100%); }

body.daymode .btn {
  background: #ffffff !important;
  border-color: rgba(20,40,80,0.16) !important;
  color: var(--ink) !important;
}
body.daymode .btn:hover { background: #fafbfd !important; border-color: rgba(20,40,80,0.24) !important; }
body.daymode .btn--primary {
  background: linear-gradient(180deg, #5dafff, #2b7cd9) !important;
  border-color: #5dafff !important;
  color: #ffffff !important;
  box-shadow: 0 10px 24px -10px rgba(43,124,217,0.40), inset 0 1px 0 rgba(255,255,255,0.30);
}

body.daymode .dash-hero {
  background: linear-gradient(135deg, rgba(43,124,217,0.08), #ffffff 60%) !important;
  border-color: rgba(20,40,80,0.14);
}
body.daymode .dash-skin-slot { background: radial-gradient(circle, rgba(43,124,217,0.15), transparent 65%), #fafbfd; border-color: rgba(20,40,80,0.10); }
body.daymode .dash-user h2 { color: var(--ink); }
body.daymode .dash-user .meta b { color: var(--ink); }

body.daymode .dash-stat .lbl, body.daymode .stat-tile .stat-label { color: var(--ink-mute); }
body.daymode .dash-stat .delta { color: var(--ink-soft); }
body.daymode .xp-bar .track { background: rgba(20,40,80,0.06); border-color: rgba(20,40,80,0.10); }
body.daymode .xp-bar .meta b { color: var(--ink); }

body.daymode .heatmap-cell { background: #e8eef5; border-color: rgba(20,40,80,0.06); }
body.daymode .heatmap-cell.lv-1 { background: color-mix(in oklab, var(--accent) 25%, #e8eef5); }
body.daymode .heatmap-cell.lv-2 { background: color-mix(in oklab, var(--accent) 50%, #e8eef5); }
body.daymode .heatmap-cell.lv-3 { background: color-mix(in oklab, var(--accent) 75%, #e8eef5); }
body.daymode .heatmap-cell.lv-4 { background: var(--accent); }
body.daymode .heatmap-foot b { color: var(--ink); }

body.daymode .dash-activity li { border-color: rgba(20,40,80,0.06); }
body.daymode .dash-activity .ico { background: rgba(20,40,80,0.04); }
body.daymode .dash-activity .text { color: var(--ink-soft); }
body.daymode .dash-activity .text b { color: var(--ink); }

body.daymode .auth-field input,
body.daymode .auth-field select,
body.daymode .auth-field textarea,
body.daymode .pg-input { background: #fff; color: var(--ink); border-color: rgba(20,40,80,0.16); }
body.daymode .auth-field label, body.daymode .pg-form-row label { color: var(--ink-mute); }
body.daymode .auth-shell { background: linear-gradient(180deg, #ffffff, #f4f8fc); border-color: rgba(20,40,80,0.14); }
body.daymode .auth-aside {
  background: radial-gradient(ellipse 500px 400px at 100% 0%, rgba(43,124,217,0.14), transparent 60%), linear-gradient(180deg, #f4f8fc, #ffffff);
  border-color: rgba(20,40,80,0.08);
}
body.daymode .auth-form-wrap { background: #fafbfd; }
body.daymode .auth-aside p, body.daymode .auth-aside-perks li { color: var(--ink-soft); }
body.daymode .auth-aside-perks b { color: var(--ink); }
body.daymode .auth-aside-foot { color: var(--ink-mute); border-color: rgba(20,40,80,0.10); }

body.daymode .pg-tabs { border-color: rgba(20,40,80,0.10); }
body.daymode .pg-tab { color: var(--ink-soft); }
body.daymode .pg-tab.is-active { color: var(--accent); }
body.daymode .pg-row .meta h4 { color: var(--ink); }
body.daymode .pg-row .meta p { color: var(--ink-soft); }
body.daymode .pg-row .when { color: var(--ink-mute); }
body.daymode .pg-row .ico { background: rgba(20,40,80,0.04); }
body.daymode .pg-row:hover { background: #fafbfd; }

body.daymode .footer { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.5)); border-color: rgba(20,40,80,0.10); }
body.daymode .footer h5 { color: var(--ink); }
body.daymode .footer a { color: var(--ink-soft); }
body.daymode .footer-bottom { color: var(--ink-mute); border-color: rgba(20,40,80,0.10); }
body.daymode .footer-socials a { background: #fff; border-color: rgba(20,40,80,0.12); color: var(--ink-soft); }
body.daymode .footer-status-strip { background: rgba(255,255,255,0.65); border-color: rgba(20,40,80,0.10); }
body.daymode .footer-status-strip b { color: var(--ink); }

body.daymode .cookie-banner { background: #ffffff !important; border-color: rgba(20,40,80,0.14); box-shadow: 0 30px 60px -20px rgba(20,40,80,0.25); }
body.daymode .cookie-banner p { color: var(--ink-soft); }
body.daymode .toast { background: #ffffff; border-color: rgba(20,40,80,0.14); color: var(--ink); box-shadow: 0 20px 40px -16px rgba(20,40,80,0.25); }

body.daymode .cmdk { background: #ffffff; border-color: rgba(20,40,80,0.14); }
body.daymode .cmdk-input { background: #fafbfd; border-color: rgba(20,40,80,0.10); }
body.daymode .cmdk-input input { color: var(--ink); }
body.daymode .cmdk-input kbd { background: #fff; border-color: rgba(20,40,80,0.14); color: var(--ink-mute); }
body.daymode .cmdk-item { color: var(--ink-soft); }
body.daymode .cmdk-item .ico { background: rgba(20,40,80,0.05); }
body.daymode .cmdk-item.is-selected, body.daymode .cmdk-item:hover { background: rgba(43,124,217,0.08); color: var(--ink); }
body.daymode .cmdk-footer { background: #fafbfd; border-color: rgba(20,40,80,0.10); color: var(--ink-mute); }

body.daymode .dn-track { background: linear-gradient(135deg, #6cb8ff 0%, #ffc97a 100%); border-color: rgba(20,40,80,0.20); }

body.daymode ::selection { background: color-mix(in oklab, var(--accent) 50%, transparent); color: var(--ink); }
body.daymode .page-shell { background: transparent; }
body.daymode .hp-floater { opacity: 0.25; mix-blend-mode: multiply; }
body.daymode .voxel-svg { filter: drop-shadow(0 4px 8px rgba(20,40,80,0.18)); }

/* Wiki + legal + about */
body.daymode .wiki-article h2, body.daymode .wiki-article h3 { color: var(--ink); }
body.daymode .wiki-article p { color: var(--ink-soft); }
body.daymode .wiki-article code { background: rgba(20,40,80,0.05); color: var(--accent); }
body.daymode .wiki-article pre { background: #fafbfd; border-color: rgba(20,40,80,0.10); color: var(--ink); }
body.daymode .wiki-nav a { color: var(--ink-soft); }
body.daymode .wiki-nav h4 { color: var(--ink-mute); }

/* FAQ */
body.daymode .faq-q { background: #ffffff !important; border-color: rgba(20,40,80,0.10); }
body.daymode .faq-q summary { color: var(--ink); }
body.daymode .faq-q p { color: var(--ink-soft); }

/* Timeline */
body.daymode .timeline::before { background: rgba(20,40,80,0.15); }
body.daymode .tl-item h3 { color: var(--ink); }
body.daymode .tl-item p { color: var(--ink-soft); }
body.daymode .tl-item ul li { color: var(--ink-soft); }
body.daymode .tl-item::before { box-shadow: 0 0 12px var(--accent), 0 0 0 4px #e8f1fb; }
body.daymode .tl-item.is-done::before { box-shadow: 0 0 12px var(--emerald), 0 0 0 4px #e8f1fb; }

/* Settings rows */
body.daymode .acct-section h3 { color: var(--ink); }
body.daymode .acct-section .sub { color: var(--ink-soft); }
body.daymode .acct-row { border-color: rgba(20,40,80,0.08); }
body.daymode .acct-row .k { color: var(--ink); }
body.daymode .acct-row .v { color: var(--ink-soft); }

/* Leaderboard rows */
body.daymode .lb-head { background: rgba(20,40,80,0.04); border-color: rgba(20,40,80,0.10); color: var(--ink-mute); }
body.daymode .lb-row-x { border-color: rgba(20,40,80,0.08); }
body.daymode .lb-row-x:hover { background: #fafbfd; }
body.daymode .lb-row-x .player .name { color: var(--ink); }
body.daymode .lb-row-x .stat { color: var(--ink); }
body.daymode .lb-row-x .stat.dim { color: var(--ink-mute); }

/* Match history (PlayerProfile) */
body.daymode .match-row { background: #fff; border-color: rgba(20,40,80,0.10); }
body.daymode .match-row .mode b { color: var(--ink); }
body.daymode .match-row .stat-num { color: var(--ink); }
body.daymode .match-row .when { color: var(--ink-mute); }
body.daymode .mini-bars .b { background: rgba(20,40,80,0.10); }

/* Shop sidebar */
body.daymode .shop-cat-list button { color: var(--ink-soft); }
body.daymode .shop-cat-list button:hover { background: rgba(20,40,80,0.05); color: var(--ink); }
body.daymode .shop-cat-list button.is-active { background: rgba(43,124,217,0.10); color: var(--accent); }
body.daymode .shop-cat-head { color: var(--ink-mute); }

/* 404 */
body.daymode .nf-code { color: var(--accent); text-shadow: 4px 4px 0 rgba(20,40,80,0.10); }
body.daymode .nf-title { color: var(--ink); }
body.daymode .nf-sub { color: var(--ink-soft); }

/* Force daymode overrides for hp-ip + status console buttons (resolve var() collisions) */
body.daymode .hp-ip {
  background: linear-gradient(180deg, #ffffff, #f4f8fc) !important;
  border-color: rgba(20,40,80,0.14) !important;
}
body.daymode .hp-ip .addr { color: #2b7cd9 !important; }
body.daymode .hp-ip .lbl { color: var(--ink-mute) !important; border-right-color: rgba(20,40,80,0.10) !important; }
body.daymode .hp-ip .copy { background: #2b7cd9 !important; color: #fff !important; }
body.daymode .hp-status-actions .btn { background: rgba(255,255,255,0.10) !important; color: #e8edf6 !important; border-color: rgba(255,255,255,0.14) !important; }
body.daymode .hp-status-actions .btn--primary { background: linear-gradient(180deg, #5dafff, #2b7cd9) !important; color: #fff !important; border-color: #5dafff !important; }
body.daymode .hp-status { background: linear-gradient(180deg, #0f1827, #0a1220) !important; border-color: rgba(20,40,80,0.30) !important; }
body.daymode .countdown .seg { background: rgba(255,255,255,0.7) !important; border-color: rgba(20,40,80,0.15) !important; }
body.daymode .countdown .n { color: #2b7cd9 !important; }
body.daymode .countdown .u { color: rgba(14,26,46,0.55) !important; }


/* ──────────────────────────────────────────
   DAYMODE — additional badge / pill / chip contrast fixes
   ────────────────────────────────────────── */

/* Badges on cards (EN POPÜLER, YENİ, NADIR, etc.) — keep tinted bg but force readable foreground */
body.daymode .shop-product .badge,
body.daymode .mode-flag,
body.daymode .vip-flag,
body.daymode .featured-streamer .live,
body.daymode .ach-card .status,
body.daymode .ach-card .rarity,
body.daymode .hp-mode-flag {
  color: #ffffff !important;
  background: #2b7cd9 !important;
  border-color: transparent !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.20);
}
/* Variant badges keep semantic color */
body.daymode .shop-product .badge.sale { background: #d92828 !important; }
body.daymode .shop-product .badge.new  { background: #1b9b5e !important; }

/* When the badge uses inline style background (skin tag, VIP "EN POPÜLER", etc.), force text contrast */
body.daymode .shop-product .badge[style*="background"],
body.daymode .featured-streamer .live,
body.daymode .top-player .rank {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}
/* Top player rank — rank color should still be tier color but with dark shadow for contrast on light card */
body.daymode .top-player .rank {
  color: var(--tint, #2b7cd9) !important;
  text-shadow: 0 1px 1px rgba(255,255,255,0.6) !important;
}

/* Achievement card status / rarity pills */
body.daymode .ach-card .status {
  background: rgba(20,40,80,0.08) !important;
  color: #0e1a2e !important;
  border: 1px solid rgba(20,40,80,0.12) !important;
  text-shadow: none !important;
}
body.daymode .ach-card.done .status {
  background: rgba(27,155,94,0.18) !important;
  color: #0a5e35 !important;
  border-color: rgba(27,155,94,0.40) !important;
}
body.daymode .ach-card .rarity {
  background: transparent !important;
  color: #c98a06 !important;
  text-shadow: none !important;
}

/* Mode status indicator (small "▸ Lansman'a hazır" etc) */
body.daymode .mode-status,
body.daymode .hp-mode-status,
body.daymode .mode-feat .flag,
body.daymode .mode-mini .tag,
body.daymode .ticker-label,
body.daymode .v2-eyebrow,
body.daymode .v3-eyebrow {
  color: #2b7cd9 !important;
}

/* News / event tags (inline-styled bg colors) — give them solid bg + white text */
body.daymode [class*="badge"][style*="background"],
body.daymode .pg-row .badge,
body.daymode .ach-card .badge {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.20);
}

/* Forum/news article tag pills — inline-styled by JSX */
body.daymode article [style*="background: rgb(63"],
body.daymode article [style*="background: rgb(255"],
body.daymode article [style*="background: rgb(43"],
body.daymode article [style*="background: rgb(183"] {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.20);
}

/* CTA / hero status badge — keep dark for readability on white */
body.daymode .hp-status-bar .badge.warn { color: #e35d20 !important; }
body.daymode .hp-status-bar .badge { color: #4be398 !important; }

/* Ticker "CANLI" label more visible */
body.daymode .ticker-label .pulse { box-shadow: 0 0 6px var(--emerald); }

/* Streamer card LIVE badge */
body.daymode .featured-streamer .preview .live {
  background: #d92828 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px -4px rgba(217,40,40,0.4);
}
body.daymode .featured-streamer .preview .viewers {
  background: rgba(14,26,46,0.75) !important;
  color: #fff !important;
}

/* Generic .btn refinement — final pass */
body.daymode .btn,
body.daymode a.btn,
body.daymode button.btn {
  background: #ffffff !important;
  color: #0e1a2e !important;
  border-color: rgba(20,40,80,0.18) !important;
}
body.daymode .btn:hover,
body.daymode a.btn:hover,
body.daymode button.btn:hover {
  background: #f4f8fc !important;
  border-color: rgba(20,40,80,0.30) !important;
}
body.daymode .btn--primary,
body.daymode a.btn--primary,
body.daymode button.btn--primary {
  background: linear-gradient(180deg, #5dafff, #2b7cd9) !important;
  color: #ffffff !important;
  border-color: #5dafff !important;
}
body.daymode .btn--ghost { background: transparent !important; }

/* All-purpose: any [style*="color: var(--accent)"] when bg is also accent → use white */
body.daymode .vip-name { color: var(--accent) !important; text-shadow: 0 1px 1px rgba(255,255,255,0.5); }
body.daymode .podium-place { color: var(--tint, var(--accent)) !important; text-shadow: 0 1px 2px rgba(255,255,255,0.4); }

/* Day mode: SVG-style voxel icons get slightly less glow */
body.daymode .voxel-svg {
  filter: drop-shadow(0 4px 8px rgba(20,40,80,0.18)) !important;
}

/* Discord block badge "aktif" */
body.daymode .discord-block h3 .badge {
  background: #5865F2 !important;
  color: #fff !important;
}

/* ──────────────────────────────────────────
   DAYMODE — FINAL HARD OVERRIDE (background-color, not shorthand)
   The original .shop-product rule uses 'background:' shorthand which
   may resolve var() at parse time, locking the dark value. Using
   background-color longhand with !important ensures full override.
   ────────────────────────────────────────── */
body.daymode .shop-product,
body.daymode .dash-card,
body.daymode .feat-card,
body.daymode .mode-card,
body.daymode .mode-mini,
body.daymode .vip-card,
body.daymode .hp-mode,
body.daymode .hp-why-card,
body.daymode .ach-card,
body.daymode .stat-tile,
body.daymode .dash-stat,
body.daymode .status-card,
body.daymode .lb-shell,
body.daymode .pg-row,
body.daymode .heatmap-wrap,
body.daymode .pg-empty,
body.daymode .top-player,
body.daymode .vip-grid .shop-product,
body.daymode .vip-grid .shop-product.is-featured,
body.daymode .faq-q,
body.daymode .card,
body.daymode .match-row,
body.daymode .lb-row-x {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* For featured tier — gentle tint over white */
body.daymode .vip-grid .shop-product.is-featured,
body.daymode .hp-mode.is-featured {
  background-image:
    radial-gradient(ellipse 400px 200px at 50% 0%, color-mix(in oklab, var(--tint) 14%, transparent), transparent 60%) !important;
}

/* Mode feat keeps its tint */
body.daymode .mode-feat {
  background-color: #ffffff !important;
  background-image:
    radial-gradient(ellipse 600px 320px at 100% 0%, color-mix(in oklab, var(--tint) 14%, transparent), transparent 70%) !important;
}

/* Featured streamer + Discord block + Newsletter — tinted bg over white */
body.daymode .featured-streamer {
  background-color: #ffffff !important;
  background-image: linear-gradient(135deg, rgba(217,40,40,0.06), transparent 60%) !important;
}
body.daymode .discord-block {
  background-color: #ffffff !important;
  background-image: linear-gradient(135deg, rgba(88,101,242,0.10), transparent 60%) !important;
}
body.daymode .newsletter {
  background-color: #ffffff !important;
  background-image: radial-gradient(ellipse 600px 280px at 100% 50%, rgba(227,93,32,0.10), transparent 70%) !important;
}
body.daymode .dash-hero {
  background-color: #ffffff !important;
  background-image: linear-gradient(135deg, rgba(43,124,217,0.08), transparent 60%) !important;
}
body.daymode .auth-shell {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff, #f4f8fc) !important;
}
body.daymode .auth-aside {
  background-color: #f4f8fc !important;
  background-image: radial-gradient(ellipse 500px 400px at 100% 0%, rgba(43,124,217,0.14), transparent 60%) !important;
}
body.daymode .auth-form-wrap {
  background-color: #fafbfd !important;
}
body.daymode .hp-cta {
  background-color: #ffffff !important;
  background-image: radial-gradient(ellipse 800px 380px at 100% 100%, rgba(43,124,217,0.14), transparent 70%) !important;
}
body.daymode .v3-cta {
  background-color: #ffffff !important;
  background-image: radial-gradient(ellipse 800px 300px at 100% 100%, rgba(43,124,217,0.16), transparent 70%) !important;
}

/* IP plaque final */
body.daymode .hp-ip {
  background-color: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff, #f4f8fc) !important;
}

/* Status console stays dark */
body.daymode .hp-status {
  background-color: #0a1220 !important;
  background-image: linear-gradient(180deg, #0f1827, #0a1220) !important;
}

/* Buttons */
body.daymode .btn {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0e1a2e !important;
}
body.daymode .btn--primary {
  background-color: #2b7cd9 !important;
  background-image: linear-gradient(180deg, #5dafff, #2b7cd9) !important;
  color: #ffffff !important;
}

/* Form input fields */
body.daymode .auth-field input,
body.daymode .auth-field select,
body.daymode .auth-field textarea,
body.daymode .pg-input,
body.daymode .newsletter-form,
body.daymode .newsletter-form input {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0e1a2e !important;
}

/* Mode art (radial bg with tint) */
body.daymode .hp-mode-art,
body.daymode .shop-product-art,
body.daymode .mode-feat .ico-wrap,
body.daymode .mode-mini .head .ico-wrap,
body.daymode .vip-orb,
body.daymode .dash-skin-slot {
  background-color: #fafbfd !important;
  background-image:
    repeating-linear-gradient(45deg, rgba(20,40,80,0.02) 0 10px, transparent 10px 20px),
    radial-gradient(circle, color-mix(in oklab, var(--tint, var(--accent)) 18%, transparent), transparent 65%) !important;
}

/* Hero IP plaque address + caret */
body.daymode .hp-ip .addr { color: #2b7cd9 !important; }
body.daymode .hp-ip .lbl { color: #6a7892 !important; }
body.daymode .hp-ip .copy { background-color: #2b7cd9 !important; background-image: linear-gradient(180deg, #5dafff, #2b7cd9) !important; color: #fff !important; }


/* ──────────────────────────────────────────
   ANIMATION FALLBACK — ensure grid children remain visible
   if the page-entrance animation never plays (hidden tab, low FPS).
   The dark.css revealAuto is "forwards" but it never starts when
   document.hidden=true on load. This safeguards visibility.
   ────────────────────────────────────────── */
@supports (animation-play-state: running) {
  .modes-grid > *,
  .features-grid > *,
  .shop-grid > *,
  .vip-grid > *,
  .rank-grid > *,
  .news-list > *,
  .streamers-grid > *,
  .leaderboard-list > *,
  .activity-list > *,
  .stats-grid > * {
    animation-fill-mode: both;
  }
}
/* If reduced motion is preferred, just show items */
@media (prefers-reduced-motion: reduce) {
  .modes-grid > *,
  .features-grid > *,
  .shop-grid > *,
  .vip-grid > *,
  .rank-grid > *,
  .news-list > *,
  .streamers-grid > *,
  .leaderboard-list > *,
  .activity-list > *,
  .stats-grid > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Failsafe: 1.2s after element paints, force visible (even if animation broken) */
.modes-grid > *,
.features-grid > *,
.shop-grid > *,
.vip-grid > *,
.rank-grid > *,
.news-list > *,
.streamers-grid > *,
.leaderboard-list > *,
.activity-list > *,
.stats-grid > * {
  animation: revealAuto 0.6s forwards, revealFailsafe 1.2s 1.2s forwards;
}
@keyframes revealFailsafe {
  to { opacity: 1; transform: none; }
}


/* ──────────────────────────────────────────
   FINAL FIX — never start grid children at opacity:0
   The reveal can use transform only; opacity stays at 1 always.
   This guarantees visibility even if animation never runs.
   ────────────────────────────────────────── */
.modes-grid > *,
.features-grid > *,
.shop-grid > *,
.vip-grid > *,
.rank-grid > *,
.news-list > *,
.streamers-grid > *,
.leaderboard-list > *,
.activity-list > *,
.stats-grid > * {
  opacity: 1 !important;
  animation: revealTransformOnly 0.6s cubic-bezier(.2,.8,.3,1) forwards !important;
}
@keyframes revealTransformOnly {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}


/* ──────────────────────────────────────────
   AUDIT FIX — Button + badge consistency pass
   ────────────────────────────────────────── */

/* Make sure ALL primary buttons share the same height + radius */
.btn { min-height: 38px; line-height: 1.2; }
.btn--lg { min-height: 44px; }

/* Top-positioned badges need parent overflow:visible */
.shop-product, .ach-card, .mode-card, .hp-mode, .mode-mini, .mode-feat {
  overflow: visible;
}
/* If a card uses ::before/::after for decorative gradients that needed clipping,
   that decoration is now contained via clip-path on the pseudo only */
.hp-mode::before, .mode-feat::before {
  clip-path: inset(0 round inherit);
}

/* Badges — consistent typographic style across the site */
.shop-product .badge,
.mode-flag,
.vip-flag,
.hp-mode-flag {
  position: absolute;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .18em;
  padding: 5px 10px;
  border-radius: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 14px -4px rgba(0,0,0,.5);
  z-index: 3;
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}
/* "EN POPÜLER" tag on VIP — center-top, half outside */
.vip-grid .shop-product .badge.new,
.vip-grid .shop-product .badge {
  top: -11px !important;
  right: 16px !important;
  left: auto !important;
}

/* Hero & section button row consistency */
.hp-cta-row .btn,
.hp-status-actions .btn,
.hp-cta-side .btn,
.cta-actions .btn,
.cta-row .btn,
.mode-feat .cta-row .btn {
  height: 44px;
  min-height: 44px;
}

/* "Hızlı Başla" + "Nasıl bağlanırım" hero row — equal visual weight */
.hp-cta-row { gap: 12px; flex-wrap: wrap; }
.hp-cta-row .btn { padding: 0 22px; }
.hp-cta-row .btn--primary { padding: 0 24px; }

/* IP plaque button — same height as input */
.hp-ip .copy {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mode feat CTA row — vertical-align */
.mode-feat .cta-row {
  display: flex; align-items: center; gap: 12px;
}

/* Make sure inline-styled buttons (pages-account/community) align */
.dash-card .btn,
.dash-grid .btn { min-height: 38px; }

/* Tabs uniform height */
.pg-tab { height: 44px; padding: 0 18px; line-height: 1; }

/* Auth submit + form actions */
.auth-submit { min-height: 48px; }

/* Pixel font baseline correction for buttons (Press Start 2P sits low) */
.btn .pixel,
.section-eyebrow,
.hp-cta-eyebrow,
.pg-eyebrow,
.mode-feat .flag,
.mode-mini .tag,
.hp-mode-status {
  line-height: 1;
  position: relative;
  top: 1px;
}

/* Top-player rank pinned to corner — not overlapping avatar */
.top-player .rank {
  top: 10px !important;
  left: 12px !important;
}

/* Achievement card status badge — keep inside card */
.ach-card .status {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ach-card .rarity {
  display: inline-flex;
  align-items: center;
}

/* Pixel-font links — vertical centering inside btn */
.btn.btn--primary { letter-spacing: .01em; font-weight: 600; }

/* Streamer LIVE pill — text properly centered */
.featured-streamer .preview .live {
  line-height: 1;
  padding: 5px 10px;
}
.featured-streamer .preview .live i {
  margin-right: 2px;
}

/* Audit fix: standardize all card hover transforms to single source */
.shop-product:hover,
.dash-card:hover,
.feat-card:hover,
.mode-card:hover,
.mode-mini:hover,
.vip-card:hover,
.hp-mode:hover,
.hp-why-card:hover,
.ach-card:hover {
  transform: translateY(-3px);
}
.mode-feat:hover,
.hp-mode.is-featured:hover { transform: translateY(-5px); }

/* Form field rows align */
.auth-row {
  min-height: 36px;
  align-items: center;
}

/* Nav action group — all kids same height */
.nav-actions > * { height: 28px; }
.nav-actions { height: 36px; }

/* Cookie banner buttons same height */
.cookie-banner .btn { min-height: 36px; padding: 8px 14px; font-size: 12.5px; }

/* Drift voxels — keep behind everything, don't overlap nav */
.global-ambient .drift:nth-child(1) { top: 28%; left: 6%;  }
.global-ambient .drift:nth-child(2) { top: 42%; left: 90%; }
.global-ambient .drift:nth-child(3) { top: 64%; left: 14%; }
.global-ambient .drift:nth-child(4) { top: 78%; left: 78%; }
.global-ambient .drift:nth-child(5) { top: 88%; left: 42%; }

/* Final override: kill any lingering shine pseudo + metallic border */
.vip-grid .shop-product::after,
.vip-grid .shop-product.is-featured::before {
  display: none !important;
  content: none !important;
}


/* ──────────────────────────────────────────
   FILL-IN: missing polish across pages
   ────────────────────────────────────────── */

/* Tweaks panel — fits both modes */
body.daymode .tweaks-panel,
body.daymode [class*="tweaks-panel"] {
  background: #ffffff !important;
  border-color: rgba(20,40,80,0.14) !important;
  color: var(--ink) !important;
  box-shadow: 0 30px 60px -20px rgba(20,40,80,0.30) !important;
}
body.daymode .tweaks-panel *,
body.daymode [class*="tweaks-panel"] * { color: inherit; }

/* Hero status — gentle "thinking" pulse when pre-launch */
.hp-status-bar .badge.warn i {
  animation: hpPulse 1.6s ease-in-out infinite;
}

/* Activity ticker — subtle in daymode (no harsh white) */
body.daymode .ticker-track { will-change: transform; }

/* Section-alt softer in daymode */
body.daymode .section-alt {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.45) 30%,
    rgba(255,255,255,0.55) 70%,
    transparent 100%) !important;
}

/* CmdK contrast in daymode */
body.daymode .cmdk-backdrop {
  background: rgba(20,40,80,0.5) !important;
}

/* Mobile menu in daymode — solid */
body.daymode .mobile-menu { background: #ffffff !important; }

/* Settings tabs underline alignment */
.pg-tabs { border-bottom: 1px solid var(--line); }

/* Friends widget — equal row heights */
.friends-widget .row { min-height: 44px; }

/* Wallet stat cards — uniform with dash-stat */
.dash-stat .val { line-height: 1; padding: 2px 0; }

/* Form input height parity */
.pg-input, .auth-field input, .auth-field select {
  min-height: 44px;
  padding: 10px 14px;
}
.auth-field textarea, .pg-form-row textarea {
  min-height: 110px;
  padding: 12px 14px;
}

/* Top-right action group spacing */
.nav-cta { gap: 10px; }

/* Status pulse aligned */
.status-list .pulse { align-self: center; }

/* Match-row equal columns */
.match-row { min-height: 56px; }

/* Achievement card heights uniform */
.ach-card { min-height: 220px; }

/* Heatmap legend gap */
.heatmap-head .legend { gap: 4px; }
.heatmap-head .legend .lv { flex-shrink: 0; }

/* CTA on featured streamer card — equal button height */
.featured-streamer .body .btn { min-height: 40px; padding: 0 18px; }

/* Discord block action buttons */
.discord-block .actions .btn { min-height: 44px; padding: 0 20px; }

/* Cookie banner button group equal */
.cookie-banner .actions .btn { flex: 1; min-height: 38px; }

/* Toast min size */
.toast { min-height: 48px; }

/* Notification panel headers tighter */
.notify-head { padding: 14px 18px; }
.notify-item { padding: 14px 18px 14px 22px; }
.notify-item.unread::before { left: 10px; top: 22px; }

/* Profile dropdown menu items uniform */
.nav-profile-menu a, .nav-profile-menu button { min-height: 36px; padding: 8px 12px; }

/* Modal overlays in daymode */
body.daymode .cookie-banner,
body.daymode .toast,
body.daymode .nav-profile-menu,
body.daymode .notify-panel {
  background-color: #ffffff !important;
}

/* Pixel-font heading vertical-align fix across pages */
.section-eyebrow, .pg-eyebrow, .hp-eyebrow,
.section-title, .pg-title,
.hp-mode-status, .mode-feat .flag, .mode-mini .tag,
.ticker-label {
  font-feature-settings: "tnum";
}

/* Final: legal/wiki text links */
.wiki-article p a:not(.btn),
.faq-q p a,
.acct-section a:not(.btn) {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding-bottom: 1px;
  transition: border-color .15s;
}
.wiki-article p a:hover,
.faq-q p a:hover,
.acct-section a:hover { border-color: var(--accent); }

/* 404 link cards in daymode */
body.daymode .nf-shell .dash-card { background-color: #ffffff !important; }
body.daymode .nf-shell .dash-card > div:last-child { color: var(--ink-mute); }

/* Empty state icon centered */
.pg-empty .icon { display: inline-block; }

/* Make sure body bg in daymode reaches edges */
body.daymode { background-attachment: fixed; }


/* ──────────────────────────────────────────
   POLISH ROUND — empty states + loading + micro-animations
   ────────────────────────────────────────── */

/* Better scrollbars site-wide */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 5px;
  border: 2px solid var(--bg-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }
* { scrollbar-color: var(--surface-3) transparent; scrollbar-width: thin; }
body.daymode ::-webkit-scrollbar-thumb {
  background: rgba(20,40,80,0.25);
  border-color: transparent;
}
body.daymode ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Focus rings — accessible */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
button:focus-visible, a:focus-visible {
  outline-offset: 3px;
}

/* Loading dots primitive */
.dots-loading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.dots-loading i {
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  animation: dotBounce 1.2s ease-in-out infinite;
}
.dots-loading i:nth-child(2) { animation-delay: 0.15s; }
.dots-loading i:nth-child(3) { animation-delay: 0.30s; }
@keyframes dotBounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .4; }
  40%           { transform: scale(1);  opacity: 1;  }
}

/* Numeric badge consistent */
.badge-num {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--accent);
  color: var(--accent-fg);
  border-radius: 9px;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Anchor scroll offset for fixed nav */
:target { scroll-margin-top: 100px; }

/* Hr line decorative */
.pg-hr {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong) 20%, var(--line-strong) 80%, transparent);
  margin: 32px 0;
  border: 0;
}

/* Markdown-style blockquote */
.quote {
  border-left: 3px solid var(--accent);
  padding: 4px 18px 4px 16px;
  margin: 18px 0;
  background: rgba(255,255,255,0.02);
  border-radius: 0 6px 6px 0;
  color: var(--ink-soft);
  font-style: italic;
}
body.daymode .quote {
  background: rgba(20,40,80,0.04);
}

/* Improved kbd styling */
kbd {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 2px 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--ink);
  line-height: 1.2;
}

/* Code inline */
code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--accent);
  word-break: break-word;
}
body.daymode code {
  background: rgba(20,40,80,0.06);
  color: var(--accent);
}

/* All-around link refinement */
a { transition: color .15s; }
.dash-card a:not(.btn):hover { color: var(--accent); }

/* Smoother content shift on hover */
.shop-product, .dash-card, .ach-card, .hp-mode, .mode-mini, .feat-card,
.vip-card, .hp-why-card, .pg-row, .top-player {
  will-change: transform;
}

/* Section eyebrow icon spacing */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
}

/* "Tüm sistemler çalışıyor" footer strip — link color in daymode */
body.daymode .footer-status-strip a { color: var(--accent); }

/* Page transitions never flash empty */
.page-shell { min-height: 60vh; }

/* Hero floaters don't intercept clicks */
.hp-floaters { pointer-events: none; }
.hp-floater { pointer-events: none; }

/* Make the .voxel-svg in heatmap stretch */
.voxel-svg { vertical-align: middle; }


/* ──────────────────────────────────────────
   ROUND — visual polish: tooltips, dividers, badges
   ────────────────────────────────────────── */

/* Inline tooltip primitive (CSS-only) */
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-3);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  padding: 6px 10px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 10px 20px -10px rgba(0,0,0,0.6);
  animation: tipIn .15s ease-out both;
}
@keyframes tipIn { from { opacity: 0; transform: translateX(-50%) translateY(2px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Brand-style page header divider */
.pg-head::after {
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 40%, transparent) 30%, color-mix(in oklab, var(--accent) 40%, transparent) 70%, transparent);
}

/* News article tag pills — consistent style across pages */
.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #0a0d12;
  white-space: nowrap;
}

/* Better card-art "no-content" treatment */
.no-art {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-pixel);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--ink-mute);
  text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px);
  border-radius: 8px;
}

/* Even tighter rhythm on long pages */
.section { padding: clamp(48px, 6vw, 88px) 0; }

/* Pixel-art sprite reusable */
.sprite-pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Better separator dot */
.dot-sep {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--ink-mute);
  border-radius: 50%;
  margin: 0 8px;
  vertical-align: middle;
}


/* ──────────────────────────────────────────
   ROUND — interaction polish: keyboard, A11Y, edge cases
   ────────────────────────────────────────── */

/* Tighter nav-action group on small screens */
@media (max-width: 1080px) {
  .nav-actions { padding: 0 2px; }
}
@media (max-width: 720px) {
  .nav-actions .dn-toggle { display: none; }
}

/* Reveal grid items: ensure they always end visible */
.modes-grid > *, .features-grid > *, .shop-grid > *, .vip-grid > *,
.rank-grid > *, .news-list > *, .streamers-grid > *,
.leaderboard-list > *, .activity-list > *, .stats-grid > * {
  opacity: 1 !important;
}

/* Detail rows in account pages */
.acct-row {
  transition: background .15s;
  border-radius: 4px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
}
.acct-row:hover { background: rgba(255,255,255,0.02); }
body.daymode .acct-row:hover { background: rgba(20,40,80,0.03); }

/* Activity ticker: pause on hover */
.ticker:hover .ticker-track { animation-play-state: paused; }

/* Profile dropdown: smoother out */
.nav-profile-menu { transform-origin: top right; }

/* Mobile menu: nicer entry */
.mobile-menu {
  transform: translateY(-12px);
  transition: transform .28s cubic-bezier(.2,.8,.3,1), opacity .2s;
}
.mobile-menu.is-open { transform: translateY(0); }

/* Disable scroll-padding for top in hash-routed pages */
html { scroll-padding-top: 88px; }

/* Daymode CTA cards better border */
body.daymode .hp-cta { border-color: rgba(20,40,80,0.14); }

/* Active state for sub-nav (mobile) */
.mobile-menu a.is-active::after {
  content: "●";
  margin-left: 8px;
  color: var(--accent);
  font-size: 8px;
}

/* Improve nav scroll progress visibility in daymode */
body.daymode .nav-scroll-progress {
  background: linear-gradient(90deg, var(--accent), color-mix(in oklab, var(--accent) 50%, var(--accent-3)));
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 30%, transparent);
}

/* Newsletter subscribed state */
.newsletter-subscribed {
  background: rgba(43,209,126,0.06);
  border: 1px solid rgba(43,209,126,0.3);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
  color: var(--emerald);
}

/* Empty-state polish */
.pg-empty { transition: border-color .2s, background .2s; }
.pg-empty:hover { border-color: var(--line-strong); }

/* Better placeholder color in light mode */
body.daymode ::placeholder { color: var(--ink-mute); opacity: 0.6; }

/* Wallet stat-card icons in daymode */
body.daymode .dash-stat::before { box-shadow: 0 0 8px var(--tint, var(--accent)); }


/* ──────────────────────────────────────────
   MOBILE POLISH — refined breakpoint pass
   ────────────────────────────────────────── */

@media (max-width: 720px) {
  /* Hero tighter */
  .hp-hero { padding: 90px 0 40px; min-height: auto; }
  .hp-hero-grid { gap: 28px; }
  .hp-hero-left { max-width: 100%; }

  /* Wordmark line-height balance */
  .hp-wordmark {
    font-size: clamp(52px, 14vw, 88px) !important;
    gap: 2px;
    margin: 16px 0;
  }

  /* Eyebrow + countdown stack neatly */
  .hp-eyebrow {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 9px;
    line-height: 1.6;
  }

  /* IP plaque — full-width feel */
  .hp-ip {
    width: 100%;
    max-width: none;
    margin-bottom: 12px;
  }
  .hp-ip .addr { font-size: 15px; padding: 14px 12px; }
  .hp-ip .copy { padding: 0 14px; font-size: 9px; min-width: 90px; }

  /* CTA row — full width buttons */
  .hp-cta-row { width: 100%; }
  .hp-cta-row .btn,
  .hp-cta-row .btn--primary {
    flex: 1;
    min-width: 0;
    padding: 0 16px;
    font-size: 13px;
  }

  /* Status console — slimmer padding */
  .hp-status-body { padding: 12px 14px; }
  .hp-status-row { font-size: 12px; padding: 8px 0; }
  .hp-status-actions { padding: 12px 14px; gap: 6px; }

  /* Ticker — slower on mobile */
  .ticker-track { animation-duration: 80s; gap: 24px; }
  .ticker-item { font-size: 11.5px; gap: 8px; }
  .ticker-label { padding: 0 12px; margin-right: 16px; font-size: 8px; }

  /* Modes split — single column */
  .modes-split { grid-template-columns: 1fr; gap: 14px; }
  .mode-feat { padding: 24px 20px; gap: 14px; }
  .mode-feat h3 { font-size: clamp(24px, 7vw, 32px); }
  .mode-feat .stats { gap: 16px; padding: 14px 0; flex-wrap: wrap; }
  .mode-feat .cta-row { flex-direction: column; gap: 8px; align-items: stretch; }
  .mode-feat .cta-row .btn { width: 100%; justify-content: center; }
  .mode-mini { padding: 18px; }
  .mode-mini .head .ico-wrap { width: 48px; height: 48px; }

  /* Top players strip — 3 cols on phone */
  .top-players { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .top-players .top-player { padding: 14px 8px; }
  .top-players .top-player:nth-child(n+4) { display: none; }
  .top-players .top-player .name { font-size: 12px; }
  .top-players .top-player .val { font-size: 10px; }

  /* Featured streamer single col */
  .featured-streamer { grid-template-columns: 1fr; }
  .featured-streamer .preview { min-height: 180px; border-right: 0; border-bottom: 1px solid var(--line); }
  .featured-streamer .body { padding: 22px 22px 24px; }
  .featured-streamer h3 { font-size: 20px; }

  /* Discord block */
  .discord-block { grid-template-columns: 1fr; padding: 22px 20px; gap: 22px; }
  .discord-block .stats { gap: 18px; flex-wrap: wrap; }
  .discord-block .stat .n { font-size: 16px; }
  .discord-block .actions { flex-direction: column; align-items: stretch; }
  .discord-block .actions .btn { width: 100%; justify-content: center; }

  /* Newsletter */
  .newsletter { grid-template-columns: 1fr; padding: 22px 20px; gap: 18px; }
  .newsletter h3 { font-size: 22px; }
  .newsletter-form { flex-direction: column; padding: 8px; }
  .newsletter-form input { width: 100%; min-height: 44px; }
  .newsletter-form .btn { width: 100%; min-height: 44px; }

  /* CTA card */
  .hp-cta { padding: 26px 20px; gap: 18px; }
  .hp-cta h2 { font-size: clamp(24px, 7vw, 32px); }
  .hp-cta-side { min-width: 0; }

  /* WHY cards — 1 col */
  .hp-why { grid-template-columns: 1fr; gap: 10px; }
  .hp-why-card { padding: 18px; }

  /* Dashboard */
  .dash-hero { grid-template-columns: 72px 1fr; padding: 18px; gap: 14px; }
  .dash-hero > :nth-child(3) {
    grid-column: 1 / -1;
    display: flex; flex-direction: row;
    gap: 8px;
  }
  .dash-hero > :nth-child(3) .btn { flex: 1; justify-content: center; }
  .dash-skin-slot { width: 72px; height: 72px; }
  .dash-user h2 { font-size: 20px; }
  .dash-user .rank { font-size: 9px; }
  .dash-user .meta { gap: 10px; font-size: 12px; }
  .dash-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-stat { padding: 14px 14px; }
  .dash-stat .val { font-size: 18px; }

  /* Heatmap — fewer columns visible */
  .heatmap-grid { grid-template-columns: repeat(13, 1fr) !important; gap: 2px; }
  .heatmap-cell { width: auto; height: 14px; }
  .heatmap-wrap { padding: 16px; }

  /* Friends widget — keep visible */
  .friends-widget .row .loc { font-size: 11px; }

  /* Sıralama (Leaderboard) — drop columns gracefully */
  .lb-head, .lb-row-x {
    grid-template-columns: 40px 1fr 70px !important;
    gap: 10px;
    padding: 12px 14px;
  }
  .lb-head .h-2, .lb-head .h-3 { display: none; }
  .lb-row-x .stat.dim { display: none; }
  .lb-row-x .player .skin { display: none; }
  .lb-row-x .name { font-size: 13px; }

  /* Match-row in player profile */
  .match-row {
    grid-template-columns: auto 1fr;
    gap: 8px;
    padding: 12px 14px;
  }
  .match-row .stat-num,
  .match-row .when {
    grid-column: 2;
    font-size: 11px;
    color: var(--ink-mute);
  }
  .match-row .result { font-size: 9px; padding: 3px 8px; }
  .match-row .mode b { font-size: 13px; }
  .match-row .mode .sub { font-size: 11px; }

  /* Mini bars chart */
  .mini-bars { height: 48px; gap: 3px; }

  /* Mağaza (Shop) */
  .shop-layout { gap: 18px; }
  .shop-products { grid-template-columns: 1fr 1fr; gap: 10px; }
  .shop-product { padding: 14px; gap: 8px; }
  .shop-product h4 { font-size: 12px; }
  .shop-product p { font-size: 11.5px; min-height: 30px; }
  .shop-product .price { font-size: 12px; }
  .shop-product .row .btn { padding: 5px 9px; font-size: 11px; }
  .shop-product-art { height: 76px; }

  /* VIP */
  .vip-grid { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .vip-grid .shop-product { padding: 18px 16px; }
  .vip-grid .shop-product .pixel { font-size: 28px !important; }
  .vip-grid .shop-product ul { min-height: 0 !important; font-size: 12px; }
  .vip-cycle { width: 100%; justify-content: center; }
  .vip-cycle button { flex: 1; font-size: 9px; padding: 6px 10px; }

  /* Cookie banner — bottom-aligned full width */
  .cookie-banner {
    left: 12px; right: 12px; bottom: 12px;
    max-width: none;
    padding: 14px 16px 12px;
  }
  .cookie-banner h4 { font-size: 10px; }
  .cookie-banner p { font-size: 12.5px; }

  /* Footer */
  .footer { padding: 40px 0 28px; }
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 24px 16px;
  }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
  .footer-socials { gap: 6px; }
  .footer-socials a { width: 30px; height: 30px; font-size: 12px; }
  .footer-status-strip {
    margin-top: 24px;
    padding: 12px 14px;
    font-size: 11px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; }

  /* Auth shell — full width single col */
  .auth-shell { grid-template-columns: 1fr; max-width: none; margin: 16px -2px 0; }
  .auth-aside { padding: 24px 22px; border-bottom: 1px solid var(--line); border-right: 0; }
  .auth-aside h2 { font-size: 22px; }
  .auth-aside .auth-aside-foot { position: relative; left: auto; right: auto; bottom: auto; margin-top: 22px; }
  .auth-form-wrap { padding: 24px 22px 28px; }
  .auth-form-wrap h1 { font-size: 18px; }
  .auth-step { flex-wrap: wrap; row-gap: 8px; font-size: 11px; }
  .auth-step .sep { min-width: 12px; }

  /* Page head */
  .pg { padding-top: 84px; padding-bottom: 48px; }
  .pg-head { padding: 32px 0 22px; }
  .pg-title { font-size: clamp(26px, 7vw, 36px); }
  .pg-sub { font-size: 14px; }
  .pg-head-actions { position: relative; right: auto; bottom: auto; margin-top: 14px; }

  /* Tabs scrollable but tighter */
  .pg-tabs { gap: 0; }
  .pg-tab { padding: 0 14px; font-size: 12px; height: 40px; }

  /* Section heading */
  .section-head { gap: 14px; margin-bottom: 22px; }
  .section-title { font-size: clamp(24px, 6vw, 32px); }
  .section-sub { font-size: 13px; }

  /* Wiki / Glossary */
  .wiki-layout { grid-template-columns: 1fr; gap: 22px; }
  .wiki-nav { position: static; }
  .wiki-nav h4:first-child { margin-top: 0; }

  /* Achievements grid */
  .ach-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ach-card { padding: 18px; min-height: 0; }

  /* Status page summary */
  .status-summary { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* Hero floaters — keep subtle */
  .hp-floaters { display: none; }

  /* Drift voxels less on mobile */
  .global-ambient .drift:nth-child(n+3) { display: none; }

  /* Toast smaller and bottom-center */
  .toast-host {
    bottom: 16px; right: 16px; left: 16px;
    align-items: stretch;
  }
  .toast { min-width: 0; max-width: none; }

  /* Profile dropdown — full screen overlay style */
  .nav-profile-menu {
    right: 0;
    left: auto;
    width: 280px;
    max-width: calc(100vw - 32px);
  }

  /* Notification panel full-ish */
  .notify-panel {
    right: -8px;
    width: calc(100vw - 32px);
    max-width: 360px;
  }

  /* Command palette */
  .cmdk { width: calc(100vw - 24px); }
  .cmdk-input { padding: 14px 16px; }
  .cmdk-input input { font-size: 15px; }
  .cmdk-item { padding: 10px 14px; font-size: 13px; }
  .cmdk-footer { padding: 8px 14px; font-size: 10px; }
  .cmdk-backdrop { padding-top: 60px; }

  /* Cards general */
  .dash-card { padding: 16px; }
  .dash-card h3 { font-size: 12px; }

  /* Hide ticker pulse label text, keep just the dot */
  .ticker-label { font-size: 0; padding: 0 12px; }
  .ticker-label .pulse { font-size: 9px; }
}

/* Even smaller — extra tight */
@media (max-width: 420px) {
  .vip-grid { grid-template-columns: 1fr !important; }
  .shop-products { grid-template-columns: 1fr; }
  .top-players { grid-template-columns: repeat(2, 1fr); }
  .top-players .top-player:nth-child(n+3) { display: none; }
  .ach-stats { grid-template-columns: 1fr; }
  .status-summary { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .dash-stats { grid-template-columns: 1fr 1fr; }
  .hp-wordmark { font-size: clamp(48px, 14vw, 72px) !important; }
  .hp-cta-row { flex-direction: column; }
  .hp-cta-row .btn { width: 100%; }

  /* Nav: only logo + actions */
  .nav-links { display: none; }
  .nav-actions { padding: 0; }
}

/* Touch-target safety net */
@media (hover: none) {
  .nav-bell, .nav-hamburger, .nav-profile-trigger { min-height: 44px; min-width: 44px; }
  .btn { min-height: 44px; }
}


/* ──────────────────────────────────────────
   POLISH — content shimmer + UX touches
   ────────────────────────────────────────── */

/* Smooth in-page anchor scroll */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Card "active" press for touch */
@media (hover: none) {
  .shop-product:active, .dash-card:active, .ach-card:active,
  .pg-row:active, .top-player:active, .mode-mini:active {
    transform: scale(0.985);
    transition-duration: .08s;
  }
}

/* Long press / focus visible improvements */
.shop-product:focus-within, .dash-card:focus-within {
  border-color: color-mix(in oklab, var(--accent) 50%, var(--line-strong));
}

/* Empty state with action */
.pg-empty .actions .btn { min-height: 40px; }

/* Account hero subtle inner shadow */
.dash-hero {
  box-shadow:
    var(--shadow-card),
    inset 0 1px 0 color-mix(in oklab, var(--accent) 10%, transparent);
}

/* Discord block live dot animation */
.discord-block .stat .n .live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.discord-block .stat .n .live::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 8px var(--emerald);
  animation: hpPulse 1.6s ease-in-out infinite;
}

/* Section header alignment in tight spaces */
.section-head > p.section-sub {
  align-self: flex-end;
}

/* Wiki article TOC sticky on tall pages */
@media (min-width: 1080px) {
  .wiki-nav { max-height: calc(100vh - 140px); overflow-y: auto; }
}

/* Settings input groups */
.acct-row select.pg-input {
  min-height: 38px;
  padding: 6px 12px;
  font-size: 13px;
}

/* Friends row clickable feel */
.friends-widget .row {
  cursor: default;
  border-radius: 6px;
  padding: 9px 8px;
  margin: 0 -8px;
}
.friends-widget .row:hover { background: rgba(255,255,255,0.03); }
body.daymode .friends-widget .row:hover { background: rgba(20,40,80,0.04); }

/* Streamer card hover scale */
.featured-streamer { transition: transform .25s, border-color .2s, box-shadow .25s; }
.featured-streamer:hover { transform: translateY(-3px); }

/* Improve CmdK item kbd hint visibility */
.cmdk-item .hint {
  padding: 2px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
}
body.daymode .cmdk-item .hint {
  background: rgba(20,40,80,0.04);
  border-color: rgba(20,40,80,0.10);
}


/* ──────────────────────────────────────────
   MEZARCI JOURNEY — daily streak + quests + next reward
   Psychologically-tuned retention block. Replaces the streamer card.
   ────────────────────────────────────────── */
.journey {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
}
@media (max-width: 880px) {
  .journey { grid-template-columns: 1fr; }
}

/* ─── Left: streak + next reward ─── */
.journey-streak {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 500px 320px at 100% 0%, color-mix(in oklab, var(--accent-2) 18%, transparent), transparent 65%),
    linear-gradient(180deg, var(--surface-1), var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--accent-2) 30%, var(--line-strong));
  border-radius: 18px;
  padding: 30px 30px 26px;
  display: flex; flex-direction: column; gap: 22px;
}
.journey-streak::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent-2) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.journey-streak > * { position: relative; z-index: 1; }
.journey-streak .head {
  display: flex; align-items: center; gap: 14px;
}
.journey-streak .flame {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  font-size: 30px;
  border-radius: 14px;
  background:
    radial-gradient(circle, rgba(255,125,59,0.30), transparent 65%);
  border: 1px solid color-mix(in oklab, var(--accent-2) 40%, transparent);
  animation: flameFlicker 2.2s ease-in-out infinite;
}
@keyframes flameFlicker {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: brightness(1); }
  50%      { transform: scale(1.06) rotate(2deg); filter: brightness(1.18); }
}
.journey-streak .head .meta { flex: 1; }
.journey-streak .head .meta .label {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .22em;
  color: var(--accent-2);
  text-transform: uppercase;
}
.journey-streak .head .meta .count {
  font-family: var(--font-pixel); font-size: 36px;
  color: var(--ink);
  line-height: 1;
  margin-top: 4px;
  letter-spacing: -.01em;
}
.journey-streak .head .meta .count small {
  font-size: 14px; color: var(--ink-soft); font-family: var(--font-mono);
  font-weight: 400; margin-left: 6px;
}

/* Week strip — 7 day indicators */
.streak-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.streak-day {
  display: flex; flex-direction: column; align-items: center;
  gap: 6px;
  padding: 10px 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: transform .15s, border-color .2s;
}
.streak-day.done {
  border-color: color-mix(in oklab, var(--accent-2) 50%, transparent);
  background: color-mix(in oklab, var(--accent-2) 12%, var(--bg-3));
}
.streak-day.today {
  border-color: var(--accent-2);
  background: color-mix(in oklab, var(--accent-2) 22%, var(--bg-3));
  box-shadow: 0 0 14px color-mix(in oklab, var(--accent-2) 30%, transparent);
  transform: translateY(-2px);
}
.streak-day.locked { opacity: 0.4; }
.streak-day .d {
  font-family: var(--font-pixel); font-size: 8px;
  letter-spacing: .12em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.streak-day .ico {
  font-size: 16px;
  filter: grayscale(0.8) opacity(0.5);
}
.streak-day.done .ico, .streak-day.today .ico { filter: none; }
.streak-day .pts {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--ink-mute);
  font-weight: 600;
}
.streak-day.today .pts { color: var(--accent-2); }
.streak-day.done .pts { color: var(--emerald); }

/* Next reward */
.streak-next {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 14px;
}
.streak-next .ico-box {
  width: 36px; height: 36px;
  background: color-mix(in oklab, var(--gold) 18%, transparent);
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.streak-next .text { flex: 1; min-width: 0; }
.streak-next .text .lbl {
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .2em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.streak-next .text .t {
  font-size: 13px; color: var(--ink); margin-top: 2px; font-weight: 500;
}
.streak-next .text .t b { color: var(--gold); font-weight: 600; }
.streak-next .progress {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  min-width: 80px;
}
.streak-next .progress .n {
  font-family: var(--font-mono); font-size: 11px; color: var(--ink-soft);
}
.streak-next .progress .n b { color: var(--ink); }
.streak-next .progress .track {
  width: 80px; height: 4px;
  background: var(--bg-3); border-radius: 2px; overflow: hidden;
}
.streak-next .progress .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-2), var(--gold));
  border-radius: 2px;
}

/* ─── Right: today's quests ─── */
.journey-quests {
  background: linear-gradient(180deg, var(--surface-1), var(--bg-2));
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 28px 28px 24px;
  display: flex; flex-direction: column; gap: 16px;
}
.journey-quests .head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
}
.journey-quests .head h3 {
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: .15em;
  margin: 0;
}
.journey-quests .head .reset {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute);
}
.journey-quests .head .reset b { color: var(--accent); }
.quest {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.quest:last-of-type { border-bottom: none; padding-bottom: 0; }
.quest .ico {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 16px;
}
.quest.done .ico {
  background: color-mix(in oklab, var(--emerald) 18%, transparent);
  border-color: color-mix(in oklab, var(--emerald) 40%, transparent);
}
.quest .body { min-width: 0; }
.quest .body .t {
  font-size: 13.5px; color: var(--ink); font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.quest.done .body .t { text-decoration: line-through; opacity: 0.5; }
.quest .body .pg {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--ink-mute); margin-top: 2px;
}
.quest .body .pg b { color: var(--ink); }
.quest.done .body .pg b { color: var(--emerald); }
.quest .reward {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-pixel); font-size: 9px;
  letter-spacing: .12em;
  color: var(--accent);
  white-space: nowrap;
}
.quest.done .reward { color: var(--emerald); }
.quest.done .reward::before { content: "✓ "; }

.journey-quests .footer {
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-soft);
}
.journey-quests .footer b { color: var(--ink); }
.journey-quests .footer a {
  color: var(--accent); border-bottom: 1px dashed var(--accent); padding-bottom: 1px;
}

/* Logged-out variant — exclusivity FOMO */
.journey-cta {
  background:
    radial-gradient(ellipse 700px 340px at 100% 100%, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%),
    linear-gradient(180deg, var(--surface-1), var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--line-strong));
  border-radius: 18px;
  padding: 32px 36px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: center;
  position: relative; overflow: hidden;
}
.journey-cta::before {
  content: "";
  position: absolute;
  bottom: -60px; right: -60px;
  width: 280px; height: 280px;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 28%, transparent), transparent 70%);
  pointer-events: none;
}
.journey-cta .body { position: relative; z-index: 1; }
.journey-cta .body .eyebrow {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .22em;
  color: var(--accent);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.journey-cta .body .eyebrow::before {
  content: ""; width: 8px; height: 8px;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  animation: hpPulse 1.6s ease-in-out infinite;
}
.journey-cta h3 {
  font-family: var(--font-pixel); font-size: clamp(22px, 3vw, 30px);
  margin: 0 0 12px; line-height: 1.08;
}
.journey-cta p {
  color: var(--ink-soft); margin: 0 0 18px;
  font-size: 14.5px; line-height: 1.55;
  max-width: 420px;
}
.journey-cta p b { color: var(--ink); }
.journey-cta .cta-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}

/* Spots gauge */
.spots-gauge {
  position: relative; z-index: 1;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.spots-gauge .ring {
  width: 130px; height: 130px;
  margin: 0 auto;
  position: relative;
}
.spots-gauge .ring svg {
  transform: rotate(-90deg);
  width: 100%; height: 100%;
}
.spots-gauge .ring circle {
  fill: none;
  stroke-width: 8;
}
.spots-gauge .ring .bg { stroke: var(--bg-3); }
.spots-gauge .ring .fg {
  stroke: url(#spotsGrad);
  stroke-linecap: round;
  transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.3,1);
  filter: drop-shadow(0 0 8px color-mix(in oklab, var(--accent) 50%, transparent));
}
.spots-gauge .ring .label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.spots-gauge .ring .label .n {
  font-family: var(--font-pixel); font-size: 32px; color: var(--ink);
  line-height: 1;
}
.spots-gauge .ring .label .l {
  font-family: var(--font-pixel); font-size: 8px;
  letter-spacing: .2em; color: var(--ink-mute);
  margin-top: 6px;
}
.spots-gauge .info {
  text-align: center;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--ink-soft);
}
.spots-gauge .info b { color: var(--accent); font-weight: 600; }

@media (max-width: 720px) {
  .journey-streak, .journey-quests { padding: 22px 18px; }
  .journey-streak .head .meta .count { font-size: 28px; }
  .streak-day { padding: 8px 2px; }
  .streak-day .d { font-size: 7px; }
  .streak-day .ico { font-size: 14px; }
  .journey-cta { grid-template-columns: 1fr; padding: 22px 20px; }
  .journey-cta .cta-row .btn { width: 100%; justify-content: center; }
  .spots-gauge .ring { width: 110px; height: 110px; }
}


/* ──────────────────────────────────────────
   Icon system styles
   ────────────────────────────────────────── */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  color: currentColor;
}

/* Profile menu icons inherit accent color via the .ico box */
.nav-profile-menu a > .icon,
.nav-profile-menu button > .icon {
  width: 22px; height: 22px;
  padding: 4px;
  background: rgba(255,255,255,0.04);
  border-radius: 6px;
  color: var(--accent);
  flex-shrink: 0;
  transition: background .15s, transform .15s, color .15s;
  box-sizing: border-box;
}
.nav-profile-menu a:hover > .icon,
.nav-profile-menu button:hover > .icon {
  background: color-mix(in oklab, var(--accent) 22%, transparent);
  transform: scale(1.05);
}
.nav-profile-menu .logout > .icon {
  background: rgba(255,66,66,0.10);
  color: var(--redstone);
}
.nav-profile-menu .logout:hover > .icon {
  background: rgba(255,66,66,0.20);
}
body.daymode .nav-profile-menu a > .icon,
body.daymode .nav-profile-menu button > .icon {
  background: rgba(20,40,80,0.05);
}
body.daymode .nav-profile-menu a:hover > .icon,
body.daymode .nav-profile-menu button:hover > .icon {
  background: color-mix(in oklab, var(--accent) 16%, transparent);
}

/* Nav search/bell buttons centered icon */
.nav-bell { display: inline-grid; place-items: center; color: var(--ink-soft); }
.nav-bell .icon { color: currentColor; }
.nav-bell:hover .icon { color: var(--accent); }
body.daymode .nav-bell .icon { color: #2a3a55; }
body.daymode .nav-bell:hover .icon { color: var(--accent); }


/* ──────────────────────────────────────────
   QUEST list — fix layout bug (rows were stretching to huge heights)
   ────────────────────────────────────────── */
.quest {
  display: grid !important;
  grid-template-columns: 36px 1fr auto !important;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
  min-height: 0;
}
.quest .ico {
  width: 36px;
  height: 36px;
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.quest .ico .icon { display: block; }
.quest .body { min-width: 0; overflow: hidden; }
.quest .body .t {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin: 0;
  line-height: 1.4;
}
.quest .body .pg {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 2px;
  line-height: 1.4;
}
.quest .reward {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Streak day cells — keep tight */
.streak-day {
  min-height: 0;
}
.streak-day .ico {
  display: inline-grid;
  place-items: center;
  width: auto;
  height: auto;
}
.streak-day .ico .icon { display: block; }

/* Streak next reward — ico-box fixed size */
.streak-next .ico-box .icon { display: block; }

/* Generic safeguard: any .icon SVG inside list rows */
.dash-activity .ico .icon,
.notify-item .ico .icon,
.cmdk-item .ico .icon { display: block; }


/* ──────────────────────────────────────────
   QUEST list — HARD fix (force grid, normalize SVG box, kill any inherited stretch)
   ────────────────────────────────────────── */
.journey-quests {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 24px 26px !important;
}
.journey-quests .head {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  padding: 0 0 14px !important;
  margin: 0 0 14px !important;
  border-bottom: 1px dashed var(--line) !important;
}
.journey-quests .footer {
  flex: 0 0 auto !important;
  margin-top: 14px !important;
  padding-top: 14px !important;
  border-top: 1px dashed var(--line) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.journey-quests .quest {
  display: grid !important;
  grid-template-columns: 40px 1fr auto !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed var(--line) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
.journey-quests .quest:last-of-type {
  border-bottom: none !important;
  padding-bottom: 4px !important;
}

.journey-quests .quest > .ico {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  flex-shrink: 0 !important;
  color: var(--accent) !important;
  padding: 0 !important;
  align-self: center !important;
}
.journey-quests .quest > .ico svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
}

.journey-quests .quest.done > .ico {
  background: color-mix(in oklab, var(--emerald) 18%, transparent) !important;
  border-color: color-mix(in oklab, var(--emerald) 40%, transparent) !important;
  color: var(--emerald) !important;
}

.journey-quests .quest > .body {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  align-self: center !important;
}
.journey-quests .quest > .body .t {
  font-size: 13.5px !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.journey-quests .quest.done > .body .t {
  text-decoration: line-through !important;
  opacity: 0.5 !important;
}
.journey-quests .quest > .body .pg {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink-mute) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.journey-quests .quest.done > .body .pg b { color: var(--emerald) !important; }

.journey-quests .quest > .reward {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--font-pixel) !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
  color: var(--accent) !important;
  white-space: nowrap !important;
  align-self: center !important;
}
.journey-quests .quest.done > .reward {
  color: var(--emerald) !important;
}


/* ──────────────────────────────────────────
   QUEST LIST — clean rebuild (.quest-list / .quest-item)
   Bulletproof — no shorthand quest/grid conflict.
   ────────────────────────────────────────── */
.journey-quests .quest-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.journey-quests .quest-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px dashed var(--line) !important;
  min-height: 0 !important;
  height: auto !important;
}
.journey-quests .quest-item:last-child {
  border-bottom: none !important;
  padding-bottom: 4px !important;
}
.journey-quests .qi-ico {
  flex: 0 0 40px !important;
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--line) !important;
  border-radius: 10px !important;
  color: var(--accent) !important;
  align-self: center !important;
}
.journey-quests .qi-ico svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
}
.journey-quests .quest-item.is-done .qi-ico {
  background: color-mix(in oklab, var(--emerald) 18%, transparent) !important;
  border-color: color-mix(in oklab, var(--emerald) 40%, transparent) !important;
  color: var(--emerald) !important;
}
.journey-quests .qi-body {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.journey-quests .qi-title {
  font-size: 13.5px !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}
.journey-quests .quest-item.is-done .qi-title {
  text-decoration: line-through !important;
  opacity: 0.5 !important;
}
.journey-quests .qi-progress {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--ink-mute) !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}
.journey-quests .qi-progress b { color: var(--ink) !important; }
.journey-quests .quest-item.is-done .qi-progress b { color: var(--emerald) !important; }
.journey-quests .qi-reward {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-family: var(--font-pixel) !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
  color: var(--accent) !important;
  white-space: nowrap !important;
}
.journey-quests .quest-item.is-done .qi-reward {
  color: var(--emerald) !important;
}


/* DN-toggle SVG icons sized in thumb */
.dn-thumb .dn-ico .icon {
  display: block;
  width: 11px !important;
  height: 11px !important;
}
.dn-thumb.is-night .dn-sun { opacity: 0; }
.dn-thumb.is-night .dn-moon { opacity: 1; color: var(--ink-soft); }
.dn-thumb.is-day .dn-sun { opacity: 1; color: #ff9020; }
.dn-thumb.is-day .dn-moon { opacity: 0; }
.dn-thumb .dn-ico {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 0.4s, transform 0.5s;
}


/* ──────────────────────────────────────────
   ALIGNMENT / POLISH ROUND — fixes after emoji→SVG sweep
   ────────────────────────────────────────── */

/* DN toggle — make SVG icons perfectly positioned inside thumb */
.dn-toggle .dn-ico { z-index: 1; }
.dn-toggle .dn-ico .icon { width: 11px; height: 11px; }
.dn-toggle .dn-track { overflow: hidden; }

/* Buttons containing inline Icon SVGs — uniform gap + vertical-align */
.btn { gap: 8px; }
.btn .icon { display: inline-block; flex-shrink: 0; }
.btn--lg { gap: 9px; }
/* Buttons with only inline-styled gap in JSX get same treatment */
[class*="btn"] > .icon + span,
[class*="btn"] > span + .icon { line-height: 1; }

/* Section eyebrows — pixel-font baseline correction */
.section-eyebrow,
.pg-eyebrow,
.hp-cta-eyebrow,
.v2-eyebrow,
.v3-eyebrow {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  line-height: 1;
}

/* Cards with .icon SVG centered properly */
.dash-activity .ico .icon,
.notify-item .ico .icon,
.pg-row .ico .icon,
.cmdk-item .ico .icon {
  display: block;
  width: 14px;
  height: 14px;
}

/* Footer social icons consistent centering */
.footer-socials a {
  display: inline-grid;
  place-items: center;
}
.footer-socials a .icon {
  display: block;
  width: 14px;
  height: 14px;
}

/* Top-player rank text — vertical-center within absolute position */
.top-player .rank {
  line-height: 1;
}

/* Match-row result pill — line-height fix */
.match-row .result { line-height: 1; }

/* Quest row .icon dimensions */
.qi-ico { color: var(--accent); }
.qi-ico .icon { width: 16px; height: 16px; display: block; }

/* Achievement card icon */
.ach-card .ico .icon { display: block; }
.ach-card .ico { color: var(--accent); }
.ach-card.rare .ico { color: var(--gold); }
.ach-card.done .ico { color: var(--accent); }

/* Profile menu icons centered */
.nav-profile-menu a > .icon,
.nav-profile-menu button > .icon {
  display: grid !important;
  place-items: center !important;
}
.nav-profile-menu a > .icon svg,
.nav-profile-menu button > .icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Cmdk item icon */
.cmdk-item .ico { display: inline-grid; place-items: center; }

/* Wiki search icon */
.pg-search .ico { display: inline-grid; place-items: center; }
.pg-search .ico .icon { display: block; width: 16px; height: 16px; }

/* Activity ticker icon centering */
.ticker-item .ico { display: inline-grid; place-items: center; padding: 0; }
.ticker-item .ico .icon { display: block; width: 12px; height: 12px; }

/* Streak day icon */
.streak-day .ico { display: inline-grid; place-items: center; padding: 0; height: auto; }
.streak-day .ico .icon { width: 16px; height: 16px; display: block; }

/* Hero meta line — single line height */
.hp-meta { line-height: 1.5; }

/* Streak-next ico-box */
.streak-next .ico-box { display: inline-grid; place-items: center; }
.streak-next .ico-box .icon { display: block; }

/* Card heading with inline trophy icon (e.g. activity detail) */
.dash-card h3 .icon { display: inline-block; vertical-align: -3px; margin-right: 6px; }

/* Status server dot */
.status-list .pulse { align-self: center; }

/* Generic icon container vertical-center */
.btn .icon, a .icon, span .icon {
  vertical-align: middle;
}

/* Notify panel icons */
.notify-item .ico {
  display: grid;
  place-items: center;
}

/* Mobile menu arrow → make subtle */
.mobile-menu a .arrow {
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1;
}

/* Featured streamer "LIVE" pill icon dot align */
.featured-streamer .preview .live i {
  align-self: center;
}

/* News article badge spacing */
.pg-row [style*="background"] {
  display: inline-flex;
  align-items: center;
}

/* Achievement icon when number/emoji string is passed via {it.ico} - check if it's a known name */
.ach-card .head .ico {
  width: 52px; height: 52px;
}

/* CmdK keyboard hint pill smaller */
.cmdk-item .hint {
  font-size: 9px;
  padding: 2px 5px;
}

/* Numbered "OYUN MODLARI" eyebrow has a bullet ::before that animates */
.section-eyebrow::before {
  flex-shrink: 0;
}

/* Voxel SVG anti-alias keep crisp */
.voxel-svg { image-rendering: pixelated; }
.voxel-svg, .voxel-svg * { shape-rendering: crispEdges; }

/* Top players strip — make icon row pinning consistent */
.top-player .avatar { display: grid; place-items: center; }

/* All shop-product art keep consistent height */
.shop-product-art {
  display: grid !important;
  place-items: center !important;
}
.shop-product-art .icon { display: block; }

/* Newsletter form gap */
.newsletter-form { gap: 8px; }
.newsletter-form .btn { gap: 8px; }

/* Page tabs — tighter spacing */
.pg-tabs { gap: 2px; }

/* Mobile menu daymode contrast */
body.daymode .mobile-menu a .arrow { color: var(--ink-mute); }

/* Cookie banner buttons */
.cookie-banner .actions .btn { gap: 6px; }


/* ──────────────────────────────────────────
   POLISH ROUND — typographic + interaction refinements
   ────────────────────────────────────────── */

/* Numeric data — universal tabular-nums for tnum-friendly alignment */
.hp-status-row .v,
.dash-stat .val,
.stat-tile .stat-value,
.mode-feat .stats .stat .n,
.discord-block .stat .n,
.featured-streamer .stat .n,
.top-player .val,
.lb-row-x .stat,
.lb-row-x .rank,
.match-row .stat-num,
.heatmap-foot,
.streak-next .progress .n,
.streak-day .pts,
.journey-streak .head .meta .count,
.spots-gauge .ring .label .n {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Card titles consistent letter-spacing */
.dash-card h3,
.section-title,
.pg-title,
.mode-feat h3,
.shop-product h4,
.hp-mode-name,
.ach-card h4,
.hp-why-card h4,
.featured-streamer h3,
.newsletter h3,
.discord-block h3 {
  letter-spacing: -.01em;
}

/* Subtle text shadow on pixel headings — better depth */
.pg-title,
.section-title {
  text-shadow: 2px 2px 0 rgba(0,0,0,0.18);
}
body.daymode .pg-title,
body.daymode .section-title {
  text-shadow: 2px 2px 0 rgba(20,40,80,0.06);
}

/* Hover refinements — micro-lift everywhere */
.btn--primary { transition: transform .15s, background .15s, border-color .15s, box-shadow .2s; }
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary:active { transform: translateY(0); }

/* Section transitions */
.section { transition: background .2s; }

/* Focus glow on tabs */
.pg-tab:focus-visible {
  outline: 0;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border-radius: 6px;
}

/* Link underline animation */
.wiki-article p a:not(.btn),
.faq-q p a {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .2s;
}
.wiki-article p a:not(.btn):hover,
.faq-q p a:hover {
  background-size: 100% 1px;
}

/* Pseudo-3D button feeling on press */
.btn:active { transition-duration: .05s; }

/* Progressive disclosure — better summary marker on faq */
.faq-q summary {
  position: relative;
}
.faq-q[open] summary::after {
  transform: rotate(180deg);
}
.faq-q summary::after {
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}

/* Tooltip refinements (CSS-only [data-tip]) */
[data-tip]:hover::after {
  z-index: 999;
}

/* Form input subtle hover */
.auth-field input:hover,
.pg-input:hover,
.newsletter-form input:hover {
  border-color: var(--line-strong);
}

/* Card content paragraph leading consistency */
.shop-product p,
.hp-mode-tag,
.ach-card p,
.hp-why-card p,
.feat-card p,
.featured-streamer p,
.discord-block p,
.newsletter p,
.match-row .mode .sub {
  text-wrap: pretty;
}

/* Container border-radius rhythm — small/medium/large */
.dash-card,
.shop-product,
.feat-card,
.mode-card,
.mode-mini,
.vip-card,
.hp-mode,
.hp-why-card,
.ach-card,
.status-card,
.faq-q,
.dash-stat,
.stat-tile,
.heatmap-wrap,
.dash-hero,
.top-player,
.streak-day,
.streak-next,
.match-row {
  border-radius: 12px;
}
.mode-feat,
.featured-streamer,
.discord-block,
.newsletter,
.hp-cta,
.v3-cta,
.journey-streak,
.journey-quests,
.journey-cta {
  border-radius: 16px;
}
.auth-shell {
  border-radius: 16px;
}

/* Tighter gap on shop list */
.shop-products { gap: 14px; }

/* Activity feed line vertical-center */
.dash-activity li { gap: 12px; }

/* Better separator dots between meta items */
.hp-meta .sep,
.dash-user .meta .dot-sep {
  font-size: 13px; line-height: 1;
}

/* Touchscreen-only press feedback */
@media (hover: none) {
  .shop-product:active, .dash-card:active, .ach-card:active,
  .top-player:active, .mode-mini:active, .pg-row:active {
    transform: scale(.985);
    transition-duration: .08s;
  }
}

/* Cards with hover transform — preserve focus ring */
.shop-product:focus-visible,
.dash-card:focus-visible,
.top-player:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* Wiki nav active state animation */
.wiki-nav a {
  border-left: 2px solid transparent;
  padding-left: 10px;
  transition: border-color .15s, padding-left .15s, background .15s, color .15s;
}
.wiki-nav a:hover { padding-left: 12px; }
.wiki-nav a.is-active {
  border-left-color: var(--accent);
  padding-left: 10px;
}

/* Section divider chain — slightly more prominent in light */
body.daymode .section + .section::before {
  opacity: 0.2;
}

/* Better heatmap legend dots gap */
.heatmap-head .legend .lv {
  margin: 0 1px;
}

/* Status page strip text alignment */
.footer-status-strip { line-height: 1.5; }

/* Profile dropdown subtle entrance */
.nav-profile-menu {
  transform-origin: top right;
}

/* Notification panel arrow if any */
.notify-panel {
  transform-origin: top right;
}

/* Slight rotation on launcher download row icon */
.dash-card a:hover .icon,
.dash-card .btn:hover .icon {
  /* keep stable, no rotation */
}

/* Newsletter form input focus glow */
.newsletter-form input:focus { outline: none; }
.newsletter-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent);
}

/* Cookie banner small refinement */
.cookie-banner { transform-origin: bottom left; }

/* Better text contrast on light card sub-info */
.streak-next .text .lbl,
.journey-quests .head .reset,
.journey-quests .footer span {
  font-feature-settings: "tnum";
}


/* ──────────────────────────────────────────
   POLISH ROUND — visual rhythm, depth, micro-motion
   ────────────────────────────────────────── */

/* Avatar / PlayerHead — subtle inner border */
.dash-skin-slot,
.top-player .avatar,
.friends-widget .row .avatar,
.nav-profile-menu .head .avatar,
.nav-profile-trigger .avatar,
.dash-hero .dash-skin-slot {
  position: relative;
  overflow: hidden;
}
.dash-skin-slot::after,
.top-player .avatar::after,
.friends-widget .row .avatar::after,
.nav-profile-menu .head .avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
  pointer-events: none;
}
body.daymode .dash-skin-slot::after,
body.daymode .top-player .avatar::after,
body.daymode .friends-widget .row .avatar::after {
  box-shadow: inset 0 0 0 1px rgba(20,40,80,0.05);
}

/* Card depth — soft drop shadow + inner highlight */
.dash-card,
.shop-product,
.feat-card,
.mode-card,
.mode-mini,
.hp-mode,
.hp-why-card,
.ach-card,
.heatmap-wrap,
.dash-stat,
.faq-q {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.02) inset,
    0 12px 28px -22px rgba(0,0,0,0.4);
}
body.daymode .dash-card,
body.daymode .shop-product,
body.daymode .feat-card,
body.daymode .mode-card,
body.daymode .mode-mini,
body.daymode .hp-mode,
body.daymode .hp-why-card,
body.daymode .ach-card,
body.daymode .heatmap-wrap,
body.daymode .dash-stat,
body.daymode .faq-q {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 12px 28px -22px rgba(20,40,80,0.22);
}

/* Stat tile — emphasize left accent stripe with subtle glow */
.dash-stat::before,
.stat-tile::before {
  filter: drop-shadow(0 0 6px var(--tint, var(--accent)));
}

/* Mode card icon glow on hover */
.mode-mini:hover .voxel-svg,
.shop-product:hover .voxel-svg {
  filter: brightness(1.15) drop-shadow(0 0 14px currentColor);
}

/* Top player avatar glow on hover */
.top-player:hover .avatar {
  box-shadow: 0 0 18px color-mix(in oklab, var(--tint, var(--accent)) 35%, transparent);
}

/* Better focus ring on inputs */
.auth-field input:focus,
.auth-field textarea:focus,
.pg-input:focus,
.newsletter-form input:focus {
  outline: none;
}
.newsletter-form input:focus + * { /* no-op */ }

/* Discord block — subtle scroll-reveal effect (entrance pop) */
@keyframes discordPop {
  from { transform: scale(.985); opacity: .92; }
  to   { transform: scale(1); opacity: 1; }
}
.discord-block {
  animation: discordPop 0.35s cubic-bezier(.2,.8,.3,1) both;
}

/* Mode-feat icon-wrap halo */
.mode-feat .ico-wrap {
  box-shadow: 0 0 30px color-mix(in oklab, var(--tint) 25%, transparent);
}

/* Section header — eyebrow + title vertical-rhythm */
.section-head { gap: 24px 32px; }
.section-head h2.section-title { margin-top: 14px; }

/* Discord channel hover refinement */
.discord-channel { transition: background .12s, padding-left .12s; }
.discord-channel:hover { padding-left: 10px; }

/* Footer link underline on hover */
.footer a:not(.footer-socials a) {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .18s, color .15s, transform .15s;
}
.footer a:not(.footer-socials a):hover {
  background-size: 100% 1px;
  transform: none;
}

/* Section eyebrow accent dot color tint per section */
.section-eyebrow::before {
  background: var(--accent);
}

/* Profile dropdown header — accent stroke top corner */
.nav-profile-menu .head {
  position: relative;
}
.nav-profile-menu .head::after {
  content: "";
  position: absolute;
  top: 0; right: 8px;
  width: 24px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
}

/* Mode-feat perk pills hover */
.mode-feat .perks span {
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.mode-feat .perks span:hover {
  background: color-mix(in oklab, var(--tint) 10%, transparent);
  border-color: color-mix(in oklab, var(--tint) 35%, var(--line));
  color: var(--ink);
  transform: translateY(-1px);
}

/* Achievement card subtle "tilt" effect on hover */
.ach-card { transition: transform .25s, border-color .2s, box-shadow .25s; }

/* Status page service rows — left dot vertical center */
.status-list .pg-row { align-items: center; }
.status-list .pulse { margin: 0; }

/* Newsletter form input + button stack on mobile */
@media (max-width: 720px) {
  .newsletter-form { flex-direction: column; align-items: stretch; }
  .newsletter-form input,
  .newsletter-form .btn { width: 100%; min-height: 44px; }
}

/* Streak day "today" emphasized icon */
.streak-day.today .ico {
  filter: drop-shadow(0 0 8px var(--accent-2));
  animation: hpPulse 2s ease-in-out infinite;
}

/* Quest item hover */
.journey-quests .quest-item { transition: padding-left .15s, background .15s; }
.journey-quests .quest-item:hover {
  padding-left: 6px;
}
.journey-quests .quest-item.is-done:hover {
  padding-left: 0;
  cursor: default;
}

/* Better mailbox empty state */
.pg-empty h3 { line-height: 1.3; }

/* Notification panel — slightly larger on desktop */
@media (min-width: 1100px) {
  .notify-panel { width: 380px; }
}

/* Mobile menu link icon */
.mobile-menu a {
  padding: 14px 14px;
  font-size: 14px;
}
.mobile-menu a:active { background: rgba(63,169,245,0.10); }

/* Cookie banner button gap */
.cookie-banner .actions {
  gap: 8px;
  flex-wrap: wrap;
}

/* CmdK active item icon brighter */
.cmdk-item.is-selected .ico,
.cmdk-item:hover .ico {
  background: var(--accent);
  color: var(--accent-fg);
}

/* Sub-toast bg in daymode */
body.daymode .toast .ico { color: #fff; }

/* Voxel art bg refinement — diagonal stripes more subtle */
.hp-mode-art,
.mode-feat .ico-wrap,
.shop-product-art {
  background-blend-mode: normal;
}

/* Tighter page wrap on very wide screens */
@media (min-width: 1440px) {
  .wrap { max-width: 1320px; }
}

/* Hero IP plaque max width */
.hp-ip { max-width: 580px; }

/* Action ticker text wrap-prevention */
.ticker-track {
  flex-wrap: nowrap;
}
.ticker-item {
  flex-shrink: 0;
}

/* Card body min-height for equal grid alignment */
.shop-product { min-height: 220px; }
.ach-card { min-height: 200px; }


/* ──────────────────────────────────────────
   POLISH — empty states, form feedback, timeline, badges
   ────────────────────────────────────────── */

/* Empty state refinement */
.pg-empty {
  background:
    radial-gradient(ellipse 400px 200px at 50% 0%, color-mix(in oklab, var(--accent) 4%, transparent), transparent 70%),
    rgba(255,255,255,0.015);
}
body.daymode .pg-empty {
  background:
    radial-gradient(ellipse 400px 200px at 50% 0%, color-mix(in oklab, var(--accent) 6%, transparent), transparent 70%),
    rgba(20,40,80,0.02);
}
.pg-empty .icon {
  display: inline-grid;
  place-items: center;
  width: 72px; height: 72px;
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent);
  border-radius: 16px;
  margin-bottom: 18px;
  font-size: 32px;
  line-height: 1;
}

/* Form input — valid state subtle ring */
.auth-field input:focus:not(:placeholder-shown):valid,
.pg-input:focus:not(:placeholder-shown):valid {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--emerald) 18%, transparent);
}
.auth-field input:focus:not(:placeholder-shown):invalid,
.pg-input:focus:not(:placeholder-shown):invalid {
  border-color: var(--redstone);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--redstone) 18%, transparent);
}

/* Timeline marker — accent glow */
.tl-item::before {
  transition: transform .2s, box-shadow .2s;
}
.tl-item:hover::before {
  transform: scale(1.2);
  box-shadow: 0 0 16px var(--accent), 0 0 0 4px var(--bg-0);
}
.tl-item.is-done:hover::before {
  box-shadow: 0 0 16px var(--emerald), 0 0 0 4px var(--bg-0);
}

/* Body daymode timeline marker ring */
body.daymode .tl-item::before { box-shadow: 0 0 12px var(--accent), 0 0 0 4px #e8f1fb; }
body.daymode .tl-item.is-done::before { box-shadow: 0 0 12px var(--emerald), 0 0 0 4px #e8f1fb; }

/* Changelog version tag pill — refined */
.dash-card span[style*="background: var(--accent)"] {
  text-shadow: 0 1px 1px rgba(0,0,0,0.18);
}

/* Tag chips general (used across cards) */
.mode-feat .perks span,
.tag-pill,
.shop-product .badge,
.featured-streamer .live,
.featured-streamer .viewers,
.featured-streamer .badge {
  font-feature-settings: "tnum";
}

/* Loading shimmer for skeleton */
.skeleton {
  background: linear-gradient(110deg,
    var(--surface-1) 30%,
    color-mix(in oklab, var(--surface-1) 80%, white 0%) 50%,
    var(--surface-1) 70%);
  background-size: 200% 100%;
  animation: skelShine 1.6s linear infinite;
  border-radius: 8px;
}
@keyframes skelShine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Subtle vignette on hero */
.hp-hero {
  background-image: radial-gradient(ellipse 1200px 700px at 50% 100%, transparent 70%, rgba(0,0,0,0.10));
}
body.daymode .hp-hero {
  background-image: radial-gradient(ellipse 1200px 700px at 50% 100%, transparent 70%, rgba(20,40,80,0.05));
}

/* Tabs underline gradient */
.pg-tab.is-active {
  border-bottom-color: var(--accent);
  box-shadow: inset 0 -2px 0 var(--accent), 0 4px 8px -6px color-mix(in oklab, var(--accent) 40%, transparent);
}

/* Better progress bar feel */
.xp-bar .fill,
.ach-card .progress .fill {
  background-size: 200% 100%;
  animation: barShine 2.4s linear infinite;
}
.xp-bar .fill {
  background-image: linear-gradient(90deg,
    var(--accent) 0%,
    color-mix(in oklab, var(--accent) 60%, var(--emerald)) 50%,
    var(--accent) 100%);
}
@keyframes barShine {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Sıralama podium block — better depth */
.podium-block {
  position: relative;
  overflow: hidden;
}
.podium-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 50%);
  pointer-events: none;
}

/* Settings form actions strip */
.pg-form-actions {
  padding-top: 8px;
  border-top: 1px dashed var(--line);
  margin-top: 8px;
}

/* Auth shell — accent corner highlight */
.auth-shell::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 80px; height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}
.auth-shell { position: relative; overflow: hidden; }

/* Numeric badges — consistent base color */
.nav-profile-menu .val.dot { font-feature-settings: "tnum"; }
.notify-head span[style*="color: var(--accent)"] { font-feature-settings: "tnum"; }

/* Improve dn-toggle thumb shadow */
.dn-thumb {
  box-shadow:
    0 2px 6px rgba(0,0,0,0.4),
    0 0 12px rgba(255,243,216,0.4),
    inset 0 1px 0 rgba(255,255,255,0.3);
}

/* DashCard heading row better gap */
.dash-card .h-row { gap: 12px; align-items: baseline; }

/* Better hover for friend rows */
.friends-widget .row { transition: padding-left .12s, background .12s; }
.friends-widget .row:hover { padding-left: 12px; }

/* Mailbox row read/unread visual */
.pg-row[style*="opacity"] { transition: opacity .2s; }
.pg-row[style*="opacity"]:hover { opacity: 1 !important; }

/* Activity feed: hover row transition */
.dash-activity li { transition: background .12s, padding-left .12s; }
.dash-activity li:hover {
  background: rgba(255,255,255,0.02);
  padding-left: 6px;
  border-radius: 6px;
}
body.daymode .dash-activity li:hover { background: rgba(20,40,80,0.03); }

/* Shop product hover image scale slight */
.shop-product-art .voxel-svg {
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.shop-product:hover .shop-product-art .voxel-svg {
  transform: scale(1.08);
}

/* VIP "EN POPÜLER" badge — subtle bounce on load */
.vip-grid .shop-product.is-featured .badge {
  animation: vipPop 0.5s cubic-bezier(.5, 1.6, .4, 1) both;
}
@keyframes vipPop {
  from { transform: translateY(-4px) scale(.85); opacity: 0; }
  to   { transform: translateY(0) scale(1); opacity: 1; }
}

/* Better dashed border visibility */
.acct-row,
.dash-activity li,
.lb-row-x,
.match-row + .match-row {
  border-color: color-mix(in oklab, var(--line) 70%, transparent);
}

/* Achievement card progress label */
.ach-card .progress .label { font-feature-settings: "tnum"; }

/* Streak week → smoother grid */
.streak-week { gap: 6px; padding: 2px 0; }

/* Better cmdk footer count */
.cmdk-footer { font-feature-settings: "tnum"; }

/* Hover for top-players entirety — slight rank lift */
.top-player:hover .rank {
  transform: scale(1.05);
  transition: transform .15s;
}
.top-player .rank { transition: transform .15s, color .15s; }


/* ──────────────────────────────────────────
   POLISH — hero, sections, badge variants, smooth dark/light
   ────────────────────────────────────────── */

/* Hero — soft accent halo behind wordmark */
.hp-hero-left {
  position: relative;
}
.hp-hero-left::before {
  content: "";
  position: absolute;
  left: -10%; top: 20%;
  width: 60%; height: 60%;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%);
  filter: blur(60px);
  z-index: -1;
  pointer-events: none;
  opacity: 0.7;
}
body.daymode .hp-hero-left::before {
  opacity: 0.4;
}

/* Smooth theme transition for variable swaps */
body {
  transition:
    background 0.6s cubic-bezier(.4,.2,.2,1),
    color 0.3s ease;
}
.dash-card, .shop-product, .nav, .btn, .btn--primary,
.mode-feat, .featured-streamer, .footer, .footer-status-strip,
.cookie-banner, .toast, .nav-profile-menu, .auth-shell {
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Better card stacked hover effect */
.shop-product:hover, .dash-card:hover, .feat-card:hover,
.hp-mode:hover, .hp-why-card:hover, .ach-card:hover {
  border-color: color-mix(in oklab, var(--accent) 30%, var(--line-strong));
}

/* Glowing accent dot in section eyebrow */
.section-eyebrow::before {
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent), 0 0 16px color-mix(in oklab, var(--accent) 40%, transparent);
}

/* Toast — slide in from right */
.toast {
  transform-origin: right center;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Badge variants — better consistency */
.badge-success {
  background: color-mix(in oklab, var(--emerald) 18%, transparent);
  color: var(--emerald);
  border: 1px solid color-mix(in oklab, var(--emerald) 40%, transparent);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .15em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.badge-warn {
  background: color-mix(in oklab, var(--gold) 18%, transparent);
  color: var(--gold);
  border: 1px solid color-mix(in oklab, var(--gold) 40%, transparent);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .15em;
}
.badge-error {
  background: color-mix(in oklab, var(--redstone) 18%, transparent);
  color: var(--redstone);
  border: 1px solid color-mix(in oklab, var(--redstone) 40%, transparent);
  padding: 3px 8px;
  border-radius: 4px;
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .15em;
}

/* Section divider chain polish */
.section + .section::before {
  width: 60px;
  height: 4px;
  opacity: 0.18;
  background:
    linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: cover;
  mask: none;
  -webkit-mask: none;
  border-radius: 2px;
}

/* Daymode transition sweep — sunrise effect */
body.daymode-tx::after {
  pointer-events: none;
  z-index: 998;
}

/* Better wordmark animation reset */
.hp-wordmark .a, .hp-wordmark .b {
  display: inline-block;
}

/* Inline data link styling */
.acct-row .v code,
.dash-card code,
.wiki-article code {
  display: inline-block;
  vertical-align: -1px;
}

/* Section eyebrow alignment fix when followed by .live-on / .live-off */
.hp-eyebrow {
  flex-wrap: wrap;
  row-gap: 8px;
}

/* Cookie banner button gap */
.cookie-banner .actions { gap: 8px; }

/* Better mailbox row indent */
.pg-row[style*="opacity"] {
  transition: opacity .15s, background .12s, padding-left .12s;
}
.pg-row[style*="opacity"]:hover {
  padding-left: 22px;
}

/* Profile dropdown header — extra subtle glow when fresh */
.nav-profile-menu .head .avatar {
  box-shadow:
    0 0 14px color-mix(in oklab, var(--accent) 30%, transparent),
    inset 0 0 0 1px rgba(255,255,255,0.04);
}

/* Notification panel slight tilt origin */
.notify-panel { transform-origin: top right; }

/* Achievement card progress bar smoother */
.ach-card .progress .track { overflow: hidden; }
.ach-card .progress .fill {
  background-image: linear-gradient(90deg,
    var(--tint, var(--accent)),
    color-mix(in oklab, var(--tint, var(--accent)) 70%, white));
}

/* Better leaderboard row spacing */
.lb-row-x { transition: background .15s, padding-left .15s; }
.lb-row-x:hover { padding-left: 28px; }

/* Hero status console line border separator */
.hp-status-row {
  transition: background .12s;
}
.hp-status-row:hover {
  background: rgba(255,255,255,0.02);
}

/* Better lb-podium first-place crown style */
.lb-podium {
  align-items: end;
}

/* Footer bottom alignment */
.footer-bottom {
  font-feature-settings: "tnum";
}

/* Press release row hover */
.press-row, .shop-product[class*="press"] { transition: border-color .15s; }

/* Image-style placeholder polish in account */
.dash-skin-slot {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    0 0 18px color-mix(in oklab, var(--accent) 22%, transparent);
}
body.daymode .dash-skin-slot {
  box-shadow:
    inset 0 0 0 1px rgba(20,40,80,0.06),
    0 0 18px color-mix(in oklab, var(--accent) 14%, transparent);
}

/* Newsletter input gap */
.newsletter-form { padding: 8px; }
.newsletter-form input { padding: 12px 14px; font-size: 14px; }
.newsletter-form .btn { font-size: 13px; padding: 0 18px; }

/* Generic block padding consistency */
.section { padding-block: clamp(48px, 6vw, 88px); }

/* Section eyebrow padding for grid section heads */
.section-head {
  padding-bottom: 4px;
}

/* Better .pg-head spacing on tablet */
@media (max-width: 880px) and (min-width: 720px) {
  .pg-head { padding: 40px 0 28px; }
  .pg-title { font-size: clamp(28px, 4.6vw, 40px); }
}

/* Numeric badge consistent ring */
.nav-profile-menu .val.dot {
  box-shadow: 0 0 0 2px var(--bg-2);
}
body.daymode .nav-profile-menu .val.dot {
  box-shadow: 0 0 0 2px #ffffff;
}

/* CmdK item icon subtle reposition */
.cmdk-item .ico { width: 28px; height: 28px; border-radius: 6px; }
.cmdk-item .ico .icon { width: 14px; height: 14px; }

/* Better admin status pill */
.lb-row-x .stat[style*="emerald"],
.lb-row-x .stat[style*="redstone"] {
  font-family: var(--font-pixel);
  font-size: 8px;
  letter-spacing: .12em;
}




/* ──────────────────────────────────────────
   MINECRAFT BACKGROUND — pixel sky + clouds + moon + far landscape
   Replaces previous mesh gradient background. Pure CSS, performant.
   ────────────────────────────────────────── */

.global-ambient {
  position: fixed; inset: 0;
  z-index: -3;
  pointer-events: none;
  overflow: hidden;
  background: linear-gradient(180deg,
    #0a1129 0%,
    #0e1830 30%,
    #1a2240 60%,
    #2a2a4a 85%,
    #3a2540 100%);
  image-rendering: pixelated;
}

body.daymode .global-ambient {
  background: linear-gradient(180deg,
    #5cb6e8 0%,
    #82c8ec 25%,
    #b7dcf0 55%,
    #ffc890 85%,
    #ff9460 100%);
}

/* Pixel grain (very subtle 2x2 noise tile) — adds texture */
.global-ambient::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 25% 25%, rgba(255,255,255,0.04) 1px, transparent 1px),
    radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.6;
  image-rendering: pixelated;
}
body.daymode .global-ambient::before {
  background-image:
    radial-gradient(1px 1px at 25% 25%, rgba(255,255,255,0.10) 1px, transparent 1px),
    radial-gradient(1px 1px at 75% 75%, rgba(255,255,255,0.06) 1px, transparent 1px);
}

/* CELESTIAL CYCLE — moon (cool) & sun (warm), simultaneous rise/set */
.celestial {
  position: absolute;
  top: 8%;
  right: 16%;
  width: 88px;
  height: 88px;
  image-rendering: pixelated;
  pointer-events: none;
  transition:
    transform 2.6s cubic-bezier(.32, .04, .25, 1),
    opacity   2.4s cubic-bezier(.32, .04, .25, 1);
}

/* MOON — cool gray-blue, pixel-art with subtle craters */
.celestial.moon {
  background:
    /* craters as small dots */
    radial-gradient(circle at 30% 35%, rgba(150,160,180,0.55) 6%, transparent 8%),
    radial-gradient(circle at 65% 55%, rgba(150,160,180,0.45) 5%, transparent 7%),
    radial-gradient(circle at 45% 70%, rgba(150,160,180,0.40) 4%, transparent 6%),
    /* highlight + shadow */
    linear-gradient(135deg, transparent 65%, rgba(120,135,160,0.45) 65%),
    linear-gradient(315deg, transparent 75%, rgba(255,255,255,0.45) 75%),
    /* base */
    #d8dde8;
  box-shadow:
    0 0 40px rgba(200,215,240,0.45),
    0 0 90px rgba(160,185,225,0.25),
    inset 0 0 0 3px #c0c8d8,
    inset 0 0 0 6px #d8dde8;
}

/* SUN — warm yellow-orange, brighter glow */
.celestial.sun {
  background:
    linear-gradient(135deg, transparent 60%, rgba(220,120,40,0.55) 60%),
    linear-gradient(315deg, transparent 70%, rgba(255,255,210,0.7) 70%),
    #ffc850;
  box-shadow:
    0 0 80px rgba(255,200,80,0.75),
    0 0 160px rgba(255,150,60,0.40),
    inset 0 0 0 4px #ffa830,
    inset 0 0 0 8px #ffc850;
}

/* Default state = NIGHT — moon at top, sun set below */
.celestial.moon {
  transform: translateY(0);
  opacity: 1;
}
.celestial.sun {
  transform: translateY(180vh);
  opacity: 0;
}

/* DAYMODE state — sun at top, moon set below.
   No transition-delay: both move simultaneously. */
body.daymode .celestial.moon {
  transform: translateY(180vh);
  opacity: 0;
}
body.daymode .celestial.sun {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 720px) {
  .celestial { width: 64px; height: 64px; top: 6%; right: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .celestial { transition: opacity 0.3s ease; }
  body:not(.daymode) .celestial.moon,
  body.daymode .celestial.sun { transform: none; opacity: 1; }
  body:not(.daymode) .celestial.sun,
  body.daymode .celestial.moon { transform: none; opacity: 0; }
}

/* PIXEL STARS — flat squares (not blurry circles) */
.global-ambient .stars {
  position: absolute; inset: 0;
  background-image:
    /* Tiny 2px stars scattered */
    linear-gradient(rgba(255,255,255,0.7) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,0.7) 2px, transparent 2px);
  background-size: 60px 60px, 60px 60px;
  background-position: 8% 12%, 18% 28%;
  display: none; /* replaced by individual <i> elements below */
}

/* Individual pixel-stars positioned absolutely */
.global-ambient .pstar {
  position: absolute;
  width: 2px; height: 2px;
  background: rgba(255,255,255,0.8);
  animation: starBlink 3s ease-in-out infinite;
}
.global-ambient .pstar.bright {
  width: 3px; height: 3px;
  background: rgba(255,255,255,1);
  box-shadow: 0 0 4px rgba(255,255,255,0.8);
}
.global-ambient .pstar:nth-child(odd) { animation-duration: 4s; }
.global-ambient .pstar:nth-child(3n) { animation-delay: -1s; }
.global-ambient .pstar:nth-child(5n) { animation-delay: -2s; }
@keyframes starBlink {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}
body.daymode .global-ambient .pstar { display: none; }

/* PIXEL CLOUDS — slow horizontal drift, big rectangular blocks */
.global-ambient .cloud {
  position: absolute;
  background: #e8e8e8;
  image-rendering: pixelated;
  opacity: 0.85;
  animation: cloudDrift 60s linear infinite;
  filter: drop-shadow(0 4px 0 rgba(200,200,210,0.4));
  /* Cloud built from 4 stacked rect blocks via box-shadow */
}
.global-ambient .cloud.c1 {
  top: 15%; left: -80px;
  width: 56px; height: 16px;
  animation-duration: 80s; animation-delay: 0s;
  box-shadow:
    16px -8px 0 -2px #f0f0f0,
    32px -4px 0 0 #f0f0f0,
    -8px 4px 0 0 #d8d8d8;
}
.global-ambient .cloud.c2 {
  top: 22%; left: -120px;
  width: 72px; height: 20px;
  animation-duration: 100s; animation-delay: -15s;
  box-shadow:
    24px -10px 0 0 #f0f0f0,
    -12px 6px 0 0 #d8d8d8;
}
.global-ambient .cloud.c3 {
  top: 32%; left: -100px;
  width: 48px; height: 14px;
  animation-duration: 90s; animation-delay: -40s;
  box-shadow:
    20px -6px 0 0 #f0f0f0,
    -10px 4px 0 0 #d8d8d8;
}
.global-ambient .cloud.c4 {
  top: 10%; left: -90px;
  width: 64px; height: 18px;
  animation-duration: 110s; animation-delay: -60s;
  box-shadow:
    28px -8px 0 0 #f0f0f0,
    -14px 5px 0 0 #d8d8d8;
}

@keyframes cloudDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(100vw + 200px)); }
}

body.daymode .global-ambient .cloud {
  background: #ffffff;
  opacity: 0.95;
  filter: drop-shadow(0 4px 0 rgba(150,180,220,0.30));
}
body.daymode .global-ambient .cloud.c1,
body.daymode .global-ambient .cloud.c2,
body.daymode .global-ambient .cloud.c3,
body.daymode .global-ambient .cloud.c4 {
  box-shadow:
    24px -8px 0 0 #ffffff,
    -12px 5px 0 0 #e8e8f0;
}

/* DRIFT VOXELS — floating Minecraft blocks (existing, refined) */
.global-ambient .drift {
  position: absolute;
  width: 24px; height: 24px;
  opacity: 0.45;
  animation: drift 40s ease-in-out infinite;
  image-rendering: pixelated;
}
.global-ambient .drift:nth-child(1) { top: 42%; left: 6%;  animation-delay: 0s;   }
.global-ambient .drift:nth-child(2) { top: 58%; left: 90%; animation-delay: -10s; }
.global-ambient .drift:nth-child(3) { top: 72%; left: 14%; animation-delay: -20s; }
.global-ambient .drift:nth-child(4) { top: 80%; left: 78%; animation-delay: -30s; }
.global-ambient .drift:nth-child(5) { top: 90%; left: 40%; animation-delay: -5s;  }

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25%      { transform: translate3d(20px, -16px, 0); }
  50%      { transform: translate3d(-14px, 24px, 0); }
  75%      { transform: translate3d(-22px, 8px, 0); }
}

body.daymode .global-ambient .drift {
  opacity: 0.6;
  filter: drop-shadow(0 4px 8px rgba(20,40,80,0.20));
}

/* PIXEL MOUNTAIN SILHOUETTE — far horizon */
.global-ambient .horizon {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,0.4));
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,120 L0,80 L80,80 L80,60 L160,60 L160,40 L240,40 L240,70 L320,70 L320,50 L400,50 L400,30 L480,30 L480,60 L560,60 L560,80 L640,80 L640,50 L720,50 L720,70 L800,70 L800,40 L880,40 L880,60 L960,60 L960,80 L1040,80 L1040,55 L1120,55 L1120,75 L1200,75 L1200,120 Z' fill='black'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'><path d='M0,120 L0,80 L80,80 L80,60 L160,60 L160,40 L240,40 L240,70 L320,70 L320,50 L400,50 L400,30 L480,30 L480,60 L560,60 L560,80 L640,80 L640,50 L720,50 L720,70 L800,70 L800,40 L880,40 L880,60 L960,60 L960,80 L1040,80 L1040,55 L1120,55 L1120,75 L1200,75 L1200,120 Z' fill='black'/></svg>");
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  opacity: 0.5;
  pointer-events: none;
}

body.daymode .global-ambient .horizon {
  background: linear-gradient(180deg, transparent, rgba(60,80,120,0.45));
  opacity: 0.4;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .global-ambient::after,
  .global-ambient .cloud,
  .global-ambient .drift,
  .global-ambient .pstar {
    animation: none !important;
  }
}

/* Mobile — fewer elements */
@media (max-width: 720px) {
  .global-ambient::after { width: 64px; height: 64px; top: 6%; right: 8%; }
  .global-ambient .drift { width: 18px; height: 18px; }
  .global-ambient .drift:nth-child(n+4) { display: none; }
  .global-ambient .cloud:nth-child(n+10) { display: none; }
  .global-ambient .horizon { height: 80px; }
}


/* ──────────────────────────────────────────
   SYNCED day/night transition (matches celestial 1.4s curve)
   ────────────────────────────────────────── */
body {
  transition:
    background-color 2.6s cubic-bezier(.32, .04, .25, 1),
    background 2.6s cubic-bezier(.32, .04, .25, 1),
    color 0.6s ease;
}

.global-ambient {
  transition: background 2.6s cubic-bezier(.32, .04, .25, 1);
}

.global-ambient::before {
  transition: background-image 2.6s cubic-bezier(.32, .04, .25, 1), opacity 1.4s ease;
}

/* Nav, cards, surfaces all sync */
.nav,
.dash-card,
.shop-product,
.feat-card,
.mode-card,
.mode-mini,
.hp-mode,
.hp-why-card,
.ach-card,
.dash-hero,
.dash-stat,
.stat-tile,
.status-card,
.lb-shell,
.pg-row,
.heatmap-wrap,
.pg-empty,
.top-player,
.faq-q,
.match-row,
.lb-row-x,
.footer,
.footer-status-strip,
.cookie-banner,
.toast,
.nav-profile-menu,
.notify-panel,
.auth-shell,
.auth-aside,
.auth-form-wrap,
.mode-feat,
.featured-streamer,
.discord-block,
.newsletter,
.hp-cta,
.v3-cta,
.journey-streak,
.journey-quests,
.journey-cta,
.mobile-menu,
.cmdk,
.cmdk-input,
.cmdk-footer,
.tweaks-panel,
.btn,
.btn--primary,
.pg-input,
.auth-field input,
.auth-field select,
.auth-field textarea {
  transition:
    background-color 1.8s cubic-bezier(.32, .04, .25, 1),
    background-image 1.8s cubic-bezier(.32, .04, .25, 1),
    border-color 1.8s cubic-bezier(.32, .04, .25, 1),
    color 0.6s ease,
    box-shadow 0.8s ease,
    transform 0.25s cubic-bezier(.2,.8,.3,1) !important;
}

/* Horizon silhouette also fades with sky */
.global-ambient .horizon {
  transition: background 2.6s cubic-bezier(.32, .04, .25, 1), opacity 1.4s ease;
}

/* Stars cross-fade smoothly */
.global-ambient .pstar {
  transition: opacity 2.0s ease;
}

/* Clouds tint smoothly when theme changes */
.global-ambient .cloud {
  transition: background 2.4s ease, opacity 2.4s ease, filter 2.4s ease;
}

/* The accent dot in section eyebrow */
.section-eyebrow::before {
  transition: background 0.6s ease, box-shadow 0.6s ease;
}

/* Daymode-tx sunset/sunrise wash — sync with celestial */
body.daymode-tx::after {
  animation-duration: 2.6s !important;
}


/* ──────────────────────────────────────────
   BUTTON SIZE LOCK — uniform heights, no exceptions
   ────────────────────────────────────────── */

/* Regular buttons — uniform 40px */
.btn,
a.btn,
button.btn {
  min-height: 40px !important;
  height: 40px !important;
  padding: 0 18px !important;
  font-size: 13px !important;
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Large buttons — uniform 48px */
.btn.btn--lg,
a.btn.btn--lg,
button.btn.btn--lg {
  min-height: 48px !important;
  height: 48px !important;
  padding: 0 22px !important;
  font-size: 14px !important;
}

/* Nav buttons (search, bell, hamburger) — uniform 36px square */
.nav .nav-bell,
.nav .nav-hamburger {
  width: 36px !important;
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
}
.nav .nav-actions {
  height: 36px !important;
}
.nav .nav-cta .btn--primary,
.nav .nav-cta a.btn--primary,
.nav .nav-cta button.btn--primary {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
  font-size: 12.5px !important;
}
.nav .nav-profile-trigger {
  height: 36px !important;
  min-height: 36px !important;
}

/* DN toggle inside action group */
.nav-actions .dn-toggle {
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 6px !important;
}
.nav-actions .nav-bell {
  width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
}

/* Cookie banner buttons — same as regular .btn */
.cookie-banner .actions .btn {
  flex: 1;
  min-height: 40px !important;
  height: 40px !important;
}

/* Form submit buttons (auth, settings, report) — large */
.auth-submit,
.pg-form-actions .btn,
form .btn--primary[type="submit"] {
  min-height: 48px !important;
  height: 48px !important;
}

/* IP plaque copy button — keep at plaque height (50px) */
.hp-ip .copy {
  min-height: 50px !important;
  height: 50px !important;
  padding: 0 22px !important;
}

/* Card row buttons (inline buttons within rows, like leaderboard/admin) — slightly smaller */
.lb-row-x .btn,
.match-row .btn,
.pg-row .btn {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
}

/* Friends widget invite/message buttons */
.friends-widget .row + div .btn {
  min-height: 32px !important;
  height: 32px !important;
}

/* Dashboard quick-access grid buttons */
.dash-card .btn {
  min-height: 40px !important;
  height: 40px !important;
}

/* Shop product "Satın al" buttons (compact) */
.shop-product .row .btn {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 12px !important;
  font-size: 11.5px !important;
}

/* CTA row buttons all aligned */
.hp-cta-row .btn,
.hp-cta-side .btn,
.mode-feat .cta-row .btn,
.cta-actions .btn,
.v3-cta .cta-side .btn,
.discord-block .actions .btn,
.featured-streamer .body .btn,
.newsletter-form .btn {
  min-height: 48px !important;
  height: 48px !important;
}

/* Newsletter form button — keep at 48 */
.newsletter-form .btn {
  padding: 0 18px !important;
  font-size: 13px !important;
}

/* Tabs */
.pg-tab {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 16px !important;
}

/* VIP card "Seç" / "Hemen Al" buttons — uniform */
.vip-grid .shop-product .btn {
  min-height: 44px !important;
  height: 44px !important;
}

/* Mobile breakpoint — slightly smaller btn but still equal */
@media (max-width: 720px) {
  .btn { padding: 0 14px !important; font-size: 12.5px !important; }
  .btn.btn--lg { padding: 0 18px !important; font-size: 13px !important; }
}

/* Ensure inline-styled buttons don't break the size */
.btn[style*="padding"] {
  /* the !important above should win; if inline style fights, this comment serves as the audit */
}

/* Final safeguard — span/icon children */
.btn > span,
.btn > .icon {
  line-height: 1;
  flex-shrink: 0;
}

/* Auth toggle pill (VIP monthly/yearly) — uniform button heights */
.vip-cycle button {
  height: 36px !important;
  min-height: 36px !important;
  padding: 0 16px !important;
}

/* Notification dropdown buttons */
.nav-profile-menu a,
.nav-profile-menu button {
  min-height: 36px !important;
  padding: 8px 12px !important;
  height: auto !important;
}


/* ──────────────────────────────────────────
   IP PLAQUE — uniform row height (LBL = ADDR = COPY)
   ────────────────────────────────────────── */
.hp-ip {
  align-items: stretch !important;
}
.hp-ip .lbl,
.hp-ip .addr,
.hp-ip .copy {
  height: 56px !important;
  min-height: 56px !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
}
.hp-ip .lbl {
  justify-content: center !important;
  padding: 0 18px !important;
}
.hp-ip .addr {
  padding: 0 18px !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.hp-ip .copy {
  justify-content: center !important;
  padding: 0 22px !important;
  min-width: 130px !important;
  height: 56px !important;
}

@media (max-width: 720px) {
  .hp-ip .lbl,
  .hp-ip .addr,
  .hp-ip .copy {
    height: 48px !important;
    min-height: 48px !important;
  }
  .hp-ip .copy { min-width: 100px !important; padding: 0 14px !important; font-size: 9px !important; }
  .hp-ip .addr { font-size: 14px !important; padding: 0 14px !important; }
}


/* ──────────────────────────────────────────
   COSMETIC SHOP — premium image-led cards
   Scoped under .cosmetic-card / .shop-products.is-cosmetic.
   Does NOT touch .shop-product (VIP / coins / key / skyblock / battlepass).
   ────────────────────────────────────────── */

/* Roomier grid so the artwork can breathe */
.shop-products.is-cosmetic {
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px;
}

.cosmetic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--tint) 7%, var(--surface-1)), var(--bg-2));
  border: 1px solid color-mix(in oklab, var(--tint) 22%, var(--line-strong));
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
  transition: transform .22s cubic-bezier(.2,.8,.3,1),
              border-color .22s, box-shadow .22s;
  isolation: isolate;
}
.cosmetic-card::before {
  /* soft tinted glow that intensifies on hover */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 80% at 50% 0%,
              color-mix(in oklab, var(--tint) 26%, transparent), transparent 60%);
  opacity: .55;
  pointer-events: none;
  transition: opacity .22s;
  z-index: 0;
}
.cosmetic-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in oklab, var(--tint) 55%, var(--line-strong));
  box-shadow: 0 26px 60px -28px color-mix(in oklab, var(--tint) 55%, #000),
              0 0 0 1px color-mix(in oklab, var(--tint) 20%, transparent);
}
.cosmetic-card:hover::before { opacity: 1; }
.cosmetic-card:focus-within {
  border-color: color-mix(in oklab, var(--tint) 55%, var(--line-strong));
}
.cosmetic-card > * { position: relative; z-index: 1; }

/* ── Media / artwork ── */
.cosmetic-card-media {
  position: relative;
  aspect-ratio: 16 / 11;
  display: grid;
  place-items: center;
  padding: 14px;
  background:
    radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--tint) 16%, transparent), transparent 68%),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.015) 0 2px, transparent 2px 6px),
    var(--bg-3);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.cosmetic-card-img {
  max-width: 84%;
  max-height: 84%;
  width: auto; height: auto;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 10px 22px color-mix(in oklab, var(--tint) 45%, transparent));
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.cosmetic-card:hover .cosmetic-card-img { transform: scale(1.07) translateY(-2px); }
/* voxel fallback inherits the same glow treatment */
.cosmetic-card-media .voxel-svg {
  transition: transform .28s cubic-bezier(.2,.8,.3,1);
}
.cosmetic-card:hover .cosmetic-card-media .voxel-svg { transform: scale(1.08); }

/* tier chip (top-left) */
.cosmetic-card-tier {
  position: absolute; top: 10px; left: 10px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .14em;
  padding: 5px 8px; border-radius: 6px;
  color: color-mix(in oklab, var(--tint) 85%, white);
  background: color-mix(in oklab, var(--tint) 16%, rgba(0,0,0,.55));
  border: 1px solid color-mix(in oklab, var(--tint) 45%, transparent);
  backdrop-filter: blur(4px);
}
/* limited / special badge (top-right) */
.cosmetic-card-badge {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .14em;
  padding: 5px 8px; border-radius: 6px;
  color: #0a0d12;
  background: var(--tint);
  box-shadow: 0 4px 14px -4px color-mix(in oklab, var(--tint) 70%, transparent);
}

/* ── Body ── */
.cosmetic-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 16px 18px;
  flex: 1;
}
.cosmetic-card-name {
  font-family: var(--font-pixel); font-size: 12.5px;
  letter-spacing: -.01em; line-height: 1.35;
  margin: 0; color: var(--ink);
}
.cosmetic-card-desc {
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.cosmetic-card-perks {
  list-style: none; padding: 0; margin: 2px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.cosmetic-card-perks li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--ink-soft);
}
.cosmetic-card-perks li .icon { color: var(--tint); flex-shrink: 0; }

.cosmetic-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px dashed var(--line);
}
.cosmetic-card-price {
  font-family: var(--font-pixel); font-size: 15px;
  color: color-mix(in oklab, var(--tint) 80%, var(--ink));
}
.cosmetic-card-buy {
  padding: 0 14px !important;
  height: 38px !important; min-height: 38px !important;
  font-size: 12px !important;
}

/* Daymode: lighten the artwork plate + keep tier chip readable */
body.daymode .cosmetic-card {
  background: linear-gradient(180deg, color-mix(in oklab, var(--tint) 8%, var(--surface-1)), var(--bg-2));
}
body.daymode .cosmetic-card-media {
  background:
    radial-gradient(circle at 50% 38%, color-mix(in oklab, var(--tint) 14%, transparent), transparent 70%),
    var(--bg-3);
}
body.daymode .cosmetic-card-tier {
  color: color-mix(in oklab, var(--tint) 55%, #0e1726);
  background: color-mix(in oklab, var(--tint) 18%, rgba(255,255,255,.7));
}

/* Responsive: two-column then single-column on small screens */
@media (max-width: 720px) {
  .shop-products.is-cosmetic { grid-template-columns: 1fr 1fr; gap: 12px; }
  .cosmetic-card-name { font-size: 11.5px; }
  .cosmetic-card-desc { font-size: 11.5px; }
}
@media (max-width: 480px) {
  .shop-products.is-cosmetic { grid-template-columns: 1fr; }
}

/* Reduced-motion: disable lift + image zoom */
@media (prefers-reduced-motion: reduce) {
  .cosmetic-card,
  .cosmetic-card-img,
  .cosmetic-card-media .voxel-svg { transition: none !important; }
  .cosmetic-card:hover { transform: none; }
  .cosmetic-card:hover .cosmetic-card-img,
  .cosmetic-card:hover .cosmetic-card-media .voxel-svg { transform: none; }
}