/* The board in its wooden tray: grid, cells, pawns, reveal frames, score track. */

.board-col { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.board-scroll { -webkit-overflow-scrolling: touch; }

.tray {
  display: inline-block;
  padding: 14px;
  border-radius: 16px 14px 16px 15px;
  background-color: #4a2a15;
  background-image:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(177deg, rgba(255, 200, 150, .05) 0 2px, transparent 2px 17px),
    linear-gradient(160deg, #5a341b, #3b2010 60%, #2f190c);
  box-shadow:
    inset 0 2px 0 rgba(255, 214, 170, .16),
    inset 0 -3px 0 rgba(0, 0, 0, .45),
    0 9px 0 #22120a,
    0 22px 40px rgba(10, 4, 0, .55);
}

.board {
  display: grid;
  grid-template-columns: var(--lab) auto;
  grid-template-rows: var(--lab) auto;
  column-gap: 5px;
  row-gap: 4px;
  padding: 7px 10px 10px 6px;
  border-radius: 6px;
  background-color: #f2e5c9;
  box-shadow: inset 0 0 0 1px rgba(58, 36, 20, .25), inset 0 2px 6px rgba(58, 36, 20, .25);
}

.col-labels, .row-labels {
  display: grid;
  gap: var(--gap);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 9.5px;
  color: #6b5238;
  user-select: none;
}
.col-labels { grid-template-columns: repeat(30, var(--cell)); align-items: end; }
.row-labels { grid-template-rows: repeat(16, var(--cell)); align-items: center; }
.col-labels span, .row-labels span { text-align: center; }

.grid-wrap { position: relative; }
.grid {
  display: grid;
  grid-template-columns: repeat(30, var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--gap);
  touch-action: manipulation;
}

/* ---------- cells ---------- */

.cell {
  position: relative;
  border-radius: 3px;
  transition: transform .12s ease, box-shadow .12s ease, filter .6s ease, opacity .6s ease;
}
.cell:hover {
  transform: scale(1.35);
  z-index: 5;
  box-shadow: 0 0 0 2px #fff, 0 4px 10px rgba(30, 14, 4, .45);
}
.guessing .cell { cursor: pointer; }
.guessing .cell:hover { transform: scale(1.6); }
.guessing .cell.taken { cursor: not-allowed; }
.guessing .cell.taken:hover { transform: scale(1.1); }

.cell.sel {
  z-index: 6;
  animation: bob 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 2.5px #fff, 0 0 0 4.5px var(--ink), 0 8px 12px rgba(30, 14, 4, .45);
}

.cell.secret {
  z-index: 4;
  box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4px rgba(58, 36, 20, .75);
  animation: pulse 2.6s ease-in-out infinite;
}
.cell.secret::after, .cell.target::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 26%;
  height: 26%;
  min-width: 4px;
  min-height: 4px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 1.5px var(--card);
}

.cell.option {
  z-index: 3;
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px var(--ink);
}
.cell.option::after {
  content: attr(data-n);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: max(10px, calc(var(--cell) * .45));
  color: var(--ink);
  text-shadow: 0 0 3px #fff, 0 0 2px #fff;
}
.cell.option.hot { transform: scale(1.5); z-index: 6; }

/* ---------- reveal: spotlight, target glow, ring frames ---------- */

.board.revealed .cell.dim { filter: saturate(.3) brightness(.55); opacity: .45; }
.board.revealed .cell:hover { transform: none; box-shadow: none; }
.cell.target {
  z-index: 7;
  animation: glow 1.8s ease-in-out infinite;
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink), 0 0 22px 8px rgba(255, 238, 200, .85);
}
.board.revealed .cell.target:hover { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ink), 0 0 22px 8px rgba(255, 238, 200, .85); }

.layer { position: absolute; inset: 0; pointer-events: none; }

.frame {
  position: absolute;
  z-index: 6;
  left: calc(var(--c0) * (var(--cell) + var(--gap)) - var(--gap));
  top: calc(var(--r0) * (var(--cell) + var(--gap)) - var(--gap));
  width: calc((var(--c1) - var(--c0) + 1) * (var(--cell) + var(--gap)) + var(--gap));
  height: calc((var(--r1) - var(--r0) + 1) * (var(--cell) + var(--gap)) + var(--gap));
  border: 2px dashed rgba(255, 248, 232, .95);
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(58, 36, 20, .55), inset 0 0 0 1px rgba(58, 36, 20, .55);
  animation: frame-in .45s cubic-bezier(.3, 1.3, .5, 1) both;
  animation-delay: var(--delay);
}
.frame::before {
  content: attr(data-label);
  position: absolute;
  top: -11px;
  left: -2px;
  padding: 0 5px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  line-height: 16px;
  border-radius: 3px;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--card-edge);
}

/* ---------- pawns ---------- */

.pawn {
  --w: calc(var(--cell) * 1.15);
  --h: calc(var(--cell) * 1.55);
  position: absolute;
  z-index: 8;
  width: var(--w);
  height: var(--h);
  left: calc(var(--c) * (var(--cell) + var(--gap)) + var(--cell) / 2 - var(--w) / 2);
  top: calc(var(--r) * (var(--cell) + var(--gap)) + var(--cell) * .92 - var(--h));
  filter: drop-shadow(0 2px 1.5px rgba(20, 8, 2, .45));
}
.pawn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pawn.drop { animation: drop .6s cubic-bezier(.3, 1.45, .55, 1) both; }
.pawn .ring { display: none; }
.pawn.best .ring { display: inline; }

/* ---------- score track under the board ---------- */

.track {
  /* as wide as the tray: 30 cells, their gaps, the labels and the tray padding */
  max-width: calc(var(--cell) * 30 + 125px);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}
.track-label { line-height: 1.3; font-size: 10px; }
.track-cells {
  flex: 1;
  min-width: 0;   /* a flex child won't shrink below its content without this */
  display: grid;
  /* --steps squares up to the goal, then the goal square */
  grid-template-columns: repeat(var(--steps), minmax(14px, 1fr)) minmax(14px, 1fr);
  gap: 2px;
  overflow-x: auto;
}
.track-cells span {
  position: relative;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  background: var(--card-hi);
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}
.track-cells span.fifth { background: var(--quiet); }
.track-cells span.goal { background: var(--ink); color: var(--card); }
.track-cells i {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .35);
  transition: left .2s;
}
/* two pegs on one number sit side by side */
.track-cells i.both:nth-of-type(1) { transform: translateX(-4px); }
.track-cells i.both:nth-of-type(2) { transform: translateX(4px); }

/* ---------- smaller screens ---------- */

@media (max-width: 900px) {
  /* room for the tray shadow inside the scroller, so it isn't clipped */
  .board-scroll { overflow-x: auto; padding: 14px 16px 44px; margin: -14px -16px -44px; }
  .track { max-width: none; }
  .track-label { display: none; }
}

@media (max-width: 560px) {
  .tray { padding: 10px; }
  /* fit the whole track on a phone: only every fifth number is printed */
  .track { padding: 8px; }
  .track-cells { grid-template-columns: repeat(var(--steps), minmax(0, 1fr)) 18px; gap: 1px; overflow: visible; }
  .track-cells span { height: 22px; font-size: 8px; color: transparent; }
  .track-cells span.fifth, .track-cells span.goal { color: var(--ink-soft); }
  .track-cells span.goal { color: var(--card); }
  /* squares are narrower than two digits here; lift printed ones above their
     neighbours, and the pegs above those */
  .track-cells span.fifth { z-index: 1; }
  .track-cells i { z-index: 2; }
  .track-cells i { width: 11px; height: 11px; }
  .track-cells i.both:nth-of-type(1) { transform: translateX(-3px); }
  .track-cells i.both:nth-of-type(2) { transform: translateX(3px); }
}