/* logic — the four logic challenges: Moonlight Mirrors (mm-), Yarn Roll (yr-),
   Seed Sorter (so-) and Love Circuit (ci-). Scenery keeps its own colours
   (it is a picture); the theme only dims it a little at night. */

.mm, .yr, .so, .ci { position: absolute; inset: 0; overflow: hidden; outline: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
.mm-svg, .yr-svg, .so-svg, .ci-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mm-tap, .yr-tap, .so-tap, .ci-tap { cursor: pointer; }

/* a small round button inside the stage (undo) */
.lg-btn {
  position: absolute; z-index: 4; width: 48px; height: 48px; border-radius: 50%; border: 2px solid #4b3328; background: #fffaf3; color: #4b3328;
  display: grid; place-items: center; padding: 0; cursor: pointer; box-shadow: 0 4px 0 -1px rgba(75, 51, 40, 0.35), 0 6px 14px -6px rgba(60, 30, 40, 0.5);
  transition: transform 0.12s ease, opacity 0.2s, box-shadow 0.12s;
}
.lg-btn svg { width: 24px; height: 24px; }
.lg-btn:active { transform: translateY(2px) scale(0.94); box-shadow: 0 2px 0 -1px rgba(75, 51, 40, 0.35); }
.lg-btn[disabled] { opacity: 0.45; cursor: default; }
.lg-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.lg-btn.lg-ask { animation: lg-ask 0.9s ease-in-out infinite; background: #fff1c2; }
:root[data-theme="dark"] .lg-btn, :root.dark-auto .lg-btn { background: #3a2f45; color: #f7ebf1; border-color: #f7ebf1; }
:root[data-theme="dark"] .lg-btn.lg-ask, :root.dark-auto .lg-btn.lg-ask { background: #5a4730; }
@keyframes lg-ask { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
@keyframes lg-ants { to { stroke-dashoffset: -46; } }
@keyframes lg-ring { 0%, 100% { transform: scale(0.94); opacity: 0.7; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes lg-nudge { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
.reduce .lg-btn.lg-ask { animation: none; }

/* ============================================================ Moonlight Mirrors */
.mm { background: #b7a6d6; }
:root[data-theme="dark"] .mm, :root.dark-auto .mm { background: #3a3160; }
.mm-wall { fill: #b7a6d6; }
.mm-wline { stroke: #a896cb; }
.mm-roof { fill: #8a5a3b; }
.mm-roofline { stroke: #a26f4b; }
.mm-floorz { fill: #d6a26c; }
.mm-skirt { stroke: #8a5a3b; }
.mm-seam { stroke: #b07a4c; opacity: 0.55; }
.mm-frame { fill: #9a6847; }
.mm-nail { fill: #6b4430; }
.mm-p0 { fill: #ebc28f; } .mm-p1 { fill: #e2b580; } .mm-p2 { fill: #d9a973; }
.mm-grain { stroke: #c99561; opacity: 0.45; }
.mm-grid { stroke: #8a5a3b; opacity: 0.16; }
.mm-web { stroke: #fff; opacity: 0.55; }
.mm-night { fill: #2d3a74; }
.mm-moonglow { opacity: 0.35; }
.mm-base { fill: #f6e2c3; opacity: 0.85; }
:root[data-theme="dark"] .mm-wall, :root.dark-auto .mm-wall { fill: #3a3160; }
:root[data-theme="dark"] .mm-wline, :root.dark-auto .mm-wline { stroke: #332a57; }
:root[data-theme="dark"] .mm-roof, :root.dark-auto .mm-roof { fill: #5b3a2a; }
:root[data-theme="dark"] .mm-roofline, :root.dark-auto .mm-roofline { stroke: #6e4934; }
:root[data-theme="dark"] .mm-floorz, :root.dark-auto .mm-floorz { fill: #9c7049; }
:root[data-theme="dark"] .mm-frame, :root.dark-auto .mm-frame { fill: #6e4934; }
:root[data-theme="dark"] .mm-p0, :root.dark-auto .mm-p0 { fill: #c7996a; }
:root[data-theme="dark"] .mm-p1, :root.dark-auto .mm-p1 { fill: #bd8e60; }
:root[data-theme="dark"] .mm-p2, :root.dark-auto .mm-p2 { fill: #b28357; }
:root[data-theme="dark"] .mm-base, :root.dark-auto .mm-base { fill: #e8cfa8; opacity: 0.7; }
:root[data-theme="dark"] .mm-moonglow, :root.dark-auto .mm-moonglow { opacity: 0.5; }

/* the moonbeam: glow and core are opaque strokes in a translucent group, so crossings never double up */
.mm-bglow { opacity: 0.32; }
.mm-bglow path { fill: none; stroke: #ffe7a0; stroke-width: 34; stroke-linecap: round; }
.mm-bcore { opacity: 0.95; }
.mm-bcore path { fill: none; stroke: #fffbea; stroke-width: 8; stroke-linecap: round; }
.mm-flow { fill: none; stroke: #ffffff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 26; animation: mm-flow 1.1s linear infinite; }
.mm-grow { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: mm-grow 0.16s linear forwards; animation-delay: var(--dl, 0ms); }
@keyframes mm-flow { to { stroke-dashoffset: -26.1; } }
@keyframes mm-grow { to { stroke-dashoffset: 0; } }

.mm-rot { transform: rotate(var(--a, 0deg)); transition: transform 0.34s cubic-bezier(.34, 1.5, .6, 1); }
.mm-instant .mm-rot { transition: none; }
.mm-m, .mm-h { cursor: pointer; }
.mm-bump > .mm-base { animation: mm-bump 0.3s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes mm-bump { 40% { transform: scale(1.12); } }
.mm-hinted > .mm-base { fill: #fff3b8; opacity: 1; }

/* the shy ghosts and their lanterns */
.mm-lan .mm-on, .mm-lan .mm-joy, .mm-lan .mm-glow, .mm-lan .mm-hearts { opacity: 0; }
.mm-lan .mm-on, .mm-lan .mm-off, .mm-lan .mm-joy, .mm-lan .mm-shy, .mm-lan .mm-glow { transition: opacity 0.35s ease; }
.mm-lan.lit .mm-on, .mm-lan.lit .mm-joy, .mm-lan.lit .mm-hearts { opacity: 1; }
.mm-lan.lit .mm-glow { opacity: 0.6; }
.mm-lan.lit .mm-off, .mm-lan.lit .mm-shy { opacity: 0; }
.mm-gh { cursor: pointer; }
.mm-fav .mm-favspark { opacity: 0; transition: opacity 0.3s; }
.mm-fav.lit .mm-favspark { opacity: 1; }

.mm-spider { animation: mm-sway 3.4s ease-in-out infinite; transform-origin: 0 0; cursor: pointer; }
.mm-spider.mm-drop { animation: mm-drop 1.2s cubic-bezier(.3, .7, .4, 1); }
@keyframes mm-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes mm-drop { 0% { transform: translateY(0); } 35% { transform: translateY(26px); } 55% { transform: translateY(18px); } 75% { transform: translateY(24px); } 100% { transform: translateY(0); } }

.mm-cur { fill: none; stroke: #ff5f8a; stroke-width: 6; stroke-dasharray: 14 9; opacity: 0; pointer-events: none; }
.mm-kbd .mm-cur { opacity: 1; animation: lg-ants 1.2s linear infinite; }
.mm-ring { fill: none; stroke: #ffcf5a; stroke-width: 7; animation: lg-ring 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mm-arrow { animation: lg-nudge 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mm-love { opacity: 0; transition: opacity 0.4s; }
.mm-won .mm-love { opacity: 1; }

.reduce .mm-rot { transition: none; }
.reduce .mm-flow, .reduce .mm-spider, .reduce .mm-ring, .reduce .mm-arrow, .reduce .mm-kbd .mm-cur, .reduce .mm-bump > .mm-base { animation: none; }
.reduce .mm-grow { animation: none; stroke-dashoffset: 0; }
.reduce .mm-lan *, .reduce .mm-fav * { transition: none !important; }

/* ============================================================ Yarn Roll */
.yr { background: #fde7d6; }
:root[data-theme="dark"] .yr, :root.dark-auto .yr { background: #463541; }
.yr-wallp { fill: #fde7d6; }
.yr-stripe { stroke: #fbdcc6; }
.yr-dots { fill: #f6c9b0; }
.yr-floor { fill: #d9a46e; }
.yr-plank { stroke: #c38c58; opacity: 0.6; }
.yr-skirt { stroke: #fff4ea; }
.yr-parquet { fill: #c98f5c; }
.yr-parline { stroke: #b37a4a; opacity: 0.55; }
:root[data-theme="dark"] .yr-wallp, :root.dark-auto .yr-wallp { fill: #463541; }
:root[data-theme="dark"] .yr-stripe, :root.dark-auto .yr-stripe { stroke: #4e3c49; }
:root[data-theme="dark"] .yr-dots, :root.dark-auto .yr-dots { fill: #5c4756; }
:root[data-theme="dark"] .yr-floor, :root.dark-auto .yr-floor { fill: #94684a; }
:root[data-theme="dark"] .yr-skirt, :root.dark-auto .yr-skirt { stroke: #c9b3a6; }
:root[data-theme="dark"] .yr-parquet, :root.dark-auto .yr-parquet { fill: #9a6c48; }

.yr-ball, .yr-player { transform: translate(var(--x, 0), var(--y, 0)); transition: transform 0.15s cubic-bezier(.3, .7, .4, 1); }
.yr-face { transform: scaleX(var(--f, 1)); transition: transform 0.12s ease; }
.yr-roll { transform: rotate(var(--r, 0deg)); transition: transform 0.2s ease-out; }
.yr-instant .yr-ball, .yr-instant .yr-player, .yr-instant .yr-face, .yr-instant .yr-roll { transition: none; }
.yr-bob { animation: yr-bob 0.18s ease-out; }
@keyframes yr-bob { 50% { transform: scaleX(var(--f, 1)) translateY(-7px); } }
.yr-ball.home .yr-sq { animation: yr-land 0.45s cubic-bezier(.3, .7, .4, 1.4); transform-origin: 0 30px; }
@keyframes yr-land { 30% { transform: scale(1.18, 0.82); } 60% { transform: scale(0.94, 1.08); } }
.yr-ball.home .yr-sq { transform: scale(0.9); }
.yr-bglow { fill: #fff3b8; opacity: 0; transition: opacity 0.3s; }
.yr-basket.full .yr-bglow { opacity: 0.75; }
.yr-ring { fill: none; stroke: #ffcf5a; stroke-width: 7; animation: lg-ring 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.yr-dot { fill: #fff; stroke: #ffb300; stroke-width: 3; opacity: 0.9; }
.yr-arrow { animation: yr-poke 0.8s ease-in-out infinite; }
@keyframes yr-poke { 50% { transform: translateX(8px); } }
.yr-cheer { opacity: 0; }
.yr-cheer.on, .yr-won .yr-cheer { opacity: 1; }
.yr-knit { animation: yr-knit 0.9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes yr-knit { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.yr-z { animation: tw 2.4s ease-in-out infinite; }
.yr-undo { right: 10px; bottom: 10px; }
.reduce .yr-ball, .reduce .yr-player, .reduce .yr-face, .reduce .yr-roll { transition: none; }
.reduce .yr-bob, .reduce .yr-ball.home .yr-sq, .reduce .yr-ring, .reduce .yr-arrow, .reduce .yr-knit, .reduce .yr-z { animation: none; }

/* ============================================================ Seed Sorter */
.so { background: #fdf3df; }
:root[data-theme="dark"] .so, :root.dark-auto .so { background: #3d3242; }
.so-wall { fill: #fdf3df; }
.so-leaf { fill: #e9dcb8; }
.so-floor { fill: #d9a46e; }
.so-skirt { stroke: #b98353; }
:root[data-theme="dark"] .so-wall, :root.dark-auto .so-wall { fill: #3d3242; }
:root[data-theme="dark"] .so-leaf, :root.dark-auto .so-leaf { fill: #4a3d50; }
:root[data-theme="dark"] .so-floor, :root.dark-auto .so-floor { fill: #94684a; }
.so-jar { cursor: pointer; outline: none; }
.so-glow { fill: #fff3b8; opacity: 0; transition: opacity 0.2s; }
.so-jar.sel .so-glow { opacity: 0.8; }
.so-jar.so-hint .so-glow { animation: so-hint 0.9s ease-in-out infinite; }
.so-jar.so-hint2 .so-glow { fill: #ffd3de; animation: so-hint 0.9s ease-in-out infinite 0.45s; }
@keyframes so-hint { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.95; } }
.so-lift { animation: so-lift 0.28s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes so-lift { from { transform: translateY(38px); } }
.so-no { animation: so-no 0.4s ease-in-out; }
@keyframes so-no { 25% { transform: translateX(-6px) rotate(-2deg); } 75% { transform: translateX(6px) rotate(2deg); } }
.so-jar.so-no { transform-box: fill-box; transform-origin: 50% 100%; }
.so-land > :not(.so-lift):not(.so-hl) { animation: so-land 0.32s ease-out; transform-box: view-box; }
.so-jar.so-land { animation: so-squash 0.32s ease-out; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes so-squash { 40% { transform: scale(1.04, 0.95); } }
@keyframes so-land { from { opacity: 1; } }
.so-new .so-lid { animation: so-lid 0.6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes so-lid { from { transform: translateY(-60px); opacity: 0; } 50% { opacity: 1; } }
.so-label { transform-box: fill-box; transform-origin: center; }
.so-new .so-label { animation: pop-in 0.5s cubic-bezier(.2, .9, .3, 1.4) both 0.25s; }
.so-hpath { animation: so-ants 0.6s linear infinite; }
@keyframes so-ants { to { stroke-dashoffset: -14; } }
.so-cur { fill: none; stroke: #ff5f8a; stroke-width: 5; stroke-dasharray: 14 9; opacity: 0; pointer-events: none; }
.so-kbd .so-cur { opacity: 1; animation: lg-ants 1.2s linear infinite; }
.so-sway { transform-origin: 0 0; animation: so-sway 4s ease-in-out infinite; }
.so-sway.so-swing { animation: so-swing 1.1s ease-out; }
@keyframes so-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes so-swing { 0% { transform: rotate(0); } 20% { transform: rotate(18deg); } 45% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } 100% { transform: rotate(0); } }
.so-mouse { transform: translateY(30px); }
.so-mouse.so-peek { animation: so-peek 1.6s ease-in-out; }
@keyframes so-peek { 0% { transform: translateY(30px); } 25%, 70% { transform: translateY(0); } 100% { transform: translateY(30px); } }
.so-hole { cursor: pointer; }
.so-love { opacity: 0; transition: opacity 0.4s; }
.so-won .so-love { opacity: 1; }
.so-won .so-lid { animation: so-bob 1.2s ease-in-out infinite; }
@keyframes so-bob { 50% { transform: translateY(-4px); } }
.reduce .so-lift, .reduce .so-no, .reduce .so-jar.so-land, .reduce .so-new .so-lid, .reduce .so-new .so-label, .reduce .so-hpath, .reduce .so-kbd .so-cur,
.reduce .so-sway, .reduce .so-mouse.so-peek, .reduce .so-won .so-lid, .reduce .so-jar.so-hint .so-glow, .reduce .so-jar.so-hint2 .so-glow { animation: none; }
.reduce .so-jar.so-hint .so-glow, .reduce .so-jar.so-hint2 .so-glow { opacity: 0.8; }
.so-undo { right: 10px; bottom: 10px; }

/* ============================================================ Love Circuit */
.ci { background: #dfe6f2; }
:root[data-theme="dark"] .ci, :root.dark-auto .ci { background: #2c3350; }
.ci-wall { fill: #dfe6f2; }
.ci-holes { fill: #c5cfe2; }
.ci-bench { fill: #c98f5c; }
.ci-benchedge { stroke: #e0a874; }
.ci-grain { stroke: #b37a4a; opacity: 0.5; }
.ci-mat { fill: #6fb59a; }
.ci-matline { stroke: #a6dcc5; opacity: 0.55; }
:root[data-theme="dark"] .ci-wall, :root.dark-auto .ci-wall { fill: #2c3350; }
:root[data-theme="dark"] .ci-holes, :root.dark-auto .ci-holes { fill: #252b45; }
:root[data-theme="dark"] .ci-bench, :root.dark-auto .ci-bench { fill: #8a6243; }
:root[data-theme="dark"] .ci-benchedge, :root.dark-auto .ci-benchedge { stroke: #a87a52; }
:root[data-theme="dark"] .ci-mat, :root.dark-auto .ci-mat { fill: #447a69; }
.ci-plate, .ci-platefill { fill: #eef2f9; }
.ci-plate.ci-bolted { fill: #d3dbea; }
.ci-bolt { fill: #9aa7c2; stroke: #4b3328; stroke-width: 1.6; }
.ci-screw { fill: #c3cde0; }
.ci-tile { cursor: pointer; }
.ci-fixed, .ci-empty { cursor: default; }
.ci-rot { transform: rotate(var(--a, 0deg)); transition: transform 0.24s cubic-bezier(.34, 1.45, .6, 1); }
.ci-instant .ci-rot { transition: none; }
.ci-wout path { fill: none; stroke: #4b3328; stroke-width: 18; stroke-linecap: round; }
.ci-win path { fill: none; stroke: #d9935a; stroke-width: 9; stroke-linecap: round; transition: stroke 0.25s; }
.ci-wglow path { fill: none; stroke: #fff3a0; stroke-width: 34; stroke-linecap: round; opacity: 0; transition: opacity 0.25s; }
.ci-wspark path { fill: none; stroke: #ffffff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 16; opacity: 0; }
.ci-ends path { fill: none; stroke: none; }
.ci-hub { fill: #c3cde0; transition: fill 0.25s; }
.on .ci-win path { stroke: #ffd84a; }
.on .ci-wglow path { opacity: 0.55; }
.on .ci-wspark path { opacity: 0.95; animation: ci-flow 0.55s linear infinite; }
.on .ci-wspark path.in { animation-direction: reverse; }
.on .ci-hub { fill: #ffe98a; }
.on .ci-ends path.loose { stroke: #ff7a4a; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 44 6 200; animation: ci-fizz 0.35s steps(2) infinite; }
@keyframes ci-flow { to { stroke-dashoffset: -18; } }
@keyframes ci-fizz { 50% { stroke: #ffe14a; } }
.ci-on-only { opacity: 0; transition: opacity 0.3s; }
.on .ci-on-only { opacity: 1; }
.ci-glass { fill: #ffe4ec; stroke: #4b3328; stroke-width: 1.3; stroke-linejoin: round; transition: fill 0.3s; }
.on .ci-glass { fill: #ff8fae; }
.ci-fil { stroke: #c9a3b0; }
.on .ci-fil { stroke: #fff6a8; }
.ci-spin { transform-box: fill-box; transform-origin: center; }
.on .ci-spin { animation: rt 2.4s linear infinite; }
.on .ci-fast { animation-duration: 0.7s; }
.ci-eyes { fill: #56627f; }
.on .ci-eyes { fill: #7ff3e6; }
.ci-ant { fill: #c3cde0; }
.on .ci-ant { fill: #ffcf4a; }
.on .ci-note { animation: ci-note 1.4s ease-in-out infinite; }
@keyframes ci-note { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-4px) rotate(6deg); } }
.ci-tube { stroke: #c9aab6; transition: stroke 0.4s; }
.ci-tube-glow { stroke: #ff5f8a; opacity: 0; transition: opacity 0.4s; }
.ci-neon.half .ci-tube { stroke: #ff9fb8; animation: ci-flicker 2.2s steps(1) infinite; }
.ci-neon.half .ci-tube-glow { opacity: 0.35; }
.ci-neon.full .ci-tube { stroke: #fff0f5; }
.ci-neon.full .ci-tube-glow { opacity: 0.9; stroke-width: 4.6; }
@keyframes ci-flicker { 0%, 100% { opacity: 1; } 8% { opacity: 0.4; } 12% { opacity: 1; } 60% { opacity: 0.7; } 63% { opacity: 1; } }
.ci-wallgear { transform-box: fill-box; transform-origin: center; }
.ci-wallgear.go { animation: rt 4s linear infinite; }
.ci-won .ci-wallgear.go { animation-duration: 1.2s; }
.ci-wallgear.ci-rev.go { animation-direction: reverse; }
.ci-tool { transform-origin: 0 0; cursor: pointer; }
.ci-tool.ci-swing { animation: so-swing 1.1s ease-out; }
.ci-ring { fill: none; stroke: #ffcf5a; stroke-width: 7; animation: lg-ring 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ci-cur { fill: none; stroke: #ff5f8a; stroke-width: 6; stroke-dasharray: 14 9; opacity: 0; pointer-events: none; }
.ci-kbd .ci-cur { opacity: 1; animation: lg-ants 1.2s linear infinite; }
.reduce .ci-rot { transition: none; }
.reduce .on .ci-wspark path, .reduce .on .ci-ends path.loose, .reduce .on .ci-spin, .reduce .on .ci-note, .reduce .ci-neon.half .ci-tube,
.reduce .ci-wallgear.go, .reduce .ci-tool.ci-swing, .reduce .ci-ring, .reduce .ci-kbd .ci-cur { animation: none; }

.mm:focus-visible, .yr:focus-visible, .so:focus-visible, .ci:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }