:root{
  --ink:#111936;
  --muted:#5d6684;
  --mint:#00e0b8;
  --sun:#ffd327;
  --orange:#ff9f1c;
  --coral:#ff477e;
  --berry:#b42dff;
  --violet:#5f3bff;
  --sky:#14b8ff;
  --shadow:0 24px 46px rgba(29,39,86,.20);
  --soft-shadow:0 12px 24px rgba(29,39,86,.14);
}

*{box-sizing:border-box}
html{min-height:100%;background:#f4fbff}
body{
  margin:0;
  min-height:100vh;
  color:var(--ink);
  font-family:'Nunito',sans-serif;
  background:
    radial-gradient(circle at 18% 12%,rgba(255,247,115,.95) 0 118px,transparent 120px),
    radial-gradient(circle at 82% 10%,rgba(0,223,255,.75) 0 150px,transparent 152px),
    radial-gradient(circle at 78% 88%,rgba(255,64,132,.72) 0 210px,transparent 212px),
    radial-gradient(circle at 10% 80%,rgba(0,224,184,.78) 0 174px,transparent 176px),
    linear-gradient(160deg,#3f35ff 0%,#23c8ff 32%,#77f4d2 58%,#ffe87a 100%);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.95;
  background-image:
    radial-gradient(circle at 20% 25%,rgba(255,255,255,.95) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 68%,rgba(255,255,255,.70) 0 2px,transparent 3px),
    linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:92px 92px,116px 116px,36px 36px,36px 36px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.82),rgba(0,0,0,.28));
}

body::after{
  content:"";
  position:fixed;
  left:50%;
  top:49%;
  width:min(1040px,92vw);
  height:520px;
  transform:translate(-50%,-50%) rotate(-1deg);
  border-radius:60px;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(105deg,rgba(255,255,255,.30),rgba(255,255,255,.08)),
    radial-gradient(circle at 18% 18%,rgba(255,211,39,.36),transparent 34%),
    radial-gradient(circle at 82% 30%,rgba(180,45,255,.24),transparent 34%),
    radial-gradient(circle at 45% 100%,rgba(0,224,184,.30),transparent 42%);
  box-shadow:0 40px 90px rgba(21,36,96,.22);
}

button,a{font:inherit}
button:focus-visible,a:focus-visible{outline:4px solid rgba(255,191,47,.65);outline-offset:4px}

.app{
  width:min(1120px,100%);
  min-height:100vh;
  margin:0 auto;
  padding:14px 20px 96px;
  position:relative;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  position:relative;
  z-index:120;
}

.topbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.back-btn,.game-language-link{
  text-decoration:none;
  text-transform:uppercase;
}

.back-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:48px;
  padding:10px 16px;
  color:var(--ink);
  font-weight:1000;
  background:linear-gradient(180deg,#ffffff,#ffe672);
  border:3px solid rgba(255,255,255,.95);
  border-radius:999px;
  box-shadow:0 7px 0 rgba(217,145,0,.55),var(--soft-shadow);
}

.game-language-switch{
  position:absolute;
  left:122px;
  top:4px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px;
  border-radius:999px;
  background:rgba(17,25,54,.30);
  border:2px solid rgba(255,255,255,.32);
  box-shadow:var(--soft-shadow);
}

.game-language-link{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  color:#fff;
  font-size:.86rem;
  font-weight:1000;
  line-height:1.05;
}

.game-language-link[aria-pressed="true"]{
  color:var(--ink);
  background:linear-gradient(180deg,#fff7b8,#ffd327);
  box-shadow:0 4px 0 rgba(217,145,0,.50);
}

.game-flag{
  width:18px;
  height:12px;
  display:inline-block;
  flex:0 0 18px;
  border-radius:2px;
  box-shadow:0 0 0 1px rgba(17,25,54,.20);
  overflow:hidden;
  position:relative;
}
.game-flag-us{background:linear-gradient(#b22234 0 14%,#fff 14% 28%,#b22234 28% 42%,#fff 42% 56%,#b22234 56% 70%,#fff 70% 84%,#b22234 84%)}
.game-flag-us::before{content:"";position:absolute;left:0;top:0;width:8px;height:7px;background:#3c3b6e}
.game-flag-es{background:linear-gradient(#c60b1e 0 25%,#ffc400 25% 75%,#c60b1e 75%)}

.sound-btn{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:3px solid rgba(255,255,255,.95);
  border-radius:50%;
  color:#172033;
  background:linear-gradient(180deg,#e7fbff,#14b8ff);
  box-shadow:0 7px 0 #087fb3,0 13px 24px rgba(20,184,255,.30),inset 0 1px 0 rgba(255,255,255,.52);
  cursor:pointer;
  font-size:1.35rem;
  line-height:1;
}
.sound-btn.is-off{background:linear-gradient(180deg,#f6e8ff,#c85cff);box-shadow:0 7px 0 #7421aa,0 13px 24px rgba(180,45,255,.25),inset 0 1px 0 rgba(255,255,255,.50)}

.session-pill{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#111936,#4620a8 58%,#b42dff);
  color:#fff;
  font-weight:900;
  box-shadow:var(--soft-shadow);
}

.hud{
  display:grid;
  grid-template-columns:1fr minmax(280px,1.35fr) 1fr;
  align-items:stretch;
  gap:14px;
  margin-bottom:8px;
}

.hud-card,.title-card{
  background:linear-gradient(145deg,rgba(17,25,54,.96),rgba(53,35,138,.94));
  border:3px solid rgba(255,255,255,.28);
  border-radius:24px;
  box-shadow:0 9px 0 rgba(17,25,54,.26),0 18px 34px rgba(17,25,54,.22);
  padding:12px 16px;
}

.hud-card{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-content:center}
.stat-label{display:block;color:rgba(255,255,255,.66);font-size:.76rem;font-weight:1000;text-transform:uppercase;letter-spacing:.08em}
.stat-value{display:block;color:#fff;font-size:1.4rem;font-weight:1000;line-height:1.05}
.title-card{text-align:center}
.hud-title{margin:0;color:#fff;font-size:clamp(1.35rem,2.8vw,2.25rem);font-weight:1000;line-height:1;text-shadow:0 3px 0 rgba(0,0,0,.18)}
.subtitle{margin:6px 0 0;color:rgba(255,255,255,.78);font-weight:800}

.progress-bar{
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:8px;
  margin:10px 0 12px;
}
.progress-dot{
  min-height:34px;
  border:0;
  border-radius:999px;
  background:rgba(255,255,255,.56);
  color:var(--ink);
  font-weight:1000;
  box-shadow:0 4px 0 rgba(17,25,54,.16);
}
.progress-dot.current{background:linear-gradient(180deg,#fff7b8,#ffd327)}
.progress-dot.completed{background:linear-gradient(180deg,#dcfff8,#00e0b8)}

.game-board{position:relative}
.mission-shell{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);
  gap:16px;
  align-items:stretch;
}
.visual-stage,.coach-panel{
  min-height:390px;
  border-radius:32px;
  border:4px solid rgba(255,255,255,.88);
  background:linear-gradient(145deg,rgba(255,255,255,.94),rgba(231,251,255,.88));
  box-shadow:0 14px 0 rgba(17,25,54,.14),var(--shadow);
}
.visual-stage{padding:20px;overflow:hidden}
.coach-panel{padding:18px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(255,255,255,.90),rgba(255,247,184,.86))}
.stage-stack{min-height:350px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}

.instruction{
  color:var(--ink);
  font-size:clamp(1.1rem,2vw,1.55rem);
  font-weight:1000;
  text-align:center;
  line-height:1.15;
}
.count-area{
  min-width:150px;
  padding:12px 32px;
  border-radius:28px;
  border:4px solid rgba(255,255,255,.96);
  background:linear-gradient(180deg,#fff,#fff3a8);
  box-shadow:0 8px 0 rgba(217,145,0,.32);
  text-align:center;
}
.count-number{color:#5f3bff;font-size:4rem;font-weight:1000;line-height:.95;text-shadow:0 4px 0 rgba(255,211,39,.50)}
.count-number.pop{animation:count-pop .28s ease-out}
@keyframes count-pop{50%{transform:scale(1.18)}}
.count-label{color:var(--muted);font-size:.78rem;font-weight:1000;text-transform:uppercase;letter-spacing:.09em}

.stars-zone{
  width:100%;
  min-height:190px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:16px;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(95,59,255,.10),rgba(20,184,255,.10));
  border:3px dashed rgba(95,59,255,.30);
}
.star-item,.compare-icon{
  font-size:clamp(2.35rem,5vw,3.65rem);
  cursor:pointer;
  user-select:none;
  filter:drop-shadow(0 5px 8px rgba(17,25,54,.22));
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .18s ease;
  animation:pop-in .34s ease-out backwards;
}
.star-item:hover{transform:translateY(-4px) scale(1.08)}
.star-item.tapped{transform:scale(1.08);filter:drop-shadow(0 0 16px rgba(255,211,39,.86))}
.star-item.dimmed{opacity:.32;filter:grayscale(.4)}
@keyframes pop-in{from{opacity:0;transform:scale(.35) rotate(-14deg)}to{opacity:1;transform:scale(1)}}

.compare-row{width:100%;display:flex;gap:18px;align-items:center;justify-content:center}
.compare-group{
  flex:1;
  min-width:0;
  border-radius:24px;
  border:3px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,#fff,#e7fbff);
  box-shadow:0 8px 0 rgba(20,184,255,.22);
  padding:14px;
  text-align:center;
}
.compare-label{font-size:1rem;font-weight:1000;color:var(--ink)}
.compare-icons{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:10px 0}
.compare-count{font-size:2.2rem;font-weight:1000;color:var(--violet)}
.compare-vs{font-size:1.2rem;font-weight:1000;color:var(--berry)}

.answer-panel{width:100%;display:flex;flex-direction:column;gap:16px;align-items:center}
.answer-panel[hidden]{display:none}
.question-card{
  width:100%;
  padding:14px;
  border-radius:22px;
  background:#fff;
  border:3px solid rgba(17,25,54,.10);
  box-shadow:var(--soft-shadow);
}
.question-text{margin:0;color:var(--ink);font-size:1.2rem;font-weight:1000;text-align:center;line-height:1.2}
.answer-options{display:grid;grid-template-columns:repeat(2,minmax(88px,1fr));gap:12px;width:100%}
.answer-btn{
  min-height:78px;
  border:4px solid rgba(255,255,255,.95);
  border-radius:22px;
  background:linear-gradient(180deg,#fff,#dcfff8);
  color:var(--ink);
  font-size:2rem;
  font-weight:1000;
  box-shadow:0 8px 0 rgba(0,139,116,.34),var(--soft-shadow);
  cursor:pointer;
}
.answer-btn:hover{transform:translateY(-3px)}
.answer-btn.correct{background:linear-gradient(180deg,#dcfff8,#00e0b8)}
.answer-btn.wrong{background:linear-gradient(180deg,#ffe5ec,#ff477e);color:#fff}
.answer-btn:disabled{cursor:not-allowed;opacity:.78}

.guide-section{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:10px;position:relative;z-index:5}
.guide-bubble{
  max-width:min(760px,96%);
  padding:12px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.88);
  color:var(--ink);
  font-weight:900;
  text-align:center;
  box-shadow:var(--soft-shadow);
}
.guide-avatar{font-size:2.5rem}

.modal,.overlay{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(17,25,54,.58);
  backdrop-filter:blur(10px);
}
.modal.hidden{display:none}
.overlay{display:none}
.overlay.active{display:flex}
.modal-content,.overlay-content{
  width:min(440px,94vw);
  padding:34px 28px;
  border-radius:34px;
  border:4px solid rgba(255,255,255,.92);
  background:linear-gradient(145deg,#fff,#e7fbff);
  color:var(--ink);
  text-align:center;
  box-shadow:0 20px 0 rgba(17,25,54,.18),0 42px 80px rgba(17,25,54,.30);
}
.modal-icon,.overlay-icon{font-size:4rem;margin-bottom:10px}
.modal-content h2,.overlay-title{margin:0 0 8px;font-size:1.7rem;font-weight:1000}
.modal-content p{margin:0 0 24px;color:var(--muted);font-weight:800;line-height:1.35}
.btn-start-game,.btn-next{
  border:0;
  border-radius:18px;
  padding:14px 30px;
  background:linear-gradient(180deg,#ff7aa5,#ff477e);
  color:#fff;
  font-weight:1000;
  font-size:1.05rem;
  cursor:pointer;
  box-shadow:0 8px 0 #b91e54,0 16px 28px rgba(255,71,126,.30);
}
.overlay-stars{font-size:2rem;margin:14px 0}
.confetti-container{position:fixed;inset:0;pointer-events:none;z-index:190}
.confetti-piece{position:absolute;width:10px;height:10px;border-radius:3px;animation:confetti-fall 2s ease-out forwards}
@keyframes confetti-fall{from{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(100vh) rotate(720deg);opacity:0}}

@media(max-width:1050px){
  .topbar{min-height:104px;align-items:flex-start}
  .game-language-switch{position:absolute;left:50%;top:58px;transform:translateX(-50%);width:min(430px,calc(100vw - 28px));justify-content:center}
  .game-language-link{flex:1;max-width:190px}
}
@media(max-width:860px){
  .hud,.mission-shell{grid-template-columns:1fr}
  .coach-panel{min-height:auto}
  .visual-stage{min-height:340px}
}
@media(max-width:640px){
  .app{padding:12px 12px 80px}
  .topbar{min-height:148px;flex-direction:column;align-items:stretch}
  .topbar-actions{justify-content:space-between;flex-wrap:wrap}
  .game-language-switch{top:58px;width:min(360px,calc(100vw - 22px))}
  .session-pill{width:100%;justify-content:center}
  .hud-card{grid-template-columns:1fr 1fr}
  .progress-bar{gap:5px}
  .progress-dot{min-height:30px;font-size:.82rem}
  .compare-row{flex-direction:column}
  .answer-options{grid-template-columns:1fr 1fr}
}


.action-btn{
  border:0;
  border-radius:18px;
  padding:14px 28px;
  background:linear-gradient(180deg,#fff7b8,#ffd327);
  color:var(--ink);
  font-weight:1000;
  font-size:1.1rem;
  cursor:pointer;
  box-shadow:0 8px 0 rgba(217,145,0,.50),var(--soft-shadow);
}
.action-btn[hidden]{display:none}
.shape-answer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:104px}
.shape-answer span{font-size:2.2rem;line-height:1}
.shape-answer small{font-size:.72rem;font-weight:1000;text-transform:uppercase}
.shape-circle span{color:#f472b6}.shape-square span{color:#60a5fa}.shape-triangle span{color:#fbbf24}.shape-rectangle span{color:#34d399}


.rocket-row,.number-model{width:100%;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:center}
.rocket-choice{
  min-width:86px;min-height:104px;border:4px solid rgba(255,255,255,.95);border-radius:24px;
  background:linear-gradient(180deg,#fff,#dcfff8);box-shadow:0 8px 0 rgba(0,139,116,.28),var(--soft-shadow);
  color:var(--ink);font-weight:1000;cursor:pointer;
}
.rocket-choice span{display:block;font-size:2.6rem}.rocket-choice small{font-size:1rem}
.rocket-choice.correct{background:linear-gradient(180deg,#dcfff8,#00e0b8)}
.rocket-choice.wrong{background:linear-gradient(180deg,#ffe5ec,#ff477e);color:#fff}
.compact-icons{max-height:170px;overflow:hidden}.compact-icons .compare-icon{font-size:clamp(1.3rem,2.5vw,2.1rem)}