/* ============================================================
   FIFA WORLD CUP 2026 — Design System
   Themed around the three host countries: USA, Mexico, Canada.
   Surgical overrides only: we never change position/z-index/size
   of existing layout elements. We theme colors, surfaces, and
   add subtle animations on top of the original structure.
   ============================================================ */

:root {
  /* ===== Host-country flag palette =====
     The three flags of the host countries share these tones:
       USA      : red + white + blue
       Mexico   : green + white + red
       Canada   : red + white
     Result: green + red + blue with white as common ground,
     and gold for FIFA trophy / premium accent.
  */
  --mex-green:        #006847;
  --mex-green-light:  #1F9D5C;
  --shared-red:       #BF0A30;
  --shared-red-light: #E2334E;
  --usa-blue:         #3C3B6E;
  --usa-blue-dark:    #1A1947;
  --gold:             #D4A03C;
  --gold-light:       #F0CE6E;
  --gold-dark:        #A57B27;

  /* ===== Semantic (only when something MEANS that color) ===== */
  --fifa-success: var(--mex-green);
  --fifa-success-bg: #E1F0E6;
  --fifa-error: var(--shared-red);
  --fifa-error-bg: #FCE5E9;

  /* ===== Neutrals ===== */
  --white: #FFFFFF;
  --soft-white: #FAFAFA;
  --neutral-100: #F3F4F6;
  --neutral-200: #E5E7EB;
  --neutral-500: #6B7280;
  --neutral-900: #1A1A1A;

  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.28);
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.35);
  --shadow-glow-gold: 0 0 28px rgba(212, 160, 60, 0.55);
  --shadow-glow-red:  0 0 28px rgba(191, 10, 48, 0.45);

  /* ===== Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* ===== Typography ===== */
  --font-display: 'WorldCup2026', 'Archivo Black', 'Impact', sans-serif;
  --font-body: 'Open Sans', 'Inter', system-ui, -apple-system, sans-serif;

  /* ===== Motion ===== */
  --t-fast: 150ms ease;
  --t-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   ANIMATED BACKGROUND (host-country flow)
   Green (MEX) → Red (shared) → Gold (FIFA) → Blue (USA) → Green
   The animation keeps the energy of the original site while
   the palette is now meaningful (Mundial 2026 host countries).
   ============================================================ */

.content-background {
  background: linear-gradient(45deg,
    var(--mex-green) 0%,
    var(--shared-red) 28%,
    var(--gold) 52%,
    var(--usa-blue) 75%,
    var(--mex-green) 100%) !important;
  background-size: 400% 400% !important;
  animation: fifa-flag-flow 22s ease infinite !important;
  -webkit-animation: fifa-flag-flow 22s ease infinite !important;
  -moz-animation: fifa-flag-flow 22s ease infinite !important;
}

.area {
  background: linear-gradient(45deg,
    var(--mex-green) 0%,
    var(--shared-red) 28%,
    var(--gold) 52%,
    var(--usa-blue) 75%,
    var(--mex-green) 100%) !important;
  background-size: 400% 400%;
  animation: fifa-flag-flow 22s ease infinite;
}

@keyframes fifa-flag-flow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* The original morph blobs were too random; keep them off so the
   gradient and the floating circles are the only motion in the bg. */
.content-background::before { display: none !important; }

/* ============================================================
   FLOATING CIRCLES — keep them (they add real dynamism)
   but recolor to white + gold (visible on the colorful bg).
   ============================================================ */

.area .circles li,
ul.circles li {
  border-color: rgba(255, 255, 255, 0.55) !important;
  border-width: 2px !important;
}

.area .circles li:nth-child(3n),
ul.circles li:nth-child(3n) {
  border-color: rgba(212, 160, 60, 0.75) !important;
}

.area .circles li:nth-child(5n),
ul.circles li:nth-child(5n) {
  background: rgba(255, 255, 255, 0.06);
}

/* ============================================================
   GLOBAL TYPOGRAPHY base
   ============================================================ */

html, body {
  font-family: var(--font-body);
  color: var(--neutral-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   CARDS — white surface with gold top accent.
   We ONLY theme. We never touch position/z-index/transform/width.
   Centering on these elements (form-login, info_box, quiz_box,
   result_box, form.shadow-lg) comes from their original CSS via
   `position: absolute; top:50%; left:50%; transform: translate(-50%,-50%)`.
   ============================================================ */

.form-login,
form.shadow-lg,
.result_box,
.quiz_box,
.info_box {
  background: var(--soft-white) !important;
  border-radius: var(--radius-xl) !important;
  border-top: 4px solid var(--gold) !important;
  box-shadow: var(--shadow-card) !important;
  backdrop-filter: none !important;
}

/* ============================================================
   BUTTONS — themed, with proper padding so text never overflows.
   Each button class gets its own rule; we do NOT use a universal
   override because each button has different sizing needs.
   ============================================================ */

/* Navbar log-in / log-out — no native styles, so we set everything */
.boton__log {
  display: inline-block !important;
  padding: 0.55rem 1.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--shared-red) 0%, #8B0820 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--t-base) !important;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
}
.boton__log:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-gold) !important;
  color: #fff !important;
}

/* COMENZAR — 3D pushable button on landing.
   Theme colors only; layout stays untouched. */
.button-82-front {
  background: linear-gradient(135deg, var(--shared-red) 0%, #8B0820 100%) !important;
  color: #fff !important;
}
.button-82-shadow {
  background: rgba(212, 160, 60, 0.5) !important;
}
.button-82-pushable:hover .button-82-front {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  filter: brightness(1.05) !important;
}

/* Continuar / Finalizar / Siguiente pregunta.
   These had `line-height: 10px` in the original (bug!), which we
   replace with normal line-height + min-height so any Spanish
   string fits. */
button.restart,
button.quit,
button.next_btn {
  background: linear-gradient(135deg, var(--shared-red) 0%, #8B0820 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--t-base) !important;
  position: relative;
  overflow: hidden;
  line-height: 1.3 !important;
  height: auto !important;
  min-height: 42px;
  width: auto !important;
  min-width: 120px;
  padding: 0.55rem 1.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
button.restart:hover,
button.quit:hover,
button.next_btn:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-gold) !important;
}

/* Hover shine sweep on all primary buttons */
.boton__log::after,
button.restart::after,
button.quit::after,
button.next_btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 600ms ease;
  pointer-events: none;
}
.boton__log:hover::after,
button.restart:hover::after,
button.quit:hover::after,
button.next_btn:hover::after {
  left: 150%;
}

/* Form submit (login form) */
form input[type="submit"] {
  background: linear-gradient(135deg, var(--shared-red) 0%, #8B0820 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--t-base) !important;
}
form input[type="submit"]:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glow-gold) !important;
  color: #fff !important;
}

/* Register submit */
#submit {
  background: linear-gradient(135deg, var(--shared-red) 0%, #8B0820 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--radius-full) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.06em !important;
  font-size: 1rem !important;
  padding: 0.9rem 2rem !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--t-base) !important;
}
#submit:hover {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg), var(--shadow-glow-gold) !important;
  color: #fff !important;
}

/* ============================================================
   TIMER (questions screen)
   Gold bar (the trophy color) that consumes; seconds pulse.
   ============================================================ */

.quiz_box header .time_line {
  background: linear-gradient(90deg,
    var(--gold) 0%,
    var(--gold-light) 50%,
    var(--gold) 100%) !important;
  background-size: 200% 100%;
  height: 4px !important;
  border-radius: var(--radius-full);
  box-shadow: 0 0 12px rgba(212, 160, 60, 0.6);
  animation: fifa-bar-shine 2.5s linear infinite;
}

@keyframes fifa-bar-shine {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}

/* Timer container — dark navy badge (scoreboard look)
   so the red counter inside stands out clearly. */
.quiz_box header .timer {
  background: linear-gradient(135deg, var(--usa-blue-dark) 0%, #0F0E2E 100%) !important;
  border: 1px solid var(--gold) !important;
  box-shadow: 0 4px 12px rgba(26, 25, 71, 0.35), inset 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  border-radius: var(--radius-sm) !important;
  color: #fff !important;
}

.quiz_box .timer .timer_sec {
  color: var(--shared-red) !important;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-display);
  font-size: 1.5em !important;
  font-weight: 900 !important;
  text-shadow: 0 0 12px rgba(191, 10, 48, 0.6),
               0 2px 4px rgba(0, 0, 0, 0.4);
  animation: fifa-tick 1s ease-in-out infinite;
}

@keyframes fifa-tick {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}

/* ============================================================
   ANSWER OPTIONS
   Default: USA-blue surface, white text, gold border.
   Hover: red background (energy), gold border, slide right.
   Correct: green pulse. Incorrect: red shake.
   ============================================================ */

.option_list .option,
section .option_list .option {
  background: linear-gradient(135deg, var(--usa-blue) 0%, var(--usa-blue-dark) 100%) !important;
  border: 2px solid rgba(212, 160, 60, 0.4) !important;
  border-radius: var(--radius-md) !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 14px 18px !important;
  transition: all 200ms ease !important;
}

.option_list .option:hover,
section .option_list .option:hover {
  border-color: var(--gold) !important;
  background: linear-gradient(135deg, var(--shared-red) 0%, #8B0820 100%) !important;
  color: #fff !important;
  transform: translateX(6px) !important;
  box-shadow: -4px 0 0 var(--gold), var(--shadow-md) !important;
}

/* The .chosen class is added by JS when the user clicks an option.
   It must win over the default rule (also !important) so the
   selection visually persists until the next question. */
.option_list .option.chosen,
section .option_list .option.chosen {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%) !important;
  border: 2px solid #fff !important;
  color: #fff !important;
  box-shadow: 0 0 28px rgba(212, 160, 60, 0.7), var(--shadow-md) !important;
  transform: translateX(6px) !important;
}

.option_list .option.correct,
section .option_list .option.correct {
  border-color: var(--mex-green) !important;
  background: linear-gradient(135deg, var(--mex-green) 0%, #004B30 100%) !important;
  color: #fff !important;
  animation: pulse-success 0.6s ease;
}

.option_list .option.incorrect,
section .option_list .option.incorrect {
  border-color: var(--shared-red) !important;
  background: linear-gradient(135deg, var(--shared-red) 0%, #8B0820 100%) !important;
  color: #fff !important;
  animation: shake-error 0.5s ease;
}

@keyframes pulse-success {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); box-shadow: 0 0 24px rgba(0, 104, 71, 0.6); }
}

@keyframes shake-error {
  0%, 100%      { transform: translateX(0); }
  20%, 60%      { transform: translateX(-8px); }
  40%, 80%      { transform: translateX(8px); }
}

/* ============================================================
   QUIZ BOX header title + Result Box
   ============================================================ */

.quiz_box header h3,
.quiz_box header .title {
  color: var(--usa-blue) !important;
  letter-spacing: 0.06em;
}

.result_box .complete_text {
  font-family: var(--font-display);
  color: var(--usa-blue-dark);
  letter-spacing: 0.04em;
}

.result_box .score_text {
  color: var(--shared-red);
  font-family: var(--font-display);
}

/* ============================================================
   NAVBAR — keep its existing position untouched.
   The original is sticky inside `.container`. We only theme
   colors and add subtle ornaments.
   ============================================================ */

header.d-flex {
  border-bottom: 1px solid rgba(212, 160, 60, 0.4) !important;
}

header.d-flex h3 {
  color: #fff !important;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hover__links {
  color: rgba(255, 255, 255, 0.9) !important;
  transition: color var(--t-fast);
}

.hover__links:hover {
  color: var(--gold) !important;
}

/* Trophy logo gentle float — pure decoration */
header.d-flex img.bi {
  animation: fifa-trophy-float 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(212, 160, 60, 0.5));
}

@keyframes fifa-trophy-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ============================================================
   FORM FIELDS
   ============================================================ */

.form__title {
  font-family: var(--font-display) !important;
  color: var(--usa-blue-dark) !important;
  letter-spacing: 0.04em;
}

.form__input {
  border: none !important;
  border-bottom: 2px solid var(--neutral-200) !important;
  background: transparent !important;
  transition: border-color var(--t-fast);
}

.form__input:focus {
  border-bottom-color: var(--shared-red) !important;
  outline: none !important;
}

/* Bootstrap form-control / form-select (register page) */
.form-control:focus,
.form-select:focus {
  border-color: var(--shared-red) !important;
  box-shadow: 0 0 0 0.2rem rgba(191, 10, 48, 0.18) !important;
}

/* The hardcoded "highlight" date in register — make it gold */
.trivia-message .highlight {
  color: var(--gold-dark) !important;
}
.trivia-message .highlight::after {
  background-color: rgba(212, 160, 60, 0.4) !important;
}

/* ============================================================
   COUNTDOWN (trivia landing)
   ============================================================ */

.counter-container {
  font-family: var(--font-display);
  color: #fff;
}

.counter-container-segment .segment-title {
  color: var(--gold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.75rem;
  font-weight: 700;
  font-family: var(--font-body);
}

.counter-container-segment .flip-card {
  background: linear-gradient(180deg, #FAFAFA 0%, #E5E7EB 100%);
  border: 1px solid rgba(212, 160, 60, 0.4);
  box-shadow: var(--shadow-md), inset 0 -2px 0 rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-sm);
}

.counter-container-segment .flip-card .top,
.counter-container-segment .flip-card .bottom,
.counter-container-segment .flip-card .top-flip,
.counter-container-segment .flip-card .bottom-flip {
  color: var(--usa-blue-dark) !important;
}

/* Trivia trophy image on landing — gentle glow */
.olympic-image {
  filter: drop-shadow(0 8px 24px rgba(212, 160, 60, 0.45)) !important;
  animation: fifa-trophy-glow 3s ease-in-out infinite;
}

@keyframes fifa-trophy-glow {
  0%, 100% { filter: drop-shadow(0 8px 24px rgba(212, 160, 60, 0.45)); }
  50%      { filter: drop-shadow(0 12px 32px rgba(212, 160, 60, 0.7)); }
}

.next-text-container .text-next {
  color: #fff !important;
  text-shadow: 0 4px 16px rgba(0, 0, 0, 0.55) !important;
}

/* ============================================================
   TIME-OUT MESSAGE — red badge over the time_end image
   ============================================================ */

.time_out_message p {
  background: var(--shared-red) !important;
  color: #fff !important;
  border-radius: var(--radius-md) !important;
  font-family: var(--font-display) !important;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(191, 10, 48, 0.55);
}

/* ============================================================
   LOGOS — DO NOT touch position or sizing of the img.
   The .logo-acc / .logo-mega wrappers and their inner <img>
   keep all original positioning from trivia.css / login.css.
   We add no rule for these on purpose so we don't move them.
   ============================================================ */

/* ============================================================
   RESPONSIVE — make sure things look solid on mobile.
   Tweaks for narrow viewports.
   ============================================================ */

@media (max-width: 768px) {
  .form-login,
  form.shadow-lg,
  .result_box,
  .quiz_box,
  .info_box {
    border-radius: var(--radius-lg) !important;
  }

  .option_list .option,
  section .option_list .option {
    padding: 12px 14px !important;
    font-size: 0.95rem !important;
  }

  button.restart,
  button.quit,
  button.next_btn {
    font-size: 0.9rem !important;
    padding: 0.5rem 1.1rem !important;
    min-height: 38px;
  }

  .boton__log {
    padding: 0.45rem 1.1rem !important;
    font-size: 0.85rem !important;
  }

  header.d-flex h3 {
    font-size: 1rem !important;
  }
}

@media (max-width: 500px) {
  .counter-container-segment .flip-card {
    /* Slightly smaller flip cards on phones — original CSS already
       handles dimensions, we just keep the styling consistent. */
  }

  .option_list .option,
  section .option_list .option {
    padding: 10px 12px !important;
    font-size: 0.9rem !important;
  }
}

/* ============================================================
   NAVBAR ONLY — position so it stacks above the bg gradient.
   This is the single layout-affecting rule and it's safe:
   the navbar originally has no `position` set.
   ============================================================ */

header.d-flex {
  position: relative;
  z-index: 10;
}