/* /resources/css/cube-of-a-binomial.css — the 3D cube-splitting demo for (a+b)^3.
   Legend/button/message/result/formula styling is shared from step-demo.css;
   this file only holds the 3D-specific cube/scene/box/face/slot rules. */

.cob-demo { margin: 20px 0 10px; }

.cob-wrap {
  display: flex; flex-wrap: wrap; gap: 28px; justify-content: center;
  margin: 10px 0 18px;
}
.cob-col { text-align: center; width: 300px; max-width: 100%; }
.cob-col-title { font-weight: 700; font-size: 0.95rem; color: #1e293b; margin-bottom: 6px; }
.cob-col-hint { font-size: 0.76rem; color: #64748b; margin-bottom: 10px; }

.cob-scene {
  width: 260px; height: 260px; margin: 0 auto; perspective: 900px;
  touch-action: none; cursor: grab;
}
.cob-scene:active { cursor: grabbing; }
.cob-world {
  width: 100%; height: 100%; position: relative;
  transform-style: preserve-3d;
}
/* only applied briefly during Reset, so live dragging stays instant/1:1 */
.cob-world.cob-resetting { transition: transform 0.5s ease; }

.cob-box {
  position: absolute; transform-style: preserve-3d;
  transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.4,0,0.2,1);
}
.cob-box.cob-movable { cursor: pointer; }
.cob-face {
  position: absolute; box-sizing: border-box;
  border: 1.4px solid #1e293b;
}
.cob-box.cob-movable:hover .cob-face { filter: brightness(1.08); }
.cob-box.cob-hidden { opacity: 0; pointer-events: none; }

/* empty wireframe slot markers — always present in both scenes so removed/awaited
   pieces still show exactly where they belong */
.cob-slot-face {
  position: absolute; box-sizing: border-box;
  border: 1.2px dashed #94a3b8; background: transparent;
}

.cob-legend-swatch { width: 15px; height: 15px; border-radius: 3px; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.25); }

@media (max-width: 680px) {
  .cob-scene { width: 220px; height: 220px; }
}