:root { --board-gap: clamp(5px, 1.2vw, 9px); --cube-face: #fff; --cube-edge: #94a3b8; --cube-ink: #172033; }
:root[data-theme="dark"] { --cube-face: #f1f2f6; --cube-edge: #94a3b8; --cube-ink: #172033; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cube-face: #f1f2f6; --cube-edge: #94a3b8; --cube-ink: #172033; } }
body.experiment-shell[data-experiment="cube-route"] main { width: min(940px, calc(100% - 28px)); max-width: 940px; margin-top: 8px; }
body.experiment-shell[data-experiment="cube-route"] .game-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(250px, .9fr); align-items: center; gap: clamp(18px, 3vw, 36px); }
body.experiment-shell[data-experiment="cube-route"] #board { --board-gap: clamp(5px, 1.2vw, 9px); display: grid; position: relative; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: var(--board-gap); width: min(100%, 420px, 58svh); aspect-ratio: 1; margin: 0 auto; padding: 8px; border: 1px solid var(--ui-line); border-radius: 22px; background: color-mix(in srgb, var(--ui-surface) 90%, var(--ui-muted) 10%); box-shadow: 0 14px 34px #0f172a18; }
body.experiment-shell[data-experiment="cube-route"] .cell { display: grid; min-width: 0; min-height: 0; place-items: start; padding: clamp(5px, 1.1vw, 10px); border: 1px solid color-mix(in srgb, var(--ui-line) 85%, var(--ui-muted)); border-radius: 14px; background: linear-gradient(145deg, var(--ui-surface), color-mix(in srgb, var(--ui-bg) 86%, var(--ui-surface))); color: var(--ui-muted); font-size: clamp(.6rem, 1.2vw, .76rem); font-weight: 750; text-align: left; }
body.experiment-shell[data-experiment="cube-route"] .cell.path { background: color-mix(in srgb, var(--ui-accent) 13%, var(--ui-surface)); color: var(--ui-text); }
body.experiment-shell[data-experiment="cube-route"] .cell.target { color: #a16207; }
body.experiment-shell[data-experiment="cube-route"] .cell.exit { position: relative; }
body.experiment-shell[data-experiment="cube-route"] .cell.exit::after { content: ''; position: absolute; inset: 8%; border: 4px solid #8292a5; border-radius: 50%; background: radial-gradient(circle at 50% 65%, #080d14, #182231); box-shadow: inset 0 8px 12px #000b; }
body.experiment-shell[data-experiment="cube-route"] .cell.exit[data-ready="true"]::after { border-color: #60a5fa; }
body.experiment-shell[data-experiment="cube-route"] #board { overflow: hidden; }
body.experiment-shell[data-experiment="cube-route"] .cell.player { outline: 2px solid var(--ui-accent); outline-offset: -3px; background: transparent; }
body.experiment-shell[data-experiment="cube-route"] .cube-position { position: relative; z-index: 2; display: grid; min-width: 0; min-height: 0; place-items: center; width: 100%; height: 100%; pointer-events: none; }
body.experiment-shell[data-experiment="cube-route"] .cube-scene { display: grid; place-items: center; width: 78%; height: 78%; perspective: 780px; container-type: size; }
body.experiment-shell[data-experiment="cube-route"] .cube-scene { transform: rotateX(-24deg) rotateY(-24deg); transform-style: preserve-3d; }
body.experiment-shell[data-experiment="cube-route"] .die { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
body.experiment-shell[data-experiment="cube-route"] .cube-face { position: absolute; inset: 0; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 11%; border: 2px solid var(--cube-edge); border-radius: 15%; background: linear-gradient(145deg, #fff 0%, var(--cube-face) 58%, #e2e8f0 100%); box-shadow: inset 0 1px 4px #fff9, 0 1px 3px #5b45291c; backface-visibility: hidden; }
body.experiment-shell[data-experiment="cube-route"] .cube-face.top { transform: rotateX(90deg) translateZ(50cqw); }
body.experiment-shell[data-experiment="cube-route"] .cube-face.bottom { transform: rotateX(-90deg) translateZ(50cqw); }
body.experiment-shell[data-experiment="cube-route"] .cube-face.north { transform: rotateY(180deg) translateZ(50cqw); }
body.experiment-shell[data-experiment="cube-route"] .cube-face.south { transform: translateZ(50cqw); }
body.experiment-shell[data-experiment="cube-route"] .cube-face.east { transform: rotateY(90deg) translateZ(50cqw); }
body.experiment-shell[data-experiment="cube-route"] .cube-face.west { transform: rotateY(-90deg) translateZ(50cqw); }
@supports not (width: 1cqw) {
  body.experiment-shell[data-experiment="cube-route"] .cube-face.top { transform: rotateX(90deg) translateZ(42px); }
  body.experiment-shell[data-experiment="cube-route"] .cube-face.bottom { transform: rotateX(-90deg) translateZ(42px); }
  body.experiment-shell[data-experiment="cube-route"] .cube-face.north { transform: rotateY(180deg) translateZ(42px); }
  body.experiment-shell[data-experiment="cube-route"] .cube-face.south { transform: translateZ(42px); }
  body.experiment-shell[data-experiment="cube-route"] .cube-face.east { transform: rotateY(90deg) translateZ(42px); }
  body.experiment-shell[data-experiment="cube-route"] .cube-face.west { transform: rotateY(-90deg) translateZ(42px); }
}
body.experiment-shell[data-experiment="cube-route"] .pip { align-self: center; justify-self: center; width: clamp(5px, 1.2vw, 10px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #475569 0%, var(--cube-ink) 60%); box-shadow: 0 1px 1px #fff8; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="1"] { grid-area: 1 / 1; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="2"] { grid-area: 1 / 2; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="3"] { grid-area: 1 / 3; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="4"] { grid-area: 2 / 1; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="5"] { grid-area: 2 / 2; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="6"] { grid-area: 2 / 3; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="7"] { grid-area: 3 / 1; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="8"] { grid-area: 3 / 2; }
body.experiment-shell[data-experiment="cube-route"] .pip[data-pip="9"] { grid-area: 3 / 3; }
body.experiment-shell[data-experiment="cube-route"] .game-panel { min-width: 0; }
body.experiment-shell[data-experiment="cube-route"] #game-instructions { margin: 0 0 12px; color: var(--ui-muted); }
body.experiment-shell[data-experiment="cube-route"] #goal { margin: 0 0 8px; padding: 9px 12px; border: 1px solid var(--ui-line); border-radius: 12px; background: var(--ui-surface); color: var(--ui-text); font-size: .9rem; }
body.experiment-shell[data-experiment="cube-route"] #goal strong { color: var(--ui-accent); font-size: 1.1rem; }
body.experiment-shell[data-experiment="cube-route"] #status { min-height: 2.8em; margin: 8px 0; padding: 7px 8px; border-radius: 10px; background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-bg)); color: var(--ui-text); font-size: .88rem; text-align: left; }
body.experiment-shell[data-experiment="cube-route"] .directions { display: grid; grid-template: repeat(2, 48px) / repeat(3, 48px); gap: 5px; width: max-content; margin: 10px 0; }
body.experiment-shell[data-experiment="cube-route"] .directions button { min-width: 48px; min-height: 48px; padding: 0; border: 1px solid var(--ui-line); border-radius: 14px; background: var(--ui-surface); color: var(--ui-text); font-size: 1.35rem; font-weight: 750; cursor: pointer; touch-action: manipulation; }
body.experiment-shell[data-experiment="cube-route"] .directions button:hover:not(:disabled) { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-surface)); }
body.experiment-shell[data-experiment="cube-route"] .directions button:disabled { opacity: .45; }
body.experiment-shell[data-experiment="cube-route"] .directions #up { grid-area: 1 / 2; }
body.experiment-shell[data-experiment="cube-route"] .directions #left { grid-area: 2 / 1; }
body.experiment-shell[data-experiment="cube-route"] .directions #down { grid-area: 2 / 2; }
body.experiment-shell[data-experiment="cube-route"] .directions #right { grid-area: 2 / 3; }
body.experiment-shell[data-experiment="cube-route"] .controls { justify-content: flex-start; margin: 9px 0 0; }
@media (max-width: 700px) {
  body.experiment-shell[data-experiment="cube-route"] main { width: min(100% - 20px, 440px); margin-top: 6px; }
  body.experiment-shell[data-experiment="cube-route"] .game-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  body.experiment-shell[data-experiment="cube-route"] #board { width: min(100%, 420px, 48svh); border-radius: 18px; }
  body.experiment-shell[data-experiment="cube-route"] .game-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 0 12px; }
  body.experiment-shell[data-experiment="cube-route"] #game-instructions,
  body.experiment-shell[data-experiment="cube-route"] #goal,
  body.experiment-shell[data-experiment="cube-route"] #status { grid-column: 1 / -1; }
  body.experiment-shell[data-experiment="cube-route"] .directions { grid-column: 1; grid-row: 4 / span 2; margin: 0; }
  body.experiment-shell[data-experiment="cube-route"] .controls { grid-column: 2; grid-row: 4 / span 2; display: grid; margin: 0; }
}
@media (max-width: 350px) {
  body.experiment-shell[data-experiment="cube-route"] .game-panel { grid-template-columns: 1fr; }
  body.experiment-shell[data-experiment="cube-route"] .directions,
  body.experiment-shell[data-experiment="cube-route"] .controls { grid-column: 1; grid-row: auto; }
  body.experiment-shell[data-experiment="cube-route"] .controls { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  body.experiment-shell[data-experiment="cube-route"] * { scroll-behavior: auto !important; }
}

/* One scene owns the tray, markers, shadows and rolling die. DOM remains the fallback. */
body.experiment-shell[data-experiment="cube-route"] #board .route-webgl { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
body.experiment-shell[data-experiment="cube-route"] #board[data-renderer="three"] { border-color:transparent; background:transparent; box-shadow:none; }
body.experiment-shell[data-experiment="cube-route"] #board[data-renderer="three"] > .cell,
body.experiment-shell[data-experiment="cube-route"] #board[data-renderer="three"] > .cube-position { opacity:0; }
body.experiment-shell[data-experiment="cube-route"] #goal,
body.experiment-shell[data-experiment="cube-route"] #status { padding:4px 0; border:0; border-radius:0; background:transparent; }
body.experiment-shell[data-experiment="cube-route"] #status { padding-right:36px; }
body.experiment-shell[data-experiment="cube-route"] .route-help { grid-column:1 / -1; margin-top:12px; color:var(--ui-muted); font-size:.82rem; }
@media (max-width:700px) {
  body.experiment-shell[data-experiment="cube-route"] #goal { grid-row:1; }
  body.experiment-shell[data-experiment="cube-route"] #status { grid-row:2; }
  body.experiment-shell[data-experiment="cube-route"] .directions,
  body.experiment-shell[data-experiment="cube-route"] .controls { grid-row:3; }
  body.experiment-shell[data-experiment="cube-route"] .route-help { grid-row:4; }
}
@media (max-width:350px) {
  body.experiment-shell[data-experiment="cube-route"] .controls { grid-row:4; }
  body.experiment-shell[data-experiment="cube-route"] .route-help { grid-row:5; }
}