/* Game B layout: four square views in a 2x2 grid, then three sliders. */
.views {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 600px;
  margin: 0 auto;
}
.view {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid #000;
  background: #fff;
}
.view canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none; /* dragging the point must not scroll the page */
  cursor: crosshair;
}
.view-label {
  position: absolute;
  right: 6px;
  top: 4px;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  pointer-events: none;
}
.sliders {
  max-width: 600px;
  margin: 20px auto 0;
  display: grid;
  gap: 18px;
}
.sliders label > b { font-weight: 700; }
.sliders label[data-axis="x"] > b { color: #d23b3b; }
.sliders label[data-axis="y"] > b { color: #2f9e44; }
.sliders label[data-axis="z"] > b { color: #2f6fd6; }
.sliders label {
  display: grid;
  grid-template-columns: 3em 1fr 3.5em;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  text-align: left;
}
.sliders input[type="range"] { width: 100%; accent-color: var(--accent); }
.sliders output { text-align: right; font-variant-numeric: tabular-nums; }
.view-error {
  grid-column: 1 / -1;
  padding: 12px;
  font-size: 14px;
  color: #a00;
  background: #fff3f3;
  border: 1px solid #e0b4b4;
  text-align: left;
}
.view-note {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  pointer-events: none;
}
.axis-arrow { font-weight: 400; font-size: 15px; }
.slider-note { margin: 0; }

/* Chunk 4.3: round flow and results (most styles come from ../styles.css). */
.result3d {
  max-width: 600px;
  min-height: 1.3em; /* keeps the page from jumping when the line fills in */
  margin: 14px auto 0;
  font-size: 15px;
  font-weight: 600;
}
.view canvas.locked { cursor: not-allowed; } /* guess locked: reveal or results review */
.sliders input[type="range"]:disabled { opacity: 0.5; }