@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }

:root {
  --navy: #1f2a5a; --navy2: #141d55; --deep: #0d1442; --ink: #1f2a5a; --ink2: #5a648f;
  --sky1: #2a3a9a; --white: #ffffff; --paper: #f6f8ff; --line: #1f2a5a;
  --yellow: #ffd23f; --yellow-d: #e0a800; --blue: #4f8cff; --cyan: #2ec5e8; --green: #3dcc6e; --orange: #ff7a59; --pink: #ff5a7a; --purple: #8b6cff;
  --r: 24px; --pop: 0 6px 0 rgba(8, 12, 46, .55);
  --font: "Nunito", "Trebuchet MS", system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html { background: var(--deep); }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font); font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--ink);
  background: radial-gradient(900px 600px at 80% -10%, #3c4fd0 0%, transparent 60%), radial-gradient(800px 500px at -10% 110%, #6a3fc4 0%, transparent 55%), linear-gradient(180deg, var(--navy2), var(--deep));
  background-attachment: fixed; overflow-x: hidden;
}
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible { outline: 4px solid var(--yellow); outline-offset: 3px; }
a { color: var(--blue); }
.ic { width: 1.4em; height: 1.4em; flex: none; display: inline-block; vertical-align: middle; }
.ic.tiny { width: 18px; height: 18px; }
.sticker { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 6px rgba(5, 8, 40, .35)); }
.sticker svg, .sticker .ic { display: block; width: 100%; height: 100%; }

/* sky */
.sky { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sky div { position: absolute; inset: -40%; background-repeat: repeat; animation: drift 160s linear infinite; }
.sky .s1 { background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1.5px 1.5px at 140px 90px, #fff, transparent), radial-gradient(2px 2px at 220px 170px, #ffe9a8, transparent), radial-gradient(1.5px 1.5px at 80px 220px, #fff, transparent); background-size: 260px 260px; opacity: .55; }
.sky .s2 { background-image: radial-gradient(2.5px 2.5px at 60px 100px, #fff, transparent), radial-gradient(2px 2px at 320px 50px, #ffe9a8, transparent); background-size: 400px 400px; opacity: .45; animation-duration: 240s; }
@keyframes drift { to { transform: translate(140px, 70px); } }

/* top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: rgba(13, 20, 66, .82); backdrop-filter: blur(8px); }
.brand { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 900; font-size: 21px; letter-spacing: .3px; }
.brand-ic { width: 34px; height: 34px; }
.top-actions { display: flex; align-items: center; gap: 8px; }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 3px solid var(--line); display: grid; place-items: center; box-shadow: 0 3px 0 rgba(8, 12, 46, .5); }
.icon-btn .ic { width: 26px; height: 26px; }
.lang { display: flex; background: #fff; border: 3px solid var(--line); border-radius: 999px; padding: 3px; box-shadow: 0 3px 0 rgba(8, 12, 46, .5); }
.lang button { padding: 6px 12px; border-radius: 999px; font-weight: 900; font-size: 15px; color: var(--ink2); }
.lang button.on { background: var(--yellow); color: var(--navy); }

main { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; padding: 10px 16px 30px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 12px 28px; border-radius: 999px; font-weight: 900; font-size: 21px; border: 3px solid var(--line); box-shadow: var(--pop); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(8, 12, 46, .55); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn .ic { width: 26px; height: 26px; }
.btn small { font-weight: 700; font-size: 14px; opacity: .8; }
.btn-go { background: var(--yellow); color: var(--navy); }
.btn-alt { background: #fff; color: var(--navy); }
.btn-night { background: var(--navy); color: #fff; border-color: #fff; flex: 1; max-width: 320px; }
.btn-night .ic { width: 30px; height: 30px; }
.btn-play { font-size: 30px; min-height: 76px; padding: 14px 52px; background: var(--yellow); color: var(--navy); }
.btn-play .ic { width: 32px; height: 32px; }
.text-btn { color: var(--blue); font-weight: 800; text-decoration: underline; font-size: 16px; margin-top: 4px; }
.action-row { display: flex; gap: 12px; justify-content: center; align-items: center; margin-top: 16px; }
.action-row.wrap { flex-wrap: wrap; }
.mic { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 8px 18px; border-radius: 999px; background: #fff; border: 3px solid var(--line); font-weight: 900; box-shadow: var(--pop); }
.mic .ic { width: 28px; height: 28px; }
.mic.round { width: 64px; height: 64px; padding: 0; justify-content: center; border-radius: 50%; }
.mic.round .mic-t { display: none; }
.mic.small { min-height: 46px; font-size: 16px; margin: 12px auto 0; display: flex; width: max-content; }
.mic.listening { background: var(--pink); color: #fff; animation: pulse 1s ease-in-out infinite; }
.mic.nosupport { opacity: .5; }
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(255, 90, 122, .3), var(--pop); } }

/* tags */
.tag-live, .tag-arch { font-style: normal; font-size: 11px; font-weight: 900; letter-spacing: .6px; padding: 3px 8px; border-radius: 8px; vertical-align: middle; white-space: nowrap; }
.tag-live { background: var(--pink); color: #fff; }
.tag-arch { background: #e4e8fb; color: var(--ink2); }
.src { display: inline-block; font-size: 13px; font-weight: 700; color: var(--ink2); margin-top: 6px; }
.eyebrow { margin: 0 0 4px; font-size: 14px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; color: var(--blue); }
.note { font-size: 14px; color: var(--ink2); font-weight: 600; }
.blink { animation: blink 1s infinite; } @keyframes blink { 50% { opacity: .25; } }

/* ---------- title ---------- */
.title-wrap { text-align: center; padding-top: 4px; }
.hero { position: relative; height: 300px; max-width: 520px; margin: 0 auto; }
.hero > div { position: absolute; }
.hero-sun { width: 120px; left: 50%; top: 4px; transform: translateX(-50%); }
.hero-sun .s-rays { animation: spin 30s linear infinite; transform-origin: 60px 60px; }
.hero-moon { width: 74px; left: 6%; top: 90px; animation: float 5s ease-in-out infinite; }
.hero-mars { width: 64px; right: 6%; top: 60px; animation: float 6s ease-in-out infinite .6s; }
.hero-rocket { width: 72px; right: 14%; top: 140px; transform: rotate(18deg); animation: float 4s ease-in-out infinite .3s; }
.hero-nova { width: 140px; left: 50%; bottom: -6px; transform: translateX(-62%); }
.hero-kiko { width: 92px; left: 14%; bottom: 0; }
@keyframes float { 50% { translate: 0 -10px; } }
@keyframes spin { to { transform: rotate(360deg); } }
.logo { margin: 8px 0 0; font-weight: 900; font-size: clamp(52px, 13vw, 96px); line-height: 1; letter-spacing: 2px; color: #fff; -webkit-text-stroke: 10px var(--navy); paint-order: stroke fill; text-shadow: 0 8px 0 rgba(8, 12, 46, .6); }
.logo .o2 { color: var(--yellow); }
.tagline { color: #fff; font-size: clamp(18px, 4.6vw, 24px); font-weight: 800; margin: 10px 0 24px; }
.live-chip { margin: 24px auto 0; display: flex; width: max-content; gap: 8px; align-items: center; background: #fff; border: 3px solid var(--line); padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--ink); box-shadow: var(--pop); max-width: 100%; }
.live-chip .ic { width: 22px; height: 22px; }
.live-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); animation: blink 1s infinite; }
.title-links { display: flex; justify-content: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.link-card { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 18px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 800; border: 2px solid rgba(255, 255, 255, .35); }
.link-card .ic { width: 28px; height: 28px; }

/* ---------- characters ---------- */
.kiko .k-bob, .nova .n-bob { animation: bob 3s ease-in-out infinite; }
.kiko.wave .k-arm { animation: wave 1.2s ease-in-out infinite; transform-origin: 88px 104px; }
.nova .n-arm { animation: wave 1.4s ease-in-out infinite; transform-origin: 100px 104px; }
.kiko .k-light { animation: blink 2s infinite; }
.speaking .kiko .k-mouth { animation: talk .22s ease-in-out infinite alternate; transform-origin: 60px 72px; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes wave { 50% { transform: rotate(-24deg); } }
@keyframes talk { to { transform: scaleY(2.4); } }

/* ---------- choose base ---------- */
.guide { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.guide-kiko { width: 86px; flex: none; }
.speech { position: relative; background: #fff; border: 3px solid var(--line); border-radius: 22px; padding: 14px 18px; font-size: 21px; font-weight: 800; box-shadow: var(--pop); }
.speech::before { content: ""; position: absolute; left: -14px; top: 26px; border: 12px solid transparent; border-right-color: var(--line); border-left: 0; }
.speech::after { content: ""; position: absolute; left: -9px; top: 28px; border: 10px solid transparent; border-right-color: #fff; border-left: 0; }
.site-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.site-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; background: #fff; border: 4px solid var(--line); border-radius: 28px; padding: 18px 14px 16px; box-shadow: var(--pop); transition: transform .15s; }
.site-card:hover { transform: translateY(-3px); }
.site-card.sel { background: #fff8d6; box-shadow: 0 0 0 6px var(--yellow), var(--pop); }
.site-planet { width: 110px; height: 110px; margin: 6px 0 4px; }
.site-card h2 { margin: 0 0 10px; font-size: 32px; font-weight: 900; }
.pill { position: static; margin-bottom: 4px; font-size: 13px; font-weight: 900; padding: 4px 10px; border-radius: 999px; border: 2px solid var(--line); }
.pill.easy { background: #c9f7d8; } .pill.hard { background: #ffd2da; }
.sel-check { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; opacity: 0; transition: opacity .2s; }
.site-card.sel .sel-check { opacity: 1; } .sel-check .ic { width: 100%; height: 100%; }
.site-facts { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; gap: 8px; }
.site-facts li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 8px; text-align: left; background: var(--paper); border-radius: 14px; padding: 8px 10px; font-size: 15px; }
.site-facts .ic { width: 28px; height: 28px; } .site-facts span { color: var(--ink2); } .site-facts b { font-weight: 900; }
.week-pick { margin-top: 18px; background: rgba(255, 255, 255, .1); border: 2px solid rgba(255, 255, 255, .3); border-radius: 20px; padding: 6px 14px; color: #fff; }
.week-pick summary { cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 8px 0; font-weight: 800; list-style: none; }
.week-pick summary::-webkit-details-marker { display: none; }
.week-pick summary .ic { width: 30px; height: 30px; }
.weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; padding: 6px 0 12px; }
.week { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: #fff; color: var(--ink); border: 3px solid var(--line); border-radius: 18px; padding: 10px 12px; }
.week.sel { background: #fff8d6; box-shadow: 0 0 0 4px var(--yellow); }
.week .ic, .wk-sun { width: 36px; height: 36px; } .wk-sun svg { width: 100%; height: 100%; }
.week b { font-size: 16px; } .week small { color: var(--ink2); font-size: 13px; }
@media (max-width: 560px) {
  .site-cards { gap: 10px; } .site-card { padding: 14px 8px 10px; } .site-planet { width: 80px; height: 80px; } .site-card h2 { font-size: 26px; }
  .site-facts li { grid-template-columns: 24px 1fr; font-size: 13px; } .site-facts li b { grid-column: 2; } .site-facts .ic { width: 22px; height: 22px; grid-row: span 2; }
  .speech { font-size: 18px; } .guide-kiko { width: 70px; } .pill { font-size: 11px; }
}

/* ---------- game ---------- */
.game { display: grid; gap: 12px; }
.hud { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.day-pill { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 3px solid var(--line); border-radius: 18px; padding: 8px 14px; box-shadow: var(--pop); text-align: left; font-weight: 900; font-size: 18px; }
.dots { display: flex; gap: 4px; } .dots i { width: 12px; height: 8px; border-radius: 4px; background: #dfe4f7; }
.dots i.done { background: var(--green); } .dots i.now { background: var(--yellow); outline: 2px solid var(--line); }
.hud-right { display: flex; gap: 8px; }
.stat { display: flex; align-items: center; gap: 6px; background: #fff; border: 3px solid var(--line); border-radius: 18px; padding: 8px 12px; box-shadow: var(--pop); font-weight: 900; }
.stat .ic { width: 28px; height: 28px; } .stat b { font-size: 24px; } .stat small { color: var(--ink2); font-size: 15px; }
.rdots { display: grid; grid-template-columns: repeat(3, 11px); gap: 3px; }
.rdots i { width: 11px; height: 11px; border-radius: 50%; background: #e4e8fb; }
.rdots i.on { background: var(--purple); } .rdots i.warn { background: #fff; border: 2px dashed var(--purple); }

.meters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.meters > *, .machines > *, .cols > *, .col-l > *, .col-r > * { min-width: 0; }
.meter { display: flex; align-items: center; gap: 10px; background: #fff; border: 3px solid var(--line); border-radius: 20px; padding: 10px 12px; box-shadow: var(--pop); text-align: left; }
.m-ic { width: 40px; height: 40px; flex: none; } .m-ic .ic { width: 100%; height: 100%; }
.m-main { flex: 1; min-width: 0; display: grid; gap: 6px; }
.m-top { display: flex; align-items: baseline; gap: 6px; }
.m-lab { font-size: 15px; color: var(--ink2); font-weight: 800; flex: 1; }
.m-val { font-size: 26px; font-weight: 900; line-height: 1; }
.tn { font-size: 13px; font-weight: 900; padding: 2px 6px; border-radius: 8px; }
.tn.up { background: #c9f7d8; color: #137a3a; } .tn.down { background: #ffd2da; color: #b0213f; } .tn.same { background: #eef1fb; color: var(--ink2); }
.m-bar { position: relative; height: 14px; border-radius: 999px; background: #e8ecfa; border: 2px solid var(--line); }
.m-fill { position: absolute; inset: 0 auto 0 0; border-radius: 999px; transition: width .35s; }
.m-ghost { position: absolute; top: -6px; width: 5px; height: 22px; margin-left: -2px; background: var(--navy); border-radius: 3px; transition: left .3s; }
.m-air .m-fill { background: var(--cyan); } .m-power .m-fill { background: var(--yellow); } .m-shield .m-fill { background: var(--blue); }
.meter.danger { background: #fff0f3; animation: shake .5s; }
@keyframes shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }

.cols, .col-l, .col-r { display: grid; gap: 12px; align-content: start; }
.stage { position: relative; border: 4px solid var(--line); border-radius: var(--r); overflow: hidden; background: linear-gradient(180deg, #0f1650 0%, #24308a 70%, #3a49b8 100%); box-shadow: var(--pop); }
.game.mars .stage { background: linear-gradient(180deg, #3a1840 0%, #8a3a3a 65%, #e08a5a 100%); }
.scene { display: block; width: 100%; height: auto; aspect-ratio: 400 / 230; }
.stage-sun { position: absolute; left: 12px; top: 10px; width: 74px; z-index: 2; }
.stage-sun .s-rays { animation: spin 20s linear infinite; transform-origin: 60px 60px; }
.sunchar.lvl3 .s-rays, .sunchar.lvl4 .s-rays { animation-duration: 5s; }
.sunchar.lvl4 { animation: shake .7s infinite; }
.date-chip { position: absolute; right: 10px; top: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; background: #fff; border: 3px solid var(--line); border-radius: 999px; padding: 4px 12px 4px 6px; font-size: 14px; font-weight: 900; }
.date-chip .ic { width: 24px; height: 24px; }
.scene .tw { animation: blink 3s ease-in-out infinite; }
.stage.night .scene { filter: brightness(.5) saturate(.7); transition: filter .8s; }
.storm-fx .pt { stroke: var(--pink); stroke-width: 4; stroke-linecap: round; animation: fall 1.1s linear 2; opacity: 0; }
@keyframes fall { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(200px); } }
.stage.blocked .shield-layer { animation: glow 1s ease-in-out 3; }
@keyframes glow { 50% { fill: #9cc8ff; } }
.stage.hit { animation: shake .4s 4; }

.kiko-bar { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 3px solid var(--line); border-radius: 22px; padding: 8px 16px 8px 8px; box-shadow: var(--pop); font-size: 18px; font-weight: 800; min-height: 72px; }
.kb-kiko { width: 56px; flex: none; }

.tray { background: #fff; border: 3px solid var(--line); border-radius: 22px; padding: 10px 14px; box-shadow: var(--pop); }
.tray-lab { font-size: 15px; color: var(--ink2); font-weight: 900; }
.cells { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cell { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #eef1fb; border: 3px dashed #b9c1e4; transition: all .2s; }
.cell .ic { width: 28px; height: 28px; opacity: .25; filter: grayscale(1); }
.cell.on { background: #fff4c2; border: 3px solid var(--line); animation: pop .3s; }
.cell.on .ic { opacity: 1; filter: none; }
@keyframes pop { 50% { transform: scale(1.12); } }

.machines { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.machine { position: relative; background: #fff; border: 3px solid var(--line); border-radius: 24px; box-shadow: var(--pop); transition: transform .1s; }
.machine.pop { animation: pop .3s; }
.machine.on { background: var(--tint); }
.mc-main { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px 12px; }
.mc-main:active { transform: scale(.97); }
.mc-ic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--tint); border: 3px solid var(--line); }
.mc-ic .ic { width: 44px; height: 44px; }
.mc-name { font-weight: 900; font-size: 22px; }
.mc-rule { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; font-size: 15px; }
.mc-cost { display: flex; } .mc-cost .ic { margin-right: -4px; }
.mc-rule .arrow { width: 16px; height: 16px; color: var(--ink2); margin: 0 2px; }
.mc-eff { display: inline-flex; align-items: center; gap: 2px; } .mc-eff .ic { width: 22px; height: 22px; } .mc-eff b { font-weight: 900; } .mc-eff small { color: var(--ink2); font-size: 13px; margin-left: 3px; }
.mc-count { position: absolute; top: -12px; left: -10px; min-width: 34px; height: 34px; padding: 0 6px; border-radius: 999px; background: var(--yellow); border: 3px solid var(--line); display: grid; place-items: center; font-weight: 900; }
.mc-minus { position: absolute; top: -12px; right: -10px; width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 3px solid var(--line); font-weight: 900; font-size: 24px; line-height: 1; }
.mc-help { position: absolute; bottom: 8px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--paper); border: 2px solid #c6cdee; font-weight: 900; color: var(--ink2); font-size: 15px; }
.mc-air { --tint: #ddf7ff; } .mc-plants { --tint: #dcf9e5; } .mc-shield { --tint: #e0ebff; } .mc-science { --tint: #ffe6dc; } .mc-alarm { --tint: #ffe0e6; }
.machines.five .machine:last-child { grid-column: 1 / -1; }
.machines.five .machine:last-child .mc-main { flex-direction: row; justify-content: center; gap: 12px; padding: 10px; }
.action-row.bottom { position: sticky; bottom: 0; margin: 0; padding: 12px 0; padding-bottom: max(12px, env(safe-area-inset-bottom)); justify-content: space-between; background: linear-gradient(0deg, var(--deep) 60%, rgba(13, 20, 66, 0)); z-index: 5; }

@media (max-width: 620px) {
  .brand-t { display: none; } main { padding: 8px 10px 24px; } .topbar { padding: 8px 10px; }
  .hud-right .stat { padding: 6px 8px; } .rdots { grid-template-columns: repeat(3, 9px); } .rdots i { width: 9px; height: 9px; }
  .tn { display: none; }
  .meters { gap: 6px; } .meter { flex-direction: column; align-items: stretch; gap: 4px; padding: 8px; }
  .m-ic { width: 30px; height: 30px; position: absolute; } .meter { position: relative; } .m-top { padding-left: 34px; min-height: 30px; align-items: center; }
  .m-lab { font-size: 13px; } .m-val { font-size: 22px; }
  .stage-sun { width: 56px; } .date-chip { font-size: 12px; }
  .mc-name { font-size: 19px; } .mc-ic { width: 54px; height: 54px; } .mc-ic .ic { width: 36px; height: 36px; }
  .day-pill { font-size: 16px; } .stat b { font-size: 20px; }
}
@media (min-width: 900px) {
  .cols { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .stage-sun { width: 96px; }
  .action-row.bottom { position: static; background: none; padding: 0; }
}

/* ---------- modal ---------- */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: rgba(8, 12, 46, .72); backdrop-filter: blur(3px); overflow-y: auto; }
.modal-card { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; background: #fff; border: 4px solid var(--line); border-radius: 30px; padding: 22px; box-shadow: 0 10px 0 rgba(8, 12, 46, .6); animation: up .25s ease-out; }
.modal-card.wide { width: min(760px, 100%); }
@keyframes up { from { transform: translateY(24px); opacity: 0; } }
.modal-card h2 { margin: 0; font-size: 26px; font-weight: 900; line-height: 1.2; }

.mo-head { display: flex; gap: 16px; align-items: center; }
.mo-sun { width: 104px; flex: none; }
.big-line { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 19px; }
.big-line .ic { width: 30px; height: 30px; }
.earth-msg { display: flex; gap: 12px; margin-top: 16px; padding: 14px; border-radius: 20px; background: #e9fbef; border: 3px solid var(--line); }
.earth-msg.warn { background: #fff0f3; } .earth-msg.fuzzy { background: #f0edff; }
.em-ic { width: 44px; height: 44px; flex: none; } .em-ic .ic { width: 100%; height: 100%; }
.em-lab { margin: 0; font-size: 14px; font-weight: 900; color: var(--ink2); } .em-lab small { font-weight: 700; }
.em-text { margin: 4px 0 0; font-size: 20px; font-weight: 900; }
.real-date { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 0; font-size: 15px; color: var(--ink2); }
.real-date .ic { width: 26px; height: 26px; } .real-date b { color: var(--ink); }
.how { margin-top: 16px; padding: 14px; border-radius: 20px; background: var(--paper); border: 2px dashed #b9c1e4; }
.how h3 { margin: 0 0 8px; font-size: 18px; font-weight: 900; }
.how ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; counter-reset: s; }
.how li { counter-increment: s; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; font-size: 15px; background: #fff; border: 2px solid var(--line); border-radius: 16px; padding: 12px 6px 10px; }
.how li::before { content: counter(s); position: absolute; top: -12px; left: -8px; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); border: 2px solid var(--line); display: grid; place-items: center; font-weight: 900; font-size: 14px; }
.how li .ic { width: 40px; height: 40px; }
.goal { display: flex; gap: 8px; align-items: center; margin: 12px 0 0; font-size: 16px; } .goal .ic { width: 30px; height: 30px; }

.event { text-align: center; }
.ev-ic { width: 96px; height: 96px; margin: 6px auto 10px; }
.ev-d { font-size: 19px; margin: 8px 0 14px; }
.fact { display: flex; gap: 10px; text-align: left; background: #fff8d6; border: 2px solid #f2d36b; border-radius: 18px; padding: 12px 14px; font-size: 15px; font-weight: 700; }
.fact.ok { background: #e9fbef; border-color: #8fe3a9; }
.fact .ic { width: 32px; height: 32px; } .fact p { margin: 0; }

.rep-head { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; border: 3px solid var(--line); margin-top: 6px; }
.rep-head.good { background: #e9fbef; } .rep-head.bad { background: #fff0f3; }
.rep-head h2 { font-size: 20px; }
.rep-sun { width: 84px; flex: none; }
.versus { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; margin: 12px 0; }
.vs-box { display: flex; flex-direction: column; align-items: center; padding: 8px; border-radius: 18px; border: 3px solid var(--line); }
.vs-box span { font-size: 13px; color: var(--ink2); } .vs-box b { font-size: 34px; font-weight: 900; line-height: 1.1; }
.vs-box.storm { background: #ffe6dc; } .vs-box.shield { background: #e0ebff; }
.vs-mid { font-weight: 900; font-size: 20px; color: var(--pink); }
.rep-list { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; }
.rep-list li { display: flex; align-items: center; gap: 10px; background: var(--paper); border-radius: 14px; padding: 8px 12px; font-size: 16px; }
.rep-list li .ic { width: 28px; height: 28px; }
.rep-list li.good { background: #e9fbef; } .rep-list li.bad { background: #fff0f3; }
.real-more summary { cursor: pointer; display: flex; align-items: center; gap: 8px; font-weight: 900; color: var(--blue); list-style: none; padding: 6px 0; }
.real-more summary::-webkit-details-marker { display: none; }
.real-more summary .ic { width: 26px; height: 26px; }
.real-card { background: var(--paper); border: 2px solid #c6cdee; border-radius: 18px; padding: 12px 14px; font-size: 15px; font-weight: 600; }
.real-card p { margin: 6px 0; } .rc-head { font-weight: 900; color: var(--blue); }
.gr { font-size: 13px; color: var(--ink2); background: #eef1fb; padding: 6px 8px; border-radius: 10px; }

.quiz { text-align: center; }
.q-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.q-opt { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; border-radius: 22px; background: #fff; border: 3px solid var(--line); box-shadow: var(--pop); font-weight: 900; font-size: 18px; }
.q-ic { width: 66px; height: 66px; }
.q-opt.right { background: #e9fbef; box-shadow: 0 0 0 5px var(--green), var(--pop); } .q-opt.wrong { opacity: .45; }
.q-res { margin-top: 14px; }

/* ---------- end ---------- */
.end .sec { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 24px; font-weight: 900; margin: 26px 0 12px; }
.end .sec .ic { width: 34px; height: 34px; }
.end-head { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; background: #fff; border: 4px solid var(--line); border-radius: 30px; padding: 18px; box-shadow: var(--pop); }
.end-head.done { background: #f2fff6; }
.end-nova { width: 140px; }
.end-txt h1 { margin: 0; font-size: clamp(26px, 5vw, 38px); font-weight: 900; line-height: 1.1; }
.end-txt p { margin: 6px 0 0; color: var(--ink2); }
.trophies { display: flex; gap: 8px; margin: 10px 0; } .trophies span { width: 46px; height: 46px; filter: grayscale(1); opacity: .3; } .trophies span.on { filter: none; opacity: 1; } .trophies .ic { width: 100%; height: 100%; }
.end-stats { display: flex; gap: 10px; flex-wrap: wrap; } .end-stats span { display: inline-flex; align-items: center; gap: 4px; background: var(--paper); border-radius: 12px; padding: 4px 10px; font-size: 20px; font-weight: 900; } .end-stats .ic { width: 26px; height: 26px; }
.timeline { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.tl { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 3px solid var(--line); border-radius: 18px; padding: 8px 4px; text-align: center; font-size: 14px; box-shadow: var(--pop); }
.tl.hit { background: #fff0f3; } .tl.ok { background: #e9fbef; }
.tl-sun { width: 46px; } .tl small { color: var(--ink2); font-size: 11px; font-weight: 700; }
.tl-res { display: flex; align-items: center; gap: 2px; min-height: 26px; font-weight: 900; color: var(--purple); } .tl-res .ic { width: 24px; height: 24px; }
@media (max-width: 620px) { .timeline { grid-template-columns: repeat(4, 1fr); } .end-head { grid-template-columns: 90px 1fr; } .end-nova { width: 90px; } }
.lessons { display: grid; gap: 10px; }
.lesson { display: flex; gap: 12px; align-items: center; background: #fff; border: 3px solid var(--line); border-radius: 20px; padding: 12px 16px; box-shadow: var(--pop); font-size: 19px; font-weight: 800; }
.lesson p { margin: 0; } .lesson .ic { width: 34px; height: 34px; }
.reveal { margin-top: 18px; display: grid; grid-template-columns: 80px 1fr; gap: 14px; background: #fff8d6; border: 3px solid var(--line); border-radius: 24px; padding: 16px; box-shadow: var(--pop); }
.rv-sun { width: 80px; } .reveal h3 { margin: 4px 0; font-size: 22px; font-weight: 900; } .reveal p { margin: 4px 0; font-weight: 700; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge { display: inline-flex; align-items: center; gap: 6px; background: var(--yellow); border: 3px solid var(--line); border-radius: 999px; padding: 8px 16px; font-weight: 900; box-shadow: var(--pop); }
.badge .ic { width: 24px; height: 24px; }

/* ---------- panels ---------- */
.panel-head { display: flex; align-items: center; gap: 10px; }
.panel-head > .ic { width: 40px; height: 40px; } .panel-head h2 { flex: 1; }
.lead { font-size: 18px; color: var(--ink2); font-weight: 700; }
.block { background: var(--paper); border-radius: 20px; padding: 14px 16px; margin: 12px 0; font-weight: 600; }
.block h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; font-weight: 900; } .block h3 .ic { width: 30px; height: 30px; }
.block p { margin: 6px 0; }
.iss-chart { width: 100%; background: #fff; border: 2px solid #c6cdee; border-radius: 14px; }
.iss-chart .grid { stroke: #e4e8fb; } .iss-chart .ax { fill: var(--ink2); font-size: 12px; font-family: var(--font); font-weight: 700; }
.iss-chart .ln { fill: none; stroke-width: 3; stroke-linejoin: round; } .iss-chart .q { stroke: var(--cyan); } .iss-chart .s { stroke: var(--pink); }
.legend { font-size: 14px; color: var(--ink2); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.legend span { display: inline-block; width: 20px; height: 5px; border-radius: 3px; } .legend .lq { background: var(--cyan); } .legend .ls { background: var(--pink); }
.wk-table { display: grid; gap: 8px; }
.wk-row { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 15px; } .wk-row small { color: var(--ink2); }
.wk-lv { display: flex; gap: 4px; }
.lv { font-style: normal; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 13px; font-weight: 900; background: #fff; border: 2px solid #c6cdee; }
.lv1 { background: #ffe9a8; } .lv2 { background: #ffc98a; } .lv3 { background: #ff9a6a; color: #fff; } .lv4 { background: #ff5a4a; color: #fff; }
.facts { display: grid; gap: 10px; }
.fact-card { display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: start; background: var(--paper); border-radius: 18px; padding: 12px 14px; font-weight: 600; }
.fact-card p { margin: 0 0 4px; } .fc-ic { width: 46px; height: 46px; }
.map { display: grid; gap: 8px; }
.map-row { display: grid; grid-template-columns: 34px 90px 1fr; gap: 10px; align-items: center; background: var(--paper); border-radius: 14px; padding: 8px 12px; font-size: 15px; }
.map-row .ic { width: 30px; height: 30px; } .map-row p { margin: 0; font-weight: 600; }
.prompts { margin: 0; padding-left: 22px; } .prompts li { margin: 6px 0; }
.toggle { display: flex; gap: 10px; align-items: center; background: #fff8d6; border: 2px solid #f2d36b; padding: 12px 14px; border-radius: 16px; font-weight: 800; margin: 12px 0; }
.toggle input { width: 24px; height: 24px; accent-color: var(--navy); }
.menu-sheet { display: grid; gap: 10px; }
.menu-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 20px; background: var(--paper); border: 3px solid var(--line); font-size: 20px; font-weight: 900; text-align: left; }
.menu-item .ic { width: 36px; height: 36px; }

.toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 60; background: var(--navy); color: #fff; font-weight: 800; padding: 12px 20px; border-radius: 999px; border: 3px solid #fff; max-width: 90vw; text-align: center; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.rep-more summary { cursor: pointer; font-weight: 800; color: var(--ink2); font-size: 15px; list-style: none; padding: 4px 0; }
.rep-more summary::-webkit-details-marker { display: none; }

/* ================= v4: hand-drawn vector art + animated Nova ================= */
.stk { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 7px 7px rgba(5, 8, 40, .35)); }
.stk svg, .art { display: block; width: 100%; height: auto; overflow: visible; }
.pic { width: 1.4em; height: 1.4em; flex: none; display: inline-block; vertical-align: middle; }
.pic.tiny { width: 20px; height: 20px; }
.art-ic { display: inline-block; } .art-ic svg { width: 100%; height: 100%; }

/* ---- Nova: real body-part animation ---- */
.nova2 { display: block; width: 100%; height: auto; overflow: visible; }
.nova2 .nv-arm.r { transform-origin: 144px 143px; transition: transform .35s ease; }
.nova2 .nv-arm.l { transform-origin: 56px 143px; transition: transform .35s ease; }
.nova2 .nv-leg.l { transform-origin: 86px 196px; } .nova2 .nv-leg.r { transform-origin: 114px 196px; }
.nova2 .nv-head { transform-origin: 100px 132px; transition: transform .3s; }
.nova2 .nv-eyes { transform-origin: 100px 98px; animation: eyeBlink 4.2s infinite; }
@keyframes eyeBlink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.nova2 .m-open { opacity: 0; }
.nova2 .nv-all { animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { transform: translateY(-2px); } }
/* wave */
.nova2.wave .nv-arm.r { animation: waveArm 1.1s ease-in-out infinite; }
@keyframes waveArm { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-118deg); } }
.nova2.wave .nv-head { transform: rotate(-3deg); }
/* talk: mouth moves, head nods, hands gesture like a teacher */
.nova2.talk .m-open { animation: mouth .26s steps(1) infinite; }
.nova2.talk .m-closed { animation: mouthC .26s steps(1) infinite; }
@keyframes mouth { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes mouthC { 0% { opacity: 0; } 50% { opacity: 1; } }
.nova2.talk .nv-head { animation: nod 1.6s ease-in-out infinite; }
@keyframes nod { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg) translateY(1px); } }
.nova2.talk:not(.point):not(.wave):not(.cheer) .nv-arm.r { animation: explainR 2.4s ease-in-out infinite; }
.nova2.talk:not(.cheer) .nv-arm.l { animation: explainL 2.4s ease-in-out infinite; }
@keyframes explainR { 0%, 100% { transform: rotate(-35deg); } 30% { transform: rotate(-80deg); } 60% { transform: rotate(-55deg); } }
@keyframes explainL { 0%, 100% { transform: rotate(10deg); } 40% { transform: rotate(40deg); } 70% { transform: rotate(22deg); } }
/* point at something */
.nova2.point .nv-arm.r { transform: rotate(-98deg); animation: pointArm 1.4s ease-in-out infinite; }
@keyframes pointArm { 0%, 100% { transform: rotate(-98deg); } 50% { transform: rotate(-90deg); } }
/* walk: legs step, arms swing, body bounces */
.nova2.walk .nv-leg.l { animation: stepL .5s ease-in-out infinite; } .nova2.walk .nv-leg.r { animation: stepR .5s ease-in-out infinite; }
.nova2.walk .nv-arm.l { animation: swingL .5s ease-in-out infinite; } .nova2.walk .nv-arm.r { animation: swingR .5s ease-in-out infinite; }
.nova2.walk .nv-all { animation: stepBob .25s ease-in-out infinite alternate; }
@keyframes stepL { 0%, 100% { transform: rotate(11deg); } 50% { transform: rotate(-11deg); } }
@keyframes stepR { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
@keyframes swingL { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes swingR { 0%, 100% { transform: rotate(16deg); } 50% { transform: rotate(-16deg); } }
@keyframes stepBob { from { transform: translateY(0); } to { transform: translateY(-5px); } }
/* cheer */
.nova2.cheer .nv-arm.r { transform: rotate(-155deg); } .nova2.cheer .nv-arm.l { transform: rotate(155deg); }
.nova2.cheer .nv-all { animation: cheerJump .9s ease-in-out infinite; }
@keyframes cheerJump { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-14px); } }

/* ---- title orbit ---- */
.orbit-hero { position: relative; height: 340px; max-width: 620px; margin: 0 auto; }
.orbit-ring { position: absolute; left: calc(50% - 285px); width: 570px; top: calc(50% - 95px); height: 190px; border: 3px dashed rgba(255, 255, 255, .35); border-radius: 50%; }
.orbiter { position: absolute; left: 50%; top: 50%; width: 92px; offset-path: path("M -285 0 A 285 95 0 1 0 285 0 A 285 95 0 1 0 -285 0"); offset-rotate: 0deg; offset-anchor: center; animation: orbit 18s linear infinite; }
.orbiter.o-mars { width: 80px; animation-delay: -9s; }
@keyframes orbit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.hero-astro { position: absolute; left: 50%; bottom: 0; width: 190px; transform: translateX(-50%); z-index: 2; }
.tw-star { position: absolute; width: 32px; height: 32px; animation: twinkle 2.4s ease-in-out infinite; } .tw-star .ic { width: 100%; height: 100%; }
.tw-star.s1 { left: 12%; top: 6%; } .tw-star.s2 { right: 10%; top: 2%; width: 26px; animation-delay: .8s; } .tw-star.s3 { right: 22%; bottom: 14%; width: 22px; animation-delay: 1.6s; }
@keyframes twinkle { 50% { transform: scale(.75) rotate(15deg); opacity: .7; } }
@media (max-width: 560px) { .orbit-hero { height: 270px; } .orbiter { width: 62px; offset-path: path("M -170 0 A 170 64 0 1 0 170 0 A 170 64 0 1 0 -170 0"); } .orbiter.o-mars { width: 54px; } .orbit-ring { left: calc(50% - 170px); width: 340px; top: calc(50% - 64px); height: 128px; } .hero-astro { width: 150px; } }

/* ---- site ---- */
.guide-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.guide-astro { width: 92px; flex: none; }
.site-planet { width: 110px; height: auto; }
.site-facts .pic { width: 28px; height: 28px; }
.wk-sun .sunpic { width: 40px; height: 40px; }

/* ---- sun with storm badge ---- */
.sunpic { position: relative; width: 80px; height: 80px; }
.sunpic svg { width: 100%; height: 100%; }
.sunpic .sun-rays { transform-origin: 60px 60px; animation: spin 40s linear infinite; }
.sunpic.lvl1 svg, .sunpic.lvl2 svg { filter: hue-rotate(-10deg) saturate(1.2); }
.sunpic.lvl3 svg, .sunpic.lvl4 svg { filter: hue-rotate(-28deg) saturate(1.6); animation: pulseSun 1s ease-in-out infinite; }
.sunpic.lvl3 .sun-rays, .sunpic.lvl4 .sun-rays { animation-duration: 6s; }
.sunpic.lvlu svg { filter: grayscale(.8) brightness(.9); }
@keyframes pulseSun { 50% { scale: 1.08; } }
.sp-badge { position: absolute; right: -6px; bottom: -4px; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--pink); color: #fff; font-weight: 900; font-size: 18px; border: 3px solid #fff; box-shadow: 0 3px 0 rgba(8,12,46,.4); }
.sp-badge.q { background: var(--purple); }
.sunpic.g-focus { border-radius: 50%; }

/* ---- stage: one smooth, living landscape ---- */
.stage { aspect-ratio: 400 / 230; background: #0b1040; }
.stage > * { position: absolute; }
.landscape { inset: 0; width: 100%; height: 100%; display: block; }
.landscape .tw { animation: twk 3s ease-in-out infinite; }
@keyframes twk { 50% { opacity: .15; } }
.landscape .shooting { animation: shoot 9s linear infinite; opacity: 0; }
@keyframes shoot { 0%, 82% { transform: translate(40px, 10px); opacity: 0; } 84% { opacity: 1; } 92% { transform: translate(250px, 70px); opacity: 0; } 100% { opacity: 0; } }
.landscape .ls-earth { animation: floaty 8s ease-in-out infinite; }
@keyframes floaty { 50% { transform: translateY(-3px); } }
.landscape .beacon { animation: blink 1.2s infinite; }
.landscape .glint { animation: glint 5s ease-in-out infinite; }
@keyframes glint { 0%, 80%, 100% { opacity: 0; transform: translateX(0); } 88% { opacity: .9; } 96% { opacity: 0; transform: translateX(40px); } }
.landscape .ls-rover { animation: drive 7s ease-in-out infinite; }
@keyframes drive { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(46px); } }
.landscape .puff { animation: puff 1.2s ease-out infinite; opacity: 0; } .landscape .puff.p2 { animation-delay: .5s; }
@keyframes puff { 0% { opacity: .7; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(-14px, -6px) scale(1.6); } }
.landscape .mote { animation: mote 6s linear infinite; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .7; } 100% { transform: translate(60px, -14px); opacity: 0; } }
.landscape .ls-green.grow { filter: drop-shadow(0 0 6px #7ef08f); }
.landscape .shell { transition: opacity .3s; }
.stage.night .landscape { filter: brightness(.55) saturate(.8); transition: filter .8s; }
.stage.night .landscape .win { fill: #ffd96b; }
.stage.night .landscape .lamp { opacity: 1; transition: opacity .8s; }
.stage.blocked .landscape .shell { fill: #9cc8ff; }
.stage.hit .landscape { animation: shake .4s 4; }
.landscape .storm-fx .pt { stroke: var(--pink); stroke-width: 3; stroke-linecap: round; animation: fall 1.1s linear 2; opacity: 0; }
.stage-sun { left: 2%; top: 3%; width: 20%; height: auto; aspect-ratio: 1; z-index: 3; }
.stage-sun.sunpic svg { filter: none; }
.date-chip { z-index: 3; }

/* ---- message bar & pictures ---- */
.msg-bar { display: flex; align-items: center; gap: 12px; text-align: left; background: #fff; border: 3px solid var(--line); border-radius: 22px; padding: 10px 16px 10px 10px; box-shadow: var(--pop); font-size: 18px; font-weight: 800; min-height: 72px; }
.msg-bar small { display: block; font-size: 13px; color: var(--ink2); font-weight: 900; }
.mb-ic { width: 54px; height: 54px; flex: none; border-radius: 16px; background: #e0ebff; display: grid; place-items: center; } .mb-ic .pic { width: 40px; height: 40px; }
.mc-ic .pic { width: 46px; height: 46px; }
.m-ic .pic { width: 100%; height: 100%; }
.mc-eff .pic { width: 22px; height: 22px; } .mc-cost .pic { margin-right: -5px; }
.cell .pic { width: 28px; height: 28px; opacity: .25; filter: grayscale(1); } .cell.on .pic { opacity: 1; filter: none; }
.stat .pic { width: 28px; height: 28px; }
.stat.teach { padding: 2px 12px 2px 2px; font-size: 15px; background: var(--yellow); }
.teach-ic { width: 40px; height: 44px; display: block; } .teach-ic svg { width: 100%; height: 100%; }
@media (max-width: 620px) { .stat.teach span:last-child { display: none; } .stat.teach { padding: 2px 4px; } .teach-ic { width: 32px; height: 36px; } }
.big-line .pic { width: 30px; height: 30px; } .em-ic .pic { width: 44px; height: 44px; }
.how li .pic { width: 42px; height: 42px; } .goal .pic { width: 30px; height: 30px; }
.mo-sun { width: 104px; height: 104px; flex: none; }
.ev-ic { width: 110px; height: 110px; display: grid; place-items: center; } .ev-ic .pic, .ev-ic .ic { width: 96px; height: 96px; }
.rep-sun { width: 84px; height: 84px; flex: none; }
.q-ic { width: 70px; height: 70px; display: grid; place-items: center; } .q-ic .pic { width: 66px; height: 66px; }
.nova-tip { display: flex; align-items: center; gap: 12px; margin-top: 10px; background: #fff8d6; border: 3px solid var(--line); border-radius: 20px; padding: 10px 14px; font-size: 16px; font-weight: 800; }
.tip-nova { width: 66px; flex: none; } .nova-tip p { margin: 0; }
.end-nova { width: 100%; max-width: 150px; }
.trophies .pic { width: 100%; height: 100%; }
.end-stats .pic { width: 26px; height: 26px; } .tl-sun { width: 46px; height: 46px; } .tl-res .pic { width: 22px; height: 22px; }
.rv-sun { width: 80px; height: 80px; } .badge .pic { width: 24px; height: 24px; } .end .sec .pic { width: 34px; height: 34px; }
.fc-ic .pic, .fc-ic .ic { width: 46px; height: 46px; }
.btn .pic { width: 28px; height: 28px; }

/* ---- Nova the guide (moves across the screen) ---- */
.guide { position: fixed; z-index: 70; width: 124px; transition-property: left, top; transition-timing-function: linear; pointer-events: none; }
.guide.docked { left: 14px; bottom: 14px; top: auto; }
.guide .g-body { pointer-events: auto; display: block; width: 100%; }
.g-img { display: block; transition: transform .25s; }
.guide.flip .g-img { transform: scaleX(-1); }
.g-bubble { position: absolute; bottom: calc(100% + 6px); left: 0; width: min(340px, 78vw); background: #fff; border: 3px solid var(--line); border-radius: 22px; padding: 12px 16px; box-shadow: var(--pop); pointer-events: auto; font-size: 17px; font-weight: 800; color: var(--ink); animation: up .25s ease-out; }
.g-bubble::after { content: ""; position: absolute; left: 40px; bottom: -14px; border: 12px solid transparent; border-top-color: var(--line); border-bottom: 0; }
.g-bubble.below { bottom: auto; top: calc(100% + 6px); }
.g-bubble.below::after { bottom: auto; top: -14px; border-top: 0; border-bottom: 12px solid var(--line); }
.guide.bubble-left .g-bubble { left: auto; right: 0; } .guide.bubble-left .g-bubble::after { left: auto; right: 40px; }
.g-text { margin: 0; }
.g-next { min-height: 46px; font-size: 17px; padding: 6px 20px; margin-top: 10px; }
.g-focus { position: relative; z-index: 6; box-shadow: 0 0 0 6px var(--yellow), 0 0 30px rgba(255,210,63,.8), var(--pop) !important; animation: focusPulse 1.2s ease-in-out infinite; }
@keyframes focusPulse { 50% { box-shadow: 0 0 0 10px rgba(255,210,63,.6), 0 0 40px rgba(255,210,63,.9), var(--pop); } }
.g-arrow { position: fixed; z-index: 71; width: 44px; height: 44px; animation: pointUp .8s ease-in-out infinite; pointer-events: none; }
@keyframes pointUp { 50% { transform: translateY(-10px); } }
@media (min-width: 900px) { .screen-game { padding-left: 120px; } }
@media (max-width: 700px) {
  .guide { width: 80px; } .guide.docked { bottom: 96px; left: 0; }
  .guide.docked.peek .g-body { transform: translateX(-52%); transition: transform .4s; }
  .g-bubble, .g-bubble.below, .guide.bubble-left .g-bubble { position: fixed; left: 10px; right: 10px; top: auto; bottom: 92px; width: auto; z-index: 72; font-size: 16px; }
  .g-bubble::after, .g-bubble.below::after { display: none; }
  .hud { gap: 6px; } .hud-right { gap: 5px; } .day-pill { padding: 6px 10px; font-size: 15px; } .dots i { width: 9px; }
  .stat { padding: 5px 7px; border-radius: 14px; } .stat .pic { width: 24px; height: 24px; } .stat b { font-size: 18px; } .stat small { font-size: 12px; }
}
@media (max-width: 560px) { .live-chip { font-size: 13px; padding: 6px 10px; gap: 6px; max-width: 94vw; width: auto; } }
@media (prefers-reduced-motion: reduce) { .guide { transition: none !important; } }


/* ---- Nova the space cat: extra parts ---- */
.nova2 .nv-eyes { transform-origin: 100px 88px; }
.nova2 .nv-ear.l { transform-origin: 72px 60px; animation: earTwitchL 5.5s ease-in-out infinite; }
.nova2 .nv-ear.r { transform-origin: 128px 60px; animation: earTwitchR 6.3s ease-in-out infinite 1.2s; }
@keyframes earTwitchL { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(-12deg); } 94% { transform: rotate(4deg); } }
@keyframes earTwitchR { 0%, 88%, 100% { transform: rotate(0); } 91% { transform: rotate(12deg); } 94% { transform: rotate(-4deg); } }
.nova2 .nv-tail { transform-origin: 128px 190px; animation: tailSwish 2.8s ease-in-out infinite; }
@keyframes tailSwish { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(10deg); } }
.nova2 .nv-body { transform-origin: 100px 200px; animation: catBreath 3.2s ease-in-out infinite; }
@keyframes catBreath { 50% { transform: scale(1.025, 1.035); } }
.nova2 .nv-look { transition: transform .3s; }
.nova2 .nv-whisk { transform-origin: 100px 112px; }
.nova2 .nv-spark { opacity: 0; }
.nova2.walk .nv-tail { animation: tailWalk .5s ease-in-out infinite; }
@keyframes tailWalk { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
.nova2.walk .nv-ear.l, .nova2.walk .nv-ear.r { animation: earBob .25s ease-in-out infinite alternate; }
@keyframes earBob { to { transform: rotate(3deg); } }
.nova2.point .nv-look { transform: translateX(3.5px) translateY(-1px); }
.nova2.talk .nv-ear.l { animation: earTwitchL 1.8s ease-in-out infinite; }
.nova2.talk .nv-ear.r { animation: earTwitchR 2.2s ease-in-out infinite .5s; }
.nova2.talk .nv-tail { animation: tailSwish 1.4s ease-in-out infinite; }
.nova2.talk .nv-whisk { animation: whisk .26s steps(1) infinite; }
@keyframes whisk { 50% { transform: translateY(1px); } }
.nova2.wave .nv-tail { animation: tailSwish 1.6s ease-in-out infinite; }
.nova2.cheer .nv-tail { animation: tailUp .9s ease-in-out infinite; }
@keyframes tailUp { 0%, 100% { transform: rotate(-22deg); } 40% { transform: rotate(-34deg); } }
.nova2.cheer .nv-ear.l { animation: earBounce .9s ease-in-out infinite; }
.nova2.cheer .nv-ear.r { animation: earBounce .9s ease-in-out infinite reverse; }
@keyframes earBounce { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-10deg); } 70% { transform: rotate(6deg); } }
.nova2.cheer .nv-spark { opacity: 1; }
.nova2.cheer .nv-spark path { transform-box: fill-box; transform-origin: center; animation: sparkle .9s ease-in-out infinite; }
@keyframes sparkle { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.15); opacity: 1; } }

/* ================= v6: story, impact, Ask Nova, voice ================= */
.tale { max-width: 900px; margin: 0 auto; display: grid; gap: 14px; }
.tale-top { display: flex; align-items: center; gap: 12px; }
.tale-top .eyebrow { margin: 0; color: var(--yellow); }
.tale-dots { display: flex; gap: 6px; flex: 1; justify-content: center; }
.tale-dots i { width: 28px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.25); }
.tale-dots i.done { background: var(--green); } .tale-dots i.now { background: var(--yellow); }
.tale .skip { color: #fff; opacity: .85; }
.tale-stage { position: relative; aspect-ratio: 400 / 230; border: 4px solid var(--line); border-radius: 28px; overflow: hidden; box-shadow: var(--pop); background: #070b30; animation: up .35s ease-out; }
.tale-stage > svg, .tale-stage .story-stack, .tale-stage .story-stack > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-sunpic { position: absolute; left: 3%; top: 4%; width: 22%; filter: hue-rotate(-28deg) saturate(1.6); animation: pulseSun 1s ease-in-out infinite; }
.tale-stage.danger .storm-fx .pt { animation-iteration-count: infinite; }
.tale-nova { position: absolute; left: 1.5%; bottom: -2%; width: 22%; z-index: 3; }
.story-art .tw { animation: twk 3s ease-in-out infinite; }
.story-art .sun-pulse { animation: pulseSun 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.story-art .shield-pulse { animation: shieldGlow 2s ease-in-out infinite; }
@keyframes shieldGlow { 50% { opacity: .35; } }
.story-art .pop-in { opacity: 0; animation: popIn .5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes popIn { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
.story-art .ring { transform-box: fill-box; transform-origin: center; animation: ring 1.6s ease-out infinite; }
.story-art .ring.r2 { animation-delay: .8s; }
@keyframes ring { from { transform: scale(.8); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }
.story-art .beacon, .landscape .beacon, .art .beacon { animation: blink 1s infinite; }
.story-art .bubble-up { animation: bubbleUp 3s ease-in infinite; opacity: 0; }
@keyframes bubbleUp { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-110px); } }
.story-art .shadow-sweep { animation: sweep 6s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(440px); } }
.story-art .core { animation: coreGlow 1.6s ease-in-out infinite; }
@keyframes coreGlow { 50% { fill: #b8ffe0; } }
.tale-bubble { background: #fff; border: 3px solid var(--line); border-radius: 24px; padding: 14px 18px; box-shadow: var(--pop); font-size: 20px; font-weight: 800; }
.tale-bubble p { margin: 0; }
.tale .action-row { margin-top: 0; }
.story-link { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); margin-top: 14px; }
.story-link .ic { width: 24px; height: 24px; }
@media (max-width: 620px) { .tale-bubble { font-size: 17px; } .tale-nova { width: 26%; } .tale-dots i { width: 18px; } }

.ask-btn { display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 14px 0 6px; border-radius: 999px; background: var(--yellow); border: 3px solid var(--line); font-weight: 900; font-size: 15px; color: var(--navy); box-shadow: 0 3px 0 rgba(8, 12, 46, .5); }
.ask-btn .ic { width: 30px; height: 30px; }
@media (max-width: 620px) { .ask-btn span { display: none; } .ask-btn { padding: 0 6px; } }
.ask-layer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 14px; background: rgba(8, 12, 46, .72); backdrop-filter: blur(3px); overflow-y: auto; }
.ask-card { width: min(680px, 100%); max-height: calc(100vh - 28px); overflow-y: auto; background: #fff; border: 4px solid var(--line); border-radius: 30px; padding: 20px; box-shadow: 0 10px 0 rgba(8, 12, 46, .6); animation: up .25s ease-out; }
.ask-card .panel-head > .ic { width: 40px; height: 40px; }
.ask-main { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center; margin: 10px 0; }
.ask-nova { width: 110px; }
.ask-bubble { background: var(--paper); border: 3px solid var(--line); border-radius: 22px; padding: 12px 16px; font-size: 18px; font-weight: 800; }
.ask-bubble p { margin: 0; } .ask-you { color: var(--ink2); font-size: 15px; margin-bottom: 6px !important; }
.ask-mic { width: 100%; margin: 6px 0 12px; } .ask-mic.listening { background: var(--pink); color: #fff; animation: pulse 1s infinite; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-q { padding: 9px 14px; border-radius: 999px; background: #e9efff; border: 2px solid #c6cdee; font-weight: 800; font-size: 15px; color: var(--ink); text-align: left; }
.chip-q:active { transform: scale(.97); }
@media (max-width: 560px) { .ask-main { grid-template-columns: 80px 1fr; } .ask-nova { width: 80px; } .ask-bubble { font-size: 16px; } }
.voice-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.voice-row select { flex: 1; min-width: 200px; font: inherit; font-size: 15px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--line); background: #fff; color: var(--ink); }
.small-btn { min-height: 44px; font-size: 16px; padding: 6px 18px; }

.tale-nova.right { left: auto; right: 1.5%; }
.tale-nova.right .nova2 { transform: scaleX(-1); }
.tale-replay { width: 56px; height: 56px; }
@media (max-width: 560px) {
  .ask-card { padding: 14px; }
  .ask-main { grid-template-columns: 1fr; }
  .ask-nova { width: 70px; margin: 0 auto -6px; }
  .ask-card .panel-head h2 { font-size: 21px; }
}

/* power tray: today's bolts + what is saved for tonight */
.tray { display: flex; align-items: center; gap: 12px; }
.tray-l { flex: 1; min-width: 0; }
.tonight { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; background: #eafbf0; border: 3px solid #39b36a; border-radius: 18px; padding: 6px 10px; cursor: pointer; font: inherit; color: var(--ink); }
.tonight .tn-lab { font-size: 13px; font-weight: 900; color: #23824b; white-space: nowrap; }
.tonight .tn-box { display: flex; align-items: center; gap: 4px; }
.tonight .tn-box .pic { width: 30px; height: 30px; }
.tonight .tn-box b { font-size: 24px; font-weight: 900; }
.tonight.empty { background: #fdecec; border-color: #e5484d; }
.tonight.empty .tn-lab { color: #c42b30; }
.btn-night.pulse { animation: nightPulse 1.4s ease-in-out infinite; }
@keyframes nightPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 210, 63, .7); } 50% { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(255, 210, 63, 0); } }
@media (prefers-reduced-motion: reduce) { .btn-night.pulse { animation: none; outline: 4px solid #ffd23f; } }
@media (max-width: 560px) { .tonight { padding: 4px 8px; } .tonight .tn-lab { font-size: 11px; } }

/* science stars = real NASA discoveries */
.find-card { display: flex; gap: 14px; align-items: flex-start; background: #fff8dc; border: 3px solid var(--line); border-radius: 22px; padding: 12px 14px; margin: 10px 0; box-shadow: var(--pop); animation: pop .4s; text-align: left; }
.find-card .find-ic { flex: none; width: 74px; height: 74px; border-radius: 18px; background: #fff; border: 3px solid var(--line); display: grid; place-items: center; }
.find-card .find-ic .ic { width: 56px; height: 56px; }
.find-card h3 { margin: 2px 0 4px; font-size: 20px; font-weight: 900; color: var(--ink); }
.find-card p { margin: 0; font-size: 15px; line-height: 1.4; color: var(--ink); }
.find-card .find-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 900; color: #b07800; text-transform: uppercase; letter-spacing: .04em; }
.find-card .find-eyebrow .pic { width: 18px; height: 18px; }
.find-card .src { display: inline-block; margin-top: 6px; font-size: 12px; }
.finds { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 8px; }
.find-chip { display: flex; align-items: center; gap: 8px; background: #fff8dc; border: 3px solid var(--line); border-radius: 18px; padding: 6px 12px 6px 6px; font-weight: 900; color: var(--ink); }
.find-chip .ic { width: 40px; height: 40px; }
@media (max-width: 560px) { .find-card .find-ic { width: 56px; height: 56px; } .find-card .find-ic .ic { width: 42px; height: 42px; } .find-card h3 { font-size: 17px; } }