/* Shared physical cubes and informational previews. */
.cube-slot { position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; border-radius: 10px; touch-action: none; cursor: grab; user-select: none; -webkit-touch-callout: none; perspective: 620px; }
.cube-slot.is-pressed, .cube-slot.is-dragging { cursor: grabbing; }
.cube-slot.is-moving[aria-pressed] { z-index: 5; }
.cube-slot[aria-pressed="true"] { outline: 3px solid var(--paper-hi); outline-offset: 3px; box-shadow: 0 0 0 7px var(--action-mid); z-index: 3; }
.cube-slot[aria-pressed="true"]::after { content: attr(data-piece-label); position: absolute; top: -10px; left: -8px; z-index: 4; min-width: 22px; height: 22px; padding: 2px 5px; border: 2px solid var(--theme-ink); border-radius: 8px; background: var(--paper-hi); color: var(--theme-ink); font: 700 12px/14px Quest, sans-serif; pointer-events: none; }
.cube-flat, .cube-side { position: absolute; inset: 0; border: 2.5px solid #503726; border-radius: 9px 11px 8px 10px; background: var(--cube-b); box-shadow: inset 0 2px #fff7, inset 0 -3px #50372625; pointer-events: none; }
.cube-flat::after, .cube-side::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, #fff2, transparent 35% 80%, #43271710); }
.cube-flat { background: var(--face); }
.cube-twist-cue { display: none; position: absolute; top: 3px; right: 3px; z-index: 4; width: 20px; height: 20px; border-radius: 50%; color: var(--theme-ink); background: var(--paper-hi); font: 700 18px/20px sans-serif; text-align: center; pointer-events: none; }
.cube-slot[aria-pressed="true"] .cube-twist-cue, #tutorialBoard .cube-twist-cue { display: block; }
.cube-slot.is-moving .cube-twist-cue { display: none; }
.cube-slot.is-moving .cube-flat { visibility: hidden; }
.cube-floor { position: absolute; inset: 7px; border-radius: 14px; background: #1e1715; filter: blur(6px); opacity: 0; transform: translateY(12px) scale(.96); pointer-events: none; }
.cube-geometry { position: absolute; inset: 0; transform-style: preserve-3d; }
.cube-motion { position: absolute; inset: 0; transform-style: preserve-3d; visibility: hidden; pointer-events: none; }
.cube-slot.is-moving .cube-motion { visibility: visible; }
.cube-side { backface-visibility: hidden; border-radius: 5px; }
.cube-side.front { transform: translateZ(var(--half)); background: linear-gradient(135deg, var(--cube-a) 50%, var(--cube-b) 50%); }
.cube-side.right { transform: rotateY(90deg) translateZ(var(--half)); background: var(--cube-a); }
.cube-side.left { transform: rotateY(-90deg) translateZ(var(--half)); background: var(--cube-a); }
.cube-side.top { transform: rotateX(90deg) translateZ(var(--half)); background: var(--cube-b); }
.cube-side.bottom { transform: rotateX(-90deg) translateZ(var(--half)); background: var(--cube-b); }
.cube-side.back { transform: rotateY(180deg) translateZ(var(--half)); background: linear-gradient(135deg, var(--cube-a) 50%, var(--cube-b) 50%); }
.lab-turn-guide { position: relative; width: 100%; align-self: center; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 12px; border: 2px solid var(--theme-ink); border-radius: 15px 19px 14px 18px; background: linear-gradient(135deg, var(--paper-hi), var(--paper-low)); color: var(--theme-ink); box-shadow: 0 4px var(--theme-ink), inset 0 2px #fff7; }
.guide-copy .overline { color: var(--theme-muted); font-size: 8px; letter-spacing: .8px; text-shadow: none; }
.guide-copy h2 { margin: 7px 0; font: 700 20px/1.05 Quest, sans-serif; }
.guide-copy p { margin: 0 0 7px; font-size: 11px; line-height: 1.35; color: var(--theme-muted); }
.guide-copy > small { display: block; font-size: 9px; line-height: 1.35; color: var(--theme-muted); }
.turn-previews { display: grid; grid-template: repeat(3, 48px) / repeat(3, 48px); gap: 2px; user-select: none; }
.turn-preview { position: relative; padding: 0; border: 0; background: transparent; border-radius: 8px; cursor: default; }
.turn-preview[data-direction="up"] { grid-area: 1 / 2; }
.turn-preview[data-direction="left"] { grid-area: 2 / 1; }
.turn-preview[data-direction="right"] { grid-area: 2 / 3; }
.turn-preview[data-direction="down"] { grid-area: 3 / 2; }
.preview-swatch { position: absolute; inset: 3px; background: var(--face); border: 2px solid #503726; border-radius: 6px 8px 5px 7px; box-shadow: inset 0 2px #fff7, 0 2px #50372640; pointer-events: none; }
.preview-arrow { position: absolute; right: -3px; bottom: -3px; color: var(--theme-ink); font: 700 22px/1 sans-serif; text-shadow: 1px 1px var(--paper-hi), -1px -1px var(--paper-hi), 1px -1px var(--paper-hi), -1px 1px var(--paper-hi); pointer-events: none; }
.preview-current { grid-area: 2 / 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.preview-current span { width: 26px; height: 26px; border: 1.5px solid #503726; border-radius: 5px; background: var(--current); }
.preview-current small { font-size: 8px; color: var(--theme-muted); }
.turn-previews:not(.has-selection) .turn-preview, .turn-previews:not(.has-selection) .preview-current { opacity: .35; }
.turn-preview.is-previewing { outline: 2px solid var(--action-ink); }
.turn-preview.will-commit { outline-width: 3px; background: var(--action-mid); }