.iso-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
  margin-bottom: 18px;
}

.iso-panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 260px;
  max-width: 340px;
}
.iso-panel h3 {
  margin: 0;
  font-family: var(--font-main);
  font-size: 1.05rem;
}

.iso-scene {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
}
.iso-world {
  position: absolute;
  left: 50%;
  top: 58%;
  transform-style: preserve-3d;
}

.voxel {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  transform-style: preserve-3d;
  left: 0;
  top: 0;
}
/* Trois teintes franches par cube (dessus clair, face moyenne, côté sombre)
   et une arête nette entre chaque face : on lit la jonction de chaque bloc,
   y compris sur le fond blanc du thème clair. */
.voxel {
  --vx-top: #ffec80;
  --vx-front: #ffd400;
  --vx-side: #b89600;
  --vx-edge: #111111;
}
:root[data-theme="light"] .voxel {
  --vx-top: #7da2ff;
  --vx-front: #0b3bd9;
  --vx-side: #05237f;
  --vx-edge: #ffffff;
}
.voxel-face {
  position: absolute;
  width: var(--cube-size);
  height: var(--cube-size);
  border: 2px solid var(--vx-edge);
  box-sizing: border-box;
}
.voxel-top { background: var(--vx-top); transform: rotateX(90deg) translateZ(calc(var(--cube-size) / 2)); }
.voxel-front { background: var(--vx-front); transform: translateZ(calc(var(--cube-size) / 2)); }
.voxel-back { background: var(--vx-front); transform: rotateY(180deg) translateZ(calc(var(--cube-size) / 2)); }
.voxel-left { background: var(--vx-side); transform: rotateY(-90deg) translateZ(calc(var(--cube-size) / 2)); }
.voxel-right { background: var(--vx-side); transform: rotateY(90deg) translateZ(calc(var(--cube-size) / 2)); }

.rotate-row {
  display: flex;
  gap: 8px;
}

.plan-hint {
  color: var(--text-muted);
  font-size: 0.88rem;
  text-align: center;
  margin: 4px 0 10px;
}

.plan-grid {
  display: grid;
  gap: 4px;
  width: fit-content;
  margin: 0 auto 18px;
}

.plan-cell {
  width: clamp(36px, 9vw, 52px);
  height: clamp(36px, 9vw, 52px);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  background: var(--cell-bg);
  color: var(--text);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.12s, transform 0.08s;
  font-family: var(--font-ui);
}
.plan-cell:active { transform: scale(0.94); }
.plan-cell.correct { border-color: var(--success); background: var(--success-bg); color: var(--success); }
.plan-cell.wrong { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 0 auto;
}

@media (max-width: 520px) {
  .iso-scene { height: 180px; }
}