/* Clock: thirteen fixed piles. The face size is reserved up front so turns do not move the table. */

.game-root[data-game="clock-solitaire"] {
  min-height: 28rem;
}

.clock-status {
  min-height: 2.8em;
  margin: 0 auto 0.35rem;
  max-width: 36rem;
  text-align: center;
  color: #f4f0e8;
  line-height: 1.4;
}

.clock-board {
  overflow-x: auto;
  scrollbar-gutter: stable;
}

.clock-face {
  --clock-size: clamp(19rem, 100cqw, 36rem);
  --clock-r: 0.36;
  --card-w: calc(var(--clock-size) / 8.2);
  --card-h: calc(var(--card-w) * 1.452);
  --radius: calc(var(--card-w) * 0.07);
  position: relative;
  width: var(--clock-size);
  height: var(--clock-size);
  margin-inline: auto;
}

/* A quiet ring between the center and the hours. Decorative only. */
.clock-face::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 30%;
  height: 30%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(232, 217, 168, 0.4);
  border-radius: 50%;
  pointer-events: none;
}

.clock-pile {
  position: absolute;
  left: calc(50% + var(--dx) * 100%);
  top: calc(50% + var(--dy) * 100%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.clock-pile[data-pile="0"] { --dx: 0; --dy: 0; }
.clock-pile[data-pile="1"] { --dx: 0.1800; --dy: -0.3118; }
.clock-pile[data-pile="2"] { --dx: 0.3118; --dy: -0.1800; }
.clock-pile[data-pile="3"] { --dx: 0.3600; --dy: 0; }
.clock-pile[data-pile="4"] { --dx: 0.3118; --dy: 0.1800; }
.clock-pile[data-pile="5"] { --dx: 0.1800; --dy: 0.3118; }
.clock-pile[data-pile="6"] { --dx: 0; --dy: 0.3600; }
.clock-pile[data-pile="7"] { --dx: -0.1800; --dy: 0.3118; }
.clock-pile[data-pile="8"] { --dx: -0.3118; --dy: 0.1800; }
.clock-pile[data-pile="9"] { --dx: -0.3600; --dy: 0; }
.clock-pile[data-pile="10"] { --dx: -0.3118; --dy: -0.1800; }
.clock-pile[data-pile="11"] { --dx: -0.1800; --dy: -0.3118; }
.clock-pile[data-pile="12"] { --dx: 0; --dy: -0.3600; }

.clock-label {
  position: absolute;
  z-index: 3;
  left: calc(50% + (var(--dx) / var(--clock-r)) * 70%);
  top: calc(50% + (var(--dy) / var(--clock-r)) * 72%);
  transform: translate(-50%, -50%);
  color: #f4f0e8;
  font-family: var(--font-serif);
  font-size: clamp(0.65rem, calc(var(--card-w) * 0.28), 0.95rem);
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

.clock-pile[data-pile="0"] .clock-label {
  left: 50%;
  top: calc(100% + 0.2rem);
  transform: translate(-50%, 0);
  font-size: clamp(0.62rem, calc(var(--card-w) * 0.22), 0.85rem);
}

.clock-pile > .clock-faceup,
.clock-pile > .clock-back {
  z-index: 1;
}

.clock-pile.is-next {
  z-index: 3;
  cursor: pointer;
}

.clock-pile.is-next::before {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--gold);
  border-radius: calc(var(--radius) + 2px);
  pointer-events: none;
  z-index: 4;
}

.game-root[data-game="clock-solitaire"] .playing-card {
  cursor: inherit;
}

.game-root[data-game="clock-solitaire"] .playing-card:hover {
  transform: none;
}

.game-root[data-game="clock-solitaire"] #ck-run {
  min-width: 6.5rem;
}

.game-root[data-game="clock-solitaire"] .clock-end-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.game-root[data-game="clock-solitaire"] .clock-end-actions .btn {
  margin-top: 0;
}