:root {
  --background: #101948;
  --foreground: #182044;
  --card: #ffffff;
  --card-foreground: #182044;
  --primary: #6957e8;
  --primary-foreground: #ffffff;
  --secondary: #fff2b8;
  --secondary-foreground: #3b2f06;
  --muted: #eef0ff;
  --muted-foreground: #66709b;
  --accent: #36c6ae;
  --accent-foreground: #0b3c34;
  --destructive: #d84258;
  --border: #d9def6;
  --input: #cbd2ef;
  --ring: #6c5ce7;
  --radius: 1.35rem;
}

* { box-sizing: border-box; }
.is-hidden { display: none !important; }
html { min-height: 100%; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--foreground);
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  background:
    radial-gradient(circle at 15% 14%, rgba(139, 120, 255, .48), transparent 28rem),
    radial-gradient(circle at 88% 82%, rgba(23, 196, 186, .27), transparent 26rem),
    linear-gradient(145deg, #111946 0%, #26215e 54%, #123d5a 100%);
}
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible { outline: 4px solid #ffd95b; outline-offset: 3px; }

.game-shell { position: relative; isolation: isolate; min-height: 100vh; overflow: hidden; padding: 1.15rem clamp(1rem, 3vw, 2.5rem) 1.6rem; }
.game-shell::before {
  content: ""; position: fixed; inset: 0; z-index: -2; opacity: .6; pointer-events: none;
  background-image: radial-gradient(circle, #fff 0 1.5px, transparent 2px), radial-gradient(circle, #fff 0 1px, transparent 1.5px);
  background-position: 0 0, 37px 49px; background-size: 84px 84px, 104px 104px;
}
.sky-decoration { position: fixed; z-index: -1; width: 19rem; height: 19rem; border: 2px solid rgba(255,255,255,.12); border-radius: 50%; pointer-events: none; }
.sky-decoration::after { content: ""; position: absolute; inset: 2.2rem; border: 1px dashed rgba(255,255,255,.11); border-radius: 50%; }
.sky-one { left: -8rem; bottom: -6rem; }
.sky-two { right: -9rem; top: 10rem; width: 24rem; height: 24rem; }

.topbar { width: min(100%, 1060px); margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; color: white; }
.brand { display: inline-flex; align-items: center; gap: .7rem; border: 0; background: transparent; color: white; font-size: clamp(1.05rem,3vw,1.35rem); font-weight: 900; cursor: pointer; }
.brand-mark { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border-radius: 1rem; color: #252049; background: #ffd95b; box-shadow: 0 6px 0 #d99c2d; font-size: 1.8rem; line-height: 1; }
.topbar-stats { display: flex; align-items: center; gap: .55rem; font-weight: 900; }
.topbar-stats > span, .sound-button { border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.11); backdrop-filter: blur(10px); padding: .55rem .8rem; color: white; }
.sound-button { border-radius: 50%; cursor: pointer; }

.start-card, .play-card, .finish-card { width: min(100%, 930px); margin: 0 auto; border: 2px solid rgba(255,255,255,.8); border-radius: clamp(1.5rem,4vw,2.4rem); background: rgba(255,255,255,.97); box-shadow: 0 24px 80px rgba(3,8,35,.35), 0 8px 0 rgba(18,13,59,.25); }
.start-card { padding: clamp(1.3rem,4vw,2.5rem); }
.intro-row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.eyebrow { color: #6654de; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; font-size: .84rem; }
h1, h2, p { margin-top: 0; }
.intro-row h1 { margin: .35rem 0 .5rem; font-size: clamp(2rem,6vw,3.35rem); line-height: 1; letter-spacing: -.045em; }
.intro-row p { margin-bottom: 0; color: #687098; font-size: 1.08rem; }
.rocket-badge { display: grid; flex: 0 0 auto; width: clamp(5rem,14vw,7.4rem); height: clamp(5rem,14vw,7.4rem); place-items: center; border: 4px solid #fff3ad; border-radius: 2rem; background: #fff8d6; box-shadow: 0 9px 0 #f1c946; font-size: clamp(2.8rem,8vw,4.5rem); transform: rotate(5deg); }

.setup-section { margin-top: 2.2rem; }
.compact-section { margin-top: 1.7rem; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.setup-section h2 { margin-bottom: 1rem; font-size: 1.12rem; }
.text-button { border: 0; background: transparent; color: #6251d8; font-weight: 900; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.table-grid { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: .55rem; }
.table-button { min-width: 0; padding: .72rem .25rem .6rem; border: 2px solid #d8ddf3; border-radius: 1.1rem; color: #445078; background: #f6f7ff; box-shadow: 0 4px 0 #d5daf1; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; }
.table-button:hover { transform: translateY(-2px); }
.table-button span { display: block; font-size: 1.55rem; font-weight: 900; }
.table-button small { font-size: .69rem; font-weight: 800; }
.table-button.is-selected { color: white; border-color: #5f4cdb; background: #6c59e8; box-shadow: 0 5px 0 #4434a9; transform: translateY(-2px); }

.mode-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: .8rem; }
.mode-button { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: .8rem; padding: .9rem 1rem; text-align: left; border: 2px solid #d8ddf3; border-radius: 1.2rem; background: #f7f8ff; color: #333c63; cursor: pointer; }
.mode-button > span { grid-row: 1 / span 2; font-size: 2rem; }
.mode-button strong { font-size: 1rem; }
.mode-button small { color: #747c9f; font-weight: 700; }
.mode-button.is-selected { border-color: #36bda8; background: #e6fbf7; box-shadow: inset 0 0 0 2px #36bda8; }
.start-actions { margin-top: 1.8rem; padding-top: 1.35rem; border-top: 2px dashed #e1e4f4; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.start-actions p { margin: 0; color: #70789c; font-weight: 800; }
.primary-button { border: 0; border-radius: 1.15rem; padding: .95rem 1.35rem; color: white; background: linear-gradient(135deg,#725dec,#5945d3); box-shadow: 0 6px 0 #3e309d; font-size: 1.08rem; font-weight: 900; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #3e309d; }
.primary-button:active { transform: translateY(4px); box-shadow: 0 2px 0 #3e309d; }

.play-card { overflow: hidden; }
.mission-bar { display: grid; grid-template-columns: 6.5rem 1fr 4rem; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 2px solid #eaecf7; background: #f8f8fe; }
.back-button { border: 0; background: transparent; color: #697195; font-weight: 900; cursor: pointer; }
.progress-copy { display: flex; justify-content: space-between; margin-bottom: .4rem; color: #5d668d; font-size: .84rem; font-weight: 900; }
.progress-track { height: .75rem; overflow: hidden; border-radius: 99px; background: #e0e4f5; }
.progress-track div { height: 100%; border-radius: inherit; background: linear-gradient(90deg,#32bea9,#76dd9f); transition: width .35s ease; }
.streak-pill { justify-self: end; min-width: 3.5rem; padding: .55rem .65rem; text-align: center; border-radius: 99px; background: #fff2d7; font-weight: 900; }
.streak-pill.is-hot { animation: pop .35s ease; background: #ffe49b; }
.question-zone { min-height: 31rem; padding: clamp(2rem,6vw,3.5rem); text-align: center; transition: background .2s ease; }
.question-zone.correct { background: linear-gradient(#fff,#f1fff9); }
.question-zone.wrong { background: linear-gradient(#fff,#fff9ec); }
.question-kicker { margin-bottom: 1rem; color: #737b9f; font-weight: 800; }
.sum { display: flex; align-items: center; justify-content: center; gap: clamp(.55rem,3vw,1.3rem); margin-bottom: 2rem; font-size: clamp(3rem,10vw,5.8rem); line-height: 1; letter-spacing: -.05em; }
.sum b { color: #8d95b5; font-size: .62em; }
.answer-blank { display: grid; width: 1.2em; height: 1.2em; place-items: center; border: .09em dashed #b5bce0; border-radius: .28em; color: #6957e8; background: #f2f0ff; }

.answer-grid { width: min(100%,38rem); margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; }
.answer-button { min-height: 5rem; border: 3px solid #d7dcf3; border-radius: 1.25rem; color: #2c355e; background: white; box-shadow: 0 6px 0 #ccd1e9; font-size: clamp(1.65rem,5vw,2.3rem); font-weight: 900; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.answer-button:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 9px 0 #ccd1e9; border-color: #8070e9; }
.answer-button.show-correct { color: #075f50; border-color: #2dbba3; background: #dffbf5; box-shadow: 0 6px 0 #1b8e7a; }
.answer-button.is-muted { opacity: .36; }
.type-form { width: min(100%,30rem); margin: 0 auto; }
.type-form label { display: block; margin-bottom: .6rem; color: #666f94; font-weight: 900; }
.type-row { display: grid; grid-template-columns: 1fr auto; gap: .7rem; }
.type-row input { min-width: 0; border: 3px solid #cdd3ef; border-radius: 1.2rem; padding: .85rem; text-align: center; color: #2b335b; background: white; font-size: 2rem; font-weight: 900; }
.type-row button { border: 0; border-radius: 1.1rem; padding: .8rem 1.1rem; color: white; background: #6552df; box-shadow: 0 5px 0 #4233a3; font-weight: 900; cursor: pointer; }
.type-row button:disabled { opacity: .45; cursor: default; }

.feedback-box { width: min(100%,42rem); margin: 1.5rem auto 0; padding: 1rem; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .9rem; border-radius: 1.3rem; text-align: left; animation: rise .28s ease; }
.feedback-box.good { color: #07594c; background: #dcfaf3; border: 2px solid #32bba4; }
.feedback-box.try-again { color: #745411; background: #fff2cc; border: 2px solid #edbb3e; }
.feedback-icon { font-size: 2rem; }
.feedback-box strong { display: block; font-size: 1.1rem; }
.feedback-box p { margin: .2rem 0 0; font-weight: 800; }
.feedback-box button { border: 0; border-radius: .9rem; padding: .7rem .9rem; color: white; background: #383f69; font-weight: 900; cursor: pointer; }
.helper-row { padding: 1rem 1.25rem; text-align: center; border-top: 2px solid #eff0f8; }
.cheat-toggle { border: 0; background: transparent; color: #6654d9; font-weight: 900; cursor: pointer; }
.cheat-sheet { padding: 1.2rem; border-top: 2px dashed #dfe3f5; background: #f7f8ff; }
.cheat-sheet h2 { text-align: center; font-size: 1.15rem; }
.cheat-columns { display: grid; grid-template-columns: repeat(auto-fit,minmax(10rem,1fr)); gap: .8rem; max-height: 25rem; overflow: auto; }
.cheat-table { display: grid; gap: .25rem; padding: .9rem; border: 2px solid #dfe3f5; border-radius: 1rem; background: white; }
.cheat-table strong { margin-bottom: .3rem; color: #6251d8; }
.cheat-table span { font-size: .9rem; color: #5b648c; }

.finish-card { position: relative; overflow: hidden; padding: clamp(2rem,6vw,4rem); text-align: center; }
.finish-medal { position: relative; z-index: 1; display: grid; width: 7rem; height: 7rem; margin: 0 auto 1.2rem; place-items: center; border-radius: 50%; background: #fff2b5; box-shadow: 0 8px 0 #e3b934; font-size: 4rem; animation: float 2.2s ease-in-out infinite; }
.finish-card h1 { position: relative; margin: .5rem 0 .75rem; font-size: clamp(2rem,6vw,3.2rem); letter-spacing: -.04em; }
.finish-message { max-width: 35rem; margin: 0 auto 1.8rem; color: #697196; font-size: 1.08rem; }
.result-stats { position: relative; display: grid; grid-template-columns: repeat(3,1fr); gap: .8rem; max-width: 38rem; margin: 0 auto 2rem; }
.result-stats div { display: grid; padding: 1rem; border: 2px solid #e1e4f3; border-radius: 1.2rem; background: #f8f8fe; }
.result-stats span { font-size: 1.5rem; }
.result-stats strong { font-size: 1.8rem; }
.result-stats small { color: #727a9d; font-weight: 700; }
.finish-actions { position: relative; display: flex; justify-content: center; gap: .8rem; }
.secondary-button { border: 2px solid #d4d8ed; border-radius: 1.15rem; padding: .9rem 1.2rem; color: #525b84; background: white; font-weight: 900; cursor: pointer; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; width: .55rem; height: 1rem; border-radius: .2rem; background: #f6bd3c; transform: rotate(23deg); }
.confetti i:nth-child(3n) { background: #35bba5; transform: rotate(68deg); }
.confetti i:nth-child(3n + 1) { background: #7b68eb; transform: rotate(115deg); }
.confetti i:nth-child(1) { left: 8%; top: 12%; } .confetti i:nth-child(2) { left: 16%; top: 29%; }
.confetti i:nth-child(3) { left: 23%; top: 9%; } .confetti i:nth-child(4) { left: 32%; top: 18%; }
.confetti i:nth-child(5) { left: 44%; top: 7%; } .confetti i:nth-child(6) { left: 58%; top: 12%; }
.confetti i:nth-child(7) { left: 70%; top: 7%; } .confetti i:nth-child(8) { left: 82%; top: 19%; }
.confetti i:nth-child(9) { left: 92%; top: 10%; } .confetti i:nth-child(10) { left: 7%; top: 67%; }
.confetti i:nth-child(11) { left: 18%; top: 82%; } .confetti i:nth-child(12) { left: 29%; top: 70%; }
.confetti i:nth-child(13) { left: 46%; top: 88%; } .confetti i:nth-child(14) { left: 61%; top: 76%; }
.confetti i:nth-child(15) { left: 73%; top: 91%; } .confetti i:nth-child(16) { left: 85%; top: 73%; }
.confetti i:nth-child(17) { left: 94%; top: 86%; } .confetti i:nth-child(18) { left: 53%; top: 25%; }
footer { width: min(100%,930px); margin: 1.2rem auto 0; text-align: center; color: rgba(255,255,255,.7); font-size: .82rem; font-weight: 700; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes pop { 50% { transform: scale(1.14); } }
@keyframes float { 50% { transform: translateY(-7px) rotate(3deg); } }

@media (max-width: 760px) {
  .table-grid { grid-template-columns: repeat(5,1fr); }
  .answer-grid { grid-template-columns: repeat(2,1fr); }
  .mission-bar { grid-template-columns: auto 1fr auto; gap: .6rem; }
  .back-button { font-size: 0; }
  .back-button::before { content: "←"; font-size: 1.35rem; }
  .question-zone { min-height: 30rem; }
  .feedback-box { grid-template-columns: auto 1fr; }
  .feedback-box button { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .game-shell { padding: .75rem .7rem 1rem; }
  .topbar-stats > span:nth-child(2) { display: none; }
  .topbar-stats > span, .sound-button { padding: .48rem .62rem; }
  .intro-row { align-items: flex-start; gap: .7rem; }
  .rocket-badge { border-radius: 1.3rem; }
  .section-heading { align-items: flex-start; }
  .table-grid { gap: .42rem; }
  .table-button { border-radius: .85rem; }
  .table-button span { font-size: 1.3rem; }
  .mode-grid { grid-template-columns: 1fr; }
  .start-actions { align-items: stretch; flex-direction: column; }
  .start-actions .primary-button { width: 100%; }
  .question-zone { padding: 2rem 1rem; }
  .sum { margin-bottom: 1.6rem; }
  .answer-button { min-height: 4.5rem; }
  .type-row { grid-template-columns: 1fr; }
  .type-row button { min-height: 3.2rem; }
  .result-stats { gap: .45rem; }
  .result-stats div { padding: .7rem .25rem; }
  .result-stats small { font-size: .7rem; }
  .finish-actions { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}