/* ============================================
   MOVIEDLE — PREMIUM LIGHT THEME
   style.css
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800&family=DM+Serif+Display:ital@0;1&display=swap');

/* ── VARIABLES ── */
:root {
  --red:          #dc2626;
  --red-hover:    #b91c1c;
  --red-light:    #fef2f2;
  --red-border:   #fecaca;
  --red-glow:     rgba(220, 38, 38, 0.12);

  --bg:           #f5f4f1;
  --surface:      #ffffff;
  --surface2:     #f0eeeb;
  --surface3:     #e8e6e1;

  --border:       rgba(0, 0, 0, 0.08);
  --border-mid:   rgba(0, 0, 0, 0.12);
  --border-strong:rgba(0, 0, 0, 0.16);

  --text:         #0f0f0f;
  --text-2:       #4a4a4a;
  --text-3:       #909090;
  --text-4:       #b8b8b8;

  --radius-xs:    8px;
  --radius-sm:    12px;
  --radius:       18px;
  --radius-lg:    24px;
  --radius-xl:    32px;
  --radius-2xl:   40px;

  --shadow-sm:    0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow:       0 4px 16px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-lg:    0 12px 40px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-red:   0 8px 32px rgba(220,38,38,0.22);
}

/* ── RESET & BASE ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Override tailwind color variables to match new theme */
.bg-dark    { background-color: var(--bg) !important; }
.text-text  { color: var(--text) !important; }
.bg-surface { background-color: var(--surface) !important; }

/* ── AMBIENT BG (override tailwind inline) ── */
body > div.fixed > div:first-child {
  background: radial-gradient(ellipse at top left, rgba(220,38,38,0.06) 0%, transparent 60%) !important;
}
body > div.fixed > div:last-child {
  background: radial-gradient(ellipse at bottom right, rgba(99,102,241,0.04) 0%, transparent 60%) !important;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar       { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ── SELECTION ── */
::selection { background: var(--red); color: #fff; }

/* ── MAX CONTAINER ── */
.max-w-2xl { max-width: 640px !important; }

/* ── HEADER ── */
header {
  border-bottom-color: var(--border) !important;
  padding-bottom: 20px !important;
  margin-bottom: 32px !important;
}

/* Logo icon box */
header .w-12.h-12 {
  width: 44px !important;
  height: 44px !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-sm) !important;
  transform: none !important;
}

/* Logo title */
header h1 {
  font-family: 'DM Serif Display', serif !important;
  font-size: 26px !important;
  font-style: italic !important;
  font-weight: 400 !important;
  letter-spacing: -0.03em !important;
  color: var(--text) !important;
}

/* Logo subtitle */
header p {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 8px !important;
  font-weight: 700 !important;
  letter-spacing: 0.22em !important;
  color: var(--red) !important;
}

/* Header icon buttons */
header button.p-3 {
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: var(--radius-xs) !important;
  color: var(--text-2) !important;
  transition: background 0.15s, color 0.15s !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
header button.p-3:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
header button.p-3.text-primary { color: var(--red) !important; }

/* Login button */
#auth-container button {
  background: transparent !important;
  border: 1px solid var(--red) !important;
  color: var(--red) !important;
  border-radius: var(--radius-xs) !important;
  padding: 8px 16px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  transition: all 0.15s !important;
}
#auth-container button:hover {
  background: var(--red) !important;
  color: #fff !important;
}

/* ── VIDEO PLAYER ── */
.relative.group.w-full {
  border-radius: var(--radius-lg) !important;
}

/* Outer glow on hover */
.relative.group.w-full > .absolute.-inset-1 {
  display: none !important;
}

/* Player container */
.relative.group.w-full > .relative {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
  background: #0c0c0c !important;
  aspect-ratio: 16 / 9;
  min-height: unset !important;
}

canvas#game-canvas {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Loader */
#loader {
  background: var(--surface) !important;
  border-radius: var(--radius-lg);
}
#loader p {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4em !important;
  color: var(--text-3) !important;
}

/* Splash Screen */
#splash-screen {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: var(--radius-lg) !important;
}

#splash-screen h2 {
  font-family: 'DM Serif Display', serif !important;
  font-style: italic !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}

#splash-screen p {
  color: var(--text-3) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
}

#start-game-btn {
  background: var(--red) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-red) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  padding: 14px 40px !important;
  border: none !important;
  color: #fff !important;
  transition: transform 0.15s, opacity 0.15s !important;
}
#start-game-btn:hover { opacity: 0.88 !important; transform: translateY(-1px) !important; }
#start-game-btn:active { transform: scale(0.97) !important; }

/* Lockout Overlay */
#lockout-overlay {
  background: rgba(250,249,246,0.97) !important;
  border-radius: var(--radius-lg) !important;
  backdrop-filter: blur(20px) !important;
}

#lockout-overlay .w-20.h-20 {
  background: var(--surface2) !important;
  border-radius: 50% !important;
}

#lockout-title {
  font-family: 'DM Serif Display', serif !important;
  font-style: italic !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}

#lockout-overlay p {
  color: var(--text-3) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
}

#next-game-timer {
  color: var(--red) !important;
  font-size: 48px !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  font-variant-numeric: tabular-nums !important;
}

#lockout-overlay button {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
  letter-spacing: 0.2em !important;
  background: none !important;
  border: none !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
#lockout-overlay button:hover { color: var(--text) !important; }

/* Countdown Overlay */
#countdown-overlay {
  background: rgba(255,255,255,0.96) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: var(--radius-lg) !important;
}
#countdown-text {
  font-family: 'DM Serif Display', serif !important;
  font-style: italic !important;
  font-size: 96px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
}

/* Canvas Overlay (play icon) */
#canvas-overlay {
  background: rgba(0,0,0,0.45) !important;
  transition: background 0.2s !important;
}
#canvas-overlay:hover { background: rgba(0,0,0,0.25) !important; }
#canvas-overlay > div {
  width: 64px !important;
  height: 64px !important;
  background: rgba(255,255,255,0.18) !important;
  border: 1.5px solid rgba(255,255,255,0.35) !important;
  border-radius: 50% !important;
  backdrop-filter: blur(8px) !important;
  transition: transform 0.15s !important;
}
#canvas-overlay:hover > div { transform: scale(1.08) !important; }
#canvas-overlay svg { color: #fff !important; }

/* prebg / postbg overlays — keep as-is, just rounded */
#prebg-overlay, #postbg-overlay {
  border-radius: var(--radius-lg) !important;
}

/* ── CONTROLS AREA ── */
#controls-area {
  padding-top: 4px;
}

/* ── PROGRESSION BAR ── */
#progression-bar {
  gap: 8px !important;
}

.attempt-box {
  height: 5px !important;
  border-radius: 99px !important;
  background: var(--surface3) !important;
  border: none !important;
  transition: background 0.4s, transform 0.3s !important;
}

.attempt-box.success {
  background: var(--red) !important;
  box-shadow: none !important;
  border: none !important;
}

.attempt-box.fail {
  background: #d1d5db !important;
  border: none !important;
}

/* ── HINT BOX ── */
#hint-container { margin-bottom: 4px; }

#hint-box {
  background: var(--red-light) !important;
  border: 1px solid var(--red-border) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 16px !important;
}

#hint-box .animate-ping {
  background: var(--red) !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
}

#hint-text {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #991b1b !important;
  letter-spacing: 0.1em !important;
}

#reveal-btn {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--red) !important;
  letter-spacing: 0.1em !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  text-decoration: underline !important;
}

/* ── GUESS INPUT ── */
#guess-input {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  font-family: 'DM Sans', sans-serif !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  letter-spacing: -0.01em !important;
}

#guess-input:focus {
  outline: none !important;
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-glow), var(--shadow-sm) !important;
}

#guess-input::placeholder {
  color: var(--text-4) !important;
  font-weight: 400 !important;
}

/* Search status text */
#search-status {
  font-size: 9px !important;
  font-weight: 700 !important;
  color: var(--red) !important;
  letter-spacing: 0.2em !important;
  opacity: 0.7 !important;
}

/* ── SEARCH RESULTS DROPDOWN ── */
#search-results {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden !important;
  margin-top: 6px !important;
}

/* Individual result items — target via parent */
#search-results > div,
#search-results > button,
#search-results li {
  border-bottom: 1px solid var(--border) !important;
  padding: 10px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
}
#search-results > *:last-child {
  border-bottom: none !important;
}
#search-results > *:hover {
  background: var(--surface2) !important;
}

/* ── BUTTONS ── */
#skip-btn {
  background: var(--surface) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-2) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 14px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background 0.15s, color 0.15s !important;
  cursor: pointer !important;
}
#skip-btn:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

#next-sec-label {
  opacity: 0.5;
  font-weight: 600;
}

#submit-btn {
  background: var(--red) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  padding: 14px !important;
  box-shadow: var(--shadow-red) !important;
  transition: opacity 0.15s, transform 0.15s !important;
  cursor: pointer !important;
}
#submit-btn:hover    { opacity: 0.88 !important; }
#submit-btn:active   { transform: scale(0.98) !important; }
#submit-btn:disabled {
  opacity: 0.35 !important;
  filter: grayscale(0.5) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* ── GUESSES LOG ── */
#guesses-log {
  display: flex;
  flex-direction: column;
  gap: 8px !important;
}

/* Each guess row — app.js injects these */
#guesses-log > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 12px 16px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: var(--shadow-sm) !important;
  animation: fadeIn 0.3s ease-out !important;
}

/* ── MODALS — COMMON ── */
/* Backdrop */
#auth-modal,
#leaderboard-modal,
#stats-modal,
#results-modal {
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

#auth-modal       { background: rgba(0,0,0,0.3) !important; }
#leaderboard-modal{ background: rgba(0,0,0,0.3) !important; }
#stats-modal      { background: rgba(245,244,241,0.85) !important; }
#results-modal    { background: rgba(0,0,0,0.35) !important; }

/* Modal cards */
#auth-modal > div,
#leaderboard-modal > div,
#results-modal > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}

#stats-modal > div {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--text) !important;
}

/* Close buttons */
#auth-modal button[onclick*="close"],
#leaderboard-modal button[onclick*="close"],
#stats-modal button[onclick*="close"],
#results-modal button[onclick*="close"] {
  color: var(--text-3) !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
}
#auth-modal button[onclick*="close"]:hover,
#leaderboard-modal button[onclick*="close"]:hover,
#stats-modal button[onclick*="close"]:hover,
#results-modal button[onclick*="close"]:hover {
  color: var(--text) !important;
}

/* ── AUTH MODAL ── */
#auth-title {
  font-family: 'DM Serif Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}

.auth-field,
#auth-email,
#auth-password,
#auth-name,
#auth-country {
  background: var(--surface2) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-xs) !important;
  padding: 13px 16px !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text) !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
  outline: none !important;
  width: 100% !important;
}
#auth-email:focus,
#auth-password:focus,
#auth-name:focus,
#auth-country:focus {
  border-color: var(--red) !important;
  box-shadow: 0 0 0 3px var(--red-glow) !important;
  background: var(--surface) !important;
}

#auth-error {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  background: #fef2f2 !important;
  border-radius: var(--radius-xs) !important;
  color: #b91c1c !important;
}

#auth-submit-btn {
  background: var(--red) !important;
  border: none !important;
  border-radius: var(--radius-xs) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
  box-shadow: var(--shadow-red) !important;
  padding: 14px !important;
  cursor: pointer !important;
  transition: opacity 0.15s, transform 0.15s !important;
}
#auth-submit-btn:hover { opacity: 0.88 !important; }

#auth-toggle {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text-3) !important;
  letter-spacing: 0.12em !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: color 0.15s !important;
  text-decoration: underline !important;
}
#auth-toggle:hover { color: var(--text) !important; }

/* ── LEADERBOARD MODAL ── */
#leaderboard-modal > div > div:first-child {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
  padding: 24px 28px !important;
}

#leaderboard-modal h3 {
  font-family: 'DM Serif Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  color: var(--text) !important;
}

/* Tab buttons */
#board-tab-wins,
#board-tab-streak {
  border-radius: var(--radius-xs) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  padding: 11px !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
}
#board-tab-wins   { background: var(--red) !important; color: #fff !important; }
#board-tab-streak { background: var(--surface2) !important; color: var(--text-2) !important; }
#board-tab-streak:hover { background: var(--surface3) !important; }

/* Board list items */
#board-list > div {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

#leaderboard-login-footer {
  padding: 18px !important;
  border-top: 1px solid var(--border) !important;
  background: var(--surface2) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}
#leaderboard-login-footer p {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.25em !important;
  color: var(--text-3) !important;
}

/* ── STATS MODAL ── */
#stats-modal h3 {
  font-family: 'DM Serif Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 22px !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}

/* Stat cards */
#stats-modal .grid > div {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 20px !important;
}

#guest-played {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--red) !important;
  letter-spacing: -0.04em !important;
  font-variant-numeric: tabular-nums !important;
}

#guest-wins {
  font-size: 36px !important;
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.04em !important;
  font-variant-numeric: tabular-nums !important;
}

#stats-modal .grid > div > div:last-child {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.2em !important;
  color: var(--text-3) !important;
  margin-top: 6px !important;
}

/* Streak rows */
#stats-modal .space-y-4 > div {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-xs) !important;
  padding: 14px 18px !important;
}
#stats-modal .space-y-4 span:first-child {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: var(--text-3) !important;
}

#guest-curr-streak { color: var(--red) !important; font-weight: 800 !important; }
#guest-max-streak  { color: var(--text) !important;  font-weight: 800 !important; }

/* ── RESULTS MODAL ── */
#modal-status {
  font-family: 'DM Serif Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 40px !important;
  color: var(--red) !important;
  letter-spacing: -0.02em !important;
}

#modal-message {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.35em !important;
  color: var(--text-3) !important;
}

/* Poster glow */
#results-modal .relative.group > .absolute.-inset-2 {
  background: radial-gradient(ellipse, rgba(220,38,38,0.15) 0%, transparent 70%) !important;
  filter: blur(16px) !important;
}

#movie-poster {
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
}

#movie-title {
  font-family: 'DM Serif Display', serif !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 28px !important;
  color: var(--text) !important;
  letter-spacing: -0.03em !important;
}

#movie-year {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.25em !important;
  color: var(--text-3) !important;
}

/* Share button */
#results-modal button[onclick*="share"] {
  background: var(--red) !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  color: #fff !important;
  box-shadow: var(--shadow-red) !important;
  cursor: pointer !important;
  transition: opacity 0.15s, transform 0.15s !important;
}
#results-modal button[onclick*="share"]:hover { opacity: 0.88 !important; }
#results-modal button[onclick*="share"]:active { transform: scale(0.98) !important; }

/* ── FOOTER ── */
footer p {
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: 0.4em !important;
  color: var(--text-4) !important;
}

/* ── ANIMATIONS ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.animate-fadeIn {
  animation: fadeIn 0.35s ease-out forwards;
}

@keyframes shake {
  0%, 100% { transform: translateX(0);  }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80%      { transform: translateX(5px);  }
}
.animate-shake {
  animation: shake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}

/* ── RESPONSIVE ── */
@media (max-width: 680px) {
  .max-w-2xl { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 520px) {
  header h1 { font-size: 20px !important; }

  /* Ensure all icons stay visible as requested */
  header button.p-3, header button.p-2 { display: inline-flex !important; }

  #auth-container button { padding: 7px 10px !important; font-size: 9px !important; }

  #next-game-timer { font-size: 38px !important; }

  #modal-status { font-size: 32px !important; }

  #movie-title { font-size: 22px !important; }

  #countdown-text { font-size: 72px !important; }

  .py-8 { padding-top: 20px !important; padding-bottom: 20px !important; }
}

@media (max-width: 400px) {
  header h1 { font-size: 18px !important; }

  .gap-8 { gap: 20px !important; }
}

/* ── BORDER WIDTH RESET (override previous rule) ── */
.border, [class*='border-'] {
  border-width: 1px !important;
}

/* ── TRANSITION SPEED ── */
.transition-all { transition-duration: 200ms !important; }

/* ── SHADOW OVERRIDE (Tailwind shadow-2xl → our system) ── */
.shadow-2xl { box-shadow: var(--shadow-lg) !important; }
.shadow-3xl { box-shadow: var(--shadow-lg) !important; }