/* Bookie: one betting-shop counter, drawn as a two-colour print. */
:root {
  --paper: #f8ecdf;
  --paper-2: #fbf3e6;
  --ink: #141010;
  --ink-2: #4a3f38;
  --orange: #f0551e;
  --orange-deep: #c73d0e;
  --chalk: #f4efe4;
  --chalk-dim: rgba(244, 239, 228, 0.74);
  --chalk-orange: #ff9163;
  --focus: #1d4ed8;

  --f-display: "Archivo", "Arial Black", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-chalk: "Kalam", "Segoe Print", cursive;
  --f-chalk-head: "Cabin Sketch", "Kalam", cursive;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.45 var(--f-mono);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }

/* ---------- the scene (desktop: one picture, the objects laid on it) ---------- */
.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 2880 / 1607;
  container-type: inline-size;
  overflow: hidden;
}
.scene-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.obj { position: absolute; }
button.obj {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  transition: transform 0.12s ease;
}
button.obj:hover { transform: translateY(-0.25cqw); }
button.obj:active { transform: translateY(0.1cqw) scale(0.99); }

/* the chalkboard: open bets */
.board {
  left: 27.9%; top: 11.6%; width: 44.4%; height: 52%;
  padding: 0.6cqw 1cqw;
  color: var(--chalk);
  font-family: var(--f-chalk);
  display: flex; flex-direction: column;
  outline-offset: -4px;
}
.board-head {
  margin: 0; line-height: 0.95;
  font: 700 clamp(28px, 4.6cqw, 104px)/0.95 var(--f-chalk-head);
  letter-spacing: 0.01em;
  display: flex; align-items: baseline; gap: 0.8cqw; flex-wrap: wrap;
}
.board-tick { font-size: 0.5em; color: var(--chalk-orange); }
.board-sub {
  margin: 0.5cqw 0 1cqw; max-width: 36em;
  font: 400 clamp(15px, 1.12cqw, 24px)/1.3 var(--f-chalk);
  color: var(--chalk-dim);
}
.board-cols, .board-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7em 3.6em 3.6em 4.4em 5em;
  column-gap: 0.8em; align-items: baseline;
}
.board-cols {
  font: 600 clamp(12px, 0.78cqw, 16px)/1 var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--chalk-orange);
  padding-bottom: 0.4em; border-bottom: 2px dashed rgba(244, 239, 228, 0.35);
}
.board-cols span:nth-child(n + 3), .board-row .n { text-align: right; }
.board-rows { list-style: none; margin: 0; padding: 0; font-size: clamp(14px, 1.05cqw, 22px); }
.board-row {
  width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--chalk); padding: 0.32em 0; border-bottom: 1px solid rgba(244, 239, 228, 0.14);
  font: inherit;
}
.board-row:hover .t { color: var(--chalk-orange); }
.board-row .t { font-family: var(--f-chalk); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .s { font-family: var(--f-chalk); font-weight: 700; color: var(--chalk-orange); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board-row .n { font-family: var(--f-mono); font-size: 0.86em; }
.board-row .m { display: none; }
.board-note { list-style: none; padding: 0.9em 0 0; max-width: 30em; font: 400 clamp(15px, 1.12cqw, 24px)/1.35 var(--f-chalk); color: var(--chalk-dim); }
.board-note b { color: var(--chalk); font-weight: 700; }
.board-more {
  align-self: flex-start; margin-top: 0.5em; background: none; border: 0; cursor: pointer; padding: 0.3em 0;
  font: 700 clamp(14px, 1.05cqw, 22px)/1.2 var(--f-chalk); color: var(--chalk-orange);
  text-decoration: underline; text-underline-offset: 0.2em;
}

/* the X slip clipped to the board's lower left corner */
.x-slip {
  position: absolute; left: 0.8cqw; bottom: -0.4cqw;
  display: flex; align-items: center; gap: 0.6em;
  min-height: 48px; padding: 0.35em 0.8em 0.35em 0.9em;
  background: url(/art/coupon.jpg) center / cover;
  color: var(--ink); text-decoration: none;
  font: 600 clamp(12px, 0.8cqw, 16px)/1.1 var(--f-mono);
  box-shadow: 0.25cqw 0.25cqw 0 var(--ink);
  transform: rotate(-2deg);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.x-slip img { width: clamp(18px, 1.4cqw, 30px); height: auto; }
.x-slip:not([aria-disabled="true"]):hover { transform: rotate(-2deg) translateY(-2px); }
.x-slip:not([aria-disabled="true"]):active { transform: rotate(-2deg) translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.x-slip[aria-disabled="true"] { cursor: not-allowed; }
.x-slip[aria-disabled="true"] img { opacity: 0.35; }

/* framed house rules (wall, left) */
.cert {
  left: 7.3%; top: 14.4%; width: 11.5%; height: 23.6%;
  display: flex; flex-direction: column; justify-content: center; gap: 0.45cqw;
  padding: 0 1cqw 0 1.25cqw; color: var(--ink);
}
.cert-head { font: 900 clamp(13px, 1.25cqw, 26px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -0.01em; }
.cert-line { font: 400 clamp(11px, 0.68cqw, 15px)/1.25 var(--f-mono); }
.cert-read {
  margin-top: 0.2cqw; align-self: flex-start;
  font: 600 clamp(11px, 0.72cqw, 15px)/1 var(--f-mono); color: var(--orange-deep);
  text-transform: uppercase; letter-spacing: 0.08em; border-bottom: 2px solid currentColor; padding-bottom: 2px;
}

/* the till sheet pinned on the wall (right) */
.notice {
  left: 81.6%; top: 16.4%; width: 12.5%; height: 25.6%;
  display: flex; flex-direction: column; justify-content: center; gap: 0.5cqw;
  padding: 0 0.3cqw; color: var(--ink);
}
.notice-head { font: 900 clamp(13px, 1.25cqw, 26px)/1 var(--f-display); text-transform: uppercase; }
.notice-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.4em; flex-wrap: wrap;
  font: 400 clamp(11px, 0.72cqw, 15px)/1.2 var(--f-mono);
  border-bottom: 1px dotted rgba(20, 16, 16, 0.35); padding-bottom: 0.25cqw;
}
.notice-row b { font-weight: 600; }

/* the coupon spike on the counter (left) */
.spike { left: 8%; top: 46%; width: 10.8%; height: 41%; }
.spike-tag {
  position: absolute; left: 50%; bottom: -1.4cqw; transform: translateX(-50%) rotate(2deg);
  white-space: nowrap; display: inline-flex; align-items: baseline; gap: 0.5em;
  min-height: 44px; align-items: center;
  padding: 0.3em 0.8em; background: url(/art/coupon.jpg) center / cover;
  font: 600 clamp(12px, 0.8cqw, 16px)/1 var(--f-mono); box-shadow: 0.25cqw 0.25cqw 0 var(--ink);
}
.spike-tag-label { text-transform: uppercase; letter-spacing: 0.08em; }

/* the till (counter, right) */
.till { left: 81%; top: 51.5%; width: 19%; height: 35.5%; }
.till-display {
  position: absolute; left: 47.4%; top: 6.2%; width: 34.2%; height: 9.9%;
  display: flex; align-items: center; justify-content: center;
  font: 600 clamp(11px, 0.95cqw, 20px)/1 var(--f-mono); color: var(--ink); letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden;
}

/* ---------- the counter front: the licence ---------- */
.front {
  position: relative;
  padding: 0 16px 56px;
}
.licence {
  position: relative;
  max-width: 1120px; margin: -4vw auto 0;
  aspect-ratio: 1600 / 678;
  padding: 7.6% 8.4% 7% 8.4%;
  background: url(/art/licence.jpg) center / 100% 100% no-repeat;
  filter: drop-shadow(8px 8px 0 var(--ink));
  display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: start;
}
.licence-seal { width: 96px; height: auto; margin-top: 4px; }
.licence-body { min-width: 0; }
.licence-head {
  margin: 0 0 18px; font: 900 clamp(22px, 2.3vw, 38px)/1.05 var(--f-display);
  text-transform: uppercase; letter-spacing: -0.01em;
}
.licence-head span { font-weight: 800; color: var(--orange-deep); }
.licence-label { margin: 0 0 6px; font: 600 14px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.ca { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.ca-value {
  flex: 1 1 320px; min-width: 0; display: flex; align-items: center;
  padding: 10px 14px; min-height: 52px;
  border: 2px solid var(--ink); background: rgba(255, 255, 255, 0.35);
  font: 600 clamp(15px, 1.25vw, 19px)/1.35 var(--f-mono);
  overflow-wrap: anywhere; word-break: break-all; user-select: all;
}
.ca-value.empty { color: var(--ink-2); font-weight: 400; user-select: text; word-break: normal; overflow-wrap: normal; }
.ca-status { min-height: 1.4em; margin: 6px 0 14px; font: 400 14px/1.4 var(--f-mono); color: var(--ink-2); }
.licence-links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.licence-fine { margin: 14px 0 0; font: 400 14px/1.45 var(--f-mono); color: var(--ink-2); max-width: 60ch; }

/* ticket stubs: every button on paper */
.stub {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 8px 26px 8px 40px;
  background: url(/art/stub.jpg) center / 100% 100% no-repeat;
  border: 0; color: var(--ink); text-decoration: none; cursor: pointer;
  font: 900 17px/1.1 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.stub img { width: 30px; height: 30px; flex: none; }
.stub:not([aria-disabled="true"]):not(:disabled):hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink); }
.stub:not([aria-disabled="true"]):not(:disabled):active { transform: translate(5px, 5px); box-shadow: 0 0 0 var(--ink); }
.stub[aria-disabled="true"], .stub:disabled { cursor: not-allowed; filter: grayscale(0.85) opacity(0.55); box-shadow: 5px 5px 0 rgba(20, 16, 16, 0.4); }
.stub-copy { min-width: 112px; padding-left: 34px; }
.stub-dex { padding-left: 34px; }

/* ---------- dialogs: pinned sheets, the spike, the coupon ---------- */
dialog.sheet {
  border: 0; padding: 0; background: none; color: var(--ink);
  width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  overflow: visible;
}
dialog.sheet::backdrop { background: rgba(20, 16, 16, 0.62); }
.sheet-in {
  max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden;
  padding: 64px 52px 56px;
  background: url(/art/sheet.jpg) center / 100% 100% no-repeat;
  filter: drop-shadow(8px 8px 0 var(--ink));
}
.sheet-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; padding-right: 6px; }
.sheet-head { margin: 0 0 14px; font: 900 clamp(26px, 4vw, 40px)/1 var(--f-display); text-transform: uppercase; }
.sheet-sub { margin: -4px 0 16px; color: var(--ink-2); }
.sheet-fine { margin: 18px 0 0; font-size: 14px; color: var(--ink-2); }
.sheet-close {
  position: absolute; top: -8px; right: -8px; width: 52px; height: 52px;
  background: url(/art/stub.jpg) center / 100% 100%; border: 0; cursor: pointer;
  font: 900 30px/1 var(--f-display); color: var(--ink); box-shadow: 4px 4px 0 var(--ink);
}
.sheet-close:active { transform: translate(4px, 4px); box-shadow: none; }

.rules { margin: 0; padding-left: 1.4em; display: grid; gap: 12px; font-size: 16px; }
.rules b { font-family: var(--f-display); font-weight: 800; font-size: 15px; text-transform: uppercase; letter-spacing: 0.01em; }

.ledger { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.ledger div { border-bottom: 2px solid var(--ink); padding-bottom: 8px; }
.ledger dt { font: 600 13px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.ledger dd { margin: 4px 0 2px; font: 900 clamp(22px, 3vw, 30px)/1.1 var(--f-display); }
.ledger p { margin: 0; font-size: 13px; color: var(--ink-2); }
.split { margin: 20px 0 0; font-size: 15px; }
.split b { font-family: var(--f-display); text-transform: uppercase; margin-right: 6px; }
.wallets { display: flex; gap: 20px; flex-wrap: wrap; margin: 16px 0 0; font-size: 15px; }
.wallets a { text-underline-offset: 3px; text-decoration-thickness: 2px; padding: 10px 0; }

.sheet-spike .sheet-scroll { overflow-x: hidden; }
.spike-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.spike-item {
  position: relative; width: 100%; min-height: 150px; text-align: left; cursor: pointer; color: var(--ink);
  border: 0; background: url(/art/coupon.jpg) center 62% / 150% auto no-repeat; padding: 30px 24px 20px;
  box-shadow: 4px 4px 0 var(--ink); font: 400 14px/1.3 var(--f-mono);
  display: flex; flex-direction: column; gap: 6px;
}
.spike-item .t { font: 800 15px/1.2 var(--f-display); }
.spike-item .stamp { height: auto; position: absolute; right: -8px; top: -14px; width: 84px; transform: rotate(-6deg); }
.spike-empty { font-size: 16px; }

/* the coupon itself */
dialog.sheet-coupon { width: min(520px, calc(100vw - 24px), calc((100dvh - 24px) * 0.7235)); }
.coupon {
  position: relative; max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain;
  aspect-ratio: 900 / 1244;
  padding: 38% 13% 11% 14%;
  background: url(/art/coupon.jpg) center / 100% 100% no-repeat;
  filter: drop-shadow(8px 8px 0 var(--ink));
}
.coupon-kicker { position: absolute; top: 15.5%; left: 14%; font: 600 13px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--orange-deep); }
.coupon-stamp { height: auto; position: absolute; top: 11%; right: 6%; width: 36%; transform: rotate(-6deg); pointer-events: none; }
.coupon h2 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 10px; font: 900 clamp(17px, 2.4vw, 22px)/1.15 var(--f-display); }
.coupon-side { font: 900 19px/1 var(--f-display); text-transform: uppercase; color: var(--orange-deep); margin: 0 0 12px; }
.coupon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; margin: 0 0 12px; }
.coupon-grid div { border-bottom: 2px solid var(--orange); padding-bottom: 6px; }
.coupon-grid dt { font: 600 12px/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); }
.coupon-grid dd { margin: 3px 0 0; font: 600 16px/1.1 var(--f-mono); }
.coupon-why { margin: 0 0 10px; padding-left: 1.6em; display: grid; gap: 4px; font-size: 14px; }
.coupon-why-none { color: var(--ink-2); font-size: 15px; }
.coupon-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.coupon-links a { padding: 10px 0; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------- phone and portrait: the same objects, stacked ---------- */
@media (max-width: 899px), (max-aspect-ratio: 1/1) {
  .scene {
    aspect-ratio: auto; overflow: visible; container-type: normal;
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
    padding: max(12px, env(safe-area-inset-top)) 16px 20px;
  }
  .scene-img { display: none; }
  .obj { position: relative; inset: auto; width: auto; height: auto; }
  button.obj:hover { transform: none; }

  .board {
    grid-column: 1 / -1; order: 0;
    border-style: solid; border-width: 22px 22px 46px;
    border-image: url(/art/board.jpg) 64 62 140 fill / 22px 22px 46px stretch;
    padding: 6px 4px 64px;
  }
  .board-head { font-size: clamp(40px, 13vw, 64px); gap: 10px; }
  .board-sub { font-size: 16px; margin: 6px 0 12px; }
  .board-cols { display: none; }
  .board-rows { font-size: 16px; }
  .board-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 8px 0; }
  .board-row .t { white-space: normal; grid-column: 1 / -1; }
  .board-row { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  .board-row .s { grid-column: 1; }
  .board-row .n { display: none; }
  .board-row .m { display: block; grid-column: 2; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 14px/1.3 var(--f-mono); color: var(--chalk-dim); }
  .board-note, .board-more { font-size: 16px; }
  .x-slip { left: 2px; bottom: 6px; font-size: 13px; }
  .x-slip img { width: 22px; }

  .scene > .spike { order: 1; aspect-ratio: 520 / 612; background: url(/art/spike.jpg) center / 100% 100%; }
  .scene > .till { order: 2; aspect-ratio: 520 / 612; background: url(/art/till.jpg) center / 100% 100%; }
  .till-display { left: 47.4%; top: 11.75%; width: 34.2%; height: 8.75%; font-size: 12px; }
  .spike-tag { bottom: 6px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink); }

  .scene > .cert, .scene > .notice { order: 3; }
  .scene > .cert { aspect-ratio: 520 / 612; background: url(/art/cert.jpg) center / 100% 100%; padding: 14% 17% 20% 18%; gap: 6px; justify-content: center; }
  .cert-head { font-size: 17px; }
  .cert-line { display: none; }
  .cert-read { font-size: 13px; }
  .scene > .notice { aspect-ratio: 520 / 612; background: url(/art/notice.jpg) center / 100% 100%; padding: 20% 16% 18% 16%; gap: 4px; justify-content: center; }
  .notice-head { font-size: 16px; }
  .scene > .notice { overflow: hidden; }
  .notice-row:nth-of-type(n + 5) { display: none; }
  .notice-head { white-space: nowrap; }
  .notice-row { font-size: 12px; flex-direction: column; align-items: flex-start; gap: 0; padding-bottom: 2px; }
  .notice-row b { font-size: 14px; }

  .front { padding: 8px 12px 40px; }
  .licence {
    margin-top: 0; grid-template-columns: 1fr; gap: 10px;
    aspect-ratio: 1536 / 2752; padding: 22% 19% 18%;
    background: url(/art/licence-tall.jpg) center / 100% 100% no-repeat;
    filter: drop-shadow(5px 5px 0 var(--ink));
  }
  .licence-seal { display: none; }
  .licence-head { font-size: 20px; margin-bottom: 12px; }
  .licence-label { font-size: 12px; }
  .ca-value { flex-basis: 100%; font-size: 15px; padding: 8px 10px; }
  .stub { font-size: 14px; padding: 8px 12px 8px 26px; gap: 8px; }
  .stub img { width: 24px; height: 24px; }
  .licence-links { gap: 12px; }
  .ca { gap: 10px; }
  .licence-links .stub-buy { flex: 1 1 100%; }
  .licence-links .stub-dex { flex: 1 1 100%; }
  .sheet-in { padding: 48px 30px 44px; }
  .ledger { grid-template-columns: 1fr; }
  .coupon { padding: 38% 12% 12% 13%; }
  .coupon-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .scene { grid-template-columns: 1fr 1fr; }
  .notice-row b { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}