/* === BUTTONS === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--r-md);
  transition: transform var(--duration-fast), box-shadow var(--duration-normal);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}

.btn:active { transform: scale(0.95); }
.btn:disabled { opacity: 0.4; pointer-events: none; }

.btn-primary {
  background: var(--gold);
  color: var(--text-inverse);
  box-shadow: var(--shadow-gold);
}

.btn-secondary {
  background: var(--cyan);
  color: var(--text-inverse);
  box-shadow: var(--shadow-cyan);
}

.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border: 1px solid var(--border-light);
}

.btn-ghost:active { background: rgba(255,255,255,0.04); }

.btn-danger { background: var(--loss-dim); color: var(--loss); border: 1px solid rgba(248,113,113,0.2); }

.btn-block { display: flex; width: 100%; }
.btn-lg { min-height: 52px; font-size: 16px; font-weight: 700; border-radius: var(--r-lg); }
.btn-sm { min-height: 32px; padding: 6px 14px; font-size: 12px; border-radius: var(--r-sm); }

/* === CARDS === */
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}

.card:active { transform: scale(0.98); }
.card-pad { padding: var(--sp-4); }

/* === GAME CARDS (home grid) === */
.game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.game-card {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--bg-1);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-bounce), box-shadow var(--duration-fast);
}

.game-card:active {
  transform: scale(0.96);
}

.game-card-hero {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.game-card-hero--chess { background: linear-gradient(135deg, #1a2a4a, #2a5a8a); }
.game-card-hero--ludo { background: linear-gradient(135deg, #2a1a4a, #6a2a9a); }
.game-card-hero--domino { background: linear-gradient(135deg, #1a3a2a, #2a7a5a); }
.game-card-hero--backgammon { background: linear-gradient(135deg, #3a2a1a, #7a5a2a); }

.game-card-hero .icon-xl { color: rgba(255,255,255,0.9); }

.game-card-body {
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.game-card-name {
  font-size: 14px;
  font-weight: 700;
}

.game-card-live {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-3);
}

.game-card-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--online);
  animation: pulse-dot 2s infinite;
}

.game-card-soon {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  padding: 2px 8px;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  border-radius: var(--r-full);
  font-size: 10px;
  font-weight: 600;
  color: var(--text-2);
}

/* === INPUTS === */
.input-group { margin-bottom: var(--sp-4); }
.input-label { display: block; font-size: 13px; font-weight: 500; color: var(--text-2); margin-bottom: var(--sp-2); }

.input {
  width: 100%;
  height: var(--touch);
  padding: 0 var(--sp-4);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-1);
  font-size: 14px;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}

.input:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

.input::placeholder { color: var(--text-3); }

/* === CHIPS === */
.chip-row {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
}

.chip {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--duration-fast);
}

.chip:active { transform: scale(0.95); }
.chip.active { background: var(--cyan); border-color: var(--cyan); color: var(--text-inverse); }

/* === BADGES === */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--r-full);
}

.badge-gold { background: var(--gold-dim); color: var(--gold); }
.badge-cyan { background: var(--cyan-dim); color: var(--cyan); }
.badge-win { background: var(--win-dim); color: var(--win); }
.badge-loss { background: var(--loss-dim); color: var(--loss); }

/* === STREAK BANNER === */
.streak {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.streak-fire {
  font-size: 24px;
  animation: fire-flicker 1.5s ease-in-out infinite;
}

.streak-text { flex: 1; }
.streak-day { font-size: 14px; font-weight: 600; }
.streak-reward { font-size: 12px; color: var(--text-3); }

.streak-btn {
  min-height: 32px;
  padding: 6px 14px;
  background: var(--gold);
  color: var(--text-inverse);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--r-sm);
  transition: transform var(--duration-fast);
  box-shadow: var(--shadow-gold);
}

.streak-btn:active { transform: scale(0.92); }
.streak-btn:disabled { opacity: 0.4; background: var(--bg-3); color: var(--text-3); box-shadow: none; }

/* === STATS === */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: var(--sp-2);
}

.stat {
  background: var(--bg-2);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  text-align: center;
}

.stat-val {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.stat-lbl {
  font-size: 10px;
  color: var(--text-3);
  margin-top: 2px;
}

/* === SECTION HEADERS === */
.sec-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}

.sec-title {
  font-size: 16px;
  font-weight: 700;
}

.sec-link {
  font-size: 12px;
  color: var(--cyan);
  font-weight: 500;
}

/* === ACTIVITY LIST === */
.activity-list { display: flex; flex-direction: column; }

.activity-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.activity-item:last-child { border-bottom: none; }

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-icon--win { background: var(--win-dim); color: var(--win); }
.activity-icon--loss { background: var(--loss-dim); color: var(--loss); }
.activity-icon--draw { background: rgba(148,163,184,0.12); color: var(--draw); }

.activity-detail { flex: 1; }
.activity-name { font-size: 13px; font-weight: 600; }
.activity-meta { font-size: 11px; color: var(--text-3); }
.activity-result { font-size: 12px; font-weight: 700; }

/* === TOAST === */
.toast {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: slide-down var(--duration-normal) var(--ease-bounce);
  pointer-events: auto;
}

.toast--success { border-color: var(--win); }
.toast--error { border-color: var(--loss); }
.toast--info { border-color: var(--cyan); }

/* === EMPTY STATE === */
.empty {
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  color: var(--text-3);
  font-size: 14px;
}

/* === LOGIN === */
.login-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: var(--sp-5);
}

.login-card { width: 100%; max-width: 380px; }

.login-brand {
  font-weight: 800;
  font-size: 40px;
  color: var(--gold);
  text-align: center;
  letter-spacing: -1px;
  margin-bottom: var(--sp-2);
  text-shadow: 0 0 40px var(--gold-glow);
}

.login-subtitle {
  text-align: center;
  font-size: 14px;
  color: var(--text-3);
  margin-bottom: var(--sp-6);
}

.login-error {
  padding: var(--sp-3);
  background: var(--loss-dim);
  border: 1px solid rgba(248,113,113,0.2);
  border-radius: var(--r-md);
  color: var(--loss);
  font-size: 13px;
  text-align: center;
  margin-top: var(--sp-4);
  animation: shake 0.4s ease;
}

.login-footer {
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
  margin-top: var(--sp-5);
}

.login-footer a { color: var(--cyan); font-weight: 500; }
