/* ═══════════════════════════════════
   DLS Hub v3 — Official DLS Game Theme
   Colors: deep blue #1565c0, gold #ffd600,
   navy #0d1b2a, green #4caf50, white #ffffff
═══════════════════════════════════ */

/* ── Button variants ── */
.btn-lime {
  background: linear-gradient(135deg, #ffd600, #ffab00);
  color: #0d1b2a;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  border-radius: 10px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  cursor: pointer;
}
.btn-lime:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(255,214,0,0.3); }
.btn-lime:active { transform: scale(0.97); }

.btn-ghost {
  border: 1px solid rgba(255,255,255,0.1);
  color: #b0bec5;
  font-weight: 500;
  border-radius: 10px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  cursor: pointer;
}
.btn-ghost:hover { border-color: rgba(255,214,0,0.4); color: #ffffff; background: rgba(255,214,0,0.05); }
.btn-ghost:active { transform: scale(0.97); }

/* ── Auth card ── */
.auth-card {
  background: linear-gradient(145deg, #0f2744, #0a1929);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* ── Form elements ── */
.form-label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #90a4ae;
  margin-bottom: 6px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  padding: 12px 16px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input::placeholder { color: rgba(255,255,255,0.3); }
.form-input:focus {
  border-color: #ffd600;
  box-shadow: 0 0 0 3px rgba(255,214,0,0.15);
}

textarea.form-input { resize: none; }

/* ── Feature cards (home) ── */
.feature-card {
  background: linear-gradient(145deg, #0f2744, #0a1929);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.feature-card:hover {
  border-color: rgba(255,214,0,0.3);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 20px rgba(255,214,0,0.08);
}

/* ── Post card ── */
.post-card {
  background: linear-gradient(145deg, #0f2744, #0a1929);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.post-card:hover { border-color: rgba(255,214,0,0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }

/* ── Chat bubble ── */
.bubble-me {
  background: linear-gradient(135deg, rgba(21,101,192,0.3), rgba(21,101,192,0.15));
  border: 1px solid rgba(21,101,192,0.3);
  border-radius: 16px 16px 4px 16px;
  padding: 10px 16px;
  max-width: 320px;
  margin-left: auto;
  font-size: 14px;
}

.bubble-other {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px 16px 16px 4px;
  padding: 10px 16px;
  max-width: 320px;
  font-size: 14px;
}

/* ── Leaderboard tab ── */
.lb-tab {
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #90a4ae;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.15s ease;
  background: transparent;
  cursor: pointer;
}
.lb-tab:hover { color: #ffffff; border-color: rgba(255,255,255,0.15); }
.lb-tab-active {
  background: linear-gradient(135deg, #ffd600, #ffab00);
  color: #0d1b2a;
  border-color: #ffd600;
  box-shadow: 0 2px 8px rgba(255,214,0,0.2);
}

/* ── Leaderboard scroll container ── */
.leaderboard-scroll::-webkit-scrollbar { width: 4px; }
.leaderboard-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
.leaderboard-scroll::-webkit-scrollbar-thumb { background: rgba(255,214,0,0.3); border-radius: 9999px; }
.leaderboard-scroll::-webkit-scrollbar-thumb:hover { background: #ffd600; }

/* ── Leaderboard row ── */
.lb-row {
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s ease;
}
.lb-row:last-child { border-bottom: none; }
.lb-row:hover { background: rgba(255,255,255,0.04); }

.lb-rank-1 { color: #ffd600; font-weight: 700; }
.lb-rank-2 { color: #b0bec5; font-weight: 700; }
.lb-rank-3 { color: #ff8a65; font-weight: 700; }

/* ── Notification item ── */
.notif-item {
  padding: 12px 16px;
  transition: background 0.15s ease;
  cursor: pointer;
}
.notif-item:hover { background: rgba(255,255,255,0.04); }

/* ── Scrollbar (webkit) ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #ffd600; }

/* ── Page transition ── */
.page-view {
  animation: fadeUp 0.2s ease both;
}

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

/* ── DM conversation item ── */
.dm-convo-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s ease;
  display: flex;
  align-items: center;
  gap: 12px;
}
.dm-convo-item:hover { background: rgba(255,255,255,0.04); }
.dm-convo-item.active {
  background: rgba(255,214,0,0.08);
  border-right: 3px solid #ffd600;
}

/* ── Comment ── */
.comment-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 12px;
}

/* ── Mobile hamburger menu ── */
#mobile-menu {
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  background: #0d1b2a;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 16px;
  z-index: 40;
}
#mobile-menu a,
#mobile-menu button {
  color: #90a4ae;
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
#mobile-menu a:hover,
#mobile-menu button:hover {
  color: #ffd600;
}

/* ── Smooth shadows ── */
.shadow-lg {
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

/* ── Gold glow effect ── */
.gold-glow {
  box-shadow: 0 0 20px rgba(255,214,0,0.15);
}

/* ═══════════════════════════════════
   LIGHT MODE
═══════════════════════════════════ */

html.light body,
html.light .bg-pitch {
  background: #f0f4f8 !important;
  color: #0d1b2a !important;
}

html.light .bg-turf,
html.light .auth-card,
html.light .feature-card,
html.light .post-card {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

html.light .text-ice,
html.light .text-gray-900 {
  color: #0d1b2a !important;
}

html.light .text-mist {
  color: #607d8b !important;
}

html.light .form-input {
  background: #f5f5f5 !important;
  border-color: #e0e0e0 !important;
  color: #0d1b2a !important;
}

html.light .form-input:focus {
  border-color: #1565c0;
  box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
}

html.light .btn-lime {
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: #ffffff;
}

html.light .btn-ghost {
  border-color: #e0e0e0;
  color: #546e7a;
}

html.light .btn-ghost:hover {
  border-color: #1565c0;
  color: #1565c0;
}

html.light nav,
html.light #navbar {
  background: rgba(255,255,255,0.95) !important;
  border-color: #e0e0e0 !important;
}

html.light .bubble-me {
  background: rgba(21,101,192,0.1);
  border-color: rgba(21,101,192,0.2);
}

html.light .bubble-other {
  background: #f5f5f5;
}

html.light .lb-tab {
  border-color: #e0e0e0;
  color: #607d8b;
}

html.light .lb-tab-active {
  background: linear-gradient(135deg, #1565c0, #1976d2);
  color: #ffffff;
}

html.light .lb-row {
  border-color: #e0e0e0;
}

html.light .lb-row:hover {
  background: #f5f5f5;
}

html.light #mobile-menu {
  background: #ffffff !important;
  border-color: #e0e0e0 !important;
}

html.light .dm-convo-item:hover {
  background: #f5f5f5;
}

html.light .dm-convo-item.active {
  background: rgba(21,101,192,0.08);
}

html.light .notif-item:hover {
  background: #f5f5f5;
}

html.light ::-webkit-scrollbar-thumb {
  background: #bdbdbd;
}

html.light ::-webkit-scrollbar-thumb:hover {
  background: #1565c0;
}

html.light .post-card:hover { border-color: #bdbdbd; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
html.light .feature-card:hover { border-color: #bdbdbd; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }

/* ── Safe area for mobile notch/home bar ── */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ── Mobile bottom nav padding ── */
@media (max-width: 767px) {
  main { padding-bottom: 80px !important; }
  .page-view { padding-bottom: 80px !important; }
  .bubble-me, .bubble-other { max-width: 85vw; }
  .auth-card { padding: 20px !important; }
  .form-input { padding: 10px 14px; font-size: 16px; }
}

/* ── Chat container height (fixes mobile bottom-nav overlap) ── */
.chat-container {
  height: calc(100vh - 56px);
}
@supports (height: 100dvh) {
  .chat-container { height: calc(100dvh - 56px); }
}
@media (max-width: 767px) {
  /* Chat page manages its own height/scroll, so it shouldn't get the
     generic 80px page padding on top of this — that just added dead
     space instead of clearing the fixed bottom nav. */
  #page-chat.page-view { padding-bottom: 0 !important; }
  .chat-container {
    height: calc(100vh - 56px - 64px - env(safe-area-inset-bottom, 0px));
  }
  @supports (height: 100dvh) {
    .chat-container {
      height: calc(100dvh - 56px - 64px - env(safe-area-inset-bottom, 0px));
    }
  }
}

/* ── Chat responsive fix ── */
@media (max-width: 640px) {
  .dm-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-height: 40vh !important;
    overflow-y: auto !important;
  }
  .dm-main {
    width: 100% !important;
    min-height: 50vh !important;
  }
}

/* ── Mobile feature cards grid fix ── */
@media (max-width: 480px) {
  .feature-card {
    padding: 16px !important;
    border-radius: 12px !important;
  }
  .post-card {
    padding: 14px !important;
    border-radius: 12px !important;
  }
}

/* ── Mobile touch targets ── */
@media (max-width: 767px) {
  button, a, .nav-link, .lb-tab {
    min-height: 44px;
    min-width: 44px;
  }
  .bottom-nav button {
    min-height: 48px;
  }
}

/* ═══════════════════════════════════
   v4 FEATURES
═══════════════════════════════════ */

/* ── Reaction bar ── */
.reaction-bar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #90a4ae;
}
.reaction-pill:hover { border-color: rgba(255,214,0,0.3); background: rgba(255,214,0,0.06); }
.reaction-pill.active { border-color: rgba(255,214,0,0.5); background: rgba(255,214,0,0.12); color: #ffd600; }

.reaction-popup {
  position: absolute;
  bottom: 100%;
  left: 0;
  background: #0a1929;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 6px 8px;
  display: flex;
  gap: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  z-index: 30;
}
.reaction-popup button {
  font-size: 20px;
  padding: 4px 6px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.15s;
}
.reaction-popup button:hover { background: rgba(255,214,0,0.15); transform: scale(1.2); }

/* ── Share button ── */
.share-btn { transition: all 0.15s; }
.share-btn:hover { color: #4fc3f7; }

/* ── Online dot ── */
.online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf50;
  display: inline-block;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Post highlight (for share links) ── */
.post-highlight {
  animation: highlight-post 2s ease;
}
@keyframes highlight-post {
  0% { box-shadow: 0 0 0 3px rgba(255,214,0,0.6); }
  100% { box-shadow: none; }
}

/* ── Squad card ── */
.squad-card {
  background: linear-gradient(145deg, #0f2744, #0a1929);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.squad-card:hover { border-color: rgba(255,214,0,0.25); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }

.formation-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255,214,0,0.12);
  color: #ffd600;
  border: 1px solid rgba(255,214,0,0.2);
}

/* ── Prediction match card ── */
.pred-card {
  background: linear-gradient(145deg, #0f2744, #0a1929);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}
.pred-vs {
  font-family: 'Rajdhani', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #90a4ae;
}

.pred-input {
  width: 60px;
  text-align: center;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 8px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  font-family: 'Rajdhani', sans-serif;
  outline: none;
}
.pred-input:focus { border-color: #ffd600; box-shadow: 0 0 0 2px rgba(255,214,0,0.15); }

/* ── POTW nomination card ── */
.potw-card {
  background: linear-gradient(145deg, #0f2744, #0a1929);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: border-color 0.15s;
}
.potw-card:hover { border-color: rgba(255,214,0,0.2); }

.potw-rating-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 8px;
  font-weight: 700;
  background: linear-gradient(135deg, #ffd600, #ffab00);
  color: #0d1b2a;
  font-family: 'Rajdhani', sans-serif;
  font-size: 16px;
}

.vote-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: #90a4ae;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}
.vote-btn:hover { border-color: rgba(255,255,255,0.2); color: #ffffff; }
.vote-btn.voted-up { border-color: rgba(76,175,80,0.4); color: #4caf50; background: rgba(76,175,80,0.1); }
.vote-btn.voted-down { border-color: rgba(239,68,68,0.4); color: #ef4444; background: rgba(239,68,68,0.1); }

/* ── Admin report item ── */
.report-item {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background 0.15s;
}
.report-item:last-child { border-bottom: none; }
.report-item:hover { background: rgba(255,255,255,0.04); }

/* ── Username clickable ── */
.author-link {
  color: #ffffff;
  cursor: pointer;
  transition: color 0.15s;
}
.author-link:hover { color: #ffd600; }

/* Light mode overrides for new features */
html.light .reaction-popup { background: #ffffff; border-color: #e0e0e0; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
html.light .squad-card, html.light .pred-card, html.light .potw-card { background: #ffffff !important; border-color: #e0e0e0 !important; }
html.light .pred-input { background: #f5f5f5; color: #0d1b2a; border-color: #e0e0e0; }
html.light .author-link { color: #0d1b2a; }
html.light .author-link:hover { color: #1565c0; }
html.light .report-item:hover { background: #f5f5f5; }

/* ── Leaderboard action sheet slide-up ── */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.animate-slide-up { animation: slideUp 0.25s ease both; }

/* ── Tournament match card ── */
.match-card {
  background: linear-gradient(145deg, #0f2744, #0a1929);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 16px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.match-card:hover { border-color: rgba(255,214,0,0.2); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }
.match-vs {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  color: #90a4ae;
}
.match-score {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
}
.match-winner { color: #4caf50; }
.match-loser { color: #ef4444; opacity: 0.6; }

/* ── Tournament tab active ── */
.td-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  color: #90a4ae;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.15s ease;
  background: transparent;
  cursor: pointer;
}
.td-tab:hover { color: #ffffff; border-color: rgba(255,255,255,0.15); }
.td-tab-active {
  background: linear-gradient(135deg, #ffd600, #ffab00);
  color: #0d1b2a;
  border-color: #ffd600;
  box-shadow: 0 2px 8px rgba(255,214,0,0.2);
}

/* ── Tournament filter tabs ── */
.tournament-filter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: #90a4ae;
  border: 1px solid rgba(255,255,255,0.08);
  transition: all 0.15s ease;
  background: transparent;
  cursor: pointer;
}
.tournament-filter:hover { color: #ffffff; border-color: rgba(255,255,255,0.15); }
.tournament-filter-active {
  background: linear-gradient(135deg, #ffd600, #ffab00);
  color: #0d1b2a;
  border-color: #ffd600;
}

/* ── Line clamp ── */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Bracket lines ── */
.bracket-line {
  border-left: 2px solid rgba(255,214,0,0.2);
  height: 100%;
  position: absolute;
  left: 50%;
  top: 0;
}
.bracket-connector {
  border-top: 2px solid rgba(255,214,0,0.2);
  position: absolute;
  top: 50%;
  width: 50%;
}

/* ── Tournament card ── */
.tournament-card {
  background: linear-gradient(145deg, #0f2744, #0a1929);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tournament-card:hover { border-color: rgba(255,214,0,0.3); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

/* Light mode overrides */
html.light .match-card,
html.light .tournament-card { background: #ffffff !important; border-color: #e0e0e0 !important; }
html.light .td-tab { border-color: #e0e0e0; color: #607d8b; }
html.light .td-tab-active { background: linear-gradient(135deg, #1565c0, #1976d2); color: #ffffff; }
html.light .tournament-filter { border-color: #e0e0e0; color: #607d8b; }
html.light .tournament-filter-active { background: linear-gradient(135deg, #1565c0, #1976d2); color: #ffffff; }

/* ═══════════════════════════════════════════════════════════
   V4 POLISH LAYER
   Appended, not replacing anything above. Every rule here is
   either a correction to an inconsistency that was already in
   the app, or something the app was missing entirely.
   No layout, position or colour scheme is changed.
   ═══════════════════════════════════════════════════════════ */

:root {
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --gold-soft: rgba(255, 214, 0, 0.12);
  --gold-line: rgba(255, 214, 0, 0.35);
  --hairline: rgba(255, 255, 255, 0.08);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ── Taps feel instant ── */
button, [onclick], .btn-lime, .btn-ghost, a { -webkit-tap-highlight-color: transparent; }
button:active, [onclick]:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── One scale of corner radii, so nothing looks hand-cut ── */
.rounded-xl  { border-radius: var(--radius-md) !important; }
.rounded-2xl { border-radius: var(--radius-lg) !important; }

/* ── Cards respond to the cursor. Nothing did before this. ── */
[class*="border-line"][class*="bg-turf"],
[class*="border-line"][class*="bg-carbon"] {
  transition: border-color 0.18s var(--ease), transform 0.18s var(--ease),
              box-shadow 0.18s var(--ease);
}
[class*="border-line"][class*="bg-turf"]:hover,
[class*="border-line"][class*="bg-carbon"]:hover { border-color: var(--gold-line); }

/* ── Focus: keyboard users get a ring, mouse users get nothing harsh ── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid #ffd600;
  outline-offset: 2px;
  border-radius: 6px;
}
.form-input:focus-visible { outline-offset: 0; }

/* ── Touch targets. Under 44px a button is a guess on a phone. ── */
@media (max-width: 767px) {
  button:not(.no-min-tap),
  .btn-lime,
  .btn-ghost,
  [onclick]:not(.no-min-tap) { min-height: 44px; }
  .min-h-0, .h-8, .h-9, .h-10 { min-height: revert; }
  body { font-size: 15px; }
  /* the bottom nav must never sit on top of the last card */
  main, .pb-safe { padding-bottom: 84px; }
}

/* ── Scrollbars: a light bar on a dark app reads as broken ── */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 214, 0, 0.25) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgba(255, 214, 0, 0.22);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: rgba(255, 214, 0, 0.4); }

/* ── Headings: the display font was applied inconsistently ── */
h1, h2, h3, .font-display { letter-spacing: -0.01em; }
h1 { font-family: 'Rajdhani', sans-serif; font-weight: 700; }

/* ── Long words and links must wrap, not push the card wide ── */
p, h1, h2, h3, h4, span, div { overflow-wrap: anywhere; }

/* ── Images ── */
img { background-color: rgba(255, 255, 255, 0.03); }
img[src=""], img:not([src]) { visibility: hidden; }

/* ── Empty states: a bare "no results" line reads as a bug ── */
#standings-list > p.text-mist:only-child,
#tournament-list > p.text-mist:only-child,
#notif-list > p.text-mist:only-child {
  text-align: center;
  padding: 28px 16px;
  border: 1px dashed var(--hairline);
  border-radius: var(--radius-md);
}

/* ── Shadows that actually read on a dark page ── */
.shadow-xl, .shadow-2xl {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}

/* ── Gold as a background needs dark text, or it is unreadable ── */
.bg-lime, .btn-lime { color: #0d1b2a; }

/* ── Skeleton loading, so a slow query does not look like an empty page ── */
.skeleton {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.04) 25%,
    rgba(255, 255, 255, 0.09) 37%,
    rgba(255, 255, 255, 0.04) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-md);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}