/* KN Time Adviser game. Every rule is scoped to #knt so nothing here touches the rest of the site.
   Cards, buttons and chips keep dark lettering on pastel in both themes; outer borders follow --line. */
#knt{--k:#24202A;--blue:#cfe8ff;--green:#d4f5c9;--yel:#fff1a8;--peach:#ffd8b0;--pink:#ffd3e2;font-family:Nunito,system-ui,sans-serif;line-height:1.45}
#knt h2,#knt h3{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-weight:400;margin:0;text-shadow:none;line-height:1.15}
#knt h2{font-size:1.5rem;margin:.35rem 0 .3rem}#knt h3{font-size:1.15rem;margin:.8rem 0 .4rem}
#knt b{font-family:inherit;font-weight:800}
#knt p{margin:.6rem 0}
#knt .small{font-size:.88rem;font-weight:700}
#knt .kc{border:.1875rem solid var(--line);border-radius:1.125rem;padding:1rem;box-shadow:.25rem .3rem 0 var(--shadow);margin:1rem 0;color:var(--k)}
#knt .blue{background:var(--blue)}#knt .green{background:var(--green)}#knt .yel{background:var(--yel)}#knt .peach{background:var(--peach)}#knt .pink{background:var(--pink)}
#knt .kh{margin:.4rem 0 0;padding-left:1.3rem}#knt .kh li{margin:.35rem 0}
#knt .btn{font:800 1rem/1.3 Nunito,system-ui,sans-serif;border:.1875rem solid var(--k);border-radius:.875rem;padding:.75rem 1rem;background:#fff;color:var(--k);cursor:pointer;box-shadow:.1875rem .1875rem 0 var(--k);transition:transform .08s}
#knt .btn:active{transform:translate(.125rem,.125rem);box-shadow:.0625rem .0625rem 0 var(--k)}
#knt .btn:focus-visible{outline:.25rem solid #75D1EF;outline-offset:.1875rem}
#knt .btn.big{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-weight:400;font-size:1.3rem;background:#FF7A1A;color:#fff;padding:.8rem 1.6rem}
#knt .btn.sm{font-size:.9rem;padding:.5rem .8rem}
#knt .btn:disabled{opacity:.45;cursor:not-allowed}
#knt .kt-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}
#knt .kt-go{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;color:var(--ink)}
#knt .kt-next{text-align:right;margin-top:.8rem}

/* start screen */
#knt .kt-topics{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.6rem}
#knt .tp{display:flex;gap:.6rem;align-items:center;text-align:left;background:#fff}
#knt .tp .tk{flex:none;width:1.4rem;height:1.4rem;border:.15rem solid var(--k);border-radius:.4rem;background:#fff;display:grid;place-items:center;font-size:1rem;line-height:1}
#knt .tp.on{background:#FFE16D}#knt .tp.on .tk{background:#4cc35a}#knt .tp.on .tk::after{content:"✓";color:#fff;font-weight:900}
#knt .lv{text-align:left;min-width:11rem;flex:1 1 11rem}#knt .lv.on{background:#FFE16D}
#knt #kt-code{font:800 1rem Nunito,system-ui,sans-serif;border:.15rem solid var(--k);border-radius:.6rem;padding:.3rem .5rem;width:5.5rem;background:#fff;color:var(--k)}

/* layout: side (meters, time machine, track) and main (the mission) */
#knt .kt-lay{display:grid;gap:0 1.25rem}
#knt .kt-side,#knt .kt-main{min-width:0}
#knt .kt-hud{display:flex;justify-content:space-between;gap:.5rem;font-size:.85rem;font-weight:800;color:var(--ink);flex-wrap:wrap}
#knt .kt-meters{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr);gap:.35rem;margin:.4rem 0}
#knt .kt-m{background:#fff;color:var(--k);border:.15rem solid var(--line);border-radius:.75rem;padding:.3rem .45rem;font-size:.78rem;font-weight:800;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.1rem .4rem}
#knt .kt-m .nm{white-space:nowrap}
#knt .kt-m .v{font-size:1rem}
#knt .kt-m .bar{order:3;flex:1 1 100%;height:.5625rem;border-radius:.5625rem;background:#eee;border:.09rem solid var(--k);overflow:hidden}
#knt .kt-m .bar i{display:block;height:100%;transition:width .5s,background .5s}
#knt .kt-m.bump{animation:ktbump .5s}
@keyframes ktbump{40%{transform:scale(1.08)}}
#knt .kt-portal{margin:.5rem auto;max-width:22rem}
#knt .kt-portal svg{display:block;width:100%;height:auto}
#knt .kt-portal .spin{transform-origin:160px 96px;animation:ktspin 14s linear infinite}
#knt .kt-portal .spin.rev{animation-duration:9s;animation-direction:reverse}
@keyframes ktspin{to{transform:rotate(360deg)}}
#knt .kt-portal .pb{font:400 2.1rem "Lilita One","Arial Rounded MT Bold",Impact,sans-serif;fill:#24202A}
#knt .kt-portal .ps{font:800 .72rem Nunito,system-ui,sans-serif;fill:#24202A}
#knt .kt-portal .pi{font-size:1.05rem}
#knt .kt-place{text-align:center;font-weight:800;color:var(--ink);font-size:.95rem;margin-top:.25rem}
#knt .kt-track{display:flex;gap:.25rem;justify-content:center;flex-wrap:wrap;margin:.5rem 0}
#knt .kt-prog{min-width:0}
#knt .pip{width:1.7rem;height:1.7rem;border-radius:50%;border:.14rem solid var(--line);background:#fff;color:var(--k);display:grid;place-items:center;font-size:.75rem;font-weight:800}
#knt .pip.sq{border-radius:.45rem}
#knt .pip.ok{background:#4cc35a;color:#fff}#knt .pip.no{background:#ff6b5b;color:#fff}#knt .pip.half{background:#ffc93c}#knt .pip.now{background:#FFE16D;transform:scale(1.15)}
@media (min-width:900px){
 #knt .kt-lay{grid-template-columns:minmax(0,min(38%,24rem)) minmax(0,1fr);align-items:start}
 #knt .kt-side{position:sticky;top:.75rem}
 #knt .kt-main>:first-child{margin-top:1.55rem}
}
@media (max-width:899px){
 #knt .kt-side{display:contents}
 #knt .kt-meters{position:sticky;top:0;z-index:5;background:var(--bg);padding:.35rem 0;margin:.2rem 0 0}
 #knt .kt-portal{display:none}
 #knt .kt-bot{margin:.3rem 0 0}
 #knt .kt-shelf{display:none}
 #knt .kt-track{margin:.3rem 0 0}
 #knt .kt-main>.kc:first-child{margin-top:.6rem}
}

/* mission */
#knt .kt-scene{margin:0 0 .6rem}
#knt .kt-scene svg{display:block;width:100%;height:auto;max-height:9.5rem}
#knt .tagk{display:inline-block;background:#fff;border:.125rem solid var(--k);border-radius:99rem;padding:0 .6rem;font-size:.8rem;font-weight:800}
#knt .when{font-weight:800;margin:.1rem 0 .4rem}
#knt .q{font-size:1.08rem}
#knt .choices{display:grid;gap:.7rem;margin:.8rem 0}
#knt .choice{text-align:left;width:100%}
#knt .choice:nth-child(2){background:#fffbe8}#knt .choice:nth-child(3){background:#f2fbff}
#knt .choice.struck{text-decoration:line-through}
#knt .choice.right{background:#b9f0a8;opacity:1}#knt .choice.wrong{background:#ffb9ae;opacity:1}
#knt .ord{display:flex;gap:.6rem;align-items:center}
#knt .num{flex:none;width:1.7rem;height:1.7rem;border-radius:50%;border:.14rem solid var(--k);background:#fff;display:grid;place-items:center;font-weight:900;font-size:.9rem}
#knt .ord.on{background:#FFE16D}#knt .ord.on .num{background:#FF7A1A;color:#fff}
#knt .row{display:flex;gap:.6rem;align-items:center;background:#fff;border:.15rem solid var(--k);border-radius:.875rem;padding:.55rem .8rem}
#knt .row.ok .num{background:#4cc35a;color:#fff}#knt .row.no .num{background:#ff6b5b;color:#fff}
#knt .fb{border:.15rem solid var(--k);border-radius:.875rem;padding:.2rem .8rem;background:#fff;margin-top:.6rem;animation:ktin .25s}
#knt .fb.bad{background:#fff3ef}#knt .fb.good{background:#f3fff0}
@keyframes ktin{from{opacity:0;transform:translateY(.4rem)}}
#knt .verdict{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-size:1.2rem}
#knt .chip{display:inline-block;border:.12rem solid var(--k);border-radius:99rem;padding:.05rem .6rem;font-size:.85rem;font-weight:800;margin:0 .3rem .3rem 0;background:#fff}
#knt .chip.up{background:#d4f5c9}#knt .chip.dn{background:#ffc9c0}
#knt .real{background:var(--yel);border:.15rem solid var(--k);border-radius:.75rem;padding:.2rem .8rem;margin:.6rem 0}
#knt .real h3{margin-top:.5rem}

/* results */
#knt .kt-end{text-align:center}#knt .kt-end .kt-row{justify-content:center}
#knt .big-ic{font-size:3.2rem;line-height:1}
#knt .nb{background:#fff;border:.15rem solid var(--k);border-radius:.75rem;padding:.5rem .8rem;margin:.5rem 0}
#knt .nb.no{background:#fff3ef}
#knt .nb summary{cursor:pointer;font-weight:700}
#knt .nb ol{margin:.5rem 0;padding-left:1.3rem}

/* Tick the time-bot */
#knt .kt-bot{display:flex;gap:.5rem;align-items:center;background:#fff;color:var(--k);border:.15rem solid var(--line);border-radius:.875rem;padding:.3rem .6rem;margin:.5rem 0;animation:ktin .25s}
#knt .kt-bot svg{flex:none;width:2.6rem;height:2.9rem}
#knt .kt-bot p{margin:0;font-size:.92rem;font-weight:700}
#knt .kt-bot.wow svg{animation:ktbob .5s 2}
@keyframes ktbob{50%{transform:translateY(-.25rem) rotate(-6deg)}}
#knt .kt-intro .kt-bot{margin-top:0}
#knt .kt-how{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));margin-top:.6rem}
#knt .kt-how>div{display:flex;gap:.6rem;align-items:flex-start;background:#fff;border:.15rem solid var(--k);border-radius:.875rem;padding:.5rem .7rem}
#knt .kt-how span{font-size:1.6rem;line-height:1.2}#knt .kt-how p{margin:0;font-size:.95rem}
#knt .sndb{font:inherit;background:#fff;border:.12rem solid var(--line);border-radius:.5rem;padding:0 .3rem;cursor:pointer;line-height:1.4}
/* museum */
#knt .kt-shelf{display:flex;flex-wrap:wrap;gap:.3rem;justify-content:center;align-items:center;min-height:2.6rem;background:var(--paper);color:var(--ink);border:.15rem dashed var(--line);border-radius:.875rem;padding:.3rem .5rem;margin:.4rem 0}
#knt .art{width:2.1rem;height:2.1rem;background:#FFF9F1;border:.12rem solid #24202A;border-radius:.5rem;display:inline-grid;place-items:center}
#knt .art.new{animation:ktpop .5s}
#knt .art svg{width:1.7rem;height:1.7rem;display:block}
@keyframes ktpop{from{transform:scale(0) rotate(-40deg)}70%{transform:scale(1.25)}}
#knt .kt-shelf.big{background:#fff;color:var(--k);border-color:var(--k);gap:.6rem;padding:.6rem}
#knt .kt-shelf.big .art{width:3rem;height:3rem}#knt .kt-shelf.big .art svg{width:2.5rem;height:2.5rem}
#knt .artw{display:inline-flex;flex-direction:column;align-items:center;font-weight:800}
/* where next */
#knt .kt-dest h3{margin:.9rem 0 .5rem}
#knt .kt-dests{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
#knt .dest{display:flex;gap:.6rem;align-items:center;text-align:left;font-weight:700}
#knt .dest b{font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-weight:400;font-size:1.25rem}
#knt .dest .di{font-size:1.8rem;line-height:1}
#knt .dest:hover,#knt .tp:hover,#knt .choice:not(:disabled):hover{transform:translate(-.0625rem,-.0625rem)}
#knt .btn.big.boss{background:#7b4dff}
/* juice */
#knt .kt-conf{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}
#knt .kt-conf i{position:absolute;top:-1rem;width:.6rem;height:1rem;border-radius:.15rem;animation:ktfall 1.2s ease-in forwards}
@keyframes ktfall{to{transform:translateY(105vh) rotate(540deg)}}
#knt .shake{animation:ktshake .4s}
@keyframes ktshake{20%{transform:translateX(-.5rem) rotate(-.6deg)}40%{transform:translateX(.5rem) rotate(.6deg)}60%{transform:translateX(-.3rem)}80%{transform:translateX(.3rem)}}
/* rift rush */
#knt .kt-pair{display:grid;gap:.5rem;margin:.6rem 0}
#knt .kt-pair .or{text-align:center;font-family:"Lilita One","Arial Rounded MT Bold",Impact,sans-serif;font-size:1.1rem}
#knt .pr{display:flex;justify-content:space-between;gap:.6rem;align-items:center;min-height:4rem;font-size:1.05rem}
#knt .pr .dt{flex:none;background:#fff;border:.12rem solid var(--k);border-radius:99rem;padding:0 .5rem}
#knt .pr.dim{opacity:.6}
#knt .kt-pair .row{margin:0}
#knt .kt-dots{display:flex;gap:.3rem;min-height:1.6rem}
#knt .kt-dots span{width:1.5rem;height:1.5rem;border-radius:50%;border:.12rem solid var(--k);display:grid;place-items:center;font-size:.8rem;font-weight:900;color:#fff}
#knt .kt-dots .ok{background:#4cc35a}#knt .kt-dots .no{background:#ff6b5b}
/* land the time machine */
#knt .kt-land .yr{font:400 3rem/1 "Lilita One","Arial Rounded MT Bold",Impact,sans-serif;text-align:center;background:#fff;border:.1875rem solid var(--k);border-radius:1rem;padding:.4rem;max-width:12rem;margin:.4rem auto;box-shadow:.1875rem .1875rem 0 var(--k)}
#knt #kt-sl{width:100%;height:2.4rem;accent-color:#FF7A1A;cursor:pointer;margin:.3rem 0 0}
#knt .rng{display:flex;justify-content:space-between;font-size:.85rem;font-weight:800}
#knt .nudge{justify-content:center;margin:.4rem 0}
/* boss */
#knt .kt-boss{text-align:center}
#knt .kt-boss svg{width:min(11rem,55%);height:auto;animation:ktfloat 2.4s ease-in-out infinite}
#knt .kt-boss.hurt svg{animation:ktshake .4s}
@keyframes ktfloat{50%{transform:translateY(-.4rem)}}
#knt .kt-boss .hp{font-size:1.5rem;letter-spacing:.15rem}
@media (prefers-reduced-motion:reduce){#knt .spin,#knt .fb,#knt .kt-m.bump,#knt .kt-bot,#knt .kt-bot svg,#knt .art.new,#knt .kt-boss svg,#knt .shake{animation:none}}
@media (max-width:899px){#knt .kt-side .kt-shelf{display:none}}
@media (max-width:420px){#knt h2{font-size:1.3rem}#knt .kt-m{font-size:.7rem}}
@media print{#knt{display:none}}