/* steckwuerfeln: rules used only by the steckwuerfeln pages (loaded after base.css). */
/* Steckwuerfeln: eleven holes (a free hole is a white circle, a hole with a
   peg a black one) and the buttons for the ways to peg. */
.sw-holes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  direction: ltr;
  max-width: 480px;
  margin: var(--space-2) auto;
}

.sw-hole {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin: 6px;
  padding: 0;
  border: 4px solid #141413;
  border-radius: 50%;
  background: #fff;
  color: #141413;
  font-size: 1.4rem;
  font-weight: 700;
}

.sw-hole-way {
  min-width: 60px;
  min-height: 60px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px #141413;
  cursor: pointer;
}

.sw-hole-pegged {
  background: #141413;
  color: #fff;
}

/* Task 167: holes a computer has just pegged - a dashed ring around them. */
.sw-hole-last {
  outline: 3px dashed #141413;
  outline-offset: 3px;
}

.sw-dice-who {
  text-align: center;
  min-height: 1.4em;
}

.sw-ways {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.sw-ways > * {
  min-height: 48px;
  margin: 0 var(--space-2) var(--space-2) 0;
}

[dir="rtl"] .sw-ways > * {
  margin: 0 0 var(--space-2) var(--space-2);
}