/* 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-name{display:block;width:100%;max-width:52px;font:700 var(--phrase-size,11.5px)/1.2 system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#173b4c;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:none;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)}

#progressText{position:sticky;top:8px;z-index:10;min-height:2.7em;margin:12px 0;padding:10px 14px;border:1px solid #597c82;border-radius:10px;background:#142c33f5;color:#fff;font:600 14px/1.4 system-ui,sans-serif;box-shadow:0 3px 10px #0003}.cube-tile,.cube-face{touch-action:pan-y;user-select:none;-webkit-user-select:none}.cube-tile.selected .cube-face{border:3px solid #14eef4;box-shadow:inset 0 0 15px #15d9e480}

/* Text fills the face while the six opaque faces retain true cube depth. */
.cube-tile .cube-face{padding:4px;gap:0}

.cube-text-fit-probe{position:fixed;left:-10000px;top:0;visibility:hidden;pointer-events:none;width:52px;max-width:52px;box-sizing:content-box;padding:0;border:0;margin:0;font:700 11.5px/1.2 system-ui,sans-serif;letter-spacing:0;text-transform:none;hyphens:none;white-space:normal;overflow-wrap:normal;word-break:normal}

/* Keep the localized Melkizedek name intact on one line. */
.cube-tile .tile-name.single-line-name{white-space:nowrap;overflow-wrap:normal;word-break:normal}