/* ============================================================
   Detective Conan Gacha — styles.css  v2
   Paleta: azul oscuro · rojo · dorado · estilo anime noir
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Rajdhani:wght@400;500;600;700&family=Noto+Sans+JP:wght@300;400;700&display=swap');

/* ================================================================
   VARIABLES
================================================================ */
:root {
  --bg:        #03030c;
  --bg-2:      #08081e;
  --bg-card:   #0d0d24;
  --bg-glass:  rgba(13,13,36,0.88);
  --red:       #cc1122;
  --red-glow:  rgba(204,17,34,0.38);
  --blue:      #1a4fff;
  --blue-glow: rgba(26,79,255,0.32);
  --gold:      #f5c842;
  --gold-dim:  #b8963a;
  --text:      #e8e8f5;
  --muted:     #5a5a7a;
  --border:    rgba(255,255,255,0.08);

  /* Rarezas — 13 niveles */
  --c-color:    #9ca3af;
  --d-color:    #7dd3fc;
  --r-color:    #34d399;
  --cp-color:   #22d3ee;
  --sr-color:   #c084fc;
  --rp-color:   #60a5fa;
  --srp-color:  #e879f9;
  --mr-color:   #f0f9ff;
  --sec-color:  #fbbf24;
  --pr-color:   #6ee7b7;
  --srcp-color: #fb923c;
  --mrcp-color: #f472b6;
  --mrp-color:  #e2e8f0;

  --font-d: 'Cinzel Decorative', serif;
  --font-u: 'Rajdhani', sans-serif;
  --font-j: 'Noto Sans JP', sans-serif;

  --radius:    14px;
  --radius-sm: 8px;
  --transition: 0.25s cubic-bezier(0.4,0,0.2,1);

  /* Sombras reutilizables */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
  --shadow-md:  0 4px 20px rgba(0,0,0,0.5);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.6);
}

/* ================================================================
   RESET
================================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-u);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ── Canvas partículas ── */
#bg-canvas {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
}

/* ── Layout ── */
.page-wrapper {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; flex-direction: column;
}

/* ================================================================
   NAVBAR
================================================================ */
.navbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.5rem;
  background: rgba(3,3,12,0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(26,79,255,0.1), 0 4px 20px rgba(0,0,0,0.4);
}

.nav-logo {
  font-family: var(--font-d);
  font-size: 1.05rem;
  background: linear-gradient(135deg, #fff 30%, var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: filter var(--transition);
}
.nav-logo:hover { filter: brightness(1.2); }

.nav-links { display: flex; gap: 0.15rem; align-items: center; }

.nav-link {
  padding: 0.38rem 0.75rem;
  border-radius: 9px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  transition: color var(--transition), background var(--transition);
  display: flex; align-items: center; gap: 0.3rem;
  position: relative;
}
.nav-link:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-link.active {
  color: var(--gold);
  background: rgba(245,200,66,0.08);
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -0.7rem; left: 50%; transform: translateX(-50%);
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold);
}

.nav-user { display: flex; align-items: center; gap: 0.65rem; }

.nav-username {
  font-size: 0.78rem; font-weight: 700;
  color: var(--muted);
  max-width: 100px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.nav-packs-badge {
  background: var(--red);
  color: white;
  font-size: 0.68rem; font-weight: 800;
  padding: 2px 8px; border-radius: 10px;
  letter-spacing: 0.02em;
  box-shadow: 0 2px 8px rgba(204,17,34,0.4);
}

.nav-coins-badge {
  background: linear-gradient(135deg, #b8963a, #f5c842);
  color: #1a1000;
  font-size: .68rem; font-weight: 800;
  padding: 2px 8px; border-radius: 10px;
  letter-spacing: .02em;
  box-shadow: 0 2px 8px rgba(245,200,66,0.3);
}

/* ================================================================
   BOTONES
================================================================ */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1.9rem;
  background: linear-gradient(135deg, var(--red) 0%, #e01828 50%, #ff3347 100%);
  border: none; border-radius: var(--radius);
  color: white;
  font-family: var(--font-u); font-size: 1rem; font-weight: 700;
  letter-spacing: 0.1em; cursor: pointer;
  box-shadow: 0 4px 20px var(--red-glow), inset 0 1px 0 rgba(255,255,255,0.15);
  transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
  text-decoration: none;
  position: relative; overflow: hidden;
}
.btn-primary .btn-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,0.12) 50%, transparent 65%);
  animation: btn-shine-sweep 3s ease-in-out infinite;
}
@keyframes btn-shine-sweep {
  0%   { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(204,17,34,0.5), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn-primary:active:not(:disabled) { transform: translateY(1px); }
.btn-primary:disabled {
  opacity: 0.45; cursor: not-allowed;
  filter: grayscale(0.4);
}

/* Variante open-pack — más grande */
.btn-open-pack {
  min-width: 240px;
  font-size: 1.1rem;
  padding: 1rem 2.2rem;
  border-radius: 16px;
  letter-spacing: 0.12em;
}

.btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem 1.4rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-u); font-size: 0.88rem; font-weight: 600;
  letter-spacing: 0.06em; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  text-decoration: none;
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.18);
  transform: translateY(-1px);
}
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--gold), #e0a820);
  border: none; border-radius: var(--radius);
  color: #1a1000;
  font-family: var(--font-u); font-size: 0.9rem; font-weight: 700;
  letter-spacing: 0.1em; cursor: pointer;
  box-shadow: 0 4px 20px rgba(245,200,66,0.35);
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(245,200,66,0.5); }

.btn-sm { padding: 0.38rem 0.85rem; font-size: 0.78rem; }
.btn-block { width: 100%; }

/* ================================================================
   GLASS CARD
================================================================ */
.glass-card {
  background: var(--bg-glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ================================================================
   HOME / HERO
================================================================ */
.hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3rem 1.5rem;
  gap: 2rem; flex: 1;
}

.hero-eyecatch {
  font-family: var(--font-u);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.5em;
  color: var(--red); text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-d);
  font-size: clamp(2.4rem, 10vw, 5rem);
  font-weight: 900; line-height: 1;
  background: linear-gradient(135deg, #fff 0%, var(--gold) 50%, #ff6b35 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  filter: drop-shadow(0 0 30px rgba(245,200,66,0.28));
}

.hero-subtitle {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.4em;
  color: var(--blue); text-transform: uppercase;
}

.hero-jp { font-family: var(--font-j); font-size: 0.7rem; color: var(--muted); letter-spacing: 0.2em; }

.hero-stats { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; }

.stat-card {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.8rem 1.4rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 12px;
  transition: border-color var(--transition), background var(--transition);
}
.stat-card:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
}
.stat-n { font-family: var(--font-d); font-size: 1.4rem; color: var(--gold); line-height: 1; }
.stat-l { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; color: var(--muted); }

.hero-buttons { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 320px; }

.pack-timer-display {
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em;
  color: var(--muted); text-align: center;
}

/* Pack flotante en hero */
.pack-display { perspective: 800px; }
.pack-visual {
  width: 150px; height: 210px;
  background: linear-gradient(145deg, #1a2a6c, #b21f1f, #fdbb2d);
  border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  box-shadow: 0 0 40px rgba(245,200,66,0.22), 0 0 80px rgba(26,79,255,0.12), inset 0 1px 0 rgba(255,255,255,0.14);
  animation: packFloat 4s ease-in-out infinite;
  cursor: pointer;
  position: relative; overflow: hidden;
}
.pack-visual::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, transparent 50%);
  border-radius: 12px;
}
.pack-logo { font-family: var(--font-d); font-size: 2.5rem; color: rgba(255,255,255,0.9); }
.pack-label { font-size: 0.5rem; font-weight: 700; letter-spacing: 0.3em; color: rgba(255,255,255,0.6); }
.pack-stars { font-size: 0.65rem; color: var(--gold); letter-spacing: 0.3em; }

@keyframes packFloat {
  0%, 100% { transform: translateY(0) rotateY(-8deg) rotateX(3deg); }
  50% { transform: translateY(-12px) rotateY(8deg) rotateX(-3deg); }
}

/* ================================================================
   PACK OPENING PAGE
================================================================ */
.pack-page {
  display: flex; flex-direction: column; align-items: center;
  padding: 2rem 1rem 3rem; gap: 1.75rem; flex: 1;
}

/* Header de página */
.pack-page-header {
  text-align: center;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.pack-page-eyecatch {
  font-family: var(--font-u);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.5em;
  color: var(--blue); text-transform: uppercase;
}
.pack-page-title {
  font-family: var(--font-d);
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  background: linear-gradient(135deg, #fff 20%, var(--gold) 70%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  letter-spacing: 0.1em;
  filter: drop-shadow(0 0 20px rgba(245,200,66,0.22));
}
.pack-page-subtitle {
  font-size: 0.8rem; color: var(--muted); font-weight: 500; letter-spacing: 0.08em;
}

/* Panel de estado */
.pack-status-panel {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem; gap: 1rem;
  max-width: 540px; width: 100%;
}
.pack-status-left { display: flex; flex-direction: column; gap: 0.4rem; }
.pack-status-right { flex-shrink: 0; }

.pack-timer-display {
  font-size: 0.88rem; font-weight: 700; letter-spacing: 0.04em;
  color: var(--muted); text-align: left;
  display: flex; align-items: center; gap: 0.5rem;
}
.timer-ready {
  color: var(--r-color);
  text-shadow: 0 0 12px rgba(52,211,153,0.4);
  animation: timerPulse 2s ease-in-out infinite;
}
@keyframes timerPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.timer-countdown strong { color: var(--gold); font-family: 'Courier New', monospace; font-size: 1rem; }

/* Dots de carga */
.timer-dots { display: inline-flex; gap: 3px; }
.timer-dots span {
  width: 4px; height: 4px; border-radius: 50%; background: var(--muted);
  animation: dotBounce 1s ease-in-out infinite;
}
.timer-dots span:nth-child(2) { animation-delay: .15s; }
.timer-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes dotBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.pack-extra-info {
  font-size: 0.72rem; color: var(--muted);
  display: flex; align-items: center; gap: 0.35rem;
}
.extra-packs-badge {
  font-family: var(--font-d);
  font-size: 0.8rem; font-weight: 700;
  color: var(--muted);
  background: rgba(255,255,255,0.06);
  padding: 0px 8px; border-radius: 8px;
  border: 1px solid var(--border);
  transition: color var(--transition), background var(--transition), border-color var(--transition);
}
.extra-packs-badge.has-packs {
  color: var(--gold);
  background: rgba(245,200,66,0.1);
  border-color: rgba(245,200,66,0.3);
  box-shadow: 0 0 10px rgba(245,200,66,0.15);
}

.pack-guarantee-badge {
  display: flex; align-items: center; gap: 0.45rem;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.2);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.7rem; color: rgba(52,211,153,0.8); font-weight: 600;
}
.badge-icon { font-size: 0.85rem; }

/* ================================================================
   PACK STAGE / ENVELOPE
================================================================ */
.pack-stage {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 2.5rem; width: 100%;
}
.pack-stage.hidden { display: none; }

.pack-envelope-wrapper {
  position: relative; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}

.pack-envelope {
  width: 185px; height: 258px;
  background: linear-gradient(145deg, #1a2a6c, #b21f1f, #fdbb2d);
  border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem;
  box-shadow:
    0 0 60px rgba(245,200,66,0.28),
    0 0 120px rgba(26,79,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transform-style: preserve-3d;
  animation: packHover 3s ease-in-out infinite;
  position: relative; overflow: hidden;
  user-select: none;
}
.pack-envelope-shine {
  position: absolute; inset: 0; border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 45%);
  pointer-events: none;
}
.pack-tap-hint {
  font-size: 0.52rem; font-weight: 700; letter-spacing: 0.25em;
  color: rgba(255,255,255,0.45); text-transform: uppercase; margin-top: 0.2rem;
}

.pack-envelope.pack-appear { animation: packAppear 0.55s cubic-bezier(0.34,1.3,0.64,1), packHover 3s ease-in-out 0.55s infinite; }
.pack-envelope.pack-open   { animation: packOpenAnim 0.65s cubic-bezier(0.4,0,1,1) forwards; }

@keyframes packAppear {
  0%   { transform: scale(0.2) rotateY(180deg); opacity: 0; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}
@keyframes packHover {
  0%, 100% { transform: rotateY(-10deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(10deg) rotateX(-4deg) translateY(-10px); }
}
@keyframes packOpenAnim {
  0%   { transform: scale(1) rotateY(0); opacity: 1; }
  40%  { transform: scale(1.18) rotateY(25deg); }
  100% { transform: scale(0.1) rotateY(200deg) translateY(-80px); opacity: 0; }
}

/* Auras del sobre */
.pack-aura {
  position: absolute; border-radius: 50%;
  pointer-events: none;
}
.pack-aura-1 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(245,200,66,0.1) 0%, transparent 70%);
  animation: auraBreath 2.2s ease-in-out infinite;
}
.pack-aura-2 {
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(26,79,255,0.12) 0%, transparent 70%);
  animation: auraBreath 1.8s ease-in-out infinite reverse;
}
@keyframes auraBreath {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.35); opacity: 1; }
}

/* ================================================================
   CARDS GRID REVEAL
================================================================ */
.cards-area {
  display: flex; flex-direction: column; align-items: center;
  gap: 1.25rem; width: 100%;
}
.cards-area.hidden { display: none; }

.reveal-hint {
  font-size: 0.82rem; font-weight: 600; color: var(--muted);
  letter-spacing: 0.12em;
  display: flex; align-items: center; gap: 0.5rem;
}
.hint-pulse { color: var(--gold); animation: hintPulse 1.4s ease-in-out infinite; }
@keyframes hintPulse { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1); } }

.cards-grid {
  display: flex; flex-wrap: wrap;
  gap: 0.85rem; justify-content: center;
  max-width: 820px;
}

.reveal-all-btn {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.55rem 1.4rem;
  font-size: 0.82rem;
}

/* ── Resumen de rarezas post-reveal ── */
.continue-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  animation: fadeInUp 0.4s cubic-bezier(0.34,1.2,0.64,1) both;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pack-summary {
  display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center;
}
.summary-pill {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.2rem 0.65rem; border-radius: 20px;
  border: 1px solid; background: rgba(0,0,0,0.3);
}

.btn-continue { padding: 0.85rem 2rem; font-size: 0.95rem; }

/* ================================================================
   FLIP CARD
================================================================ */
.card-slot {
  width: 130px; height: 185px;
  perspective: 650px; cursor: pointer; flex-shrink: 0;
  transition: filter var(--transition);
}
.card-slot:hover:not(.face-up) { filter: brightness(1.15); }

@media (min-width: 640px) {
  .card-slot { width: 152px; height: 214px; }
}

.card-inner {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
  transform: rotateY(180deg);
  transition: transform 0.68s cubic-bezier(0.4,0,0.2,1);
  will-change: transform;
}
.card-slot.face-up .card-inner { transform: rotateY(0deg); }

.card-back-face, .card-front-face {
  position: absolute; inset: 0; border-radius: 13px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}

.card-back-face {
  background: linear-gradient(145deg, #1a2a6c 0%, #0d1445 40%, #b21f1f 100%);
  border: 2px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
  transform: rotateY(180deg);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
  overflow: hidden;
}
.card-back-pattern {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px,
    transparent 1px, transparent 8px
  );
}
.card-back-logo {
  font-family: var(--font-d); font-size: 2.1rem;
  color: rgba(255,255,255,0.65); position: relative;
}
.card-back-sub {
  font-size: 0.42rem; font-weight: 700; letter-spacing: 0.4em;
  color: rgba(255,255,255,0.3); position: relative;
}

.card-front-face {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 13px;
}

/* ── Rarezas ── */
.card-front-face.rarity-C    { border: 2px solid var(--c-color);    background: linear-gradient(160deg, #1a1a2e, #0f0f1a); box-shadow: 0 4px 12px rgba(0,0,0,0.5); }
.card-front-face.rarity-D    { border: 2px solid var(--d-color);    background: linear-gradient(160deg, #0a1e2e, #070d14); box-shadow: 0 4px 18px rgba(125,211,252,0.2); }
.card-front-face.rarity-R    { border: 2px solid var(--r-color);    background: linear-gradient(160deg, #0d2e20, #0a0f15); box-shadow: 0 4px 25px rgba(52,211,153,0.3); }
.card-front-face.rarity-CP   { border: 2px solid var(--cp-color);   background: linear-gradient(160deg, #071e2e, #050a0f); box-shadow: 0 4px 24px rgba(34,211,238,0.3);  animation: srShimmer 3s linear infinite; }
.card-front-face.rarity-SR   { border: 2px solid var(--sr-color);   background: linear-gradient(160deg, #1a0d2e, #0d0a1a); box-shadow: 0 4px 30px rgba(192,132,252,0.35); animation: srShimmer 3s linear infinite; }
.card-front-face.rarity-RP   { border: 2px solid var(--rp-color);   background: linear-gradient(160deg, #0d1b3e, #0a0a1a); box-shadow: 0 4px 28px rgba(96,165,250,0.35);  animation: srShimmer 3s linear infinite; }
.card-front-face.rarity-SRP  { border: 2px solid var(--srp-color);  background: linear-gradient(160deg, #1e0d2e, #0a0510); box-shadow: 0 4px 35px rgba(232,121,249,0.4);  animation: srShimmer 2.5s linear infinite; }
.card-front-face.rarity-SRCP { border: 2px solid var(--srcp-color); background: linear-gradient(160deg, #2e0f00, #0f0500); box-shadow: 0 4px 35px rgba(251,146,60,0.4);   animation: srcpGlow 2s ease-in-out infinite; }
.card-front-face.rarity-MR   { border: 2px solid var(--mr-color);   background: linear-gradient(160deg, #0a0a14, #05050f); box-shadow: 0 4px 50px rgba(255,255,255,0.5);  animation: mrGlow 1.5s ease-in-out infinite; }
.card-front-face.rarity-SEC  { border: 2px solid var(--sec-color);  background: linear-gradient(160deg, #1a1500, #0d0c00); box-shadow: 0 4px 40px rgba(251,191,36,0.55);  animation: secGlow 2s ease-in-out infinite; }
.card-front-face.rarity-PR   { border: 2px solid var(--pr-color);   background: linear-gradient(160deg, #071a14, #030f09); box-shadow: 0 4px 45px rgba(110,231,183,0.5);  animation: secGlow 1.8s ease-in-out infinite; }
.card-front-face.rarity-MRCP { border: 2px solid var(--mrcp-color); background: linear-gradient(160deg, #1a0514, #0a0208); box-shadow: 0 4px 55px rgba(244,114,182,0.6);  animation: mrGlow 1.2s ease-in-out infinite; }
.card-front-face.rarity-MRP  { border: 2px solid var(--mrp-color);  background: linear-gradient(160deg, #0a0a14, #040408); box-shadow: 0 4px 60px rgba(226,232,240,0.7);  animation: mrpGlow 1s ease-in-out infinite; }

/* Clases de brillo post-reveal */
.glow-mrp  { box-shadow: 0 0 40px rgba(226,232,240,0.9), 0 0 80px rgba(255,255,255,0.4) !important; }
.glow-mrcp { box-shadow: 0 0 40px rgba(244,114,182,0.9), 0 0 80px rgba(244,114,182,0.3) !important; }
.glow-mr   { box-shadow: 0 0 40px rgba(255,255,255,0.9), 0 0 80px rgba(255,255,255,0.35) !important; }
.glow-pr   { box-shadow: 0 0 35px rgba(110,231,183,0.8), 0 0 70px rgba(110,231,183,0.3) !important; }
.glow-sec  { box-shadow: 0 0 35px rgba(251,191,36,0.9), 0 0 70px rgba(251,191,36,0.35) !important; }

@keyframes srShimmer  { 0%, 100% { border-opacity: 1; } 50% { border-color: #d8a8ff; } }
@keyframes srcpGlow   { 0%, 100% { box-shadow: 0 4px 35px rgba(251,146,60,.4); }  50% { box-shadow: 0 4px 55px rgba(251,146,60,.75), 0 0 80px rgba(251,146,60,.3); } }
@keyframes mrGlow     { 0%, 100% { box-shadow: 0 4px 50px rgba(255,255,255,.5); } 50% { box-shadow: 0 4px 80px rgba(255,255,255,.9), 0 0 120px rgba(255,255,255,.4); } }
@keyframes mrpGlow    { 0%, 100% { box-shadow: 0 4px 60px rgba(226,232,240,.7); border-color: #cbd5e1; } 50% { box-shadow: 0 8px 90px rgba(255,255,255,1); border-color: #fff; } }
@keyframes secGlow    { 0%, 100% { box-shadow: 0 4px 40px rgba(251,191,36,.5); } 50% { box-shadow: 0 4px 65px rgba(251,191,36,.85), 0 0 100px rgba(251,191,36,.35); } }

/* Efectos holográficos */
.card-holo {
  position: absolute; inset: 0; border-radius: 11px;
  background: linear-gradient(135deg,
    transparent 25%,
    rgba(255,255,255,0.05) 40%,
    rgba(255,255,255,0.1) 50%,
    rgba(255,255,255,0.05) 60%,
    transparent 75%
  );
  background-size: 200% 200%;
  animation: holoSlide 3.5s linear infinite;
  pointer-events: none; z-index: 2;
}
.card-holo-2 {
  position: absolute; inset: 0; border-radius: 11px;
  background: linear-gradient(225deg,
    transparent 30%,
    rgba(100,150,255,0.04) 45%,
    rgba(255,100,200,0.04) 55%,
    transparent 70%
  );
  background-size: 300% 300%;
  animation: holoSlide 5s linear infinite reverse;
  pointer-events: none; z-index: 2;
}
@keyframes holoSlide {
  0%   { background-position: 200% 200%; }
  100% { background-position: -200% -200%; }
}

.card-image-wrapper {
  flex: 1; overflow: hidden; position: relative;
  background: rgba(0,0,0,0.3);
  display: flex; align-items: center; justify-content: center;
}
.card-image-wrapper img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.35s ease;
}
.card-slot:hover .card-image-wrapper img { transform: scale(1.06); }
.card-image-wrapper::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}

.card-rarity-label {
  position: absolute; top: 7px; left: 7px;
  font-size: 0.44rem; font-weight: 800; letter-spacing: 0.15em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.9); z-index: 3;
  display: flex; align-items: center; gap: 0.2rem;
}

.card-info-bar {
  position: relative; z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.6));
  padding: 0.35rem 0.45rem 0.3rem;
}
.card-name {
  font-family: var(--font-u); font-size: 0.6rem; font-weight: 700; line-height: 1.2;
  color: #f0f0ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-stars {
  font-size: 0.48rem; letter-spacing: 0.04em; margin-top: 0.1rem;
}

.card-img-fallback {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--muted); background: rgba(0,0,0,0.3);
}

/* ================================================================
   PROBABILIDADES
================================================================ */
.prob-section {
  padding: 1.4rem 1.6rem;
  max-width: 540px; width: 100%;
}

.prob-section-header {
  display: flex; align-items: center; gap: 0.85rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--border);
}
.prob-section-icon { font-size: 1.4rem; }
.prob-section-title {
  font-family: var(--font-d); font-size: 0.78rem; color: var(--gold);
  letter-spacing: 0.1em; margin-bottom: 0.15rem;
}
.prob-section-sub { font-size: 0.66rem; color: var(--muted); }

.prob-table { display: flex; flex-direction: column; gap: 0; }

.prob-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.5rem; align-items: center;
  font-size: 0.74rem; padding: 0.38rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background var(--transition);
}
.prob-row:hover { background: rgba(255,255,255,0.02); border-radius: 6px; }
.prob-row:last-child { border-bottom: none; }

.prob-row-header {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--muted); text-transform: uppercase;
  padding-bottom: 0.5rem; margin-bottom: 0.1rem;
}
.prob-row-header:hover { background: none; }

.prob-row-high   { background: rgba(255,255,255,0.015); }
.prob-row-ultra  { background: rgba(245,200,66,0.025); }

.prob-rarity {
  display: flex; align-items: center; gap: 0.5rem; font-weight: 600;
}
.prob-rarity em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 0.68rem; }

.prob-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}
.prob-dot-shine { animation: dotShine 2s ease-in-out infinite; }
@keyframes dotShine {
  0%, 100% { box-shadow: 0 0 6px #e2e8f0, 0 0 12px #e2e8f0; }
  50% { box-shadow: 0 0 10px #fff, 0 0 20px #fff; }
}

.prob-val { font-weight: 700; font-size: 0.76rem; text-align: right; white-space: nowrap; }
.prob-freq { font-size: 0.66rem; color: var(--muted); text-align: right; white-space: nowrap; }
.muted { color: var(--muted); }

.prob-footer {
  margin-top: 0.9rem; padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.63rem; color: var(--muted);
  text-align: center; line-height: 1.6;
}

/* ================================================================
   COLLECTION PAGE
================================================================ */
.collection-page { padding: 1.5rem; max-width: 1200px; margin: 0 auto; width: 100%; }

.collection-header { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }

.collection-title-row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem;
}
.page-title { font-family: var(--font-d); font-size: 1.4rem; color: var(--gold); letter-spacing: 0.15em; }

#collection-stats { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.stat-item {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.5rem 0.9rem;
  transition: border-color var(--transition);
}
.stat-item:hover { border-color: rgba(245,200,66,0.2); }
.stat-num { font-family: var(--font-d); font-size: 1.2rem; color: var(--gold); line-height: 1; }
.stat-label { font-size: 0.6rem; font-weight: 700; color: var(--muted); letter-spacing: 0.1em; }

.collection-filters { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-btn {
  padding: 0.35rem 0.8rem; border-radius: 20px;
  border: 1px solid var(--border); background: rgba(255,255,255,0.04);
  color: var(--muted); font-family: var(--font-u); font-size: 0.7rem; font-weight: 600;
  cursor: pointer; transition: var(--transition);
}
.filter-btn:hover { background: rgba(255,255,255,0.08); color: var(--text); }
.filter-btn.active {
  background: rgba(255,255,255,0.1); color: var(--text);
  border-color: rgba(255,255,255,0.25);
}

.collection-search { display: flex; gap: 0.5rem; align-items: center; }
.search-input {
  flex: 1; padding: 0.5rem 1rem; border-radius: 8px;
  background: rgba(255,255,255,0.06); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-u); font-size: 0.85rem;
  outline: none; transition: var(--transition);
}
.search-input:focus { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); }
.search-input::placeholder { color: var(--muted); }

#collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}

.card-thumb {
  border-radius: var(--radius-sm); overflow: hidden; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  aspect-ratio: 2/3;
}
.card-thumb:hover { transform: translateY(-4px); }
.card-thumb.owned .card-thumb-inner { opacity: 1; }
.card-thumb.missing .card-thumb-inner { opacity: 0.38; filter: grayscale(1); }

.card-thumb-inner {
  position: relative; width: 100%; height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden;
}

.card-rarity-stripe { height: 3px; width: 100%; }

.card-thumb img { width: 100%; flex: 1; object-fit: cover; min-height: 0; }
.card-missing-img {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--muted);
}

.card-thumb-info { padding: 0.3rem 0.4rem; background: rgba(0,0,0,0.6); }
.card-thumb-name { font-size: 0.55rem; font-weight: 700; line-height: 1.2; margin-bottom: 0.1rem; }
.card-thumb-rarity { font-size: 0.5rem; font-weight: 700; }

.card-thumb-amount {
  position: absolute; top: 5px; right: 5px;
  min-width: 20px; height: 20px;
  background: rgba(204,17,34,0.88);
  color: white; font-size: 0.6rem; font-weight: 800;
  padding: 0 5px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 5px rgba(0,0,0,0.5);
  letter-spacing: 0.02em; z-index: 4; line-height: 1;
}
.card-thumb-amount.amount-zero {
  background: rgba(90,90,120,0.88); color: #aaa;
}

.sec-badge {
  position: absolute; top: 18px; left: 4px;
  background: var(--gold); color: #1a1000;
  font-size: 0.45rem; font-weight: 700; letter-spacing: 0.1em;
  padding: 2px 4px; border-radius: 4px;
  animation: secGlow 2s ease-in-out infinite;
}

/* Rarity borders en colección */
.rarity-C    .card-thumb-inner { border-color: var(--c-color); }
.rarity-D    .card-thumb-inner { border-color: var(--d-color);    box-shadow: 0 0 8px rgba(125,211,252,0.15); }
.rarity-R    .card-thumb-inner { border-color: var(--r-color);    box-shadow: 0 0 12px rgba(52,211,153,0.22); }
.rarity-CP   .card-thumb-inner { border-color: var(--cp-color);   box-shadow: 0 0 12px rgba(34,211,238,0.22); }
.rarity-SR   .card-thumb-inner { border-color: var(--sr-color);   box-shadow: 0 0 15px rgba(192,132,252,0.28); }
.rarity-RP   .card-thumb-inner { border-color: var(--rp-color);   box-shadow: 0 0 14px rgba(96,165,250,0.22); }
.rarity-SRP  .card-thumb-inner { border-color: var(--srp-color);  box-shadow: 0 0 18px rgba(232,121,249,0.3); }
.rarity-SRCP .card-thumb-inner { border-color: var(--srcp-color); box-shadow: 0 0 18px rgba(251,146,60,0.3); }
.rarity-MR   .card-thumb-inner { border-color: var(--mr-color);   box-shadow: 0 0 22px rgba(255,255,255,0.42); }
.rarity-SEC  .card-thumb-inner { border-color: var(--sec-color);  box-shadow: 0 0 22px rgba(251,191,36,0.42); }
.rarity-PR   .card-thumb-inner { border-color: var(--pr-color);   box-shadow: 0 0 22px rgba(110,231,183,0.42); }
.rarity-MRCP .card-thumb-inner { border-color: var(--mrcp-color); box-shadow: 0 0 25px rgba(244,114,182,0.52); }
.rarity-MRP  .card-thumb-inner { border-color: var(--mrp-color);  box-shadow: 0 0 28px rgba(226,232,240,0.62); }

/* ================================================================
   MODAL
================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.82); backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}
.modal-box {
  background: var(--bg-2); border-radius: var(--radius);
  padding: 1.5rem; max-width: 320px; width: 100%;
  position: relative;
  animation: modalIn 0.35s cubic-bezier(0.34,1.4,0.64,1);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
@keyframes modalIn { 0% { transform: scale(0.6) translateY(20px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

.rarity-border-C    { border-color: var(--c-color)    !important; }
.rarity-border-D    { border-color: var(--d-color)    !important; box-shadow: 0 0 30px rgba(125,211,252,0.28); }
.rarity-border-R    { border-color: var(--r-color)    !important; box-shadow: 0 0 35px rgba(52,211,153,0.3); }
.rarity-border-CP   { border-color: var(--cp-color)   !important; box-shadow: 0 0 35px rgba(34,211,238,0.35); }
.rarity-border-SR   { border-color: var(--sr-color)   !important; box-shadow: 0 0 45px rgba(192,132,252,0.4); }
.rarity-border-RP   { border-color: var(--rp-color)   !important; box-shadow: 0 0 40px rgba(96,165,250,0.38); }
.rarity-border-SRP  { border-color: var(--srp-color)  !important; box-shadow: 0 0 48px rgba(232,121,249,0.48); }
.rarity-border-SRCP { border-color: var(--srcp-color) !important; box-shadow: 0 0 48px rgba(251,146,60,0.48); }
.rarity-border-MR   { border-color: var(--mr-color)   !important; box-shadow: 0 0 60px rgba(255,255,255,0.58); }
.rarity-border-SEC  { border-color: var(--sec-color)  !important; box-shadow: 0 0 60px rgba(251,191,36,0.58); }
.rarity-border-PR   { border-color: var(--pr-color)   !important; box-shadow: 0 0 60px rgba(110,231,183,0.58); }
.rarity-border-MRCP { border-color: var(--mrcp-color) !important; box-shadow: 0 0 70px rgba(244,114,182,0.68); }
.rarity-border-MRP  { border-color: var(--mrp-color)  !important; box-shadow: 0 0 75px rgba(226,232,240,0.72); }

.modal-close-btn {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: rgba(255,255,255,0.08); border: 1px solid var(--border);
  border-radius: 6px; color: var(--muted); font-size: 0.8rem;
  cursor: pointer; padding: 0.3rem 0.5rem;
  transition: background var(--transition), color var(--transition);
}
.modal-close-btn:hover { background: rgba(255,255,255,0.14); color: var(--text); }
.modal-rarity-label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.15em; margin-bottom: 0.75rem; }
.modal-card-img { width: 100%; border-radius: 9px; margin-bottom: 0.75rem; }
.modal-card-missing { height: 200px; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 1.2rem; }
.modal-card-name { font-family: var(--font-u); font-size: 1.1rem; font-weight: 700; margin-bottom: 0.25rem; }
.modal-card-id, .modal-card-count, .modal-card-obtained { font-size: 0.75rem; color: var(--muted); }

/* ================================================================
   TRADES
================================================================ */
.trades-page { padding: 1.5rem; max-width: 900px; margin: 0 auto; width: 100%; }

.trade-section { margin-bottom: 2rem; }
.trade-section-title { font-family: var(--font-d); font-size: 1rem; color: var(--gold); margin-bottom: 1rem; letter-spacing: 0.1em; }

.trade-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; margin-bottom: 0.75rem;
  transition: border-color var(--transition);
}
.trade-card:hover { border-color: rgba(255,255,255,0.12); }

.trade-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem; }
.trade-status { font-size: 0.8rem; font-weight: 700; }
.trade-date { font-size: 0.7rem; color: var(--muted); }

.trade-cards-visual { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.trade-card-mini {
  flex: 1; border: 1px solid; border-radius: 8px; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.3rem;
  background: rgba(0,0,0,0.3);
}
.trade-card-mini img { width: 60px; height: 80px; object-fit: cover; border-radius: 4px; }
.trade-card-mini span { font-size: 0.6rem; font-weight: 700; text-align: center; }
.trade-card-mini small { font-size: 0.55rem; color: var(--muted); }
.trade-arrow { font-size: 1.5rem; color: var(--muted); flex-shrink: 0; }

.trade-users { font-size: 0.7rem; color: var(--muted); margin-bottom: 0.5rem; }

.trade-actions { display: flex; gap: 0.5rem; }
.btn-accept {
  padding: 0.4rem 1rem; background: rgba(52,211,153,0.12); border: 1px solid var(--r-color);
  border-radius: 8px; color: var(--r-color);
  font-family: var(--font-u); font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.btn-accept:hover { background: rgba(52,211,153,0.22); }
.btn-reject {
  padding: 0.4rem 1rem; background: rgba(248,113,113,0.08); border: 1px solid #f87171;
  border-radius: 8px; color: #f87171;
  font-family: var(--font-u); font-size: 0.8rem; font-weight: 700;
  cursor: pointer; transition: var(--transition);
}
.btn-reject:hover { background: rgba(248,113,113,0.18); }

.new-trade-form {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 2rem;
}
.form-title { font-family: var(--font-d); font-size: 1rem; color: var(--gold); margin-bottom: 1rem; }
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.75rem; font-weight: 700; color: var(--muted); margin-bottom: 0.35rem; letter-spacing: 0.08em; }
.form-input {
  width: 100%; padding: 0.6rem 1rem; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-u); font-size: 0.85rem; outline: none;
  transition: var(--transition);
}
.form-input:focus { border-color: rgba(255,255,255,0.2); background: rgba(255,255,255,0.08); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.trade-flow-info {
  background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.22);
  border-radius: 8px; padding: .6rem .85rem;
  font-size: .75rem; color: #93c5fd; margin-bottom: 1rem; line-height: 1.5;
}
.trade-confirm-status { display: flex; gap: 1rem; margin: .5rem 0; font-size: .7rem; }
.trade-confirm-status .confirmed   { color: #34d399; font-weight: 700; }
.trade-confirm-status .pending-dot { color: #6b7280; }

.btn-gold-action {
  background: linear-gradient(135deg, #f59e0b, #d97706); color: #000;
  border: none; padding: .55rem 1.1rem; border-radius: 8px;
  font-weight: 700; font-size: .82rem; cursor: pointer;
  letter-spacing: .02em; transition: opacity .2s, transform .1s;
}
.btn-gold-action:hover   { opacity: .88; transform: translateY(-1px); }
.btn-gold-action:active  { transform: translateY(0); }
.btn-gold-action:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ============================================================
   Mejora visual de los intercambios ("Mis intercambios activos")
   ============================================================ */
.trade-section-title { position: relative; padding-bottom: .5rem; }
.trade-section-title::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 44px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.trade-card {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-radius: 16px; padding: 1rem 1rem 1rem 1.15rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.25);
  transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.trade-card::before {                       /* franja de estado a la izquierda */
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--muted);
}
.trade-card:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,0.16);
  box-shadow: 0 10px 28px rgba(0,0,0,0.38);
}
.trade-card.status-pending::before   { background: #fbbf24; }
.trade-card.status-accepted::before  { background: #60a5fa; }
.trade-card.status-completed::before { background: #34d399; }
.trade-card.status-rejected::before  { background: #f87171; }
.trade-card.status-cancelled::before { background: #9ca3af; }

.trade-cards-visual {
  gap: .75rem;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px; padding: .7rem;
}
.trade-card-mini {
  border-width: 1.5px; border-radius: 10px; padding: .45rem .35rem;
  background: rgba(0,0,0,0.4);
  transition: transform var(--transition);
}
.trade-card-mini:hover { transform: translateY(-2px); }
.trade-card-mini img {
  width: 64px; height: 88px; border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
.trade-card-mini span { font-size: .66rem; line-height: 1.2; }
.trade-card-mini small {
  font-size: .58rem; font-weight: 700; color: var(--text);
  background: rgba(255,255,255,0.08); padding: .04rem .4rem; border-radius: 20px;
}
.trade-arrow {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: var(--gold);
  background: rgba(245,200,66,0.12); border: 1px solid rgba(245,200,66,0.3);
  border-radius: 50%; box-shadow: 0 0 10px rgba(245,200,66,0.15);
}

.trade-users {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; color: var(--text); opacity: .9;
  background: rgba(255,255,255,0.04); padding: .25rem .65rem;
  border-radius: 20px; margin-bottom: .6rem;
}

.trade-confirm-status {
  flex-direction: column; gap: .3rem; margin: .6rem 0;
  background: rgba(255,255,255,0.025); border-radius: 10px; padding: .55rem .7rem;
}
.trade-confirm-status span { display: flex; align-items: center; gap: .4rem; }

.trade-actions { margin-top: .75rem; }
.btn-accept, .btn-reject { border-radius: 10px; transition: background var(--transition), transform var(--transition); }
.btn-accept:hover, .btn-reject:hover { transform: translateY(-1px); }
.btn-gold-action { border-radius: 10px; }

/* ================================================================
   ACHIEVEMENTS
================================================================ */
.achievements-page { padding: 1.5rem; max-width: 1000px; margin: 0 auto; width: 100%; }

.ach-progress-header {
  background: linear-gradient(135deg, rgba(13,13,36,0.97), rgba(3,3,12,0.99));
  border: 1px solid rgba(245,200,66,0.2); border-radius: 16px;
  padding: 1.5rem 1.75rem; margin-bottom: 2rem;
  position: relative; overflow: hidden;
}
.ach-progress-header::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.ach-progress-nums { display: flex; align-items: baseline; gap: .35rem; margin-bottom: .75rem; }
.ach-progress-done  { font-family: var(--font-d); font-size: 2.5rem; color: var(--gold); }
.ach-progress-sep   { font-size: 1.5rem; color: var(--muted); }
.ach-progress-total { font-family: var(--font-d); font-size: 1.5rem; color: var(--muted); }
.ach-progress-label { font-size: .8rem; color: var(--muted); margin-left: .5rem; }
.ach-progress-bar-wrap {
  height: 6px; background: rgba(255,255,255,0.07);
  border-radius: 6px; overflow: hidden; margin-bottom: .5rem;
}
.ach-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  border-radius: 6px;
  transition: width 1s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 10px rgba(245,200,66,0.4);
}
.ach-progress-pct { font-size: .78rem; color: var(--gold); font-weight: 700; }

.ach-category { margin-bottom: 2.5rem; }
.ach-cat-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border);
}
.ach-cat-label  { font-family: var(--font-d); font-size: .85rem; letter-spacing: .04em; }
.ach-cat-count  { font-size: .75rem; color: var(--muted); }

.ach-cat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem;
}

.achievement-card {
  display: flex; align-items: flex-start; gap: .9rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 1rem; position: relative; overflow: hidden;
  transition: transform .2s, box-shadow .2s, border-color .2s; cursor: default;
}
.ach-card-glow {
  position: absolute; inset: 0;
  background: radial-gradient(circle at top left, var(--glow, transparent), transparent 60%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.achievement-card:hover .ach-card-glow { opacity: .08; }
.achievement-card.unlocked {
  border-color: rgba(245,200,66,0.25);
  background: linear-gradient(135deg, rgba(245,200,66,0.05) 0%, var(--bg-card) 50%);
}
.achievement-card.unlocked:hover {
  transform: translateY(-2px); box-shadow: 0 6px 24px rgba(245,200,66,0.12);
  border-color: rgba(245,200,66,0.4);
}
.achievement-card.locked { opacity: .45; }
.achievement-card.secret.locked { opacity: .35; border-style: dashed; }
.achievement-card.unlocked.secret { border-color: rgba(159,122,234,0.4); }

.ach-card-icon {
  font-size: 1.8rem; flex-shrink: 0; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border);
  transition: transform .3s;
}
.achievement-card.unlocked .ach-card-icon { border-color: rgba(245,200,66,0.2); }
.achievement-card:hover .ach-card-icon { transform: scale(1.1) rotate(-3deg); }
.icon-glow { box-shadow: 0 0 12px rgba(245,200,66,0.22); }

.ach-card-body  { flex: 1; min-width: 0; }
.ach-card-title { font-weight: 700; font-size: .85rem; margin-bottom: .2rem; line-height: 1.3; }
.ach-card-desc  { font-size: .72rem; color: var(--muted); margin-bottom: .35rem; line-height: 1.4; }
.ach-card-reward { font-size: .68rem; color: var(--gold); font-weight: 700; }
.ach-card-check { font-size: .68rem; color: var(--r-color); font-weight: 700; margin-top: .25rem; }
.ach-secret-hint { font-size: .65rem; color: #9ca3af; font-style: italic; margin-top: .2rem; }

.referral-section {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; margin-bottom: 2rem; margin-top: 1rem;
}
.referral-section h3 { font-family: var(--font-d); color: var(--gold); font-size: 1rem; margin-bottom: 0.5rem; }
.referral-section p  { font-size: 0.8rem; color: var(--muted); margin-bottom: 0.75rem; }
.referral-link-box { display: flex; gap: 0.5rem; align-items: center; }
.referral-link-box input {
  flex: 1; padding: 0.5rem 0.75rem; border-radius: 8px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text); font-size: 0.75rem;
}

.quiz-box {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; max-width: 600px; margin: 0 auto;
}
.quiz-progress {
  font-size: .72rem; color: var(--muted); margin-bottom: 1rem;
  text-transform: uppercase; letter-spacing: .1em;
  display: flex; flex-direction: column; gap: .4rem;
}
.quiz-progress-bar {
  height: 3px; background: var(--gold); border-radius: 3px;
  transition: width .4s ease; box-shadow: 0 0 6px rgba(245,200,66,0.4);
}
.quiz-question { font-size: 1.05rem; font-weight: 700; margin-bottom: 1.25rem; line-height: 1.45; }
.quiz-options { display: flex; flex-direction: column; gap: 0.5rem; }
.quiz-option {
  padding: .75rem 1rem; border-radius: 10px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-u); font-size: .9rem; font-weight: 600;
  cursor: pointer; text-align: left; transition: var(--transition);
}
.quiz-option:hover:not(:disabled) { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); }
.quiz-option.correct { background: rgba(52,211,153,0.15); border-color: var(--r-color); color: var(--r-color); }
.quiz-option.wrong   { background: rgba(248,113,113,0.12); border-color: #f87171; color: #f87171; }

.quiz-result {
  text-align: center; padding: 2rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  max-width: 420px; margin: 0 auto;
}
.quiz-result-icon  { font-size: 3.5rem; margin-bottom: .5rem; }
.quiz-result-score { font-family: var(--font-d); font-size: 2.5rem; color: var(--gold); margin-bottom: .5rem; }
.quiz-result-msg   { font-size: .9rem; color: var(--muted); margin: .5rem 0 .75rem; }
.quiz-reward       { font-size: .9rem; font-weight: 700; color: var(--gold); }

/* ================================================================
   AUTH PAGES
================================================================ */
.auth-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse 60% 40% at 50% 20%, rgba(26,79,255,0.1) 0%, transparent 70%),
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(204,17,34,0.08) 0%, transparent 60%),
    var(--bg);
}
.auth-box {
  width: 100%; max-width: 420px;
  background: var(--bg-glass); border: 1px solid var(--border); border-radius: 20px;
  padding: 2.5rem; backdrop-filter: blur(16px);
}
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-logo-title { font-family: var(--font-d); font-size: 2rem; font-weight: 900; }
.auth-logo-title span {
  background: linear-gradient(135deg, #fff, var(--gold));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.auth-subtitle { font-size: 0.75rem; color: var(--muted); letter-spacing: 0.2em; margin-top: 0.25rem; }
.auth-title { font-family: var(--font-d); font-size: 1.2rem; color: var(--gold); margin-bottom: 1.5rem; text-align: center; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.form-error {
  color: #f87171; font-size: 0.8rem; font-weight: 600; text-align: center;
  padding: 0.5rem; background: rgba(248,113,113,0.1); border-radius: 8px;
}
.auth-footer { text-align: center; margin-top: 1.5rem; font-size: 0.8rem; color: var(--muted); }
.auth-footer a { color: var(--gold); text-decoration: none; font-weight: 700; }
.auth-footer a:hover { text-decoration: underline; }

/* ================================================================
   TOAST MEJORADO
================================================================ */
.toast {
  position: fixed; bottom: 1.5rem; left: 50%;
  transform: translateX(-50%) translateY(120px);
  z-index: 9999;
  padding: 0.65rem 1.4rem;
  border-radius: 12px;
  font-family: var(--font-u); font-size: 0.84rem; font-weight: 700;
  backdrop-filter: blur(16px);
  display: flex; align-items: center; gap: 0.6rem;
  transition: transform 0.35s cubic-bezier(0.34,1.4,0.64,1), opacity 0.35s;
  pointer-events: none; white-space: nowrap;
  box-shadow: var(--shadow-lg);
  opacity: 0;
}
.toast.show   { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.hide   { transform: translateX(-50%) translateY(80px); opacity: 0; }
.toast-success { background: rgba(52,211,153,0.92); color: #052010; border: 1px solid rgba(52,211,153,0.5); }
.toast-error   { background: rgba(204,17,34,0.92);  color: #fff; border: 1px solid rgba(204,17,34,0.5); }
.toast-info    { background: rgba(26,79,255,0.92);  color: #fff; border: 1px solid rgba(26,79,255,0.4); }
.toast-icon {
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 900; flex-shrink: 0;
}

/* ================================================================
   ACHIEVEMENT POPUP
================================================================ */
.achievement-popup {
  position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9998;
  transform: translateX(120%);
  transition: transform 0.5s cubic-bezier(0.34,1.4,0.64,1);
  filter: drop-shadow(0 8px 32px rgba(245,200,66,0.3));
}
.achievement-popup.show { transform: translateX(0); }
.achievement-popup-inner {
  display: flex; align-items: center; gap: 1rem;
  background: linear-gradient(135deg, #1a1300, #09090f);
  border: 1px solid var(--gold); border-radius: 16px;
  padding: 1.1rem 1.35rem; max-width: 310px;
  position: relative; overflow: hidden;
}
.ach-shine {
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(245,200,66,0.07) 50%, transparent 70%);
  animation: shine-sweep 2.2s ease-in-out infinite;
}
@keyframes shine-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.ach-icon { font-size: 2.2rem; flex-shrink: 0; }
.ach-text { flex: 1; }
.ach-unlocked-label {
  font-size: .58rem; font-weight: 700; color: var(--gold);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: .2rem;
}
.ach-name   { font-size: .92rem; font-weight: 700; margin-bottom: .12rem; }
.ach-desc   { font-size: .7rem; color: var(--muted); }
.ach-reward { font-size: .75rem; font-weight: 700; color: var(--gold); margin-top: .2rem; }
.ach-secret-label { font-size: .65rem; color: #a78bfa; margin-top: .2rem; }

/* ================================================================
   LOADING / EMPTY STATES
================================================================ */
.loading-spinner {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; padding: 3rem; grid-column: 1 / -1; color: var(--muted);
}
.spinner {
  width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.08);
  border-top-color: var(--gold);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  text-align: center; padding: 3rem; color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  grid-column: 1 / -1;
}
.empty-icon { font-size: 3rem; margin-bottom: 0.5rem; }

/* ================================================================
   EFECTOS GLOBALES DE PARTÍCULAS Y FLASH
================================================================ */
@keyframes particleFly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0); opacity: 0; }
}
@keyframes secFlash {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* Spinner inline en botones */
.spinner-inline {
  display: inline-block; width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff;
  animation: spin .7s linear infinite;
}

/* ================================================================
   CHAT
================================================================ */
.chat-page {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: 1fr;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  height: calc(100vh - 62px);
  overflow: hidden;
  box-sizing: border-box;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.chat-main {
  display: flex; flex-direction: column;
  min-height: 0;
  background: linear-gradient(160deg, rgba(13,13,36,0.97) 0%, rgba(3,3,12,0.99) 100%);
  border: 1px solid rgba(26,79,255,0.25); border-radius: 18px;
  overflow: hidden; position: relative;
  box-shadow: 0 0 0 1px rgba(26,79,255,0.1), 0 8px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
}
.chat-main::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
  background: linear-gradient(90deg, transparent, var(--blue), var(--gold), var(--blue), transparent);
  background-size: 200% 100%; animation: scan-line 4s linear infinite;
}
@keyframes scan-line { 0% { background-position: -100% 0; } 100% { background-position: 200% 0; } }

.chat-header {
  padding: 1rem 1.4rem; background: rgba(26,79,255,0.08);
  border-bottom: 1px solid rgba(26,79,255,0.2);
  display: flex; align-items: center; gap: 1rem; position: relative; z-index: 1;
}
.chat-header-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(26,79,255,0.4), rgba(26,79,255,0.1));
  border: 1px solid rgba(26,79,255,0.5);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0; box-shadow: 0 0 12px rgba(26,79,255,0.3);
}
.chat-header-info { flex: 1; min-width: 0; }
.chat-header-title { font-family: var(--font-d); font-size: .9rem; color: var(--gold); letter-spacing: .05em; display: block; }
.chat-header-sub { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: .5rem; margin-top: .15rem; }
.chat-online-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--r-color); box-shadow: 0 0 6px var(--r-color);
  animation: pulse-dot 2s ease-in-out infinite; flex-shrink: 0;
}
@keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } }
.chat-badge {
  background: rgba(26,79,255,0.2); border: 1px solid rgba(26,79,255,0.3);
  color: var(--blue); font-size: .65rem; padding: .1rem .5rem; border-radius: 20px;
  margin-left: auto; letter-spacing: .04em;
}

.chat-messages {
  flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem;
  display: flex; flex-direction: column; gap: .6rem;
  overflow-anchor: none;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(26,79,255,0.3); border-radius: 4px; }

.chat-date-sep { display: flex; align-items: center; gap: .75rem; margin: .5rem 0; }
.chat-date-sep span { font-size: .68rem; color: var(--muted); white-space: nowrap; letter-spacing: .06em; text-transform: uppercase; }
.chat-date-sep::before, .chat-date-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }

.chat-msg {
  display: flex; flex-direction: column; align-items: flex-start;
  max-width: 72%; gap: .2rem;
  animation: msg-in .25s cubic-bezier(0.34,1.4,0.64,1) both;
}
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-msg.chat-me { align-self: flex-end; align-items: flex-end; }

.chat-msg-meta { display: flex; align-items: center; gap: .4rem; padding: 0 .3rem; }
.chat-author { font-size: .72rem; font-weight: 700; color: var(--blue); letter-spacing: .02em; }
.chat-me .chat-author { color: var(--gold-dim); }
.chat-time { font-size: .63rem; color: var(--muted); }

.chat-bubble {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px 16px 16px 4px; padding: .65rem 1rem;
  font-size: .88rem; line-height: 1.5; color: var(--text);
  word-break: break-word; white-space: pre-wrap;
  position: relative; backdrop-filter: blur(4px); transition: border-color .2s;
}
.chat-bubble:hover { border-color: rgba(255,255,255,0.14); }
.chat-me .chat-bubble {
  background: linear-gradient(135deg, rgba(26,79,255,0.22), rgba(26,79,255,0.12));
  border-color: rgba(26,79,255,0.35); border-radius: 16px 16px 4px 16px;
  box-shadow: 0 2px 12px rgba(26,79,255,0.15);
}

.chat-trade-card {
  width: 100%; max-width: 320px;
  background: linear-gradient(135deg, rgba(245,200,66,0.08), rgba(245,200,66,0.03));
  border: 1px solid rgba(245,200,66,0.25); border-radius: 14px;
  padding: .9rem 1rem; position: relative; overflow: hidden;
  cursor: pointer; transition: all .2s;
}
.chat-trade-card::before { content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%; background: linear-gradient(180deg, var(--gold), transparent); }
.chat-trade-card:hover { border-color: rgba(245,200,66,0.5); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,200,66,0.1); }
.chat-trade-badge { font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: .35rem; margin-bottom: .45rem; }
.chat-trade-badge::after { content: ''; flex: 1; height: 1px; background: rgba(245,200,66,0.2); }
.chat-trade-cardname { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: .3rem; font-family: var(--font-u); }
.chat-trade-type { font-size: .78rem; color: var(--muted); margin-bottom: .65rem; }
.chat-trade-type.seeking { color: #60a5fa; }
.chat-trade-type.offering { color: var(--r-color); }
.chat-trade-action {
  display: inline-flex; align-items: center; gap: .35rem;
  background: rgba(245,200,66,0.12); border: 1px solid rgba(245,200,66,0.3);
  color: var(--gold); font-size: .75rem; font-weight: 700;
  padding: .3rem .8rem; border-radius: 20px; text-decoration: none; transition: all .2s;
  cursor: pointer; font-family: var(--font-u); letter-spacing: .03em;
}
.chat-trade-action:hover { background: rgba(245,200,66,0.22); border-color: var(--gold); }

.chat-input-area {
  padding: .9rem 1.2rem 1rem; border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.3); backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: .5rem;
}
.chat-toolbar { display: flex; gap: .5rem; align-items: center; }
.chat-tool-btn {
  background: rgba(255,255,255,0.05); border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: .28rem .7rem; font-size: .75rem; cursor: pointer;
  transition: all .2s; font-family: var(--font-u); display: flex; align-items: center; gap: .3rem; letter-spacing: .02em;
}
.chat-tool-btn:hover { background: rgba(245,200,66,0.1); border-color: rgba(245,200,66,0.3); color: var(--gold); }
.chat-tool-btn.active { background: rgba(245,200,66,0.12); border-color: rgba(245,200,66,0.4); color: var(--gold); }
.chat-char-count { margin-left: auto; font-size: .68rem; color: var(--muted); }
.chat-char-count.warn { color: var(--red); }
.chat-input-row { display: flex; gap: .6rem; align-items: flex-end; }
.chat-input {
  flex: 1; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: .7rem 1rem; font-size: .88rem; color: var(--text);
  font-family: var(--font-u); outline: none; resize: none; max-height: 100px;
  min-height: 42px; transition: border-color .2s, box-shadow .2s; line-height: 1.45; overflow-y: auto;
}
.chat-input::placeholder { color: rgba(255,255,255,0.2); }
.chat-input:focus { border-color: rgba(26,79,255,0.5); box-shadow: 0 0 0 3px rgba(26,79,255,0.1); }
.chat-send-btn {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, var(--blue), #0a2fc4);
  border: none; color: #fff; font-size: 1rem; cursor: pointer; flex-shrink: 0;
  transition: all .2s; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(26,79,255,0.3);
}
.chat-send-btn:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(26,79,255,0.45); }
.chat-send-btn:active { transform: scale(.96); }
.chat-error { font-size: .76rem; color: var(--red); min-height: .9rem; padding: 0 .2rem; animation: shake .3s ease; }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

.chat-sidebar { display: flex; flex-direction: column; gap: 1rem; overflow-y: auto; }
.chat-sidebar::-webkit-scrollbar { width: 3px; }
.chat-sidebar::-webkit-scrollbar-thumb { background: var(--border); }

.sidebar-widget {
  background: linear-gradient(160deg, rgba(13,13,36,0.97), rgba(3,3,12,0.99));
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.widget-header {
  padding: .75rem 1rem; border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.03); display: flex; align-items: center; gap: .5rem;
}
.widget-title { font-family: var(--font-d); font-size: .72rem; color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.widget-body { padding: .9rem 1rem; }

.quick-trade-form { display: flex; flex-direction: column; gap: .65rem; }
.quick-trade-form label { font-size: .72rem; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-bottom: -.3rem; display: block; }
.quick-trade-input {
  width: 100%; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px; padding: .55rem .8rem; color: var(--text); font-family: var(--font-u);
  font-size: .85rem; outline: none; transition: border-color .2s; box-sizing: border-box;
}
.quick-trade-input:focus { border-color: rgba(26,79,255,0.5); }
.quick-trade-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.toggle-opt {
  padding: .5rem; border: 1px solid var(--border); border-radius: 8px; text-align: center;
  cursor: pointer; font-size: .78rem; color: var(--muted); transition: all .2s; user-select: none;
}
.toggle-opt:hover { border-color: rgba(245,200,66,0.3); color: var(--text); }
.toggle-opt.selected { background: rgba(245,200,66,0.1); border-color: rgba(245,200,66,0.4); color: var(--gold); }
.quick-send-btn {
  width: 100%; padding: .65rem;
  background: linear-gradient(135deg, rgba(245,200,66,0.15), rgba(245,200,66,0.05));
  border: 1px solid rgba(245,200,66,0.35); border-radius: 10px;
  color: var(--gold); font-family: var(--font-u); font-size: .85rem; font-weight: 700;
  cursor: pointer; transition: all .2s; letter-spacing: .04em;
}
.quick-send-btn:hover { background: linear-gradient(135deg, rgba(245,200,66,0.25), rgba(245,200,66,0.1)); box-shadow: 0 4px 16px rgba(245,200,66,0.15); transform: translateY(-1px); }

.quick-trade-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 300;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px); animation: fade-in .2s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.quick-trade-panel {
  background: linear-gradient(160deg, #0d0d28, #05050f);
  border: 1px solid rgba(245,200,66,0.3); border-radius: 20px;
  width: min(520px, 94vw); max-height: 90vh; overflow-y: auto;
  box-shadow: 0 0 0 1px rgba(245,200,66,0.1), 0 24px 60px rgba(0,0,0,0.7), 0 0 80px rgba(245,200,66,0.05);
  animation: panel-in .3s cubic-bezier(0.34,1.3,0.64,1) both; position: relative;
}
@keyframes panel-in { from { opacity: 0; transform: scale(.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.quick-trade-panel::before {
  content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.qtp-header { padding: 1.4rem 1.5rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.qtp-title { font-family: var(--font-d); font-size: 1rem; color: var(--gold); display: flex; align-items: center; gap: .5rem; }
.qtp-source-msg { font-size: .78rem; color: var(--muted); margin-top: .3rem; font-style: italic; }
.qtp-source-card { color: var(--text); font-style: normal; font-weight: 600; }
.qtp-close { background: none; border: 1px solid var(--border); color: var(--muted); width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: .9rem; flex-shrink: 0; transition: all .2s; display: flex; align-items: center; justify-content: center; }
.qtp-close:hover { border-color: var(--red); color: var(--red); }
.qtp-body { padding: 1.2rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.qtp-field label { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .4rem; }
.qtp-user-search { display: flex; gap: .5rem; }
.qtp-input { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 10px; padding: .6rem .9rem; color: var(--text); font-family: var(--font-u); font-size: .88rem; outline: none; transition: border-color .2s; box-sizing: border-box; }
.qtp-input:focus { border-color: rgba(26,79,255,0.5); }
.qtp-search-btn { padding: .6rem 1rem; background: rgba(26,79,255,0.15); border: 1px solid rgba(26,79,255,0.3); color: var(--blue); border-radius: 10px; cursor: pointer; font-family: var(--font-u); font-size: .82rem; white-space: nowrap; transition: all .2s; }
.qtp-search-btn:hover { background: rgba(26,79,255,0.25); }
.qtp-user-results { margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.qtp-user-result { padding: .5rem .8rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: .85rem; transition: all .2s; display: flex; align-items: center; gap: .5rem; }
.qtp-user-result:hover { background: rgba(26,79,255,0.1); border-color: rgba(26,79,255,0.3); }
.qtp-user-result.selected { background: rgba(26,79,255,0.15); border-color: rgba(26,79,255,0.5); color: var(--blue); }
.qtp-selected-user { font-size: .8rem; color: var(--r-color); font-weight: 700; padding: .3rem .5rem; display: none; }
.qtp-card-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: end; }
.qtp-amount-input { width: 70px; }
.qtp-prefilled { background: rgba(245,200,66,0.06); border: 1px solid rgba(245,200,66,0.2); border-radius: 8px; padding: .5rem .8rem; font-size: .85rem; color: var(--text); font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
.qtp-prefilled span { color: var(--gold-dim); font-size: .75rem; }
.qtp-divider { display: flex; align-items: center; gap: .75rem; color: var(--muted); font-size: .8rem; }
.qtp-divider::before, .qtp-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.qtp-submit { width: 100%; padding: .85rem; background: linear-gradient(135deg, rgba(245,200,66,0.2), rgba(245,200,66,0.08)); border: 1px solid rgba(245,200,66,0.4); border-radius: 12px; color: var(--gold); font-family: var(--font-d); font-size: .85rem; cursor: pointer; transition: all .25s; letter-spacing: .06em; box-shadow: 0 4px 16px rgba(245,200,66,0.1); }
.qtp-submit:hover { background: linear-gradient(135deg, rgba(245,200,66,0.3), rgba(245,200,66,0.14)); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,200,66,0.2); }
.qtp-submit:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.qtp-feedback { font-size: .8rem; text-align: center; min-height: 1.2rem; padding: .2rem; }
.qtp-feedback.ok  { color: var(--r-color); }
.qtp-feedback.err { color: var(--red); }

.tip-list { display: flex; flex-direction: column; gap: .6rem; }
.tip-item { display: flex; gap: .6rem; align-items: flex-start; font-size: .78rem; color: var(--muted); line-height: 1.45; }
.tip-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; background: rgba(26,79,255,0.1); border: 1px solid rgba(26,79,255,0.2); display: flex; align-items: center; justify-content: center; font-size: .7rem; }

.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; color: var(--muted); font-size: .85rem; }
.chat-empty-icon { font-size: 2.5rem; opacity: .4; }

/* ================================================================
   SHOP
================================================================ */
.shop-page { padding: 1.5rem; max-width: 900px; margin: 0 auto; width: 100%; }

.shop-balance-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1a1200, #0d0c00, #1a1800);
  border: 1px solid rgba(245,200,66,0.35); border-radius: 20px;
  padding: 1.75rem 2rem; margin-bottom: 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  box-shadow: 0 8px 32px rgba(245,200,66,0.12), 0 0 0 1px rgba(245,200,66,0.08);
}
.shop-balance-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 20% 50%, rgba(245,200,66,0.1), transparent); pointer-events: none; }
.shop-balance-card::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.shop-balance-label { font-size: .65rem; font-weight: 700; letter-spacing: .2em; color: var(--gold-dim); text-transform: uppercase; margin-bottom: .4rem; }
.shop-balance-amount { font-family: var(--font-d); font-size: 3rem; color: var(--gold); line-height: 1; margin-bottom: .35rem; filter: drop-shadow(0 0 20px rgba(245,200,66,0.4)); }
.shop-balance-sub { font-size: .72rem; color: var(--muted); }
.shop-balance-icon { font-size: 4rem; opacity: .22; flex-shrink: 0; filter: drop-shadow(0 0 16px rgba(245,200,66,0.3)); }

.shop-section { margin-bottom: 2.5rem; }
.shop-section-title { font-family: var(--font-d); font-size: .9rem; color: var(--gold); letter-spacing: .1em; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--border); }
.shop-section-desc { font-size: .8rem; color: var(--muted); margin-bottom: 1rem; line-height: 1.55; }

.shop-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.shop-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 1.25rem; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-align: center; transition: border-color .2s, box-shadow .2s; }
.shop-item:hover { border-color: rgba(245,200,66,0.3); box-shadow: 0 4px 20px rgba(245,200,66,0.08); }
.shop-item-icon { font-size: 2.5rem; }
.shop-item-name { font-weight: 700; font-size: .9rem; }
.shop-item-desc { font-size: .72rem; color: var(--muted); line-height: 1.4; }
.shop-item-price { display: flex; align-items: center; gap: .4rem; font-family: var(--font-d); font-size: 1.1rem; color: var(--gold); margin-top: .25rem; }
.coin-icon { font-size: 1rem; }
.shop-buy-btn { width: 100%; padding: .65rem; background: linear-gradient(135deg, rgba(245,200,66,0.18), rgba(245,200,66,0.06)); border: 1px solid rgba(245,200,66,0.4); border-radius: 10px; color: var(--gold); font-family: var(--font-u); font-size: .85rem; font-weight: 700; cursor: pointer; transition: all .2s; letter-spacing: .04em; }
.shop-buy-btn:hover:not(.disabled):not(:disabled) { background: linear-gradient(135deg, rgba(245,200,66,0.28), rgba(245,200,66,0.12)); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(245,200,66,0.2); }
.shop-buy-btn.disabled, .shop-buy-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; background: rgba(255,255,255,0.04); border-color: var(--border); color: var(--muted); }

.shop-rarity-table { display: flex; flex-direction: column; gap: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.shop-rarity-row { display: grid; grid-template-columns: 52px 1fr auto auto; gap: .75rem; align-items: center; padding: .65rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); transition: background .15s; }
.shop-rarity-row:last-child { border-bottom: none; }
.shop-rarity-row:hover { background: rgba(255,255,255,0.03); }
.shop-rarity-badge { font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: .2rem .4rem; border-radius: 6px; border: 1px solid; text-align: center; }
.shop-rarity-name { font-size: .8rem; font-weight: 600; }
.shop-rarity-value { display: flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 700; color: var(--gold); white-space: nowrap; }
.shop-rarity-equiv { font-size: .68rem; color: var(--muted); text-align: right; white-space: nowrap; }

.shop-sell-actions { display: flex; flex-direction: column; gap: .5rem; }
.shop-action-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .75rem 1.25rem; background: rgba(255,255,255,0.05); border: 1px solid var(--border); border-radius: 12px; color: var(--text); font-family: var(--font-u); font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s; align-self: flex-start; }
.shop-action-btn:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.2); }
.shop-action-hint { font-size: .72rem; color: var(--muted); padding-left: .25rem; }

.sell-modal-box { max-width: 360px !important; }
.sell-modal-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .5rem; }
.sell-stats-row { display: flex; gap: 1rem; margin: .75rem 0; justify-content: center; }
.sell-stat { display: flex; flex-direction: column; align-items: center; gap: .2rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: .5rem .9rem; min-width: 90px; }
.sell-stat-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sell-stat-val { font-family: var(--font-d); font-size: 1.1rem; }
.sell-actions { display: flex; flex-direction: column; gap: .65rem; margin-top: .75rem; }
.sell-label { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; display: block; margin-bottom: .3rem; }
.sell-amount-row { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; padding: .75rem; }
.sell-qty-control { display: flex; align-items: center; gap: .4rem; margin-bottom: .4rem; }
.sell-qty-btn { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.08); border: 1px solid var(--border); color: var(--text); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; flex-shrink: 0; }
.sell-qty-btn:hover { background: rgba(255,255,255,0.14); }
.sell-qty-input { flex: 1; text-align: center; background: rgba(255,255,255,0.06); border: 1px solid var(--border); border-radius: 8px; padding: .4rem; color: var(--text); font-family: var(--font-u); font-size: .9rem; font-weight: 700; outline: none; }
.sell-total-preview { font-size: .78rem; color: var(--muted); text-align: right; }
.sell-btn-confirm { width: 100%; padding: .75rem; background: linear-gradient(135deg, rgba(245,200,66,0.2), rgba(245,200,66,0.07)); border: 1px solid rgba(245,200,66,0.4); border-radius: 12px; color: var(--gold); font-family: var(--font-d); font-size: .85rem; cursor: pointer; transition: all .2s; letter-spacing: .05em; }
.sell-btn-confirm:hover:not(:disabled) { background: linear-gradient(135deg, rgba(245,200,66,0.3), rgba(245,200,66,0.12)); box-shadow: 0 4px 16px rgba(245,200,66,0.18); transform: translateY(-1px); }
.sell-btn-confirm:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.sell-btn-dupes { width: 100%; padding: .6rem; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-family: var(--font-u); font-size: .78rem; cursor: pointer; transition: all .2s; }
.sell-btn-dupes:hover:not(:disabled) { background: rgba(255,255,255,0.08); color: var(--text); border-color: rgba(255,255,255,0.18); }
.sell-btn-dupes:disabled { opacity: .35; cursor: not-allowed; }
.sell-feedback { font-size: .78rem; color: var(--red); text-align: center; min-height: .9rem; }

/* ================================================================
   RESPONSIVE COMPLETO
================================================================ */

/* ── Navbar ── */
@media (max-width: 480px) {
  .navbar { padding: 0.5rem 0.75rem; gap: 0.4rem; }
  .nav-logo { font-size: 0.82rem; }
  .nav-links { gap: 0; }
  .nav-link { padding: 0.4rem 0.4rem; font-size: 1rem; }
  .nav-link span { display: none; }
  .nav-link.active::after { display: none; }
  .nav-username { display: none; }
  .nav-packs-badge { font-size: 0.62rem; padding: 2px 5px; }
  .btn-sm { padding: 0.32rem 0.65rem; font-size: 0.7rem; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .nav-link span { display: none; }
  .navbar { padding: 0.6rem 1rem; }
}

/* ── Pack page ── */
@media (max-width: 480px) {
  .pack-page { padding: 1rem 0.75rem 2rem; gap: 1.25rem; }
  .pack-page-title { font-size: 1.5rem; }
  .pack-status-panel { flex-direction: column; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; }
  .pack-status-right { align-self: stretch; }
  .pack-guarantee-badge { width: 100%; justify-content: center; }
  .btn-open-pack { min-width: 200px; font-size: 1rem; }

  .card-slot { width: 108px; height: 153px; }
  .cards-grid { gap: 0.55rem; }
  .pack-envelope { width: 152px; height: 212px; }
  .pack-aura-1 { width: 230px; height: 230px; }
  .pack-aura-2 { width: 160px; height: 160px; }
  .prob-section { padding: 1rem; }
  .prob-freq { display: none; }
  .prob-row { grid-template-columns: 1fr auto; }
}

@media (min-width: 481px) and (max-width: 768px) {
  .card-slot { width: 122px; height: 172px; }
}

/* ── Collection page ── */
@media (max-width: 480px) {
  .collection-page { padding: 0.75rem; }
  .collection-title-row { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .page-title { font-size: 1.1rem; }
  #collection-stats { width: 100%; justify-content: space-between; }
  .stat-item { flex: 1; padding: 0.4rem 0.5rem; }
  .stat-num { font-size: 1rem; }
  .stat-label { font-size: 0.52rem; }
  .collection-filters { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: none; gap: 0.3rem; }
  .collection-filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; padding: 0.28rem 0.6rem; font-size: 0.66rem; }
  #collection-grid { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
  .card-thumb-amount { font-size: 0.52rem; min-width: 16px; height: 16px; padding: 0 3px; top: 3px; right: 3px; }
  .search-input { font-size: 0.78rem; padding: 0.42rem 0.7rem; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .collection-page { padding: 1rem; }
  #collection-grid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 0.6rem; }
}
@media (min-width: 769px) {
  #collection-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ── Trades ── */
@media (max-width: 480px) {
  .trades-page { padding: 0.75rem; }
  .trade-card { padding: 0.75rem; }
  .trade-cards-visual { gap: 0.5rem; }
  .trade-card-mini img { width: 44px; height: 60px; }
  .trade-arrow { font-size: 1.1rem; }
  .trade-actions { flex-wrap: wrap; }
  .btn-accept, .btn-reject, .btn-gold-action { font-size: 0.7rem; padding: 0.38rem 0.7rem; flex: 1; min-width: 0; }
  .trade-confirm-status { flex-direction: column; gap: 0.22rem; }
  .form-row { grid-template-columns: 1fr; }
}

/* ── Achievements ── */
@media (max-width: 480px) {
  .achievements-page { padding: 0.75rem; }
  .ach-cat-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .achievement-card { padding: 0.7rem 0.85rem; }
  .ach-card-icon { font-size: 1.6rem; }
  .referral-link-box { flex-direction: column; }
}
@media (min-width: 481px) and (max-width: 768px) {
  .ach-cat-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Hero ── */
@media (max-width: 480px) {
  .hero { padding: 1.5rem 1rem; gap: 1.25rem; }
  .hero-title { font-size: 2.2rem; }
  .hero-stats { gap: 0.5rem; }
  .stat-card { padding: 0.5rem 0.9rem; }
  .stat-n { font-size: 1.1rem; }
  .hero-buttons { max-width: 100%; }
  .pack-visual { width: 120px; height: 170px; }
  .pack-logo { font-size: 2rem; }
}

/* ── Auth ── */
@media (max-width: 480px) {
  .auth-box { padding: 1.75rem 1.25rem; }
  .auth-logo-title { font-size: 1.6rem; }
}

/* ── Modal ── */
@media (max-width: 480px) {
  .modal-box { padding: 1.25rem 1rem; max-width: calc(100vw - 2rem); }
  .modal-card-name { font-size: 0.95rem; }
}

/* ── Achievement popup ── */
@media (max-width: 480px) {
  .achievement-popup { top: auto; bottom: 1rem; right: 0.75rem; left: 0.75rem; transform: translateY(150%); }
  .achievement-popup.show { transform: translateY(0); }
  .achievement-popup-inner { max-width: 100%; }
}

/* ── Toast ── */
@media (max-width: 480px) {
  .toast { font-size: 0.76rem; padding: 0.55rem 1rem; white-space: normal; text-align: center; max-width: 88vw; }
}

/* ── Chat ── */
@media (max-width: 820px) {
  .chat-page { grid-template-columns: 1fr; padding: 0; height: calc(100vh - 56px); overflow: hidden; gap: 0; }
  .chat-sidebar { display: none; }
  .chat-main { border-radius: 0; border: none; border-top: 1px solid rgba(26,79,255,0.2); }
  .chat-msg { max-width: 88%; }
}

/* ── Shop ── */
@media (max-width: 480px) {
  .shop-page { padding: .75rem; }
  .shop-balance-card { padding: 1.25rem; flex-direction: column; text-align: center; }
  .shop-balance-amount { font-size: 2.2rem; }
  .shop-balance-icon { display: none; }
  .shop-rarity-row { grid-template-columns: 44px 1fr auto; }
  .shop-rarity-equiv { display: none; }
  .sell-stats-row { flex-wrap: wrap; }
}

/* ── Tablet ── */
@media (min-width: 769px) and (max-width: 1024px) {
  .collection-page, .trades-page, .achievements-page { padding: 1.25rem; }
  .ach-cat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Touch: quitar hover effects ── */
@media (hover: none) {
  .card-thumb:hover { transform: none; }
  .btn-primary:hover { transform: none; box-shadow: 0 4px 20px var(--red-glow); }
  .btn-gold:hover { transform: none; }
  .btn-secondary:hover { transform: none; }
  .card-slot:hover:not(.face-up) { filter: none; }
}

/* ── Safe area (iOS) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .navbar { padding-top: max(0.5rem, env(safe-area-inset-top)); }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ================================================================
   NAVBAR MÓVIL — Menú hamburguesa
================================================================ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  padding: 6px;
  transition: background var(--transition);
  flex-shrink: 0;
}
.nav-hamburger:hover { background: rgba(255,255,255,0.1); }
.nav-hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 99;
  background: rgba(3,3,12,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  flex-direction: column;
  padding-top: 70px;
  animation: mobileMenuIn 0.25s cubic-bezier(0.4,0,0.2,1);
}
.nav-mobile-menu.open { display: flex; }
@keyframes mobileMenuIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-mobile-links {
  display: flex; flex-direction: column;
  padding: 1rem 1.25rem; gap: 0.25rem; flex: 1;
}
.nav-mobile-link {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  text-decoration: none;
  color: var(--muted);
  font-weight: 600; font-size: 1rem;
  letter-spacing: 0.03em;
  transition: background var(--transition), color var(--transition);
  border: 1px solid transparent;
}
.nav-mobile-link:hover { background: rgba(255,255,255,0.06); color: var(--text); }
.nav-mobile-link.active {
  color: var(--gold);
  background: rgba(245,200,66,0.08);
  border-color: rgba(245,200,66,0.15);
}
.nav-mobile-link-icon { font-size: 1.2rem; width: 28px; text-align: center; flex-shrink: 0; }

.nav-mobile-footer {
  padding: 1rem 1.25rem 1.5rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 0.75rem;
  flex-wrap: wrap;
}
.nav-mobile-user {
  font-size: 0.82rem; font-weight: 700; color: var(--text);
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.nav-mobile-badges { display: flex; gap: 0.4rem; align-items: center; }

@media (max-width: 768px) {
  .nav-hamburger { display: flex; }
  .navbar .nav-links { display: none; }
  /* Mantener nav-user solo con badges y logout en desktop */
  .navbar .nav-username { display: none; }
}

@media (min-width: 769px) {
  .nav-hamburger { display: none; }
  .nav-mobile-menu { display: none !important; }
}

/* ================================================================
   HOME · TOP COLECCIONISTAS (ranking)
================================================================ */
.hlb {
  width: 100%; max-width: 520px; margin: 0.25rem auto 0;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; animation: hlbIn .5s ease both;
}
.hlb-header {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-bottom: .75rem; flex-wrap: wrap;
}
.hlb-title {
  font-family: var(--font-u); font-weight: 700; font-size: 1rem;
  color: var(--gold); letter-spacing: .03em;
}
.hlb-sub {
  font-size: .6rem; font-weight: 700; letter-spacing: .12em;
  color: var(--muted); text-transform: uppercase;
}
.hlb-list { display: flex; flex-direction: column; gap: .4rem; }
.hlb-row {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .65rem; border-radius: 10px;
  background: rgba(255,255,255,0.025); border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.hlb-row:hover { background: rgba(255,255,255,0.06); transform: translateX(2px); }
.hlb-row.me { border-color: rgba(245,200,66,0.4); background: rgba(245,200,66,0.07); }
.hlb-rank {
  flex: 0 0 1.9rem; text-align: center;
  font-family: var(--font-d); font-size: 1rem; font-weight: 700; color: var(--muted);
}
.hlb-row.top1 .hlb-rank,
.hlb-row.top2 .hlb-rank,
.hlb-row.top3 .hlb-rank { font-size: 1.15rem; }
.hlb-name {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-u); font-weight: 600; font-size: .9rem; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hlb-you {
  font-size: .56rem; color: var(--gold); margin-left: .4rem;
  font-weight: 700; letter-spacing: .08em; vertical-align: middle;
}
.hlb-cards {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; line-height: 1.05;
}
.hlb-cards-n { font-family: var(--font-d); font-size: 1rem; color: var(--cp-color); }
.hlb-cards-l {
  font-size: .54rem; font-weight: 700; letter-spacing: .06em;
  color: var(--muted); text-transform: uppercase;
}
@keyframes hlbIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 480px) {
  .hlb { padding: .8rem; }
  .hlb-row { gap: .5rem; padding: .45rem .5rem; }
  .hlb-name { font-size: .82rem; }
  .hlb-cards-n { font-size: .9rem; }
  .hlb-rank { flex-basis: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hlb { animation: none; }
  .hlb-row { transition: none; }
  .hlb-row:hover { transform: none; }
}

/* ================================================================
   APERTURA DE SOBRES · efectos mejorados (aditivo, GPU-friendly)
================================================================ */

/* Rayos de luz giratorios detrás del sobre */
.pack-envelope-wrapper::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 460px; height: 460px; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg,
    transparent 0deg, rgba(245,200,66,0.12) 10deg, transparent 22deg,
    transparent 60deg, rgba(26,79,255,0.10) 72deg, transparent 86deg,
    transparent 130deg, rgba(204,17,34,0.08) 142deg, transparent 156deg,
    transparent 200deg, rgba(245,200,66,0.10) 212deg, transparent 226deg,
    transparent 280deg, rgba(26,79,255,0.08) 292deg, transparent 306deg);
  border-radius: 50%;
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 45%, transparent 74%);
          mask: radial-gradient(circle, transparent 26%, #000 45%, transparent 74%);
  animation: rayRotate 16s linear infinite;
  pointer-events: none; z-index: 0; opacity: 0.85;
}
@keyframes rayRotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* El sobre y sus auras siempre por encima de los rayos */
.pack-envelope { z-index: 1; }
.pack-aura     { z-index: 1; }

/* Brillo que barre el sobre en diagonal */
.pack-envelope-shine {
  background: linear-gradient(115deg,
    transparent 28%, rgba(255,255,255,0.30) 46%,
    rgba(255,255,255,0.10) 54%, transparent 72%);
  background-size: 250% 250%;
  animation: envShine 3.6s ease-in-out infinite;
}
@keyframes envShine {
  0%, 100% { background-position: 180% 180%; }
  50%      { background-position: -40% -40%; }
}

/* Onda expansiva al abrir el sobre */
.pack-envelope-wrapper.bursting::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
  border-radius: 50%; border: 4px solid rgba(255,255,255,0.9);
  box-shadow: 0 0 30px rgba(245,200,66,0.7);
  animation: shockwave 0.75s cubic-bezier(0.2,0.7,0.3,1) forwards;
  pointer-events: none; z-index: 6;
}
@keyframes shockwave {
  0%   { width: 44px;  height: 44px;  opacity: 0.95; border-width: 4px; }
  100% { width: 540px; height: 540px; opacity: 0;    border-width: 1px; }
}

/* Cartas boca abajo: pulso e invitación a tocar */
.card-slot:not(.face-up) .card-back-face { animation: backGlow 2.4s ease-in-out infinite; }
@keyframes backGlow {
  0%, 100% { box-shadow: 0 6px 20px rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 6px 22px rgba(0,0,0,0.5), 0 0 24px rgba(245,200,66,0.30); }
}
.card-back-face::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(130deg, transparent 42%, rgba(255,255,255,0.10) 50%, transparent 58%);
  background-size: 250% 250%;
  animation: backSheen 3s linear infinite;
}
@keyframes backSheen { 0% { background-position: 210% 0; } 100% { background-position: -60% 0; } }

/* Al revelar: "pop" de escala + destello que barre la carta */
.card-slot.face-up { animation: cardPop 0.5s cubic-bezier(0.34,1.4,0.6,1); }
@keyframes cardPop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
.card-front-face::before {
  content: ''; position: absolute; inset: 0; border-radius: 13px;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.5) 50%, transparent 68%);
  transform: translateX(-130%); opacity: 0; z-index: 4; pointer-events: none;
}
.card-slot.face-up .card-front-face::before { animation: cardShine 0.85s ease-out 0.12s 1; }
@keyframes cardShine {
  0%   { transform: translateX(-130%); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translateX(130%);  opacity: 0; }
}

@media (max-width: 480px) {
  .pack-envelope-wrapper::before { width: 300px; height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .pack-envelope-wrapper::before,
  .pack-envelope-shine,
  .card-back-face::after,
  .card-slot:not(.face-up) .card-back-face { animation: none; }
  .pack-envelope-wrapper.bursting::after,
  .card-slot.face-up,
  .card-slot.face-up .card-front-face::before { animation: none; }
}

/* ── Nav con 9 enlaces: compactar en pantallas medianas para que quepan ── */
@media (min-width: 769px) and (max-width: 1180px) {
  .navbar .nav-links { gap: 0.05rem; }
  .nav-link { padding: 0.34rem 0.5rem; font-size: 0.72rem; letter-spacing: 0.02em; gap: 0.22rem; }
}
@media (min-width: 769px) and (max-width: 960px) {
  /* Si hay muy poco espacio, mostrar solo los iconos (texto en el tooltip nativo) */
  .navbar .nav-link span { display: none; }
}