/* ============================================================
   GAMEHUB DESIGN SYSTEM  v1.0
   Derivado do CSS artístico do Bruno (diretriz GDD §3.2) e da
   Paleta Oficial (GDD Tabela 3.1). Todo componente do GameHub
   usa EXCLUSIVAMENTE estes tokens — sem cores hardcoded.
   ============================================================ */

:root {
  /* ---------- Backgrounds (Tabela 3.1) ---------- */
  --bg-deepest:   #0B1C2C;   /* modais, overlays                 */
  --bg-primary:   #162235;   /* cover, sidebar                   */
  --bg-secondary: #1E293B;   /* cards em dark mode               */
  --bg-elevated:  #243447;   /* cards elevados (hover)           */

  /* ---------- Acentos neon ---------- */
  --accent-cyan:   #37DCF2;  /* primário: botões, links          */
  --accent-purple: #8B5CF6;  /* secundário: conquistas raras     */
  --accent-pink:   #EC4899;  /* terciário: notificações, alerts  */

  /* ---------- Texto ---------- */
  --text-bright:  #F1F5F9;   /* principal em dark mode           */
  --text-default: #1E293B;   /* principal em light mode          */
  --text-muted:   #94A3B8;   /* secundário, captions             */

  /* ---------- Feedback ---------- */
  --success: #10B981;
  --warning: #F59E0B;
  --error:   #EF4444;

  /* ---------- Raridade (loja/conquistas) ---------- */
  --rarity-common:    #94A3B8;
  --rarity-uncommon:  #10B981;
  --rarity-rare:      #3B82F6;
  --rarity-epic:      #A855F7;
  --rarity-legendary: #F59E0B;

  /* ---------- Presença (Tabela 12.1) ---------- */
  --presence-online:  #10B981;
  --presence-away:    #F59E0B;
  --presence-busy:    #EF4444;
  --presence-dnd:     #8B5CF6;
  --presence-offline: #6B7280;

  /* ---------- Categorias de jogo (Tabela 7.1) ---------- */
  --cat-cards:  #3B82F6;
  --cat-party:  #8B5CF6;
  --cat-casual: #37DCF2;
  --cat-arcade: #EC4899;

  /* ---------- Tipografia (§3.4) — escala modular 1.25 ---------- */
  --font-ui:     'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  --font-arcade: 'Press Start 2P', monospace;
  --font-mono:   'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --fs-body:    14px;
  --fs-body-lg: 16px;
  --fs-sub:     20px;
  --fs-section: 25px;
  --fs-page:    31px;
  --fs-display: 39px;
  --fs-hero:    49px;
  --lh-body:  1.5;
  --lh-title: 1.2;

  /* ---------- Espaçamento (escala 4px, §3.2) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;

  /* ---------- Raios (§3.5) ---------- */
  --radius-btn:   8px;
  --radius-card:  12px;
  --radius-modal: 16px;
  --radius-pill:  999px;

  /* ---------- Shadows & Glows (replicados do Bruno: 0 6px 0 sólido + glow) ---------- */
  --shadow-chunky:       0 6px 0 0 rgba(0, 0, 0, 0.45);       /* botão 3D estilo Bruno   */
  --shadow-chunky-cyan:  0 6px 0 0 #1490a3;                    /* base sólida sob o cyan  */
  --glow-cyan:      0 0 15px rgba(55, 220, 242, 0.55);
  --glow-cyan-soft: 0 0 8px  rgba(55, 220, 242, 0.35);
  --glow-purple:    0 0 15px rgba(139, 92, 246, 0.55);
  --glow-pink:      0 0 15px rgba(236, 72, 153, 0.55);
  --glow-legendary: 0 0 18px rgba(245, 158, 11, 0.65);
  --elevation-1: 0 2px 10px rgba(0, 0, 0, 0.35);
  --elevation-2: 0 6px 24px rgba(0, 0, 0, 0.45);

  /* ---------- Transições (§3.6) ---------- */
  --t-fast: 150ms ease;
  --t-med:  300ms ease;
}

/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--fs-body); }
@media (min-width: 768px)  { html { font-size: 15px; } }
@media (min-width: 1024px) { html { font-size: var(--fs-body-lg); } }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: var(--lh-body);
  color: var(--text-bright);
  background: radial-gradient(circle at 50% 0%, var(--bg-primary) 0%, var(--bg-deepest) 70%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: var(--lh-title); margin: 0 0 var(--sp-3); font-weight: 700; }
h1 { font-size: var(--fs-page); }
h2 { font-size: var(--fs-section); }
h3 { font-size: var(--fs-sub); }

a { color: var(--accent-cyan); text-decoration: none; }
a:hover { text-shadow: var(--glow-cyan-soft); }

.font-arcade { font-family: var(--font-arcade); letter-spacing: 1px; }
.font-mono   { font-family: var(--font-mono); }
.text-muted  { color: var(--text-muted); }

/* Acessibilidade WCAG 2.1 AA (§4.5) */
:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
   BOTÕES (§3.5) — 3 variantes + estilo 3D chunky do Bruno
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-ui); font-weight: 700; font-size: 1rem;
  padding: var(--sp-3) var(--sp-5);
  min-height: 44px; /* touch target §16.3 */
  border: none; border-radius: var(--radius-btn);
  cursor: pointer; user-select: none;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.btn:active { transform: translateY(4px); box-shadow: none !important; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary {
  background: var(--accent-cyan);
  color: var(--bg-deepest);
  box-shadow: var(--shadow-chunky-cyan), var(--glow-cyan-soft);
}
.btn-primary:hover { box-shadow: var(--shadow-chunky-cyan), var(--glow-cyan); }

.btn-secondary {
  background: transparent;
  color: var(--accent-cyan);
  border: 2px solid var(--accent-cyan);
  box-shadow: var(--glow-cyan-soft);
}
.btn-secondary:hover { background: rgba(55, 220, 242, 0.1); box-shadow: var(--glow-cyan); }

.btn-ghost { background: transparent; color: var(--text-bright); }
.btn-ghost:hover { background: var(--bg-elevated); }

.btn-danger {
  background: var(--error); color: #fff;
  box-shadow: 0 6px 0 0 #991b1b;
}

.btn-pulse { animation: glowPulse 2s infinite; } /* CTA glow pulse §3.6 */

/* ============================================================
   CARDS (§3.5)
   ============================================================ */
.card {
  background: var(--bg-secondary);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-1);
  padding: var(--sp-4);
}
.card-hover { transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); cursor: pointer; }
.card-hover:hover {
  transform: translateY(-4px);           /* card hover lift §3.6 */
  background: var(--bg-elevated);
  box-shadow: var(--elevation-2), var(--glow-cyan-soft);
}

/* ============================================================
   MODAIS (§3.5) — backdrop blur, linha accent no topo
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(11, 28, 44, 0.75);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn var(--t-med);
}
.modal {
  background: var(--bg-deepest);
  border-radius: var(--radius-modal);
  border-top: 3px solid var(--accent-cyan);
  box-shadow: var(--elevation-2), var(--glow-cyan-soft);
  max-width: min(520px, 92vw); width: 100%;
  max-height: 88vh; overflow-y: auto;
  padding: var(--sp-6);
  animation: modalScaleIn 250ms cubic-bezier(0.34, 1.56, 0.64, 1); /* replicado do Bruno */
}
@media (max-width: 767px) { .modal { max-width: 100vw; max-height: 100vh; border-radius: 0; } }

/* ============================================================
   TOASTS (§3.5) — slide-in do canto inferior direito
   ============================================================ */
#toast-container {
  position: fixed; bottom: var(--sp-5); right: var(--sp-5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--sp-2); max-width: 360px;
}
.toast {
  background: var(--bg-secondary);
  border-left: 4px solid var(--accent-cyan);
  border-radius: var(--radius-btn);
  box-shadow: var(--elevation-2), var(--glow-cyan-soft);
  padding: var(--sp-3) var(--sp-4);
  animation: slideInRight var(--t-med);
}
.toast-success { border-left-color: var(--success); box-shadow: var(--elevation-2), 0 0 10px rgba(16,185,129,.4); }
.toast-error   { border-left-color: var(--error);   box-shadow: var(--elevation-2), 0 0 10px rgba(239,68,68,.4); }
.toast-warning { border-left-color: var(--warning); }

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.input, select.input, textarea.input {
  width: 100%;
  background: var(--bg-secondary);
  border: 2px solid var(--bg-elevated);
  border-radius: var(--radius-btn);
  color: var(--text-bright);
  font-family: var(--font-ui); font-size: 1rem;
  padding: var(--sp-3) var(--sp-4);
  min-height: 44px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus { outline: none; border-color: var(--accent-cyan); box-shadow: var(--glow-cyan-soft); }
.input::placeholder { color: var(--text-muted); }
.input.invalid { border-color: var(--error); }
.field-hint { font-size: 0.85rem; color: var(--text-muted); margin-top: var(--sp-1); }
.field-hint.ok { color: var(--success); }
.field-hint.bad { color: var(--error); }

/* ============================================================
   BADGES / CHIPS / PILLS
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px;
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--bg-elevated); color: var(--text-bright);
}
.badge-new   { background: var(--accent-cyan);  color: var(--bg-deepest); }
.badge-hot   { background: var(--accent-pink);  color: #fff; box-shadow: var(--glow-pink); }
.badge-event { background: var(--accent-purple);color: #fff; }
.badge-beta  { background: var(--warning); color: var(--bg-deepest); }

.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4); min-height: 36px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary); color: var(--text-muted);
  border: 1px solid var(--bg-elevated);
  cursor: pointer; font-weight: 500; font-size: 0.9rem;
  transition: all var(--t-fast);
}
.chip:hover { color: var(--text-bright); border-color: var(--accent-cyan); }
.chip.active { color: var(--bg-deepest); background: var(--accent-cyan); border-color: var(--accent-cyan); box-shadow: var(--glow-cyan-soft); font-weight: 700; }

/* Raridade — borda + glow crescente (§13.3) */
.rarity-common    { --rarity: var(--rarity-common); }
.rarity-uncommon  { --rarity: var(--rarity-uncommon); }
.rarity-rare      { --rarity: var(--rarity-rare); }
.rarity-epic      { --rarity: var(--rarity-epic); }
.rarity-legendary { --rarity: var(--rarity-legendary); }
[class*="rarity-"] { border: 2px solid var(--rarity); }
.rarity-rare      { box-shadow: 0 0 6px  var(--rarity); }
.rarity-epic      { box-shadow: 0 0 10px var(--rarity); }
.rarity-legendary { box-shadow: var(--glow-legendary); animation: glowPulse 2s infinite; }

/* Presença */
.presence-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.presence-online  { background: var(--presence-online); }
.presence-away    { background: var(--presence-away); }
.presence-busy    { background: var(--presence-busy); }
.presence-dnd     { background: var(--presence-dnd); }
.presence-offline { background: var(--presence-offline); }

/* Avatar com glow cyan (§11.1) */
.avatar {
  border-radius: 50%; object-fit: cover;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 2px var(--accent-cyan), var(--glow-cyan-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--accent-cyan); text-transform: uppercase;
  flex-shrink: 0; user-select: none;
}

/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-elevated) 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--radius-btn);
}

/* ============================================================
   ANIMAÇÕES (§3.6) — biblioteca keyframe do design system
   ============================================================ */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes modalScaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@keyframes glowPulse {
  0%, 100% { box-shadow: var(--glow-cyan-soft); }
  50%      { box-shadow: var(--glow-cyan); }
}
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes achievementIn {  /* desbloqueio de conquista §13.5 */
  0%   { opacity: 0; transform: translateX(60px) rotateY(90deg); }
  60%  { opacity: 1; transform: translateX(-6px) rotateY(-10deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes punch { /* replicado do Bruno */
  0% { transform: scale(1); } 30% { transform: scale(1.25); } 100% { transform: scale(1); }
}
@keyframes spin { to { transform: rotate(360deg); } }

.page-enter { animation: fadeInUp var(--t-med); } /* page transition §3.6 */

/* Scrollbar neon */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-deepest); }
::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-cyan); }