/* Interactive cube for the DeepCube post. Colours follow the Night Shift theme. */

.rubiks {
  margin: 2rem 0;
  background: var(--surface-col, #1C222C);
  border-radius: 0.5rem;
  overflow: hidden;
  outline: none;
}
.rubiks:focus-visible {
  box-shadow: 0 0 0 2px var(--link-col, #E8B04B);
}

.rubiks-stage {
  position: relative;
  height: 360px;
}
.rubiks-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.rubiks-stage canvas:active {
  cursor: grabbing;
}
.rubiks-hint {
  position: absolute;
  right: 0.75rem;
  bottom: 0.5rem;
  font-size: 0.8125rem;
  color: var(--mid-col, #7D8695);
  pointer-events: none;
}

.rubiks-panel {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--rule-col, #262C36);
}
.rubiks-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
}
.rubiks-row[hidden] {
  display: none;
}
.rubiks-faces {
  gap: 0.375rem;
}
.rubiks-faces button {
  min-width: 2.6rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.rubiks button,
.rubiks select {
  font: inherit;
  font-size: 0.9375rem;
  color: var(--heading-col, #F2F4F7);
  background: #262C36;
  border: 1px solid #333B48;
  border-radius: 0.375rem;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
}
.rubiks button:hover:not(:disabled),
.rubiks select:hover:not(:disabled) {
  border-color: var(--link-col, #E8B04B);
}
.rubiks button:disabled,
.rubiks select:disabled,
.rubiks input:disabled {
  opacity: 0.45;
  cursor: default;
}
.rubiks .rubiks-primary {
  color: #14181F;
  background: var(--link-col, #E8B04B);
  border-color: var(--link-col, #E8B04B);
  font-weight: 700;
  padding: 0.35rem 1.5rem;
}
.rubiks label {
  margin: 0;
  cursor: pointer;
}
.rubiks input[type="radio"] {
  accent-color: var(--link-col, #E8B04B);
  margin-right: 0.25rem;
}
.rubiks-speed-label {
  margin-left: auto !important;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--mid-col, #7D8695);
}
.rubiks-speed {
  accent-color: var(--link-col, #E8B04B);
  width: 8rem;
}

.rubiks-status {
  min-height: 1.5em;
  margin: 0.25rem 0 0.5rem;
  font-size: 0.9375rem;
}
.rubiks-status code {
  color: inherit;
  background: none;
  font-size: 0.875rem;
}
.rubiks-moves {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.875rem;
  line-height: 1.8;
  max-height: 7.5rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
  color: var(--mid-col, #7D8695);
}
.rubiks-moves .done {
  color: var(--heading-col, #F2F4F7);
}
.rubiks-moves .next {
  color: #14181F;
  background: var(--link-col, #E8B04B);
  border-radius: 0.25rem;
  padding: 0 0.2rem;
}

@media (max-width: 576px) {
  .rubiks-stage {
    height: 300px;
  }
  .rubiks-speed-label {
    margin-left: 0 !important;
  }
}