/*
 * Qué tan Mexicano eres — Editorial Play UI · v1
 * Shared, non-destructive design layer loaded AFTER legacy and seasonal CSS.
 * The site's game/auth/points/progression logic remains untouched.
 */
:root {
  --qp-ink:#14314b;
  --qp-navy:#073b58;
  --qp-navy-deep:#082b42;
  --qp-teal:#008e80;
  --qp-green:#11aa72;
  --qp-coral:#ed4863;
  --qp-coral-deep:#c8274a;
  --qp-gold:#f7be46;
  --qp-cream:#fff9ef;
  --qp-paper:#fffdf9;
  --qp-mist:#eaf5f0;
  --qp-outline:#e8ded1;
  --qp-muted:#627484;
  --qp-shadow:0 12px 32px rgba(10,53,71,.12);
  --qp-elevated:0 20px 50px rgba(7,43,66,.17);
  --mx-purple-dark:var(--qp-ink);
  --mx-purple-ink:var(--qp-ink);
  --mx-brown:var(--qp-ink);
  --mx-brown-soft:var(--qp-muted);
}
*, *::before, *::after {box-sizing:border-box}
html {scroll-behavior:smooth}
html,body {color:var(--qp-ink)!important; font-family:"Nunito",system-ui,sans-serif!important}
body {
  background:
    radial-gradient(ellipse at 18% 2%,rgba(255,189,83,.21),transparent 34%),
    radial-gradient(ellipse at 90% 100%,rgba(29,164,139,.24),transparent 35%),
    linear-gradient(145deg,#05283f,#0a5474 57%,#116d78)!important;
  background-attachment:fixed!important;
}
button,input,select,textarea {font-family:inherit!important}
button,a,input,textarea,select {touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible {
  outline:3px solid #f5ae34!important;outline-offset:3px!important
}
button:disabled {cursor:not-allowed}
.app-shell,.app,.profile-app,.tt-page .tt-app {
  background:
    radial-gradient(circle at 8% 8%,rgba(237,72,99,.055),transparent 27%),
    radial-gradient(circle at 94% 22%,rgba(17,170,114,.07),transparent 28%),
    linear-gradient(180deg,#fff9ef 0%,#fffaf2 56%,#f2f5ec 100%)!important;
  box-shadow:0 16px 62px rgba(0,21,34,.30)!important;
}
.app-shell:before,.app:before,.profile-app:before {
  background:
    radial-gradient(ellipse at 8% 36%,rgba(7,121,132,.13),transparent 18%),
    radial-gradient(ellipse at 94% 59%,rgba(237,72,99,.12),transparent 20%)!important;
  opacity:.7!important
}
.app-shell:after,.app:after,.profile-app:after {opacity:.40!important}
.papel {height:54px!important;filter:drop-shadow(0 5px 10px rgba(6,54,69,.12))!important}
.papel span:nth-child(5n+1) {background:#008f78!important}
.papel span:nth-child(5n+2) {background:#ee4c77!important}
.papel span:nth-child(5n+3) {background:#ffbe4e!important}
.papel span:nth-child(5n+4) {background:#0b729c!important}
.papel span:nth-child(5n) {background:#e77843!important}
.hero-title,.question,.result-title,.login-card h2,.content h1,
.brand-title,.section-heading h2,.state-card strong,.hero-copy h1,
.title,.done h2,.tt-hero h1,.tt-result-card h1 {
  font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;
  font-weight:650!important;letter-spacing:-.035em!important;
  color:var(--qp-ink)!important;text-shadow:none!important
}
.hero-copy,.footer-note,.question-count,.tip,.credit,.result-desc,
.seo-home,.seo-home p,.hobbies-copy,.empty-copy,.hero-copy p,
.sub,.count,.done p {color:var(--qp-muted)!important}
.eyebrow,.kicker,.level-label,.section-kicker,.result-kicker {
  color:var(--qp-teal)!important;letter-spacing:.10em!important;
}
.brand-pill {
  background:linear-gradient(145deg,#eb4b69,#cb274f)!important;
  border:1px solid rgba(255,255,255,.8)!important;
  border-radius:999px!important;
  box-shadow:0 6px 18px rgba(211,46,83,.22)!important;
  letter-spacing:.06em!important
}
.seal {box-shadow:0 10px 28px rgba(7,43,66,.13)!important}
.userbar {
  border:1px solid #f3ebe0!important;border-radius:18px!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 6px 22px rgba(6,58,75,.09)!important;
  backdrop-filter:blur(16px)
}
.userbar-name[data-profile-link],.qtmx-guest-profile-btn,.qtmx-guest-login-btn {
  border-radius:999px!important;box-shadow:none!important;
  font-size:12px!important
}
.userbar-name[data-profile-link],.qtmx-guest-profile-btn {
  background:#f0f6f4!important;border:1px solid #e0ece7!important;
  color:var(--qp-navy-deep)!important
}
.userbar-points,.score-mini {color:#a36a08!important}
.userbar-logout {
  background:#fff0f0!important;color:#a32942!important;
  box-shadow:none!important;border:1px solid #ffdae0!important
}
.qtmx-guest-login-btn {background:var(--qp-navy)!important;color:#fff!important}
.qtmx-guest-badge {background:#e4f8ec!important;color:#087f54!important}
.back-btn,.back,.back-home,.tt-back,.tt-profile-link {
  border:1px solid #e4e9e6!important;border-radius:15px!important;
  background:#fff!important;color:var(--qp-navy)!important;
  box-shadow:0 5px 15px rgba(10,43,60,.08)!important
}
.back-btn:active,.back:active,.back-home:active {transform:scale(.96)}
/* Home: retain the manually chosen logo; frame it with an illustrated welcome. */
#home .seal {
  width:min(85%,420px)!important;
  aspect-ratio:3/1!important;
  margin:9px auto 5px!important;
  border:0!important;background-color:transparent!important;
  box-shadow:none!important
}
#home .hero-title {display:none!important}
#home .hero-copy {max-width:440px!important;margin:5px auto 14px!important;line-height:1.5!important}
#home .qtmx-lobby {
  position:relative;isolation:isolate;overflow:hidden;
  min-height:220px;margin:12px 0 18px;padding:23px 21px 21px;
  border-radius:27px;
  background:linear-gradient(90deg,rgba(5,44,67,.97),rgba(5,64,75,.84) 56%,rgba(8,85,83,.40)),
    url('/quetanmexicanoeres/assets/qtmx-editorial-landscape.svg') center/cover no-repeat;
  box-shadow:var(--qp-elevated);border:1px solid rgba(255,255,255,.58);
  color:#fff;text-align:left
}
.qtmx-lobby>* {position:relative;z-index:1}
.qtmx-lobby__eyebrow {
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 10px;border-radius:99px;
  background:rgba(255,255,255,.16);font-size:10px;
  letter-spacing:.11em;text-transform:uppercase;font-weight:900;
  color:#ffe8af;border:1px solid rgba(255,255,255,.15)
}
.qtmx-lobby h2 {
  max-width:290px;margin:14px 0 8px;font-family:"Fredoka",sans-serif;
  font-size:clamp(23px,6.3vw,31px);line-height:1.02;letter-spacing:-.035em;
  color:#fff!important;text-shadow:0 2px 8px rgba(0,0,0,.12)!important;
}
.qtmx-lobby p {max-width:275px;margin:0 0 18px;font-size:12px;line-height:1.5;color:#dbf0e9;font-weight:750}
.qtmx-lobby__cta {
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:10px 20px;border:0;border-radius:999px;
  background:linear-gradient(180deg,#fa5771,#d82850);color:#fff;
  font:800 15px "Fredoka",sans-serif;box-shadow:0 6px 18px rgba(66,13,37,.26);
  cursor:pointer;transition:transform .15s ease,filter .15s ease
}
.qtmx-lobby__cta:active{transform:scale(.97)}
.qtmx-lobby__meta {
  display:inline-flex;margin-left:8px;font-size:10px;font-weight:900;
  color:#fce5b0;vertical-align:middle
}
/* Compact shortcuts for returning visitors; existing daily/weekly cards are preserved. */
.qtmx-shortcuts {
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;margin:0 0 17px
}
.qtmx-shortcut {
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:96px;padding:12px 6px;border-radius:19px;
  border:1px solid #f1e8dd;background:#fff;color:var(--qp-ink);
  text-decoration:none;box-shadow:0 6px 16px rgba(10,45,64,.07);
  cursor:pointer;text-align:center;font-size:11px;font-weight:900;line-height:1.2
}
.qtmx-shortcut__icon {font-size:25px;line-height:1.1}
.qtmx-shortcut small {font-size:9px;color:var(--qp-muted);font-weight:750}
.qtmx-shortcut:active{transform:scale(.98)}
/* Home modules: one FULL-WIDTH ROW for notifications, then one row per level.
   All dynamically inserted modules share this grid: no narrow implicit tracks.
   The .level-card DOM remains intact; only layout changes. */
#home .levels {
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-auto-flow:row!important;
  justify-items:stretch!important;
  align-items:stretch!important;
  gap:12px!important;
}
#home .levels > * {
  grid-column:1 / -1!important;
  grid-row:auto!important;
  justify-self:stretch!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
}
#home .levels > .level-card {
  display:grid!important;
  grid-template-columns:56px minmax(0,1fr)!important;
  grid-template-rows:min-content min-content!important;
  align-content:center!important;
  align-items:center!important;
  justify-content:stretch!important;
  justify-items:start!important;
  column-gap:15px!important;
  row-gap:5px!important;
  position:relative!important;
  min-width:0!important;
  min-height:102px!important;
  height:auto!important;
  padding:16px 17px!important;
  text-align:left!important;
  border-radius:22px!important;
  box-shadow:0 7px 19px rgba(8,43,66,.10)!important;
  transition:transform .15s ease,box-shadow .15s ease!important;
}
#home .levels > .level-card .num {
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  bottom:auto!important;
  left:auto!important;
  transform:none!important;
  grid-column:1!important;
  grid-row:1 / span 2!important;
  justify-self:center!important;
  align-self:center!important;
  display:grid!important;
  place-items:center!important;
  width:56px!important;
  height:56px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:16px!important;
  box-shadow:0 5px 12px rgba(0,0,0,.10)!important;
}
#home .levels > .level-card strong {
  display:block!important;
  grid-column:2!important;
  grid-row:1!important;
  justify-self:stretch!important;
  align-self:end!important;
  min-width:0!important;
  margin:0!important;
  color:var(--qp-ink)!important;
  font-size:clamp(18px,5.2vw,22px)!important;
  line-height:1.15!important;
  overflow-wrap:break-word!important;
  white-space:normal!important;
}
#home .levels > .level-card small {
  display:block!important;
  grid-column:2!important;
  grid-row:2!important;
  justify-self:stretch!important;
  align-self:start!important;
  min-width:0!important;
  color:#526b78!important;
  font-size:clamp(11px,3.3vw,13px)!important;
  line-height:1.35!important;
  font-weight:800!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
/* The heart/push module is also full-width, never sharing a track with a level. */
#home .levels > .qtmx-push-card,
#home .levels > .qtmx-push-card.active {
  grid-column:1 / -1!important;
  grid-row:auto!important;
  display:flex!important;
  flex-direction:row!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-start!important;
  min-width:0!important;
  min-height:104px!important;
  height:auto!important;
  gap:14px!important;
  padding:16px!important;
  text-align:left!important;
  border:1px solid rgba(200,249,223,.72)!important;
  border-radius:23px!important;
  background:linear-gradient(112deg,#064631,#06704f 66%,#0a9b72)!important;
  color:#fff!important;
  box-shadow:0 8px 23px rgba(4,85,62,.20)!important;
}
#home .levels > .qtmx-push-card .qtmx-push-card-icon {
  width:54px!important;
  height:54px!important;
  flex:0 0 54px!important;
  display:grid!important;
  place-items:center!important;
  background:#a6ffe0!important;
  border-radius:16px!important;
  box-shadow:0 3px 0 rgba(2,63,45,.18)!important;
  font-size:28px!important;
}
#home .levels > .qtmx-push-card .qtmx-push-card-copy {
  display:flex!important;
  flex:1 1 auto!important;
  min-width:0!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:3px!important;
  overflow-wrap:anywhere!important;
}
#home .levels > .qtmx-push-card .qtmx-push-card-copy > span {
  font-size:9px!important;
  line-height:1.2!important;
  color:#a6f2d4!important;
  letter-spacing:.10em!important;
}
#home .levels > .qtmx-push-card .qtmx-push-card-copy strong {
  font-size:clamp(17px,4.6vw,21px)!important;
  line-height:1.16!important;
  color:#fff!important;
  white-space:normal!important;
  overflow-wrap:break-word!important;
}
#home .levels > .qtmx-push-card .qtmx-push-card-copy small {
  display:block!important;
  font-size:10px!important;
  line-height:1.3!important;
  color:#dbfbed!important;
  white-space:normal!important;
  overflow:visible!important;
}
#home .levels > .qtmx-push-card .qtmx-push-card-state {
  flex:0 0 auto!important;
  padding:7px 9px!important;
  max-width:82px!important;
  border-radius:999px!important;
  background:#b4ffe1!important;
  color:#07533a!important;
  font-size:9px!important;
  font-weight:950!important;
  white-space:nowrap!important;
}
#home .level-card[data-level="easy"] {
  background:linear-gradient(180deg,#dafff0 0%,#8be1bd 100%)!important;
  border:1px solid #9edabd!important
}
#home .level-card[data-level="medium"] {
  background:linear-gradient(180deg,#fff8d7 0%,#ffd270 100%)!important;
  border:1px solid #ebd18c!important
}
#home .level-card[data-level="hard"] {
  background:linear-gradient(180deg,#ffe7e9 0%,#ffa5af 100%)!important;
  border:1px solid #efb2b7!important
}
#home .level-card[data-level="easy"] .num {background:#18b580!important}
#home .level-card[data-level="medium"] .num {background:#f8b52f!important}
#home .level-card[data-level="hard"] .num {background:#e64b68!important}
#home .level-card[data-level="easy"] .num:after {content:"🌵"!important}
#home .level-card[data-level="medium"] .num:after {content:"☀️"!important}
#home .level-card[data-level="hard"] .num:after {content:"🏛️"!important}
#home .levels>.country-card,
#home .levels>.qtmx-daily-card,
#home .levels>.qtmx-weekly-card,
#home .levels>.qtmx-time-trial-card {
  grid-column:1/-1!important;min-width:0!important
}
#home .levels>.country-card {
  display:flex!important;align-items:center!important;
  min-height:108px!important;padding:17px 17px 17px 78px!important;
  text-align:left!important;border:1px solid #d1e7e5!important;
  background:linear-gradient(105deg,#e0f2ef,#f8fffa)!important;
  box-shadow:0 9px 23px rgba(4,76,87,.09)!important
}
#home .levels>.country-card .num {
  position:absolute!important;left:16px!important;top:50%!important;
  transform:translateY(-50%)!important;background:#087d83!important;
  border-radius:16px!important;box-shadow:none!important
}
#home .levels>.country-card strong {color:var(--qp-navy)!important}
#home .levels>.qtmx-daily-card {
  background:linear-gradient(120deg,#083955,#096b73 65%,#10a17d)!important;
  border:1px solid #b8dcd7!important;box-shadow:var(--qp-shadow)!important;
  border-radius:22px!important;min-height:92px!important
}
#home .levels>.qtmx-weekly-card {
  border-radius:22px!important;border:1px solid #f2d4a2!important;
  background:linear-gradient(115deg,#fff4d6,#ffe3a3)!important;
  color:var(--qp-ink)!important;box-shadow:var(--qp-shadow)!important
}
#home .levels>.qtmx-weekly-card strong,#home .levels>.qtmx-weekly-card span,#home .levels>.qtmx-weekly-card small {color:var(--qp-ink)!important}
#home .levels>.qtmx-daily-card .qtmx-daily-sun {
  background:#ffdf7e!important;border-radius:15px!important;box-shadow:none!important
}
/* Universal question + response components. */
.question-card,.map-card,.login-card,.seo-home,.card,.hero-card,.stat,.notice {
  border:1px solid rgba(229,232,227,.94)!important;
  border-radius:24px!important;
  background:#fffefa!important;
  box-shadow:var(--qp-shadow)!important
}
.question-card {
  border-radius:25px!important;
  padding:clamp(16px,4vw,25px)!important;
  box-shadow:var(--qp-elevated)!important
}
.question,.qtmx-daily-question h2,.qtmx-duel-question h2 {
  font-family:"Fredoka",sans-serif!important;font-weight:650!important;
  font-size:clamp(21px,5.8vw,29px)!important;
  line-height:1.17!important;color:var(--qp-ink)!important
}
.question-icon,.qicon,.tt-question-icon {filter:none!important}
.answers,.qtmx-daily-answers,.qtmx-duel-answers {gap:10px!important}
.answer,.qtmx-daily-answer,.qtmx-duel-answer,.tt-answers button {
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:55px!important;padding:13px 12px!important;
  border:1.5px solid #dce4e7!important;border-radius:15px!important;
  color:var(--qp-ink)!important;background:#fbfcfa!important;
  font-size:clamp(13px,3.5vw,16px)!important;font-weight:900!important;
  box-shadow:0 3px 0 #e2e9e7!important;
  transition:background .15s,border-color .15s,transform .15s!important
}
.answer.correct,.qtmx-daily-answer.correct,.qtmx-duel-answer.correct,.tt-answers button.correct {
  border-color:#39bb8f!important;
  background:linear-gradient(180deg,#bcf8d7,#67d5a1)!important;
  color:#064c37!important;box-shadow:0 3px 0 #38a879!important
}
.answer.wrong,.qtmx-daily-answer.wrong,.qtmx-duel-answer.wrong,.tt-answers button.wrong {
  border-color:#ef869a!important;background:#ffe0e5!important;
  color:#96283f!important;box-shadow:0 3px 0 #e8a8b3!important
}
.feedback,.qtmx-daily-feedback,.qtmx-duel-feedback,.tt-feedback {
  border-radius:16px!important;line-height:1.5!important
}
.feedback.good,.qtmx-daily-feedback.good,.qtmx-duel-feedback.good {
  background:#ddf9e9!important;color:#085b44!important
}
.feedback.bad,.qtmx-daily-feedback.bad,.qtmx-duel-feedback.bad {
  background:#ffebed!important;color:#9e2c44!important
}
.progress,.qtmx-daily-progress,.qtmx-duel-progress,.progress-track {
  height:12px!important;border:0!important;border-radius:99px!important;
  background:#e2e9e9!important;box-shadow:inset 0 2px 5px rgba(15,45,57,.07)!important
}
.progress>div,.qtmx-daily-progress>i,.qtmx-duel-progress>i,.progress-fill {
  background:linear-gradient(90deg,#23c38e,#028d8b)!important;border-radius:inherit!important;box-shadow:none!important
}
.next-btn,.primary,.login-submit,.next,.tt-primary,
.qtmx-daily-next,.qtmx-weekly-open,.qtmx-duel-next,
.action.primary,.small-btn.primary,.qtmx-profile-install-btn {
  border:0!important;border-radius:17px!important;
  min-height:50px!important;background:linear-gradient(180deg,#f25270,#d92c55)!important;
  color:#fff!important;font-weight:900!important;
  box-shadow:0 5px 15px rgba(212,42,84,.22)!important;
  text-shadow:none!important;transition:transform .15s,filter .15s!important
}
.next-btn:active,.primary:active,.login-submit:active,.next:active,.tt-primary:active,
.qtmx-daily-next:active,.action.primary:active {transform:scale(.985)!important}
.secondary,.action.secondary,.tt-secondary {
  border:1px solid #dce9e7!important;border-radius:17px!important;
  background:#f8fcfa!important;color:var(--qp-navy)!important;
  box-shadow:0 5px 15px rgba(8,50,61,.06)!important
}
.result-title,.done h2 {font-size:clamp(27px,7vw,39px)!important}
.result-score,.points-award {
  background:linear-gradient(150deg,#fff9da,#ffdf82)!important;
  border:1px solid #f9de9d!important;border-radius:25px!important;
  color:#895e17!important;box-shadow:var(--qp-shadow)!important
}
.result-score strong {color:var(--qp-ink)!important}
.result-desc {line-height:1.6!important}
.actions a,.actions button {border-radius:17px!important}
.login-gate {
  background:linear-gradient(145deg,rgba(5,39,60,.97),rgba(9,97,104,.96))!important;
  backdrop-filter:blur(10px)
}
.login-card {max-width:440px!important;background:#fffdfa!important}
.login-fields input,.login-card input {border-radius:13px!important;min-height:48px!important}
.seo-home {background:#fffdf9!important}
.map-card {overflow:hidden}
.content .title,.content h1 {color:var(--qp-ink)!important}
.content .card,.content .map-card {box-shadow:var(--qp-shadow)!important}
.count,.state-count {font-weight:900!important}
/* Daily, weekly, friend challenge, rewards and share flows */
.qtmx-daily-modal,.qtmx-weekly-modal,.qtmx-duel-modal,
.qtmx-guest-modal,.qtmx-viral-invite,.qtmx-share-preview,.qtmx-push-modal {
  border:1px solid rgba(255,255,255,.9)!important;border-radius:27px!important;
  background:#fffaf2!important;color:var(--qp-ink)!important;
  box-shadow:0 25px 65px rgba(0,26,42,.28)!important
}
.qtmx-daily-overlay,.qtmx-weekly-overlay,.qtmx-duel-overlay,
.qtmx-guest-overlay,.qtmx-viral-overlay,.qtmx-share-preview-overlay,.qtmx-push-overlay {
  background:rgba(3,31,49,.72)!important;backdrop-filter:blur(8px)!important
}
.qtmx-daily-question,.qtmx-duel-question {
  border:1px solid #e2eae8!important;border-radius:23px!important;
  background:#fff!important
}
.qtmx-daily-streak,.qtmx-daily-reward,.qtmx-mission-reward {
  color:#a36a08!important
}
.qtmx-daily-card.done {filter:saturate(.86)}
.qtmx-achievement,.qtmx-mission,.qtmx-duel-row,.qtmx-ranking-row,.qtmx-friend-row,
.person,.tt-rank-row {
  border-radius:17px!important;border:1px solid #e4ece9!important;
  background:#fbfdfa!important
}
.qtmx-ranking-row.me,.tt-rank-row.is-me {
  background:#e5f8ec!important;border-color:#8ad9b5!important
}
.qtmx-achievement.locked {opacity:.62;filter:grayscale(.45)}
.qtmx-ranking-switch button.active,.qtmx-weekly-tabs button.active {background:#fff!important;color:var(--qp-navy)!important}
.qtmx-share-preview {background:linear-gradient(180deg,rgba(255,251,240,.97),rgba(243,249,236,.95))!important}
.qtmx-install-card,.qtmx-push-card {border-radius:21px!important}
/* Profile: premium scorecards and progress */
.profile-app {width:min(100%,620px)!important;padding-bottom:max(90px,env(safe-area-inset-bottom))!important}
.profile-topbar {padding:13px 2px 24px!important}
.brand-title {font-size:26px!important}
.hero-card {
  background:linear-gradient(125deg,#093d5a,#107e80)!important;
  color:#fff!important;border:0!important;border-radius:27px!important;
  padding:24px 18px!important;box-shadow:var(--qp-elevated)!important
}
.hero-copy h1,.hero-copy p,.hero-card .username {color:#fff!important}
.hero-copy p {opacity:.84}
.level-pill {background:#f4c14d!important;color:#4b3c12!important}
.avatar {border:3px solid rgba(255,255,255,.85)!important}
.avatar-fallback {background:linear-gradient(140deg,#1fd0a5,#0f7d83)!important}
.stat {
  border-radius:18px!important;background:#fffefa!important;
  box-shadow:0 7px 20px rgba(7,53,76,.08)!important
}
.stat span {font-size:10px!important;color:var(--qp-muted)!important}
.stat strong {color:var(--qp-navy)!important;font-size:26px!important}
.card {padding:18px!important}
.section-heading h2 {color:var(--qp-navy)!important;font-size:23px!important}
.mini-stats div,.person {background:#f4faf6!important}
.tag {background:#e2f8ec!important;color:#08694f!important}
.profile-footer a,.text-btn {color:var(--qp-teal)!important}
/* Competitive mode and leaderboards */
.tt-page {--tt-ink:var(--qp-ink);--tt-green:var(--qp-teal);
  --tt-green-dark:var(--qp-navy);--tt-muted:var(--qp-muted);
  --tt-shadow:var(--qp-shadow)
}
.tt-page .tt-app {width:min(100%,620px)!important;padding-bottom:100px!important}
.tt-page .tt-app:before {
  opacity:.15!important;background-image:radial-gradient(circle,#12aa85 1px,transparent 1.5px)!important
}
.tt-hero {
  padding:24px 19px!important;background:#fffefa!important;border:1px solid #e8eeea!important;
  border-radius:28px!important;box-shadow:var(--qp-shadow)!important
}
.tt-hero h1,.tt-result-card h1,.tt-section-head h2,.tt-brand strong {
  color:var(--qp-navy)!important
}
.tt-hero>p {color:var(--qp-muted)!important;font-size:13px!important}
.tt-eyebrow {background:#e5f8ee!important;color:#117454!important}
.tt-rule-strip>div,.tt-personal-card,.tt-result-card,.tt-question-card,
.tt-social-card,.tt-ranking-card,.tt-daily-challenge {
  border-radius:22px!important;border:1px solid #e5eeea!important;box-shadow:var(--qp-shadow)!important
}
.tt-personal-card {
  background:linear-gradient(130deg,#073b59,#087b7c)!important;color:#fff!important
}
.tt-personal-card span,.tt-personal-card strong,.tt-personal-card small {color:#fff!important}
.tt-daily-challenge {
  background:linear-gradient(120deg,#083b59,#0e6c71)!important;border:0!important;color:#fff!important
}
.tt-daily-primary {
  background:linear-gradient(180deg,#ffda75,#f5b83e)!important;
  color:#62410d!important;border:0!important;box-shadow:0 5px 15px rgba(0,0,0,.12)!important;
  border-radius:16px!important
}
.tt-daily-head h2,.tt-daily-head p,.tt-daily-head span {color:#fff!important}
.tt-game-dashboard {
  background:linear-gradient(130deg,#063a57,#0b6b79)!important;
  border-radius:27px!important;padding:19px 15px!important;color:#fff!important
}
.tt-game-dashboard * {color:inherit}
.tt-game-status,.tt-total-time {color:#fff!important}
.tt-clock-wrap {margin:12px auto!important}
.tt-question-card {
  background:#fffefa!important;padding:22px 16px!important
}
.tt-question-card h2 {color:var(--qp-ink)!important}
.tt-section-head span {color:var(--qp-teal)!important}
.tt-tabs {background:#edf4f0!important;border-radius:15px!important}
.tt-tabs button.active {background:#fff!important;box-shadow:0 3px 10px rgba(0,65,77,.09)!important}
.tt-rank-row.is-me {box-shadow:inset 3px 0 0 var(--qp-green)!important}
.tt-result-card {background:#fffefa!important}
.tt-result-time {background:#fff4d5!important;border-radius:20px!important}
.tt-result-time strong {color:var(--qp-navy)!important}
/* Clear/consistent interactions with reduced animation and no layout jumps. */
@media(hover:hover){
  .qtmx-shortcut:hover,.qtmx-lobby__cta:hover {filter:brightness(1.025);transform:translateY(-2px)}
  #home .levels>.level-card:hover {transform:translateY(-2px)!important;box-shadow:0 12px 24px rgba(8,43,66,.15)!important}
}
@media(max-width:430px){
  .screen,.content {padding-left:15px!important;padding-right:15px!important}
  .papel {height:41px!important}
  .qtmx-lobby {margin-top:7px;padding:19px 16px;min-height:208px}
  .qtmx-lobby h2 {max-width:245px}
  .qtmx-lobby p {max-width:230px}
  .qtmx-lobby__meta {font-size:9px}
  #home .levels {grid-template-columns:minmax(0,1fr)!important;gap:11px!important}
  #home .levels>.level-card {min-height:98px!important;padding:13px 14px!important;column-gap:13px!important}
  #home .levels>.level-card strong {font-size:clamp(17px,4.8vw,21px)!important}
  #home .levels>.level-card small {font-size:clamp(11px,3.1vw,12px)!important}
  #home .levels>.qtmx-push-card {padding:13px!important;gap:12px!important}
  #home .levels>.qtmx-push-card .qtmx-push-card-copy strong {font-size:clamp(16px,4.5vw,19px)!important}
  #home .seal {width:86%!important}
  .qtmx-shortcuts {gap:7px}
  .qtmx-shortcut {min-height:89px;padding:11px 5px}
}
@media(max-width:355px){
  .qtmx-lobby__meta {display:block;margin:10px 0 0}
  #home .levels>.level-card {grid-template-columns:51px minmax(0,1fr)!important;padding:12px!important;column-gap:12px!important}
  #home .levels>.level-card .num {width:51px!important;height:51px!important}
  #home .levels>.level-card strong {font-size:17px!important}
  .qtmx-shortcut {font-size:10px}
  .qtmx-shortcut small {font-size:8px}
}
@media(min-width:700px){
  .app-shell,.app,.profile-app,.tt-page .tt-app {border-radius:28px!important;margin-top:24px!important;margin-bottom:24px!important}
  .qtmx-lobby {min-height:230px}
}
@media(prefers-reduced-motion:reduce){
  html {scroll-behavior:auto}
  .qtmx-shortcut,.qtmx-lobby__cta,#home .levels>.level-card,
  .answer,.qtmx-daily-answer,.tt-primary {animation:none!important;transition:none!important}
}
/* Halloween content may be seasonal, but the editorial navigation and readability remain consistent. */
html[data-qtmx-season="halloween"] #home .qtmx-lobby {
  background-image:linear-gradient(95deg,rgba(28,16,45,.95),rgba(67,27,75,.72) 58%,rgba(148,54,33,.19)),
    url('/quetanmexicanoeres/assets/qtmx-editorial-landscape.svg')!important
}

/* Signed-in account exit: rendered in document footer, not in the top bar.
   Keep the existing button and behavior; modify its location and label contrast only. */
.qtmx-session-footer {
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  margin:30px auto 0;
  padding:26px 18px calc(36px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid rgba(18,75,78,.13);
  background:transparent;
}
.qtmx-session-footer .userbar-logout {
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:min(100%,240px)!important;
  min-width:0!important;
  min-height:46px!important;
  padding:12px 24px!important;
  border:1px solid rgba(255,255,255,.45)!important;
  border-radius:16px!important;
  background:linear-gradient(180deg,#067850,#00402e)!important;
  color:#fff!important;
  font-family:"Fredoka","Nunito",system-ui,sans-serif!important;
  font-size:14px!important;
  font-weight:800!important;
  line-height:1.2!important;
  text-shadow:none!important;
  box-shadow:0 7px 16px rgba(4,65,46,.18)!important;
  cursor:pointer!important;
}
.qtmx-session-footer .userbar-logout:hover {
  filter:brightness(1.07);
}
.qtmx-session-footer .userbar-logout:active {
  transform:translateY(1px);
}

/* =========================================================
   LEGIBILITY / CONTRAST PASS — October 2026
   Targets the actual production components in competitive
   gameplay and public profile, including Halloween overrides.
   Colors selected against the real gradient endpoint colors,
   not just the inherited --tt-green-dark variables.
   ========================================================= */

/* Dark competitive dashboard: avoid dark labels on teal/navy. */
.tt-page .tt-game-dashboard .tt-game-status > span {
  color:#fff!important;
  font-size:clamp(12px,3.3vw,14px)!important;
  line-height:1.25!important;
  font-weight:950!important;
  opacity:1!important;
  text-shadow:0 1px 1px rgba(0,22,36,.2)!important;
}
.tt-page .tt-game-dashboard .tt-game-status > small {
  color:#dbfff4!important;
  font-size:clamp(10px,2.8vw,12px)!important;
  line-height:1.35!important;
  font-weight:850!important;
  opacity:1!important;
}
.tt-page .tt-game-dashboard .tt-total-time > span {
  color:#dbfff4!important;
  font-size:clamp(10px,2.8vw,12px)!important;
  line-height:1.35!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
  opacity:1!important;
}
.tt-page .tt-game-dashboard .tt-total-time > strong {
  color:#fff!important;
  font-size:clamp(17px,4.8vw,23px)!important;
  line-height:1.2!important;
  font-weight:800!important;
  text-shadow:0 1px 1px rgba(0,22,36,.18)!important;
}
.tt-page .tt-game-dashboard .tt-ghost-delta {
  color:#dbfff4!important;
  font-size:10px!important;
  line-height:1.35!important;
  opacity:1!important;
}
.tt-page .tt-game-dashboard .tt-ghost-delta.ahead {color:#b5ffdb!important}
.tt-page .tt-game-dashboard .tt-ghost-delta.behind {color:#ffe4a7!important}

/* Clock: high-contrast value on the white dial, readable outer ticks.
   The animated ring already indicates elapsed time; the thin hand previously
   crossed the seconds text (see mobile screenshot), so conceal only the hand. */
.tt-page .tt-game-dashboard .tt-clock:after {
  z-index:2!important;
  background:#fff!important;
}
.tt-page .tt-game-dashboard .tt-clock b,
.tt-page .tt-game-dashboard #ttTimerValue {
  z-index:4!important;
  color:#07535a!important;
  font-size:clamp(19px,4.9vw,23px)!important;
  font-weight:850!important;
  letter-spacing:-.025em!important;
  line-height:1.1!important;
  text-shadow:none!important;
  white-space:nowrap!important;
}
.tt-page .tt-game-dashboard .tt-clock-hand {
  display:none!important;
}
.tt-page .tt-game-dashboard .tt-clock-label {
  color:#dbfff4!important;
  font-size:9px!important;
  font-weight:950!important;
  line-height:1!important;
  opacity:1!important;
}
.tt-page .tt-game-dashboard .tt-clock.warning b {color:#815209!important}
.tt-page .tt-game-dashboard .tt-clock.danger b {color:#a61f42!important}
/* Retain visual urgency in the ring without sacrificing numeral contrast. */
.tt-page .tt-game-dashboard .tt-clock.warning .tt-clock-ring {stroke:#ffce62!important}
.tt-page .tt-game-dashboard .tt-clock.danger .tt-clock-ring {stroke:#ff6e8b!important}

/* Question and response hierarchy: never let generic card rules dim text. */
.tt-page .tt-question-card h2 {
  color:#12334b!important;
  font-weight:700!important;
  line-height:1.18!important;
}
.tt-page .tt-question-card .tt-answer {
  color:#143951!important;
  font-weight:850!important;
}
.tt-page .tt-question-card .tt-answer i {
  color:#123951!important;
}
.tt-page .tt-question-card .tt-answer.correct i,
.tt-page .tt-question-card .tt-answer.wrong i {
  color:#fff!important;
}

/* Results: editorial theme turns the elapsed-time panel pale gold,
   so its old white labels must become dark. */
.tt-page .tt-result-time span {
  color:#133c52!important;
  opacity:1!important;
  font-size:11px!important;
  font-weight:900!important;
}
.tt-page .tt-result-time strong {
  color:#133c52!important;
  opacity:1!important;
}
.tt-page .tt-result-grid span {
  color:#415968!important;
  font-size:10px!important;
}

/* Competitive daily ranking cards also use small text on dark gradients. */
.tt-page .tt-daily-head > div > span,
.tt-page .tt-daily-stats span {
  color:#ecfff9!important;
  opacity:1!important;
  font-size:10px!important;
  line-height:1.3!important;
}
.tt-page .tt-daily-challenge > small,
.tt-page .tt-daily-head p {
  color:#ecfff9!important;
  opacity:1!important;
  font-size:11px!important;
  line-height:1.5!important;
}
.tt-page .tt-personal-card span,
.tt-page .tt-personal-card small {
  color:#ecfff9!important;
  opacity:1!important;
  font-size:10px!important;
}

/* Profile's purple "Leyenda mexicana" pill:
   the prior theme set a purple gradient but preserved dark purple ink.
   White ink produces >=7:1 contrast across both gradient endpoints. */
.profile-app .hero-card .level-pill,
html[data-qtmx-season="halloween"] .profile-app .hero-card .level-pill {
  color:#fff!important;
  background:linear-gradient(180deg,#6a39a5,#29123d)!important;
  border:1px solid rgba(255,255,255,.42)!important;
  font-size:clamp(11px,2.9vw,12px)!important;
  line-height:1.25!important;
  font-weight:950!important;
  letter-spacing:.065em!important;
  text-shadow:0 1px 1px rgba(23,6,36,.25)!important;
  opacity:1!important;
}

/* Profile on Halloween is a warm/light card; give the title and supporting
   details dark explicit colors. Regular dark profile hero remains white. */
html[data-qtmx-season="halloween"] .profile-app .hero-card .hero-copy h1 {
  color:#271638!important;
}
html[data-qtmx-season="halloween"] .profile-app .hero-card .username {
  color:#a93d0a!important;
}
html[data-qtmx-season="halloween"] .profile-app .hero-card .hero-copy p {
  color:#49314f!important;
  opacity:1!important;
  font-size:clamp(12px,3.3vw,14px)!important;
  line-height:1.45!important;
}
html:not([data-qtmx-season="halloween"]) .profile-app .hero-card .hero-copy p {
  color:#f1fff9!important;
  opacity:1!important;
  font-size:clamp(12px,3.3vw,14px)!important;
}

/* Stats labels, streaks and weekly score: readable on all pastel surfaces. */
.profile-app .stat span {
  color:#3d3056!important;
  font-size:clamp(11px,2.9vw,12px)!important;
  line-height:1.3!important;
  font-weight:950!important;
}
.profile-app .stat strong {
  color:#2a1c42!important;
}
.profile-app .qtmx-profile-streak-grid span,
.profile-app .qtmx-profile-weekly-grid span {
  color:#185846!important;
  font-size:clamp(10px,2.7vw,12px)!important;
  line-height:1.3!important;
  font-weight:950!important;
  letter-spacing:.04em!important;
}
.profile-app .qtmx-profile-streak-grid strong,
.profile-app .qtmx-profile-weekly-grid strong {
  color:#103b32!important;
  font-size:clamp(17px,4.4vw,20px)!important;
}
.profile-app .section-kicker {
  color:#a63b11!important;
  font-size:clamp(11px,2.8vw,12px)!important;
  font-weight:950!important;
}
.profile-app .section-heading h2 {
  color:#2a1c42!important;
}
@media(max-width:380px) {
  .tt-page .tt-game-dashboard {
    gap:6px!important;
    padding:13px 10px!important;
  }
  .tt-page .tt-game-dashboard .tt-total-time > strong {
    font-size:17px!important;
  }
}