/* ============================================
   LA MAP — Web App Styles (Dark Gaming Theme)
   ============================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  background: #0f0a1f;
  color: white;
  min-height: 100vh;
}

a { color: #f59e0b; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── TOP APP BAR ───────────────────────────── */

.top-appbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  padding: 0 16px;
  background: linear-gradient(180deg, #2d1f4e, #1a1230);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  border-bottom: 2px solid #c9a227;
}

.top-appbar-logo {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
}
.top-appbar-logo:hover { text-decoration: none; }
.top-appbar-logo img { width: 32px; height: 32px; border-radius: 8px; }
.top-appbar-logo span { font-size: 18px; font-weight: 900; color: white; }
.top-appbar-logo em { color: #ffd700; font-style: normal; }

.top-appbar-right {
  display: flex; align-items: center; gap: 10px;
}

/* Wallet chip */
.topbar-wallet {
  display: flex; align-items: center; gap: 6px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
}
.topbar-wallet:hover { background: rgba(245,158,11,0.2); }
.topbar-wallet-icon { font-size: 14px; }
.topbar-wallet-amount { color: #ffd700; font-weight: 700; font-size: 13px; }
.topbar-wallet-add {
  width: 20px; height: 20px;
  background: #22c55e;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 900; color: white;
  line-height: 1;
}

/* Account button + dropdown */
.topbar-account-wrap { position: relative; }
.topbar-account-btn {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s;
  font-family: inherit;
  color: white;
}
.topbar-account-btn:hover { background: rgba(255,255,255,0.1); }
.topbar-avatar { font-size: 20px; }
.topbar-chevron { font-size: 12px; color: rgba(255,255,255,0.5); }

.dropdown-overlay {
  position: fixed; inset: 0;
  z-index: 999;
}

.topbar-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 240px;
  background: #1a1a2e;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px;
  padding: 8px 0;
  z-index: 1001;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
  animation: fadeIn 0.15s ease-out;
}

.dropdown-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
}
.dropdown-avatar {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.dropdown-name { font-weight: 700; font-size: 14px; }
.dropdown-elo { font-size: 12px; color: rgba(255,255,255,0.5); }

.dropdown-divider {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 4px 12px;
}

.dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-size: 14px; font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  color: rgba(255,255,255,0.8);
}
.dropdown-item:hover {
  background: rgba(245,158,11,0.1);
  color: #ffd700;
  text-decoration: none;
}
.dropdown-logout { color: #ef4444; }
.dropdown-logout:hover { background: rgba(239,68,68,0.1); color: #ef4444; }

/* ── BOTTOM NAV BAR ────────────────────────── */

.bottom-navbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 70px;
  background: linear-gradient(180deg, #2d1f4e, #1a1230, #110c20);
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 1000;
  user-select: none;
}

.bottom-navbar-border {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: #c9a227;
  box-shadow: 0 0 8px rgba(255,215,0,0.5);
}

.bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  border-right: 1px solid rgba(74,58,106,0.5);
}
.bottom-nav-item:last-child { border-right: none; }

.bottom-nav-item.active {
  background: linear-gradient(180deg, rgba(255,215,0,0.2), rgba(255,140,0,0.1), transparent);
}

.bottom-nav-item.play-btn:not(.active) {
  background: linear-gradient(180deg, #5D3A1A, #3D2510, #2a1a10);
}

.bottom-nav-glow {
  position: absolute;
  bottom: 4px;
  width: 40%;
  height: 3px;
  background: #ffd700;
  border-radius: 2px;
}

.bottom-nav-icon {
  font-size: 22px;
  opacity: 0.5;
  transition: all 0.2s;
  filter: grayscale(0.5);
}
.bottom-nav-icon.active {
  font-size: 28px;
  opacity: 1;
  filter: none;
  text-shadow: 0 0 12px rgba(255,215,0,0.6);
  animation: iconBounce 0.8s ease-in-out infinite alternate;
}
.bottom-nav-icon.play-icon {
  font-size: 26px;
  opacity: 0.9;
  filter: none;
  text-shadow: 0 0 8px rgba(255,100,0,0.5);
}
.bottom-nav-icon.play-icon.active {
  font-size: 32px;
}

.bottom-nav-label {
  font-size: 9px;
  font-weight: 900;
  color: #ffd700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

@keyframes iconBounce {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

/* ── GAME FULLSCREEN + BACK BUTTON ─────────── */

.game-fullscreen { position: relative; }
.game-back-landing {
  position: fixed;
  top: 12px; left: 12px;
  width: 44px; height: 44px;
  background: rgba(15,10,31,0.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  z-index: 2000;
  text-decoration: none;
  border: 1px solid rgba(245,158,11,0.2);
  transition: all 0.2s;
}
.game-back-landing:hover {
  background: rgba(15,10,31,0.95);
  border-color: rgba(245,158,11,0.5);
  text-decoration: none;
}

/* ── LAYOUT ─────────────────────────────────── */

.app-layout { min-height: 100vh; }

.app-container {
  max-width: 600px;
  margin: 0 auto;
  padding: 66px 16px 86px;
  min-height: 100vh;
}

.page-title {
  font-size: 28px; font-weight: 900;
  margin-bottom: 24px;
}
.page-title span { color: #f59e0b; }

/* ── CARDS ──────────────────────────────────── */

.card {
  background: #1a1a2e;
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.05);
}
.card-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.card-title {
  font-size: 14px; font-weight: 700;
  color: rgba(255,255,255,0.5);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ── WALLET CARD ────────────────────────────── */

.wallet-card {
  background: linear-gradient(135deg, #1a2a1a 0%, #1a1a2e 50%, #2a1a1a 100%);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 20px;
  text-align: center;
  padding: 32px 24px;
}
.wallet-balance {
  font-size: 42px; font-weight: 900;
  color: #f59e0b;
  margin: 8px 0;
}
.wallet-label {
  font-size: 13px; color: rgba(255,255,255,0.5);
  margin-bottom: 20px;
}
.wallet-actions { display: flex; gap: 12px; justify-content: center; }

/* ── STAT CARDS ─────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.stat-card {
  background: #1a1a2e;
  border-radius: 20px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
}
.stat-icon { font-size: 24px; margin-bottom: 4px; }
.stat-value { font-size: 22px; font-weight: 900; }
.stat-label { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px; }

/* ── PROFILE CARD ───────────────────────────── */

.profile-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 16px;
}
.profile-avatar {
  width: 64px; height: 64px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px;
}
.profile-name { font-size: 22px; font-weight: 800; }
.profile-league {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,0.05);
}

/* ── BUTTONS ────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px;
  border: none; border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: white;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primary {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); }

.btn-success {
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
}

.btn-secondary {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
}

.btn-block { width: 100%; }
.btn-sm { padding: 10px 20px; font-size: 13px; }

/* ── FORMS ──────────────────────────────────── */

.form-group { margin-bottom: 16px; }
.form-label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.7);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}
.form-input:focus {
  border-color: #f59e0b;
  background: rgba(255,255,255,0.08);
}
.form-input::placeholder { color: rgba(255,255,255,0.3); }

.form-hint {
  font-size: 12px; color: rgba(255,255,255,0.4);
  margin-top: 4px;
}

/* ── AMOUNT PRESETS ─────────────────────────── */

.presets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.preset-btn {
  padding: 12px 8px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.preset-btn:hover { border-color: rgba(245, 158, 11, 0.5); }
.preset-btn.active {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

/* ── PROVIDER SELECT ────────────────────────── */

.providers { display: flex; gap: 12px; margin-bottom: 16px; }
.provider-btn {
  flex: 1;
  padding: 16px;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.provider-btn:hover { border-color: rgba(245,158,11,0.4); }
.provider-btn.active {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.1);
}
.provider-btn img { width: 40px; height: 40px; border-radius: 8px; }
.provider-btn span { font-size: 13px; font-weight: 600; color: white; }

/* ── CALCULATION BOX ────────────────────────── */

.calc-box {
  background: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 16px;
}
.calc-row {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: 14px;
}
.calc-row.total {
  border-top: 1px solid rgba(245,158,11,0.2);
  margin-top: 8px; padding-top: 12px;
  font-weight: 800; font-size: 18px;
  color: #f59e0b;
}
.calc-label { color: rgba(255,255,255,0.6); }
.calc-value { font-weight: 700; }
.calc-bonus { color: #10b981; }

/* ── TRANSACTIONS LIST ──────────────────────── */

.tx-list { list-style: none; }
.tx-item {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.tx-item:last-child { border-bottom: none; }
.tx-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.tx-icon.deposit { background: rgba(16, 185, 129, 0.15); }
.tx-icon.withdrawal { background: rgba(239, 68, 68, 0.15); }
.tx-icon.bet_win { background: rgba(245, 158, 11, 0.15); }
.tx-icon.bet_loss { background: rgba(139, 92, 246, 0.15); }
.tx-icon.purchase { background: rgba(59, 130, 246, 0.15); }
.tx-info { flex: 1; }
.tx-type { font-size: 14px; font-weight: 600; }
.tx-date { font-size: 11px; color: rgba(255,255,255,0.4); }
.tx-amount { font-size: 15px; font-weight: 800; text-align: right; }
.tx-amount.positive { color: #10b981; }
.tx-amount.negative { color: #ef4444; }

/* ── LOGIN / REGISTER ───────────────────────── */

.auth-container {
  max-width: 420px;
  margin: 0 auto;
  padding-top: 60px;
}
.auth-card {
  background: #1a1a2e;
  border-radius: 30px;
  padding: 32px;
  border: 1px solid rgba(255,255,255,0.05);
}
.auth-logo {
  text-align: center;
  margin-bottom: 24px;
}
.auth-logo img { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 8px; }
.auth-logo h1 { font-size: 28px; font-weight: 900; }
.auth-logo h1 span { color: #f59e0b; }
.auth-logo p { color: rgba(255,255,255,0.5); font-size: 14px; margin-top: 4px; }
.auth-footer {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: rgba(255,255,255,0.5);
}

/* ── MODAL ──────────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000;
  padding: 16px;
}
.modal-content {
  background: #1a1a2e;
  border-radius: 30px;
  padding: 32px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
}
.modal-icon { font-size: 48px; margin-bottom: 16px; }
.modal-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.modal-text { color: rgba(255,255,255,0.6); font-size: 14px; margin-bottom: 20px; line-height: 1.6; }

/* ── SPINNER ────────────────────────────────── */

.spinner {
  width: 40px; height: 40px;
  border: 3px solid rgba(255,255,255,0.1);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── ALERT ──────────────────────────────────── */

.alert {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  margin-bottom: 16px;
}
.alert-error {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}
.alert-success {
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #6ee7b7;
}
.alert-info {
  background: rgba(59, 130, 246, 0.15);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #93c5fd;
}

/* ── USSD INSTRUCTIONS ──────────────────────── */

.ussd-box {
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  text-align: left;
}
.ussd-step {
  display: flex; gap: 10px;
  padding: 8px 0;
  font-size: 14px;
}
.ussd-num {
  width: 24px; height: 24px;
  background: #f59e0b;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
  flex-shrink: 0;
}
.ussd-code {
  font-family: monospace;
  color: #f59e0b;
  font-weight: 700;
}

/* ── EMPTY STATE ────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: rgba(255,255,255,0.4);
}
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-text { font-size: 14px; }

/* ── RESPONSIVE ─────────────────────────────── */

@media (max-width: 480px) {
  .app-container { padding: 60px 12px 80px; }
  .page-title { font-size: 22px; }
  .wallet-balance { font-size: 32px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .stat-card { padding: 12px; }
  .presets-grid { grid-template-columns: repeat(3, 1fr); }
  .wallet-actions { flex-direction: column; }
  .wallet-actions .btn { width: 100%; }
  .auth-card { padding: 24px; }
  .topbar-wallet-amount { display: none; }
  .topbar-wallet { padding: 6px 8px; }
}

/* ── ANIMATIONS ─────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.3s ease-out; }

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(245,158,11,0.2); }
  50% { box-shadow: 0 0 40px rgba(245,158,11,0.4); }
}
.pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* ============================================
   GAME VIEWS — Additional Styles
   ============================================ */

/* ── PAGE CONTENT ──────────────────────────── */

.page-content { padding-top: 6px; }
.page-title { margin-bottom: 16px; font-size: 22px; }

/* ── HOME — Profil Card ───────────────────── */

.home-profile-card {
  background: linear-gradient(135deg, #2d1f4e 0%, #1a1230 50%, #2d1f4e 100%);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 20px;
  padding: 16px;
  margin-bottom: 12px;
}
.home-profile-top {
  display: flex; align-items: center; gap: 12px;
}
.home-avatar-wrap { position: relative; flex-shrink: 0; }
.home-avatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 0 15px rgba(245,158,11,0.3);
}
.home-level-badge {
  position: absolute; bottom: -4px; right: -4px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  padding: 2px 6px; border-radius: 8px;
  font-size: 9px; font-weight: 900; color: white;
  border: 2px solid #1a1230;
}
.home-profile-info { flex: 1; }
.home-username { font-size: 18px; font-weight: 800; }
.home-league { font-size: 13px; font-weight: 700; }
.home-elo-wrap { text-align: center; }
.home-elo-value {
  font-size: 28px; font-weight: 900; color: #ffd700;
  text-shadow: 0 0 10px rgba(255,215,0,0.4);
}
.home-elo-label { font-size: 10px; color: rgba(255,255,255,0.5); font-weight: 700; }

/* ── HOME — Stats Row ─────────────────────── */

.home-stats-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.home-stat {
  background: #1a1a2e;
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
}
.home-stat.gold { border-bottom: 2px solid #f59e0b; }
.home-stat.blue { border-bottom: 2px solid #3b82f6; }
.home-stat.green { border-bottom: 2px solid #22c55e; }
.home-stat-icon { font-size: 18px; margin-bottom: 2px; }
.home-stat-value { font-size: 20px; font-weight: 900; }
.home-stat-label { font-size: 10px; color: rgba(255,255,255,0.5); }

/* ── HOME — Resources Row ─────────────────── */

.home-resources-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.home-resource-chip {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px; font-weight: 700;
  transition: all 0.2s;
}
.wallet-chip {
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.3);
}
.wallet-chip:hover { background: rgba(245,158,11,0.2); }
.mapies-chip {
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.3);
}
.resource-value { color: #ffd700; }
.home-resource-add {
  width: 32px; height: 32px;
  background: #22c55e;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 900; color: white;
  cursor: pointer;
  transition: transform 0.2s;
}
.home-resource-add:hover { transform: scale(1.1); }

/* ── HOME — Play Section ──────────────────── */

.home-play-section {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.home-play-card {
  background: #1a1a2e;
  border-radius: 16px;
  padding: 16px 8px;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.home-play-card:hover {
  border-color: rgba(245,158,11,0.3);
  transform: translateY(-2px);
}
.home-play-card.combat {
  background: linear-gradient(180deg, #8B4513, #5D3A1A, #3D2510);
  border-color: rgba(255,140,0,0.4);
  box-shadow: 0 4px 20px rgba(255,100,0,0.2);
}
.play-card-icon { font-size: 28px; }
.play-card-label { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.7); }
.play-card-label-big { font-size: 16px; font-weight: 900; color: #ffd700; }
.play-card-sub { font-size: 10px; color: rgba(255,255,255,0.5); }
.combat-cards-anim {
  display: flex; gap: 4px;
  font-size: 20px; font-weight: 900;
}
.combat-cards-anim span:nth-child(1) { color: #333; }
.combat-cards-anim span:nth-child(2) { color: #ef4444; }
.combat-cards-anim span:nth-child(3) { color: #333; }

/* ── HOME — Secondary Actions ─────────────── */

.home-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.home-action-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: rgba(255,255,255,0.7);
}
.home-action-btn:hover {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.3);
  color: #ffd700;
}

/* ── PLAY — Arena Card ────────────────────── */

.play-arena-card {
  background: linear-gradient(135deg, #2d1f4e, #1a1230);
  border: 1px solid rgba(201,162,39,0.25);
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  margin-bottom: 16px;
}
.arena-mode-title {
  font-size: 24px; font-weight: 900;
  color: #ffd700; margin-top: 8px;
  letter-spacing: 2px;
}
.arena-mode-desc {
  font-size: 13px; color: rgba(255,255,255,0.5);
  margin-top: 4px;
}

/* ── PLAY — Mode Selector ─────────────────── */

.play-mode-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.play-mode-btn {
  background: #1a1a2e;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.play-mode-btn:hover { border-color: rgba(255,255,255,0.2); }
.play-mode-btn.active { transform: scale(1.02); }
.play-mode-icon { font-size: 24px; display: block; margin-bottom: 4px; }
.play-mode-title { font-size: 13px; font-weight: 800; display: block; }
.play-mode-desc { font-size: 10px; color: rgba(255,255,255,0.4); display: block; }

/* ── PLAY — Quick Actions ─────────────────── */

.play-quick-actions { margin-bottom: 12px; }
.play-private-btns { display: flex; gap: 8px; }

/* ── PLAY — Big Button ────────────────────── */

.play-big-btn {
  width: 100%;
  padding: 18px;
  background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
  border: none; border-radius: 20px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  font-family: 'Poppins', sans-serif;
  font-size: 16px; font-weight: 800; color: white;
  box-shadow: 0 6px 25px rgba(245,158,11,0.4);
  transition: all 0.2s;
  margin-bottom: 10px;
}
.play-big-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(245,158,11,0.5); }
.play-big-btn-cards {
  display: flex; gap: 3px;
  font-size: 18px;
}

.play-training-btn {
  width: 100%;
  padding: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 600;
  color: rgba(255,255,255,0.7);
  transition: all 0.2s;
}
.play-training-btn:hover {
  background: rgba(255,255,255,0.08);
  color: white;
}

/* ── BACK BUTTON ───────────────────────────── */

.btn-back {
  display: inline-flex; align-items: center;
  background: none; border: none; color: #f59e0b;
  font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 600;
  cursor: pointer; padding: 8px 0; margin-bottom: 10px;
}
.btn-back:hover { text-decoration: underline; }

/* ── QUICK ACTIONS ─────────────────────────── */

.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.quick-action-card {
  background: #1a1a2e;
  border-radius: 20px;
  padding: 16px 8px;
  text-align: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.2s;
}
.quick-action-card:hover {
  border-color: rgba(245,158,11,0.3);
  transform: translateY(-2px);
}
.qa-icon { font-size: 28px; display: block; margin-bottom: 6px; }
.qa-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); }

@media (max-width: 480px) {
  .quick-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ── WALLET CARD (enrichi) ─────────────────── */

.wallet-card {
  border-radius: 16px;
  margin-bottom: 16px;
}
.balance-label { font-size: 13px; color: rgba(255,255,255,0.5); display: block; }
.balance-amount { font-size: 36px; font-weight: 900; color: #f59e0b; }
.btn-small { padding: 8px 16px; font-size: 12px; border-radius: 10px; }

/* ── MODE CARDS ────────────────────────────── */

.mode-card {
  background: #1a1a2e;
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.2s;
}
.mode-card:hover {
  border-color: rgba(245,158,11,0.3);
  transform: translateX(4px);
}
.mode-icon { font-size: 36px; flex-shrink: 0; }
.mode-info { flex: 1; }
.mode-info h3 { font-size: 18px; font-weight: 800; margin: 0 0 4px; }
.mode-info p { font-size: 13px; color: rgba(255,255,255,0.5); margin: 0; }
.mode-arrow { font-size: 20px; color: rgba(255,255,255,0.3); }

/* ── PRESET GRID ───────────────────────────── */

.preset-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.calc-detail { font-size: 13px; color: rgba(255,255,255,0.5); margin: 4px 0 0; }

/* ── RULES LIST ────────────────────────────── */

.rules-list { display: flex; flex-direction: column; gap: 10px; }
.rule-toggle {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14px; cursor: pointer;
}
.rule-toggle input[type="checkbox"] {
  width: 20px; height: 20px; accent-color: #f59e0b;
}

/* ── TABS ──────────────────────────────────── */

.tabs {
  display: flex; gap: 4px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 4px;
}
.tab-btn {
  flex: 1;
  padding: 10px 12px;
  background: none; border: none;
  color: rgba(255,255,255,0.5);
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.tab-btn.active {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
}
.tab-btn:hover:not(.active) {
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.8);
}

/* ── ROOM CODE ─────────────────────────────── */

.room-code-display {
  font-size: 48px; font-weight: 900;
  letter-spacing: 10px;
  color: #f59e0b;
  padding: 20px;
  background: rgba(245,158,11,0.1);
  border-radius: 16px;
  margin: 15px 0;
}

/* ── LEADERBOARD ───────────────────────────── */

.leaderboard-header {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 16px;
}
.lb-crown { font-size: 28px; }
.lb-title { font-size: 22px; font-weight: 900; color: #ffd700; }

.my-rank-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 14px; padding: 12px 16px;
  margin-bottom: 16px;
}
.my-rank-pos { font-size: 18px; font-weight: 900; color: #f59e0b; width: 50px; }
.my-rank-name { flex: 1; font-weight: 700; }
.my-rank-stat { font-weight: 700; color: #ffd700; }

.podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 8px;
  margin-bottom: 20px; padding: 10px 0;
}
.podium-item {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(255,255,255,0.03);
  border-radius: 14px; padding: 12px 10px 8px;
  min-width: 90px;
}
.podium-1 { order: 2; }
.podium-2 { order: 1; transform: scale(1.08); z-index: 1; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); }
.podium-3 { order: 3; }
.podium-medal { font-size: 28px; }
.podium-avatar { font-size: 32px; margin: 4px 0; }
.podium-name { font-size: 11px; font-weight: 700; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.podium-name.me { color: #f59e0b; }
.podium-stat { font-size: 13px; font-weight: 900; }

.leaderboard-list { display: flex; flex-direction: column; }
.leaderboard-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.leaderboard-row:last-child { border-bottom: none; }
.leaderboard-row.highlight { background: rgba(245,158,11,0.08); border-radius: 10px; padding: 12px 10px; }
.lb-position { width: 40px; text-align: center; font-size: 14px; font-weight: 700; color: rgba(255,255,255,0.4); }
.lb-avatar { font-size: 20px; flex-shrink: 0; }
.lb-name { flex: 1; font-weight: 600; font-size: 14px; }
.lb-elo, .lb-stat { font-weight: 700; font-size: 14px; }

/* ── FRIENDS PAGE (Mobile-style) ──────────────── */

.friends-page { padding-top: 0; }

.friends-tabs {
  display: flex; gap: 4px;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.03);
  border-radius: 14px; padding: 4px;
}
.friends-tab {
  flex: 1; padding: 10px 12px;
  border: none; border-radius: 12px;
  background: transparent;
  color: rgba(255,255,255,0.5);
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  text-align: center;
}
.friends-tab.active {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
}
.friends-tab-badge {
  display: inline-block;
  background: rgba(255,255,255,0.1);
  padding: 1px 7px; border-radius: 8px;
  font-size: 10px; font-weight: 800;
  margin-left: 4px;
}
.friends-tab-badge.active {
  background: rgba(245,158,11,0.2);
  color: #f59e0b;
}

/* Stories strip */
.stories-strip {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 4px 0 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.stories-strip::-webkit-scrollbar { display: none; }
.story-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; cursor: pointer; flex-shrink: 0;
}
.story-avatar-ring {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.story-avatar-ring.online { border-color: #22c55e; }
.story-avatar-ring.unread { border-color: #f59e0b; box-shadow: 0 0 12px rgba(245,158,11,0.4); }
.story-avatar { font-size: 28px; }
.story-name { font-size: 10px; color: rgba(255,255,255,0.5); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Conversation list (WhatsApp style) */
.conversation-list { display: flex; flex-direction: column; }
.conversation-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.conversation-row:hover { background: rgba(255,255,255,0.03); }
.conversation-row.has-unread { background: rgba(245,158,11,0.04); }
.conv-avatar-wrap { position: relative; flex-shrink: 0; }
.conv-avatar-ring {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
}
.conv-avatar-ring.online { border-color: #22c55e; }
.conv-online-dot {
  position: absolute; bottom: 2px; right: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #22c55e; border: 2px solid #0f0a1f;
}
.conv-info { flex: 1; min-width: 0; }
.conv-top-row { display: flex; justify-content: space-between; align-items: center; }
.conv-name { font-size: 14px; font-weight: 700; }
.conv-name.bold { color: white; }
.conv-time { font-size: 11px; color: rgba(255,255,255,0.3); flex-shrink: 0; }
.conv-bottom-row { display: flex; justify-content: space-between; align-items: center; margin-top: 2px; }
.conv-preview { font-size: 12px; color: rgba(255,255,255,0.4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.conv-unread-badge {
  background: #22c55e; color: white;
  padding: 2px 8px; border-radius: 10px;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0; margin-left: 8px;
}

/* Empty state */
.empty-state { text-align: center; padding: 40px 20px; }
.empty-icon { font-size: 48px; display: block; margin-bottom: 10px; }
.empty-state p { color: rgba(255,255,255,0.4); margin-bottom: 12px; }
.empty-text { color: rgba(255,255,255,0.4); text-align: center; padding: 16px; }

/* Requests section */
.requests-section { margin-bottom: 20px; }
.section-label { font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.5); margin-bottom: 10px; }

.game-invite-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.08), rgba(59,130,246,0.03));
  border: 1px solid rgba(59,130,246,0.2);
  border-radius: 14px; padding: 14px;
  margin-bottom: 10px;
}
.invite-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.invite-avatar { font-size: 28px; }
.invite-from { font-weight: 700; font-size: 14px; display: block; }
.invite-type { font-size: 12px; color: rgba(255,255,255,0.5); display: block; }
.invite-rules { display: flex; gap: 6px; margin-bottom: 10px; }
.rule-tag {
  background: rgba(245,158,11,0.12); color: #f59e0b;
  padding: 3px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 700;
}
.invite-actions { display: flex; gap: 8px; }
.btn-accept {
  flex: 1; padding: 10px;
  border: none; border-radius: 12px;
  background: #22c55e; color: white;
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 13px; cursor: pointer;
}
.btn-decline {
  flex: 1; padding: 10px;
  border: none; border-radius: 12px;
  background: rgba(239,68,68,0.15); color: #ef4444;
  font-family: 'Poppins', sans-serif;
  font-weight: 700; font-size: 13px; cursor: pointer;
}

.request-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.request-avatar { font-size: 28px; flex-shrink: 0; }
.request-info { flex: 1; }
.request-name { font-weight: 700; font-size: 14px; display: block; }
.request-meta { font-size: 11px; color: rgba(255,255,255,0.4); display: block; }
.request-actions { display: flex; gap: 6px; }
.btn-accept-sm {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: #22c55e; color: white;
  font-size: 16px; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.btn-decline-sm {
  width: 36px; height: 36px;
  border: none; border-radius: 50%;
  background: rgba(239,68,68,0.15); color: #ef4444;
  font-size: 16px; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.btn-cancel-sm {
  padding: 6px 14px; border: none; border-radius: 10px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.5);
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 600; cursor: pointer;
}

/* Search bar modern */
.search-bar-modern {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 0 16px;
  margin-bottom: 16px;
}
.search-icon { font-size: 16px; flex-shrink: 0; }
.search-input {
  flex: 1; padding: 12px 0;
  background: none; border: none;
  color: white; font-family: 'Poppins', sans-serif;
  font-size: 14px; outline: none;
}
.search-input::placeholder { color: rgba(255,255,255,0.3); }
.search-spinner {
  width: 20px; height: 20px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.search-result-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 8px;
  border-radius: 12px;
  transition: background 0.2s;
}
.search-result-row:hover { background: rgba(255,255,255,0.03); }
.search-result-avatar { position: relative; font-size: 28px; }
.sr-online-dot {
  position: absolute; bottom: 0; right: -2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #22c55e; border: 2px solid #0f0a1f;
}
.search-result-info { flex: 1; }
.sr-name { font-weight: 700; font-size: 14px; display: block; }
.sr-meta { font-size: 11px; display: block; }
.btn-add-friend {
  padding: 8px 14px; border: none; border-radius: 12px;
  background: rgba(245,158,11,0.12); color: #f59e0b;
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all 0.2s;
}
.btn-add-friend:hover { background: rgba(245,158,11,0.2); }

/* Friend action bottom sheet */
.sheet-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2000;
}
.friend-action-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: #1a1a2e;
  border-radius: 24px 24px 0 0;
  padding: 12px 20px 30px;
  z-index: 2001;
  animation: slideUp 0.25s ease-out;
}
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.sheet-handle {
  width: 40px; height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.sheet-friend-header {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 20px;
}
.sheet-avatar-ring {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
}
.sheet-avatar-ring.online { border-color: #22c55e; }
.sheet-avatar { font-size: 30px; }
.sheet-friend-name { font-size: 18px; font-weight: 800; }
.sheet-friend-meta { font-size: 12px; color: rgba(255,255,255,0.5); }
.sheet-friend-status { font-size: 11px; margin-top: 2px; }
.sheet-actions { display: flex; flex-direction: column; gap: 2px; }
.sheet-action {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border: none; background: none;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 600;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  text-align: left; width: 100%;
}
.sheet-action:last-child { border-bottom: none; }
.sheet-action:hover { color: #f59e0b; }
.sheet-action.danger { color: #ef4444; }
.sheet-action-icon { font-size: 20px; width: 24px; text-align: center; }

.search-bar {
  display: flex; gap: 8px;
  margin-bottom: 16px;
}
.search-bar .input-field { flex: 1; }

.input-field {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  color: white;
  font-family: 'Poppins', sans-serif;
  font-size: 15px; outline: none;
}
.input-field:focus { border-color: #f59e0b; }
.input-field::placeholder { color: rgba(255,255,255,0.3); }

/* ── CHAT (Mobile-style) ──────────────────────── */

.chat-page {
  display: flex; flex-direction: column;
  height: 100vh;
  padding-top: 0;
}
.chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(180deg, #2d1f4e, #1a1230);
  border-bottom: 2px solid rgba(201,162,39,0.3);
  position: sticky; top: 0; z-index: 10;
}
.btn-back-chat {
  background: rgba(255,255,255,0.08);
  border: none; border-radius: 10px;
  width: 36px; height: 36px;
  color: white; font-size: 18px;
  cursor: pointer; display: flex;
  align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-header-info {
  display: flex; align-items: center; gap: 10px;
  flex: 1; cursor: pointer;
}
.chat-header-avatar { font-size: 28px; flex-shrink: 0; }
.chat-header-text { display: flex; flex-direction: column; }
.chat-header-name { font-weight: 700; font-size: 15px; }
.chat-header-status { font-size: 11px; }

/* Typing animation */
.typing-text { color: #22c55e; font-style: italic; }
.typing-dots span {
  animation: typingDot 1.2s infinite;
  font-weight: 900;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.2; }
  30% { opacity: 1; }
}

/* Messages */
.chat-messages {
  flex: 1; overflow-y: auto;
  scrollbar-width: none;
  padding: 12px 16px;
  display: flex; flex-direction: column; gap: 4px;
}
.chat-messages::-webkit-scrollbar { display: none; }
.chat-empty { text-align: center; padding: 60px 20px; }
.chat-empty-icon { font-size: 48px; display: block; margin-bottom: 8px; }
.chat-empty p { color: rgba(255,255,255,0.3); }

/* Date separators */
.chat-date-separator {
  text-align: center; padding: 12px 0;
}
.chat-date-separator span {
  background: rgba(255,255,255,0.06);
  padding: 4px 14px; border-radius: 10px;
  font-size: 11px; color: rgba(255,255,255,0.4);
  font-weight: 600;
}

.chat-msg { display: flex; flex-direction: column; max-width: 78%; margin-bottom: 2px; }
.chat-msg.my-msg { align-self: flex-end; align-items: flex-end; }
.chat-msg.their-msg { align-self: flex-start; align-items: flex-start; }

.msg-bubble {
  padding: 8px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
  position: relative;
}
.my-bubble {
  background: linear-gradient(135deg, #6b4c9a, #5a3d8a, #4a3070);
  color: white;
  border-bottom-right-radius: 4px;
}
.their-bubble {
  background: rgba(255,255,255,0.08);
  border-bottom-left-radius: 4px;
}
.msg-bubble.sending { opacity: 0.6; }

.msg-text { display: inline; }
.msg-time-inline {
  display: inline-block;
  font-size: 10px; color: rgba(255,255,255,0.4);
  margin-left: 8px; float: right;
  margin-top: 4px;
}
.my-bubble .msg-time-inline { color: rgba(255,255,255,0.5); }

/* Typing bubble */
.typing-bubble {
  display: flex; gap: 4px; align-items: center;
  padding: 12px 18px;
}
.typing-dot {
  width: 8px; height: 8px;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.typing-dot:nth-child(2) { animation-delay: 0.15s; }
.typing-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Game invite card in chat */
.msg-invite-card {
  background: linear-gradient(135deg, rgba(59,130,246,0.12), rgba(59,130,246,0.04));
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 14px; padding: 14px;
  text-align: center; min-width: 200px;
}
.msg-invite-header { font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.msg-invite-details {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 12px; color: rgba(255,255,255,0.5);
}
.msg-invite-status {
  padding: 4px 10px; border-radius: 8px;
  font-size: 11px; font-weight: 700;
  margin-top: 6px; display: inline-block;
}
.msg-invite-status.status-accepted { background: rgba(34,197,94,0.15); color: #22c55e; }
.msg-invite-status.status-declined { background: rgba(239,68,68,0.15); color: #ef4444; }
.msg-invite-status.status-pending { background: rgba(245,158,11,0.15); color: #f59e0b; }
.msg-invite-actions { display: flex; gap: 6px; margin-top: 8px; }
.msg-invite-actions .btn-accept-sm,
.msg-invite-actions .btn-decline-sm {
  flex: 1; width: auto; height: auto;
  padding: 8px; border-radius: 10px;
  font-size: 12px; font-weight: 700;
}

.msg-time { font-size: 10px; color: rgba(255,255,255,0.3); margin-top: 2px; padding: 0 4px; }

/* Actions menu */
.chat-actions-menu {
  display: flex; flex-direction: column;
  background: #1a1a2e;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 4px 16px;
  animation: fadeIn 0.15s ease-out;
}
.chat-action-item {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0;
  border: none; background: none;
  color: white; font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left; width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.chat-action-item:last-child { border-bottom: none; }
.chat-action-item:hover { color: #f59e0b; }

/* Input bar */
.chat-input-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(15,10,31,0.97);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.chat-plus-btn {
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  font-size: 20px; font-weight: 700;
  cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.chat-plus-btn:hover { background: rgba(255,255,255,0.12); color: white; }
.chat-input {
  flex: 1;
  padding: 10px 16px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  color: white; font-family: 'Poppins', sans-serif;
  font-size: 14px; outline: none;
}
.chat-input:focus { border-color: rgba(245,158,11,0.4); }
.chat-input::placeholder { color: rgba(255,255,255,0.3); }
.btn-send {
  width: 40px; height: 40px;
  border: none; border-radius: 50%;
  background: #f59e0b; color: white;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s;
}
.btn-send:hover { background: #d97706; }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── SHOP ──────────────────────────────────── */

.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.shop-item {
  background: #1a1a2e;
  border-radius: 14px;
  padding: 16px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.2s;
}
.shop-item.equipped { border-color: rgba(245,158,11,0.4); }
.shop-item-icon { font-size: 40px; display: block; margin-bottom: 8px; }
.shop-item-name { font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.rarity-badge {
  display: inline-block;
  padding: 2px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.rarity-common { background: rgba(107,114,128,0.2); color: #9ca3af; }
.rarity-rare { background: rgba(59,130,246,0.2); color: #60a5fa; }
.rarity-epic { background: rgba(139,92,246,0.2); color: #a78bfa; }
.rarity-legendary { background: rgba(245,158,11,0.2); color: #f59e0b; }
.equipped-badge {
  display: inline-block;
  padding: 4px 12px; border-radius: 8px;
  font-size: 11px; font-weight: 700;
  background: rgba(245,158,11,0.2); color: #f59e0b;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.inventory-item {
  padding: 12px 8px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.05);
}
.inventory-item.equipped { border-color: rgba(245,158,11,0.4); }
.inv-emoji { font-size: 28px; display: block; margin-bottom: 4px; }
.inv-name { font-size: 11px; font-weight: 600; display: block; margin-bottom: 4px; }

/* ── PROFILE PAGE ──────────────────────────── */

.profile-card { text-align: center; }
.profile-avatar-large {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; margin: 0 auto 12px;
}
.profile-details { margin-top: 8px; }
.profile-menu { display: flex; flex-direction: column; }
.menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; font-size: 14px; font-weight: 600;
  transition: color 0.2s;
}
.menu-item:hover { color: #f59e0b; }
.menu-item:last-child { border-bottom: none; }

.btn-danger {
  display: block; width: 100%;
  padding: 14px; border: none; border-radius: 25px;
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer; transition: background 0.2s;
}
.btn-danger:hover { background: rgba(239,68,68,0.25); }

/* ── TOURNAMENT (Mobile-style) ────────────────── */

/* Crown header */
.tournament-crown-header {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.02));
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: 16px; padding: 14px;
  margin-bottom: 14px;
}
.tournament-crown-header span { font-size: 24px; }
.tournament-crown-header h2 {
  font-size: 22px; font-weight: 900; color: #ffd700;
  letter-spacing: 2px; margin: 0;
}

/* 4-filter tabs */
.tournament-filters {
  display: flex; gap: 4px;
  margin-bottom: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tournament-filters::-webkit-scrollbar { display: none; }
.tournament-filter {
  display: flex; align-items: center; gap: 4px;
  padding: 10px 14px;
  border: none; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.5);
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap; flex-shrink: 0;
}
.tournament-filter.active {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
}
.filter-label { }
.filter-count {
  background: rgba(255,255,255,0.08);
  padding: 1px 7px; border-radius: 8px;
  font-size: 10px; font-weight: 900;
}
.filter-count.active {
  background: rgba(245,158,11,0.2);
  color: #f59e0b;
}

/* My Matches section */
.my-matches-section {
  margin-bottom: 16px;
}
.my-matches-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
}
.pulse-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ef4444;
  animation: pulseDot 1.5s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}
.pulse-dot-sm {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444; display: inline-block;
  margin-right: 6px;
  animation: pulseDot 1.5s infinite;
}
.my-matches-title {
  font-size: 14px; font-weight: 900; color: #ef4444;
}
.my-matches-count {
  background: #ef4444; color: white;
  padding: 2px 8px; border-radius: 8px;
  font-size: 11px; font-weight: 900;
}

.my-match-card {
  display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.02));
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 14px; padding: 14px;
  margin-bottom: 8px; cursor: pointer;
  transition: all 0.2s;
}
.my-match-card:hover { border-color: rgba(34,197,94,0.4); }
.my-match-card.ready {
  background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.03));
  border-color: rgba(239,68,68,0.3);
  animation: matchReadyPulse 2s infinite;
}
@keyframes matchReadyPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239,68,68,0.2); }
  50% { box-shadow: 0 0 20px rgba(239,68,68,0.4); }
}
.my-match-tournament { font-size: 13px; font-weight: 700; display: block; }
.my-match-vs { font-size: 11px; color: rgba(255,255,255,0.5); display: block; }
.my-match-btn {
  background: #22c55e; color: white;
  border: none; border-radius: 10px;
  padding: 8px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 800;
  cursor: pointer; white-space: nowrap;
}
.my-match-card.ready .my-match-btn { background: #ef4444; }

/* Promo banner */
.tournament-promo {
  background: linear-gradient(135deg, rgba(245,158,11,0.08), rgba(139,92,246,0.08));
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: 14px; padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.promo-live {
  background: #ef4444; color: white;
  padding: 3px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 900;
  letter-spacing: 1px;
}
.promo-text {
  font-size: 13px; font-weight: 800;
  background: linear-gradient(90deg, #ffd700, #f59e0b);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Tournament card v2 */
.tournament-card-v2 {
  border-radius: 16px; padding: 14px;
  margin-bottom: 10px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.06);
  transition: all 0.2s;
}
.tournament-card-v2:hover { border-color: rgba(245,158,11,0.3); transform: translateY(-1px); }
.tournament-card-v2.match-ready {
  border-color: rgba(239,68,68,0.4);
  box-shadow: 0 0 15px rgba(239,68,68,0.15);
}

.match-ready-banner {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px; padding: 6px 10px;
  font-size: 11px; font-weight: 800; color: #ef4444;
  margin-bottom: 10px;
  animation: pulseDot 2s infinite;
}

.tc-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; gap: 8px; }
.tc-title { margin: 0; font-size: 15px; font-weight: 800; }
.tc-status {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 8px;
  font-size: 10px; font-weight: 800;
  color: white; white-space: nowrap; flex-shrink: 0;
}
.tc-description { color: rgba(255,255,255,0.4); font-size: 12px; margin-bottom: 10px; line-height: 1.4; }

/* Info row */
.tc-info-row {
  display: flex; gap: 4px;
  background: rgba(0,0,0,0.2);
  border-radius: 10px; padding: 10px 8px;
  margin-bottom: 8px;
}
.tc-info-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
}
.tc-info-icon { font-size: 16px; }
.tc-info-label { font-size: 9px; color: rgba(255,255,255,0.3); }
.tc-info-value { font-size: 11px; font-weight: 800; }
.tc-info-value.full { color: #ef4444; }

/* Progress bar */
.tc-progress-wrap { margin-bottom: 8px; }
.tc-progress-bar {
  height: 5px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
}
.tc-progress-fill {
  height: 100%; border-radius: 3px;
  background: #22c55e;
  transition: width 0.3s;
}
.tc-progress-fill.full { background: #ef4444; }
.tc-spots { font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px; display: block; }

/* Footer */
.tc-footer {
  display: flex; justify-content: space-between; align-items: center;
}
.tc-date { font-size: 11px; color: rgba(255,255,255,0.4); }
.tc-registered-badge {
  font-size: 11px; font-weight: 800; color: #22c55e;
}
.tc-action-hint { font-size: 11px; font-weight: 700; color: #22c55e; }

/* Tournament Detail */
.td-header-card {
  background: #1a1a2e;
  border-radius: 20px; padding: 16px;
  margin-bottom: 14px;
  border: 1px solid rgba(255,255,255,0.06);
}
.td-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.td-title { margin: 0; font-size: 20px; font-weight: 900; }
.td-description { color: rgba(255,255,255,0.4); font-size: 13px; margin: 8px 0 0; line-height: 1.4; }

.btn-danger-full {
  display: block; width: 100%;
  padding: 14px; border: none; border-radius: 14px;
  background: rgba(239,68,68,0.12); color: #ef4444;
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 800;
  cursor: pointer;
}

/* Info card */
.td-info-card {
  background: #1a1a2e; border-radius: 16px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.05);
}
.td-info-row {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.td-info-row:last-child { border-bottom: none; }
.td-info-label { color: rgba(255,255,255,0.5); }
.td-info-value { font-weight: 700; }

/* Participants */
.td-participants {
  background: #1a1a2e; border-radius: 16px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.05);
}
.td-participant-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 13px;
}
.td-participant-row.me { background: rgba(245,158,11,0.05); border-radius: 8px; padding: 10px 6px; }
.td-p-seed { width: 28px; text-align: center; color: rgba(255,255,255,0.3); font-weight: 700; }
.td-p-avatar { font-size: 20px; }
.td-p-name { flex: 1; font-weight: 700; }
.td-p-elo { font-weight: 800; font-size: 12px; }
.td-p-status {
  font-size: 10px; padding: 2px 8px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
}
.status-registered { color: #22c55e; }
.status-eliminated { color: #ef4444; }

/* Bracket */
.td-bracket {
  background: #1a1a2e; border-radius: 16px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.05);
}
.bracket-round { margin-bottom: 16px; }
.round-title { color: #f59e0b; font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.bracket-match {
  background: rgba(255,255,255,0.03);
  border-radius: 10px; padding: 12px;
  margin-bottom: 8px;
  border: 1px solid rgba(255,255,255,0.05);
}
.bracket-match.status-completed { border-color: rgba(255,255,255,0.1); }
.bracket-player {
  display: flex; justify-content: space-between;
  padding: 6px 0; font-size: 14px;
}
.bracket-player.winner { color: #22c55e; font-weight: 700; }
.bracket-vs {
  text-align: center; font-size: 11px;
  color: rgba(255,255,255,0.3); padding: 2px 0;
}
.match-score { font-weight: 700; }

/* Prizes */
.td-prizes {
  background: #1a1a2e; border-radius: 16px; padding: 14px;
  border: 1px solid rgba(255,255,255,0.05);
}
.td-prize-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.td-prize-row:last-child { border-bottom: none; }
.td-prize-icon { font-size: 28px; }
.td-prize-place { flex: 1; font-weight: 700; }
.td-prize-reward { color: #ffd700; font-weight: 800; }

/* ── GAME BOARD ────────────────────────────── */

/* ═══════════════════════════════════════════════
   GAME BOARD — Mobile-matching design
   ═══════════════════════════════════════════════ */

.gb {
  display: flex; flex-direction: column;
  height: 100vh;
  background: linear-gradient(180deg, #0a0f1a 0%, #0d1225 40%, #0a0f1a 100%);
  user-select: none; overflow: hidden;
  position: relative;
}

/* ── Opponent area ── */
.gb-opponent { padding: 8px 12px 0; }

.gb-player-slot {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.gb-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; position: relative;
  border: 2px solid rgba(255,255,255,0.1);
}
.gb-avatar.gb-leader {
  border-color: #FFD700;
  box-shadow: 0 0 10px rgba(255,215,0,0.3);
}
.gb-crown {
  position: absolute; top: -10px; right: -6px;
  font-size: 14px;
}
.gb-player-info { flex: 1; }
.gb-player-name { font-size: 13px; font-weight: 700; display: block; }
.gb-player-name.opp { color: #ef4444; }
.gb-player-name.me { color: #f59e0b; }
.gb-player-elo { font-size: 10px; color: rgba(255,255,255,0.35); }
.gb-card-count {
  font-size: 11px; color: rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.3);
  padding: 3px 8px; border-radius: 10px;
}
.gb-thinking-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  animation: gbPulse 1.2s infinite;
}
.gb-my-turn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #FFD700;
  animation: gbPulse 1.2s infinite;
}
@keyframes gbPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ── Wooden frame ── */
.gb-wooden-frame {
  background: #5C1A1A;
  border: 2.5px solid #8B4513;
  border-top-color: #A0522D;
  border-bottom-color: #3E0E0E;
  border-radius: 12px;
  padding: 6px 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
}
.gb-wooden-frame.my-frame {
  border-color: #8B4513;
  border-top-color: #A0522D;
  border-bottom-color: #3E0E0E;
}
.gb-hand-row {
  display: flex; justify-content: center; gap: 3px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.gb-hand-row .game-card {
  flex-shrink: 0;
}
.gb-hand-row.my-cards { gap: 6px; }

/* ── Timer ── */
.gb-timer {
  height: 5px; background: rgba(255,255,255,0.06);
  position: relative; margin: 4px 0;
}
.gb-timer-fill {
  height: 100%; transition: width 1s linear;
  border-radius: 0 3px 3px 0;
}
.gb-timer-text {
  position: absolute; right: 8px; top: -14px;
  font-size: 11px; font-weight: 800; color: rgba(255,255,255,0.7);
}

/* ── Table (center - the main play area) ── */
.gb-table {
  flex: 1;
  margin: 4px 12px;
  border-radius: 20px;
  border: 2px solid rgba(197,160,40,0.4);
  padding: 12px 14px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  overflow: hidden;
  min-height: 200px;
}

/* Gold stripe at top of table */
.gb-table-stripe {
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
}

/* Pulsing gold glow border */
.gb-table-glow {
  position: absolute; inset: -2px;
  border-radius: 22px;
  border: 1.5px solid;
  opacity: 0.5;
  animation: gbGlow 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gbGlow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Casino corners */
.gb-corner {
  position: absolute; width: 18px; height: 18px;
  border: 3px solid; pointer-events: none;
}
.gb-tl { top: 6px; left: 6px; border-right: none; border-bottom: none; border-top-left-radius: 4px; }
.gb-tr { top: 6px; right: 6px; border-left: none; border-bottom: none; border-top-right-radius: 4px; }
.gb-bl { bottom: 6px; left: 6px; border-right: none; border-top: none; border-bottom-left-radius: 4px; }
.gb-br { bottom: 6px; right: 6px; border-left: none; border-top: none; border-bottom-right-radius: 4px; }

/* ── Score board inside table ── */
.gb-score {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; max-width: 320px;
  background: rgba(0,0,0,0.4);
  border: 1.5px solid rgba(197,160,40,0.35);
  border-radius: 20px;
  padding: 6px 14px;
  margin-bottom: 8px;
  z-index: 2;
}
.gb-score-side {
  display: flex; align-items: center; gap: 6px;
}
.gb-score-label {
  font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;
}
.gb-score-label.opp { color: rgba(239,68,68,0.7); }
.gb-score-val {
  font-size: 22px; font-weight: 900; color: white;
}
.gb-score-val.winning { color: #FFD700; }
.gb-score-center { text-align: center; }
.gb-score-round {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.4);
  display: block;
}
.gb-tricks-row {
  display: flex; gap: 16px; font-size: 10px; color: rgba(255,255,255,0.3);
}
.gb-tricks-winning { color: #4ade80; font-weight: 700; }

/* ── Played cards area ── */
.gb-played-area {
  display: flex; align-items: center; justify-content: center;
  gap: 30px; z-index: 2; flex: 1;
  min-height: 120px;
}
.gb-played-slot {
  text-align: center; min-width: 70px; min-height: 100px;
  display: flex; align-items: center; justify-content: center;
}
.gb-vs-text {
  font-size: 14px; font-weight: 900; color: rgba(255,255,255,0.15);
  letter-spacing: 2px;
}
.gb-played-label {
  display: block; font-size: 11px; color: rgba(255,255,255,0.5);
  font-weight: 600; margin-bottom: 4px;
}
.gb-card-appear {
  animation: gbCardPop 0.3s ease-out;
}
@keyframes gbCardPop {
  from { transform: scale(0.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── Turn indicator ── */
.gb-turn-ind {
  font-size: 13px; color: rgba(255,255,255,0.4);
  font-weight: 600; z-index: 2;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  margin-top: 4px;
}
.gb-turn-ind.my-turn {
  color: #FFD700; font-weight: 800;
}

/* ── Message overlay ── */
.gb-msg-overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100; pointer-events: none;
}
.gb-msg {
  background: rgba(0,0,0,0.9);
  padding: 14px 28px; border-radius: 16px;
  font-size: 16px; font-weight: 900;
  color: #FFD700; white-space: nowrap;
  animation: gbMsgIn 0.3s ease-out;
  border: 1px solid rgba(255,215,0,0.3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
@keyframes gbMsgIn {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── My area (bottom) ── */
.gb-my-area { padding: 0 12px 12px; }

/* ── Played cards history ── */
.cards-history {
  margin: 2px 12px 4px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 8px;
  padding: 5px 8px;
  border: 1px solid rgba(255, 215, 0, 0.15);
}
.cards-history-header {
  text-align: center;
  margin-bottom: 3px;
}
.cards-history-title {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cards-history-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cards-history-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.cards-history-label {
  font-size: 9px;
  font-weight: 800;
  width: 26px;
  text-align: center;
  padding: 1px 3px;
  border-radius: 3px;
  flex-shrink: 0;
}
.cards-history-label.me {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
}
.cards-history-label.opp {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}
.cards-history-cards {
  display: flex;
  gap: 2px;
  flex: 1;
  overflow-x: auto;
  min-height: 24px;
  align-items: center;
}
.cards-history-count {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.35);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.cards-history-empty {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.2);
}
.cards-history-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 0 4px;
}
.mini-card {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  width: 24px;
  height: 22px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
  animation: miniCardIn 0.25s ease-out;
}
.mini-card-val {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}
.mini-card-suit {
  font-size: 8px;
  line-height: 1;
}
@keyframes miniCardIn {
  from { transform: scale(0) translateX(-8px); opacity: 0; }
  to { transform: scale(1) translateX(0); opacity: 1; }
}

/* ── Confirm play button ── */
.gb-confirm {
  text-align: center; margin-top: 6px;
}
.gb-play-btn {
  padding: 10px 32px; border: none; border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white; font-family: 'Poppins', sans-serif;
  font-size: 15px; font-weight: 900;
  cursor: pointer; letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(245,158,11,0.4);
  transition: all 0.2s;
}
.gb-play-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245,158,11,0.5);
}

/* ── OLD classes kept for backward compat ── */
.game-board { display: none; }

/* ── GAME CARDS ────────────────────────────── */

/* ── CARTES (style mobile) ─────────────────── */
.game-card {
  width: 80px; height: 112px;  /* identique au mobile medium: 80×112 */
  border-radius: 8px;
  background: #ffffff;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);  /* mobile: 0 4px 8px 0.3 */
  flex-shrink: 0;
  border: 1.5px solid rgba(0,0,0,0.08);
}
.game-card.card-small { width: 50px; height: 70px; }
.game-card.card-small .card-value { font-size: 11px; top: 3px; left: 4px; }
.game-card.card-small .card-suit-mini { font-size: 9px; }
.game-card.card-small .card-suit-center { font-size: 20px; }
.game-card.card-small .card-value-bottom { display: none; }
.game-card.card-small .card-suit-bottom { display: none; }

.game-card.playable {
  cursor: pointer;
  box-shadow: 0 0 12px rgba(245,158,11,0.4);
  border: 2px solid rgba(245,158,11,0.5);
}
.game-card.playable:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 8px 25px rgba(245,158,11,0.6);
}
.game-card.selected {
  transform: translateY(-20px) scale(1.05);
  box-shadow: 0 8px 30px rgba(245,158,11,0.8);
  border: 2px solid #f59e0b;
}
/* Carte non jouable — bordure grise, pas de réduction d'opacité (identique mobile) */
.game-card.disabled {
  border: 2px solid rgba(128,128,128,0.5);
}
/* Overlay + cadenas pour carte non jouable (identique mobile notPlayableOverlay) */
.card-not-playable-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
.card-lock-icon {
  margin: 4px;
  font-size: 10px;
  background: rgba(0,0,0,0.4);
  border-radius: 10px;
  padding: 2px 3px;
  line-height: 1;
}

/* Valeur haut-gauche — positions identiques au mobile (top:4, left:4) */
.card-value {
  font-size: 14px; font-weight: 900;
  position: absolute; top: 4px; left: 4px;
  line-height: 1;
}
.card-suit-mini {
  font-size: 12px;  /* mobile: 12px */
  position: absolute; top: 19px; left: 5px;
  line-height: 1;
}
/* Symbole central — mobile: 36px */
.card-suit-center {
  font-size: 36px;
  line-height: 1;
}
/* Valeur bas-droite (inversée) */
.card-value-bottom {
  font-size: 14px; font-weight: 900;
  position: absolute; bottom: 4px; right: 4px;
  transform: rotate(180deg);
  line-height: 1;
}
.card-suit-bottom {
  font-size: 12px;
  position: absolute; bottom: 19px; right: 5px;
  transform: rotate(180deg);
  line-height: 1;
}

/* Dos de carte — bordure 3px + margin 4px interne comme le mobile */
.card-back {
  border: 3px solid #FFD700; /* overridden par inline style selon le skin */
  position: relative;
  overflow: hidden;
}
.card-back-inner {
  position: absolute;
  inset: 4px;          /* margin: 4 mobile */
  border: 1px solid;   /* couleur appliquée en inline via JS */
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-back-design {
  font-size: 10px; font-weight: 900; /* mobile: fontSize: 10 */
  text-align: center;
  letter-spacing: 2px;
}
.card-small .card-back-design { font-size: 7px; letter-spacing: 1px; }
.card-back-svg {
  border: none;
  background: transparent;
  overflow: hidden;
  border-radius: 8px;
  padding: 0;
}
.card-back-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}
.card-small .card-back-inner { inset: 3px; }

/* ── GAME END SCREEN ───────────────────────── */

.game-end-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000;
  padding: 20px;
}
.game-end-card {
  background: #1a1a2e;
  border-radius: 30px;
  padding: 40px 32px;
  max-width: 400px; width: 100%;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  animation: fadeIn 0.5s ease-out;
}
.game-end-icon { font-size: 64px; margin-bottom: 16px; }
.game-end-icon.win { animation: pulse-glow 1.5s infinite; }
.game-end-title { font-size: 28px; font-weight: 900; margin-bottom: 8px; }
.game-end-title.win { color: #f59e0b; }
.game-end-title.lose { color: #ef4444; }
.game-end-score { font-size: 36px; font-weight: 900; color: white; margin: 8px 0; }
.game-end-opponent { color: rgba(255,255,255,0.5); font-size: 14px; margin-bottom: 16px; }
.special-badge {
  display: inline-block;
  padding: 6px 16px; border-radius: 10px;
  background: rgba(245,158,11,0.15);
  color: #f59e0b; font-weight: 800;
  margin-bottom: 12px;
}
.bet-result { margin: 12px 0; font-size: 24px; font-weight: 900; }
.bet-win { color: #22c55e; }
.bet-lose { color: #ef4444; }
.game-end-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

/* ── BTN-LARGE / BTN-PRIMARY (utilisé dans game) */

.btn-large { padding: 16px 32px; font-size: 16px; }
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px; border: none; border-radius: 25px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  color: white;
}
.btn-primary {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  box-shadow: 0 4px 15px rgba(245,158,11,0.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,158,11,0.4); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-secondary {
  background: rgba(255,255,255,0.08);
  border: 2px solid rgba(255,255,255,0.15);
}

@media (max-width: 480px) {
  .game-card { width: 55px; height: 82px; }
  .game-card .card-value { font-size: 12px; top: 3px; left: 4px; }
  .game-card .card-suit-mini { font-size: 10px; top: 16px; left: 5px; }
  .game-card .card-suit-center { font-size: 26px; }
  .game-card .card-value-bottom { font-size: 12px; bottom: 3px; right: 4px; }
  .game-card .card-suit-bottom { font-size: 10px; bottom: 16px; right: 5px; }
  .game-card.card-small { width: 38px; height: 56px; }
  .game-card.card-small .card-suit-center { font-size: 16px; }
  .shop-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================
   ANIMATIONS — Combo, Round Result, Trick, Game End
   ============================================ */

/* ── COMBO ANIMATION (Kora, 33 Export, Triple 7) ── */
.combo-overlay {
  position: fixed; inset: 0;
  z-index: 5000;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.combo-bg {
  position: absolute; inset: 0;
  opacity: 0;
  animation: comboBgIn 0.5s ease-out forwards;
}
@keyframes comboBgIn {
  to { opacity: 1; }
}

/* Glow circulaire pulsant */
.combo-glow {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  animation: comboGlowPulse 0.8s ease-in-out infinite alternate;
}
@keyframes comboGlowPulse {
  from { transform: scale(0.8); opacity: 0.3; }
  to { transform: scale(1.5); opacity: 0.7; }
}

/* Contenu central */
.combo-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  z-index: 2;
  animation: comboContentIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0; transform: scale(0.3);
}
@keyframes comboContentIn {
  to { opacity: 1; transform: scale(1); }
}

.combo-emoji {
  font-size: 72px;
  animation: comboEmojiBounce 0.6s ease-out;
  filter: drop-shadow(0 0 20px rgba(255,255,255,0.5));
}
@keyframes comboEmojiBounce {
  0% { transform: scale(0); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

.combo-title {
  font-size: 42px; font-weight: 900;
  letter-spacing: 4px;
  text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  margin-top: 8px;
  animation: comboTitleIn 0.5s 0.2s ease-out both;
}
@keyframes comboTitleIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.combo-multiplier {
  font-size: 28px; font-weight: 900;
  margin-top: 4px;
  animation: comboMultIn 0.5s 0.4s ease-out both;
}
@keyframes comboMultIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Particules combo (confettis emoji) */
.combo-particle {
  position: absolute;
  font-size: 24px;
  pointer-events: none;
  animation: comboParticleExplode var(--duration, 1.2s) ease-out forwards;
}
@keyframes comboParticleExplode {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.3) rotate(360deg); opacity: 0; }
}

/* Shake effect pour titre */
.combo-shake {
  animation: comboShake 0.5s 0.3s ease-out;
}
@keyframes comboShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Cartes tournantes (Triple 7) */
.combo-spinning-cards {
  display: flex; gap: 8px;
  margin-bottom: 12px;
}
.combo-spin-card {
  width: 50px; height: 70px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 900;
  color: #FFD700;
  border: 2px solid #FFD700;
  animation: comboCardSpin 1s ease-out forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes comboCardSpin {
  0% { opacity: 0; transform: rotateY(0deg) scale(0.5); }
  50% { opacity: 1; transform: rotateY(540deg) scale(1.1); }
  100% { opacity: 1; transform: rotateY(1080deg) scale(1); }
}

/* Flammes Kora */
.combo-flames {
  display: flex; gap: 16px; margin-bottom: 8px;
}
.combo-flame {
  font-size: 40px;
  animation: comboFlame 0.4s ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes comboFlame {
  from { transform: translateY(0) scale(1); }
  to { transform: translateY(-15px) scale(1.1); }
}

/* Fusée Export 33 */
.combo-rocket {
  font-size: 60px;
  position: absolute; bottom: 20%;
  animation: comboRocket 1.5s ease-in forwards;
}
@keyframes comboRocket {
  0% { transform: translateY(0) rotate(-45deg); opacity: 1; }
  100% { transform: translateY(-300px) rotate(-45deg); opacity: 0; }
}

/* ── ROUND RESULT ANIMATION ──────────────────── */
.round-result-overlay {
  position: fixed; inset: 0;
  z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  animation: roundOverlayIn 0.3s ease-out;
}
@keyframes roundOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.round-result-card {
  padding: 30px 50px;
  border-radius: 24px;
  text-align: center;
  animation: roundCardIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}
.round-result-card.win {
  background: linear-gradient(135deg, rgba(39,174,96,0.95), rgba(46,204,113,0.9));
}
.round-result-card.lose {
  background: linear-gradient(135deg, rgba(192,57,43,0.95), rgba(231,76,60,0.9));
}
@keyframes roundCardIn {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.round-result-mascot {
  font-size: 64px;
  animation: roundMascotBounce 0.5s ease-in-out infinite alternate;
  margin-bottom: 8px;
}
@keyframes roundMascotBounce {
  from { transform: translateY(0); }
  to { transform: translateY(-12px); }
}

.round-result-title {
  font-size: 24px; font-weight: 900;
  color: white; letter-spacing: 2px;
  margin-bottom: 8px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.round-result-score {
  font-size: 16px; color: rgba(255,255,255,0.85);
  font-weight: 700;
}

/* Progress bar timer pour round result */
.round-result-timer {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.2);
  margin-top: 16px; overflow: hidden;
}
.round-result-timer-fill {
  height: 100%; background: white; border-radius: 2px;
  animation: roundTimerFill 3s linear forwards;
}
@keyframes roundTimerFill {
  from { width: 100%; }
  to { width: 0%; }
}

/* Confetti round */
.round-confetti {
  position: absolute;
  font-size: 20px;
  pointer-events: none;
  animation: roundConfettiFall var(--duration, 2.5s) ease-in forwards;
}
@keyframes roundConfettiFall {
  0% { transform: translateY(var(--startY, -100px)) translateX(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(var(--endY, 300px)) translateX(var(--driftX, 50px)) rotate(360deg); opacity: 0; }
}

/* ── TRICK END ANIMATION ─────────────────────── */
.trick-result {
  position: fixed; top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3500;
  animation: trickIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), trickOut 0.3s 0.8s ease-in forwards;
  pointer-events: none;
}
.trick-badge {
  padding: 10px 24px;
  border-radius: 14px;
  display: flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 800;
  color: white;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  white-space: nowrap;
}
.trick-badge.win { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.trick-badge.lose { background: linear-gradient(135deg, #e74c3c, #c0392b); }
@keyframes trickIn {
  from { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes trickOut {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
}

/* ── GAME END MODAL (refonte style mobile) ───── */
.game-end-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 6000;
  padding: 20px;
  animation: gameEndOverlayIn 0.3s ease-out;
}
@keyframes gameEndOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.game-end-card {
  border-radius: 30px;
  padding: 40px 32px;
  max-width: 400px; width: 100%;
  text-align: center;
  position: relative;
  overflow: hidden;
  animation: gameEndCardIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.game-end-card.win-card {
  background: linear-gradient(135deg, #1a3a1a, #0d2818);
  border: 1px solid rgba(255,215,0,0.3);
}
.game-end-card.lose-card {
  background: linear-gradient(135deg, #3a1a1a, #280d0d);
  border: 1px solid rgba(239,68,68,0.3);
}
@keyframes gameEndCardIn {
  from { transform: scale(0.3); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Shine effect mobile-style */
.game-end-shine {
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent);
  animation: gameEndShine 3s ease-in-out infinite;
  pointer-events: none;
}
@keyframes gameEndShine {
  0% { left: -100%; }
  50% { left: 150%; }
  100% { left: 150%; }
}

/* Confetti de victoire */
.game-end-confetti {
  position: absolute;
  font-size: 18px;
  pointer-events: none;
  animation: gameEndConfettiFall var(--duration, 3s) ease-in forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes gameEndConfettiFall {
  0% { opacity: 0; transform: translateY(-50px) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--endY, 400px)) translateX(var(--driftX, 0px)) rotate(var(--rot, 360deg)); }
}

/* Trophy badge */
.game-end-trophy-wrap {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
  position: relative;
}
.game-end-trophy-wrap.win-trophy {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  box-shadow: 0 0 30px rgba(255,215,0,0.4);
  animation: trophyPulse 2s ease-in-out infinite;
}
.game-end-trophy-wrap.lose-trophy {
  background: linear-gradient(135deg, #666, #444);
  box-shadow: 0 0 15px rgba(100,100,100,0.3);
}
@keyframes trophyPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(255,215,0,0.3); transform: scale(1); }
  50% { box-shadow: 0 0 40px rgba(255,215,0,0.6); transform: scale(1.05); }
}

.game-end-trophy-emoji {
  font-size: 42px;
}
.game-end-trophy-wrap.win-trophy .game-end-trophy-emoji {
  animation: trophyBounce 0.8s ease-in-out infinite alternate;
}
@keyframes trophyBounce {
  from { transform: translateY(0) rotate(-5deg); }
  to { transform: translateY(-6px) rotate(5deg); }
}

/* Sparkles autour du trophée */
.game-end-sparkle {
  position: absolute;
  font-size: 14px;
  animation: sparkle 1.5s ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
@keyframes sparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* ============================================
   NEW COMPONENTS — Quest, Profile, Shop, Game
   ============================================ */

/* ── DAILY QUEST BANNER ──────────────────────── */

.quest-banner {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-radius: 16px;
  padding: 12px 16px 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(124,58,237,0.5);
}
.quest-banner:hover { transform: translateY(-1px); }
.quest-banner.has-unclaimed { animation: questPulse 1.5s infinite; }
@keyframes questPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(124,58,237,0.3); }
  50% { box-shadow: 0 0 25px rgba(124,58,237,0.6); }
}
.quest-banner-content {
  display: flex; justify-content: space-between; align-items: center;
}
.quest-banner-left { display: flex; align-items: center; gap: 10px; }
.quest-banner-icon { font-size: 24px; }
.quest-banner-title { font-size: 14px; font-weight: 800; }
.quest-banner-sub { font-size: 11px; color: rgba(255,255,255,0.6); }
.quest-banner-right { display: flex; align-items: center; gap: 8px; }
.quest-claim-badge {
  background: #22c55e; color: white;
  padding: 4px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 800;
}
.quest-chevron { font-size: 24px; color: rgba(255,255,255,0.5); }
.quest-banner-progress {
  height: 4px; background: rgba(255,255,255,0.15);
  border-radius: 2px; margin-top: 8px; overflow: hidden;
}
.quest-banner-fill {
  height: 100%; background: #fbbf24; border-radius: 2px;
  transition: width 0.3s;
}

/* ── DAILY QUESTS PAGE ───────────────────────── */

.quests-header {
  background: linear-gradient(135deg, #7c3aed, #5b21b6);
  border-radius: 20px; padding: 16px;
  margin-bottom: 15px;
}
.quests-header-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 10px;
}
.quest-countdown-badge {
  background: rgba(255,255,255,0.15); padding: 4px 10px;
  border-radius: 10px; font-size: 12px; font-weight: 700;
}
.quest-global-progress {
  height: 6px; background: rgba(255,255,255,0.15);
  border-radius: 3px; overflow: hidden;
}
.quest-global-fill {
  height: 100%; background: #fbbf24; border-radius: 3px;
  transition: width 0.3s;
}
.quest-claim-all-btn { font-size: 15px; padding: 14px; }

.quest-card {
  background: #1a1a2e; border-radius: 16px;
  padding: 14px; margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.05);
}
.quest-card.quest-bonus { border-color: rgba(255,215,0,0.3); }
.quest-card.quest-done { opacity: 0.85; }
.quest-card-top {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.quest-info { display: flex; align-items: center; gap: 10px; flex: 1; }
.quest-icon { font-size: 24px; }
.quest-name { font-size: 14px; font-weight: 700; }
.quest-desc { font-size: 11px; color: rgba(255,255,255,0.5); }
.quest-reward-section { display: flex; align-items: center; gap: 6px; }
.quest-xp-badge {
  background: rgba(124,58,237,0.2); color: #a78bfa;
  padding: 4px 10px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
}
.quest-claim-btn {
  background: #22c55e; color: white;
  border: none; padding: 6px 12px; border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 800; cursor: pointer;
}
.quest-claim-btn:disabled { opacity: 0.5; }
.quest-claimed-check {
  color: #22c55e; font-size: 20px; font-weight: 900;
}
.quest-mapies-tag {
  background: rgba(245,158,11,0.2); color: #f59e0b;
  padding: 2px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 800;
}
.quest-progress-bar {
  height: 5px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
}
.quest-progress-fill {
  height: 100%; border-radius: 3px; transition: width 0.3s;
}
.quest-progress-text {
  font-size: 11px; color: rgba(255,255,255,0.4);
  text-align: right; margin-top: 2px;
}

/* ── PROFILE PAGE (Clash Royale style) ───────── */

.profile-card-cr {
  background: linear-gradient(135deg, #2d1f4e 0%, #1a1230 50%, #2d1f4e 100%);
  border: 1px solid rgba(201,162,39,0.3);
  border-radius: 20px;
  padding: 20px;
  margin-bottom: 15px;
  text-align: center;
  position: relative;
}
.profile-avatar-section {
  position: relative; display: inline-block;
  cursor: pointer; margin-bottom: 8px;
}
.profile-avatar-ring {
  width: 90px; height: 90px;
  border-radius: 50%;
  border: 3px solid rgba(201,162,39,0.5);
  display: flex; align-items: center; justify-content: center;
  animation: avatarRingSpin 20s linear infinite;
}
@keyframes avatarRingSpin {
  from { border-color: rgba(201,162,39,0.5); }
  50% { border-color: rgba(255,215,0,0.8); }
  to { border-color: rgba(201,162,39,0.5); }
}
.profile-avatar-inner {
  width: 78px; height: 78px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.profile-level-badge {
  position: absolute; top: -4px; right: -4px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 900; color: white;
  border: 2px solid #1a1230;
}
.profile-edit-badge {
  position: absolute; bottom: 0; right: -4px;
  background: #f59e0b; padding: 4px; border-radius: 50%;
  font-size: 12px; border: 2px solid #1a1230;
}
.profile-name-cr {
  font-size: 22px; font-weight: 900; color: white;
  text-shadow: 0 0 12px rgba(255,215,0,0.3);
}
.profile-id-cr { font-size: 11px; color: rgba(255,255,255,0.3); margin-bottom: 10px; }

.profile-elo-section {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 8px;
}
.profile-trophy-icon { font-size: 24px; }
.profile-elo-value { font-size: 28px; font-weight: 900; color: #ffd700; }
.profile-elo-label { font-size: 12px; color: rgba(255,255,255,0.5); }

.profile-league-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid; margin-bottom: 10px;
}
.league-icon-float { font-size: 20px; }

.profile-league-progress { padding: 0 20px; margin-bottom: 5px; }
.league-progress-bar {
  height: 6px; background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
}
.league-progress-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.league-progress-labels {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(255,255,255,0.4); margin-top: 2px;
}

/* XP Card */
.profile-xp-card { margin-bottom: 15px; }
.xp-level-circle {
  width: 44px; height: 44px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: white;
  flex-shrink: 0;
}
.xp-next-badge {
  background: rgba(34,197,94,0.15); color: #22c55e;
  padding: 4px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
.xp-progress-bar {
  height: 8px; background: rgba(255,255,255,0.08);
  border-radius: 4px; overflow: hidden;
}
.xp-progress-fill {
  height: 100%; border-radius: 4px; transition: width 0.3s;
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.profile-mapies-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; font-weight: 700; color: #f59e0b;
}
.profile-mapies-row:hover { color: #fbbf24; }

/* Specials */
.profile-specials-card { margin-bottom: 15px; }
.specials-row { display: flex; justify-content: space-around; }
.special-item { text-align: center; }
.special-icon { font-size: 24px; display: block; margin-bottom: 2px; }
.special-value { font-size: 20px; font-weight: 900; display: block; }
.special-label { font-size: 10px; color: rgba(255,255,255,0.5); }

/* Achievements */
.xp-claim-banner {
  background: rgba(245,158,11,0.12); border: 1px solid rgba(245,158,11,0.3);
  border-radius: 10px; padding: 10px 14px;
  font-size: 13px; font-weight: 700; color: #f59e0b;
  cursor: pointer; margin-bottom: 10px;
  animation: questPulse 2s infinite;
}
.achievements-row {
  display: flex; gap: 8px;
}
.achievement-badge {
  width: 48px; height: 48px;
  background: rgba(245,158,11,0.12);
  border: 2px solid rgba(245,158,11,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

/* Profile Menu */
.profile-menu-card { margin-bottom: 15px; }
.profile-menu-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  cursor: pointer; transition: all 0.2s;
}
.profile-menu-item:last-child { border-bottom: none; }
.profile-menu-item:hover { color: #f59e0b; }
.menu-item-left { display: flex; align-items: center; gap: 12px; }
.menu-item-icon { font-size: 20px; }
.menu-item-title { font-size: 14px; font-weight: 700; }
.menu-item-sub { font-size: 11px; color: rgba(255,255,255,0.4); }
.menu-badge-tx, .menu-badge-mapies {
  display: inline-block; padding: 1px 6px; border-radius: 6px;
  font-size: 10px; font-weight: 700; margin-right: 4px;
}
.menu-badge-tx { background: rgba(245,158,11,0.15); color: #f59e0b; }
.menu-badge-mapies { background: rgba(234,179,8,0.15); color: #eab308; }
.menu-arrow { font-size: 16px; color: rgba(255,255,255,0.3); }

.profile-logout-btn { margin-bottom: 20px; }
.profile-footer {
  text-align: center; padding: 20px 0;
  color: rgba(255,255,255,0.2); font-size: 12px;
}
.profile-footer-logo { font-size: 16px; font-weight: 900; margin-bottom: 4px; }

/* ── AVATAR MODAL ────────────────────────────── */

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; padding: 20px;
}
.modal-content {
  background: #1a1a2e;
  border-radius: 24px; padding: 24px;
  max-width: 420px; width: 100%;
  max-height: 80vh; overflow-y: auto;
  animation: fadeIn 0.2s ease-out;
  border: 1px solid rgba(255,255,255,0.08);
}
.modal-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px;
}
.modal-header h3 { margin: 0; font-size: 18px; }
.modal-close {
  background: rgba(255,255,255,0.08); border: none;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 16px; cursor: pointer; color: white;
  display: flex; align-items: center; justify-content: center;
}

.avatar-username-display {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  padding: 10px 14px; border-radius: 12px;
  font-weight: 700; margin-bottom: 4px;
}
.locked-badge { font-size: 14px; }

.avatar-preview-section { text-align: center; margin: 10px 0; position: relative; display: inline-block; width: 100%; }
.avatar-preview-circle {
  width: 80px; height: 80px; margin: 0 auto;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.avatar-new-badge {
  position: absolute; top: 0; right: 35%;
  background: #22c55e; color: white;
  padding: 2px 8px; border-radius: 8px;
  font-size: 10px; font-weight: 800;
}

.avatar-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.avatar-option {
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 10px 4px;
  text-align: center; cursor: pointer;
  transition: all 0.2s; position: relative;
}
.avatar-option:hover { border-color: rgba(255,255,255,0.2); }
.avatar-option.selected {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.1);
}
.avatar-option-emoji { font-size: 28px; display: block; }
.avatar-option-label { font-size: 10px; color: rgba(255,255,255,0.5); display: block; margin-top: 2px; }
.avatar-check {
  position: absolute; top: 4px; right: 4px;
  background: #f59e0b; color: white;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

/* ── SHOP (new style with tabs scroll) ───────── */

.shop-balance-card { margin-bottom: 12px; }

.shop-tabs-scroll {
  display: flex; gap: 6px; overflow-x: auto;
  margin-bottom: 14px; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shop-tabs-scroll::-webkit-scrollbar { display: none; }
.shop-tab-btn {
  white-space: nowrap;
  padding: 8px 14px; border: none; border-radius: 12px;
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.6);
  font-family: 'Poppins', sans-serif;
  font-size: 12px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  flex-shrink: 0;
}
.shop-tab-btn.active {
  background: rgba(245,158,11,0.15);
  color: #f59e0b;
}
.shop-tab-btn:hover:not(.active) { background: rgba(255,255,255,0.08); }
.tab-count {
  display: inline-block;
  background: rgba(245,158,11,0.2); color: #f59e0b;
  padding: 1px 6px; border-radius: 8px;
  font-size: 10px; margin-left: 4px;
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.shop-item-card {
  background: #1a1a2e;
  border-radius: 14px; padding: 12px 8px;
  text-align: center; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.05);
  transition: all 0.2s;
  position: relative;
}
.shop-item-card:hover { border-color: rgba(245,158,11,0.3); transform: translateY(-2px); }
.shop-rarity-badge {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 6px; border-radius: 6px;
  font-size: 8px; color: white; font-weight: 900;
}
.shop-item-emoji { font-size: 36px; margin-bottom: 4px; }
.shop-item-name { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
.shop-badge {
  display: inline-block; padding: 3px 8px;
  border-radius: 8px; font-size: 10px; font-weight: 800;
}
.shop-badge.equipped { background: rgba(34,197,94,0.15); color: #22c55e; }
.shop-badge.owned { background: rgba(34,197,94,0.1); color: #4ade80; }
.shop-badge.price { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* Preview modal */
.preview-modal { text-align: center; }
.preview-rarity { font-size: 12px; font-weight: 900; letter-spacing: 2px; margin-bottom: 8px; }
.preview-emoji { font-size: 64px; margin: 10px 0; }
.preview-name { font-size: 20px; font-weight: 900; margin-bottom: 8px; }
.preview-status.equipped { color: #22c55e; font-weight: 700; font-size: 14px; margin-top: 15px; }

/* ── DEPOSIT (new steps) ─────────────────────── */

.deposit-balance-card { text-align: center; }
.deposit-balance-inner { padding: 4px 0; }
.deposit-summary-card {
  background: linear-gradient(135deg, rgba(34,197,94,0.12), rgba(34,197,94,0.04));
  border: 1px solid rgba(34,197,94,0.25);
}
.deposit-steps { display: flex; flex-direction: column; gap: 10px; }
.deposit-step {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 13px; color: rgba(255,255,255,0.7);
}
.step-num {
  width: 28px; height: 28px; flex-shrink: 0;
  background: #7c3aed; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 900; color: white;
}
.preset-bonus {
  display: block; font-size: 10px; color: #22c55e; font-weight: 700;
  margin-top: 2px;
}
.preset-amount { display: block; }

/* Success */
.deposit-success-card { max-width: 400px; margin: 0 auto; }
.success-icon-big { font-size: 64px; }
.success-amount {
  font-size: 32px; font-weight: 900; color: #ffd700;
  margin: 5px 0;
}
.success-details {
  background: rgba(255,255,255,0.04);
  border-radius: 14px; padding: 14px;
  margin-top: 10px;
}
.detail-row {
  display: flex; justify-content: space-between;
  padding: 8px 0; font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.detail-row:last-child { border-bottom: none; }

/* ── GAME BOARD legacy cleanup ──────────────── */

/* ── RESPONSIVE (all new components) ──────────── */

@media (max-width: 480px) {
  .shop-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .shop-item-emoji { font-size: 28px; }
  .shop-item-name { font-size: 10px; }
  .avatar-grid { grid-template-columns: repeat(3, 1fr); }
  .gb-score { max-width: 280px; padding: 5px 10px; }
  .gb-score-val { font-size: 18px; }
  .gb-table { margin: 4px 8px; padding: 10px; }

  /* Friends */
  .friends-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .friends-tabs::-webkit-scrollbar { display: none; }
  .friends-tab { font-size: 12px; padding: 8px 10px; }
  .story-avatar-ring { width: 50px; height: 50px; }
  .story-avatar { font-size: 24px; }
  .conv-avatar-ring { width: 44px; height: 44px; font-size: 20px; }
  .friend-action-sheet { padding: 10px 16px 24px; }

  /* Chat */
  .chat-header { padding: 10px 12px; }
  .chat-messages { padding: 10px 12px; }
  .msg-bubble { padding: 7px 10px; font-size: 13px; }
  .chat-input-bar { padding: 8px 10px; }

  /* Tournaments */
  .tournament-crown-header { padding: 10px; }
  .tournament-crown-header h2 { font-size: 18px; }
  .tournament-filter { padding: 8px 10px; font-size: 11px; }
  .tc-info-row { padding: 8px 6px; }
  .tc-info-value { font-size: 10px; }
  .tc-info-label { font-size: 8px; }

  /* Leaderboard */
  .podium-item { min-width: 75px; padding: 10px 6px 6px; }
  .podium-avatar { font-size: 28px; }
  .podium-name { font-size: 10px; }
}

/* ── HOME — Mascot Section ──────────────────── */

.home-mascot-section {
  text-align: center;
  margin-bottom: 12px;
  padding: 10px 0;
}
.home-mascot-img {
  width: 120px; height: 120px;
  object-fit: contain;
  animation: mascotFloat 3s ease-in-out infinite;
  filter: drop-shadow(0 8px 20px rgba(245,158,11,0.3));
}
.home-mascot-title {
  font-size: 28px; font-weight: 900;
  color: #ffd700;
  text-shadow: 0 2px 10px rgba(255,215,0,0.4);
  letter-spacing: 3px;
  margin-top: 4px;
}
.home-mascot-tagline {
  font-size: 13px; color: rgba(255,255,255,0.5);
  font-weight: 600; font-style: italic;
  margin-top: 2px;
}
@keyframes mascotFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── HOME — XP Bar ─────────────────────────── */

.home-xp-bar {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.home-xp-info {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px;
}
.home-xp-level {
  font-size: 11px; font-weight: 900;
  color: #7c3aed;
  background: rgba(124,58,237,0.15);
  padding: 2px 8px; border-radius: 8px;
}
.home-xp-text {
  font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 600;
}
.home-xp-next {
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.3);
}
.home-xp-track {
  height: 6px; background: rgba(255,255,255,0.06);
  border-radius: 3px; overflow: hidden;
}
.home-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, #7c3aed, #a855f7);
  border-radius: 3px;
  transition: width 0.5s ease;
}

/* ── HOME — Training card ──────────────────── */

.home-play-card.training {
  background: linear-gradient(135deg, #1a2e1a, #1a3a1a);
  border-color: rgba(34,197,94,0.3);
}

/* ── GAME CONFIG (mobile style) ────────────── */

.config-mode-header {
  text-align: center;
  padding: 20px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #1a1a2e, #222240);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 20px;
}
.config-mode-icon { display: block; margin-bottom: 6px; }
.config-mode-title {
  font-size: 24px; font-weight: 900;
  letter-spacing: 3px;
}

.config-options-section {
  margin-bottom: 14px;
}
.config-options-toggle {
  width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 14px 16px;
  color: rgba(255,255,255,0.8);
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.config-options-toggle:hover {
  background: rgba(255,255,255,0.08);
}
.config-chevron {
  transition: transform 0.3s;
  font-size: 12px; color: rgba(255,255,255,0.4);
}
.config-chevron.open { transform: rotate(180deg); }

.config-options-panel {
  margin-top: 8px;
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.config-rules-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.config-rule-card {
  background: #1a1a2e;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 14px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.config-rule-card.active {
  border-color: rgba(245,158,11,0.4);
  background: rgba(245,158,11,0.06);
}
.config-rule-card:hover { border-color: rgba(245,158,11,0.3); }

.config-rule-name {
  font-size: 12px; font-weight: 800; color: white;
}
.config-rule-mult {
  font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.4);
}
.config-rule-toggle {
  width: 36px; height: 20px;
  background: rgba(255,255,255,0.1);
  border-radius: 10px;
  position: relative;
  transition: background 0.3s;
}
.config-rule-toggle.on {
  background: #22c55e;
}
.toggle-dot {
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  position: absolute; top: 2px; left: 2px;
  transition: transform 0.3s;
}
.config-rule-toggle.on .toggle-dot {
  transform: translateX(16px);
}

.config-play-buttons {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 14px;
}
.config-combat-btn {
  width: 100%; padding: 18px;
  border: none; border-radius: 18px;
  color: white; font-family: 'Poppins', sans-serif;
  font-size: 18px; font-weight: 900;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  letter-spacing: 2px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.config-combat-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
.config-combat-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.config-quick-btn {
  width: 100%; padding: 14px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8); font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}
.config-quick-btn:hover { background: rgba(255,255,255,0.08); }
.config-btn-icon { font-size: 18px; }
.config-btn-text { font-weight: 900; }
.config-btn-sub {
  width: 100%; text-align: center;
  font-size: 11px; color: rgba(255,255,255,0.4); font-weight: 600;
}

/* ── UNIFIED PLAY PAGE (mobile style) ─────── */

.play-combat-btn {
  width: 100%; padding: 16px;
  border: none; border-radius: 18px;
  color: white; font-family: 'Poppins', sans-serif;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 6px 25px rgba(255,149,0,0.35);
  margin-bottom: 10px; position: relative; overflow: hidden;
}
.play-combat-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(255,149,0,0.45); }
.play-combat-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.play-quick-btn {
  width: 100%; padding: 14px;
  border: none; border-radius: 16px;
  background: linear-gradient(135deg, #8B5CF6, #7C3AED, #6D28D9);
  color: white; font-family: 'Poppins', sans-serif;
  cursor: pointer; transition: all 0.2s;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 4px 18px rgba(139,92,246,0.3);
  margin-bottom: 14px;
}
.play-quick-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(139,92,246,0.4); }

.play-combat-left { flex-shrink: 0; }
.play-combat-cards {
  display: flex; gap: 2px;
  font-size: 18px; font-weight: 900;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.play-combat-cards.small { font-size: 15px; }
.play-combat-center { flex: 1; text-align: left; }
.play-combat-title {
  display: block; font-size: 18px; font-weight: 900; letter-spacing: 2px;
}
.play-combat-sub {
  display: block; font-size: 11px; opacity: 0.7; font-weight: 600;
}
.play-combat-right { font-size: 24px; }

.play-section-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: 16px;
  margin-bottom: 12px;
}
.play-section-title {
  font-size: 14px; font-weight: 800; color: rgba(255,255,255,0.8);
  margin-bottom: 10px;
}
.play-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.play-chip {
  padding: 8px 14px; border-radius: 10px;
  background: rgba(255,255,255,0.06);
  border: 2px solid transparent;
  color: rgba(255,255,255,0.7);
  font-family: 'Poppins', sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.play-chip.active {
  color: #34D399; font-weight: 800;
}
.play-chip.disabled {
  opacity: 0.35; cursor: not-allowed;
}
.play-warn {
  margin-top: 8px; font-size: 12px; color: #ef4444; font-weight: 600;
}
.play-gains {
  margin-top: 12px; padding: 12px;
  background: rgba(52,211,153,0.08);
  border: 1px solid rgba(52,211,153,0.15);
  border-radius: 12px;
}
.play-gains-title {
  font-size: 12px; font-weight: 700; color: #34D399;
  text-align: center; margin-bottom: 8px;
}
.play-gains-row {
  display: flex; justify-content: space-between;
  font-size: 12px; color: rgba(255,255,255,0.6);
  padding: 3px 0;
}
.arena-mode-detail {
  font-size: 12px; font-weight: 700; margin-top: 4px;
}

/* Private games section */
.play-private-section { margin-bottom: 14px; }
.play-private-btns {
  display: flex; gap: 10px;
}
.play-private-btn {
  flex: 1; padding: 16px 12px; border: none; border-radius: 16px;
  color: white; font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 900; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: all 0.2s;
}
.play-private-btn.purple {
  background: linear-gradient(135deg, #7C3AED, #6D28D9);
  box-shadow: 0 4px 15px rgba(124,58,237,0.3);
}
.play-private-btn.gold {
  background: linear-gradient(135deg, #F59E0B, #D97706);
  box-shadow: 0 4px 15px rgba(245,158,11,0.3);
}
.play-private-btn:hover { transform: translateY(-2px); }
.play-private-sub {
  font-size: 10px; font-weight: 600; opacity: 0.7;
}

/* ── MATCHMAKING (mobile VS screen) ────────── */

.mm-fullscreen {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 2000;
  background: radial-gradient(circle at 50% 40%, #1a1a3e, #0f0a1f);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 20px; gap: 20px;
}

.mm-type-badge {
  padding: 8px 20px; border-radius: 20px;
  font-size: 14px; font-weight: 800; color: white;
  letter-spacing: 1px;
}

.mm-vs-section {
  display: flex; align-items: center; justify-content: center;
  gap: 20px; width: 100%;
}

.mm-player-box {
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  min-width: 100px;
}
.mm-player-avatar {
  width: 70px; height: 70px;
  background: linear-gradient(135deg, #2d1f4e, #1a1230);
  border: 3px solid rgba(245,158,11,0.4);
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px;
}
.mm-player-avatar.searching {
  border-color: rgba(255,255,255,0.15);
  animation: searchPulse 1.5s ease-in-out infinite;
}
@keyframes searchPulse {
  0%, 100% { border-color: rgba(255,255,255,0.1); }
  50% { border-color: rgba(255,255,255,0.3); }
}

.mm-player-name {
  font-size: 14px; font-weight: 800; color: white;
}
.mm-player-elo {
  font-size: 12px; font-weight: 700;
}

.mm-search-dots {
  font-size: 24px; color: rgba(255,255,255,0.4);
  animation: searchDots 1.5s steps(3) infinite;
}
.mm-search-dots span { animation: dotBlink 1.5s ease-in-out infinite; }
.mm-search-dots span:nth-child(2) { animation-delay: 0.3s; }
.mm-search-dots span:nth-child(3) { animation-delay: 0.6s; }
@keyframes dotBlink {
  0%, 60%, 100% { opacity: 0.3; }
  30% { opacity: 1; }
}

/* VS center with radar */
.mm-center {
  position: relative;
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.mm-radar {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.mm-radar-ring {
  position: absolute;
  border: 2px solid rgba(59,130,246,0.3);
  border-radius: 50%;
  animation: radarExpand 2s ease-out infinite;
}
.mm-radar-ring.r1 { width: 60px; height: 60px; top: -30px; left: -30px; animation-delay: 0s; }
.mm-radar-ring.r2 { width: 90px; height: 90px; top: -45px; left: -45px; animation-delay: 0.6s; }
.mm-radar-ring.r3 { width: 120px; height: 120px; top: -60px; left: -60px; animation-delay: 1.2s; }
@keyframes radarExpand {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.3); opacity: 0; }
}

.mm-card-flip {
  z-index: 1; font-size: 40px;
  animation: cardFlip 2s ease-in-out infinite;
}
@keyframes cardFlip {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

.mm-vs-badge {
  font-size: 32px; font-weight: 900;
  text-shadow: 0 0 20px currentColor;
  animation: vsGlow 1.5s ease-in-out infinite;
}
@keyframes vsGlow {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; text-shadow: 0 0 30px currentColor; }
}

.mm-timer {
  display: flex; align-items: center; gap: 8px;
}
.mm-timer-icon { font-size: 24px; }
.mm-timer-value {
  font-size: 32px; font-weight: 900; color: white;
  font-variant-numeric: tabular-nums;
}

.mm-tip {
  font-size: 13px; color: rgba(255,255,255,0.5);
  text-align: center; max-width: 300px;
  min-height: 40px;
  animation: fadeInUp 0.5s ease;
}

.mm-cancel-btn {
  padding: 12px 32px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  color: rgba(255,255,255,0.7);
  font-family: 'Poppins', sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all 0.2s;
}
.mm-cancel-btn:hover { background: rgba(239,68,68,0.2); border-color: rgba(239,68,68,0.4); color: #ef4444; }

/* Match found — Accept/Decline modal */
.mm-accept-modal {
  width: 90%; max-width: 400px;
  background: linear-gradient(145deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 20px; padding: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  animation: modalSlideUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes modalSlideUp {
  from { opacity: 0; transform: translateY(50px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes popIn {
  from { opacity: 0; transform: scale(0); }
  50% { transform: scale(1.2); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.2); }
  50% { transform: scale(1.03); box-shadow: 0 0 20px rgba(255,255,255,0.1); }
}
.mm-found-badge {
  padding: 10px 24px; border-radius: 14px;
  font-size: 16px; font-weight: 900; color: white;
  letter-spacing: 2px; text-align: center;
  animation: foundPulse 1.5s ease-in-out infinite;
}
@keyframes foundPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
.mm-player-level {
  font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px;
}

/* Legacy found-modal (unused) */
.mm-found-modal {
  display: flex; flex-direction: column;
  align-items: center; gap: 20px;
  animation: modalSlideUp 0.4s ease;
}

.mm-countdown-ring {
  width: 80px; height: 80px;
  border: 4px solid #3b82f6;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  animation: countdownSpin 1s linear infinite;
}
@keyframes countdownSpin {
  from { border-top-color: transparent; }
  to { border-top-color: transparent; transform: rotate(360deg); }
}
.mm-countdown-num {
  font-size: 32px; font-weight: 900; color: white;
}
.mm-found-sub {
  font-size: 14px; color: rgba(255,255,255,0.5); font-weight: 600;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── WAITING ROOM (Salle d'attente) ──────── */
.wr-fullscreen {
  position: fixed; inset: 0; z-index: 1000;
  background: linear-gradient(180deg, #0f0a1f 0%, #1a1a2e 50%, #0f0a1f 100%);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 20px; overflow-y: auto;
}
.wr-header { text-align: center; margin-bottom: 20px; }
.wr-type-badge {
  display: inline-block; padding: 8px 20px; border-radius: 12px;
  font-size: 15px; font-weight: 800; color: white; letter-spacing: 1px;
}
.wr-vs-section {
  display: flex; align-items: center; justify-content: center;
  gap: 24px; margin: 20px 0;
}
.wr-player { text-align: center; min-width: 100px; }
.wr-avatar {
  width: 70px; height: 70px; border-radius: 50%;
  background: rgba(255,255,255,0.1); display: flex;
  align-items: center; justify-content: center;
  font-size: 32px; margin: 0 auto 8px;
  border: 2px solid rgba(255,255,255,0.15);
}
.wr-name { font-size: 15px; font-weight: 700; color: white; }
.wr-elo { font-size: 13px; font-weight: 600; margin-top: 3px; }
.wr-level { font-size: 11px; color: rgba(255,255,255,0.4); margin-top: 2px; }
.wr-ready-badge {
  display: inline-block; margin-top: 8px; padding: 4px 12px;
  background: rgba(34,197,94,0.2); color: #22c55e;
  border-radius: 8px; font-size: 12px; font-weight: 700;
  border: 1px solid rgba(34,197,94,0.3);
}
.wr-vs {
  font-size: 28px; font-weight: 900; color: rgba(255,255,255,0.3);
  text-shadow: 0 0 20px rgba(255,255,255,0.1);
}
.wr-conditions {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 8px; margin: 16px 0;
}
.wr-cond-card {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 13px; color: rgba(255,255,255,0.7);
}
.wr-cond-card span:first-child { font-size: 20px; flex-shrink: 0; }
.wr-actions {
  width: 100%; max-width: 400px;
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 20px;
}
.wr-ready-btn {
  width: 100%; padding: 16px; border: none; border-radius: 14px;
  color: white; font-size: 20px; font-weight: 900;
  letter-spacing: 3px; cursor: pointer;
  animation: pulse 2s infinite;
  transition: transform 0.2s;
}
.wr-ready-btn:hover { transform: scale(1.02); }
.wr-ready-btn:disabled { opacity: 0.5; animation: none; }
.wr-cancel-btn {
  width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px; background: transparent;
  color: rgba(255,255,255,0.5); font-size: 14px; cursor: pointer;
}
.wr-waiting { text-align: center; font-size: 14px; padding: 20px 0; }

/* ── SHOP — SVG Skins Grid ─────────────────── */

.shop-balances {
  display: flex; align-items: center; justify-content: space-around;
}
.shop-balance-item { text-align: center; }
.shop-balance-divider {
  width: 1px; height: 36px;
  background: rgba(255,255,255,0.1);
}
.shop-balance-label {
  font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 700;
  margin-bottom: 2px;
}
.shop-balance-value {
  font-size: 20px; font-weight: 900;
}
.shop-balance-value.gold { color: #ffd700; }
.shop-balance-value.amber { color: #f59e0b; }

.shop-skins-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.shop-skin-card {
  background: #1a1a2e;
  border: 2px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.shop-skin-card:hover {
  border-color: rgba(245,158,11,0.3);
  transform: translateY(-2px);
}
.shop-skin-card.equipped {
  border-color: rgba(34,197,94,0.4);
}
.shop-skin-card.owned {
  border-color: rgba(59,130,246,0.3);
}

.shop-section-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding: 6px 0;
  font-size: 13px; font-weight: 800; color: rgba(255,255,255,0.6);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.shop-section-icon { font-size: 16px; }

.shop-skin-rarity {
  position: absolute; top: 8px; right: 8px;
  font-size: 10px; font-weight: 900;
}
.shop-skin-preview {
  min-height: 70px; max-height: 130px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  overflow: hidden;
}
.shop-svg-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.shop-svg-wrap svg {
  max-width: 100%; max-height: 100%;
}
.shop-skin-emoji {
  font-size: 40px;
}
.shop-skin-name {
  font-size: 13px; font-weight: 800; margin-bottom: 6px;
}
.shop-skin-badge {
  display: inline-block; padding: 4px 10px;
  border-radius: 10px; font-size: 11px; font-weight: 800;
}
.shop-skin-badge.equipped { background: rgba(34,197,94,0.15); color: #22c55e; }
.shop-skin-badge.owned { background: rgba(59,130,246,0.1); color: #60a5fa; }
.shop-skin-badge.owned.clickable {
  cursor: pointer; transition: all 0.2s;
}
.shop-skin-badge.owned.clickable:hover { background: rgba(59,130,246,0.2); }
.shop-skin-badge.price { background: rgba(245,158,11,0.15); color: #f59e0b; }

/* Skin preview modal */
.skin-preview-modal .skin-preview-large {
  width: 140px; height: 190px;
  margin: 10px auto;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.skin-svg-large {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.skin-svg-large svg {
  max-width: 100%; max-height: 100%;
}
.preview-desc {
  font-size: 13px; color: rgba(255,255,255,0.5);
  margin-bottom: 10px;
}

/* ── SHOP — Mapies Packs ───────────────────── */

.mapies-info-card {
  display: flex; align-items: center; gap: 12px;
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  border-radius: 14px; padding: 14px;
  margin-bottom: 14px;
}
.mapies-info-icon { font-size: 32px; }
.mapies-info-title { font-weight: 800; font-size: 16px; color: #f59e0b; }
.mapies-info-desc { font-size: 12px; color: rgba(255,255,255,0.5); }

.mapies-packs-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mapies-pack-card {
  background: #1a1a2e;
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.mapies-pack-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.mapies-pack-card.buying { opacity: 0.6; pointer-events: none; }

.pack-emoji {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  margin: 0 auto 8px;
}
.pack-name { font-size: 13px; font-weight: 800; margin-bottom: 4px; }
.pack-mapies { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.pack-price { font-size: 12px; color: rgba(255,255,255,0.6); font-weight: 700; }
.pack-price .insufficient { color: #ef4444; }
.pack-insufficient {
  font-size: 10px; color: #ef4444; font-weight: 700;
  margin-top: 4px;
}
.spinner-small {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.1);
  border-top-color: #f59e0b;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}

/* ── RESPONSIVE (new components) ──────────────── */

@media (max-width: 480px) {
  .home-mascot-img { width: 90px; height: 90px; }
  .home-mascot-title { font-size: 22px; }
  .config-rules-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .config-rule-card { padding: 10px 4px; }
  .config-rule-name { font-size: 10px; }
  .mm-player-avatar { width: 56px; height: 56px; font-size: 28px; }
  .mm-player-name { font-size: 12px; }
  .mm-timer-value { font-size: 24px; }
  .shop-skins-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .mapies-packs-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}

/* Spin animation for loading */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================
   VS ANIMATION (Clash Royale Style)
   ============================================ */

.vs-overlay {
  position: fixed; inset: 0;
  z-index: 7000;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  pointer-events: none;
}

.vs-bg {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.8);
  animation: vsBg 3.8s ease-out forwards;
}
@keyframes vsBg {
  0% { opacity: 0; }
  8% { opacity: 1; }
  87% { opacity: 1; }
  100% { opacity: 0; }
}

/* Player cards */
.vs-card-wrapper {
  position: absolute;
  top: 50%;
  width: 42%; max-width: 200px;
}
.vs-card-wrapper.vs-left {
  animation: vsLeftCard 3.8s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}
.vs-card-wrapper.vs-right {
  animation: vsRightCard 3.8s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
}

@keyframes vsLeftCard {
  0% { transform: translate(-120%, -50%); }
  16% { transform: translate(10px, -50%); }
  84% { transform: translate(10px, -50%); }
  100% { transform: translate(-120%, -50%); }
}
@keyframes vsRightCard {
  0% { transform: translate(120%, -50%); }
  16% { transform: translate(-10px, -50%); }
  84% { transform: translate(-10px, -50%); }
  100% { transform: translate(120%, -50%); }
}

.vs-player-card {
  border-radius: 16px;
  padding: 24px 14px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
.vs-player-card.vs-blue {
  background: linear-gradient(135deg, #1565c0, #1976d2, #2196f3);
  border: 2px solid rgba(100,181,246,0.4);
}
.vs-player-card.vs-red {
  background: linear-gradient(135deg, #c62828, #d32f2f, #f44336);
  border: 2px solid rgba(239,83,80,0.4);
}

.vs-player-avatar {
  font-size: 52px;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
}
.vs-player-name {
  font-size: 16px; font-weight: 900;
  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
  margin-bottom: 4px;
}
.vs-player-elo {
  font-size: 12px; color: rgba(255,255,255,0.7);
  background: rgba(0,0,0,0.25);
  padding: 3px 10px; border-radius: 10px;
  display: inline-block;
}

/* VS Badge */
.vs-badge-wrap {
  position: absolute;
  z-index: 10;
  animation: vsBadge 3.8s ease-out forwards;
}
@keyframes vsBadge {
  0%, 18% { transform: scale(0) rotate(-180deg); opacity: 0; }
  28% { transform: scale(1.15) rotate(10deg); opacity: 1; }
  32% { transform: scale(1) rotate(0deg); opacity: 1; }
  84% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.vs-badge-circle {
  width: 90px; height: 90px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FFD700, #FFA500, #FF8C00);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 900;
  color: white;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
  box-shadow: 0 0 50px rgba(255,215,0,0.6), 0 0 100px rgba(255,140,0,0.3);
}

/* Flash effect */
.vs-flash-el {
  position: absolute; inset: 0;
  background: white;
  pointer-events: none;
  animation: vsFlash 3.8s ease-out;
}
@keyframes vsFlash {
  0%, 19% { opacity: 0; }
  21% { opacity: 0.7; }
  26% { opacity: 0; }
  100% { opacity: 0; }
}

/* Game type badge */
.vs-game-type {
  position: absolute;
  bottom: 15%;
  font-size: 16px; font-weight: 800;
  color: white; letter-spacing: 2px;
  padding: 10px 24px;
  border-radius: 20px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,215,0,0.3);
  animation: vsGameType 3.8s ease-out forwards;
}
@keyframes vsGameType {
  0%, 26% { opacity: 0; transform: translateY(20px); }
  34% { opacity: 1; transform: translateY(0); }
  84% { opacity: 1; }
  100% { opacity: 0; }
}

/* Decorative particles */
.vs-particles-wrap {
  position: absolute; inset: 0;
  pointer-events: none; overflow: hidden;
}
.vs-particle-el {
  position: absolute;
  font-size: 22px;
  opacity: 0;
  left: calc(35% + var(--pi) * 4%);
  top: calc(25% + var(--pi) * 7%);
  animation: vsParticle 2s calc(0.8s + var(--pi) * 0.12s) ease-out forwards;
}
@keyframes vsParticle {
  0% { opacity: 0; transform: scale(0) rotate(0deg); }
  20% { opacity: 1; transform: scale(1.3) rotate(30deg); }
  100% { opacity: 0; transform: scale(0.4) translateY(-100px) rotate(200deg); }
}

@media (max-width: 480px) {
  .vs-player-card { padding: 16px 10px; border-radius: 12px; }
  .vs-player-avatar { font-size: 40px; }
  .vs-player-name { font-size: 14px; }
  .vs-badge-circle { width: 70px; height: 70px; font-size: 28px; }
}

/* ============================================
   DEALING ANIMATION (Distribution de cartes)
   ============================================ */

.deal-overlay {
  position: fixed; inset: 0;
  z-index: 6500;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85);
  pointer-events: none;
  animation: dealOverlayIn 0.3s ease-out;
}
.deal-overlay.done {
  animation: dealOverlayIn 0.3s ease-out, dealOverlayOut 0.4s 0.3s ease-in forwards;
}
@keyframes dealOverlayIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dealOverlayOut {
  to { opacity: 0; }
}

.deal-title {
  text-align: center;
  margin-bottom: 8px;
  animation: dealTitleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.deal-round-label {
  font-size: 16px; font-weight: 800;
  color: #f59e0b; letter-spacing: 4px;
  text-transform: uppercase;
}
.deal-round-num {
  font-size: 64px; font-weight: 900;
  color: white;
  text-shadow: 0 0 30px rgba(255,215,0,0.4);
  line-height: 1;
}
@keyframes dealTitleIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

.deal-subtitle {
  font-size: 16px; font-weight: 700;
  color: rgba(255,255,255,0.7);
  margin-bottom: 30px;
  animation: dealSubIn 0.3s 0.3s ease-out both;
}
@keyframes dealSubIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Shuffle cards stack */
.deal-cards-area {
  position: relative;
  width: 120px; height: 170px;
  margin: 0 auto;
}

.deal-shuffle-stack {
  position: relative;
  width: 100%; height: 100%;
}
.deal-shuffle-card {
  position: absolute;
  width: 70px; height: 100px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a237e, #283593, #1a237e);
  border: 2px solid #FFD700;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  animation: dealShuffle 0.25s calc(var(--si) * 0.05s) ease-in-out infinite alternate;
}
.deal-shuffle-card::after {
  content: 'LA MAP';
  position: absolute; inset: 5px;
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 3px;
  display: flex; align-items: center; justify-content: center;
  font-size: 6px; font-weight: 900;
  color: rgba(255,215,0,0.5); letter-spacing: 1px;
}
@keyframes dealShuffle {
  0% { transform: translate(-50%, -50%) rotate(calc(var(--si) * -6deg)) translateX(calc(var(--si) * -8px)); }
  100% { transform: translate(-50%, -50%) rotate(calc(var(--si) * 6deg)) translateX(calc(var(--si) * 8px)); }
}

/* Flying cards during deal */
.deal-dealing {
  position: relative;
  width: 100%; height: 100%;
}
.deal-fly-card {
  position: absolute;
  width: 50px; height: 72px;
  border-radius: 6px;
  background: linear-gradient(135deg, #1a237e, #283593);
  border: 1.5px solid #FFD700;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.deal-fly-card::after {
  content: '🃏';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
}
.deal-fly-card.to-player {
  animation: dealToPlayer 0.35s calc(var(--di) * 0.15s) ease-out forwards;
}
.deal-fly-card.to-opponent {
  animation: dealToOpponent 0.35s calc(var(--di) * 0.15s) ease-out forwards;
}

@keyframes dealToPlayer {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 0.4; transform: translate(calc(-50% + (var(--di) - 4) * 25px), 80px) scale(0.7) rotate(calc((var(--di) - 4) * 5deg)); }
}
@keyframes dealToOpponent {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 0.4; transform: translate(calc(-50% + (var(--di) - 5) * 25px), -80px) scale(0.5) rotate(calc((var(--di) - 5) * -3deg)); }
}

/* Player indicators */
.deal-indicators {
  display: flex; justify-content: space-between;
  width: 80%; max-width: 300px;
  margin-top: 30px;
}
.deal-ind {
  font-size: 13px; font-weight: 700;
  color: rgba(255,255,255,0.5);
  padding: 6px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
}
.deal-ind-me { color: #f59e0b; }
.deal-ind-opp { color: #ef4444; }

/* ============================================
   OPPONENT CARD FLIP EFFECT
   ============================================ */

.gb-card-flip-in {
  animation: gbCardFlipIn 0.5s ease-out;
}
@keyframes gbCardFlipIn {
  0% { transform: perspective(800px) rotateY(180deg) scale(0.6); opacity: 0; }
  40% { transform: perspective(800px) rotateY(90deg) scale(0.85); opacity: 0.5; }
  70% { transform: perspective(800px) rotateY(20deg) scale(1.02); opacity: 1; }
  100% { transform: perspective(800px) rotateY(0deg) scale(1); opacity: 1; }
}

/* My card play out effect */
.gb-card-play-out {
  animation: gbCardPlayOut 0.4s ease-in;
}
@keyframes gbCardPlayOut {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-60px) scale(0.8); opacity: 0.5; }
}

/* ============================================
   ENHANCED GAME END — ELO + Stats section
   ============================================ */

.game-end-stats {
  display: flex; gap: 12px;
  justify-content: center;
  margin: 16px 0;
}
.game-end-stat {
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 16px;
  text-align: center;
}
.game-end-stat-label {
  font-size: 10px; font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.game-end-stat-value {
  font-size: 18px; font-weight: 900;
}
.game-end-stat-value.elo-up { color: #22c55e; }
.game-end-stat-value.elo-down { color: #ef4444; }

.game-end-elo-change {
  font-size: 20px; font-weight: 900;
  margin: 8px 0;
  animation: eloChangeIn 0.5s 0.8s ease-out both;
}
@keyframes eloChangeIn {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

/* Enhanced win card gradient */
.game-end-card.win-card {
  background: linear-gradient(135deg, #0d3320, #1a3a1a, #0d2818);
  border: 1px solid rgba(255,215,0,0.35);
  box-shadow: 0 0 40px rgba(255,215,0,0.15);
}

/* Enhanced confetti with color variety */
.game-end-confetti-colored {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: coloredConfettiFall var(--duration, 3s) ease-in forwards;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
@keyframes coloredConfettiFall {
  0% { opacity: 0; transform: translateY(-20px) rotate(0deg); }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(var(--endY, 400px)) translateX(var(--driftX, 0px)) rotate(var(--rot, 720deg)); }
}

/* ============================================
   ENHANCED COMBO — Secondary emoji + glow ring
   ============================================ */

.combo-secondary-emoji {
  position: absolute;
  top: -30px; right: -20px;
  font-size: 40px;
  animation: comboSecondary 0.5s 0.3s ease-out both;
}
@keyframes comboSecondary {
  from { opacity: 0; transform: scale(0) rotate(-30deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

.combo-glow-ring {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  border: 3px solid;
  opacity: 0;
  animation: comboRingPulse 1s ease-in-out infinite;
}
@keyframes comboRingPulse {
  0% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 0.4; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* ============================================
   ROUND START QUICK FLASH (before new round)
   ============================================ */

.round-flash {
  position: fixed; inset: 0;
  z-index: 6000;
  background: white;
  pointer-events: none;
  animation: roundFlash 0.3s ease-out forwards;
}
@keyframes roundFlash {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}

/* ── QUIT CONFIRM MODAL ─────────────────────── */
.quit-modal-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  z-index: 8000;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn 0.2s ease;
  backdrop-filter: blur(4px);
}
.quit-modal {
  background: linear-gradient(135deg, #2d1f3d, #1a1a2e);
  border-radius: 20px;
  padding: 32px 28px;
  max-width: 360px;
  width: 90%;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  animation: popIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.quit-modal-icon {
  font-size: 48px;
  margin-bottom: 12px;
  filter: drop-shadow(0 0 12px rgba(239,68,68,0.4));
}
.quit-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 10px;
}
.quit-modal-text {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  margin: 0 0 24px;
  line-height: 1.5;
}
.quit-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quit-modal-btn {
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.15s ease;
  border: none;
}
.quit-modal-btn:active { transform: scale(0.97); }
.quit-modal-actions .btn-secondary.quit-modal-btn {
  background: rgba(34,197,94,0.15);
  border: 1px solid rgba(34,197,94,0.3);
  color: #22c55e;
}
.quit-modal-actions .btn-danger.quit-modal-btn {
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444;
}

/* ── GAME CHAT ─────────────────────────────── */

.gchat-float {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.gchat-fab {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  border: 2px solid rgba(245,158,11,0.5);
  color: white;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  transition: transform 0.15s;
}
.gchat-fab:hover { transform: scale(1.1); }
.gchat-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  animation: gchat-pulse 1.5s ease infinite;
}
@keyframes gchat-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.gchat-bubble {
  background: rgba(0,0,0,0.85);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 12px 12px 4px 12px;
  padding: 8px 14px;
  color: white;
  font-size: 13px;
  max-width: 200px;
  word-break: break-word;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  animation: gchat-slide-in 0.3s ease;
}
@keyframes gchat-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.gchat-panel {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 300px;
  max-height: 420px;
  background: rgba(15,10,31,0.95);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: 16px;
  z-index: 900;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  backdrop-filter: blur(10px);
  animation: gchat-slide-in 0.2s ease;
}
.gchat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  font-size: 14px;
  font-weight: 700;
}
.gchat-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}
.gchat-close:hover { color: white; }

.gchat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  min-height: 120px;
  max-height: 200px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gchat-empty {
  text-align: center;
  color: rgba(255,255,255,0.3);
  font-size: 13px;
  padding: 20px 0;
}
.gchat-msg {
  max-width: 85%;
  padding: 6px 10px;
  border-radius: 12px;
  font-size: 13px;
  word-break: break-word;
}
.gchat-msg.mine {
  align-self: flex-end;
  background: rgba(245,158,11,0.2);
  border: 1px solid rgba(245,158,11,0.3);
  color: #fbbf24;
}
.gchat-msg.theirs {
  align-self: flex-start;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
}
.gchat-sender {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.4);
  margin-bottom: 2px;
}
.gchat-text { line-height: 1.4; }

.gchat-quick {
  display: flex;
  gap: 4px;
  padding: 4px 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.gchat-qbtn {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.gchat-qbtn:hover { background: rgba(255,255,255,0.15); }
.gchat-qbtn:active { transform: scale(0.9); }

.gchat-input-row {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.gchat-input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 6px 10px;
  color: white;
  font-size: 13px;
  outline: none;
}
.gchat-input::placeholder { color: rgba(255,255,255,0.3); }
.gchat-input:focus { border-color: rgba(245,158,11,0.5); }
.gchat-send {
  background: rgba(245,158,11,0.2);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 8px;
  padding: 6px 12px;
  color: #f59e0b;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.gchat-send:hover { background: rgba(245,158,11,0.35); }

/* ── VOICE CHAT BUTTON ──────────────────────── */

.voice-btn {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 900;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  background: rgba(0,0,0,0.7);
  border: 2px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.5);
  transition: all 0.2s;
}
.voice-btn.active {
  border-color: rgba(74,222,128,0.5);
  background: rgba(74,222,128,0.15);
  color: #4ade80;
}
.voice-btn.muted {
  border-color: rgba(239,68,68,0.5);
  background: rgba(239,68,68,0.15);
  color: #ef4444;
}
.voice-btn:hover { transform: scale(1.05); }
.voice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.voice-btn.active .voice-dot { animation: voice-pulse 1s ease infinite; }
@keyframes voice-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* ── CHALLENGE CONFIG PAGE ───────────────────────── */
.challenge-config-page { padding-bottom: 32px; }
.challenge-config-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.challenge-config-friend { display: flex; align-items: center; gap: 12px; }
.challenge-friend-avatar { font-size: 36px; }
.challenge-friend-name { font-size: 16px; font-weight: 700; color: #fff; }
.challenge-friend-meta { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 2px; }

.challenge-section { padding: 16px 16px 0; }
.challenge-section-title {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}

/* Type cards */
.challenge-type-cards { display: flex; gap: 10px; }
.challenge-type-card {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  padding: 14px 10px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.challenge-type-card.selected {
  border-color: #6366f1;
  background: rgba(99,102,241,0.15);
}
.challenge-type-card.bet.selected {
  border-color: #22c55e;
  background: rgba(34,197,94,0.12);
}
.challenge-type-icon { font-size: 28px; display: block; margin-bottom: 6px; }
.challenge-type-name { font-size: 14px; font-weight: 700; color: #fff; }
.challenge-type-desc { font-size: 11px; color: rgba(255,255,255,0.45); margin-top: 2px; }

/* Bet presets */
.bet-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.bet-preset-btn {
  padding: 8px 14px;
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: all .15s;
}
.bet-preset-btn.selected {
  background: rgba(34,197,94,0.2);
  border-color: #22c55e;
  color: #22c55e;
  font-weight: 700;
}
.challenge-bet-display {
  font-size: 20px;
  font-weight: 800;
  color: #22c55e;
  margin-top: 4px;
}

/* Rounds */
.rounds-selector { display: flex; gap: 10px; }
.rounds-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s;
}
.rounds-btn.selected {
  border-color: #6366f1;
  background: rgba(99,102,241,0.2);
  color: #a5b4fc;
}

/* Rules toggles */
.rules-toggles { display: flex; flex-direction: column; gap: 8px; }
.rule-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer;
  transition: all .15s;
}
.rule-toggle.on { border-color: rgba(99,102,241,0.4); background: rgba(99,102,241,0.08); }
.rule-emoji { font-size: 22px; }
.rule-info { flex: 1; }
.rule-name { font-size: 14px; font-weight: 600; color: #fff; display: block; }
.rule-mult { font-size: 11px; color: rgba(255,255,255,0.4); }
.rule-switch {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: rgba(255,255,255,0.12);
  position: relative;
  transition: background .2s;
}
.rule-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .2s;
}
.rule-switch.on { background: #6366f1; }
.rule-switch.on::after { transform: translateX(18px); }

/* btn-full */
.btn-full { width: 100%; }
.btn-ghost {
  display: block;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  cursor: pointer;
}

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

/* ── CHALLENGE WAITING SCREEN ────────────────────── */
.challenge-waiting {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70vh;
  text-align: center;
}
.challenge-wait-anim {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.challenge-wait-icon { font-size: 48px; position: relative; z-index: 2; }
.challenge-wait-rings { position: absolute; inset: 0; }
.wait-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(99,102,241,0.4);
  animation: wait-pulse 2s ease-in-out infinite;
}
.wait-ring.ring-1 { animation-delay: 0s; }
.wait-ring.ring-2 { animation-delay: 0.5s; inset: -12px; }
.wait-ring.ring-3 { animation-delay: 1s; inset: -24px; }
@keyframes wait-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}
.challenge-wait-title { font-size: 22px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.challenge-wait-sub { font-size: 15px; color: rgba(255,255,255,0.6); margin: 0 0 8px; }
.challenge-wait-timer { font-size: 13px; color: rgba(255,255,255,0.35); font-variant-numeric: tabular-nums; }