:root {
  /* ---- Paleta "r3tards.club": cajas negras + letra blanca a mano, sobre
     fondo lavanda/morado. Los acentos de color (turquesa/naranja/dorado)
     se mantienen para indicar rareza — eso no es solo estético, el jugador
     los usa para reconocer qué tan raro es un NFT de un vistazo. */
  --bg-void: #0a0614;
  --purple: #6E54FF;
  --purple-light: #DDD7FE;
  --purple-deep: #3a1f68;
  --text: #f1ecff;
  --text-dim: #cdc3ec;
  --danger: #ff5e7a;
  --ok: #5eead4;

  /* ---- Cajas y botones estilo "r3tards.club": negro sólido, borde claro
     delgado, esquinas redondeadas, letra blanca. */
  --ink: #0b0710;
  --ink-soft: rgba(11, 7, 16, 0.86);
  --paper: #f7f3ff;
  --line: rgba(247, 243, 255, 0.32);
  --line-strong: rgba(247, 243, 255, 0.55);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-void);
  color: var(--paper);
  font-family: 'Kalam', 'Comic Sans MS', system-ui, sans-serif;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.screen {
  position: fixed;
  inset: 0;
  display: none;
}
.screen.active { display: block; }

/* ---------------- MENÚ ---------------- */
#screen-menu.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.menu-bg-fx {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 20%, rgba(110, 84, 255,0.28), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(199,125,255,0.22), transparent 50%),
    linear-gradient(160deg, #0a0614 0%, #1c0f38 50%, #2d1652 100%);
  animation: bgPulse 8s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes bgPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.22); }
}

.menu-card {
  position: relative;
  z-index: 1;
  max-width: 560px;
  width: 100%;
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 26px;
  padding: 34px 28px;
  backdrop-filter: blur(10px);
  box-shadow: 0 0 60px rgba(110, 84, 255,0.2), 0 14px 0 rgba(0,0,0,0.25);
  text-align: center;
}

.title {
  font-family: 'Kalam', cursive, sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  margin: 0 0 8px;
  letter-spacing: 0.5px;
  line-height: 1.05;
}
.title-r3 {
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--purple);
}
.title-apoc {
  color: #ffd166;
  text-shadow: 3px 3px 0 var(--danger);
}

.subtitle {
  color: var(--text-dim);
  margin: 0 0 20px;
  font-size: 1.08rem;
  line-height: 1.5;
}

/* Vitrina de piezas reales de la colección — pedido explícito: "con
   imagen de r3tards" y "más interactivo y bonito que venda". Cada marco
   flota suave (float) con su propio retraso, y main.js va cambiando el
   contenido cada tanto con un fundido (fade). Antes de que cargue la
   colección se ve como marcos vacíos con un brillo pulsante, así nunca
   se ve "roto" mientras espera. */
.menu-showcase {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin: 0 0 20px;
}
.showcase-slot {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: linear-gradient(135deg, rgba(110,84,255,0.18), rgba(199,125,255,0.1));
  overflow: hidden;
  animation: showcaseFloat 3.4s ease-in-out infinite, showcaseGlow 2.2s ease-in-out infinite;
}
.showcase-slot:nth-child(2) { animation-delay: 0.3s, 0s; }
.showcase-slot:nth-child(3) { animation-delay: 0.6s, 0s; }
.showcase-slot:nth-child(4) { animation-delay: 0.9s, 0s; }
.showcase-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.showcase-img.loaded { opacity: 1; }
@keyframes showcaseFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
@keyframes showcaseGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(110,84,255,0); }
  50% { box-shadow: 0 0 14px rgba(110,84,255,0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-slot { animation: none; }
}

.fee-note {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 10px;
  line-height: 1.4;
}
.fee-note strong { color: #7cffb2; }

.stat-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.stat-pill {
  background: var(--ink);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  min-width: 110px;
}
.stat-label { display: block; font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; }
.stat-value { display: block; font-weight: 700; margin-top: 2px; font-size: 1rem; color: var(--paper); }

.progress-wrap { margin: 14px 0; }
.progress-label { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 6px; }
.progress-track { height: 10px; background: var(--ink); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #6E54FF, #c77dff); transition: width 0.2s ease; }

.menu-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 18px 0 10px; }

/* Botones tipo "píldora negra" — como los tabs de arriba en r3tards.club. */
.btn {
  font-family: 'Kalam', cursive, sans-serif;
  font-weight: 700;
  font-size: 1.08rem;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid var(--line);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, border-color 0.12s ease;
  text-decoration: none;
  display: inline-block;
}
.btn:active { transform: scale(0.97) translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* El atributo HTML `hidden` debe ganar SIEMPRE sobre el `display:
   inline-block` de arriba (que se agregó para que el botón "Volver al
   juego" de logros.html, que es un <a>, se vea bien) — si no, cualquier
   botón que arranca oculto con `hidden` (reintentar colección, saltar
   precarga, etc.) queda visible desde el arranque en vez de aparecer solo
   cuando JS lo decide. */
.btn[hidden] { display: none; }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--purple);
  box-shadow: 0 0 22px rgba(110, 84, 255,0.55);
}
.btn-primary:not(:disabled):hover { box-shadow: 0 0 30px rgba(199,125,255,0.75); border-color: #c77dff; }

.btn-secondary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--line);
}
.btn-secondary:not(:disabled):hover { border-color: var(--line-strong); }

.wallet-status { font-size: 0.92rem; color: var(--text-dim); margin: 6px 0 0; }
#btn-retry-collection { margin-top: 10px; padding: 9px 18px; font-size: 0.92rem; }
.menu-error {
  color: var(--paper);
  background: var(--ink);
  border: 2px solid var(--danger);
  border-radius: 16px;
  padding: 10px 14px;
  font-size: 0.92rem;
  margin-top: 10px;
}

.how-to { margin-top: 18px; text-align: left; font-size: 0.92rem; color: var(--text-dim); }
.how-to summary { cursor: pointer; color: var(--paper); font-weight: 700; }
.how-to ul { margin: 10px 0 0; padding-left: 20px; line-height: 1.6; }

.footer-note { margin-top: 18px; font-size: 0.8rem; color: var(--text-dim); opacity: 0.85; }
.footer-note a { color: #ffd166; }

/* ---------------- JUEGO ---------------- */
#screen-game.active { display: block; }
#game-canvas { width: 100%; height: 100%; display: block; touch-action: none; }

.hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  pointer-events: none;
  font-family: 'Kalam', cursive, sans-serif;
}
.hud-left, .hud-right { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.hud-right { align-items: flex-end; }

/* Cada dato del HUD va en su propia "etiqueta" negra — igual que las cajas
   LORE/1st RULE/MOTTO de r3tards.club — para que se lea bien encima de
   cualquier fondo/imagen que esté cayendo detrás. */
.hud-score,
.hud-wave,
.hud-progress,
.hud-combo {
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  line-height: 1.3;
}
.hud-score { font-size: 1.15rem; font-weight: 700; color: var(--paper); }
.hud-wave { font-size: 0.86rem; color: var(--purple-light); }
.hud-progress { font-size: 0.8rem; color: var(--text-dim); }

/* Indicador de dificultad: sube un escalón cada minuto real de partida
   (ver SPAWN_PROGRESSION.durationMinutes / difficultyStep en game.js) —
   se pidió explícitamente que esto se VEA, no solo se sienta en la
   velocidad, así que es su propia etiqueta con barrita de progreso. */
.hud-difficulty {
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 5px 14px;
  line-height: 1.3;
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
#hud-difficulty-level { color: var(--paper); font-weight: 700; }
.hud-difficulty-bar {
  width: 46px;
  height: 5px;
  border-radius: 999px;
  background: rgba(247, 243, 255, 0.18);
  overflow: hidden;
  flex: none;
}
.hud-difficulty-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--purple), var(--danger));
  transition: width 0.5s ease;
}
.hud-difficulty-bump {
  animation: hud-difficulty-bump 0.5s ease;
}
@keyframes hud-difficulty-bump {
  0% { transform: scale(1); border-color: var(--line); }
  35% { transform: scale(1.12); border-color: var(--purple-light); box-shadow: 0 0 14px rgba(110, 84, 255, 0.75); }
  100% { transform: scale(1); border-color: var(--line); }
}
.hud-lives-block { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.hud-lives-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.hud-lives { display: flex; gap: 5px; justify-content: flex-end; }
/* Arma equipada — se mantiene visible todo el tiempo (no solo el banner
   que aparece 2s al desbloquear), para que el jugador siempre sepa qué
   arma trae puesta. */
.hud-weapon {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  color: var(--text-dim);
}
.hud-weapon-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: drop-shadow(0 0 4px rgba(110, 84, 255, 0.7));
}
#hud-weapon-name { color: var(--paper); font-weight: 700; }
.hud-mute-btn {
  pointer-events: auto; /* .hud desactiva clicks por defecto; este botón sí necesita recibirlos */
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.72rem;
  color: var(--text-dim);
  cursor: pointer;
  font-family: 'Kalam', cursive, sans-serif;
}
.hud-mute-btn.muted { opacity: 0.6; }
.hud-mute-btn:hover { border-color: var(--purple-light); color: var(--paper); }
.life-icon {
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 0 6px rgba(110, 84, 255,0.85));
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.life-icon-lost {
  opacity: 0.28;
  filter: grayscale(1) brightness(0.6);
}
/* Vida "a medias" (ej. +1.5 al matar un épico): un logo apagado de base
   con la mitad izquierda de un logo encendido encima, recortada con
   clip-path — se nota de un vistazo que esa vida quedó a medio llenar. */
.life-icon-wrap {
  position: relative;
  width: 22px;
  height: 22px;
  display: inline-block;
}
.life-icon-wrap .life-icon {
  position: absolute;
  inset: 0;
}
.life-icon-half-fill {
  clip-path: inset(0 50% 0 0);
}
.hud-combo {
  font-size: 0.92rem;
  color: #ffd166;
  text-align: right;
  border-color: #ffd166;
}

/* Log en vivo (transparente) de r3tards matados — esquina inferior
   izquierda, no bloquea el disparo (pointer-events: none). */
.kill-log {
  position: absolute;
  left: 12px;
  bottom: 96px;
  width: min(280px, 62vw);
  max-height: 46vh;
  overflow: hidden;
  display: flex;
  flex-direction: column; /* con prepend() en JS, la línea más nueva queda arriba */
  align-items: flex-start; /* IMPORTANTE: sin esto, flex-direction:column estira cada
    línea al ancho completo del contenedor (align-items:stretch es el default), y por
    eso las píldoras se veían como "barras" largas en vez de ajustarse a su texto. */
  gap: 4px;
  pointer-events: none;
  z-index: 4;
  font-family: 'Kalam', cursive, sans-serif;
}
.kill-log-line {
  background: rgba(11, 7, 16, 0.22);
  border: 1px solid rgba(247, 243, 255, 0.16);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 0.66rem;
  line-height: 1.3;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: killLogIn 0.2s ease;
}
.kill-log-tier { font-weight: 700; }
.kill-log-pts { color: #ffd166; font-weight: 700; }
.kill-log-rare, .kill-log-epic, .kill-log-legendary { border-color: #ffd166; }
@keyframes killLogIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }

.tag-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.banner-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 10;
}

.nft-tag {
  position: absolute;
  transform: translateX(-50%);
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-family: 'Kalam', cursive, sans-serif;
  white-space: nowrap;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: tagIn 0.25s ease, tagOut 0.4s ease 2.1s forwards;
}
.nft-tag .tag-name { font-weight: 700; }
.nft-tag .tag-tier { display: block; font-size: 0.7rem; opacity: 0.9; margin-top: 2px; }

@keyframes tagIn { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes tagOut { to { opacity: 0; } }

.rare-banner {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  font-family: 'Kalam', cursive, sans-serif;
  font-weight: 700;
  font-size: clamp(1.3rem, 5vw, 2.1rem);
  text-align: center;
  padding: 12px 28px;
  border-radius: 20px;
  border: 3px solid currentColor;
  background: var(--ink-soft);
  animation: bannerPop 2.2s ease forwards;
}
@keyframes bannerPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  25% { transform: translate(-50%, -50%) scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -60%) scale(1); }
}

/* ---------------- GAME OVER ---------------- */
#screen-gameover.active {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(circle at 50% 30%, rgba(110, 84, 255,0.18), var(--bg-void) 70%);
}
.gameover-title {
  font-family: 'Kalam', cursive, sans-serif;
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  color: var(--paper);
  text-shadow: 3px 3px 0 var(--danger);
  margin: 0 0 10px;
}
.gameover-title.gameover-title-victory {
  color: var(--paper);
  text-shadow: 3px 3px 0 #ffd166;
}
.gameover-victory {
  color: #ffd166;
  font-weight: 700;
  font-size: 1rem;
  margin: 0 0 12px;
}
.gameover-score { font-size: 1.4rem; font-weight: 700; margin: 4px 0; }
.gameover-sub { color: var(--text-dim); font-size: 0.95rem; margin: 0 0 14px; }
.kill-breakdown {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.kill-breakdown li {
  background: var(--ink);
  border: 2px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.85rem;
}

/* ---------------- TOAST ---------------- */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink-soft);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 0.92rem;
  font-family: 'Kalam', cursive, sans-serif;
  z-index: 50;
  max-width: 90vw;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4);
}

@media (max-width: 480px) {
  .menu-card { padding: 26px 18px; }
  .stat-pill { min-width: 90px; padding: 6px 12px; }
}

/* ---------------- LOGROS (logros.html) ---------------- */
.logros-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  padding: 32px 20px 60px;
  min-height: 100%;
  overflow-y: auto;
}
.logros-card { margin-top: 12px; }

.logros-results {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 920px;
}

.kill-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 1rem;
  padding: 20px;
}

.kill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.kill-card {
  background: var(--ink-soft);
  border: 2px solid var(--tier-color, var(--line));
  border-radius: 18px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 0 18px color-mix(in srgb, var(--tier-color, #6E54FF) 25%, transparent);
}

.kill-card-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255,255,255,0.06);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kill-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kill-card-noimg { font-size: 1.4rem; color: var(--text-dim); }

.kill-card-name {
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kill-card-certified {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  color: #ffd166;
  border: 1px solid #ffd166;
  border-radius: 999px;
  padding: 0 5px;
  margin-left: 3px;
  vertical-align: middle;
  white-space: nowrap;
}
.kill-card-tier {
  font-size: 0.72rem;
  color: var(--tier-color, var(--text-dim));
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}
.kill-card-count {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ---------------- ALIAS (menú) ---------------- */
.alias-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}
.alias-current {
  font-size: 0.88rem;
  color: var(--text-dim);
  font-weight: 700;
}
.alias-input {
  font-family: 'Kalam', cursive, sans-serif;
  font-size: 0.92rem;
  padding: 8px 14px;
  border-radius: 999px;
  border: 2px solid var(--line);
  background: var(--ink);
  color: var(--paper);
  width: 160px;
  max-width: 46vw;
}
.alias-input:focus { outline: none; border-color: var(--purple-light); }
.btn-small { padding: 8px 16px; font-size: 0.88rem; }

/* ---------------- LOGROS DE PARTIDA (game over) + on-chain ---------------- */
.go-achievements { margin: 0 0 16px; }
.go-achievements-title { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 8px; font-weight: 700; }
.achv-badges {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.achv-badges li {
  background: var(--ink);
  border: 2px solid #ffd166;
  color: #ffd166;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.82rem;
  font-weight: 700;
}
.go-onchain { margin: 4px 0 16px; }
.go-onchain .wallet-status { margin-bottom: 8px; }

/* ---------------- RANKING / MEDALLAS (ranking.html, medallas.html) ---------------- */
.rank-list {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
}
.rank-list th, .rank-list td {
  padding: 9px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.rank-list th { color: var(--text-dim); text-transform: uppercase; font-size: 0.72rem; letter-spacing: 0.6px; }
.rank-list td.rank-pos { font-weight: 700; color: #ffd166; width: 2.6em; }
.rank-list td.rank-score { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.rank-list tr.rank-me { background: rgba(110, 84, 255, 0.18); }
.rank-alias { font-weight: 700; }
.rank-addr { color: var(--text-dim); font-size: 0.78rem; display: block; }

.medal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 18px;
  text-align: left;
}
.medal-card {
  background: var(--ink-soft);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 14px 16px;
  opacity: 0.55;
}
.medal-card.medal-unlocked {
  opacity: 1;
  border-color: #ffd166;
  box-shadow: 0 0 18px rgba(255, 209, 102, 0.25);
}
.medal-card-name { font-weight: 700; font-size: 0.98rem; display: flex; align-items: center; gap: 6px; }
.medal-card-desc { font-size: 0.82rem; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.medal-card-scope {
  display: inline-block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
  margin-top: 8px;
}
.medal-card-date { font-size: 0.72rem; color: #ffd166; margin-top: 6px; }

.rank-empty { text-align: center; color: var(--text-dim); padding: 24px; }
.rank-table-wrap { width: 100%; overflow-x: auto; }