/* Qué Tan Mexicano Eres — Mexican Kids Game Theme
   Inspired by festive Mexican mobile-game UI: papel picado, candy colors,
   warm alley lighting, chunky rounded type and tactile controls. */

:root{
  --mx-purple:#6b2bd9;
  --mx-purple-dark:#48148f;
  --mx-purple-ink:#3d146f;
  --mx-pink:#ff4fac;
  --mx-pink-dark:#d9318c;
  --mx-yellow:#ffd84a;
  --mx-yellow-dark:#e3a81a;
  --mx-orange:#ff9e25;
  --mx-orange-dark:#e27413;
  --mx-red:#ff5353;
  --mx-red-dark:#c9343b;
  --mx-green:#67db4e;
  --mx-green-dark:#2d9b35;
  --mx-teal:#42d8cd;
  --mx-teal-dark:#159c9c;
  --mx-sky:#8be7ff;
  --mx-cream:#fff5cf;
  --mx-cream-2:#fffaf0;
  --mx-brown:#67371e;
  --mx-brown-soft:#845c42;
  --mx-white:#fff;
  --mx-shadow:0 14px 28px rgba(70,23,107,.22);
  --mx-shadow-soft:0 8px 18px rgba(70,23,107,.16);
  --mx-outline:2px solid rgba(255,255,255,.78);
}

html,body{
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif!important;
  color:var(--mx-brown)!important;
}
body{
  background:
    radial-gradient(circle at 12% 7%,rgba(255,216,74,.30),transparent 20%),
    radial-gradient(circle at 88% 12%,rgba(255,79,172,.25),transparent 23%),
    radial-gradient(circle at 50% 86%,rgba(66,216,205,.13),transparent 29%),
    linear-gradient(180deg,#5322a8 0%,#732cc6 20%,#b33ea9 49%,#ef6a67 75%,#ffb342 100%)!important;
}

button,input,textarea,select{font-family:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif!important}
button{-webkit-tap-highlight-color:transparent}

/* Main game surfaces */
.app-shell,.app,.profile-app{
  position:relative;
  background:
    radial-gradient(circle at 9% 12%,rgba(255,255,255,.42) 0 3px,transparent 4px),
    radial-gradient(circle at 20% 12%,rgba(255,216,74,.50) 0 4px,transparent 5px),
    radial-gradient(circle at 31% 12%,rgba(255,79,172,.40) 0 4px,transparent 5px),
    radial-gradient(circle at 42% 12%,rgba(66,216,205,.40) 0 4px,transparent 5px),
    radial-gradient(circle at 53% 12%,rgba(255,158,37,.42) 0 4px,transparent 5px),
    radial-gradient(circle at 64% 12%,rgba(255,216,74,.50) 0 4px,transparent 5px),
    radial-gradient(circle at 75% 12%,rgba(255,79,172,.40) 0 4px,transparent 5px),
    radial-gradient(circle at 86% 12%,rgba(66,216,205,.40) 0 4px,transparent 5px),
    radial-gradient(circle at 50% 2%,rgba(255,255,255,.32),transparent 26%),
    linear-gradient(180deg,#fff8df 0%,#ffedb9 58%,#ffe39a 100%)!important;
  box-shadow:0 30px 90px rgba(38,9,65,.44),inset 0 2px 0 rgba(255,255,255,.58)!important;
}

.app-shell:before,.app:before,.profile-app:before{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:0!important;
  top:7%!important;
  bottom:0!important;
  left:0!important;
  right:0!important;
  width:auto!important;
  height:auto!important;
  border-radius:0!important;
  opacity:.38!important;
  background:
    linear-gradient(90deg,rgba(106,43,217,.18) 0 7%,transparent 7% 93%,rgba(255,79,172,.16) 93% 100%),
    radial-gradient(ellipse at 8% 38%,rgba(255,158,37,.26),transparent 15%),
    radial-gradient(ellipse at 92% 33%,rgba(66,216,205,.18),transparent 16%),
    radial-gradient(ellipse at 8% 72%,rgba(255,79,172,.15),transparent 18%),
    radial-gradient(ellipse at 92% 70%,rgba(107,43,217,.18),transparent 18%)!important;
}
.app-shell:after,.app:after,.profile-app:after{
  content:""!important;
  position:absolute!important;
  pointer-events:none!important;
  z-index:0!important;
  left:0!important;
  right:0!important;
  top:64px!important;
  width:auto!important;
  height:42px!important;
  border-radius:0!important;
  opacity:.85!important;
  background:
    radial-gradient(circle at 18px 11px,#ffd84a 0 5px,#fff4b7 5px 7px,transparent 8px) 0 0/58px 38px repeat-x!important;
  filter:drop-shadow(0 5px 7px rgba(255,132,60,.24));
}
.screen,.content,.profile-topbar,#profileView,.state-card{position:relative;z-index:1}

/* Papel picado */
.papel{
  height:82px!important;
  filter:drop-shadow(0 7px 10px rgba(46,12,70,.22))!important;
}
.papel span{opacity:.98!important}
.papel span:nth-child(5n+1){background:var(--mx-green)!important}
.papel span:nth-child(5n+2){background:var(--mx-pink)!important}
.papel span:nth-child(5n+3){background:var(--mx-yellow)!important}
.papel span:nth-child(5n+4){background:var(--mx-orange)!important}
.papel span:nth-child(5n){background:var(--mx-teal)!important}

/* Typography */
.hero-title,.question,.result-title,.login-card h2,
.content h1,.brand-title,.section-heading h2,.state-card strong,.hero-copy h1{
  font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;
  letter-spacing:-.025em!important;
}
.brand-pill,.level-card strong,.country-card strong,.level-label,.kicker,
.primary,.secondary,.next-btn,.login-submit,.action,.small-btn,.notice-btn,
.userbar-name,.qtmx-friend-head h3,.qtmx-friend-person strong{
  font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;
}

.brand-pill{
  background:linear-gradient(180deg,var(--mx-pink),var(--mx-pink-dark))!important;
  color:#fff!important;
  border:2px solid rgba(255,255,255,.70)!important;
  border-radius:999px!important;
  box-shadow:0 6px 0 #b42773,0 11px 19px rgba(124,32,110,.20)!important;
  padding:9px 16px!important;
  letter-spacing:.06em!important;
}
.hero-title{color:var(--mx-purple-dark)!important;text-shadow:0 3px 0 rgba(255,255,255,.48)}
.hero-title span{color:var(--mx-red)!important;text-shadow:0 3px 0 rgba(255,255,255,.52)}
.hero-copy,.footer-note,.question-count,.tip,.credit,.result-desc,
.seo-home,.seo-home p,.hobbies-copy,.empty-copy,.hero-copy p{
  color:var(--mx-brown-soft)!important;
}
.seal{
  background:radial-gradient(circle at 34% 28%,#fff8a8 0%,var(--mx-yellow) 56%,#ffb628 100%)!important;
  border:5px solid rgba(255,255,255,.86)!important;
  box-shadow:0 8px 0 #dc9419,0 16px 27px rgba(218,117,15,.28)!important;
}

/* Chunky game cards */
.levels{gap:14px!important}
.level-card,.country-card{
  min-height:72px;
  border:2px solid rgba(255,255,255,.84)!important;
  border-radius:24px!important;
  background:linear-gradient(180deg,#fffdf5 0%,#fff0bf 100%)!important;
  color:var(--mx-brown)!important;
  padding:18px 18px 18px 70px!important;
  box-shadow:0 7px 0 #e4bd68,0 13px 23px rgba(84,47,21,.14)!important;
  transition:transform .14s ease,box-shadow .14s ease,filter .14s ease!important;
}
.level-card:hover,.country-card:hover{filter:saturate(1.05);transform:translateY(-1px)}
.level-card:active,.country-card:active{
  transform:translateY(4px)!important;
  box-shadow:0 3px 0 #e4bd68,0 7px 13px rgba(84,47,21,.12)!important;
}
.level-card strong,.country-card strong{
  color:var(--mx-purple-dark)!important;
  font-size:20px!important;
  line-height:1!important;
}
.level-card small,.country-card small{color:var(--mx-brown-soft)!important;font-weight:800!important}
.level-card .num,.country-card .num{
  width:45px!important;height:45px!important;
  border:2px solid rgba(255,255,255,.78)!important;
  box-shadow:0 5px 0 rgba(60,31,12,.17),0 8px 12px rgba(60,31,12,.12)!important;
  font-size:0!important;
}
.level-card .num:after,.country-card .num:after{font-size:21px;line-height:1}
.level-card[data-level="easy"] .num{background:linear-gradient(180deg,var(--mx-green),var(--mx-green-dark))!important}
.level-card[data-level="easy"] .num:after{content:"🌮"}
.level-card[data-level="medium"] .num{background:linear-gradient(180deg,var(--mx-yellow),var(--mx-orange))!important}
.level-card[data-level="medium"] .num:after{content:"🎺"}
.level-card[data-level="hard"] .num{background:linear-gradient(180deg,var(--mx-red),var(--mx-red-dark))!important}
.level-card[data-level="hard"] .num:after{content:"🪅"}
.country-card .num{background:linear-gradient(180deg,var(--mx-purple),var(--mx-purple-dark))!important}
.country-card .num:after{content:"🗺️"}

/* Game header and progress */
.back-btn,.back,.back-home{
  border:2px solid rgba(255,255,255,.84)!important;
  background:linear-gradient(180deg,#fff,#ffeec1)!important;
  color:var(--mx-purple-dark)!important;
  box-shadow:0 5px 0 #d8b665,0 9px 16px rgba(61,33,14,.13)!important;
}
.back-btn:active,.back:active,.back-home:active{transform:translateY(3px)}
.level-label,.kicker,.eyebrow,.section-kicker{
  color:var(--mx-purple-dark)!important;
  font-weight:900!important;
}
.level-label{
  background:rgba(107,43,217,.13)!important;
  border:1px solid rgba(107,43,217,.10)!important;
  padding:8px 12px!important;
}
.score-mini{color:#aa6200!important;font-weight:900!important}
.progress{
  height:15px!important;
  border:2px solid rgba(255,255,255,.76)!important;
  background:rgba(107,43,217,.15)!important;
  box-shadow:inset 0 3px 7px rgba(65,25,92,.12),0 4px 9px rgba(65,25,92,.08)!important;
}
.progress>div{
  background:repeating-linear-gradient(-45deg,#78ea5d 0 13px,#58ce45 13px 26px)!important;
  box-shadow:inset 0 -3px 0 rgba(32,126,39,.22)!important;
}

/* Questions */
.question-card,.map-card,.login-card,.seo-home,.card,.hero-card,.stat,.notice{
  border:2px solid rgba(255,255,255,.80)!important;
  box-shadow:var(--mx-shadow)!important;
}
.question-card{
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,244,207,.91))!important;
  border-radius:29px!important;
}
.question{color:var(--mx-purple-dark)!important}
.question-icon{filter:drop-shadow(0 4px 6px rgba(255,139,33,.25))}
.answers{gap:12px!important}
.answer{
  min-height:55px;
  border:2px solid rgba(255,255,255,.90)!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#fffefa,#fff1c8)!important;
  color:var(--mx-brown)!important;
  box-shadow:0 5px 0 #dfbc6a,0 9px 14px rgba(84,47,21,.10)!important;
  font-weight:900!important;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease!important;
}
.answer:hover{transform:translateY(-1px)!important}
.answer:active{transform:translateY(3px)!important;box-shadow:0 2px 0 #dfbc6a,0 5px 9px rgba(84,47,21,.10)!important}
.answer.correct{
  border-color:#8ceb72!important;
  background:linear-gradient(180deg,#f0ffe9,#d7ffca)!important;
  color:#27732b!important;
  box-shadow:0 5px 0 #74c864,0 9px 15px rgba(45,139,54,.12)!important;
}
.answer.wrong{
  border-color:#ff9a9a!important;
  background:linear-gradient(180deg,#fff4f4,#ffd9d9)!important;
  color:#a72d34!important;
  box-shadow:0 5px 0 #e68f8f,0 9px 15px rgba(180,52,60,.12)!important;
}
.feedback{border-radius:19px!important}
.feedback.good{background:linear-gradient(180deg,#efffe9,#d7ffca)!important;color:#27732b!important}
.feedback.bad{background:linear-gradient(180deg,#fff4f4,#ffd9d9)!important;color:#a72d34!important}

/* Tactile buttons */
.next-btn,.primary,.secondary,.login-submit,.action,.small-btn,.notice-btn{
  min-height:50px;
  border-radius:21px!important;
  border:2px solid rgba(255,255,255,.62)!important;
  font-weight:800!important;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease!important;
}
.next-btn,.primary,.login-submit,.action.primary,.small-btn.primary{
  background:linear-gradient(180deg,#76e55c,var(--mx-green-dark))!important;
  color:#fff!important;
  box-shadow:0 6px 0 #257f2f,0 12px 19px rgba(38,135,48,.24)!important;
  text-shadow:0 1px 0 rgba(0,0,0,.10);
}
.secondary,.action.secondary{
  background:linear-gradient(180deg,var(--mx-yellow),var(--mx-orange))!important;
  color:#743d00!important;
  box-shadow:0 6px 0 #d87813,0 12px 19px rgba(211,112,20,.22)!important;
}
.next-btn:active,.primary:active,.secondary:active,.login-submit:active,.action:active,.small-btn:active,.notice-btn:active{
  transform:translateY(4px)!important;
  box-shadow:0 2px 0 rgba(80,40,15,.32),0 6px 10px rgba(80,40,15,.14)!important;
}

/* Results */
.result-kicker{color:var(--mx-pink-dark)!important}
.result-title{color:var(--mx-purple-dark)!important}
.result-score{
  background:linear-gradient(180deg,#fffde9,#ffe998)!important;
  border-color:#fff7c7!important;
  box-shadow:0 7px 0 #e5ab21,0 18px 29px rgba(193,111,10,.22)!important;
}
.result-score strong{color:var(--mx-red)!important}

/* User bar */
.userbar{
  background:rgba(255,255,255,.86)!important;
  border:2px solid rgba(255,255,255,.86)!important;
  border-radius:19px!important;
  box-shadow:0 7px 0 rgba(117,69,32,.10),var(--mx-shadow-soft)!important;
}
.userbar-name[data-profile-link]{
  color:var(--mx-purple-dark)!important;
  background:linear-gradient(180deg,#fffdf6,#fff0c5)!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 0 #e1bb67,0 7px 10px rgba(70,35,15,.10)!important;
  font-weight:800!important;
}
.userbar-name[data-profile-link]:active{transform:translateY(2px)!important}
.userbar-points{color:#aa6200!important;font-weight:900!important}
.userbar-logout{
  background:linear-gradient(180deg,var(--mx-red),var(--mx-red-dark))!important;
  border:1px solid rgba(255,255,255,.45)!important;
  box-shadow:0 4px 0 #a62930,0 7px 11px rgba(150,35,42,.18)!important;
}
.qtmx-audio-toggle{
  background:linear-gradient(180deg,var(--mx-purple),var(--mx-purple-dark))!important;
  border:2px solid rgba(255,255,255,.75)!important;
  box-shadow:0 5px 0 #38106f,0 9px 16px rgba(46,14,80,.22)!important;
}

/* Login */
.login-gate{
  background:
    radial-gradient(circle at 25% 11%,rgba(255,216,74,.32),transparent 25%),
    radial-gradient(circle at 78% 18%,rgba(255,79,172,.25),transparent 30%),
    linear-gradient(180deg,#6026bd 0%,#9632bb 42%,#ef6d68 76%,#ffb342 100%)!important;
}
.login-card{
  background:linear-gradient(180deg,rgba(255,251,235,.97),rgba(255,234,176,.96))!important;
  border-radius:31px!important;
  box-shadow:0 9px 0 rgba(109,54,22,.18),0 26px 55px rgba(47,15,70,.30)!important;
}
.login-card h2{color:var(--mx-purple-dark)!important}
.login-fields input,.hobbies-editor textarea{
  border:2px solid rgba(255,255,255,.88)!important;
  background:#fffefa!important;
  border-radius:18px!important;
  box-shadow:inset 0 2px 5px rgba(91,47,15,.05),0 4px 0 #ebce91!important;
}
.login-fields input:focus,.hobbies-editor textarea:focus{
  border-color:#b891ff!important;
  box-shadow:0 0 0 4px rgba(107,43,217,.10),0 4px 0 #c3a1ef!important;
}

/* Home supporting content */
.seo-home{
  background:rgba(255,251,235,.84)!important;
  border-radius:24px!important;
}
.seo-home h2{color:var(--mx-purple-dark)!important}
.seo-home a{
  background:linear-gradient(180deg,#fff,#fff0c5)!important;
  color:var(--mx-purple-dark)!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 0 #e4bd68!important;
  font-weight:900!important;
}

/* National map */
.content h1{color:var(--mx-purple-dark)!important}
.progress-copy{
  background:linear-gradient(180deg,#7f39e8,var(--mx-purple-dark))!important;
  color:#fff!important;
  border:2px solid rgba(255,255,255,.30)!important;
  border-radius:23px!important;
  box-shadow:0 6px 0 #35116c,0 14px 25px rgba(55,19,91,.24)!important;
}
.progress-copy strong{color:#fff!important;font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important}
.progress-copy span{color:#f8eaff!important}
.map-card{
  background:rgba(255,253,242,.91)!important;
  border-radius:28px!important;
}
.legend{font-weight:900!important;color:var(--mx-brown-soft)!important}
.legend .done{background:var(--mx-green)!important}
.legend .pending{background:var(--mx-yellow)!important}
.fallback a{
  background:linear-gradient(180deg,#fff4b6,var(--mx-yellow))!important;
  color:#713f00!important;
  border:2px solid rgba(255,255,255,.72)!important;
  border-radius:14px!important;
  box-shadow:0 4px 0 #dba31c!important;
}
.fallback a.done{
  background:linear-gradient(180deg,#75e65d,var(--mx-green-dark))!important;
  color:#fff!important;
  box-shadow:0 4px 0 #257f2f!important;
}

/* Profile */
.profile-app{
  background:
    radial-gradient(circle at 10% 11%,rgba(255,255,255,.40) 0 3px,transparent 4px),
    radial-gradient(circle at 90% 15%,rgba(255,79,172,.20),transparent 21%),
    linear-gradient(180deg,#fff8df 0%,#ffedb9 64%,#ffe29a 100%)!important;
}
.profile-topbar{z-index:4!important}
.eyebrow{color:var(--mx-pink-dark)!important}
.brand-title{color:var(--mx-purple-dark)!important;font-size:25px!important}
.hero-card{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,237,190,.94))!important;
  border-radius:29px!important;
  box-shadow:0 7px 0 #dfb765,0 17px 32px rgba(75,37,15,.15)!important;
}
.avatar{
  border:4px solid #fff!important;
  box-shadow:0 5px 0 #d9b05f,0 11px 19px rgba(85,43,16,.16)!important;
}
.avatar-fallback{background:linear-gradient(145deg,var(--mx-purple),var(--mx-purple-dark))!important}
.hero-copy h1{color:var(--mx-purple-dark)!important}
.username{color:var(--mx-pink-dark)!important;font-weight:900!important}
.level-pill{
  background:linear-gradient(180deg,var(--mx-purple),var(--mx-purple-dark))!important;
  border:1px solid rgba(255,255,255,.34)!important;
  box-shadow:0 4px 0 #36106b!important;
}
.stats-grid{gap:10px!important}
.stat{
  border-radius:20px!important;
  border:2px solid rgba(255,255,255,.82)!important;
  box-shadow:0 5px 0 rgba(128,72,27,.13),0 9px 16px rgba(75,37,15,.10)!important;
}
.stat:nth-child(1){background:linear-gradient(180deg,#fff5ae,#ffd84a)!important}
.stat:nth-child(2){background:linear-gradient(180deg,#eedcff,#c99cff)!important}
.stat:nth-child(3){background:linear-gradient(180deg,#dcfff8,#94eee2)!important}
.stat:nth-child(4){background:linear-gradient(180deg,#ffe4f4,#ffaddb)!important}
.stat span{color:var(--mx-brown-soft)!important}
.stat strong{color:var(--mx-purple-dark)!important}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,244,211,.92))!important;
  border-radius:25px!important;
  box-shadow:0 6px 0 #dfbc70,0 13px 23px rgba(75,37,15,.12)!important;
}
.section-heading h2{color:var(--mx-purple-dark)!important}
.section-kicker{color:var(--mx-pink-dark)!important}
.count-badge,.counter{
  background:linear-gradient(180deg,var(--mx-yellow),var(--mx-orange))!important;
  color:#6d3b00!important;
  border:1px solid rgba(255,255,255,.60)!important;
  box-shadow:0 3px 0 #d67813!important;
}
.progress-track{
  height:15px!important;
  background:rgba(107,43,217,.13)!important;
  border:2px solid #fff!important;
  box-shadow:inset 0 2px 5px rgba(65,25,92,.11)!important;
}
.progress-fill{
  background:repeating-linear-gradient(-45deg,#78ea5d 0 13px,#58ce45 13px 26px)!important;
  box-shadow:inset 0 -3px 0 rgba(32,126,39,.22)!important;
}
.mini-stats div{
  background:linear-gradient(180deg,#fffdf5,#fff0c8)!important;
  border:1px solid rgba(255,255,255,.90)!important;
  box-shadow:0 3px 0 #e4c47e!important;
}
.tag{
  background:linear-gradient(180deg,#e8ffdf,#c9ffbd)!important;
  color:#28772d!important;
  border:1px solid rgba(255,255,255,.90)!important;
}
.empty-tag{background:linear-gradient(180deg,#fff8df,#f1dfb9)!important;color:#80634f!important}
.people-list{gap:10px!important}
.person{
  border:2px solid rgba(255,255,255,.88)!important;
  background:linear-gradient(180deg,#fffdf7,#fff0c5)!important;
  border-radius:17px!important;
  box-shadow:0 4px 0 #dfbc70,0 7px 11px rgba(75,37,15,.08)!important;
}
.person-avatar{background:linear-gradient(180deg,var(--mx-purple),var(--mx-purple-dark))!important}
.person-copy strong{color:var(--mx-purple-dark)!important;font-weight:900!important}
.accept{background:linear-gradient(180deg,#75e65d,var(--mx-green-dark))!important;color:#fff!important}
.reject{background:linear-gradient(180deg,#ffe87c,var(--mx-orange))!important;color:#6d3b00!important}
.profile-footer a{
  display:inline-block;
  padding:11px 18px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--mx-purple),var(--mx-purple-dark));
  color:#fff!important;
  box-shadow:0 5px 0 #341069,0 10px 16px rgba(60,18,100,.19);
}

/* Friend notifications */
.qtmx-friend-notice{
  background:linear-gradient(180deg,#fffdf4,#ffe9b0)!important;
  border:2px solid #fff!important;
  box-shadow:0 4px 0 #dcb45f,0 8px 14px rgba(73,38,15,.12)!important;
}
.qtmx-friend-notice:active{transform:translateY(2px)!important}
.qtmx-friend-heart{color:var(--mx-red)!important}
.qtmx-hat-crown{background:var(--mx-orange)!important}
.qtmx-hat-brim{background:var(--mx-yellow)!important}
.qtmx-friend-badge{
  background:linear-gradient(180deg,var(--mx-red),var(--mx-red-dark))!important;
  border:2px solid #fff!important;
  box-shadow:0 3px 0 #9e2730,0 6px 10px rgba(129,26,32,.18)!important;
}
.qtmx-friend-panel{
  background:linear-gradient(180deg,#fffaf0,#ffeab8)!important;
  border:2px solid rgba(255,255,255,.86)!important;
  border-radius:27px!important;
  box-shadow:0 8px 0 rgba(99,55,24,.15),0 25px 60px rgba(45,15,68,.30)!important;
}
.qtmx-friend-head small{color:var(--mx-pink-dark)!important}
.qtmx-friend-head h3{color:var(--mx-purple-dark)!important}
.qtmx-friend-close{
  background:linear-gradient(180deg,#fff,#ffe4e4)!important;
  color:var(--mx-red-dark)!important;
  box-shadow:0 3px 0 #e5b7b7!important;
}
.qtmx-friend-row{
  background:linear-gradient(180deg,#fffefa,#fff0c5)!important;
  border:2px solid rgba(255,255,255,.88)!important;
  border-radius:18px!important;
  box-shadow:0 4px 0 #dfbc70!important;
}
.qtmx-friend-avatar{
  background:linear-gradient(180deg,var(--mx-purple),var(--mx-purple-dark))!important;
  border:2px solid #fff!important;
}
.qtmx-friend-person strong{color:var(--mx-purple-dark)!important}
.qtmx-friend-person span,.qtmx-friend-empty{color:var(--mx-brown-soft)!important}
.qtmx-friend-actions button{
  min-height:34px!important;
  border:1px solid rgba(255,255,255,.60)!important;
}
.qtmx-friend-accept{
  background:linear-gradient(180deg,#75e65d,var(--mx-green-dark))!important;
  color:#fff!important;
  box-shadow:0 3px 0 #257f2f!important;
}
.qtmx-friend-reject{
  background:linear-gradient(180deg,#ffe87c,var(--mx-orange))!important;
  color:#6d3b00!important;
  box-shadow:0 3px 0 #d67813!important;
}

/* Mobile polish */
@media(max-width:430px){
  .screen,.content{padding-left:18px!important;padding-right:18px!important}
  .hero-title{font-size:clamp(38px,10vw,54px)!important}
  .question{font-size:clamp(24px,7vw,32px)!important}
  .level-card strong,.country-card strong{font-size:18px!important}
  .level-card,.country-card{padding-left:67px!important}
  .stat strong{font-size:22px!important}
}
@media(prefers-reduced-motion:reduce){
  .level-card,.country-card,.answer,.next-btn,.primary,.secondary,.action{transition:none!important}
}


/* State trivia pages */
.title,.done h2{
  font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;
  color:var(--mx-purple-dark)!important;
  letter-spacing:-.025em!important;
  text-shadow:0 2px 0 rgba(255,255,255,.46);
}
.sub,.count,.done p{color:var(--mx-brown-soft)!important}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,241,194,.92))!important;
}
.qicon,.done .emoji{filter:drop-shadow(0 4px 7px rgba(255,139,33,.25))}
.next{
  min-height:50px!important;
  width:100%!important;
  border:2px solid rgba(255,255,255,.62)!important;
  border-radius:21px!important;
  background:linear-gradient(180deg,#76e55c,var(--mx-green-dark))!important;
  color:#fff!important;
  box-shadow:0 6px 0 #257f2f,0 12px 19px rgba(38,135,48,.24)!important;
  font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;
  font-weight:800!important;
  transition:transform .12s ease,box-shadow .12s ease!important;
}
.next:active{
  transform:translateY(4px)!important;
  box-shadow:0 2px 0 #257f2f,0 6px 10px rgba(38,135,48,.16)!important;
}
.points-award{
  background:linear-gradient(180deg,#fff6a9,var(--mx-yellow))!important;
  border:2px solid #fff!important;
  color:#7a4b00!important;
  box-shadow:0 4px 0 #daa21c,0 8px 14px rgba(169,100,7,.16)!important;
}
.actions a,.actions button{
  min-height:50px!important;
  border:2px solid rgba(255,255,255,.62)!important;
  border-radius:21px!important;
  font-family:"Fredoka","Baloo 2",system-ui,sans-serif!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.done{position:relative;z-index:1}



/* =========================================================
   Serene Green Edition — 2026-09-26
   Palette supplied by the project:
   #003817 #026842 #009d71 #5ccda7 #98ffe0
   ========================================================= */

:root{
  --mx-purple:#026842;
  --mx-purple-dark:#003817;
  --mx-purple-ink:#003817;
  --mx-pink:#009d71;
  --mx-pink-dark:#026842;
  --mx-yellow:#98ffe0;
  --mx-yellow-dark:#5ccda7;
  --mx-orange:#5ccda7;
  --mx-orange-dark:#009d71;
  --mx-green:#5ccda7;
  --mx-green-dark:#026842;
  --mx-teal:#98ffe0;
  --mx-teal-dark:#009d71;
  --mx-sky:#98ffe0;
  --mx-cream:#eafff7;
  --mx-cream-2:#f4fffb;
  --mx-brown:#003817;
  --mx-brown-soft:#026842;
  --mx-shadow:0 14px 30px rgba(0,56,23,.15);
  --mx-shadow-soft:0 8px 18px rgba(0,56,23,.11);
}

/* Calm environment */
html,body{
  background:
    radial-gradient(circle at 14% 8%,rgba(152,255,224,.18),transparent 24%),
    radial-gradient(circle at 86% 12%,rgba(92,205,167,.16),transparent 26%),
    linear-gradient(180deg,#003817 0%,#026842 52%,#009d71 100%)!important;
  color:#003817!important;
}

/* Soft mint game surface */
.app-shell,.app,.profile-app{
  background:
    radial-gradient(circle at 12% 13%,rgba(255,255,255,.34) 0 3px,transparent 4px),
    radial-gradient(circle at 86% 16%,rgba(152,255,224,.34),transparent 24%),
    radial-gradient(circle at 14% 82%,rgba(92,205,167,.18),transparent 27%),
    linear-gradient(180deg,#f4fffb 0%,#dcfff2 42%,#c0f5e3 72%,#98ffe0 100%)!important;
  box-shadow:0 28px 75px rgba(0,56,23,.30),inset 0 2px 0 rgba(255,255,255,.72)!important;
}

.app-shell:before,.app:before,.profile-app:before{
  opacity:.30!important;
  background:
    linear-gradient(90deg,rgba(0,104,66,.12) 0 7%,transparent 7% 93%,rgba(0,157,113,.10) 93% 100%),
    radial-gradient(ellipse at 8% 38%,rgba(92,205,167,.20),transparent 16%),
    radial-gradient(ellipse at 92% 33%,rgba(152,255,224,.26),transparent 17%),
    radial-gradient(ellipse at 8% 72%,rgba(0,157,113,.08),transparent 18%),
    radial-gradient(ellipse at 92% 70%,rgba(2,104,66,.09),transparent 18%)!important;
}

/* Compact festive header: 50% less vertical flag height */
.papel{
  height:41px!important;
  filter:drop-shadow(0 4px 7px rgba(0,56,23,.14))!important;
}
.papel span:nth-child(5n+1){background:#003817!important}
.papel span:nth-child(5n+2){background:#026842!important}
.papel span:nth-child(5n+3){background:#009d71!important}
.papel span:nth-child(5n+4){background:#5ccda7!important}
.papel span:nth-child(5n){background:#98ffe0!important}

/* Reduce the decorative light strand proportionally */
.app-shell:after,.app:after,.profile-app:after{
  top:36px!important;
  height:27px!important;
  opacity:.55!important;
  background:
    radial-gradient(circle at 14px 8px,#98ffe0 0 4px,#eafff7 4px 6px,transparent 7px) 0 0/46px 27px repeat-x!important;
  filter:drop-shadow(0 4px 6px rgba(0,104,66,.12))!important;
}

/* Reclaim the vertical space freed above */
.screen{padding-top:68px!important}
.userbar{top:48px!important}
.userbar.active~.screen{padding-top:105px!important}
.content{padding-top:82px!important}
.profile-topbar{padding-top:6px!important;padding-bottom:16px!important}

/* Typography hierarchy */
.hero-title,.question,.result-title,.login-card h2,
.content h1,.brand-title,.section-heading h2,.state-card strong,.hero-copy h1,
.title,.done h2{
  color:#003817!important;
  text-shadow:0 2px 0 rgba(255,255,255,.52)!important;
}
.hero-title span,.result-kicker,.eyebrow,.section-kicker,.kicker{
  color:#026842!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:#026842!important;
}

/* Brand and small accents */
.brand-pill{
  background:linear-gradient(180deg,#009d71,#026842)!important;
  color:#fff!important;
  box-shadow:0 5px 0 #003817,0 10px 18px rgba(0,56,23,.15)!important;
}
.seal{
  background:radial-gradient(circle at 34% 28%,#f4fffb 0%,#98ffe0 55%,#5ccda7 100%)!important;
  box-shadow:0 7px 0 #009d71,0 14px 24px rgba(0,104,66,.16)!important;
}

/* Calm cards */
.level-card,.country-card,.question-card,.map-card,.login-card,.seo-home,
.card,.hero-card,.stat,.notice,.qtmx-friend-panel,.qtmx-friend-row,.person{
  border-color:rgba(255,255,255,.88)!important;
}
.level-card,.country-card,.question-card,.card,.hero-card,.person,.qtmx-friend-row{
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(220,255,242,.88))!important;
  box-shadow:0 5px 0 rgba(0,157,113,.22),0 12px 22px rgba(0,56,23,.09)!important;
}
.level-card,.country-card{box-shadow:0 5px 0 rgba(0,157,113,.25),0 11px 20px rgba(0,56,23,.08)!important}
.level-card:active,.country-card:active{
  box-shadow:0 2px 0 rgba(0,157,113,.25),0 6px 11px rgba(0,56,23,.07)!important;
}
.level-card strong,.country-card strong,.person-copy strong,.qtmx-friend-person strong{
  color:#003817!important;
}

/* Level icons stay playful, now monochromatically green */
.level-card[data-level="easy"] .num,
.level-card[data-level="medium"] .num,
.level-card[data-level="hard"] .num,
.country-card .num,
.person-avatar,.qtmx-friend-avatar,.avatar-fallback{
  background:linear-gradient(180deg,#009d71,#026842)!important;
  box-shadow:0 4px 0 #003817,0 8px 12px rgba(0,56,23,.11)!important;
}

/* Questions and choices */
.answer{
  background:linear-gradient(180deg,#fafffd,#dcfff2)!important;
  color:#003817!important;
  box-shadow:0 4px 0 #5ccda7,0 8px 14px rgba(0,56,23,.07)!important;
}
.answer:active{
  box-shadow:0 2px 0 #5ccda7,0 5px 9px rgba(0,56,23,.07)!important;
}
.answer.correct{
  border-color:#5ccda7!important;
  background:linear-gradient(180deg,#f0fff9,#bfffe9)!important;
  color:#003817!important;
  box-shadow:0 4px 0 #009d71,0 8px 14px rgba(0,104,66,.09)!important;
}
/* Error remains red intentionally for clear feedback */
.answer.wrong{
  border-color:#ff9a9a!important;
  background:linear-gradient(180deg,#fff5f5,#ffdddd)!important;
  color:#9b2930!important;
}

/* Main actions */
.next-btn,.primary,.login-submit,.action.primary,.small-btn.primary,.next,
.accept,.qtmx-friend-accept{
  background:linear-gradient(180deg,#009d71,#026842)!important;
  color:#fff!important;
  box-shadow:0 5px 0 #003817,0 10px 17px rgba(0,56,23,.16)!important;
}
.secondary,.action.secondary,.reject,.qtmx-friend-reject{
  background:linear-gradient(180deg,#98ffe0,#5ccda7)!important;
  color:#003817!important;
  box-shadow:0 5px 0 #009d71,0 10px 17px rgba(0,104,66,.12)!important;
}
.next-btn:active,.primary:active,.secondary:active,.login-submit:active,
.action:active,.small-btn:active,.next:active{
  box-shadow:0 2px 0 #003817,0 5px 9px rgba(0,56,23,.10)!important;
}

/* Progress */
.progress,.progress-track{
  background:rgba(2,104,66,.12)!important;
  border-color:rgba(255,255,255,.88)!important;
  box-shadow:inset 0 2px 5px rgba(0,56,23,.08)!important;
}
.progress>div,.progress-fill{
  background:repeating-linear-gradient(-45deg,#5ccda7 0 13px,#009d71 13px 26px)!important;
  box-shadow:inset 0 -2px 0 rgba(0,56,23,.16)!important;
}

/* Home informational areas */
.seo-home,.map-card,.login-card,.notice{
  background:linear-gradient(180deg,rgba(244,255,251,.95),rgba(220,255,242,.91))!important;
  box-shadow:0 10px 22px rgba(0,56,23,.10)!important;
}
.seo-home h2{color:#003817!important}
.seo-home a{
  background:linear-gradient(180deg,#f4fffb,#c9f9e8)!important;
  color:#003817!important;
  box-shadow:0 3px 0 #5ccda7!important;
}

/* National map */
.progress-copy{
  background:linear-gradient(180deg,#026842,#003817)!important;
  box-shadow:0 5px 0 rgba(0,56,23,.68),0 12px 22px rgba(0,56,23,.18)!important;
}
.progress-copy span{color:#98ffe0!important}
.legend{color:#026842!important}
.legend .done{background:#009d71!important}
.legend .pending{background:#98ffe0!important;border:1px solid #5ccda7}
.fallback a{
  background:linear-gradient(180deg,#d9fff1,#98ffe0)!important;
  color:#003817!important;
  box-shadow:0 3px 0 #5ccda7!important;
}
.fallback a.done{
  background:linear-gradient(180deg,#009d71,#026842)!important;
  color:#fff!important;
  box-shadow:0 3px 0 #003817!important;
}

/* User bar and audio */
.userbar{
  background:rgba(244,255,251,.88)!important;
  border-color:rgba(255,255,255,.90)!important;
  box-shadow:0 5px 0 rgba(0,157,113,.15),0 10px 18px rgba(0,56,23,.08)!important;
}
.userbar-name[data-profile-link]{
  color:#003817!important;
  background:linear-gradient(180deg,#fafffd,#d9fff1)!important;
  box-shadow:0 3px 0 #5ccda7,0 6px 10px rgba(0,56,23,.06)!important;
}
.userbar-points{color:#026842!important}
.qtmx-audio-toggle{
  background:linear-gradient(180deg,#026842,#003817)!important;
  box-shadow:0 4px 0 #001e0c,0 8px 14px rgba(0,56,23,.18)!important;
}

/* Login calm green environment */
.login-gate{
  background:
    radial-gradient(circle at 22% 10%,rgba(152,255,224,.25),transparent 28%),
    radial-gradient(circle at 78% 18%,rgba(92,205,167,.18),transparent 32%),
    linear-gradient(180deg,#003817 0%,#026842 44%,#009d71 100%)!important;
}
.login-card{
  background:linear-gradient(180deg,rgba(244,255,251,.98),rgba(220,255,242,.96))!important;
  box-shadow:0 7px 0 rgba(0,104,66,.20),0 24px 48px rgba(0,56,23,.22)!important;
}
.login-fields input,.hobbies-editor textarea{
  background:#fafffd!important;
  box-shadow:inset 0 2px 5px rgba(0,56,23,.04),0 3px 0 #5ccda7!important;
}
.login-fields input:focus,.hobbies-editor textarea:focus{
  border-color:#009d71!important;
  box-shadow:0 0 0 4px rgba(0,157,113,.10),0 3px 0 #5ccda7!important;
}

/* Profile */
.profile-app{
  background:
    radial-gradient(circle at 86% 14%,rgba(152,255,224,.28),transparent 24%),
    radial-gradient(circle at 12% 86%,rgba(92,205,167,.16),transparent 27%),
    linear-gradient(180deg,#f4fffb 0%,#dcfff2 55%,#98ffe0 100%)!important;
}
.brand-title,.hero-copy h1,.section-heading h2,.stat strong{color:#003817!important}
.username,.eyebrow,.section-kicker{color:#009d71!important}
.hero-card{
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(220,255,242,.92))!important;
  box-shadow:0 5px 0 #5ccda7,0 15px 27px rgba(0,56,23,.10)!important;
}
.level-pill{
  background:linear-gradient(180deg,#026842,#003817)!important;
  box-shadow:0 3px 0 #001e0c!important;
}
.stat{
  background:linear-gradient(180deg,#f8fffc,#cffff0)!important;
  box-shadow:0 4px 0 rgba(0,157,113,.18),0 8px 14px rgba(0,56,23,.06)!important;
}
.stat:nth-child(1){background:linear-gradient(180deg,#f4fffb,#98ffe0)!important}
.stat:nth-child(2){background:linear-gradient(180deg,#ecfff8,#bdf4df)!important}
.stat:nth-child(3){background:linear-gradient(180deg,#e2fff5,#9ee9cf)!important}
.stat:nth-child(4){background:linear-gradient(180deg,#dbfff2,#86ddc0)!important}
.count-badge,.counter{
  background:linear-gradient(180deg,#98ffe0,#5ccda7)!important;
  color:#003817!important;
  box-shadow:0 3px 0 #009d71!important;
}
.mini-stats div{
  background:linear-gradient(180deg,#fafffd,#d9fff1)!important;
  box-shadow:0 3px 0 #5ccda7!important;
}
.tag{
  background:linear-gradient(180deg,#dffff4,#b5f5df)!important;
  color:#026842!important;
}
.empty-tag{
  background:linear-gradient(180deg,#f4fffb,#d8efe7)!important;
  color:#026842!important;
}
.profile-footer a{
  background:linear-gradient(180deg,#009d71,#026842)!important;
  box-shadow:0 4px 0 #003817,0 9px 15px rgba(0,56,23,.14)!important;
}

/* Friend notification center */
.qtmx-friend-notice{
  background:linear-gradient(180deg,#fafffd,#d9fff1)!important;
  box-shadow:0 3px 0 #5ccda7,0 7px 12px rgba(0,56,23,.08)!important;
}
.qtmx-friend-heart{color:#009d71!important}
.qtmx-hat-crown{background:#026842!important}
.qtmx-hat-brim{background:#5ccda7!important}
.qtmx-friend-panel{
  background:linear-gradient(180deg,#f4fffb,#d9fff1)!important;
  box-shadow:0 6px 0 rgba(0,157,113,.15),0 24px 52px rgba(0,56,23,.22)!important;
}
.qtmx-friend-head small{color:#009d71!important}
.qtmx-friend-head h3{color:#003817!important}
.qtmx-friend-close{
  background:linear-gradient(180deg,#fff,#d9fff1)!important;
  color:#026842!important;
  box-shadow:0 3px 0 #5ccda7!important;
}

/* Reward / state completion */
.points-award{
  background:linear-gradient(180deg,#dffff4,#98ffe0)!important;
  color:#003817!important;
  box-shadow:0 3px 0 #5ccda7,0 7px 12px rgba(0,104,66,.08)!important;
}

/* Keep critical notification/error red for immediate comprehension */
.qtmx-friend-badge{
  background:linear-gradient(180deg,#ff5353,#c9343b)!important;
  box-shadow:0 3px 0 #8c232a,0 6px 10px rgba(129,26,32,.16)!important;
}
.userbar-logout{
  background:linear-gradient(180deg,#026842,#003817)!important;
  box-shadow:0 3px 0 #001e0c,0 7px 11px rgba(0,56,23,.14)!important;
}

/* Mobile density */
@media(max-width:430px){
  .papel{height:41px!important}
  .screen{padding-top:64px!important}
  .userbar.active~.screen{padding-top:102px!important}
  .content{padding-top:78px!important}
}