/* Painted fallback faces; WebGL uses a closed sculpted mesh for the solid. */
.cube-flat::before,.cube-side::before,.cube-flat::after,.cube-side::after {
 content:"";position:absolute;inset:0;pointer-events:none;
 background-repeat:no-repeat;background-size:100% 100%;
}
/* Painted physical faces, shared by all seven worlds. */
:root #playBoard .cube-flat, :root #playBoard .cube-side, :root #tutorialBoard .cube-flat, :root #tutorialBoard .cube-side {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:root .cube-flat::before, :root .cube-side::before { display: none; }
:root .cube-flat::after, :root .cube-side::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: var(--cube-texture);
  background-size: 200% 200%;
  background-position: var(--surface-x, 0%) var(--surface-y, 100%);
  background-repeat: no-repeat;
  pointer-events: none;
}
:root .cube-flat::after { transform: rotate(var(--surface-angle, 0deg)); }
:root .cube-side.front { --surface-x: 0%; --surface-y: 100%; }
:root .cube-side.back { --surface-x: 100%; --surface-y: 100%; }
:root .cube-side.right, :root .cube-side.left { --surface-x: 0%; --surface-y: 0%; }
:root .cube-side.top, :root .cube-side.bottom { --surface-x: 100%; --surface-y: 0%; }

/* Leaves are children of each physical face, with a spring around the stem. */
.cube-foliage { display: none; pointer-events: none; }
:root:is([data-theme="forest"],[data-theme="ocean"]) .cube-foliage {
  display: block; position: absolute; inset: 0; z-index: 1;
}
:root .cube-flat .cube-foliage { transform: rotate(var(--surface-angle, 0deg)); }
.cube-leaf { position: absolute; width: 29%; height: 29%; top: -3%; left: -3%;
  background: var(--cube-ornament) 0 0 / 200% 200% no-repeat;
  transform-origin: 55% 85%; transform: rotate(calc(-25deg + var(--leaf-flex, 0deg)));
}
.cube-leaf + .cube-leaf { top: auto; left: auto; right: 1%; bottom: 2%;
  width: 27%; height: 27%; background-position: 100% 0;
  transform-origin: 50% 50%; transform: rotate(calc(145deg - var(--leaf-flex, 0deg)));
}
:root .cube-flat::after { transform: rotate(var(--surface-angle, 0deg)) scale(var(--surface-scale,1.09)); }
:root .cube-side::after { transform: scale(var(--surface-scale,1.09)); }
:root #playBoard .cube-flat { filter: drop-shadow(0 3px 1px #10221988); }
.forest-particles { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 45; contain: strict; }
.forest-falling-leaf { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform,opacity;
  background: url('assets/materials/forest-foliage.webp') var(--leaf-cell, 0%) 100% / 200% 200% no-repeat;
}
:root:not([data-theme="forest"]) .forest-particles { display: none; }

/* Home uses the same physical material as play, without a backplate. */
#heroCubeBoard { display: none; }
:root #heroArt { display: grid; place-items: center; animation: none; }
:root #heroArt > .hero-object { display: none; }
:root #heroCubeBoard {
  display: grid; grid-template: repeat(2,minmax(0,1fr)) / repeat(2,minmax(0,1fr));
  height: min(94%, 325px); aspect-ratio: 1; gap: 0; padding: 0;
  border: 0; background: none; box-shadow: none; place-items: center;
}
#heroCubeBoard .cube-flat, #heroCubeBoard .cube-side { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#heroCubeBoard .cube-flat { filter: drop-shadow(0 2px 1px #10221988); }
#heroCubeBoard .cube-slot { cursor: pointer; width: 68%; height: 68%; }
#heroCubeBoard .cube-floor { display: none; }
#realmEffects { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 12; pointer-events: none; }
#realmEffects[hidden] { display: none; }
@media(max-height:600px) { :root #heroCubeBoard { height: 96%; } }

/* Completion keeps the physical pieces the player assembled. */
#playBoard.material-solved .cube-slot { outline: none; box-shadow: none; }
#playBoard.material-solved .cube-slot::after,
#playBoard.material-solved .cube-twist-cue,
#playBoard.material-solved .link-badge { display: none; }

/* Seaweed pivots at its root; coral stays close to the opposite stone corner. */
:root[data-theme="ocean"] .cube-leaf {width:29%;height:35%;top:-9%;left:-5%;transform-origin:50% 90%;transform:rotate(calc(-18deg + var(--leaf-flex,0deg)));}
:root[data-theme="ocean"] .cube-leaf + .cube-leaf {width:24%;height:27%;top:auto;left:auto;bottom:-2%;right:-3%;transform-origin:50% 90%;transform:rotate(calc(16deg - var(--leaf-flex,0deg)*.3));}
:root[data-theme="ocean"] .cube-flat .cube-leaf:first-child,
:root[data-theme="ocean"] #heroCubeBoard .cube-side .cube-leaf:first-child {
 animation: seaCurrent 3.6s ease-in-out infinite alternate;
 animation-play-state:var(--realm-effects-state,paused);
}
@keyframes seaCurrent {from{rotate:-4deg}to{rotate:5deg}}
:root[data-motion="off"] .cube-leaf {animation:none!important}

/* Geometry owns the silhouette and all six painted faces, including their bevels. */
.cube-mesh {display:none;position:absolute;left:-40%;top:-40%;width:180%;height:180%;pointer-events:none;z-index:0;}
:root .has-mesh .cube-flat::after,:root .has-mesh .cube-side::after {display:none;}
.has-mesh .cube-flat,.has-mesh .cube-motion {z-index:1;}
.has-mesh .cube-mesh {display:block;filter:drop-shadow(0 3px 1px #10221955);}
#playBoard .cube-mesh {filter:drop-shadow(0 5px 2px #081a2370) drop-shadow(0 11px 8px #081a2340);}
/* A browser without WebGL keeps the readable painted face. */
.cube-slot:not(.has-mesh).is-moving .cube-flat {visibility:visible;}
.cube-slot:not(.has-mesh).is-moving .cube-motion {visibility:hidden;}