/* Star Maze (ZEKASTRA Kids design system v3). Night-sky board, neon cyan walls, big touch controls. */
.mz-stage{position:relative;overflow:hidden}
.mz-stage:before{content:"";position:absolute;inset:-120px -80px auto auto;width:360px;height:360px;border-radius:50%;background:radial-gradient(closest-side,rgba(61,213,243,.13),transparent);pointer-events:none}
.mz-toolbar{position:relative}
.mz-toolbar h2{display:flex;align-items:center;gap:10px}
.mz-toolbar h2:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--k-cyan);box-shadow:0 0 0 5px rgba(61,213,243,.18);flex:none}
.mz-levels button{display:inline-flex;align-items:baseline;gap:6px;cursor:pointer}
.mz-levels button small{font-size:.74rem;font-weight:700;color:var(--k-muted)}
.mz-levels button[aria-pressed="true"] small{color:#4a5385}
.mz-levels button:focus-visible{outline:3px solid var(--k-gold);outline-offset:2px}

.mz-layout{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px);gap:clamp(16px,2.6vw,30px);align-items:start}
.mz-main{min-width:0}
.mz-frame{position:relative}
.mz-board{position:relative;border-radius:22px;background:#0a1236;border:2px solid #24306f;box-shadow:inset 0 0 0 1px rgba(61,213,243,.08),0 14px 40px rgba(2,4,20,.5);touch-action:none;-webkit-user-select:none;user-select:none;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:clamp(4px,1vw,10px)}
.mz-board:focus{outline:none}
.mz-board:focus-visible{outline:4px solid var(--k-gold);outline-offset:4px}
.mz-svg{display:block;width:100%;height:auto;max-height:min(74vh,720px);margin:0 auto;overflow:visible}

/* SVG parts */
.mz-bg{fill:#0a1236}
.mz-floor{fill:#0d1742}
.mz-pad{fill:rgba(61,213,243,.12);stroke:rgba(61,213,243,.55);stroke-width:2;stroke-dasharray:3 5}
.mz-trail{fill:none;stroke:var(--k-gold);stroke-width:6.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.1 11;opacity:.85}
.mz-hint{fill:none;stroke:var(--k-mint);stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14 10;opacity:0;transition:opacity .35s ease}
.mz-hint.is-on{opacity:.95;animation:mz-hint-march .8s linear infinite}
.mz-walls-glow{fill:none;stroke:rgba(61,213,243,.17);stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.mz-walls{fill:none;stroke:var(--k-cyan);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.is-dense .mz-walls{stroke-width:5.5}
.is-dense .mz-walls-glow{stroke-width:13}
.mz-bonus{fill:var(--k-pink);stroke:#fff;stroke-width:1.2;stroke-opacity:.5;transform-box:fill-box;transform-origin:center;animation:mz-twinkle 2.4s ease-in-out infinite;transition:transform .35s ease,opacity .35s ease}
.mz-bonus:nth-child(2n){animation-delay:-.8s}.mz-bonus:nth-child(3n){animation-delay:-1.6s}
.mz-bonus.is-got{animation:none;transform:scale(2.2);opacity:0}
.mz-goal-halo{fill:rgba(246,201,108,.22);transform-box:fill-box;transform-origin:center;animation:mz-halo 2s ease-in-out infinite}
.mz-goal-star{fill:var(--k-gold);stroke:#fff6dc;stroke-width:1.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;animation:mz-goal-spin 6s ease-in-out infinite}
.mz-player{transition:transform .12s ease-out}
.mz-player.no-anim,.mz-player.no-anim .mz-turn{transition:none}
.mz-turn{transition:transform .16s ease-out}
.mz-hull{fill:#f4f6ff}
.mz-nose,.mz-fin{fill:var(--k-coral)}
.mz-window{fill:var(--k-sky);stroke:#0b1030;stroke-width:1.6}
.mz-flame{fill:var(--k-gold);transform-box:fill-box;transform-origin:50% 0;animation:mz-flame .35s ease-in-out infinite alternate}
.is-bump-up{animation:mz-bump-up .3s ease}
.is-bump-down{animation:mz-bump-down .3s ease}
.is-bump-left{animation:mz-bump-left .3s ease}
.is-bump-right{animation:mz-bump-right .3s ease}
.is-won .mz-goal-star{animation:mz-win-star .9s ease-out 1}
.is-won .mz-goal-halo{animation:mz-win-halo .9s ease-out 1 forwards}

@keyframes mz-hint-march{to{stroke-dashoffset:-24}}
@keyframes mz-twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(.8) rotate(18deg)}}
@keyframes mz-halo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.25);opacity:.45}}
@keyframes mz-goal-spin{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(14deg) scale(1.08)}}
@keyframes mz-flame{from{transform:scaleY(.75)}to{transform:scaleY(1.15)}}
@keyframes mz-bump-up{40%{transform:translate(0,-5px)}}
@keyframes mz-bump-down{40%{transform:translate(0,5px)}}
@keyframes mz-bump-left{40%{transform:translate(-5px,0)}}
@keyframes mz-bump-right{40%{transform:translate(5px,0)}}
@keyframes mz-win-star{40%{transform:scale(1.6) rotate(72deg)}100%{transform:scale(1) rotate(144deg)}}
@keyframes mz-win-halo{to{transform:scale(3);opacity:0}}

.mz-status{display:flex;align-items:center;gap:10px;min-height:3.1em;margin:14px 0 0;padding:10px 16px;border-radius:16px;background:var(--k-bg-2);border:1px solid var(--k-line-soft);line-height:1.35}
.mz-status:before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--k-gold);box-shadow:0 0 0 4px rgba(246,201,108,.18)}
.mz-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Side panel */
.mz-side{display:flex;flex-direction:column;gap:16px;min-width:0}
.mz-score{gap:8px}
.mz-score span{flex:1 1 auto;justify-content:center}
.mz-ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mz-score .mz-ico{width:18px;height:18px}
.mz-ico-gold{fill:var(--k-gold);stroke:none}
.mz-ico-pink{fill:var(--k-pink);stroke:none}

.mz-dpad{display:grid;grid-template-columns:repeat(3,68px);grid-template-rows:repeat(3,68px);gap:6px;justify-content:center;align-self:center;padding:12px;border-radius:30px;background:radial-gradient(circle at 50% 40%,var(--k-surface-3),var(--k-bg-2) 75%);border:1px solid var(--k-line)}
.mz-pad-btn{display:grid;place-items:center;width:68px;height:68px;padding:0;border-radius:20px;border:2px solid #34428e;background:linear-gradient(180deg,#22306f,#18225a);color:var(--k-ink);cursor:pointer;box-shadow:0 5px 0 #0b1236,0 8px 18px rgba(2,4,20,.4);transition:transform .08s ease,box-shadow .08s ease,background .15s,border-color .15s;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.mz-pad-btn svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.mz-pad-btn:hover{border-color:var(--k-cyan);color:#fff}
.mz-pad-btn:active{transform:translateY(4px);box-shadow:0 1px 0 #0b1236,0 3px 8px rgba(2,4,20,.4);background:linear-gradient(180deg,#2f8fb0,#2a6e9a)}
.mz-pad-btn:focus-visible{outline:4px solid var(--k-gold);outline-offset:2px}
.mz-pad-up{grid-area:1/2}.mz-pad-left{grid-area:2/1}.mz-pad-right{grid-area:2/3}.mz-pad-down{grid-area:3/2}
.mz-pad-core{grid-area:2/2;place-self:center;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3cf,var(--k-gold) 55%,#b8862d);box-shadow:0 0 18px rgba(246,201,108,.5)}
.mz-help{margin:0;font-size:.9rem;color:var(--k-muted)!important;text-align:center}
.mz-actions{margin-top:0;flex-direction:column}
.mz-actions .kp-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;cursor:pointer}
.mz-goal-note{margin:0;font-size:.9rem;font-weight:700;color:var(--k-ink-2)!important;text-align:center;padding:10px 12px;border-radius:14px;border:1px dashed var(--k-line)}

/* Win panel: floats over the maze on wide screens, sits below it on phones */
.mz-win{position:absolute;inset:0;z-index:3;display:grid;place-items:center;padding:16px;border-radius:22px;background:rgba(7,11,33,.66);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:auto}
.mz-win[hidden]{display:none}
.mz-win-card{width:100%;max-width:460px;margin:0;background:linear-gradient(135deg,rgba(246,201,108,.2),rgba(165,148,255,.22)),#151c4c;box-shadow:0 24px 60px rgba(2,4,20,.6);animation:mz-pop .35s ease-out}
.mz-win-card h3{outline:none}
.mz-stars{gap:10px;margin-bottom:12px}
.mz-stars svg{width:48px;height:48px;fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.25);stroke-width:1;stroke-linejoin:round}
.mz-stars svg.is-on{fill:var(--k-gold);stroke:#fff3d0;animation:mz-star-pop .45s ease-out both}
.mz-stars svg:nth-child(2){animation-delay:.12s;width:58px;height:58px;margin-top:-8px}
.mz-stars svg:nth-child(3){animation-delay:.24s}
.mz-win-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.mz-win-actions .kp-button{cursor:pointer}
.mz-win-actions [hidden]{display:none}
@keyframes mz-pop{from{transform:scale(.92);opacity:0}to{transform:none;opacity:1}}
@keyframes mz-star-pop{0%{transform:scale(.2) rotate(-40deg);opacity:0}70%{transform:scale(1.2) rotate(8deg);opacity:1}100%{transform:none}}

.mz-print-head,.mz-print-rocket{display:none}

@media(max-width:900px){
 .mz-layout{grid-template-columns:minmax(0,1fr)}
 .mz-side{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pad actions" "pad note" "score score" "help help";align-items:start;column-gap:20px}
 .mz-dpad{grid-area:pad}.mz-actions{grid-area:actions}.mz-goal-note{grid-area:note}.mz-score{grid-area:score}.mz-help{grid-area:help}
}
@media(max-width:600px){
 .mz-levels{border-radius:18px;width:100%;justify-content:center}
 .mz-board{border-radius:16px;padding:3px}
 .mz-side{display:flex}
 .mz-dpad{order:1}.mz-help{order:2}.mz-actions{order:3}.mz-goal-note{order:4}.mz-score{order:5}
 .mz-levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,3.1rem),1fr));gap:2px;padding:4px}
 .mz-levels button{flex-direction:column;align-items:center;gap:0;padding:5px 0;font-size:.8rem;line-height:1.15;min-width:0}
 .mz-levels button small{font-size:.68rem}
 .mz-dpad{grid-template-columns:repeat(3,64px);grid-template-rows:repeat(3,64px)}
 .mz-pad-btn{width:64px;height:64px}
 .mz-actions{flex-direction:row}
 .mz-actions .kp-button{flex:1 1 100%}
 .mz-win{position:static;padding:0;margin-top:14px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;overflow:visible}
 .mz-status{font-size:1rem}
}
@media(max-width:360px){
 .mz-dpad{grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,56px);padding:8px}
 .mz-pad-btn{width:56px;height:56px;border-radius:16px}
}

@media(prefers-reduced-motion:reduce){
 .mz-player,.mz-turn,.mz-hint,.mz-bonus,.mz-pad-btn{transition:none!important}
 .mz-bonus,.mz-goal-halo,.mz-goal-star,.mz-flame,.mz-hint.is-on,.is-bump-up,.is-bump-down,.is-bump-left,.is-bump-right,.is-won .mz-goal-star,.is-won .mz-goal-halo,.mz-win-card,.mz-stars svg.is-on{animation:none!important}
 .mz-pad-btn:active{transform:none}
}

/* Print: only the maze, large and black on white, on one A4 page */
@media print{
 @page{size:A4 portrait;margin:14mm}
 html,body{background:#fff!important}
 body>*:not(main){display:none!important}
 #kids-maze>*:not(.mz-stage),.mz-toolbar,.mz-side,.mz-status,.mz-sr,.mz-win{display:none!important}
 .mz-stage,.mz-layout,.mz-main{display:block!important;background:#fff!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;overflow:visible!important}
 .mz-stage:before,.mz-toolbar h2:before{display:none!important}
 .mz-print-head{display:flex!important;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin:0 0 8mm;font:600 13pt/1.3 Inter,Arial,sans-serif;color:#000}
 .mz-print-head strong{font-size:20pt}
 .mz-print-brand{margin-left:auto;font-size:10pt;letter-spacing:.08em}
 .mz-board{border:0!important;outline:0!important;box-shadow:none!important;background:#fff!important;padding:0!important;border-radius:0!important}
 .mz-svg{width:100%!important;height:auto!important;max-height:235mm!important}
 .mz-bg,.mz-floor{fill:#fff!important}
 .mz-walls{stroke:#000!important;stroke-width:4!important}
 .mz-walls-glow,.mz-trail,.mz-hint,.mz-bonus-layer,.mz-pad,.mz-goal-halo,.mz-flame{display:none!important}
 .mz-goal-star{fill:#fff!important;stroke:#000!important;stroke-width:2!important;animation:none!important}
 .mz-hull,.mz-window{fill:#fff!important;stroke:#000!important;stroke-width:1.6!important}
 .mz-nose,.mz-fin{fill:#000!important}
 .mz-player{display:none!important}
 .mz-print-rocket{display:inline!important}
}