/* components.css — fixed, enumerable component set. No Tailwind, no build step. */
@import url("tokens.798f01c43aa0.css");

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
}

/* ---------- Layout ---------- */
.page    { width: 95%; max-width: 1200px; margin: 0 auto; }
.stack   { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.cluster { display: flex; align-items: center; gap: var(--space); }
.center  { display: flex; flex-direction: column; align-items: center; }

.grid-cards { display: grid; gap: calc(var(--space) * 2); grid-template-columns: 1fr; }
.grid-2      { display: grid; gap: calc(var(--space) * 2); grid-template-columns: 1fr; }
/* Server + players: side by side, server 1.5x wider; stacked on mobile. */
.grid-server { display: grid; gap: calc(var(--space) * 2); grid-template-columns: 1fr; }

@media (min-width: 768px) {
  .grid-cards { grid-template-columns: repeat(3, 1fr); }
  .grid-2      { grid-template-columns: 1fr 1fr; }
  .grid-server { grid-template-columns: 3fr 2fr; }
}

/* ---------- Card (old-site glass: bg-white/5, blur-lg) ---------- */
/* Full glassmorphism border on every side (white/20). The blue/purple
   accent lines sit exactly ON the border (top/bottom: -2px = border
   thickness) and fade out at the ends into the glass border. */
.card {
  position: relative;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
  padding: calc(var(--space) * 3);
}
.card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 6%;
  right: 6%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0),
    rgba(59, 130, 246, 0.9),
    rgba(0, 0, 0, 0));
  pointer-events: none;
}
.card::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 6%;
  right: 6%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0),
    rgba(168, 85, 247, 0.9),
    rgba(0, 0, 0, 0));
  pointer-events: none;
}
/* Bare cards don't clip (accent lines live outside the edge);
   outer media corners are rounded instead. Logical props = RTL-safe. */
.card--bare { padding: 0; overflow: visible; }
.card--bare > :first-child {
  border-start-start-radius: calc(var(--radius) - 2px);
  border-end-start-radius: calc(var(--radius) - 2px);
}
.card--wide { width: 100%; max-width: 620px; }   /* width:100% so `margin:0 auto` centres it instead of shrink-to-fit */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space);
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  /* Keep the gradient inside the padding box: painting it under the
     transparent border leaves a 1px lighter seam on the edge. */
  background-clip: padding-box;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.btn:hover        { transform: translateY(-2px); }
.btn:active       { transform: translateY(0); }
.btn-primary      { background: var(--gradient-brand); background-clip: padding-box; box-shadow: var(--shadow-glow); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost        { background: var(--surface); border-color: var(--border); color: var(--text-muted); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.btn-ghost:hover  { color: var(--text); }
.btn--block       { width: 100%; }
.btn--lg          { font-size: 1.15rem; padding: 14px 32px; }

/* ---------- Inputs ---------- */
.input-group   { display: flex; flex-direction: column; gap: 6px; }
.input-label   { font-size: 0.85rem; color: var(--text-muted); font-weight: 700; }
.input {
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 1rem;
  transition: border-color 0.2s ease;
}
.input::placeholder { color: var(--text-faint); }
.input:focus        { outline: none; border-color: var(--brand); }
.input--error       { border-color: var(--danger); }
.input-error       { color: var(--danger); font-size: 0.85rem; }
/* Native <option> popups don't inherit the dark theme: set them explicitly,
   otherwise white text lands on the OS white list and is unreadable. */
.input option,
select.input option {
  background: var(--input-bg);
  color: var(--text);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge--success { color: var(--success); background: rgba(52, 211, 153, 0.12);  border-color: rgba(52, 211, 153, 0.35); }
.badge--warning { color: var(--warning); background: rgba(251, 191, 36, 0.12);  border-color: rgba(251, 191, 36, 0.35); }
.badge--danger  { color: var(--danger);  background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); }
.badge--muted   { color: var(--text-muted); background: var(--surface-2); border-color: var(--border); }

/* ---------- Avatar (full head, slight rounding — never a circle crop) ---------- */
.avatar {
  border-radius: 10px;
  border: none;
  background: none;
  display: block;
  object-fit: cover;
}
.avatar--sm { width: 36px; height: 36px; }
.avatar--lg { width: 88px; height: 88px; }
.avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: var(--text-muted);
  font-size: 1.5rem;
  background: var(--surface);
  border: 2px solid var(--border);
}

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal--open { opacity: 1; pointer-events: auto; }
.modal__box {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: calc(var(--space) * 3);
  color: var(--text);
  box-shadow: var(--shadow-card);
}
.modal__close {
  position: absolute;
  top: 16px;
  left: 20px;             /* RTL: close sits top-left */
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
}
.modal__close:hover { color: var(--text); }

/* ---------- Navbar (old site: h-100px, blur-xl, navbarbg, logo straddles bar) ---------- */
.navbar {
  position: relative;
  z-index: 50; /* above page content: the user panel must not fall behind cards */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space);
  height: 100px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: var(--surface) url("../img/navbarbg.b63a323d9042.jpg");
  background-size: cover;
  background-position: center;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--shadow-card);
  padding: 0 calc(var(--space) * 3);
}
.navbar__group {
  display: flex;
  align-items: center;
  gap: var(--space);
  z-index: 1;
  flex-wrap: wrap;
}
.navbar__logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  line-height: 0;
}
.navbar__logo img {
  width: 130px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6));
  transition: transform 0.5s ease;
}
.navbar__logo img:hover { transform: scale(1.05); }
.navbar .btn { padding: 10px 18px; font-size: 0.9rem; }
/* Floating head: no ring, no disc behind the transparency. */
.navbar .avatar { border: none; background: none; box-shadow: none; }
.navbar .avatar--placeholder {
  background: var(--surface-2);
  border: 2px solid var(--border);
}
/* Bust standing inside the bar: framed on head + torso, waist clipped
   by the bar edge. */
.navbar__bust {
  position: relative;
  top: 6px;
  height: 84px;
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  line-height: 0;
}
.navbar__bust img {
  height: 60px;
  width: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.55));
}
.navbar__bust canvas {
  /* Fallback sizing only: the viewer sets inline width/height (84x120).
     Taller than the bar on purpose — the bar crops it below the waist. */
  width: 84px;
  height: 120px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}

@media (max-width: 768px) {
  .navbar__logo img { width: 90px; }
  .navbar .btn { padding: 8px 12px; font-size: 0.8rem; }
  .navbar__bust { height: 78px; }
  .navbar__bust img { height: 52px; }
  .navbar__bust canvas { width: 76px; height: 108px; }
}

/* ---------- Navbar user menu (hover/click) ---------- */
.usermenu {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.usermenu__trigger:hover { border-color: var(--border); background: var(--surface-2); }
.usermenu__trigger svg { width: 16px; height: 16px; }
.usermenu__chev { transition: transform 0.25s ease; }
.usermenu:hover .usermenu__chev,
.usermenu:focus-within .usermenu__chev { transform: rotate(180deg); }
.usermenu__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 80;
  min-width: 200px;
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 8px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: rgba(8, 8, 20, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
}
/* Invisible bridge over the gap, so the mouse can travel from the trigger
   into the panel without the hover being lost. */
.usermenu__panel::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.usermenu:hover .usermenu__panel,
.usermenu:focus-within .usermenu__panel { display: flex; }
.usermenu__panel form { margin: 0; }
.usermenu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  border-radius: 10px;
  background: none;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  text-align: start;
}
.usermenu__item:hover { background: var(--surface-2); }
.usermenu__item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.usermenu__item--danger { color: var(--danger); }

/* Icons inside navbar buttons */
.navbar .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ---------- Support: ticket list + thread ---------- */
.link-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 700;
}
.link-back:hover { color: var(--text); }
.link-back svg { transform: scaleX(-1); }   /* RTL: chevron points back */

.ticket-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 20px;
  text-decoration: none;
  color: inherit;
  background: var(--surface-solid);              /* readable over galaxy */
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.ticket-row:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.ticket-row__main { display: flex; flex-direction: column; gap: 6px; }
.ticket-row__subject { font-size: 1.05rem; }
.ticket-row__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ticket-row__side { display: flex; align-items: center; gap: 10px; }
.ticket-row__id { color: var(--text-faint); font-size: 0.8rem; }
.ticket-row__date { color: var(--text-faint); font-size: 0.78rem; white-space: nowrap; }

.thread { display: flex; flex-direction: column; gap: 10px; }
.msg {
  max-width: 88%;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface-solid);              /* readable over galaxy */
}
.msg--user { align-self: flex-start; border-color: rgba(150, 130, 246, 0.6); }
.msg--admin { align-self: flex-end; border-color: rgba(52, 211, 153, 0.55); }
.msg__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.msg__head strong { font-size: 0.9rem; }
.msg--admin .msg__head strong { color: var(--success); }
.msg--user .msg__head strong { color: var(--brand); }
.msg__body { margin: 0; line-height: 2; color: var(--text); }

/* Support panels: opaque so the galaxy never fights the text. */
.support-panel { background: var(--surface-solid); }

/* ---------- Ranks (catalog) ---------- */
.rank-card {
  padding: 0;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.rank-card:hover { transform: translateY(-5px); }
.rank-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.rank-card__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 400px;
  padding: 24px;
  border-radius: calc(var(--radius) - 2px);
}
.rank-card__badge {
  align-self: flex-start;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.rank-card__name {
  margin: auto 0;
  text-align: center;
  font-size: 2rem;
  color: #fff;
}
.rank-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.rank-card__price { color: var(--success); font-size: 1.3rem; }

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.perks {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 18px;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-solid);
  max-height: 46vh;
  overflow-y: auto;
}
@media (min-width: 640px) {
  .perks { grid-template-columns: 1fr 1fr; }
}
.perk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 7px 0;
  line-height: 1.8;
  font-size: 0.94rem;
  border-bottom: 1px dashed var(--border);
}
.perk::before {
  content: "✓";
  flex: 0 0 auto;
  color: var(--success);
  font-weight: 900;
  font-size: 0.95rem;
}
.perk:last-child { border-bottom: none; }

/* ---------- Detail rows (dashboard / orders) ---------- */
.detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 2px solid var(--border);
}
.detail-row dt { color: var(--text-faint); font-size: 0.85rem; }
.detail-row dd { margin: 0; font-weight: 700; }

/* ---------- Home page ---------- */
.section-title {  font-size: 1.3rem;
  margin: 0;
  color: var(--text);
  text-shadow: 0 0 18px rgba(150, 130, 246, 0.8);
}
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--gradient-brand);
}

/* Hero: server address, art-backed with a soft brand glow. */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: clamp(32px, 6vw, 56px) 24px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(150, 130, 246, 0.28), rgba(2, 2, 10, 0) 60%),
    linear-gradient(rgba(2, 2, 10, 0.72), rgba(2, 2, 10, 0.86)),
    url("../img/minecraft.52d4f7f4020d.jpg") center / cover;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero__label { color: var(--text-muted); font-size: 0.95rem; }
.hero__ip {
  direction: ltr;
  font-size: clamp(1.7rem, 6vw, 3.1rem);
  font-weight: 900;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 0 0 34px rgba(150, 130, 246, 0.95);
}
.hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Live status pill */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  border: 1px solid rgba(52, 211, 153, 0.4);
  background: rgba(52, 211, 153, 0.12);
  color: var(--success);
}
.status-pill--off {
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
}
.status-pill__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pillPulse 2s infinite;
}
@keyframes pillPulse {
  0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%  { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

/* Stat cards */
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  min-height: 180px;
}
.stat__label { color: var(--text-muted); font-size: 0.85rem; }
.stat__value, .stat__value--off {
  font-size: 2.6rem;
  font-weight: 900;
  line-height: 1;
  color: var(--success);
  text-shadow: 0 0 22px rgba(52, 211, 153, 0.5);
}
.stat__value--off { font-size: 1.4rem; color: var(--text-faint); text-shadow: none; }

/* Social cards */
.social {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  min-height: 180px;
}
.social__icon {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.social__icon img { width: 34px; height: 34px; display: block; }
.social__icon--discord { background: linear-gradient(135deg, #5865f2, #404eed); box-shadow: 0 0 24px rgba(88, 101, 242, 0.45); }
.social__icon--telegram { background: linear-gradient(135deg, #37aee2, #1e96c8); box-shadow: 0 0 24px rgba(55, 174, 226, 0.45); }
.social__name { font-size: 1.1rem; font-weight: 700; }
.social__id { color: var(--text-faint); font-size: 0.85rem; }

/* News */
.news-item { display: flex; flex-direction: column; gap: 8px; }
.news-item__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.news-item__title { font-size: 1.1rem; }
.news-item__date {
  color: var(--text-faint);
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.news-item__body { margin: 0; line-height: 2; color: var(--text-muted); }

/* ---------- Home: records + address animation ---------- */
.grid-stats {
  display: grid;
  gap: calc(var(--space) * 2);
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .grid-stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .grid-stats { grid-template-columns: repeat(4, 1fr); } }

.stat__sub { color: var(--text-faint); font-size: 0.78rem; }
.stat__value--record {
  color: var(--brand);
  text-shadow: 0 0 22px rgba(150, 130, 246, 0.6);
}
.stat--record::after { opacity: 0.9; }

/* The address breathes: a slow glow plus a soft sheen sweep. */
.hero__ip {
  position: relative;
  animation: ipGlow 3.2s ease-in-out infinite;
}
@keyframes ipGlow {
  0%, 100% { text-shadow: 0 0 22px rgba(150, 130, 246, 0.75); }
  50%      { text-shadow: 0 0 46px rgba(150, 130, 246, 1), 0 0 70px rgba(29, 30, 255, 0.55); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__ip { animation: none; }
}

/* ---------- Account page ---------- */
.avatar--xl { width: 128px; height: 128px; border-radius: 20px; }

.profile {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.profile__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
  gap: 10px;
  flex: 1 1 240px;
}
.profile__name {
  margin: 0;
  font-size: 1.9rem;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 0 24px rgba(150, 130, 246, 0.5);
}
.profile__sub { color: var(--text-faint); font-size: 0.85rem; }
.profile__stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.pstat {
  min-width: 104px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface-solid);
  text-align: center;
}
.pstat__value {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
  line-height: 1.2;
}
.pstat__label { color: var(--text-faint); font-size: 0.75rem; }
.pstat--brand .pstat__value { color: var(--brand); }

/* Server-sourced rank chips (real LuckPerms groups, not website data). */
.rank-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 2px solid var(--border);
  background: var(--surface-solid);
  font-weight: 700;
}
.rank-chip__name { color: #fff; }
.rank-chip__exp {
  color: var(--warning);
  font-size: 0.78rem;
  font-weight: 600;
}
.rank-chip--empty { color: var(--text-faint); font-weight: 600; }

.rank-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface-solid);
}
.rank-row__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 12px var(--success);
}

/* ---------- Checkout: a little roomier ---------- */
.card--checkout { width: 100%; max-width: 760px; }

/* ---------- Rank cards (catalog redesign) ---------- */
.rank-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}
.rank-card:hover { transform: translateY(-5px); }
.rank-card__art {
  position: relative;
  height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  background-size: cover;
  background-position: center;
  border-radius: calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0 0;
}
.rank-card__badge {
  align-self: flex-start;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.rank-card__name {
  align-self: center;
  margin: 0;
  font-size: 1.9rem;
  color: #fff;
}
.rank-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  flex: 1;
}
.rank-card__pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rank-card__price { color: var(--success); font-size: 1.35rem; }

.perk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.perk-list__item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
}
.perk-list__item::before {
  content: "✓";
  color: var(--success);
  font-weight: 900;
  flex: 0 0 auto;
}
.link-more {
  align-self: flex-start;
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-more:hover { color: var(--text); }

/* ---------- Account: rank chips + pager ---------- */
.rank-chip__prefix { color: var(--brand); font-size: 0.95rem; }
.rank-chip__label { color: #fff; }
.rank-chip__exp { color: var(--warning); font-size: 0.78rem; font-weight: 700; }

.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager__pages { display: flex; gap: 6px; flex-wrap: wrap; }
.pager__page {
  min-width: 36px;
  padding: 6px 10px;
  text-align: center;
  border-radius: 10px;
  border: 2px solid var(--border);
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
}
.pager__page:hover { color: var(--text); border-color: var(--border-strong); }
.pager__page--active { background: var(--gradient-brand); color: #fff; border-color: transparent; }

/* ---------- Home hero: players slot inside the address card ---------- */
.hero__layout {
  display: flex;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  flex-wrap: wrap;
}
.hero__main {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.hero__players {
  flex: 0 0 auto;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: rgba(8, 8, 20, 0.55);
}
@media (max-width: 640px) {
  .hero__players { width: 100%; }
}
/* The stats row keeps its card sizes now that players moved out. */
.grid-stats--3 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-stats--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-stats--3 { grid-template-columns: repeat(3, 1fr); } }
.grid-stats--3 > .card { max-width: 420px; width: 100%; justify-self: center; }