:root {
  color-scheme: light;
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", Arial, sans-serif;
  --ink: #244d49;
  --muted: #6b817d;
  --paper: #fffdf7;
  --line: #ddd4b8;
  --green: #4d9b76;
  --green-dark: #327457;
  --gold: #efba4e;
  --violet: #8c79bd;
  --blue: #5799c5;
  --coral: #e87468;
  --navy: #203b59;
  --shadow: 0 20px 46px rgba(44, 68, 63, .15);
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: #f2f7eb; }
body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  background:
    radial-gradient(circle at 7% 9%, rgba(239, 186, 78, .2) 0 130px, transparent 132px),
    radial-gradient(circle at 94% 13%, rgba(115, 176, 151, .16) 0 170px, transparent 172px),
    linear-gradient(145deg, #f1f8eb, #fffaf1 54%, #f0eef8);
}

.space-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .22;
  background-image: radial-gradient(circle, rgba(63, 108, 93, .18) 1.2px, transparent 1.4px);
  background-size: 35px 35px;
  pointer-events: none;
}

button { color: inherit; font: inherit; }
button:not(:disabled) { cursor: pointer; }
button:disabled { cursor: default; }
button:focus-visible { outline: 4px solid rgba(239, 186, 78, .8); outline-offset: 4px; }
h1, h2, h3, p { margin-top: 0; }

.app {
  width: min(1120px, calc(100% - 32px));
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 0 54px;
}

.topbar, .brand, .topbar-actions, .hero-actions, .section-heading, .route-card-head,
.progress-row, .palette-heading, .game-actions, .feedback-card, .result-actions, .atlas-heading {
  display: flex;
  align-items: center;
}

.topbar { min-height: 68px; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.brand { gap: 12px; padding: 0; text-align: left; background: transparent; border: 0; }
.brand-mark {
  display: grid; width: 57px; height: 57px; place-items: center; font-size: 30px;
  background: #fff2c8; border: 3px solid #dec998; border-radius: 19px;
  box-shadow: 0 8px 17px rgba(58, 79, 70, .13); rotate: -4deg;
}
.brand strong, .brand small { display: block; }
.brand strong { font-size: 24px; font-weight: 900; }
.brand small { margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.topbar-actions { gap: 9px; }
.sound-button, .back-button, .secondary-button, .text-button {
  min-height: 49px; color: var(--ink); font-weight: 900; background: rgba(255, 253, 247, .95);
  border: 2px solid var(--line); border-radius: 17px;
}
.sound-button { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 13px; }
.back-button { width: 49px; padding: 0; font-size: 22px; }
.secondary-button { padding: 0 18px; }
.text-button { padding: 0 18px; background: transparent; }
.sound-button:hover, .back-button:hover, .secondary-button:hover, .text-button:hover { border-color: #77a98e; }

.primary-button {
  display: inline-flex; min-height: 54px; align-items: center; justify-content: center; gap: 9px;
  padding: 0 22px; color: white; font-weight: 900; background: var(--green); border: 0;
  border-radius: 17px; box-shadow: 0 8px 0 var(--green-dark);
}
.primary-button:hover { background: #438f6a; }
.primary-button:active, .secondary-button:active, .text-button:active { translate: 0 2px; }
.primary-button.compact { min-height: 45px; margin-left: auto; padding-inline: 18px; box-shadow: 0 5px 0 var(--green-dark); }

.eyebrow { margin: 0 0 8px; color: #38775e; font-family: Georgia, serif; font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; }
.hero {
  display: grid; min-height: 500px; align-items: center; grid-template-columns: 1.03fr .97fr; gap: 34px;
  padding: clamp(36px, 5vw, 62px); overflow: hidden; background: rgba(255, 253, 247, .97);
  border: 3px solid var(--line); border-radius: 46px; box-shadow: var(--shadow);
}
.hero h1 { max-width: 620px; margin-bottom: 18px; font-size: clamp(47px, 6vw, 72px); font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.hero-copy > p:not(.eyebrow) { max-width: 580px; margin-bottom: 26px; color: var(--muted); font-size: 18px; font-weight: 800; line-height: 1.5; }
.hero-actions { flex-wrap: wrap; gap: 12px; }

.hero-system {
  position: relative; width: min(100%, 430px); aspect-ratio: 1; margin-inline: auto; overflow: hidden;
  background: radial-gradient(circle at 50% 48%, #355b76 0, #203b59 45%, #172d47 100%);
  border: 8px solid white; border-radius: 42px; box-shadow: 0 22px 40px rgba(35, 58, 78, .25);
}
.hero-system::before { position: absolute; inset: 0; content: ""; background-image: radial-gradient(circle, rgba(255,255,255,.72) 1px, transparent 1.4px); background-size: 31px 28px; opacity: .65; }
.hero-sun { position: absolute; z-index: 4; top: 50%; left: 50%; translate: -50% -50%; display: grid; width: 83px; height: 83px; place-items: center; color: #fff4a8; font-size: 65px; filter: drop-shadow(0 0 19px rgba(255, 208, 76, .75)); }
.orbit { position: absolute; top: 50%; left: 50%; translate: -50% -50%; border: 1.5px solid rgba(255,255,255,.38); border-radius: 50%; }
.orbit-one { width: 124px; height: 72px; }.orbit-two { width: 205px; height: 126px; }.orbit-three { width: 292px; height: 190px; }.orbit-four { width: 380px; height: 266px; }
.hero-planet { position: absolute; z-index: 3; display: block; border-radius: 50%; box-shadow: inset -5px -5px 8px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,255,.12); }
.hp-mercury { top: 45%; left: 63%; width: 14px; height: 14px; background: #b7afa4; }
.hp-earth { top: 32%; left: 24%; width: 26px; height: 26px; background: radial-gradient(circle at 65% 35%, #78bb6e 0 19%, transparent 20%), #4f9ed2; }
.hp-jupiter { right: 12%; bottom: 24%; width: 49px; height: 49px; background: repeating-linear-gradient(#e7c18c 0 7px, #b67858 8px 12px, #f1d7a9 13px 17px); }
.hp-saturn { bottom: 12%; left: 20%; width: 36px; height: 36px; background: #d9b76f; }
.hp-saturn::after { position: absolute; inset: 11px -14px; content: ""; border: 5px solid rgba(241, 220, 160, .9); border-radius: 50%; rotate: -18deg; }
.system-note { position: absolute; right: 18px; bottom: 18px; z-index: 6; padding: 10px 13px; color: var(--navy); text-align: right; background: rgba(255,255,255,.9); border-radius: 14px; }
.system-note b, .system-note small { display: block; }.system-note small { margin-top: 2px; font-size: 10px; font-weight: 800; }

.memory-note { display: grid; align-items: center; grid-template-columns: 57px 1fr; gap: 14px; margin-top: 18px; padding: 16px 20px; background: #fff3cf; border: 2px solid #e8ce82; border-radius: 23px; }
.memory-note > span { display: grid; width: 52px; height: 52px; place-items: center; font-size: 29px; background: white; border-radius: 16px; }
.memory-note p { margin: 0; }.memory-note strong, .memory-note small { display: block; }.memory-note small { margin-top: 4px; color: #766b50; font-weight: 800; line-height: 1.4; }

.routes-section { margin-top: 48px; }
.section-heading { justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.section-heading h2 { max-width: 700px; margin: 0; font-size: clamp(34px, 4.5vw, 50px); line-height: 1.05; }
.section-heading > p { max-width: 410px; margin: 0; color: var(--muted); font-size: 14px; font-weight: 800; text-align: right; }
.routes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.route-card { min-height: 270px; padding: 23px; text-align: left; background: var(--paper); border: 3px solid var(--line); border-radius: 29px; box-shadow: 0 8px 0 #d9d3bd; transition: translate .18s ease, border-color .18s ease; }
.route-card:hover { border-color: #76a88b; translate: 0 -4px; }
.route-card-head { justify-content: space-between; margin-bottom: 22px; }
.route-icon { display: grid; width: 70px; height: 70px; place-items: center; font-size: 37px; background: #fff0c4; border: 5px solid #eed994; border-radius: 23px; rotate: -3deg; }
.route-card[data-color="violet"] .route-icon { background: #ebe5f8; border-color: #d8cdf0; }
.route-card[data-color="blue"] .route-icon { background: #e1eff7; border-color: #c5deec; }
.route-card em { color: var(--muted); font-size: 12px; font-style: normal; font-weight: 900; }
.route-card > strong { display: block; margin-bottom: 8px; font-size: 24px; }
.route-card > small { display: block; min-height: 62px; margin-bottom: 18px; color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.45; }
.progress-track { display: block; width: 100%; height: 11px; overflow: hidden; background: #ebe7d9; border-radius: 999px; }
.progress-track > span { display: block; height: 100%; background: var(--gold); border-radius: inherit; }
[data-color="violet"] .progress-track > span { background: var(--violet); }[data-color="blue"] .progress-track > span { background: var(--blue); }

.game-shell, .atlas-shell { padding: clamp(24px, 4vw, 45px); background: var(--paper); border: 3px solid var(--line); border-radius: 42px; box-shadow: var(--shadow); }
.progress-row { justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.progress-row > div > strong, .progress-row > div > small { display: block; }.progress-row > div > strong { font-size: 18px; }.progress-row > div > small { max-width: 720px; margin-top: 5px; color: var(--muted); font-weight: 800; line-height: 1.4; }
.round-badge { display: grid; min-width: 82px; height: 82px; place-items: center; align-content: center; color: white; font-family: Georgia, serif; font-size: 29px; font-weight: 900; background: var(--navy); border: 6px solid #cfe0e7; border-radius: 50%; }
.round-badge small { display: block; font-family: inherit; font-size: 10px; }
.mission { max-width: 850px; margin: 0 auto 20px; text-align: center; }.mission h1 { margin-bottom: 8px; font-size: clamp(34px, 5vw, 54px); letter-spacing: -.035em; }.mission p { margin: 0; color: var(--muted); font-weight: 800; line-height: 1.45; }

.orbit-board { display: grid; align-items: stretch; grid-template-columns: 112px 1fr; gap: 14px; padding: 19px; overflow: hidden; background: linear-gradient(145deg, #294c69, #1b344f); border: 5px solid #d6e2e3; border-radius: 31px; box-shadow: inset 0 0 35px rgba(7, 21, 37, .25); }
.sun-card, .orbit-slot { position: relative; display: grid; min-height: 145px; place-items: center; align-content: center; gap: 4px; text-align: center; border-radius: 22px; }
.sun-card { color: #624b1f; background: #fff1bc; border: 3px solid #ebc75f; }.sun-card > span { font-size: 55px; line-height: 1; }.sun-card small { font-weight: 900; }
.orbit-slots { display: grid; grid-template-columns: repeat(var(--slot-count), minmax(72px, 1fr)); gap: 8px; }
.orbit-slot { min-width: 0; color: white; background: rgba(255,255,255,.08); border: 2px dashed rgba(255,255,255,.42); }
.orbit-slot.is-filled { background: rgba(255,255,255,.15); border-style: solid; border-color: rgba(255,255,255,.65); }
.orbit-slot > strong { max-width: 100%; padding-inline: 3px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
.slot-number { position: absolute; top: 7px; left: 8px; display: grid; width: 24px; height: 24px; place-items: center; color: var(--navy); font-size: 11px; font-weight: 900; background: white; border-radius: 50%; }
.empty-orbit { display: grid; width: 54px; height: 54px; place-items: center; color: rgba(255,255,255,.72); font-size: 28px; font-weight: 900; border: 2px solid rgba(255,255,255,.45); border-radius: 50%; }

.palette-heading { justify-content: space-between; gap: 15px; margin: 24px 0 12px; }.palette-heading > strong { font-size: 18px; }.palette-heading > small { color: var(--muted); font-weight: 900; }
.planet-palette { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.planet-card { display: flex; min-height: 94px; align-items: center; gap: 11px; padding: 12px; text-align: left; background: white; border: 3px solid #d9d5c7; border-radius: 22px; box-shadow: 0 6px 0 #d8d2bc; transition: translate .15s ease, border-color .15s ease; }
.planet-card:hover:not(:disabled) { border-color: #6ca085; translate: 0 -2px; }.planet-card:disabled { opacity: .42; box-shadow: none; }.planet-card.is-wrong { background: #fff0ed; border-color: #e29389; animation: nudge .24s ease 2; }
.planet-card strong, .planet-card small { display: block; }.planet-card strong { font-size: 15px; }.planet-card small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 800; }
@keyframes nudge { 50% { translate: 5px 0; } }

.planet-dot { position: relative; z-index: 1; display: grid; width: 46px; min-width: 46px; height: 46px; place-items: center; color: rgba(255,255,255,.88); font-family: Georgia, serif; font-size: 18px; font-weight: 900; background: #aaa; border: 3px solid rgba(255,255,255,.55); border-radius: 50%; box-shadow: inset -7px -7px 9px rgba(0,0,0,.18), 0 5px 8px rgba(28,47,55,.18); }
.planet-dot.is-large { width: 76px; min-width: 76px; height: 76px; font-size: 27px; }
.planet-mercury { background: radial-gradient(circle at 35% 30%, #d8d1c6 0 12%, transparent 13%), #9d978f; }
.planet-venus { color: #7a5423; background: repeating-linear-gradient(18deg, #e5a94f 0 7px, #f1d087 8px 13px); }
.planet-earth { background: radial-gradient(circle at 67% 31%, #76bb6f 0 18%, transparent 19%), radial-gradient(circle at 35% 64%, #5d9f61 0 15%, transparent 16%), #4a9bcf; }
.planet-mars { background: radial-gradient(circle at 35% 35%, #b9503e 0 12%, transparent 13%), #d66d50; }
.planet-jupiter { color: #704830; background: repeating-linear-gradient(#eccb98 0 7px, #b97756 8px 12px, #f3ddb7 13px 18px); }
.planet-saturn { color: #72552a; background: #d9b76f; }.planet-saturn::after { position: absolute; z-index: -1; inset: 13px -12px; content: ""; border: 5px solid #e8d196; border-radius: 50%; rotate: -16deg; }
.planet-uranus { color: #316c78; background: #8fd4d8; }.planet-neptune { background: radial-gradient(circle at 35% 35%, #709bdc 0 15%, transparent 16%), #315da9; }

.game-actions { justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.feedback-card { gap: 14px; min-height: 84px; margin-top: 19px; padding: 15px 17px; background: #f3f6f2; border: 2px solid #d7ded5; border-radius: 22px; }
.feedback-card[data-kind="error"] { background: #fff0ed; border-color: #e5a59c; }.feedback-card[data-kind="hint"] { background: #fff6d6; border-color: #e7cc74; }.feedback-card[data-kind="success"], .feedback-card[data-kind="good"] { background: #e8f5ea; border-color: #9fc9aa; }
.feedback-card > span { display: grid; min-width: 50px; height: 50px; place-items: center; font-size: 26px; background: white; border-radius: 15px; }.feedback-card p { flex: 1; margin: 0; }.feedback-card strong, .feedback-card small { display: block; }.feedback-card small { margin-top: 4px; color: var(--muted); font-weight: 800; line-height: 1.4; }

.result-card { max-width: 850px; margin: 55px auto 0; padding: clamp(34px, 6vw, 64px); text-align: center; background: var(--paper); border: 3px solid var(--line); border-radius: 43px; box-shadow: var(--shadow); }
.result-system { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; padding: 13px; color: white; font-size: 25px; background: var(--navy); border-radius: 22px; }.result-system span:first-child { color: #ffd86d; font-size: 40px; }
.result-card h1 { margin-bottom: 12px; font-size: clamp(40px, 6vw, 62px); line-height: 1.03; }.result-card > p:not(.eyebrow) { color: var(--muted); font-size: 17px; font-weight: 800; line-height: 1.5; }
.stars { margin: 17px 0; font-size: 48px; letter-spacing: 7px; }.stars span { color: #ddd8c8; }.stars .earned { color: var(--gold); text-shadow: 0 4px 0 #cc9233; }
.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 24px 0; }.result-stats span { padding: 14px; background: #eef5eb; border: 2px solid #d6e2d2; border-radius: 18px; }.result-stats b, .result-stats small { display: block; }.result-stats b { font-size: 25px; }.result-stats small { margin-top: 4px; color: var(--muted); font-weight: 800; }.result-actions { justify-content: center; flex-wrap: wrap; gap: 13px; }

.atlas-heading { justify-content: space-between; gap: 25px; margin-bottom: 22px; }.atlas-heading h1 { margin-bottom: 8px; font-size: clamp(38px, 5vw, 58px); }.atlas-heading p { max-width: 760px; margin: 0; color: var(--muted); font-weight: 800; line-height: 1.45; }.atlas-heading > strong { min-width: 90px; padding: 13px 16px; text-align: center; background: #e4f0e5; border: 2px solid #bcd6bf; border-radius: 18px; }
.atlas-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; }.atlas-card { position: relative; display: grid; min-height: 185px; align-items: center; grid-template-columns: 88px 1fr; gap: 16px; padding: 21px; background: #eef5ee; border: 2px solid #bed4c1; border-radius: 25px; }.atlas-card.is-locked { color: #89918c; background: #efeee7; border-color: #d8d4c7; }.atlas-number { position: absolute; top: 11px; right: 13px; color: var(--muted); font-size: 12px; font-weight: 900; }.atlas-card strong, .atlas-card small { display: block; }.atlas-card strong { font-size: 21px; }.atlas-card small { margin-top: 3px; color: var(--muted); font-weight: 800; }.atlas-card p { margin: 10px 0 0; color: var(--muted); font-size: 13px; font-weight: 800; line-height: 1.4; }.locked-planet { display: grid; width: 76px; height: 76px; place-items: center; font-size: 30px; font-weight: 900; background: #ddd9ce; border-radius: 50%; }

.qa-report { max-width: 860px; margin: 35px auto; padding: clamp(25px, 4vw, 44px); background: white; border: 3px solid #b8d5bf; border-radius: 33px; box-shadow: var(--shadow); }.qa-report.has-failures { border-color: #e4a198; }.qa-report h1 { margin-bottom: 8px; font-size: clamp(38px, 5vw, 58px); }.qa-summary { color: var(--muted); font-weight: 900; }.qa-report ul { display: grid; gap: 8px; margin: 24px 0; padding: 0; list-style: none; }.qa-report li { display: grid; align-items: center; grid-template-columns: 30px 1fr auto; gap: 10px; padding: 11px 13px; background: #f2f8f1; border-radius: 13px; }.qa-report li.fail { background: #fff0ed; }.qa-report li > span { display: grid; width: 25px; height: 25px; place-items: center; color: white; font-weight: 900; background: var(--green); border-radius: 50%; }.qa-report li.fail > span { background: var(--coral); }.qa-report li small { color: var(--muted); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }.hero-copy { text-align: center; }.hero-copy > p:not(.eyebrow) { margin-inline: auto; }.hero-actions { justify-content: center; }.hero-system { width: min(520px, 100%); }
  .routes-grid { grid-template-columns: 1fr; }.route-card { min-height: 0; }.route-card > small { min-height: 0; }
  .orbit-board { grid-template-columns: 1fr; }.sun-card { min-height: 100px; grid-template-columns: auto auto; gap: 10px; }.sun-card > span { font-size: 46px; }.sun-card small { display: none; }
  .orbit-slots { grid-template-columns: repeat(4, minmax(72px, 1fr)); }.planet-palette { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .app { width: min(1120px, calc(100% - 20px)); padding-top: 10px; }.topbar { min-height: 58px; margin-bottom: 12px; }.brand-mark { width: 49px; height: 49px; font-size: 25px; }.brand strong { font-size: 18px; }.brand small { display: none; }.sound-button { width: 49px; padding: 0; justify-content: center; }.sound-button span:last-child { display: none; }
  .hero { padding: 27px 20px; border-radius: 32px; }.hero h1 { font-size: clamp(40px, 12vw, 52px); }.hero-copy > p:not(.eyebrow) { font-size: 16px; }.hero-system { max-width: 360px; border-width: 6px; border-radius: 30px; }
  .memory-note { grid-template-columns: 48px 1fr; padding: 13px; }.memory-note > span { width: 45px; height: 45px; }
  .section-heading, .atlas-heading { align-items: flex-start; flex-direction: column; }.section-heading > p { text-align: left; }.routes-section { margin-top: 35px; }
  .game-shell, .atlas-shell { margin-inline: -6px; padding: 21px 15px; border-radius: 30px; }.progress-row { align-items: flex-start; }.round-badge { min-width: 68px; height: 68px; font-size: 24px; }
  .mission h1 { font-size: 35px; }.orbit-board { padding: 12px; border-width: 4px; }.orbit-slots { grid-template-columns: repeat(2, minmax(80px, 1fr)); }.orbit-slot { min-height: 126px; }
  .planet-palette { grid-template-columns: 1fr; }.planet-card { min-height: 82px; }.palette-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .game-actions { align-items: stretch; flex-direction: column; }.feedback-card { align-items: flex-start; flex-wrap: wrap; }.feedback-card .compact { width: 100%; margin-left: 0; }
  .atlas-grid { grid-template-columns: 1fr; }.atlas-card { grid-template-columns: 76px 1fr; padding: 18px; }.result-stats { grid-template-columns: 1fr; }.result-actions { align-items: stretch; flex-direction: column; }
  .qa-report li { grid-template-columns: 30px 1fr; }.qa-report li small { grid-column: 2; }
}

@media (max-width: 410px) {
  .hero-actions > * { width: 100%; }.hero h1 { font-size: 40px; }.hero-system { max-width: 310px; }.system-note { right: 10px; bottom: 10px; }
  .route-card { padding: 20px; }.route-card > strong { font-size: 22px; }.orbit-slot { min-height: 118px; }.planet-dot { width: 43px; min-width: 43px; height: 43px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
.qa-actions { display: flex; flex-wrap: wrap; gap: 12px; }