/* skill — the Hedge Maze, the Jelly Tower, Shell Catch and Dino Hop
   (games/maze.js, stack.js, catch.js, runner.js). Scenery keeps its own
   colours in both themes (it is a picture) but turns to dusk in the dark. */

.sk { position: absolute; inset: 0; overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none; contain: strict; }
.sk-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; outline: none; cursor: pointer; }
.sk-svg:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 24px; }

/* ------------------------------------------------------------ Hedge Maze */
.sk-maze { background: #bfe5a4; --mz-grass: #bfe5a4; --mz-floor: #d6f0c0; --mz-stone: #f4ecdc; --mz-tuft: #93c97f; --mz-hedge: #6cbf6b; --mz-hlight: #9bdc8c; --mz-leaf: #4f9c54; --mz-shadow: #2f6b3a; }
:root[data-theme="dark"] .sk-maze { background: #45704f; --mz-grass: #45704f; --mz-floor: #557f5b; --mz-stone: #a9bda1; --mz-tuft: #6c9b67; --mz-hedge: #4f9b5b; --mz-hlight: #6fb877; --mz-leaf: #326f3e; --mz-shadow: #10301a; }
.mz-grass { fill: var(--mz-grass); }
.mz-floor { fill: var(--mz-floor); }
.mz-stone { fill: var(--mz-stone); stroke: #4b3328; stroke-opacity: 0.22; stroke-width: 2; }
.mz-tuft { fill: none; stroke: var(--mz-tuft); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.mz-hshadow { stroke: var(--mz-shadow); }
.mz-hedge { stroke: var(--mz-hedge); }
.mz-hlight { stroke: var(--mz-hlight); }
.mz-leaf { stroke: var(--mz-leaf); }
.mz-glow { fill: #fff3a0; }
:root[data-theme="dark"] .mz-glow { fill: #ffe37a; }
.mz-bob, .mz-item, .mz-slot, .mz-gl, .mz-gr, .mz-step, .mz-arrow, .mz-wing { transform-box: fill-box; }
.mz-bob { animation: mz-bob 2.4s ease-in-out infinite; }
.mz-item:nth-child(2n) .mz-bob, .mz-items > g:nth-child(2) .mz-bob { animation-delay: -0.8s; }
.mz-items > g:nth-child(3) .mz-bob { animation-delay: -1.6s; }
.mz-item { transition: opacity 0.4s ease, transform 0.45s cubic-bezier(.3,.7,.4,1.6); transform-origin: 50% 70%; }
.mz-item.got { opacity: 0; transform: translateY(-30px) scale(1.5); pointer-events: none; }
.mz-slot { opacity: 0.28; transform-origin: center; transition: opacity 0.3s, transform 0.4s cubic-bezier(.3,.7,.4,1.8); transform: scale(0.8); }
.mz-slot.on { opacity: 1; transform: scale(1.05); }
.mz-gl { transform-origin: 0% 50%; transition: transform 0.7s cubic-bezier(.3,.7,.3,1.3); }
.mz-gr { transform-origin: 100% 50%; transition: transform 0.7s cubic-bezier(.3,.7,.3,1.3); }
.mz-gate.open .mz-gl { transform: rotate(-82deg) scaleX(0.9); }
.mz-gate.open .mz-gr { transform: rotate(82deg) scaleX(0.9); }
.mz-gslots { transition: opacity 0.4s ease 0.25s; }
.mz-gate.open .mz-gslots { opacity: 0; }
.mz-step { transform-origin: center; animation: mz-step 1.3s ease-in-out calc(var(--i, 0) * 0.13s) infinite both; }
.mz-arrow { transform-origin: center; animation: mz-arrow 0.8s ease-in-out infinite; }
.mz-wing { animation: mz-flap 0.32s ease-in-out infinite; }
.mz-wl { transform-origin: 100% 40%; }
.mz-wr { transform-origin: 0% 40%; }
.mz-buzz { animation: mz-buzz 3.4s ease-in-out infinite; transform-box: view-box; transform-origin: 0 0; }
.mz-buzz .mz-bee { animation: pl 0.5s ease-in-out infinite; }
@keyframes mz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mz-step { 0% { opacity: 0; transform: scale(0.4); } 30% { opacity: 1; transform: scale(1.1); } 60%, 100% { opacity: 0.75; transform: scale(0.9); } }
@keyframes mz-arrow { 0%, 100% { transform: translateX(-4px) scale(1); } 50% { transform: translateX(6px) scale(1.12); } }
@keyframes mz-flap { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(0.25); } }
@keyframes mz-buzz { 0% { transform: translate(-26px, 4px) scaleX(1); } 46% { transform: translate(26px, -8px) scaleX(1); } 50% { transform: translate(26px, -8px) scaleX(-1); } 96% { transform: translate(-26px, 4px) scaleX(-1); } 100% { transform: translate(-26px, 4px) scaleX(1); } }
.reduce .mz-bob, .reduce .mz-step, .reduce .mz-arrow, .reduce .mz-wing, .reduce .mz-buzz, .reduce .mz-buzz .mz-bee { animation: none; }
.reduce .mz-step { opacity: 1; }
.reduce .mz-item, .reduce .mz-gl, .reduce .mz-gr, .reduce .mz-slot, .reduce .mz-gslots { transition-duration: 0.01s; }

/* ------------------------------------------------------------ Jelly Tower */
.sk-stack { --st-top: #c9ecff; --st-bottom: #fff4ea; background: linear-gradient(var(--st-top), var(--st-bottom)); }
.sk-stack .sk-svg { cursor: pointer; }
.st-ground { fill: #b9e6a3; }
:root[data-theme="dark"] .st-ground { fill: #4f8058; }
:root[data-theme="dark"] .st-hills { opacity: 0.8; }
.st-shadow { fill: #3b2a2f; opacity: 0.16; }
.st-guide { transition: opacity 0.2s ease; }
.st-guide.off { opacity: 0; }
.st-life { transition: opacity 0.3s ease; }
.st-life.used { opacity: 0.32; }
.st-cloud { opacity: 0.92; }
:root[data-theme="dark"] .st-cloud { opacity: 0.55; }
.st-cherry { transform-box: fill-box; transform-origin: 50% 100%; animation: st-cherry 0.6s cubic-bezier(.3,.6,.4,1.4) both; }
.st-hint { animation: fade-in 0.25s ease both; }
@keyframes st-cherry { 0% { transform: translateY(-120px); opacity: 0; } 60% { transform: translateY(0) scale(1.15, 0.85); opacity: 1; } 100% { transform: none; } }
.reduce .st-cherry { animation: none; }

/* ------------------------------------------------------------ Shell Catch */
.sk-catch { background: linear-gradient(#bfe6ff, #e8f6ff 58%, #fdf3e3); }
:root[data-theme="dark"] .sk-catch { background: linear-gradient(#262d58, #3b4778 58%, #4c4a78); }
.ct-hill2 { fill: #b5e2a6; }
.ct-hill { fill: #93d38d; }
.ct-rock { fill: #cdb89c; }
.ct-crack { stroke: #a88f74; }
.ct-fallw { fill: #a3def6; }
.ct-water { fill: #82cff1; }
.ct-water2 { fill: #64bbe7; opacity: 0.85; }
.ct-bough { fill: #5fb37a; }
.ct-bough2 { fill: #4f9f68; }
.ct-pill { fill: #ffffff; fill-opacity: 0.92; }
:root[data-theme="dark"] .ct-pill { fill: #2f2a45; }
:root[data-theme="dark"] .ct-bough2 { fill: #2f6f4a; }
.ct-sway { transform-box: fill-box; transform-origin: 50% 0%; animation: wiggle 3.2s ease-in-out infinite; }
.ct-needle { stroke: #3f8f5a; }
:root[data-theme="dark"] .ct-bough { fill: #3f8a5c; }
:root[data-theme="dark"] .ct-hill2 { fill: #3f6a58; }
:root[data-theme="dark"] .ct-hill { fill: #4b7d5d; }
:root[data-theme="dark"] .ct-rock { fill: #8a7a69; }
:root[data-theme="dark"] .ct-crack { stroke: #6c5f52; }
:root[data-theme="dark"] .ct-fallw { fill: #6fb0d6; }
:root[data-theme="dark"] .ct-water { fill: #4686b8; }
:root[data-theme="dark"] .ct-water2 { fill: #376fa0; }
:root[data-theme="dark"] .ct-cloud { opacity: 0.5; }
.ct-stripes { animation: ct-fall 0.55s linear infinite; }
.ct-w1 { animation: ct-wave 2.6s linear infinite; }
.ct-w2 { animation: ct-wave 3.8s linear infinite reverse; }
.ct-foam circle { transform-box: fill-box; transform-origin: center; animation: pl 0.9s ease-in-out infinite; }
.ct-foam circle:nth-child(2) { animation-delay: -0.3s; }
.ct-foam circle:nth-child(3) { animation-delay: -0.6s; }
.ct-ripple { transform-box: fill-box; transform-origin: center; animation: ct-ripple 0.85s ease-out both; }
.ct-drops { animation: ct-drops 0.6s cubic-bezier(.3,.7,.5,1) both; }
.ct-lost { animation: ct-lost 1s ease-out both; }
.ct-ouch { transform-box: fill-box; transform-origin: 50% 100%; animation: wiggle 0.45s ease-in-out; }
.ct-hint { animation: pl 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ct-dot { fill: #ffffff; }
.ct-dot.on { fill: #ffd769; }
:root[data-theme="dark"] .ct-dot:not(.on) { fill: #4a4566; }
.ct-life { fill: #e9dfe3; }
.ct-life.on { fill: #ff7a9a; }
.ct-bar { fill: #ffffff; }
:root[data-theme="dark"] .ct-bar { fill: #4a4566; }
.ct-barf { fill: #7fd1a0; }
@keyframes ct-fall { from { transform: translateY(0); } to { transform: translateY(30px); } }
@keyframes ct-wave { from { transform: translateX(0); } to { transform: translateX(-40px); } }
@keyframes ct-ripple { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.7); opacity: 0; } }
@keyframes ct-drops { 0% { transform: translateY(6px) scale(0.4); opacity: 0; } 35% { transform: translateY(-10px) scale(1); opacity: 1; } 100% { transform: translateY(8px) scale(0.6); opacity: 0; } }
@keyframes ct-lost { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-50px); opacity: 0; } }
.reduce .ct-sway, .reduce .ct-stripes, .reduce .ct-w1, .reduce .ct-w2, .reduce .ct-foam circle, .reduce .ct-hint, .reduce .ct-ouch, .reduce .ct-drops { animation: none; }
.reduce .ct-drops { opacity: 0; }

/* ------------------------------------------------------------ Dino Hop */
.sk-runner { background: linear-gradient(#ffd9c2, #ffeedd 55%, #fff6e8); }
:root[data-theme="dark"] .sk-runner { background: linear-gradient(#2d2550, #553f73 55%, #7a5274); }
.rn-volc { fill: #b58a76; }
.rn-stars { display: none; }
:root[data-theme="dark"] .rn-stars { display: inline; }
:root[data-theme="dark"] .rn-clouds { opacity: 0.35; }
.rn-smoke { fill: #fff3f6; }
.rn-hill { fill: #a7d99a; }
.rn-trunk { stroke: #c99a66; }
.rn-leaf { fill: #6cc07a; }
.rn-dirt { fill: #e8c58f; }
.rn-grass { stroke: #8fd18a; }
.rn-pebble { fill: #d2a96f; }
.rn-tuft { stroke: #6cbf6b; }
.rn-rock { fill: #c8b8ac; }
.rn-log { fill: #c98f58; }
.rn-lavarim { fill: #8a5a4a; }
:root[data-theme="dark"] .rn-volc { fill: #7c5f6e; }
:root[data-theme="dark"] .rn-smoke { fill: #f3d6e4; }
:root[data-theme="dark"] .rn-hill { fill: #4f7d5c; }
:root[data-theme="dark"] .rn-leaf { fill: #4f9a5c; }
:root[data-theme="dark"] .rn-dirt { fill: #9c7a5a; }
:root[data-theme="dark"] .rn-grass { stroke: #5fa866; }
:root[data-theme="dark"] .rn-pebble { fill: #85664b; }
:root[data-theme="dark"] .rn-rock { fill: #a3958b; }
.rn-life { fill: #e9dfe3; }
.rn-life.on { fill: #ff7a9a; }
.rn-bar { fill: #ffffff; }
:root[data-theme="dark"] .rn-bar { fill: #4a4566; }
.rn-barf { fill: #ffb36b; }
.rn-puff { transform-box: fill-box; transform-origin: center; animation: rn-puff 4.2s ease-out infinite; opacity: 0; }
.rn-puff.d3 { animation-delay: -1.05s; } .rn-puff.d5 { animation-delay: -2.1s; } .rn-puff.d7 { animation-delay: -3.15s; }
.rn-bubbles circle { transform-box: fill-box; transform-origin: center; animation: rn-bubble 1.4s ease-in-out infinite; }
.rn-bubbles circle:nth-child(2) { animation-delay: -0.7s; }
.rn-heat { animation: rn-heat 1.6s ease-in-out infinite; }
.rn-item { transform-box: fill-box; transform-origin: center; animation: rn-float 1.8s ease-in-out infinite; transition: opacity 0.25s ease; }
.rn-item.got { animation: rn-got 0.4s ease-out both; }
.rn-hover { animation: fl 1.6s ease-in-out infinite; }
.rn-wing { transform-box: fill-box; animation: rn-flap 0.42s ease-in-out infinite; }
.rn-wl { transform-origin: 100% 60%; }
.rn-wr { transform-origin: 0% 60%; }
.rn-mushw { transform-box: fill-box; transform-origin: 50% 100%; }
.rn-boing { animation: rn-boing 0.42s cubic-bezier(.3,.6,.4,1.4); }
.rn-flagw .rn-cloth { transform-box: fill-box; transform-origin: 0% 100%; transform: translateY(70px) scaleY(0.2); opacity: 0.4; transition: transform 0.5s cubic-bezier(.3,.7,.4,1.4), opacity 0.3s; }
.rn-flagw.up .rn-cloth { transform: none; opacity: 1; }
.rn-blink { animation: rn-blink 0.22s steps(1) infinite; }
.rn-fade { transition: opacity 0.25s ease; opacity: 0; }
.rn-puffd { fill: #fff; opacity: 0.85; }
.rn-dustp { animation: rn-dust 0.55s ease-out both; }
.rn-hint { animation: pl 0.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes rn-puff { 0% { transform: translateY(10px) scale(0.3); opacity: 0; } 15% { opacity: 0.95; } 100% { transform: translateY(-120px) scale(1.15); opacity: 0; } }
@keyframes rn-bubble { 0%, 100% { transform: scale(0.6); } 50% { transform: scale(1.15) translateY(-3px); } }
@keyframes rn-heat { 0%, 100% { transform: translateY(0); opacity: 0.3; } 50% { transform: translateY(-5px); opacity: 0.8; } }
@keyframes rn-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
@keyframes rn-got { 0% { transform: scale(1); opacity: 1; } 100% { transform: translateY(-30px) scale(1.6); opacity: 0; } }
@keyframes rn-flap { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(18deg) scaleY(0.7); } }
@keyframes rn-boing { 0% { transform: scale(1, 1); } 30% { transform: scale(1.25, 0.65); } 65% { transform: scale(0.9, 1.15); } 100% { transform: scale(1, 1); } }
@keyframes rn-blink { 0% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes rn-dust { from { opacity: 1; transform: translate(0, 0) scale(0.6); } to { opacity: 0; transform: translate(-16px, -8px) scale(1.3); } }
.rn-wr { animation-name: rn-flapr; }
@keyframes rn-flapr { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg) scaleY(0.7); } }
.reduce .rn-puff, .reduce .rn-bubbles circle, .reduce .rn-heat, .reduce .rn-item, .reduce .rn-hover, .reduce .rn-wing, .reduce .rn-boing, .reduce .rn-hint { animation: none; }
.reduce .rn-puff:first-child { opacity: 0.8; }
.reduce .rn-blink { animation: none; opacity: 0.6; }
.reduce .rn-item.got { animation: none; opacity: 0; }
.reduce .rn-flagw .rn-cloth { transition-duration: 0.01s; }