/* Times Tables Rocket. Builds on the Kids design system v3 tokens in kids-product.css. */
#kids-times{--tt-a:var(--k-coral,#ff8f7f);--tt-b:var(--k-sky,#7cbcff);--tt-p:var(--k-gold,#f6c96c);--tt-ok:var(--k-mint,#62e3ab);--tt-night:#0a1031}
.tt-stage{position:relative}
.tt-stage button{font-family:"Manrope",Inter,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.tt-stage button:focus-visible,.tt-stage .kp-button:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
.tt-stage [hidden]{display:none!important}

/* ---------- Icons ---------- */
.tt-mode-icon,.tt-stage .kp-button svg,.tt-how svg{width:22px;height:22px;flex:none}
.tt-mi-explore,.tt-mi-rocket,#tt-fly-this svg,.tt-start svg{fill:currentColor}
.tt-mi-missing,.tt-mi-grid,#tt-flip svg,#tt-build svg,.tt-print-actions svg,.tt-how svg{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tt-stage .kp-button{display:inline-flex;align-items:center;justify-content:center;gap:10px}

/* ---------- Mode picker and how-to line ---------- */
.tt-modes{margin:0 0 12px;width:fit-content;max-width:100%;box-sizing:border-box}
.tt-modes button{display:inline-flex;align-items:center;gap:8px;min-height:50px;padding:6px 18px}
.tt-modes button[aria-pressed="true"]{background:var(--tt-a);color:#2a0d08}
.tt-how{display:flex;align-items:flex-start;gap:10px;margin:0 0 20px!important;color:var(--k-ink-2,#d5dbf5)!important;font-weight:650}
.tt-how svg{color:var(--tt-a);margin-top:2px}

.tt-label{margin:0 0 8px!important;font:800 .92rem/1.3 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important;letter-spacing:.02em}
.tt-nums{display:flex;flex-wrap:wrap;gap:8px}
.tt-num{min-width:52px;min-height:52px;padding:0 10px;border-radius:16px;border:2px solid var(--k-line,#2a3678);background:var(--k-surface-2,#172154);color:var(--k-ink,#f4f6ff);font-weight:900;font-size:1.2rem;cursor:pointer;transition:transform .12s ease,background .12s,border-color .12s}
.tt-num:hover{border-color:#3b4a9a;background:var(--k-surface-3,#1e2a66)}
.tt-num[aria-pressed="true"]{background:var(--tt-a);border-color:#ffc2b8;color:#2a0d08;box-shadow:0 6px 16px rgba(255,143,127,.3)}
.tt-num:active{transform:scale(.95)}
.tt-all{font-size:1rem;padding:0 16px}

/* ---------- Explore ---------- */
.tt-pickers{margin-bottom:18px}
.tt-ex-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,280px);gap:clamp(16px,3vw,30px);align-items:start}
.tt-ex-board{min-width:0;text-align:center}
.tt-eq{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:.25em;margin:0!important;font:900 clamp(2.4rem,7vw,3.7rem)/1.1 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important;letter-spacing:-.02em}
.tt-eq-a,#tt-qa{color:var(--tt-a)}
.tt-eq-b,#tt-qb{color:var(--tt-b)}
.tt-eq b,#tt-qp{color:var(--tt-p)}
.tt-eq-op{color:var(--k-muted,#aab3da);font-weight:700}
.tt-say{margin:6px 0 14px!important;color:var(--k-muted,#aab3da)!important;font-weight:700}
.tt-array-frame{container-type:inline-size;display:flex;justify-content:center;align-items:center;min-height:200px;padding:20px 14px;border-radius:24px;background:radial-gradient(circle at 50% 30%,#1b2266 0,var(--tt-night) 75%);border:1px solid var(--k-line-soft,#1f2a62);box-shadow:inset 0 0 50px rgba(255,143,127,.08);overflow:hidden}
.tt-array{--st:40px;display:flex;justify-content:center;max-width:100%}
.tt-array-in{display:inline-flex;flex-direction:column;gap:6px;transform-origin:50% 50%;transition:transform .65s cubic-bezier(.5,0,.3,1)}
.tt-row{display:flex;align-items:center;gap:10px}
.tt-dots{display:flex;gap:4px}
.tt-st{width:var(--st);height:var(--st);fill:var(--tt-p);stroke:#c99634;stroke-width:1;stroke-linejoin:round;filter:drop-shadow(0 2px 4px rgba(246,201,108,.25))}
.tt-skip{min-width:2.3em;padding:2px 8px;border-radius:999px;background:rgba(255,143,127,.16);border:1px solid rgba(255,143,127,.45);color:#ffd2ca;font:800 .95rem/1.5 "Manrope",Inter,sans-serif;text-align:center;transition:opacity .2s}
.tt-row:last-child .tt-skip{background:var(--tt-p);border-color:var(--tt-p);color:#2a1d05}
.tt-cols-1,.tt-cols-2,.tt-cols-3,.tt-cols-4{--st:max(11px,min(44px,calc((100cqi - min(5.4rem,76px)) / 4 - 4px)))}
.tt-cols-5,.tt-cols-6{--st:max(11px,min(38px,calc((100cqi - min(5.4rem,76px)) / 6 - 4px)))}
.tt-cols-7,.tt-cols-8{--st:max(11px,min(32px,calc((100cqi - min(5.4rem,76px)) / 8 - 4px)))}
.tt-cols-9,.tt-cols-10{--st:max(11px,min(30px,calc((100cqi - min(5.4rem,76px)) / 10 - 4px)))}
.tt-rows-8.tt-cols-1,.tt-rows-9.tt-cols-1,.tt-rows-10.tt-cols-1,.tt-rows-8.tt-cols-2,.tt-rows-9.tt-cols-2,.tt-rows-10.tt-cols-2{--st:max(11px,min(32px,calc((100cqi - min(5.4rem,76px)) / 4 - 4px)))}
.tt-array-sm{--st:max(11px,min(22px,calc((100cqi - min(4.6rem,76px)) / 10 - 3px)))}
.tt-array-sm .tt-array-in{gap:3px}.tt-array-sm .tt-dots{gap:3px}.tt-array-sm .tt-row{gap:8px}
.tt-array-sm .tt-skip{font-size:.8rem;min-width:2.2em;padding:0 6px}
@container (max-width:330px){.tt-skip,.tt-array-sm .tt-skip{font-size:13px;min-width:26px;padding:0 4px}.tt-row{gap:6px}.tt-dots{gap:2px}}
@keyframes tt-row-in{0%{opacity:0;transform:translateX(-16px) scale(.9)}100%{opacity:1;transform:none}}
@keyframes tt-skip-in{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}
.tt-build .tt-row{animation:tt-row-in .32s ease-out both}
.tt-build .tt-row .tt-skip{animation:tt-skip-in .35s .18s ease-out both;animation-delay:inherit}
.tt-rotating{transform:rotate(90deg)}
.tt-rotating .tt-skip{opacity:0}
@keyframes tt-spin{0%{transform:rotate(0)}100%{transform:rotate(90deg)}}
.tt-spin .tt-array-in{animation:tt-spin .6s cubic-bezier(.5,0,.3,1)}
.tt-caption{margin:12px 0 0!important;font-weight:800;color:var(--k-ink,#f4f6ff)!important;font-size:1.08rem}
.tt-ex-actions{justify-content:center}
.tt-ex-actions .kp-button{min-height:56px}

.tt-ex-side{min-width:0;padding:16px;border-radius:22px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.tt-facts-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.tt-facts-list li{margin:0}
.tt-fact{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:6px 8px 6px 16px;border-radius:14px;border:2px solid transparent;background:rgba(255,255,255,.03);color:var(--k-ink,#f4f6ff);font-weight:800;font-size:1.06rem;cursor:pointer}
.tt-fact:hover{background:var(--k-surface-2,#172154)}
.tt-fact-p{min-width:2.6em;padding:3px 10px;border-radius:999px;background:var(--k-surface-3,#1e2a66);color:var(--tt-p);text-align:center}
.tt-fact[aria-pressed="true"]{border-color:var(--tt-a);background:rgba(255,143,127,.14)}
.tt-fact[aria-pressed="true"] .tt-fact-p{background:var(--tt-p);color:#2a1d05}

/* ---------- Mission setup ---------- */
.tt-setup{display:grid;gap:20px;padding:clamp(16px,3vw,26px);border-radius:24px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.tt-method{width:fit-content;max-width:100%;box-sizing:border-box}
.tt-method{margin-left:auto}
.tt-method button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:6px 14px}
.tt-method svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tt-start{min-height:60px!important;font-size:1.15rem;padding:12px 30px!important}
.tt-start svg{width:26px!important;height:26px!important}

/* ---------- Mission play ---------- */
.tt-play{display:grid;grid-template-columns:150px minmax(0,1fr);gap:clamp(14px,3vw,28px);align-items:stretch}
.tt-flight{--fuel:0;position:relative;min-height:470px;border-radius:24px;overflow:hidden;border:1px solid #2b3780;
 background:radial-gradient(1.5px 1.5px at 20% 15%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 70% 30%,#fff 50%,transparent 51%),radial-gradient(1.5px 1.5px at 35% 60%,#ffffffb0 50%,transparent 51%),radial-gradient(1px 1px at 80% 75%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 15% 85%,#ffffffa0 50%,transparent 51%),linear-gradient(180deg,#120d3a 0,#16205e 55%,#1f3a7a 100%)}
.tt-track{position:absolute;left:50%;top:18px;bottom:18px;border-left:2px dashed rgba(255,255,255,.18)}
.tt-planet{--p:0;position:absolute;bottom:calc(30px + (100% - 120px) * var(--p));width:64px;text-align:center;transition:filter .3s}
.tt-planet svg{display:block;width:52px;height:52px;margin:0 auto;overflow:visible}
.tt-pl-moon{--p:.22;left:6px}.tt-pl-mars{--p:.48;right:6px}.tt-pl-saturn{--p:.74;left:6px}.tt-pl-neptune{--p:1;right:6px}
.tt-pl-body{fill:#8a93bd}
.tt-pl-spot{fill:#000;opacity:.18}
.tt-pl-mars .tt-pl-body{fill:#ff7a5c}
.tt-pl-saturn .tt-pl-body{fill:#f2c46c}
.tt-pl-neptune .tt-pl-body{fill:#5b8dff}
.tt-pl-moon .tt-pl-body{fill:#d9dcf0}
.tt-pl-ring{fill:none;stroke:#ffe2a6;stroke-width:3}
.tt-pl-ring-back{opacity:.55}
.tt-pl-name{display:block;margin-top:2px;font:800 .72rem/1.2 "Manrope",Inter,sans-serif;color:var(--k-muted,#aab3da)}
.tt-planet:not(.tt-passed){filter:saturate(.45) brightness(.75)}
.tt-planet.tt-passed .tt-pl-name{color:var(--tt-ok)}
@keyframes tt-pop{0%{transform:scale(1)}40%{transform:scale(1.3)}100%{transform:scale(1)}}
.tt-planet.tt-pop svg{animation:tt-pop .6s ease}
.tt-rocket{position:absolute;left:50%;bottom:calc(6px + (100% - 104px) * var(--fuel));width:52px;height:82px;margin-left:-26px;transition:bottom .9s cubic-bezier(.3,1.3,.5,1);z-index:2}
.tt-rocket svg{display:block;width:100%;height:100%;overflow:visible}
.tt-hull{fill:#f4f6ff}
.tt-nose{fill:var(--tt-a)}
.tt-fin{fill:var(--tt-a)}
.tt-window{fill:#2a3678;stroke:var(--k-cyan,#3dd5f3);stroke-width:3}
.tt-window-shine{fill:#fff;opacity:.6}
.tt-flame-out{fill:#ffb347}
.tt-flame-in{fill:#fff3b0}
@keyframes tt-flicker{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.78)}}
.tt-flame{transform-origin:32px 74px;animation:tt-flicker .28s ease-in-out infinite}
@keyframes tt-liftoff{0%{transform:translateY(0)}20%{transform:translateY(8px)}100%{transform:translateY(-640px)}}
.tt-launch .tt-rocket{animation:tt-liftoff 1.6s .2s cubic-bezier(.6,0,.8,.6) forwards}

.tt-qcol{display:flex;flex-direction:column;gap:14px;min-width:0}
.tt-qhead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px}
.tt-qcount{margin:0!important;font:800 .95rem/1.3 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important}
.tt-retry-tag{margin:0!important;padding:4px 12px;border-radius:999px;background:rgba(246,201,108,.16);border:1px solid #6b5a33;color:#ffe2a6!important;font-weight:800;font-size:.85rem}
.tt-fuel{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:4px;list-style:none;margin:0;padding:5px;border-radius:999px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.tt-fuel li{height:16px;margin:0;border-radius:999px;background:#1c2560;transition:background .3s}
.tt-fuel li.tt-on{background:linear-gradient(90deg,var(--tt-p),var(--tt-a))}
.tt-qcard{padding:clamp(16px,3vw,24px);border-radius:24px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);text-align:center}
.tt-question{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:.22em;margin:0!important;font:900 clamp(2.5rem,8vw,4.2rem)/1.1 "Manrope",Inter,sans-serif;color:var(--k-ink,#f4f6ff)!important}
.tt-question .tt-blank{display:inline-grid;place-items:center;min-width:1.5em;padding:0 .12em;border-radius:18px;border:3px dashed var(--tt-a);color:var(--tt-a)!important;background:rgba(255,143,127,.08)}
.tt-question .tt-filled{display:inline-grid;place-items:center;min-width:1.5em;padding:0 .12em;border-radius:18px;border:3px solid var(--tt-ok);color:var(--tt-ok)!important;animation:tt-pop .45s ease}
.tt-qcard .tt-say{margin:8px 0 0!important}

.tt-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tt-choice{min-height:76px;border-radius:22px;border:3px solid var(--k-line,#2a3678);background:var(--k-surface-2,#172154);color:var(--k-ink,#f4f6ff);font-weight:900;font-size:clamp(1.7rem,5vw,2.2rem);cursor:pointer;transition:transform .12s ease,background .15s,border-color .15s;box-shadow:0 5px 0 #0a0f33}
.tt-choice:not(:disabled):hover{border-color:var(--k-cyan,#3dd5f3);background:var(--k-surface-3,#1e2a66)}
.tt-choice:not(:disabled):active{transform:translateY(3px);box-shadow:0 2px 0 #0a0f33}
.tt-choice:disabled{cursor:default}
.tt-choice.tt-right{background:var(--tt-ok);border-color:#b9f5da;color:#06281a}
.tt-choice.tt-wrong{border-color:var(--tt-a);opacity:.6;animation:tt-shake .4s ease}
.tt-choice.tt-show{border-color:var(--tt-ok);box-shadow:0 0 0 4px rgba(98,227,171,.35)}
@keyframes tt-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.tt-typer{display:flex;flex-direction:column;align-items:center;gap:12px}
.tt-display{display:grid;place-items:center;width:min(100%,240px);min-height:66px;margin:0!important;border-radius:20px;border:3px solid var(--k-cyan,#3dd5f3);background:var(--tt-night);color:var(--k-ink,#f4f6ff)!important;font:900 2.4rem/1 "Manrope",Inter,sans-serif;box-sizing:border-box}
.tt-display.tt-empty{color:#56609a!important;border-style:dashed}
.tt-display.tt-right{border-color:var(--tt-ok);color:var(--tt-ok)!important}
.tt-display.tt-wrong{border-color:var(--tt-a);animation:tt-shake .4s ease}
.tt-pad{display:grid;grid-template-columns:repeat(3,minmax(56px,1fr));gap:10px;width:min(100%,300px)}
.tt-key{min-height:58px;border-radius:18px;border:2px solid var(--k-line,#2a3678);background:var(--k-surface-2,#172154);color:var(--k-ink,#f4f6ff);font-weight:900;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 0 #0a0f33;display:grid;place-items:center}
.tt-key:hover{background:var(--k-surface-3,#1e2a66)}
.tt-key:active{transform:translateY(3px);box-shadow:0 1px 0 #0a0f33}
.tt-key svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.tt-key-ok{background:linear-gradient(100deg,var(--k-cyan,#3dd5f3),var(--k-violet,#a594ff));border:0;color:#071029;font-size:1.05rem;padding:0 4px;overflow-wrap:anywhere;min-width:0}
.tt-key-back{color:var(--tt-a)}

.tt-help{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border-radius:22px;background:linear-gradient(135deg,rgba(246,201,108,.12),rgba(255,143,127,.1));border:1px solid #6b5a33;text-align:center}
.tt-help-text{margin:0!important;font-weight:800;color:var(--k-ink,#f4f6ff)!important;font-size:1.05rem}
.tt-help .tt-array-frame{width:100%;min-height:0;padding:12px;box-sizing:border-box}
.tt-help .kp-button{min-height:56px}
.tt-keys{margin:14px 0 0!important}

/* ---------- Grid challenge ---------- */
.tt-grid-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.tt-glevels{width:fit-content;max-width:100%;box-sizing:border-box}
.tt-glevels button[aria-pressed="true"]{background:var(--tt-a);color:#2a0d08}
.tt-gleft{margin:0!important;padding:6px 14px;border-radius:999px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);font-weight:800;color:var(--k-ink,#f4f6ff)!important}
.tt-grid-play{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:clamp(14px,3vw,28px);align-items:start}
.tt-grid-scroll{min-width:0;overflow-x:auto;padding:4px 2px 8px;-webkit-overflow-scrolling:touch}
.tt-grid{border-collapse:separate;border-spacing:4px;margin:0 auto;font-family:"Manrope",Inter,sans-serif}
.tt-grid th,.tt-grid td{width:52px;height:52px;padding:0;border-radius:12px;text-align:center;vertical-align:middle;font-weight:900;font-size:1.15rem}
.tt-g10 th,.tt-g10 td{width:46px;height:46px;font-size:1rem;border-radius:10px}
.tt-grid thead th{background:rgba(124,188,255,.18);color:var(--tt-b)}
.tt-grid tbody th{background:rgba(255,143,127,.18);color:var(--tt-a)}
.tt-grid th.tt-gx{background:transparent;color:var(--k-muted,#aab3da)}
.tt-grid td.tt-given{background:var(--k-bg-2,#0c1234);color:var(--k-muted,#aab3da);font-weight:700}
.tt-grid td.tt-solved-cell{background:rgba(98,227,171,.14);color:var(--tt-ok)}
.tt-grid td.tt-pop-cell{animation:tt-pop .45s ease}
.tt-grid td.tt-hl{background:#172057}
.tt-grid td.tt-given.tt-hl{color:var(--k-ink-2,#d5dbf5)}
.tt-grid td.tt-solved-cell.tt-hl{background:rgba(98,227,171,.2)}
.tt-grid th.tt-hl-head{background:var(--tt-p);color:#2a1d05}
.tt-cell{display:grid;place-items:center;width:100%;height:100%;min-width:44px;min-height:44px;padding:0;border-radius:inherit;border:2px dashed rgba(255,143,127,.6);background:rgba(255,143,127,.06);color:var(--k-ink,#f4f6ff);font:900 1.15rem/1 "Manrope",Inter,sans-serif;cursor:pointer}
.tt-cell:hover{background:rgba(255,143,127,.16)}
.tt-cell.tt-sel{border:3px solid var(--tt-p);background:rgba(246,201,108,.18);box-shadow:0 0 0 4px rgba(246,201,108,.2)}
.tt-cell.tt-shake{animation:tt-shake .4s ease}
.tt-gpad-col{display:flex;flex-direction:column;align-items:center;gap:12px}
.tt-gask{margin:0!important;min-height:2.8em;text-align:center;font-weight:800;color:var(--k-ink,#f4f6ff)!important;font-size:1.1rem}

/* ---------- Status ---------- */
.tt-status{padding:12px 16px 12px 46px;border-radius:16px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);min-height:3.2em;position:relative;line-height:1.4;margin-top:20px!important}
.tt-status:before{content:"";position:absolute;left:16px;top:15px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff 0 18%,var(--tt-a) 20%);box-shadow:0 0 12px rgba(255,143,127,.6)}

/* ---------- Win panel ---------- */
.tt-win{position:relative;overflow:hidden;outline:none}
.tt-win:focus-visible{outline:4px solid var(--k-gold,#f6c96c);outline-offset:3px}
.tt-win h3,.tt-win p{position:relative}
.tt-win p{max-width:540px}
.tt-win-actions{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.tt-win-actions .kp-button{flex:0 1 210px}
.tt-wstar{width:56px;height:56px;fill:#2c3770;stroke:#4a568f;stroke-width:1;stroke-linejoin:round}
.tt-wstar-on{fill:var(--k-gold,#f6c96c);stroke:#c79a3a;filter:drop-shadow(0 4px 10px rgba(246,201,108,.45))}
@keyframes tt-star{0%{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.2) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.tt-win:not([hidden]) .tt-wstar{animation:tt-star .5s cubic-bezier(.2,.9,.3,1.3) both}
.tt-win:not([hidden]) .tt-wstar:nth-child(2){animation-delay:.15s}
.tt-win:not([hidden]) .tt-wstar:nth-child(3){animation-delay:.3s}
.tt-confetti{position:absolute;inset:0;pointer-events:none}
.tt-bit{position:absolute;top:-14px;width:12px;height:12px;border-radius:50%;opacity:0}
.tt-bit:nth-child(4n+1){background:var(--k-coral,#ff8f7f)}.tt-bit:nth-child(4n+2){background:var(--k-gold,#f6c96c)}.tt-bit:nth-child(4n+3){background:var(--k-mint,#62e3ab);border-radius:3px}.tt-bit:nth-child(4n){background:var(--k-sky,#7cbcff)}
.tt-bit-0{left:5%}.tt-bit-1{left:13%}.tt-bit-2{left:21%}.tt-bit-3{left:30%}.tt-bit-4{left:38%}.tt-bit-5{left:46%}.tt-bit-6{left:54%}.tt-bit-7{left:62%}.tt-bit-8{left:71%}.tt-bit-9{left:79%}.tt-bit-10{left:87%}.tt-bit-11{left:94%}
@keyframes tt-fall{0%{transform:translateY(0);opacity:1}100%{transform:translateY(260px);opacity:0}}
.tt-win:not([hidden]) .tt-bit{animation:tt-fall 1.9s ease-in both}
.tt-win:not([hidden]) .tt-bit:nth-child(3n+1){animation-delay:.2s;animation-duration:2.2s}
.tt-win:not([hidden]) .tt-bit:nth-child(3n+2){animation-delay:.45s;animation-duration:1.7s}

/* ---------- Facts you know + print ---------- */
.tt-bottom{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;margin-top:22px}
.tt-card{padding:18px;border-radius:22px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62);min-width:0}
.tt-card h3{margin:0 0 4px!important;font-size:1.12rem!important}
.tt-card .kp-small{margin:0 0 12px!important}
.tt-facts{display:grid;grid-template-columns:repeat(11,minmax(0,24px));gap:3px;justify-content:start}
.tt-fh{display:grid;place-items:center;height:20px;font:800 .7rem/1 "Manrope",Inter,sans-serif;color:var(--k-muted,#aab3da)}
.tt-fc{display:block;aspect-ratio:1/1;border-radius:5px;background:#1a2259;border:1px solid #232d6c;transition:background .3s}
.tt-fc.tt-learning{background:var(--tt-p);border-color:var(--tt-p)}
.tt-fc.tt-known{background:var(--tt-ok);border-color:var(--tt-ok);box-shadow:0 0 8px rgba(98,227,171,.45)}
.tt-legend{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:12px 0 0;padding:0;font-size:.86rem;font-weight:700}
.tt-legend li{display:flex;align-items:center;gap:6px;margin:0}
.tt-legend .tt-fc{width:16px;height:16px}
.tt-print-actions{display:flex;flex-direction:column;gap:10px}
.tt-print-actions .kp-button{width:100%;min-height:52px}
.tt-print{display:none}

/* ---------- How to play ---------- */
.tt-howto{margin-top:22px;padding:clamp(18px,3vw,30px);border-radius:28px;background:var(--k-surface,#111944);border:1px solid var(--k-line-soft,#1f2a62)}
.tt-howto h2{margin:0 0 16px!important;font-size:1.35rem!important}
.tt-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tt-steps li{margin:0;padding:16px;border-radius:20px;background:var(--k-bg-2,#0c1234);border:1px solid var(--k-line-soft,#1f2a62)}
.tt-steps strong{color:var(--k-ink,#f4f6ff)}
.tt-step-icon{display:grid;place-items:center;width:44px;height:44px;margin-bottom:10px;border-radius:50%}
.tt-step-icon svg{width:24px;height:24px;fill:#13183f}
.tt-si-3 svg{fill:none;stroke:#13183f;stroke-width:2.2;stroke-linejoin:round}
.tt-si-1{background:var(--k-gold,#f6c96c)}.tt-si-2{background:var(--k-coral,#ff8f7f)}.tt-si-3{background:var(--k-mint,#62e3ab)}

/* ---------- Responsive ---------- */
@media(max-width:900px){
 .tt-ex-main,.tt-grid-play{grid-template-columns:1fr}
 .tt-facts-list{grid-template-columns:repeat(2,minmax(0,1fr))}
 .tt-bottom{grid-template-columns:1fr}
}
@media(max-width:700px){
 .tt-steps{grid-template-columns:1fr}
 /* The flight turns sideways: the rocket flies left to right past the planets. */
 .tt-play{grid-template-columns:1fr}
 .tt-flight{min-height:0;height:118px}
 .tt-track{left:18px;right:18px;top:50%;bottom:auto;border-left:0;border-top:2px dashed rgba(255,255,255,.18)}
 .tt-planet{bottom:auto;top:8px;left:calc(30px + (100% - 110px) * var(--p))!important;right:auto!important;width:56px}
 .tt-planet svg{width:40px;height:40px}
 .tt-pl-mars,.tt-pl-neptune{top:auto;bottom:6px}
 .tt-rocket{left:calc(4px + (100% - 80px) * var(--fuel));bottom:auto;top:50%;margin:-35px 0 0 0;transform:rotate(90deg);transition:left .9s cubic-bezier(.3,1.3,.5,1);width:44px;height:70px}
 @keyframes tt-liftoff-x{0%{translate:0 0}100%{translate:640px 0}}
 .tt-launch .tt-rocket{animation:tt-liftoff-x 1.4s .2s cubic-bezier(.6,0,.8,.6) forwards}
}
@media(max-width:560px){
 .tt-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,8.6em),1fr));width:100%;border-radius:20px}
 .tt-modes button{border-radius:15px;padding:6px 8px;justify-content:center;text-align:center}
 .tt-glevels,.tt-method{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,6em),1fr));width:100%;border-radius:20px}
 .tt-glevels button,.tt-method button{border-radius:15px;padding:6px 8px}
 .tt-ex-side{padding:10px}
 .tt-fact{padding-left:10px;font-size:1rem}
 .tt-num{min-width:48px;min-height:48px;border-radius:14px}
 .tt-ex-tables .tt-num,#tt-ex-tables .tt-num,#tt-tables .tt-num{flex:1 0 48px}
 .tt-array-frame{padding:14px 8px}
 .tt-grid{border-spacing:3px}
 .tt-grid th,.tt-grid td{width:46px;height:46px}
 .tt-g5 th:first-child{width:30px}
 .tt-card{padding:14px}
}
@media(max-width:400px){.tt-facts-list{grid-template-columns:1fr}.tt-choices{gap:8px}}
@media(prefers-reduced-motion:reduce){
 .tt-num,.tt-choice,.tt-fuel li,.tt-fc,.tt-rocket,.tt-array-in,.tt-planet,.tt-skip{transition:none!important}
 .tt-build .tt-row,.tt-build .tt-row .tt-skip,.tt-flame,.tt-planet.tt-pop svg,.tt-question .tt-filled,.tt-choice.tt-wrong,.tt-display.tt-wrong,.tt-cell.tt-shake,.tt-grid td.tt-pop-cell,.tt-spin .tt-array-in,.tt-win:not([hidden]) .tt-wstar,.tt-launch .tt-rocket{animation:none!important}
 .tt-confetti{display:none}
}

/* ---------- Print: a times-table chart (default) or a practice sheet, black on white, A4 ---------- */
@media print{
 @page{size:A4;margin:14mm}
 .kp-header,.kp-footer,.kids-skip,.kp-back,.kg-hero,.kg-toolbar,.tt-modes,.tt-how,.tt-panel,.tt-status,.tt-win,.tt-bottom,.tt-howto,.kg-grownups{display:none!important}
 .kg-stage.tt-stage{background:#fff!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important}
 .tt-print{display:block;color:#000}
 #kids-times[data-print="sheet"] .tt-print-chart,#kids-times:not([data-print="sheet"]) .tt-print-sheet{display:none!important}
 .tt-print-title{font:800 24pt/1.2 "Manrope",Inter,sans-serif;text-align:center;margin:0 0 6mm!important}
 .tt-chart{width:100%;table-layout:fixed;border-collapse:collapse;font:700 15pt/1 "Manrope",Inter,sans-serif;break-inside:avoid}
 .tt-chart th,.tt-chart td{border:.4mm solid #000;height:13mm;text-align:center;padding:0}
 .tt-chart th{background:#e6e6e6!important;font-weight:900;-webkit-print-color-adjust:exact;print-color-adjust:exact}
 .tt-chart td.tt-sq{font-weight:900;text-decoration:underline}
 .tt-print-foot{margin:5mm 0 0!important;font-size:11pt;text-align:center}
 .tt-sheet-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4mm;font-size:12pt;margin:0 0 5mm!important}
 .tt-print-sheet h4{font:800 14pt/1.2 "Manrope",Inter,sans-serif;margin:5mm 0 3mm!important}
 .tt-sheet-list{columns:3;column-gap:8mm;margin:0;padding-left:8mm;font:600 14pt/2.1 "Manrope",Inter,sans-serif}
 .tt-sheet-list li{break-inside:avoid}
 .tt-sheet-missing{columns:2}
 .tt-sheet-grid{width:110mm;margin:0 auto}
 .tt-sheet-grid th,.tt-sheet-grid td{height:14mm}
}