/* css/cubic.css — intentionally minimal prototype styles */
.cubic-game { width: 100%; }
.cubic-game .game-layout {
  grid-template-columns: minmax(0, 590px) 280px;
  width: min(100%, 920px);
  gap: 24px;
}
.cubic-game .game-layout-main { width: 100%; min-width: 0; }
.cubic-board-heading { text-align: center; margin-bottom: 14px; }
.cubic-board-heading h1 { font-family: Georgia, serif; font-size: 1.9rem; }
.cubic-board-heading p { font-size: 0.8rem; margin-top: 5px; }
.cubic-board-wrap { width: 100%; }
.cubic-board-svg { display: block; width: 100%; height: auto; max-width: 590px; margin: auto; }
.cubic-tile { stroke: #342a31; stroke-width: 2.5; stroke-linejoin: round; transition: filter 0.1s ease; }
.cubic-tile--pink { fill: #ff1c8d; }
.cubic-tile--blue { fill: #1AB3FF; }
.cubic-tile--yellow { fill: #FFD700; }
.cubic-tile--green { fill: #1dac51; }
.cubic-tile--orange { fill: #ffae00; }
.cubic-tile--purple { fill: #5e04a8; }
.cubic-tile--grey { fill: #808080; }
.cubic-tile--white { fill: #ffffff; }
.cubic-tile--black { fill: #000000; }
.cubic-tile.is-highlighted { filter: brightness(1); }
.cubic-frame { fill: none; stroke: #342a31; stroke-width: 6; stroke-linejoin: round; pointer-events: none; }
.cubic-pivot-control { cursor: pointer; outline: none; }
.cubic-pivot-hit { fill: rgba(255, 255, 255, 0.02); }
.cubic-pivot-dot { fill: #fff; stroke: #342a31; stroke-width: 2; transition: r 0.12s, fill 0.12s; }
.cubic-pivot-control:hover .cubic-pivot-dot,
.cubic-pivot-control:focus .cubic-pivot-dot,
.cubic-pivot-control.is-selected .cubic-pivot-dot { fill: #342a31; stroke: #fff; r: 5; }

.cubic-locked-pivot {
  cursor: not-allowed;
}

.cubic-locked-pivot-background {
  fill: #342a31;
  stroke: #ffffff;
  stroke-width: 2;
}

.cubic-locked-pivot-shackle {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.cubic-locked-pivot-body {
  fill: #ffffff;
}


/* Conditional pivot rule icons. + = requires color, - = excludes color. */
.cubic-conditional-pivot {
  outline: none;
}
.cubic-conditional-pivot.is-available {
  cursor: pointer;
}
.cubic-conditional-pivot.is-locked {
  cursor: not-allowed;
}
.cubic-conditional-pivot.is-unavailable {
  cursor: default;
  opacity: 0.65;
}
.cubic-conditional-ring {
  fill: #fff;
  stroke: #342a31;
  stroke-width: 2.2;
}
.cubic-conditional-pivot.is-locked .cubic-conditional-ring {
  fill: #342a31;
  stroke: #fff;
  stroke-dasharray: 3 2;
}
.cubic-conditional-pivot.is-unavailable .cubic-conditional-ring {
  fill: #808080;
  stroke: #fff;
  stroke-dasharray: 2 2;
}
.cubic-conditional-pivot.is-available:hover .cubic-conditional-ring,
.cubic-conditional-pivot.is-available:focus .cubic-conditional-ring,
.cubic-conditional-pivot.is-available.is-selected .cubic-conditional-ring {
  stroke-width: 3.8;
}
.cubic-conditional-color {
  stroke: #342a31;
  stroke-width: 1;
}
.cubic-conditional-pivot.is-locked .cubic-conditional-color {
  stroke: #fff;
}
.cubic-conditional-color--pink { fill: #ff1c8d; }
.cubic-conditional-color--blue { fill: #1ab3ff; }
.cubic-conditional-color--yellow { fill: #ffd700; }
.cubic-conditional-color--green { fill: #1dac51; }
.cubic-conditional-color--orange { fill: #ffae00; }
.cubic-conditional-color--purple { fill: #5e04a8; }
.cubic-conditional-color--grey { fill: #808080; }
.cubic-conditional-color--white { fill: #fff; }
.cubic-conditional-color--black { fill: #000; }
.cubic-conditional-symbol {
  fill: none;
  stroke: #342a31;
  stroke-width: 2.4;
  stroke-linecap: round;
  pointer-events: none;
}
.cubic-conditional-pivot.is-locked .cubic-conditional-symbol,
.cubic-conditional-pivot.is-unavailable .cubic-conditional-symbol {
  stroke: #fff;
}


.cubic-board-hint { font-size: 0.74rem; text-align: center; opacity: 0.8; line-height: 1.6; max-width: 520px; }
.cubic-label { font-size: 0.75rem; }
.cubic-select { padding: 8px; background: var(--paper); border: 2px solid var(--ink); color: var(--ink); font: inherit; }
.cubic-help { font-size: 0.75rem; line-height: 1.5; }
.cubic-rotation-buttons { display: flex; gap: 8px; }
.cubic-rotation-buttons button { flex: 1; }
.cubic-game button:disabled { opacity: 0.4; cursor: not-allowed; }
.cubic-status { display: grid; gap: 10px; font-size: 0.8rem; }
.cubic-result { padding: 10px; background: var(--cream); border: 1px solid var(--ink); }
.cubic-result.solved { font-weight: 700; }
.cubic-solution-preview {
  width: 100%;
  max-width: 240px;
  margin: 12px auto;
}

.cubic-solution-preview .cubic-board-svg {
  width: 100%;
  height: auto;
}

@media (max-width: 850px) {
  .cubic-game .game-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cubic-game .game-layout-side { width: 100%; max-width: 590px; margin-inline: auto; }
}