/**
 * LoMi Quest - Global Styles
 * Reset, typography, utilities
 */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Roboto:wght@300;400;500;700&display=swap');

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-dark);
  overflow-x: hidden;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text-heading);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--spacing-md);
}

h1 {
  font-size: var(--font-size-3xl);
}

h2 {
  font-size: var(--font-size-2xl);
}

h3 {
  font-size: var(--font-size-xl);
}

p {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-secondary);
}

a {
  color: var(--color-secondary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-secondary-light);
}

/* Utility Classes */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-muted {
  color: var(--color-text-muted);
}

.text-success {
  color: var(--color-success);
}

.text-warning {
  color: var(--color-warning);
}

.text-error {
  color: var(--color-error);
}

.hidden {
  display: none !important;
}

.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.grid {
  display: grid;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-md); }
.p-3 { padding: var(--spacing-lg); }
.p-4 { padding: var(--spacing-xl); }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-medium);
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-light);
}

/* Container */
.container {
  max-width: var(--max-content-width);
  margin: 0 auto;
  padding: var(--spacing-lg);
}

/* Background Pattern */
.bg-pattern {
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(218, 165, 32, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(139, 69, 19, 0.15) 0%, transparent 50%);
}

/* ============================================================
 * LOMIQUEST — GLOBAL RESPONSIVE LAYER (frontend-only)
 * Preserves palette/typography; only adapts layout per width.
 * Breakpoints: 1024 laptop / 768 tablet / 480 large-mobile /
 * 360 small-mobile + landscape orientation.
 * ============================================================ */
img, video, svg, canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

table {
  max-width: 100%;
}

/* Prevent long words / codes from forcing horizontal scroll */
p, li, td, th, h1, h2, h3, h4, span, div {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

code, pre {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 1024px) {
  html { font-size: 15px; }
  .container { padding: var(--spacing-md); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); }
}

@media (max-width: 768px) {
  html { font-size: 15px; }
  .container { padding: var(--spacing-md) var(--spacing-sm); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; gap: var(--spacing-md); }
  .flex-between { flex-wrap: wrap; gap: var(--spacing-sm); }
  h1 { font-size: 1.75rem !important; line-height: 1.25; }
  h2 { font-size: 1.4rem !important; }
  h3 { font-size: 1.15rem !important; }
  /* Inline-style overrides for landing / auth pages (keep design, fix overflow) */
  .hero-title { font-size: clamp(2rem, 11vw, 2.6rem) !important; letter-spacing: 2px !important; }
  .hero-subtitle { font-size: 1rem !important; padding: 0 8px; }
  .hero::before { width: 90vw !important; max-width: 420px; }
}

@media (max-width: 480px) {
  html { font-size: 14px; }
  body { line-height: 1.55; }
  .container { padding: var(--spacing-sm); }
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.25rem !important; }
  .hero-title { font-size: clamp(1.7rem, 12vw, 2.2rem) !important; letter-spacing: 1px !important; }
  .start-btn { width: 100%; max-width: 320px; padding: 15px 20px !important; font-size: 1rem !important; }
}

/* Landscape phones: reduce vertical chrome, keep content reachable */
@media (max-height: 500px) and (orientation: landscape) {
  .container { padding-top: var(--spacing-sm); padding-bottom: var(--spacing-sm); }
}

/* Touch targets: minimum 44px on coarse pointers */
@media (pointer: coarse) {
  a, button, .btn, .nav-tab, .filter-tab, .filter-btn {
    min-height: 44px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ============================================================
 * PAGE-SPECIFIC SAFETY NET (frontend-only overrides)
 * These classes live inside per-page <style> blocks; the rules
 * below only collapse/space them on small screens. No colours,
 * branding, or behaviour changed.
 * ============================================================ */

/* Leaderboard top-three (was fixed repeat(3, 1fr)) */
.top-three {
  max-width: 100%;
}
.stats-cards {
  max-width: 100%;
}
@media (max-width: 768px) {
  .top-three {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .top-player-card {
    padding: 16px !important;
  }
  .player-username {
    font-size: 1.1rem !important;
    overflow-wrap: break-word;
  }
  .leaderboard-filters,
  .filter-buttons,
  .difficulty-filter {
    width: 100%;
  }
  .leaderboard-filters .filter-btn,
  .filter-buttons .filter-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}

/* Lobby / access-code row (inline flex + fixed 140px input) */
#accessCodeSection > div {
  min-width: 0;
}
#accessCodeInput {
  max-width: 100%;
}
@media (max-width: 480px) {
  #accessCodeSection > div {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #accessCodeSection > div > div {
    width: 100% !important;
    min-width: 0 !important;
  }
  #accessCodeInput {
    width: 100% !important;
    font-size: 1.1rem !important;
    letter-spacing: 2px !important;
  }
  #accessCodeBtn,
  #clearCodeBtn {
    width: 100%;
  }
}

/* Results / passing-rate labels */
@media (max-width: 600px) {
  .passing-rate-labels {
    flex-direction: column !important;
    gap: 4px;
    text-align: center;
  }
  .result-status-banner {
    flex-direction: column;
    font-size: 1rem !important;
    padding: 12px !important;
  }
  .unlock-status {
    flex-direction: column;
    text-align: center;
  }
}

/* Profile / progression grids */
@media (max-width: 480px) {
  .progression-cards,
  .profile-cards,
  .stats-cards {
    grid-template-columns: 1fr !important;
  }
}

/* Landing + auth shells */
.login-container,
.register-container {
  max-width: 100%;
}
@media (max-width: 480px) {
  .home-header {
    padding: 12px 14px !important;
  }
  .logo {
    font-size: 1.25rem !important;
  }
  .hero {
    padding: 28px 14px !important;
  }
  .content-panel {
    padding: 20px 14px !important;
  }
  .login-container,
  .register-container {
    width: calc(100% - 20px) !important;
    padding: var(--spacing-lg) var(--spacing-md) !important;
  }
  .dropdown-menu {
    right: 0;
    max-width: calc(100vw - 24px);
  }
}

/* Quiz admin inline panels / search bars */
.search-bar form {
  max-width: 100%;
}
@media (max-width: 480px) {
  .search-bar form > * {
    flex: 1 1 100% !important;
  }
  .search-bar .form-input {
    min-width: 0 !important;
  }
}