:root {
  --peg: #24594d;
  --peg-dark: #173f36;
  --peg-hole: #143a32;
  --cream: #fff6dc;
  --manila: #f4e3b2;
  --paper: #fffaf0;
  --ink: #221b16;
  --ink-soft: #55483a;
  --hazard: #f7c517;
  --stamp: #b3261e;
  --warn: #ffb648;
  --display: Rockwell, "Rockwell Nova", "Roboto Slab", "Sitka Text", "American Typewriter", Georgia, serif;
  --body: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  --gutter: 8px;
  --board: min(calc(100vw - 2 * var(--gutter) - 6px), 64dvh);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--cream);
  font: 500 16px/1.4 var(--body);
  background-color: var(--peg);
  /* Pegboard: real hole spacing, fixed to the page so tools appear hung on it. */
  background-image: radial-gradient(circle at 50% 50%, var(--peg-hole) 0 2.5px, transparent 3.2px);
  background-size: 22px 22px;
  overflow-x: hidden;
  overscroll-behavior-y: none;
}

button, a { font: inherit; -webkit-tap-highlight-color: transparent; }

/* On phones the two side columns dissolve, so every panel takes its own row. */
.side { display: contents; }

:focus-visible {
  outline: 3px solid var(--hazard);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--ink);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  background: var(--manila);
  border: 2px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--ink);
  touch-action: manipulation;
}
.btn:hover { background: #fff0c4; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.btn[disabled] { color: #7a6f5e; background: #cfc6ad; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-go {
  background: var(--hazard);
  font-family: var(--display);
  font-size: 1.1rem;
  font-weight: 800;
}
.btn-go:hover { background: #ffd83d; }
.btn-go.is-running { background: #f3f0e5; }
.btn-small { min-height: 44px; padding: 6px 10px; font-size: 0.875rem; }

/* Start screen ------------------------------------------------------------ */

#start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(100%, 560px);
  margin: 0 auto;
  padding: 26px 16px 24px;
  text-align: center;
}

.sign {
  position: relative;
  padding: 12px 20px 14px;
  background: var(--stamp);
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: inset 0 0 0 3px #e6b54a, 0 6px 0 var(--peg-dark);
  transform: rotate(-1.2deg);
}
.sign::before, .sign::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 3px;
  height: 14px;
  background: var(--ink);
}
.sign::before { left: 18%; }
.sign::after { right: 18%; }
.sign h1 {
  margin: 0;
  color: var(--cream);
  font: 800 clamp(2.1rem, 10.5vw, 3.6rem)/1 var(--display);
  letter-spacing: 0.005em;
  text-shadow: 0 3px 0 #6d1510;
}

.demo-bench {
  width: min(100%, 460px);
  aspect-ratio: 7 / 3;
  overflow: hidden;
  background: #ecd4a2;
  border: 3px solid var(--ink);
  border-radius: 6px;
  box-shadow: 0 6px 0 var(--peg-dark);
}
#demo { display: block; width: 100%; height: 100%; }

.pitch { max-width: 40ch; margin: 2px 0 0; font-size: 1.125rem; line-height: 1.4; }
.job-line { margin: 0; color: #dcebd2; font-size: 0.9375rem; }
.start-actions, .result-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.fine-print { max-width: 44ch; margin: 2px 0 0; color: #dcebd2; font-size: 0.875rem; }

/* Game screen, phone first ------------------------------------------------- */

#game-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "hud" "tickets" "floor" "note" "tray" "footer";
  gap: 8px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 8px var(--gutter) 16px;
}

.hud { grid-area: hud; display: flex; align-items: stretch; gap: 8px; }
.clock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 5px 10px 3px;
  color: var(--cream);
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 6px;
  flex: 1 1 auto;
}
.clock-label { display: none; font-size: 0.75rem; color: #d7cfb9; }
.clock-digits {
  font: 800 1.5rem/1.05 var(--display);
  font-variant-numeric: tabular-nums;
}
.clock-digits.is-low { color: var(--warn); }
.clock-par { font-size: 0.75rem; color: #f4dc8a; white-space: nowrap; }
.hud #belt { flex: 0 0 auto; min-width: 104px; padding-inline: 8px; }
.hud #speed { flex: 0 0 48px; padding-inline: 0; }

.tickets {
  grid-area: tickets;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 6px 0 0;
  list-style: none;
  /* The rail the tickets hang from. */
  background: linear-gradient(var(--ink), var(--ink)) top / 100% 3px no-repeat;
}
.ticket {
  position: relative;
  min-width: 0;
  padding: 6px 7px 7px;
  color: var(--ink);
  background: #d9cfae;
  border: 1.5px solid var(--ink);
  border-radius: 0 0 5px 5px;
}
.ticket.is-active {
  background: var(--paper);
  box-shadow: 0 4px 0 var(--hazard), 0 4px 0 2px var(--ink);
}
.ticket.is-shipped { background: #cfe0c0; }
.ticket-maker {
  display: block;
  font: 700 0.75rem/1.15 var(--display);
  overflow-wrap: anywhere;
}
.ticket-line { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 0.75rem; line-height: 1.15; }
.ticket-line svg { flex: 0 0 auto; }
.ticket-line b { font-size: 0.9375rem; font-variant-numeric: tabular-nums; }
.ticket-what { display: block; }
.ticket-note { display: none; }
.ticket-stamp {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 1px 6px;
  color: var(--stamp);
  font: 800 0.875rem/1.2 var(--display);
  background: rgba(255, 250, 240, 0.86);
  border: 2.5px solid var(--stamp);
  border-radius: 3px;
  transform: translate(-50%, -50%) rotate(-9deg);
}

.floor-wrap { grid-area: floor; display: flex; justify-content: center; }
.floor {
  position: relative;
  width: var(--board);
  height: var(--board);
  border: 3px solid var(--ink);
  border-radius: 4px;
  box-shadow: 0 5px 0 var(--peg-dark);
  background: #ecd4a2;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: content-box;
}
#board { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: repeat(7, 1fr) / repeat(7, 1fr);
}
.cell {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cell:hover { background: rgba(255, 255, 255, 0.2); }
.cell:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid var(--ink);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 6px #fff;
}
.floor.is-running .cell { cursor: not-allowed; }
.floor.is-running .cell:hover { background: transparent; }

.note {
  grid-area: note;
  display: flex;
  align-items: center;
  min-height: 62px;
  margin: 0;
  padding: 5px 10px;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.25;
  background: var(--manila);
  border: 1.5px solid var(--ink);
  border-left: 6px solid var(--ink);
  border-radius: 3px;
}
.note.is-warn { background: #ffd591; border-left-color: #b65a00; }
.note.is-ready { background: #d4edb2; border-left-color: #2f7d32; }

.tray { grid-area: tray; display: grid; gap: 6px; }
.slots { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.875rem; font-weight: 700; }
.pegs { display: inline-flex; gap: 5px; }
/* A machine slot is a hook on the board: a tag when free, its painted outline once in use. */
.peg {
  width: 16px;
  height: 20px;
  background: var(--hazard);
  border: 2px solid var(--ink);
  border-radius: 8px 8px 3px 3px;
}
.peg.is-used { background: transparent; border: 2px dashed var(--cream); }

.tools { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 56px;
  padding: 3px 1px;
  color: var(--cream);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.1;
  cursor: pointer;
  background: var(--peg-dark);
  /* Shadow-board outline: where a tool hangs when it is not in your hand. */
  border: 2px solid var(--cream);
  border-radius: 8px;
  touch-action: manipulation;
}
.tool svg { width: 27px; height: 27px; }
.tool:hover { background: #1d4c41; }
.tool[aria-pressed="true"] { color: var(--ink); background: var(--hazard); border-color: var(--ink); box-shadow: 0 3px 0 var(--ink); }
.tool.is-suggested:not([aria-pressed="true"]) { border-color: var(--hazard); border-style: dashed; }
.tool[disabled] { color: #b6c6bb; border-style: dotted; border-color: #8fa89b; cursor: not-allowed; }
.tool[disabled] svg { opacity: 0.45; }
.tool[aria-pressed="true"][disabled] { color: var(--ink); background: #cdbf8d; border-color: var(--ink); box-shadow: none; }

.context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 2px 0;
  font-size: 0.875rem;
  line-height: 1.25;
}
.context-label { flex: 1 1 100%; font-weight: 700; }
.context-tip { flex: 1 1 100%; }
.choice {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 3px 9px;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  background: var(--manila);
  border: 2px solid var(--ink);
  border-radius: 6px;
  touch-action: manipulation;
}
.choice[aria-pressed="true"] { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px var(--hazard); }
.choice:hover { background: #fff0c4; }

.footer-actions { grid-area: footer; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }

/* Result ------------------------------------------------------------------- */

#result-screen { padding: 22px 12px 24px; }
.slip {
  width: min(100%, 520px);
  margin: 0 auto;
  padding: 18px 18px 20px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 3px;
  box-shadow: 0 6px 0 var(--peg-dark);
}
.slip h2 { margin: 0; font: 800 clamp(1.75rem, 8vw, 2.5rem)/1.05 var(--display); }
.slip h2:focus { outline: none; box-shadow: none; }
.slip-line { margin: 6px 0 10px; }
.slip-small { margin: 0 0 10px; color: var(--ink-soft); font-size: 0.875rem; }
.stars { display: grid; gap: 3px; margin: 0 0 10px; padding: 0; list-style: none; }
.stars li { display: flex; align-items: center; gap: 8px; }
.star { flex: 0 0 auto; width: 24px; height: 24px; }
.score-line { margin: 4px 0; }
.score { font: 800 3rem/1 var(--display); font-variant-numeric: tabular-nums; }
.score-unit { font-weight: 700; }
.crate {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  min-height: 42px;
  margin: 0 0 12px;
  padding: 7px;
  background: #d9b67a;
  border: 3px solid #5e3c25;
  border-radius: 3px;
}
.crate:empty::before { content: "This crate stayed empty."; font-size: 0.875rem; }
.tally { width: 100%; margin-bottom: 14px; border-collapse: collapse; font-size: 0.9375rem; }
.tally th { font-weight: 500; text-align: left; }
.tally td { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.tally tr > * { padding: 3px 0; border-bottom: 1px dotted #9e8e72; }
.result-actions { justify-content: flex-start; }

/* Rules -------------------------------------------------------------------- */

dialog {
  width: min(calc(100vw - 20px), 560px);
  max-height: calc(100dvh - 20px);
  padding: 18px;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 4px;
}
dialog::backdrop { background: rgba(15, 35, 30, 0.72); }
dialog h2 { margin: 0 0 8px; font: 800 1.75rem/1.1 var(--display); }
dialog h2:focus { outline: none; box-shadow: none; }
dialog h3 { margin: 14px 0 4px; font: 800 1.125rem/1.2 var(--display); }
.rules-steps, .rules-list { margin: 0; padding-left: 22px; font-size: 0.9375rem; }
.rules-steps li, .rules-list li { margin-bottom: 5px; }
dialog form { margin-top: 14px; }

/* Laptop: tickets and notes left, the floor center stage, tools right. */
@media (min-width: 960px) and (min-height: 560px) {
  :root { --board: min(calc(100dvh - 40px), calc(100vw - 606px)); }
  #game-screen {
    grid-template-columns: 250px auto 280px;
    grid-template-areas: "left floor right";
    gap: 10px 16px;
    max-width: none;
    width: fit-content;
    padding: 14px;
  }
  .side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .side-left { grid-area: left; }
  .side-right { grid-area: right; }
  .tickets { grid-template-columns: 1fr; gap: 8px; }
  .ticket-note { display: block; margin-top: 1px; color: var(--ink-soft); font-size: 0.8125rem; }
  .ticket { padding: 8px 12px 10px; }
  .ticket-maker { font-size: 0.9375rem; white-space: normal; }
  .ticket-line { font-size: 0.875rem; }
  .ticket-line b { font-size: 1.125rem; }
  .ticket-what { display: inline; }
  .note { font-size: 1rem; min-height: 112px; align-items: flex-start; }
  .floor-wrap { align-items: flex-start; }
  .hud { flex-wrap: wrap; }
  .clock { display: grid; grid-template: auto auto / auto 1fr; column-gap: 8px; align-items: center; flex-basis: 100%; }
  .clock-label { display: block; }
  .clock-digits { grid-row: 1 / 3; grid-column: 2; justify-self: end; font-size: 1.75rem; }
  .clock-par { grid-column: 1; }
  .peg { width: 12px; height: 17px; }
  .pegs { gap: 3px; }
  .slots { white-space: nowrap; }
  .hud #belt { flex: 1 1 auto; }
  .tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .context { min-height: 120px; align-content: flex-start; }
  .footer-actions { justify-content: flex-start; margin-top: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
  * { scroll-behavior: auto !important; }
}