/* World motion lives around the puzzle; no extra controls or moving targets. */
.world-atmosphere { position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;contain:paint; }
.world-atmosphere::before { content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 10% 32%,rgba(var(--accent-rgb),.13),transparent 46%),radial-gradient(ellipse at 95% 75%,rgba(var(--accent2-rgb),.12),transparent 42%); }
.scene-orbit { position:absolute;width:480px;height:480px;border:1px solid rgba(var(--accent-rgb),.2);border-radius:50%;animation:scene-orbit 30s linear infinite; }
.scene-orbit::before { content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px rgba(var(--accent-rgb),.5); }
.scene-orbit.one { left:-370px;top:15%; }
.scene-orbit.two { right:-390px;bottom:5%;width:520px;height:520px;border-color:rgba(var(--accent2-rgb),.18);animation-duration:42s;animation-direction:reverse; }
.scene-orbit.two::before { background:var(--accent-2); }
.scene-ribbon { position:absolute;left:-20%;width:140%;height:140px;border-radius:50%;border-top:1px solid rgba(var(--accent-rgb),.13);background:linear-gradient(180deg,rgba(var(--accent-rgb),.07),transparent 45%);animation:scene-current 14s ease-in-out infinite alternate; }
.scene-ribbon.one { top:22%;transform:rotate(-12deg); }
.scene-ribbon.two { top:61%;animation-delay:-7s;animation-duration:19s; }
.scene-ribbon.three { top:83%;animation-delay:-12s;animation-duration:23s; }
.scene-flecks { position:absolute;inset:0; }
.scene-flecks i { --x:8%;--y:22%;--drift:26px;position:absolute;left:var(--x);top:var(--y);width:7px;height:7px;border:1px solid var(--accent);opacity:.32;transform:rotate(18deg);animation:scene-float 9s ease-in-out infinite alternate; }
.scene-flecks i:nth-child(2) { --x:89%;--y:30%;--drift:-32px;animation-delay:-4s;animation-duration:12s;color:var(--accent-2);border-color:currentColor; }
.scene-flecks i:nth-child(3) { --x:12%;--y:68%;--drift:35px;animation-delay:-7s;animation-duration:15s;width:10px;height:10px; }
.scene-flecks i:nth-child(4) { --x:87%;--y:76%;--drift:-27px;animation-delay:-3s;animation-duration:11s; }
.scene-flecks i:nth-child(5) { --x:23%;--y:15%;--drift:18px;animation-delay:-5s;width:4px;height:4px;background:var(--warm);border-color:var(--warm); }
.scene-flecks i:nth-child(6) { --x:76%;--y:53%;--drift:-24px;animation-delay:-8s;animation-duration:14s; }
.scene-flecks i:nth-child(7) { --x:6%;--y:47%;--drift:30px;animation-delay:-2s;width:4px;height:4px; }
.scene-flecks i:nth-child(8) { --x:94%;--y:91%;--drift:-22px;animation-delay:-6s;animation-duration:13s;width:5px;height:5px; }
@keyframes scene-orbit { to{transform:rotate(360deg)} }
@keyframes scene-current { from{transform:translate3d(-12px,-12px,0) rotate(-8deg)}to{transform:translate3d(24px,22px,0) rotate(4deg)} }
@keyframes scene-float { from{transform:translate3d(0,12px,0) rotate(15deg);opacity:.2}to{transform:translate3d(var(--drift),-16px,0) rotate(75deg);opacity:.48} }

/* Arcade: a dimensional neon horizon, orbiting pixels and a slow marquee. */
body[data-theme="prism"] .world-atmosphere::after { content:"";position:absolute;left:-30%;right:-30%;bottom:-70px;height:240px;background:linear-gradient(rgba(var(--accent-rgb),.13) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--accent2-rgb),.14) 1px,transparent 1px);background-size:38px 30px;transform:perspective(240px) rotateX(52deg);transform-origin:bottom;opacity:.55; }
body[data-theme="prism"] .scene-ribbon { height:90px;border-color:rgba(var(--accent2-rgb),.14);background:linear-gradient(180deg,rgba(var(--accent2-rgb),.09),transparent 55%); }
body[data-theme="prism"] .scene-flecks i { box-shadow:3px 3px 0 rgba(var(--accent-rgb),.14);border-radius:1px; }
body[data-theme="prism"] .scene-orbit { border-radius:24%;border-style:dashed; }

/* Ocean: slow ribbons of water and buoyant bubbles. */
body[data-theme="midnight"] .scene-ribbon { height:160px;border-top:2px solid rgba(20,98,112,.12);background:linear-gradient(180deg,rgba(20,98,112,.09),transparent 70%); }
body[data-theme="midnight"] .scene-orbit { border-color:rgba(20,98,112,.14); }
body[data-theme="midnight"] .scene-flecks i { width:12px;height:12px;border:1.5px solid #398797;border-radius:50%;box-shadow:inset 2px 2px 0 rgba(255,255,255,.55); }
body[data-theme="midnight"] .scene-flecks i:nth-child(3n) { width:6px;height:6px; }

/* Moon Base: dotted orbital paths and quietly twinkling stars. */
body[data-theme="moon"] .scene-ribbon { display:none; }
body[data-theme="moon"] .scene-orbit { border-style:dashed;border-color:rgba(var(--accent2-rgb),.22); }
body[data-theme="moon"] .scene-flecks i { width:8px;height:8px;border:0;background:var(--accent-2);clip-path:polygon(44% 0,56% 0,58% 40%,100% 44%,100% 56%,58% 60%,56% 100%,44% 100%,42% 60%,0 56%,0 44%,42% 40%);animation-name:scene-star; }
@keyframes scene-star { from{transform:translate3d(0,0,0) scale(.75);opacity:.18}to{transform:translate3d(3px,-5px,0) scale(1.2);opacity:.7} }

/* Toybox: sunlit curves and flecks over the wooden play table. */
body[data-theme="play"] .scene-orbit { border-color:rgba(146,91,40,.16);border-width:2px;border-style:dashed; }
body[data-theme="play"] .scene-orbit::before { background:#b58449;box-shadow:none; }
body[data-theme="play"] .scene-ribbon { border-color:rgba(146,91,40,.12);background:linear-gradient(180deg,rgba(255,204,123,.18),transparent 55%); }
body[data-theme="play"] .scene-flecks i { border-color:#b58449;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,250,240,.8); }
body[data-theme] .ambient-canvas { opacity:.55; }
body[data-theme="play"] .ambient-canvas,body[data-theme="midnight"] .ambient-canvas { opacity:.4; }

/* The light under the board answers each swipe and collection. */
.board-shell { isolation:isolate; }
.board-light { position:absolute;inset:-20px;z-index:-1;pointer-events:none;border-radius:40px;background:radial-gradient(ellipse at var(--focus-x,50%) var(--focus-y,50%),rgba(var(--accent-rgb),.65),transparent 66%);opacity:.16; }
.board-light[data-kind="collect"],.board-light[data-kind="home"] { background:radial-gradient(ellipse at var(--focus-x,50%) var(--focus-y,50%),rgba(var(--warm-rgb),.65),transparent 68%); }
.live-frame { position:absolute;inset:-4px;border-radius:calc(var(--board-radius) + 4px);pointer-events:none;overflow:hidden;z-index:1;border:1px solid rgba(var(--accent-rgb),.16); }
.live-frame i { position:absolute;overflow:hidden;opacity:.65; }
.live-frame i::after { content:"";position:absolute;background:linear-gradient(90deg,transparent,var(--accent),var(--accent-2),transparent);border-radius:99px;animation:frame-run 6s linear infinite; }
.live-frame i:nth-child(1),.live-frame i:nth-child(3) { left:10px;right:10px;height:2px; }
.live-frame i:nth-child(1) { top:0; }
.live-frame i:nth-child(3) { bottom:0;transform:rotate(180deg); }
.live-frame i:nth-child(1)::after,.live-frame i:nth-child(3)::after { width:30%;height:100%;left:0; }
.live-frame i:nth-child(2),.live-frame i:nth-child(4) { top:10px;bottom:10px;width:2px; }
.live-frame i:nth-child(2) { right:0; }
.live-frame i:nth-child(4) { left:0;transform:rotate(180deg); }
.live-frame i:nth-child(2)::after,.live-frame i:nth-child(4)::after { width:100%;height:30%;background:linear-gradient(transparent,var(--accent-2),var(--accent),transparent);animation-name:frame-fall; }
.live-frame i:nth-child(2)::after { animation-delay:-1.5s; }
.live-frame i:nth-child(3)::after { animation-delay:-3s; }
.live-frame i:nth-child(4)::after { animation-delay:-4.5s; }
@keyframes frame-run { from{transform:translateX(-100%)}to{transform:translateX(435%)} }
@keyframes frame-fall { from{transform:translateY(-100%)}to{transform:translateY(435%)} }
body[data-theme="prism"] .live-frame { box-shadow:0 0 12px rgba(var(--accent2-rgb),.13); }
body[data-theme="play"] .live-frame { border-color:rgba(181,132,73,.25); }
body[data-theme="play"] .live-frame i { opacity:.35; }
body[data-theme="midnight"] .live-frame i::after { animation-duration:9s; }
body[data-theme="moon"] .live-frame i::after { animation-duration:12s; }

/* Larger, unhurried idle gestures make the crafted pieces feel present. */
body[data-theme="prism"] .player:not(.in-motion) .piece-shell { animation:pixel-hover 3.6s ease-in-out infinite; }
body[data-theme="play"] .player:not(.in-motion) .piece-shell { animation:marble-idle 4.8s ease-in-out infinite; }
@keyframes pixel-hover { 0%,100%{transform:translateY(1px) scale(.99)}50%{transform:translateY(-2px) scale(1.035)} }
@keyframes marble-idle { 0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)} }
body[data-theme] .cell.item:not(.collected) .piece-symbol { animation:living-pickup 3.3s ease-in-out infinite;animation-delay:calc(var(--delay,0ms) * 2); }
body[data-theme] .cell.item:nth-child(2n):not(.collected) .piece-symbol { animation-delay:-1.7s; }
body[data-theme] .cell.item:nth-child(3n):not(.collected) .piece-symbol { animation-delay:-.8s; }
@keyframes living-pickup { 0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,calc(-50% - 3px)) scale(1.075)} }
body[data-theme] .cell.item:not(.collected):not(.sequence)::after { animation:pickup-halo 3.3s ease-in-out infinite;animation-delay:-.5s; }
@keyframes pickup-halo { 0%,100%{box-shadow:0 0 0 0 rgba(var(--warm-rgb),0);opacity:.5}50%{box-shadow:0 0 9px 1px rgba(var(--warm-rgb),.22);opacity:1} }
body[data-theme] .board-sheen { display:block;position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 12% 5%,rgba(var(--accent-rgb),.1),transparent 60%),radial-gradient(ellipse at 90% 95%,rgba(var(--accent2-rgb),.08),transparent 60%); }
body[data-theme] .board.gliding .board-sheen { animation:swipe-light .7s ease-out; }
@keyframes swipe-light { from{opacity:1}to{opacity:.35} }
body[data-theme="prism"] .trail-dot::before { box-shadow:0 0 6px rgba(var(--accent-rgb),.48); }
body[data-theme] .cell.exit.ready::before { animation:home-ready 2s ease-in-out infinite; }
body[data-theme] .cell.exit.ready { box-shadow:var(--floor-edge),inset 0 0 12px rgba(var(--warm-rgb),.16); }

/* Respect the existing quiet modes and keep phone rendering bounded. */
.app[data-effects="light"] .scene-ribbon.three,.app[data-effects="light"] .scene-flecks i:nth-child(even) { display:none; }
.app[data-effects="light"] .cell.item:not(.collected)::after { animation:none; }
.app[data-sleeping="true"] *,.app[data-sleeping="true"] *::before,.app[data-sleeping="true"] *::after { animation-play-state:paused!important; }
body[data-living="false"] .world-atmosphere,body[data-living="false"] .live-frame,body[data-living="false"] .board-light { display:none; }
body[data-bedtime="true"] .world-atmosphere,body[data-bedtime="true"] .live-frame,body[data-bedtime="true"] .board-light { display:none!important; }
body[data-bedtime="true"] .piece-shell,body[data-bedtime="true"] .piece-symbol,body[data-bedtime="true"] .cell::after,body[data-bedtime="true"] .board-sheen { animation:none!important; }
@media(prefers-reduced-motion:reduce) {
  .world-atmosphere,.live-frame,.board-light { display:none!important; }
  body[data-theme] .piece-shell,body[data-theme] .cell.item .piece-symbol,body[data-theme] .cell.item::after,body[data-theme] .board-sheen { animation:none!important; }
}