/* Cube and wrap-around boards. */

/* ---------- Cube: a stage inside the usual board frame. */
#board[data-shape="cube"] {
  display: block;
  position: relative;
  padding: 0;
  overflow: clip;
  background: radial-gradient(
    ellipse at 50% 46%,
    #1a3a31 0,
    #122b24 45%,
    #0e211c 78%
  );
}
.cube-stage {
  position: absolute;
  inset: 0;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.cube-camera {
  position: absolute;
  inset: 0;
  perspective-origin: 50% 50%;
  pointer-events: none;
}
.cube-scene {
  position: absolute;
  left: 50%;
  top: 50%;
  /* A real box centred on the stage, so the cube turns about its own centre. */
  width: var(--face);
  height: var(--face);
  margin: calc(var(--face) / -2);
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
}
.cube-face {
  --gap: calc(var(--face) * 0.02);
  position: absolute;
  left: 0;
  top: 0;
  width: var(--face);
  height: var(--face);
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  grid-template-rows: repeat(var(--size), minmax(0, 1fr));
  gap: var(--gap);
  /* Half a gap at each rim, so a pipe crossing an edge shows an ordinary gap. */
  padding: calc(var(--gap) / 2);
  border-radius: 7px;
  background: #0f231d;
  box-shadow: inset 0 0 0 1px #4b6455;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: auto;
}
/* Faces angled away are shaded; the face toward the player stays clear. */
.cube-face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #06130f;
  opacity: var(--shade, 0);
  pointer-events: none;
}
.cube-face .tile {
  border-radius: 8px;
}
.cube-face.side {
  cursor: pointer;
}
.cube-face.side .tile,
.cube-face:not(.facing):not(.side) .tile,
.cube-stage.turning .cube-face {
  pointer-events: none;
}
@media (hover: hover) {
  .cube-face.side:hover::after {
    opacity: calc(var(--shade, 0) * 0.7);
  }
}

.cube-turn {
  position: absolute;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #40564a;
  border-radius: 50%;
  background: #10251fd9;
  color: #c5cf9d;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  touch-action: manipulation;
  transition:
    color 0.3s,
    border-color 0.3s,
    box-shadow 0.3s;
}
.cube-turn[hidden] {
  display: none;
}
.cube-turn:hover {
  border-color: #6f8a78;
  color: #e9eddf;
}
.cube-turn-up {
  top: 3px;
  left: calc(50% - 22px);
}
.cube-turn-down {
  bottom: 3px;
  left: calc(50% - 22px);
}
.cube-turn-left {
  left: 3px;
  top: calc(50% - 22px);
}
.cube-turn-right {
  right: 3px;
  top: calc(50% - 22px);
}
/* The light continues past this edge (or dew waits there): a quiet invitation. */
.cube-turn.light-leads {
  color: #f6e3a0;
  border-color: #a8995c;
  box-shadow: 0 0 14px #e5d38640;
}
.cube-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Wrap-around: lanes on the joined sides show what comes round. */
/* Lane tracks on all four sides (empty where edges do not join) keep tiles square. */
#board[data-shape="wrap"] {
  /* Thin on small phones so 5×5 wrap tiles keep ≥40px touch targets. */
  --lane: clamp(3px, calc(var(--board-side, 360px) * 0.034 - 5px), 16px);
  grid-template-columns:
    var(--lane) repeat(var(--size), minmax(0, 1fr))
    var(--lane);
  grid-template-rows:
    var(--lane) repeat(var(--size), minmax(0, 1fr))
    var(--lane);
}
/* Lanes read about 1.5x stronger than the first release, still quieter than pipes. */
.wrap-lane {
  border-radius: 999px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #e5d38638;
}
.wrap-lane-left,
.wrap-lane-right {
  background: linear-gradient(
    to bottom,
    #e5d38600,
    #e5d38624 14%,
    #e5d38624 86%,
    #e5d38600
  );
}
.wrap-lane-top,
.wrap-lane-bottom {
  background: linear-gradient(
    to right,
    #e5d38600,
    #e5d38624 14%,
    #e5d38624 86%,
    #e5d38600
  );
}
/* Matching notches at each joined row/column end: the same mark on both
   sides says "these two ends are one path" before any light has crossed. */
.wrap-notch {
  position: relative;
  pointer-events: none;
}
.wrap-notch::before {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: #e5d3865c;
}
.wrap-notch-left::before,
.wrap-notch-right::before {
  left: 0;
  right: 0;
  top: 32%;
  bottom: 32%;
}
.wrap-notch-top::before,
.wrap-notch-bottom::before {
  top: 0;
  bottom: 0;
  left: 32%;
  right: 32%;
}
/* The lane glows where the light crosses, and stays softly lit. */
.wrap-stub s {
  position: absolute;
  border-radius: 999px;
  background: radial-gradient(
    closest-side,
    #f6e2a0 0,
    #f0d88acc 40%,
    #e5d38600 100%
  );
  opacity: 0;
  pointer-events: none;
}
.wrap-stub.lit s {
  opacity: 0.5;
}
.wrap-stub.lit.moon-light s {
  background: radial-gradient(
    closest-side,
    #d9f0ff 0,
    #c5e7ffcc 40%,
    #c5e7ff00 100%
  );
}
.wrap-stub-left s,
.wrap-stub-right s {
  top: -30%;
  bottom: -30%;
  left: -60%;
  right: -60%;
}
.wrap-stub-top s,
.wrap-stub-bottom s {
  left: -30%;
  right: -30%;
  top: -60%;
  bottom: -60%;
}
.wrap-stub {
  position: relative;
  pointer-events: none;
}
.wrap-stub::before,
.wrap-stub i {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: #819b8d8c;
}
.wrap-stub-left::before,
.wrap-stub-left i,
.wrap-stub-right::before,
.wrap-stub-right i {
  left: 0;
  right: 0;
  top: 46.5%;
  height: 7%;
}
.wrap-stub-top::before,
.wrap-stub-top i,
.wrap-stub-bottom::before,
.wrap-stub-bottom i {
  top: 0;
  bottom: 0;
  left: 46.5%;
  width: 7%;
}
/* Square the inner end, where the pipe continues into the board. */
.wrap-stub-left::before,
.wrap-stub-left i {
  border-radius: 999px 0 0 999px;
}
.wrap-stub-right::before,
.wrap-stub-right i {
  border-radius: 0 999px 999px 0;
}
.wrap-stub-top::before,
.wrap-stub-top i {
  border-radius: 999px 999px 0 0;
}
.wrap-stub-bottom::before,
.wrap-stub-bottom i {
  border-radius: 0 0 999px 999px;
}
.wrap-stub.lit i {
  background: #f4df95;
  box-shadow: 0 0 5px #e5d38680;
}
.wrap-stub.lit.moon-light i {
  background: #c5e7ff;
  box-shadow: 0 0 5px #c5e7ff80;
}
.wrap-stub b {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.wrap-stub b::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px;
  border-radius: 50%;
  background: #fff9d8;
  box-shadow: 0 0 6px #fff1ae;
}

/* Compact view (small boards): buttons sit over the neighbouring faces they
   turn toward, slightly more see-through, and hug the board edge. */
.cube-stage.compact .cube-turn {
  background: #10251fb8;
}
.cube-stage.compact .cube-turn-up {
  top: 2px;
}
.cube-stage.compact .cube-turn-down {
  bottom: 2px;
}
.cube-stage.compact .cube-turn-left {
  left: 2px;
}
.cube-stage.compact .cube-turn-right {
  right: 2px;
}