/* 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);
}

/* Browser surfaces: selection, caret and scrollbars belong to the palette
   too — they are the cheapest signal that a page was built, not assembled. */
::selection { background: rgba(150, 130, 246, 0.4); color: var(--text); }
html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid transparent;
  border-radius: 999px;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--brand); background-clip: content-box; }

/* Keyboard focus is always visible, in the brand colour. Mouse clicks stay
   ring-free on controls that define their own :focus reset. */
.btn:focus-visible,
.icon-btn:focus-visible,
.rank-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---------- 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);
}

/* ---------- Icon button (sheet close) ---------- */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(4, 4, 14, 0.55);
  color: var(--text-muted);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-2); }
.icon-btn svg { width: 18px; height: 18px; }
body.modal-open { overflow: hidden; }

/* ---------- 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.6d839383ed7b.webp");
  background: var(--surface) image-set(
    url("../img/navbarbg.d0c21c0b7d34.avif") type("image/avif"),
    url("../img/navbarbg.6d839383ed7b.webp") type("image/webp")
  );
  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); }

/* ---------- 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__title {
  margin: 0;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  line-height: 1.35;
}
.hero__label { color: var(--text-muted); font-size: 0.95rem; }
.hero__ip {
  direction: ltr;
  /* Minecraft pixel font, with a light sweeping through the glyphs. */
  font-family: "Minecraft", "Vazirmatn", monospace;
  font-size: clamp(1.4rem, 4.4vw, 2.4rem);
  font-weight: 400;
  letter-spacing: 1px;
  background: linear-gradient(100deg,
    #b9a6ff 0%, #ffffff 16%, #8f7bff 32%, #4b4bff 48%,
    #ffffff 64%, #b9a6ff 80%, #b9a6ff 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 16px rgba(150, 130, 246, 0.55));
  animation: ipSweep 5s linear infinite, ipFloat 6s ease-in-out infinite;
}
@keyframes ipSweep {
  from { background-position: 140% 0; }
  to   { background-position: -140% 0; }
}
@keyframes ipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.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; }

@media (prefers-reduced-motion: reduce) {
  .hero__ip { animation: none; }
}

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

/* 70 / 30 split card: narrow identity column + wide content column.
   RTL puts the first column on the right, so the 30% (identity) leads and
   the 70% content sits on the left. */
.profile-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}
@media (min-width: 880px) {
  .profile-split { grid-template-columns: 3fr 7fr; }
}
.profile-split__main { min-width: 0; }
.profile-split__aside {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.profile__ranks { justify-content: center; margin-top: 4px; }
.profile-split .mc-name { font-size: 1.1rem; }
.profile__sub { color: var(--text-faint); font-size: 0.85rem; }

/* Player figure: the name plate sits on the head and is leaned onto the
   render's own isometric top plane (which recedes up-right at 45deg), so the
   name reads as the player's in-game name tag rather than a separate heading. */
.player-figure {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding-top: 44px;              /* room for the plate above the head */
}
.player-figure__head {
  position: relative;
  z-index: 1;
  /* same Y angle as the name plate, so the head and the name look the same way */
  transform: perspective(600px) rotateY(-24deg);
}
.player-nametag {
  position: absolute;
  top: 12px;                 /* hovers above the head, not glued to it */
  left: 50%;
  z-index: 2;
  padding: 2px 10px;
  white-space: nowrap;
  transform-origin: 50% 100%;
  /* no plate: the name itself is turned on the Y axis so it leans left,
     nudged forward so it reads as sitting on the top of the head */
  transform: translateX(-50%) perspective(600px) translateZ(16px) rotateY(-24deg);
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.65));
}
.player-nametag__text {
  display: inline-block;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--name-color, #fff);
  text-shadow: 0 0 14px var(--name-color, #fff), 0 2px 3px rgba(0, 0, 0, 0.85);
}
.player-nametag__prefix { margin-inline-end: 6px; }
.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: 5px 13px;
  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 page ================= */

/* Shop header */
.shop { display: flex; flex-direction: column; gap: calc(var(--space) * 2); }
.shop__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: start; }

/* ---------- Rank cards ---------- */
.rank-card {
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  cursor: pointer;                 /* the whole card opens its detail sheet */
  transition: transform 0.25s ease;
}
.rank-card:hover { transform: translateY(-5px); }
.rank-card__art {
  position: relative;
  height: 200px;
  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;
}
/* Deepen the lower art edge so the rank name reads on any artwork. */
.rank-card__art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(rgba(4, 4, 14, 0.10) 0%, rgba(4, 4, 14, 0.35) 55%, rgba(4, 4, 14, 0.85) 100%);
  pointer-events: none;
}
.rank-card__badge,
.rank-card__name { position: relative; z-index: 1; }
.rank-card__badge {
  align-self: flex-start;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(4, 4, 14, 0.6);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.76rem;
  font-weight: 700;
}
.rank-card__name {
  align-self: center;
  margin: 0;
  font-size: 2rem;
  line-height: 1;
  /* Rank's own glow colour, lightened enough to stay readable on dark art. */
  color: color-mix(in srgb, var(--glow-color, #fff) 45%, #fff);
}
.rank-card__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  flex: 1;
  background: var(--surface-solid);      /* readable over galaxy */
  border-end-start-radius: calc(var(--radius) - 2px);
  border-end-end-radius: calc(var(--radius) - 2px);
}
.rank-card__pricerow { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rank-card__price { color: var(--success); font-size: 1.4rem; font-weight: 900; }
.rank-card__price span { font-size: 0.82rem; font-weight: 700; }
.rank-card__dur { color: var(--text-faint); font-size: 0.78rem; }
.rank-card__count { margin: 0; color: var(--text-faint); font-size: 0.8rem; }
.rank-card__count b { color: var(--text); font-weight: 700; }
.rank-card__actions { display: flex; gap: 10px; margin-top: auto; }
.rank-card__actions .btn { flex: 1; }
.rank-card__actions .btn-primary { flex: 1.25; }   /* the buy action leads */

/* ---------- Rank sheet (full-height detail) ---------- */
.rank-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; padding: 16px; }
.rank-sheet[hidden] { display: none; }
.rank-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.rank-sheet__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1080px;
  max-height: 100%;
  margin: auto;
  overflow: hidden;
  background: var(--surface-solid);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.rank-sheet__banner {
  position: relative;
  flex: 0 0 auto;
  min-height: 148px;
  display: flex;
  align-items: flex-end;
  padding: 18px;
  background-size: cover;
  background-position: center;
}
.rank-sheet__banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(4, 4, 14, 0.25), rgba(4, 4, 14, 0.92));
}
.rank-sheet__banner > * { position: relative; z-index: 1; }
.rank-sheet__close { position: absolute; top: 14px; left: 14px; z-index: 2; }
.rank-sheet__ident { display: flex; flex-direction: column; gap: 6px; }
.rank-sheet__title {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  line-height: 1;
  /* Same lightened rank colour as the card, on the darker banner. */
  color: color-mix(in srgb, var(--glow-color, #fff) 45%, #fff);
}
.rank-sheet__price { color: var(--text); font-size: 1rem; font-weight: 700; }
.rank-sheet__price small { color: var(--text-muted); font-weight: 600; }

.rank-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 22px;
}
.rank-sheet__h { margin: 0 0 10px; font-size: 1rem; font-weight: 700; color: var(--text); }
.rank-sheet__foot {
  flex: 0 0 auto;
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-solid);
}
/* ---------- Abilities (plain descriptions, grouped by server) ---------- */
.abilities { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.abilities__grid { columns: 300px 3; column-gap: 16px; }
.ability-group {
  break-inside: avoid;
  margin: 0 0 14px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface-2);
}
.ability-group[hidden] { display: none; }
.ability-group__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.ability-group__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px var(--brand);
}
.ability-group__title { margin: 0; font-size: 0.92rem; font-weight: 700; color: var(--text); }
.ability-group__count { margin-inline-start: auto; color: var(--text-faint); font-size: 0.72rem; font-weight: 600; }
.ability-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ability {
  position: relative;
  padding-inline-start: 16px;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.9;
}
.ability::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--success);
  font-weight: 900;
  font-size: 0.78rem;
}
.ability[hidden] { display: none; }
.abilities__empty { margin: 0; color: var(--text-faint); font-size: 0.85rem; text-align: center; }

/* ---------- Account: rank chips + pager ---------- */
.rank-chip__prefix { color: var(--brand); font-size: 0.85rem; }
.rank-chip__label { color: #fff; }
.rank-chip__exp { color: var(--warning); font-size: 0.74rem; 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); }
/* No default ring after a click; keyboard users still get one. */
.pager__page:focus { outline: none; }
.pager__page:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.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; }

/* ---------- Minecraft particles (behind content) ---------- */
#mc-particles {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;            /* same layer as the galaxy, painted after it */
  pointer-events: none;
}

/* Honour reduced-motion: keep the rank page static and legible. */
@media (prefers-reduced-motion: reduce) {
  .rank-card,
  .btn { transition: none; }
  .rank-card:hover { transform: none; }
}

/* ---------- Accessibility: keyboard-only skip link (WCAG 2.4.1) ---------- */
.skip-link {
  position: absolute;
  top: -60px;
  right: 16px;
  z-index: 100;
  padding: 10px 18px;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--surface-solid);
  color: var(--text);
  border: 2px solid var(--border-strong);
  transition: top 0.15s ease;
}
.skip-link:focus { top: 0; }

/* ---------- Rank comparison table ---------- */
.rank-compare { margin-top: 28px; overflow-x: auto; }
.rank-compare table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.rank-compare th,
.rank-compare td {
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.rank-compare thead th { background: var(--surface-solid); color: var(--text-muted); }
.rank-compare tbody th { font-family: "Minecraft", "Vazirmatn", monospace; }