/* Nova's Times-Table Blast-Off — a multiplication fluency game for ages 7–8.
   Space "mission control" theme. Cleaner type than the 3–6 suite (older kids
   find Comic Sans babyish), reusing the brand Mulish face from gamekit.css. */

:root{
    --tt-ink:#eaf0ff; --tt-dim:#9aa7d4;
    --tt-panel:#1b2350; --tt-panel-2:#232c63; --tt-edge:#3a4690;
    --tt-cyan:#2fd7ff; --tt-amber:#ffc24b; --tt-purple:#b98bff;
    --tt-green:#57e08a; --tt-red:#ff6b8a;
    --tt-sans:"Mulish", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

body{
    font-family:var(--tt-sans);
    color:var(--tt-ink);
    background:radial-gradient(120% 90% at 50% -10%, #26306a 0%, #131a41 45%, #0a0e26 100%);
    overflow:hidden;
    -webkit-font-smoothing:antialiased;
}
.screen{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
#screen-play{ flex-direction:column; justify-content:flex-start; }

/* starfield — a few layered twinkles, cheap and CSS-only */
.stars-bg{
    position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden;
    background-image:
        radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 78% 14%, #cfe4ff, transparent),
        radial-gradient(1px 1px at 34% 62%, #fff, transparent),
        radial-gradient(2px 2px at 62% 44%, #fff, transparent),
        radial-gradient(1px 1px at 88% 72%, #bcd4ff, transparent),
        radial-gradient(1.5px 1.5px at 20% 82%, #fff, transparent),
        radial-gradient(1px 1px at 50% 30%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 8% 54%, #dCE8ff, transparent);
    animation:twinkle 4.5s ease-in-out infinite;
}
@keyframes twinkle{ 0%,100%{opacity:.75} 50%{opacity:1} }

/* ── START ─────────────────────────────────────────────────────────────── */
.start-inner{ position:relative; z-index:1; text-align:center; padding:24px; max-width:520px; }
#start-rocket{ font-size:5.2rem; line-height:1; animation:hover-bob 3s ease-in-out infinite; filter:drop-shadow(0 12px 20px rgba(0,0,0,.5)); }
@keyframes hover-bob{ 0%,100%{transform:translateY(0) rotate(-6deg)} 50%{transform:translateY(-14px) rotate(-6deg)} }
.game-title{
    font-weight:900; font-size:clamp(2.1rem,7vw,3.4rem); line-height:1.02; letter-spacing:-.01em;
    margin:.15em 0 .1em; text-shadow:0 3px 0 rgba(0,0,0,.35), 0 0 26px rgba(47,215,255,.35);
}
.tt-accent{ color:var(--tt-amber); }
.tagline{ color:var(--tt-dim); font-size:clamp(1rem,3vw,1.25rem); font-weight:700; margin:.2em 0 1em; }
.star-chip{
    display:inline-block; background:rgba(255,194,75,.14); border:1.5px solid rgba(255,194,75,.5);
    color:var(--tt-amber); font-weight:800; border-radius:999px; padding:6px 16px; margin-bottom:20px;
}
#screen-start .gk-go, #screen-levels .gk-go{ background:linear-gradient(135deg,#ff8a3c,#ffc24b); color:#3a1d00; }

/* ── MISSION SELECT ────────────────────────────────────────────────────── */
.levels-inner{ position:relative; z-index:1; width:100%; max-width:760px; padding:64px 18px 30px; text-align:center; }
.levels-heading{ font-weight:900; font-size:clamp(1.5rem,5vw,2.2rem); margin:0; }
.levels-sub{ color:var(--tt-dim); font-weight:600; margin:6px 0 18px; }
#level-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:12px; }
.mission-card{
    position:relative; background:linear-gradient(180deg,var(--tt-panel-2),var(--tt-panel));
    border:1.5px solid var(--tt-edge); border-radius:18px; padding:16px 8px 12px; cursor:pointer;
    color:var(--tt-ink); font-family:inherit; transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
    box-shadow:0 8px 20px rgba(0,0,0,.28);
}
.mission-card:hover{ transform:translateY(-3px); border-color:var(--tt-cyan); box-shadow:0 12px 26px rgba(47,215,255,.22); }
.mission-card:active{ transform:scale(.97); }
.mission-card .planet{ font-size:2.4rem; line-height:1; display:block; }
.mission-card .m-label{ font-weight:900; font-size:1.35rem; margin-top:4px; }
.mission-card .m-sub{ font-size:.72rem; color:var(--tt-dim); font-weight:700; letter-spacing:.03em; text-transform:uppercase; }
.mission-card .m-stars{ margin-top:6px; font-size:.82rem; letter-spacing:2px; min-height:1.1em; color:var(--tt-amber); }
.mission-card.mixed{ border-color:var(--tt-purple); background:linear-gradient(180deg,#3a2b6e,#241a48); }
.mission-card.mixed:hover{ box-shadow:0 12px 26px rgba(185,139,255,.3); border-color:var(--tt-purple); }

.corner-btn{
    position:fixed; top:12px; left:12px; z-index:6; border:1.5px solid var(--tt-edge);
    background:rgba(20,26,60,.8); color:var(--tt-ink); font-family:inherit; font-weight:800;
    border-radius:12px; padding:8px 14px; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.corner-btn:active{ transform:scale(.95); }

/* ── PLAY ──────────────────────────────────────────────────────────────── */
#screen-play{ flex-direction:column; }
#play-top{
    position:relative; z-index:2; width:100%; max-width:760px;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:14px 16px 6px; margin-top:52px;
}
.pill{ background:rgba(20,26,60,.7); border:1.5px solid var(--tt-edge); border-radius:999px;
    padding:6px 14px; font-weight:800; font-size:.95rem; color:var(--tt-ink); white-space:nowrap; }
.streak-pill{ border-color:rgba(255,140,60,.55); color:var(--tt-amber); }
#progress-dots{ display:flex; gap:5px; flex-wrap:wrap; justify-content:center; flex:1; }
#progress-dots span{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.16); transition:background .2s, transform .2s; }
#progress-dots span.done{ background:var(--tt-green); }
#progress-dots span.miss{ background:var(--tt-red); }
#progress-dots span.now{ background:var(--tt-cyan); transform:scale(1.35); box-shadow:0 0 10px var(--tt-cyan); }

#play-stage{
    position:relative; z-index:1; width:100%; max-width:760px; flex:1; min-height:0;
    display:flex; gap:12px; padding:8px 14px 16px; align-items:stretch;
}

/* rocket flight track (left rail) */
#flight-track{
    position:relative; width:74px; flex:none; border-radius:20px;
    background:linear-gradient(180deg, rgba(47,215,255,.10), rgba(20,26,60,.5));
    border:1.5px solid var(--tt-edge); overflow:hidden;
}
#planet-goal{ position:absolute; top:8px; left:50%; transform:translateX(-50%); font-size:2rem; z-index:2;
    filter:drop-shadow(0 0 10px rgba(255,194,75,.5)); }
#fuel-fill{ position:absolute; left:0; right:0; bottom:0; height:6%;
    background:linear-gradient(180deg, rgba(47,215,255,.5), rgba(47,215,255,.12));
    transition:height .6s cubic-bezier(.2,.9,.3,1.2); }
#rocket{ position:absolute; left:50%; bottom:4%; transform:translateX(-50%); z-index:3;
    transition:bottom .6s cubic-bezier(.2,.9,.3,1.2); text-align:center; }
#rocket .rocket-emoji{ font-size:2.1rem; display:block; }
#rocket-flame{ display:block; width:8px; height:16px; margin:-4px auto 0; border-radius:0 0 50% 50%;
    background:linear-gradient(180deg,#ffd15a,#ff6b2c,transparent); opacity:.9; animation:flame .18s infinite alternate; }
@keyframes flame{ from{transform:scaleY(.8);opacity:.7} to{transform:scaleY(1.25);opacity:1} }
#rocket.boost{ animation:boost .55s ease; }
@keyframes boost{ 0%{filter:drop-shadow(0 0 0 transparent)} 40%{filter:drop-shadow(0 0 16px var(--tt-cyan))} 100%{filter:none} }
#flight-track.launch #rocket{ transition:bottom 1.1s cubic-bezier(.5,0,.7,1); bottom:112% !important; }

/* console (right side): fact + array + keypad */
#console{ flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; }
#fact-card{
    background:linear-gradient(180deg,var(--tt-panel-2),var(--tt-panel));
    border:1.5px solid var(--tt-edge); border-radius:20px; padding:14px 12px; text-align:center;
    box-shadow:0 10px 26px rgba(0,0,0,.3);
}
#fact-line{ display:flex; align-items:center; justify-content:center; gap:8px; font-weight:900;
    font-size:clamp(1.9rem,7vw,2.9rem); letter-spacing:1px; font-variant-numeric:tabular-nums; }
#fact-line .times{ color:var(--tt-dim); }
.ans-box{ min-width:1.8em; padding:0 .18em; border-radius:10px; border:2px dashed var(--tt-edge);
    color:var(--tt-cyan); background:rgba(47,215,255,.06); }
.ans-box.typed{ border-style:solid; border-color:var(--tt-cyan); }
#array-grid{ display:grid; gap:5px; justify-content:center; margin:12px auto 2px; max-width:100%; }
.arr-dot{ width:var(--d,14px); height:var(--d,14px); border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #baf3ff, var(--tt-cyan));
    box-shadow:0 0 6px rgba(47,215,255,.5); transform:scale(0); animation:pop-dot .01s forwards; }
@keyframes pop-dot{ to{ transform:scale(1) } }
#array-grid.count .arr-dot{
    background:radial-gradient(circle at 35% 30%, #ffe6a8, var(--tt-amber));
    box-shadow:0 0 6px rgba(255,194,75,.5);
    animation:count-dot .45s ease forwards;
}
@keyframes count-dot{
    0%{ transform:scale(0) }
    55%{ transform:scale(1.35); box-shadow:0 0 13px var(--tt-amber) }
    100%{ transform:scale(1) }
}

#feedback{ text-align:center; font-weight:800; font-size:1.05rem; min-height:1.3em; }
#feedback.good{ color:var(--tt-green); }
#feedback.bad{ color:var(--tt-amber); }

#fact-card.correct{ animation:pulse-good .5s ease; border-color:var(--tt-green); }
#fact-card.wrong{ animation:shake .4s ease; border-color:var(--tt-red); }
@keyframes pulse-good{ 0%{box-shadow:0 0 0 rgba(87,224,138,0)} 40%{box-shadow:0 0 28px rgba(87,224,138,.6)} 100%{box-shadow:0 10px 26px rgba(0,0,0,.3)} }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

/* keypad console */
#keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:auto; }
.key{
    font-family:inherit; font-weight:900; font-size:1.5rem; color:var(--tt-ink);
    background:linear-gradient(180deg,#2c3670,#212a5c); border:1.5px solid var(--tt-edge);
    border-radius:14px; padding:14px 0; min-height:56px; cursor:pointer;
    box-shadow:0 4px 0 rgba(0,0,0,.35); transition:transform .06s, box-shadow .06s, background .12s;
    font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent;
}
.key:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.35); }
.key.key-go{ background:linear-gradient(135deg,#ff8a3c,#ffc24b); color:#3a1d00; font-size:1.15rem; }
.key.key-wide{ background:#2a3468; color:var(--tt-dim); font-size:1.4rem; }
.key.flash{ background:var(--tt-cyan); color:#04203a; }

/* ── celebrate tweak: reuse gamekit overlay (dark-friendly by default) ──── */

@media (prefers-reduced-motion:reduce){
    *{ animation:none !important; }
    #fuel-fill, #rocket{ transition:none !important; }
}

/* small screens: keep the row layout but tighten */
@media (max-width:420px){
    #flight-track{ width:58px; }
    .key{ min-height:50px; font-size:1.35rem; padding:11px 0; }
    #play-top{ margin-top:48px; }
}
/* taller screens get more room for the array */
@media (min-height:720px){
    #array-grid{ margin-top:16px; }
}