/* Checkout Rhythm. A 1960s supermarket till: boomerang laminate, rubber belts,
   chrome rails, a glowing till display, chunky coloured keys and thermal paper. */
:root {
  color-scheme: light;
  --laminate: #0b6e6e;
  --laminate-deep: #074f51;
  --laminate-fleck: #15868380;
  --rubber: #1e2430;
  --chrome: #c8d3da;
  --chrome-dark: #6e7c87;
  --ink: #1a1a2e;
  --paper: #fffdf4;
  --paper-shade: #ece8d6;
  --marigold: #ffb800;
  --tomato: #ff6242;
  --leaf: #5fd14f;
  --orchid: #ee63c0;
  --vfd-glass: #06201e;
  --vfd: #8dffd6;
  --vfd-dim: #4fb596;
  --font-display: Impact, Haettenschweiler, "Franklin Gothic Bold", "Arial Narrow Bold", "Roboto Condensed", "sans-serif-condensed", sans-serif;
  --font-body: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-till: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", "Liberation Mono", monospace;
  --pulse: 0;
  --focus: 3px solid var(--marigold);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--laminate);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }

h1, h2, p, ul, ol, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }

button, input, a { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: var(--focus); outline-offset: 2px; box-shadow: 0 0 0 6px var(--ink); }

#app {
  position: fixed;
  inset: 0;
  display: grid;
  background-color: var(--laminate);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='6'%3E%3Cpath d='M24 34c10-14 24-14 34-2' stroke='%2315868a'/%3E%3Cpath d='M116 22c14 6 18 20 10 32' stroke='%23097a78'/%3E%3Cpath d='M70 92c8 14 22 18 34 10' stroke='%2315868a'/%3E%3Cpath d='M148 112c-14 4-22 16-16 30' stroke='%23097a78'/%3E%3Cpath d='M22 124c14-4 26 2 30 16' stroke='%23097a78'/%3E%3C/g%3E%3C/svg%3E");
  touch-action: manipulation;
}

/* Layout for play. Keys sit under the belts so each pad lines up with its lane. */
#app[data-screen="playing"], #app[data-screen="paused"] {
  grid-template-columns: minmax(170px, 1fr) minmax(400px, 620px) minmax(170px, 1fr);
  grid-template-rows: auto minmax(0, 1fr) clamp(84px, 15dvh, 116px);
  grid-template-areas:
    "tape hud street"
    "tape belts street"
    "tape keys street";
  touch-action: none;
}
#app[data-screen="playing"] .start-panel, #app[data-screen="paused"] .start-panel { display: none; }

/* Layout for the start screen. Live belts run beside the sign. */
#app[data-screen="start"] {
  grid-template-columns: minmax(420px, 1.25fr) minmax(320px, 1fr);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "panel belts";
}
#app[data-screen="start"] #tape,
#app[data-screen="start"] #hud,
#app[data-screen="start"] #street,
#app[data-screen="start"] #keys { display: none; }

#app[data-screen="check"], #app[data-screen="result"] { grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
#app[data-screen="check"] > :not(.sheet), #app[data-screen="result"] > :not(.sheet) { visibility: hidden; position: absolute; width: 1px; height: 1px; overflow: hidden; }

/* Till tape */
#tape { grid-area: tape; display: flex; justify-content: center; min-height: 0; overflow: hidden; padding: 0 16px; }
.tape-paper {
  width: min(100%, 230px);
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-till);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 0 rgb(7 79 81 / .55);
}
.tape-head { padding: 12px 14px 8px; border-bottom: 2px dashed var(--ink); font-weight: 700; }
#tape-lines { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 8px 14px 14px; }
#tape-lines li { display: flex; justify-content: space-between; gap: 8px; white-space: nowrap; }
#tape-lines .miss { text-decoration: line-through; color: #a4281a; }
#tape-lines .note-line { color: #0b6e6e; font-weight: 700; }

/* Till display */
#hud {
  grid-area: hud;
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas:
    "pause score run time"
    "pause accuracy accuracy accuracy";
  column-gap: 14px;
  row-gap: 4px;
  align-items: center;
  padding: 8px 12px 10px;
  background: var(--vfd-glass);
  color: var(--vfd);
  font-family: var(--font-till);
  border-bottom: 5px solid var(--chrome-dark);
  border-left: 5px solid var(--chrome-dark);
  border-right: 5px solid var(--chrome-dark);
}
.hud-pause {
  grid-area: pause;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: var(--chrome);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-bottom-width: 5px;
  border-radius: 8px;
}
.hud-pause:active { border-bottom-width: 2px; transform: translateY(3px); }
.hud-score { grid-area: score; min-width: 0; }
.hud-run { grid-area: run; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: baseline; }
.hud-run .vfd-label { grid-column: 1 / -1; }
.hud-accuracy { grid-area: accuracy; min-width: 0; }
.hud-time { grid-area: time; text-align: right; min-width: 92px; }
.vfd-label { display: block; font-size: 12px; color: var(--vfd-dim); white-space: nowrap; }
.hud-accuracy .vfd-label { display: flex; justify-content: space-between; color: var(--vfd); }
.vfd-big { display: block; font-size: 26px; line-height: 1.05; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgb(141 255 214 / .55); }
.vfd-mid { font-size: 20px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; text-shadow: 0 0 8px rgb(141 255 214 / .45); }
.vfd-mult { font-size: 20px; font-weight: 700; color: var(--marigold); text-shadow: 0 0 8px rgb(255 184 0 / .5); }
.gauge { position: relative; height: 10px; margin-top: 2px; background: #103c37; border: 1px solid var(--vfd-dim); }
.gauge-fill { height: 100%; width: 0; background: var(--vfd); }
.gauge-fill.below { background: var(--marigold); }
.gauge-target { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--paper); left: 80%; }
.hud-pulse {
  position: absolute; left: 0; right: 0; bottom: -5px; height: 5px;
  background: var(--vfd);
  opacity: var(--pulse);
}

/* High street */
#street { grid-area: street; position: relative; min-height: 0; padding: 12px 16px; overflow: hidden; }
#shops { height: 100%; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.shop { position: relative; flex: 0 1 15%; min-height: 0; max-height: 128px; }
.shop svg { display: block; width: 100%; height: 100%; }
.shop { filter: grayscale(.82) brightness(.62) contrast(.9); transition: filter 240ms ease-out; }
.shop-bunting { display: none; }
.shop.lit { filter: none; }
.shop.lit .shop-bunting { display: inline; }
.shop.lit .shop-window, .shop.lit .shop-door { fill: #ffe9a3; }
.shop.party { animation: shop-hop 520ms ease-out 1; }
@keyframes shop-hop {
  0% { transform: translateY(0) scale(1); }
  35% { transform: translateY(-7px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}
.confetti {
  position: absolute; left: 50%; top: 40%;
  width: 8px; height: 8px;
  pointer-events: none;
  animation: confetti-fly 820ms ease-out forwards;
}
@keyframes confetti-fly {
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--spin)); opacity: 0; }
}
#toast {
  position: absolute; left: 12px; right: 12px; bottom: 10px;
  padding: 6px 10px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  opacity: 0;
  transition: opacity 160ms;
  pointer-events: none;
}
#toast.show { opacity: 1; }

/* Belts */
#belts { grid-area: belts; position: relative; min-height: 0; min-width: 0; background: var(--rubber); }
#belts:focus { outline: none; box-shadow: none; }
#belt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

/* Scan pads */
#keys {
  grid-area: keys;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(#aebbc4, #7b8894);
  border-top: 3px solid var(--ink);
  min-height: 0;
}
.pad {
  --cap: #ccc;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 0;
  padding: 2px 4px;
  color: var(--ink);
  background: var(--cap);
  border: 3px solid var(--ink);
  border-bottom-width: 9px;
  border-radius: 10px 10px 14px 14px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.pad svg { width: min(52px, 58%); height: auto; max-height: 100%; }
.pad-letter {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
}
.pad.down {
  transform: translateY(6px);
  border-bottom-width: 3px;
  filter: brightness(1.18);
}
@media (hover: none) { .pad-letter { display: none; } }

/* Start screen */
.start-panel {
  grid-area: panel;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 0 clamp(16px, 4vw, 56px) 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.start-panel > * { flex-shrink: 0; }
.start-panel, .start-panel > * { max-width: 100%; }
.aisle-sign {
  position: relative;
  margin-top: 54px;
  padding: 14px 26px 16px;
  background: var(--marigold);
  color: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 6px;
  box-shadow: 8px 8px 0 var(--laminate-deep);
  width: min-content;
}
.aisle-sign h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(40px, 6.4vw, 78px);
  line-height: .98;
  letter-spacing: .005em;
}
.chain {
  position: absolute; bottom: 100%; width: 6px; height: 60px;
  background: repeating-linear-gradient(var(--chrome) 0 6px, var(--ink) 6px 8px);
}
.chain-l { left: 34px; }
.chain-r { right: 34px; }
.pitch { max-width: 34em; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.4; }

.tickets legend { font-weight: 700; margin-bottom: 8px; padding: 0; }
.ticket-row { display: flex; flex-wrap: wrap; gap: 10px; }
.ticket { position: relative; display: block; cursor: pointer; }
.ticket input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.ticket-face {
  display: block;
  min-width: 118px;
  padding: 10px 16px 10px 26px;
  background: var(--paper);
  color: var(--ink);
  border: 3px solid var(--ink);
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 14px 100%, 0 50%);
}
.ticket-face::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px;
  border-radius: 50%; background: var(--laminate-deep); border: 2px solid var(--ink);
}
.ticket-name { display: block; font-weight: 700; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.ticket-target { display: block; font-family: var(--font-display); font-size: 24px; line-height: 1.1; }
.ticket-notes { display: block; font-size: 13px; }
.ticket input:checked + .ticket-face { background: var(--marigold); box-shadow: inset 0 0 0 2px var(--ink); }
/* Ink, not the usual marigold: the selected ticket is itself marigold, and clip-path would cut an outer ring. */
.ticket input:focus-visible + .ticket-face { outline: 3px dashed var(--ink); outline-offset: -9px; }

.till-key {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 10px 26px;
  background: var(--chrome);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-bottom-width: 8px;
  border-radius: 9px;
  font-weight: 800;
  font-size: 18px;
  text-align: center;
  text-decoration: none;
}
.till-key:active { transform: translateY(5px); border-bottom-width: 3px; }
.till-key-go { background: var(--tomato); }
#start-button { font-family: var(--font-display); font-weight: 400; font-size: 32px; min-height: 68px; padding: 8px 44px; letter-spacing: .01em; }
.plain-button {
  min-height: 44px;
  padding: 8px 14px;
  background: var(--laminate-deep);
  color: var(--paper);
  border: 2px solid var(--paper);
  border-radius: 6px;
  font-weight: 600;
}
.plain-button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }

.how { max-width: 38em; }
.how h2 { font-size: 18px; margin-bottom: 8px; }
.how ul { display: grid; gap: 8px; }
.how li { display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; }
.how-art { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; background: var(--rubber); border: 2px solid var(--ink); position: relative; overflow: hidden; }
.how-art svg { width: 38px; height: 38px; position: relative; }
.how-art.hold::before { content: ""; position: absolute; top: 0; left: 50%; width: 14px; height: 60%; margin-left: -7px; background: repeating-linear-gradient(-45deg, var(--marigold) 0 6px, var(--paper) 6px 12px); }
.how-art.pair svg { width: 26px; height: 26px; }
.how-art.pair { gap: 0; background-image: linear-gradient(var(--paper), var(--paper)); background-size: 100% 6px; background-position: center; background-repeat: no-repeat; background-color: var(--rubber); }
kbd {
  display: inline-block; min-width: 1.5em; padding: 0 .3em; text-align: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--ink); border-bottom-width: 3px; border-radius: 4px;
  font-family: var(--font-till); font-size: .85em; line-height: 1.35;
}

.options { display: grid; gap: 10px; width: min(100%, 560px); padding-top: 12px; border-top: 3px solid var(--laminate-deep); }
.option-line { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
#shift-code {
  width: 5.2ch; min-height: 44px; padding: 6px 8px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 4px;
  font-family: var(--font-till); font-size: 20px; font-weight: 700; text-align: center;
  box-sizing: content-box;
}
.note { font-size: 14px; color: #dff3ee; }
.note-on-teal { margin-top: 14px; max-width: 40em; }
.check-line { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; cursor: pointer; }
.check-line input { width: 22px; height: 22px; accent-color: var(--marigold); }
.segments { display: inline-flex; border: 2px solid var(--paper); border-radius: 6px; overflow: hidden; }
.segment { position: relative; display: block; cursor: pointer; }
.segment input { position: absolute; inset: 0; opacity: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.segment span { display: block; padding: 9px 14px; min-height: 40px; background: var(--laminate-deep); color: var(--paper); font-weight: 600; }
.segment input:checked + span { background: var(--paper); color: var(--ink); }
.segment input:focus-visible + span { outline: 3px dashed currentColor; outline-offset: -5px; }
.return-link {
  display: inline-flex; align-items: center; min-height: 44px; width: fit-content;
  color: var(--paper); font-weight: 700;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;
}

/* Full-screen layers */
.sheet { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; z-index: 5; }

/* Pause */
#pause { display: grid; place-items: center; padding: 16px; background: rgb(7 79 81 / .88); }
.pause-card { display: grid; gap: 14px; justify-items: start; width: min(100%, 460px); }
.pause-card h2, #check h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 8vw, 64px); line-height: 1; }
.pause-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Timing check */
#check { background: var(--laminate); padding: clamp(16px, 4vw, 48px); }
.check-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); gap: 28px; max-width: 900px; margin: auto; min-height: 100%; align-items: center; }
#check-prompt { margin-top: 10px; font-size: 18px; }
.check-dots { display: flex; gap: 8px; margin: 16px 0; }
.check-dots i { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--paper); }
.check-dots i.on { background: var(--marigold); }
.check-result { font-size: 20px; font-weight: 700; min-height: 1.5em; margin-bottom: 8px; }
.check-nudge { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
#nudge-value { font-family: var(--font-till); font-size: 20px; font-weight: 700; min-width: 6ch; text-align: center; }
.check-pad {
  position: relative;
  display: block;
  width: 100%;
  height: min(60dvh, 460px);
  padding: 0;
  background: var(--rubber);
  border: 4px solid var(--ink);
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#check-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.check-pad-label { position: absolute; left: 8px; right: 8px; top: 10px; color: var(--paper); font-weight: 700; font-size: 15px; text-align: center; }

/* Result */
#result {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
  gap: clamp(16px, 4vw, 56px);
  padding: 0 clamp(16px, 6vw, 80px);
  background: var(--laminate);
  justify-content: center;
}
.result-side { position: sticky; top: 0; align-self: start; min-height: min(100dvh, 720px); justify-content: center; padding: 28px 0; max-width: 34em; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
#verdict { font-family: var(--font-display); font-weight: 400; font-size: clamp(52px, 7.2vw, 96px); line-height: .96; }
#verdict:focus, #verdict:focus-visible { outline: none; box-shadow: none; }
#verdict-note { font-size: 19px; }
.best-note { font-weight: 700; }
.result-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }
.result-actions .till-key { flex: 0 1 auto; }

.receipt-column { position: relative; min-height: 0; }
.till-slot {
  position: sticky; top: 0; z-index: 2;
  height: 26px;
  margin: 0 -14px;
  background: linear-gradient(#8e9ba5, var(--chrome) 40%, #6e7c87);
  border: 3px solid var(--ink);
  border-top: 0;
  border-radius: 0 0 10px 10px;
}
.till-slot::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 5px; height: 5px; background: var(--ink); border-radius: 3px; }
.receipt-clip { overflow: hidden; margin-top: -8px; padding-bottom: 28px; }
.receipt {
  --tooth: 10px;
  position: relative;
  padding: 26px 22px 34px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-till);
  font-size: 14px;
  line-height: 1.5;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--tooth) * 2) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(var(--tooth) * 2) 100%;
}
.receipt.printing { animation: print-out 1600ms steps(26) both; }
@keyframes print-out { from { transform: translateY(-100%); } to { transform: translateY(0); } }
.receipt h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 34px; line-height: 1; text-align: center; }
.receipt .centre { text-align: center; }
.receipt hr { border: 0; border-top: 2px dashed var(--ink); margin: 10px 0; }
.receipt .line { display: flex; justify-content: space-between; gap: 10px; }
.receipt .line span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt .line.big { font-size: 20px; font-weight: 700; }
.receipt .line.total { font-size: 24px; font-weight: 700; }
.receipt .spot { color: #0b6e6e; }
.receipt .stamp {
  display: block; width: fit-content; margin: 14px auto 4px;
  padding: 4px 14px;
  border: 4px double currentColor;
  border-radius: 4px;
  font-family: var(--font-display); font-size: 26px; line-height: 1.1;
  transform: rotate(-5deg);
}
.stamp.good { color: #0a6b50; }
.stamp.short { color: #b5261a; }
.receipt svg.barcode { display: block; width: 100%; height: 42px; margin-top: 12px; }
.receipt .small { font-size: 12px; text-align: center; margin-top: 8px; }

/* Phones and narrow iframes */
@media (max-width: 820px) {
  #app[data-screen="playing"], #app[data-screen="paused"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto clamp(40px, 8dvh, 66px) minmax(0, 1fr) clamp(92px, 15dvh, 120px);
    grid-template-areas: "hud" "street" "belts" "keys";
  }
  #tape { display: none; }
  #street { padding: 3px 4px; }
  #shops { flex-direction: row; gap: 3px; }
  .shop { flex: 1 1 0; max-height: none; min-width: 0; }
  #toast { left: 4px; right: 4px; bottom: 2px; padding: 3px 6px; font-size: 13px; }
  #hud { column-gap: 10px; padding: 6px 8px 8px; border-left: 0; border-right: 0; grid-template-columns: auto 1fr auto auto; }
  .hud-pause { width: 44px; height: 44px; }
  .vfd-big { font-size: 22px; }
  .vfd-mid, .vfd-mult { font-size: 17px; }
  .hud-time { min-width: 72px; }
  .hud-time .vfd-label { max-width: 82px; overflow: hidden; text-overflow: ellipsis; margin-left: auto; }

  #app[data-screen="start"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: clamp(90px, 18dvh, 170px) minmax(0, 1fr);
    grid-template-areas: "belts" "panel";
  }
  .aisle-sign { margin-top: 26px; padding: 8px 16px 10px; }
  .chain { height: 30px; }
  .aisle-sign h1 { font-size: clamp(38px, 12.4vw, 66px); }
  .start-panel { gap: 12px; padding: 0 16px 24px; }
  .pitch { font-size: 16px; }
  .ticket-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ticket-face { min-width: 0; height: 100%; padding: 8px 6px 8px 22px; clip-path: polygon(11px 0, 100% 0, 100% 100%, 11px 100%, 0 50%); }
  .ticket-face::before { left: 9px; width: 7px; height: 7px; margin-top: -3.5px; }
  .ticket-name { font-size: 13px; white-space: normal; }
  .ticket-notes { font-size: 12px; }
  #start-button { width: 100%; }

  .check-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .check-pad { height: 42dvh; order: -1; }
  #check { padding: 16px; }

  #result { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; align-content: start; }
  .result-side { position: static; min-height: 0; padding: 18px 0 14px; gap: 8px; }
  #verdict { font-size: clamp(46px, 14vw, 78px); }
  #verdict-note { font-size: 16px; }
  .till-slot { margin: 0 -6px; position: relative; }
  .result-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .result-actions .till-key { font-size: 16px; padding: 8px 8px; min-height: 58px; }
  .result-actions .plain-button, .result-actions .return-link { justify-content: center; }
  .result-actions .return-link { width: auto; }
}

/* Very short embeds and landscape phones. */
@media (max-height: 540px) {
  #street, #tape { display: none; }
  #app[data-screen="playing"], #app[data-screen="paused"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr) 72px;
    grid-template-areas: "hud" "belts" "keys";
  }
  .pad-letter { font-size: 20px; }
  .aisle-sign { margin-top: 26px; }
  .chain { height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .pad.down, .till-key:active, .hud-pause:active { transform: none; }
}