/* Every tile is a six-face 3D cube. Closely spaced cubes form a solid puzzle. */
.board-scroll{perspective:1000px;perspective-origin:50% 40%;padding:64px 12px 80px;overflow:hidden;touch-action:pan-y;background:radial-gradient(ellipse at 50% 90%,#265f7477 0 18%,transparent 50%),linear-gradient(145deg,#142d3c,#302d48 60%,#172d38);cursor:grab}
.board-scroll:active{cursor:grabbing}
.tile-grid.cube-grid{position:relative;width:calc(var(--cube-side,4)*64px);height:calc(var(--cube-side,4)*64px);margin:0 auto;transform-style:preserve-3d;transform-origin:50% 50%;transition:transform .6s cubic-bezier(.2,.65,.25,1);filter:none!important}
.tile-grid.cube-grid.dragging{transition:none}
.tile.cube-tile{position:absolute;top:0;left:0;width:68px;height:68px;display:block;padding:0;border:0;border-radius:0;background:none!important;box-shadow:none;transform-style:preserve-3d;overflow:visible;filter:none;outline:none;transition:none;z-index:auto}
.cube-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;backface-visibility:hidden;border:1px solid #c2d4dd;border-radius:7px;background:linear-gradient(135deg,#fffffb,#dbe9f0 90%);box-shadow:inset 0 2px 3px #fff,inset -3px -4px 5px #566f7a22;pointer-events:auto}
.cube-front{transform:translateZ(34px)}
.cube-back{transform:rotateY(180deg) translateZ(34px)}
.cube-left{transform:rotateY(-90deg) translateZ(34px);background:linear-gradient(135deg,#d9e5ed,#b3c8d5)}
.cube-right{transform:rotateY(90deg) translateZ(34px);background:linear-gradient(135deg,#ebf1f3,#c4d7e2)}
.cube-top{transform:rotateX(90deg) translateZ(34px);background:linear-gradient(135deg,#fffef7,#e2edf1)}
.cube-bottom{transform:rotateX(-90deg) translateZ(34px);background:linear-gradient(135deg,#c8d7df,#93aabb)}
.cube-tile .tile-mark{color:var(--symbol-color);font:34px/1 Georgia,serif;text-shadow:0 1px 1px #fff;max-width:100%}
.cube-tile .tile-name{font:800 9px/1.08 system-ui,sans-serif;letter-spacing:0;color:#244258;text-align:center;max-width:61px;overflow-wrap:break-word;white-space:normal}
.cube-tile.free .cube-face{border-color:#f2df9c}
.cube-tile.blocked .cube-face{background:linear-gradient(135deg,#d0dce2,#aebfcb)}
.cube-tile.selected .cube-face{border:2px solid #15c7d5;box-shadow:inset 0 0 10px #5be6ea80}
.cube-tile.hint .cube-face{border:3px solid #f9d65e;box-shadow:inset 0 0 10px #ffeb7680}
.cube-tile.removed{visibility:hidden;pointer-events:none}
.cube-tile:hover .cube-face{border-color:#87d9dc}
#mountains[data-scene="0"] .board-scroll{background:linear-gradient(#16363588,#1e2d4166),url('../images/psalm23-still-waters-v62.png') center/cover}
#mountains[data-scene="3"] .board-scroll{background:radial-gradient(circle at 25% 28%,#dac78455,transparent 4%),radial-gradient(circle at 70% 18%,#dac78455,transparent 3%),linear-gradient(#111b38,#453046)}
#mountains[data-scene="7"] .board-scroll{background:radial-gradient(ellipse at bottom,#258b9b,#132842 70%)}
@media(prefers-reduced-motion:reduce){.tile-grid.cube-grid{transition:none}}

/* Opacity/filter on a 3D parent flatten its children. Dim individual faces only. */
.tile-grid.cube-grid{opacity:1!important;overflow:visible!important;clip-path:none!important;isolation:auto;contain:none;mix-blend-mode:normal;transform-style:preserve-3d!important}
.tile.cube-tile,.tile.cube-tile:disabled,.tile.cube-tile.removed{opacity:1!important;filter:none!important;overflow:visible!important;clip-path:none!important;transform-style:preserve-3d!important;isolation:auto;contain:none;mix-blend-mode:normal}
.cube-face{opacity:1;background-color:#e4edf2;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cube-tile:disabled .cube-face{background:linear-gradient(135deg,#d0dce2,#aebfcb)}