/* tabletop theme from the design handoff, one fixed palette (the design has no dark mode) */
:root {
  --ink: #3B2A1A;
  --muted: #6E5A3E;
  --muted-2: #8A6E45;
  --kraft: #EAD9B8;
  --page: #D9C6A0;
  --paper: #FFFDF6;
  --paper-2: #F6EBD3;
  --wood: #B98B4E;
  --wood-dark: #8A6434;
  --wood-edge: #7E5A2C;
  --wood-slot: #9C7440;
  --tile: #F7E6BF;
  --red: #D8412F;
  --red-dark: #8E2A1E;
  --teal: #2E8C7A;
  --teal-dark: #1E6154;
  --mustard: #E3A72F;
  --mustard-dark: #A87618;
  --grey: #8C7A5E;
  --grey-dark: #65573F;
  --ui: 'Comic Sans MS', 'Comic Neue', cursive;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}

* { box-sizing: border-box; }
button { font-family: inherit; }

/* the card sits in the middle of the window with the same space above and below it */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  box-sizing: border-box;
  background: var(--page);
  color: var(--ink);
  font-family: var(--ui), system-ui, sans-serif;
}

.table {
  width: 1240px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: var(--kraft);
}

/* header: logo, round track, lives */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 36px 40px 20px;
}
.logo { display: flex; align-items: center; gap: 12px; }
.logo .next { align-self: flex-end; margin-bottom: 6px; font: 700 14px var(--ui); color: var(--muted-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.logo .ready {
  padding: 4px 10px;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--mustard);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--ink);
  font: 800 13px var(--ui);
  cursor: pointer;
}
.logo .word { font: 700 50px/1 var(--ui); letter-spacing: .01em; text-shadow: 0 4px 0 #C9AE7E; }

.track { display: flex; align-items: flex-start; }
.track .link { width: 56px; border-top: 4px dashed #A88C5C; margin-top: 30px; }
.space {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 92px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.space:active { transform: translateY(3px); }
.space .badge {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: 0 5px 0 var(--ink);
  display: grid;
  place-items: center;
  font: 700 22px var(--ui);
  background: var(--paper-2);
  color: var(--ink);
}
.space.won .badge { background: var(--teal); color: #fff; }
.space.lost .badge { background: #A8977A; color: #fff; }
.space.active .badge { background: var(--mustard); color: var(--ink); }
.space .name { font: 800 12px var(--ui); letter-spacing: .1em; text-transform: uppercase; }

.lives { display: flex; align-items: center; gap: 8px; }
.chip {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
}
.chip.on {
  background: var(--red);
  border: 3px dashed var(--paper-2);
  box-shadow: 0 0 0 3px var(--red), 0 6px 0 3px var(--red-dark);
  color: var(--paper-2);
}
.chip.off { border: 3px dashed #BFA980; }
.chip.pop { animation: cdPop .45s both; }
.chip.break { animation: cdBreak .55s both; }

/* board */
.board {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 40px;
  padding: 20px 40px 36px;
}
.loading { grid-column: 1 / -1; padding: 60px; margin: 0; text-align: center; font-size: 18px; }
.col { display: flex; flex-direction: column; min-width: 0; }
.col.left { gap: 28px; }
.col.right { gap: 18px; }

/* puzzle card with a strip of tape on top */
.card {
  position: relative;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 12px 0 rgba(59, 42, 26, .16), 0 2px 0 var(--page);
  padding: 26px 0 18px;
  transform: rotate(-.6deg);
}
.card .tape {
  position: absolute;
  top: -13px;
  left: 50%;
  margin-left: -60px;
  width: 120px;
  height: 26px;
  background: rgba(255, 255, 255, .6);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.card-head { padding: 0 26px 16px; }
.eyebrow { font: 800 12px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.question { font: 700 28px/1.15 var(--ui); margin: 6px 0 0; text-wrap: pretty; }
.prompt { margin: 8px 0 0; font: 500 15px/1.5 var(--ui); color: var(--muted); text-wrap: pretty; }
.stage { border-top: 2px solid #EFE2C6; padding-top: 12px; }

/* code rows, clickable in the bug round */
.code { font: 15px/1.85 var(--mono); overflow-x: auto; }
.row {
  display: flex;
  gap: 16px;
  width: 100%;
  min-width: max-content;
  padding: 0 26px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
.row .ln { width: 22px; flex: none; text-align: right; opacity: .4; }
.row code { white-space: pre; font: inherit; }
button.row { cursor: pointer; }
button.row:hover, button.row:focus-visible { background: #FBF1D9; outline: none; }
.row.miss { color: #A8946F; }
.row.miss code { text-decoration: line-through; }
.row.hit { background: var(--teal); color: #fff; }
.row.answer { background: #CFE8DF; }

/* diagram, laid out in the 700 by 280 space from puzzles.json */
.diagram { position: relative; width: 700px; height: 280px; margin: 0 auto; zoom: .86; }
.diagram .edge { position: absolute; height: 0; border-top: 2.5px solid var(--ink); transform-origin: 0 0; }
.diagram .edge::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -7px;
  border-left: 12px solid var(--ink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.diagram .edge-label {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 700 14px var(--ui);
  color: var(--muted-2);
}
.diagram .node {
  position: absolute;
  width: 124px;
  height: 50px;
  display: grid;
  place-items: center;
  text-align: center;
  white-space: pre-line;
  line-height: 1.1;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 8px;
  box-shadow: 0 4px 0 var(--ink);
  font: 800 15px var(--ui);
}
.diagram .node.missing { background: #FBEFD0; color: var(--red); border: 3px dashed var(--red); box-shadow: 0 4px 0 var(--red); font-size: 28px; }
.diagram .node.missing.over { font-size: 15px; }
.diagram .node.solved { background: var(--teal); color: #fff; border: 3px solid var(--teal-dark); box-shadow: 0 4px 0 var(--teal-dark); font-size: 15px; }

/* answer rack, the hangman slots */
.rack {
  background: var(--wood);
  border-radius: 16px;
  padding: 16px 18px 18px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .2), 0 8px 0 var(--wood-dark);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 22px;
  /* lets the slots size themselves against the racks width (cqw) */
  container-type: inline-size;
  --slot: 40px;
  --gap: 6px;
}
.rack .word { display: flex; gap: var(--gap); }
.slot {
  /* full size unless the longest word (--n letters) would not fit on one line */
  --w: min(var(--slot), (100cqw - (var(--n) - 1) * var(--gap)) / var(--n));
  width: var(--w);
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--wood-slot);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--wood-edge);
  font: 700 calc(var(--w) * .66)/1 var(--ui);
}
.slot.filled { background: var(--tile); }
.slot.missed { background: #F4C9BF; color: var(--red); }
.slot.solved { background: var(--teal); color: #fff; box-shadow: 0 4px 0 var(--teal-dark); }
.slot.punct { width: 14px; background: transparent; box-shadow: none; color: var(--tile); }
.slot .pop { display: inline-block; animation: cdPop .4s cubic-bezier(.3, 1.6, .5, 1) both; }

/* typed guess */
.play { display: flex; gap: 10px; margin-top: 6px; }
.play input {
  flex: 1;
  min-width: 0;
  font: 600 17px var(--ui);
  padding: 13px 16px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
.play input:focus-visible { box-shadow: 0 0 0 3px var(--mustard); }
.btn { border: 3px solid var(--ink); border-radius: 10px; color: var(--ink); cursor: pointer; }
.btn.go { font: 700 19px var(--ui); padding: 0 24px; background: var(--red); color: #fff; box-shadow: 0 5px 0 var(--ink); }
.btn.go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn.next { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 800 16px var(--ui); padding: 9px 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); animation: cdIn .45s both; }
.btn.next:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.msg { align-self: center; margin: 0; font: 700 14px var(--ui); color: #A0301F; animation: cdShake .45s both; }
.note {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--mustard);
  box-shadow: 0 5px 0 var(--mustard-dark);
  font: 800 17px var(--ui);
  text-align: center;
  animation: cdIn .4s both;
}

/* guess cards, oldest first */
.guesses { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.guesses li:nth-child(odd) { transform: rotate(-.5deg); }
.guesses li:nth-child(even) { transform: rotate(.5deg); }
.guess {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper);
  border-radius: 8px;
  box-shadow: 0 5px 0 rgba(59, 42, 26, .16);
}
.guess.enter { animation: cdIn .35s both; }
.guess .n { width: 22px; flex: none; font: 700 20px var(--ui); color: #C9AE7E; }
/* shrinks down to its longest word, so text wraps between words and never mid word */
.guess .text { flex: 1; font: 600 15px/1.3 var(--ui); overflow-wrap: break-word; }
.tiles { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; perspective: 500px; }
/* the design measures min-width without the padding */
.tile {
  box-sizing: content-box;
  min-width: 72px;
  padding: 5px 9px 4px;
  border-radius: 6px;
  background: var(--grey);
  color: #fff;
  box-shadow: 0 4px 0 var(--grey-dark);
  text-align: center;
  line-height: 1.15;
}
.tile.hit { background: var(--teal); box-shadow: 0 4px 0 var(--teal-dark); }
.tile .label { font: 700 10px var(--ui); text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.tile .value { font: 800 13px var(--ui); display: flex; align-items: center; justify-content: center; gap: 4px; }
.icon { display: block; flex: none; }
.tile.flip { animation: cdFlip .6s cubic-bezier(.3, 1.3, .5, 1) both; }

.reset {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted-2);
  font: 700 14px var(--ui);
  text-decoration: underline;
  cursor: pointer;
}

/* keyboard focus in the theme colours instead of the browser blue */
.btn:focus-visible, .space:focus-visible, .reset:focus-visible, button.row:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; }

/* congratulations popup */
.congrats {
  width: min(440px, calc(100% - 32px));
  padding: 0;
  border: 3px solid var(--ink);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 8px 0 var(--ink);
  font-family: var(--ui);
  animation: cdIn .4s both;
}
.congrats::backdrop { background: rgba(59, 42, 26, .45); }
.congrats .inner { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 24px 24px; text-align: center; }
.congrats h2 { margin: 0; font: 700 34px/1.1 var(--ui); }
.congrats .took { margin: 0; font: 600 17px var(--ui); color: var(--muted); }
.congrats .took b { color: var(--ink); }
.congrats .results { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.congrats .results li {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--grey);
  box-shadow: 0 4px 0 var(--grey-dark);
  color: #fff;
  font: 800 14px var(--ui);
}
.congrats .results li.won { background: var(--teal); box-shadow: 0 4px 0 var(--teal-dark); }
.congrats .solved { margin: 0; font: 700 14px var(--ui); color: var(--muted-2); }
.congrats .btn.next { align-self: center; }

@keyframes cdFlip { 0% { transform: rotateX(90deg); opacity: .2 } 55% { transform: rotateX(-18deg); opacity: 1 } 100% { transform: rotateX(0) } }
@keyframes cdPop { 0% { transform: scale(.3); opacity: 0 } 70% { transform: scale(1.25) } 100% { transform: scale(1); opacity: 1 } }
@keyframes cdBreak { 0% { transform: scale(1.4) } 30% { transform: scale(1.1) rotate(-16deg) } 60% { transform: rotate(10deg) } 100% { transform: none } }
@keyframes cdShake { 10%, 90% { transform: translateX(-2px) } 30%, 70% { transform: translateX(5px) } 50% { transform: translateX(-7px) } }
@keyframes cdIn { 0% { transform: translateY(14px) scale(.96); opacity: 0 } 100% { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* the design only covers the 1240px desktop card, these keep it usable on smaller screens */
@media (max-width: 1100px) {
  .top { flex-wrap: wrap; justify-content: center; }
  .board { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { padding: 16px 0; }
  .top { padding: 24px 16px 12px; gap: 14px; }
  .logo .word { font-size: 40px; }
  .logo { flex-wrap: wrap; justify-content: center; }
  .logo .next { flex-basis: 100%; text-align: center; margin: 0; }
  .track .link { width: 24px; }
  .space { width: 72px; }
  .board { padding: 12px 16px 24px; gap: 24px; }
  .rack { padding: 12px 10px 14px; gap: 10px 14px; --slot: 26px; --gap: 4px; }
  .slot { height: 34px; border-radius: 5px; }
  .slot.punct { width: 9px; }
  .question { font-size: 22px; }
  /* taller rows so a thumb can hit the right line in the bug round */
  .code { font-size: 13px; line-height: 2.6; }
  .row { padding: 0 14px; gap: 10px; }
  /* the diagram keeps a readable size and scrolls sideways inside the card */
  .stage:has(.diagram) { overflow-x: auto; }
  .diagram { zoom: .7; }
  .guess { flex-wrap: wrap; }
}