/* makekite games: game shell + engines + hub cards. All art is CSS/SVG drawn in code. */
.mkg{--ok:#18a058;--no:#e5484d;position:relative;background:#fff;border:1px solid #d4e7f2;border-radius:16px;box-shadow:0 6px 24px rgba(18,52,82,.07);margin:18px 0 28px;overflow:hidden;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.mkg button{font:inherit}
.mkg-bar[hidden]{display:none}
.mkg-bar{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:10px 14px;background:linear-gradient(90deg,#123452,#1d4d78);color:#fff;font-size:.95rem}
.mkg-bar b{font-size:1.1rem}.mkg-hm{flex:1;text-align:center}.mkg-ht.low b{color:#ffb4ae}
.mkg-icon{background:#ffffff1f;color:#fff;border-radius:8px;padding:5px 10px;font-size:.9rem}.mkg-icon:hover{background:#ffffff38}
.mkg-stage{min-height:340px;padding:18px clamp(12px,3vw,26px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.mkg-msg{min-height:2.6em;padding:8px 14px;text-align:center;font-weight:700;border-top:1px solid #edf5fa;font-size:1rem}
.mkg-msg.good{background:#e8f8ee;color:#0e6b39}.mkg-msg.bad{background:#fdeceb;color:#a3201f}
.mkg-start,.mkg-end{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;max-width:640px}
.mkg-start-icon{font-size:3.2rem;line-height:1}
.mkg-goal{font-size:1.15rem;font-weight:700;margin:4px 0}.mkg-pick{margin:4px 0;color:#4a6a82}
.mkg-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:100%}
.mkg-level{display:flex;flex-direction:column;gap:2px;background:#f4fafd;color:var(--navy);border:2px solid #cfe3ee;border-radius:12px;padding:12px;text-align:center}
.mkg-level:hover,.mkg-level:focus-visible{background:#fff8e2;border-color:var(--yellow)}
.mkg-level b{font-size:1.05rem}.mkg-level small{font-weight:500;color:#4a6a82;font-size:.82rem;line-height:1.35}.mkg-level em{font-style:normal;font-size:.75rem;color:#0b6aa8}
.mkg-note{font-size:.85rem;color:#4a6a82;margin:6px 0 0}
.mkg-end h2{margin:.2em 0 0}.mkg-big{font-size:1.4rem;margin:0}.mkg-big b{font-size:2.6rem;color:var(--coral)}
.mkg-best{margin:0;font-weight:700;color:#0b6aa8;min-height:1.2em}
.mkg-lines{list-style:none;padding:0;margin:4px 0 8px}.mkg-lines li{margin:2px 0}
.mkg-endbtns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.mkg-primary{background:var(--coral);color:#fff;border-radius:10px;padding:12px 22px;font-weight:800;font-size:1.05rem}.mkg-primary:hover{background:#e85750}
.mkg-secondary{background:#edf6fb;color:var(--navy);border:2px solid #cfe3ee;border-radius:10px;padding:10px 16px;font-weight:700}.mkg-secondary:hover{background:#dff0fa}
.mkg button:disabled{opacity:.75;cursor:default}
/* question + answers */
.mkg-q{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%}
.mkg-qt{font-size:clamp(1.3rem,4.5vw,2rem);font-weight:800;line-height:1.3}
.mkg-pre{max-width:100%}.mkg-pre svg{max-width:100%;height:auto}
.mkg-box{display:inline-block;min-width:1.6em;padding:0 .2em;border:3px dashed var(--blue);border-radius:8px;color:var(--blue)}
.mkg-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;width:min(640px,100%)}
.mkg-opt{position:relative;background:#f4fafd;color:var(--navy);border:2px solid #cfe3ee;border-radius:12px;padding:14px 12px;font-size:1.15rem;font-weight:700;min-height:58px;line-height:1.25}
.mkg-opt i{position:absolute;top:4px;left:7px;font-style:normal;font-size:.7rem;color:#7b97ab}
.mkg-opt:hover:not(:disabled){background:#fff8e2;border-color:var(--yellow)}
.mkg-opt.right,.right{background:#dff6e7!important;border-color:var(--ok)!important;color:#0e5a31!important}
.mkg-opt.wrong,.wrong{background:#fde3e2!important;border-color:var(--no)!important;color:#8f1c1b!important}
.mkg-sym .mkg-opt{font-size:2rem}.mkg-emo .mkg-opt{font-size:2rem}.mkg-claps .mkg-opt{font-size:1.4rem}
.mkg-ans{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.mkg-ans input{font:inherit;font-size:1.6rem;font-weight:800;width:min(260px,60vw);text-align:center;padding:8px 12px;border:3px solid var(--sky);border-radius:12px;color:var(--navy);background:#fff}
.mkg-ans input:focus{outline:0;border-color:var(--blue)}.mkg-prefix{font-size:1.6rem;font-weight:800}
.mkg-pad{display:grid;grid-template-columns:repeat(3,64px);gap:6px}
.mkg-padk{background:#edf6fb;color:var(--navy);border:2px solid #cfe3ee;border-radius:10px;font-size:1.3rem;font-weight:800;padding:8px 0}
@media (pointer:fine){.mkg-pad{display:none}}
.mkg-frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05;margin:0 .15em;font-weight:800}
.mkg-frac span:first-child{border-bottom:3px solid currentColor;padding:0 .15em}
.mkg-fq .mkg-opt{font-size:1.6rem}
.mkg-count{font-size:clamp(1.8rem,7vw,2.6rem);line-height:1.3;letter-spacing:.06em}.mkg-count .gap{display:inline-block;width:.6em}
.mkg-word{font-size:clamp(2rem,8vw,3rem)}
.mkg-seq{font-size:clamp(1.5rem,6vw,2.2rem);font-weight:800;margin-top:6px;letter-spacing:.04em}.mkg-seq.emo{letter-spacing:.12em}
.mkg-seq u{text-decoration-thickness:4px;color:var(--coral)}
.mkg-rom{font-family:Georgia,serif;letter-spacing:.06em}
.mkg-clock{width:min(240px,62vw);height:auto}.mkg-shape{width:150px;height:150px}.mkg-graph{width:min(380px,92vw)}.mkg-grid{width:min(300px,84vw)}.mkg-compass{width:170px}
.mkg-cap{margin:0;font-size:.9rem;color:#4a6a82}
.mkg-menu{list-style:none;padding:0;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:4px 16px;max-width:520px;text-align:left;background:#fffaf0;border:2px dashed #e8c77a;border-radius:10px;padding:10px 14px}
.mkg-menu li{display:flex;justify-content:space-between;gap:8px;font-size:.95rem}
.mkg-tuck .mkg-qt{font-size:1.25rem}
.mkg-say{margin-top:2px}
.mkg-cmp{white-space:nowrap}
@keyframes mkg-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.shake{animation:mkg-shake .3s 2}
@keyframes mkg-pop{0%{transform:scale(.7)}100%{transform:scale(1)}}
/* number line */
.mkg-target{font-size:clamp(1.3rem,4.5vw,1.9rem);font-weight:800}
.mkg-nl{width:100%;max-width:820px;height:auto;cursor:pointer;touch-action:none}
@keyframes mkg-boing{0%{transform:translateY(0)}40%{transform:translateY(-28px)}100%{transform:translateY(0)}}
.mkg-nl .boing{animation:mkg-boing .4s ease-out}
.mkg-hint{font-size:.85rem;color:#4a6a82;margin:0}
/* clock setter */
.mkg-clockset{display:flex;flex-direction:column;align-items:center;gap:10px}
.mkg-clockset svg{width:min(260px,70vw);touch-action:none;cursor:grab}
.mkg-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center}
.mkg-digital{font-family:ui-monospace,Consolas,monospace;font-size:1.4rem;background:#123452;color:#87d7f7;border-radius:8px;padding:2px 12px}
/* coins */
.mkg-tray,.mkg-purse{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;min-height:70px;width:100%;max-width:700px;border-radius:12px;padding:10px}
.mkg-tray{background:#f4fafd;border:2px solid #cfe3ee}.mkg-purse{background:#fffaf0;border:2px dashed #e8c77a}
.mkg-coinb{background:none;border:0;padding:2px;border-radius:50%;line-height:0}.mkg-coinb:hover,.mkg-coinb:focus-visible{background:#fff1c4}
.mkg-coinb .mkg-note{width:92px;height:46px}.mkg-coinb.note{border-radius:8px}
.mkg-purse .mkg-coinb{animation:mkg-pop .2s}
.mkg-total{font-weight:800;font-size:1.1rem}
.mkg-shown{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;max-width:600px}
/* pizza fractions */
.mkg-pizzas{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;align-items:center}
.mkg-pizza{width:min(240px,64vw);height:auto}.mkg-pizzas .small .mkg-pizza{width:min(170px,40vw)}
.mkg-slice{cursor:pointer;transition:fill .15s}.mkg-slice:hover{filter:brightness(.95)}.mkg-slice:focus{outline:none;stroke:#3ca9e8;stroke-width:5}
/* place value blocks */
.mkg-blocks{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;align-items:flex-end;min-height:120px;width:100%;background:#f4fafd;border-radius:12px;padding:12px}
.mkg-bcol{display:flex;flex-direction:column;align-items:center;gap:6px}.mkg-bcol>div{display:flex;flex-wrap:wrap;gap:3px;max-width:150px;justify-content:center;align-items:flex-end}
.mkg-bcol small{font-weight:800}
.b-th{width:44px;height:44px;background:#6f63d9;border:2px solid #123452;border-radius:4px;box-shadow:4px -4px 0 #9c93ea;margin:4px 4px 0 0}
.b-h{width:42px;height:42px;background-color:#3ca9e8;background-image:linear-gradient(#123452 1px,transparent 1px),linear-gradient(90deg,#123452 1px,transparent 1px);background-size:4.2px 4.2px;border:2px solid #123452}
.b-t{width:8px;height:42px;background-color:#7ccf8a;background-image:linear-gradient(#123452 1px,transparent 1px);background-size:8px 4.2px;border:1.5px solid #123452}
.b-o{width:9px;height:9px;background:#ffd45e;border:1.5px solid #123452}
.mkg-pvbtns{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;width:min(620px,100%)}
.mkg-pvbtns div{display:flex;gap:4px;align-items:center;justify-content:center;background:#fff;border:1px solid #d4e7f2;border-radius:10px;padding:6px}
.mkg-pvbtns span{min-width:5.5em;font-weight:700;font-size:.9rem}
.mkg-pvbtns button{padding:6px 12px;font-size:1.1rem}
/* sort */
.mkg-card{background:#fff;border:3px solid var(--navy);border-radius:14px;padding:14px 22px;font-size:clamp(1.3rem,5vw,1.9rem);font-weight:800;box-shadow:0 6px 0 #cfe3ee;cursor:grab;touch-action:none;min-width:120px;animation:mkg-pop .25s}
.mkg-card svg{width:120px;height:auto;display:block;margin:auto}
.mkg-card.drag{position:fixed;z-index:50;pointer-events:none;opacity:.9;transform:rotate(-3deg)}
.mkg-bins{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;width:100%;max-width:760px}
.mkg-bin{display:flex;flex-direction:column;align-items:center;gap:2px;background:#f4fafd;color:var(--navy);border:3px dashed #9cc4e0;border-radius:14px;padding:12px 8px;min-height:110px}
.mkg-bin:hover,.mkg-bin.over{background:#fff8e2;border-color:var(--yellow)}
.mkg-bin .ic{font-size:1.8rem;line-height:1}.mkg-bin b{font-size:1rem}.mkg-bin em{font-style:normal;font-size:.75rem;color:#4a6a82}
.mkg-bin i{font-style:normal;font-size:.7rem;color:#7b97ab}
/* order */
.mkg-slots,.mkg-pool{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:100%;max-width:760px;min-height:56px;padding:8px;border-radius:12px}
.mkg-slots{background:#f4fafd;border:2px solid #cfe3ee}.mkg-pool{background:#fffaf0;border:2px dashed #e8c77a}
.mkg-chip{position:relative;background:#fff;color:var(--navy);border:2px solid var(--navy);border-radius:10px;padding:8px 14px;font-weight:800;font-size:1.05rem;min-width:44px;min-height:44px}
.mkg-chip i{position:absolute;top:-8px;left:-6px;font-style:normal;font-size:.65rem;background:#cfe3ee;border-radius:8px;padding:0 5px}
.mkg-slot{min-width:60px;min-height:44px;border:2px dashed #9cc4e0;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#9cc4e0;font-weight:800}
.mkg-ends{display:flex;justify-content:space-between;width:100%;max-width:760px;font-size:.8rem;font-weight:700;color:#4a6a82}
.mkg-oq{font-size:1.25rem;font-weight:800;margin:0}
/* match */
.mkg-cards{display:grid;gap:8px;width:100%;max-width:640px}
.mkg-mc{aspect-ratio:1/1;border-radius:12px;border:0;padding:4px;font-weight:800;font-size:clamp(.85rem,3.2vw,1.2rem);line-height:1.15;perspective:600px;background:none}
.mkg-mc>span{position:relative;display:block;width:100%;height:100%;transition:transform .35s;transform-style:preserve-3d}
.mkg-mc .f,.mkg-mc .b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:12px;backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:4px;overflow:hidden}
.mkg-mc .b{background:repeating-linear-gradient(45deg,#3ca9e8 0 10px,#53b5ed 10px 20px);border:3px solid #123452;color:#fff;font-size:1.6rem}
.mkg-mc .f{background:#fff;border:3px solid #123452;transform:rotateY(180deg);color:var(--navy)}
.mkg-mc.up>span{transform:rotateY(180deg)}
.mkg-mc.done .f{background:#dff6e7;border-color:var(--ok)}
.mkg-mc .emo{font-size:clamp(1.6rem,7vw,2.6rem)}
.mkg-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px 28px;width:100%;max-width:640px}
.mkg-cols .mkg-opt{font-size:1rem;min-height:50px}.mkg-opt.sel{background:#fff1c4;border-color:#e5b500}
.mkg-opt.done{opacity:.55}
/* spelling */
.mkg-tiles{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.mkg-tile{width:48px;height:52px;border-radius:10px;background:#fff6d6;border:2px solid #b8913a;box-shadow:0 4px 0 #b8913a;color:var(--navy);font-size:1.5rem;font-weight:900;text-transform:uppercase;padding:0}
.mkg-tile.used{visibility:hidden}
.mkg-blank{display:inline-flex;width:44px;height:50px;align-items:center;justify-content:center;border-bottom:4px solid var(--navy);font-size:1.6rem;font-weight:900;text-transform:uppercase;margin:0 2px}
.mkg-blank.fill{color:var(--blue)}.mkg-blank.cur{border-color:var(--coral);background:#fff3f2}
.mkg-wordrow{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.mkg-clue{font-size:1.05rem;color:#355670;margin:0;max-width:560px}.mkg-emoji{font-size:3.4rem;line-height:1}
.mkg-kb{display:flex;flex-direction:column;gap:5px;align-items:center;width:100%}
.mkg-kb div{display:flex;gap:4px;justify-content:center}
.mkg-kb button{width:clamp(26px,8vw,40px);height:44px;padding:0;border-radius:8px;background:#edf6fb;color:var(--navy);border:2px solid #cfe3ee;font-weight:800;text-transform:uppercase}
.mkg-kb button.hit{background:#dff6e7;border-color:var(--ok)}.mkg-kb button.miss{background:#eee;color:#aaa}
.mkg-kite{width:150px;height:auto}
/* pop-up (tap the right ones) */
.mkg-holes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(480px,100%)}
.mkg-hole{position:relative;aspect-ratio:4/3;border-radius:50% 50% 18px 18px;background:radial-gradient(ellipse at 50% 85%,#5b3a1e 0 32%,#8a5a2f 33% 46%,#cfe8c5 47%);border:0;overflow:hidden;padding:0}
.mkg-hole span{position:absolute;left:50%;bottom:10%;transform:translate(-50%,120%);transition:transform .18s;background:#fff;border:3px solid #123452;border-radius:14px;padding:6px 10px;font-weight:900;font-size:clamp(1rem,4.5vw,1.5rem);white-space:nowrap;color:#123452}
.mkg-hole.up span{transform:translate(-50%,0)}.mkg-hole.hit span{background:#dff6e7;border-color:var(--ok)}.mkg-hole.oops span{background:#fde3e2;border-color:var(--no)}
.mkg-hole i{position:absolute;top:4px;left:8px;font-style:normal;font-size:.65rem;color:#4a6a82}
.mkg-rule{font-size:1.3rem;font-weight:800;margin:0}
/* number hunt */
.mkg-hunt{display:grid;gap:6px;width:min(440px,100%)}
.mkg-hunt button{aspect-ratio:1/1;background:#f4fafd;color:var(--navy);border:2px solid #cfe3ee;border-radius:10px;font-size:clamp(1rem,4.5vw,1.5rem);font-weight:900;padding:0}
.mkg-hunt button.done{background:#dff6e7;border-color:var(--ok);color:#7cb08f}
/* typing */
.mkg-typeline{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:clamp(1.1rem,4vw,1.7rem);background:#f4fafd;border:2px solid #cfe3ee;border-radius:12px;padding:12px 16px;max-width:100%;line-height:1.6;text-align:left;word-break:break-word;white-space:pre-wrap}
.mkg-typeline span.d{color:#18a058}.mkg-typeline span.c{background:#ffd45e;border-radius:3px;outline:2px solid #e5b500}.mkg-typeline span.e{background:#fde3e2;color:#a3201f}
.mkg-keys{display:flex;flex-direction:column;gap:4px;align-items:center}
.mkg-keys div{display:flex;gap:4px}
.mkg-keys span{width:clamp(22px,6.4vw,40px);height:clamp(24px,6.4vw,40px);display:flex;align-items:center;justify-content:center;border-radius:6px;background:var(--fc,#edf6fb);border:1px solid #9cc4e0;font-size:.8rem;font-weight:800;text-transform:uppercase}
.mkg-keys span.next{outline:3px solid #ff6b61;transform:translateY(-2px)}.mkg-keys span.home{text-decoration:underline}
.mkg-keys span.sp{width:min(260px,60vw)}
.mkg-hidin{position:absolute;opacity:0;width:1px;height:1px;left:-10px}
.mkg-sky{position:relative;width:100%;max-width:700px;height:330px;background:linear-gradient(#dff2fc,#f4fafd);border:2px solid #cfe3ee;border-radius:14px;overflow:hidden}
.mkg-fw{position:absolute;padding:4px 10px;background:#fff;border:2px solid #123452;border-radius:20px;font-family:ui-monospace,Consolas,monospace;font-weight:800;font-size:1.1rem;white-space:nowrap}
.mkg-fw b{color:#18a058}
.mkg-ground{position:absolute;left:0;right:0;bottom:0;height:10px;background:#7ccf8a}
.mkg-typed{font-family:ui-monospace,Consolas,monospace;font-size:1.4rem;font-weight:800;min-height:1.6em;border-bottom:3px solid #123452;min-width:200px}
/* map */
.mkg-map{width:100%;max-width:820px;height:auto;background:#cfeaf8;border-radius:12px;border:2px solid #9cc4e0;touch-action:manipulation}
.mkg-map .rg{fill:#f2e7c9;stroke:#8a7a55;stroke-width:1;cursor:pointer;transition:fill .15s}
.mkg-map .rg:hover,.mkg-map .rg.cur{fill:#ffe9a3}
.mkg-map .rg.ok{fill:#9fdcb0}.mkg-map .rg.bad{fill:#f7b4b0}.mkg-map .rg.show{fill:#7ccf8a}
.mkg-map .bgl{fill:#e9e2cf;stroke:#a89c7a;stroke-width:.8}
.mkg-map .pt{fill:#ff6b61;stroke:#123452;stroke-width:2;cursor:pointer}
.mkg-map .pt.ok{fill:#18a058}.mkg-map .pt.cur{stroke:#e5b500;stroke-width:4}.mkg-map .pt.show{fill:#18a058;stroke:#fff}
.mkg-map .ptq{font-size:12px;font-weight:900;fill:#fff;pointer-events:none}
.mkg-map .lab{font-size:11px;font-weight:800;fill:#123452;pointer-events:none;paint-order:stroke;stroke:#ffffffcc;stroke-width:3px}
/* puzzles */
.mkg-slide{display:grid;gap:5px;width:min(400px,92vw);aspect-ratio:1/1;background:#123452;padding:6px;border-radius:12px}
.mkg-slide button{border-radius:8px;font-size:clamp(1.1rem,5vw,1.8rem);font-weight:900;color:#123452;padding:0;background:linear-gradient(135deg,#fff 0,#ddeefa 100%);border:0}
.mkg-slide button.blank{visibility:hidden}.mkg-slide button.home{background:linear-gradient(135deg,#fffbe6,#ffe9a3)}
.mkg-hanoi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:min(640px,100%)}
.mkg-peg{position:relative;height:230px;background:none;border:2px solid transparent;border-radius:12px;display:flex;flex-direction:column-reverse;align-items:center;padding:0 0 14px}
.mkg-peg:before{content:"";position:absolute;bottom:14px;top:20px;left:50%;width:10px;margin-left:-5px;background:#8a5a2f;border-radius:5px}
.mkg-peg:after{content:"";position:absolute;bottom:4px;left:4%;right:4%;height:12px;background:#8a5a2f;border-radius:6px}
.mkg-peg.sel{border-color:#e5b500;background:#fff8e2}
.mkg-disc{position:relative;z-index:1;height:22px;border-radius:11px;border:2px solid #123452;margin-top:2px}
.mkg-peg i{position:absolute;top:2px;left:6px;font-style:normal;font-size:.7rem;color:#7b97ab}
.mkg-ng{display:grid;gap:0;touch-action:none}
.mkg-ng .cl{font-size:.72rem;font-weight:800;color:#355670;display:flex;align-items:flex-end;justify-content:center;line-height:1.1;text-align:center;padding:2px}
.mkg-ng .rl{justify-content:flex-end;align-items:center;padding-right:6px;white-space:nowrap}
.mkg-ng .cl.done{color:#18a058}
.mkg-ng .cell{background:#fff;border:1px solid #9cc4e0;padding:0;border-radius:0;aspect-ratio:1/1;min-width:0}
.mkg-ng .cell.f{background:#123452}.mkg-ng .cell.x{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 2l6 6M8 2l-6 6' stroke='%23ff6b61' stroke-width='1.4'/%3E%3C/svg%3E") center/70% no-repeat}
.mkg-ng .cell.k{outline:3px solid #ffd45e;outline-offset:-3px;z-index:1}
.mkg-ng .cell.b5r{border-right:2px solid #123452}.mkg-ng .cell.b5b{border-bottom:2px solid #123452}
.mkg-toggle button.on{background:var(--navy);color:#fff}
.mkg-mz{width:min(460px,92vw);height:auto;background:#fff;border-radius:10px;border:2px solid #123452;touch-action:none}
.mkg-dpad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(2,48px);gap:6px}
.mkg-dpad button{padding:0;font-size:1.4rem;border-radius:10px}
.mkg-dpad .u{grid-column:2}.mkg-dpad .l{grid-column:1;grid-row:2}.mkg-dpad .d{grid-column:2;grid-row:2}.mkg-dpad .r{grid-column:3;grid-row:2}
.mkg-prog{display:flex;flex-wrap:wrap;gap:4px;min-height:48px;width:100%;max-width:620px;background:#f4fafd;border:2px solid #cfe3ee;border-radius:10px;padding:6px;align-items:center}
.mkg-prog span{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:#3ca9e8;color:#fff;border-radius:8px;font-size:1.2rem;font-weight:900}
.mkg-prog span.run{background:#ffd45e;color:#123452}.mkg-prog em{font-style:normal;color:#7b97ab;font-size:.85rem}
.mkg-lights{display:grid;gap:8px;width:min(380px,90vw)}
.mkg-lights button{aspect-ratio:1/1;border-radius:50%;padding:0;background:#3a4a5c;border:3px solid #123452;transition:background .15s,box-shadow .15s}
.mkg-lights button.on{background:radial-gradient(circle at 40% 35%,#fffbe0,#ffd45e 55%,#e5a800);box-shadow:0 0 18px #ffd45e}
.mkg-latin{display:grid;gap:4px;width:min(380px,90vw)}
.mkg-latin button{aspect-ratio:1/1;font-size:clamp(1.2rem,6vw,2rem);font-weight:900;padding:0;border-radius:8px;background:#fff;color:#0b6aa8;border:2px solid #9cc4e0}
.mkg-latin button.given{background:#edf6fb;color:#123452}.mkg-latin button.sel{border-color:#e5b500;background:#fff8e2}.mkg-latin button.clash{color:#e5484d;background:#fdeceb}
.mkg-tune{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:12px;width:min(360px,86vw)}
.mkg-tune button{aspect-ratio:1/1;border-radius:22px;border:4px solid #123452;opacity:.55;padding:0;font-size:1.2rem;color:#123452;font-weight:900}
.mkg-tune button.lit{opacity:1;transform:scale(1.04);box-shadow:0 0 22px currentColor}
.mkg-cb{display:flex;flex-direction:column;gap:6px;align-items:center}
.mkg-cbrow{display:flex;gap:10px;align-items:center}
.mkg-peg2{width:30px;height:30px;border-radius:50%;border:2px solid #123452;display:inline-block;background:#edf6fb}
.mkg-fb{display:grid;grid-template-columns:repeat(3,10px);gap:3px;width:40px}
.mkg-fb i{width:10px;height:10px;border-radius:50%;border:1px solid #9cc4e0}.mkg-fb i.x{background:#123452;border-color:#123452}.mkg-fb i.p{background:#fff;border:2px solid #123452}
.mkg-palette{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.mkg-palette button{width:44px;height:44px;border-radius:50%;border:3px solid #123452;padding:0;position:relative}
.mkg-palette button i{position:absolute;bottom:-6px;right:-4px;font-style:normal;font-size:.6rem;background:#fff;border-radius:6px;padding:0 3px;color:#123452}
/* page + hub */
.game-page .guide-badge-wrap{margin-top:4px}
.game-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin:8px 0 24px}
.game-info section{background:#fff;border:1px solid #d4e7f2;border-left:5px solid var(--sky);border-radius:10px;padding:14px 18px}
.game-info h2{font-size:1.1rem;margin:0 0 6px}.game-info p{margin:0 0 8px;font-size:.95rem}.game-info p:last-child{margin:0}
.game-keys{font-size:.85rem;color:#4a6a82}
.gcard .gthumb{display:block;width:100%;height:auto;border-radius:8px;margin:0 0 10px;aspect-ratio:3/2}
.gcard .gmeta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.gcard .gmeta span{font-size:.7rem;font-weight:800;background:#fff3d6;color:#855500;border-radius:10px;padding:1px 8px}
.gcard .gmeta span.s{background:#e9f4fb;color:#0b6aa8}
.games-ages{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.games-ages button{background:#fff;color:var(--navy);border:2px solid #cfe3ee;border-radius:20px;padding:4px 12px;font-size:.85rem}
.games-ages button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.game-ymal .ymal-tile svg{width:100%;height:auto;border-radius:6px}
@media (max-width:560px){.mkg-stage{padding:14px 10px;min-height:300px}.mkg-opts{grid-template-columns:1fr 1fr}.mkg-bar{font-size:.85rem}}
@media print{.mkg{display:none}}
.mkg-passage{max-width:620px;text-align:left;background:#fffaf0;border-left:5px solid var(--yellow);border-radius:8px;padding:12px 16px;font-size:1.05rem;line-height:1.6;margin:0}
.mkg-big-emoji .mkg-emoji{font-size:4.5rem}