:root {
  --ink: #071a32;
  --ink-2: #0e2a4b;
  --paper: #edf2f7;
  --white: #ffffff;
  --orange: #ff6933;
  --orange-bright: #ff865d;
  --green: #63f5b5;
  --red: #ff4d58;
  --line: rgba(255,255,255,.18);
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.45;
}
button { font: inherit; cursor: pointer; }
a { color: inherit; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 1000;
  padding: .8rem 1rem;
  background: var(--orange);
  color: var(--ink);
  font-weight: 800;
}
.skip-link:focus { top: 1rem; }

.game-header {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  padding: 0 clamp(1rem, 4vw, 4rem);
  border-bottom: 1px solid var(--line);
  background: #051426;
}
.brand { display: inline-flex; align-items: center; gap: .8rem; width: max-content; text-decoration: none; font-size: .78rem; font-weight: 800; letter-spacing: .1em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; background: var(--orange); color: var(--ink); font: 700 1rem var(--mono); }
.game-name { text-align: center; }
.game-name span, .register-label, .panel-label { display: block; color: var(--orange); font: 500 .65rem var(--mono); letter-spacing: .12em; }
.game-name strong { font-size: .9rem; letter-spacing: .11em; }
.sound-button { justify-self: end; border: 1px solid rgba(255,255,255,.4); background: transparent; color: var(--white); padding: .65rem .9rem; font: 500 .7rem var(--mono); text-transform: uppercase; }
.sound-button:hover { border-color: var(--orange); color: var(--orange); }

.game-shell { max-width: 1600px; min-height: calc(100vh - 76px); margin: 0 auto; padding: clamp(1rem, 3vw, 3rem); }
.hud {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--line);
  background: #091f3a;
}
.hud > div { min-height: 86px; display: flex; flex-direction: column; justify-content: center; padding: 1rem 1.4rem; border-right: 1px solid var(--line); }
.hud > div:last-child { border-right: 0; }
.hud span { margin-bottom: .25rem; color: #8fa3bd; font: 500 .65rem var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.hud strong { color: var(--white); font: 500 clamp(1.25rem, 2.3vw, 2.1rem) var(--mono); letter-spacing: .05em; }
.hud .timer strong { color: var(--orange); }

.checkout-floor {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  min-height: 590px;
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
  border: 1px solid var(--line);
  border-top: 0;
  background:
    linear-gradient(rgba(7,26,50,.18), rgba(7,26,50,.76)),
    repeating-linear-gradient(90deg, transparent 0 74px, rgba(255,255,255,.035) 75px 76px),
    linear-gradient(180deg, #294868 0 42%, #b6c5d2 42% 100%);
}
.checkout-floor::before {
  content: "";
  position: absolute;
  inset: 42% 0 0;
  background: repeating-linear-gradient(90deg, rgba(7,26,50,.08) 0 2px, transparent 2px 120px), linear-gradient(155deg, transparent 0 48%, rgba(255,255,255,.28) 48% 49%, transparent 49% 100%);
  pointer-events: none;
}
.market-sign { grid-column: 1 / -1; position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; height: 44px; padding: 0 1rem; border-left: 6px solid var(--orange); background: var(--ink); font: 500 .66rem var(--mono); letter-spacing: .12em; }
.market-sign span:last-child { color: #9bacc1; }

.belt-wrap { position: relative; z-index: 3; align-self: center; min-width: 0; filter: drop-shadow(0 18px 20px rgba(5,20,38,.24)); }
.belt-top { position: relative; height: 260px; overflow: hidden; border: 10px solid #2d435a; border-bottom-width: 16px; background: #223348; }
.belt-lines { position: absolute; inset: 0; opacity: .65; background: repeating-linear-gradient(90deg, #354a60 0 8px, #1b2a3c 8px 72px); animation: belt-motion .75s linear infinite; }
body.paused .belt-lines, body.waiting .belt-lines { animation-play-state: paused; }
@keyframes belt-motion { to { background-position: 72px 0; } }

.scanner-zone { position: absolute; z-index: 10; top: 0; bottom: 0; left: 66%; width: 14%; border-left: 2px solid rgba(255,105,51,.7); border-right: 2px solid rgba(255,105,51,.7); background: linear-gradient(90deg, transparent, rgba(255,105,51,.15), transparent); pointer-events: none; }
.scanner-zone::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--orange); box-shadow: 0 0 18px var(--orange); transform: translateX(-50%); opacity: .8; }
.scanner-zone span { position: absolute; top: .55rem; left: 50%; transform: translateX(-50%); color: var(--orange); font: 500 .58rem var(--mono); letter-spacing: .12em; }
.scanner-zone.flash { animation: scan-flash .23s ease-out; }
@keyframes scan-flash { 50% { background: rgba(99,245,181,.52); box-shadow: inset 0 0 36px var(--green); } }

#grocery-layer { position: absolute; inset: 0; }
.grocery { --x: 0; position: absolute; z-index: 5; left: calc(var(--x) * 1%); bottom: 22px; width: clamp(90px, 11vw, 145px); transform: translateX(-50%); transition: filter .15s, opacity .2s; text-align: center; }
.grocery.target { filter: drop-shadow(0 0 12px rgba(255,105,51,.75)); }
.grocery.scanned { animation: bag-item .42s ease-in forwards; }
@keyframes bag-item { to { left: 103%; bottom: -50px; transform: translateX(-50%) rotate(16deg) scale(.65); opacity: 0; } }
.grocery.missed { animation: missed-item .28s ease-in forwards; }
@keyframes missed-item { to { opacity: 0; transform: translateX(-25%) scale(.82); } }
.grocery-art { display: grid; place-items: end center; height: 150px; }
.grocery-art svg { width: 100%; max-height: 145px; overflow: visible; filter: drop-shadow(0 8px 3px rgba(5,20,38,.25)); }
.price-tag { display: inline-block; min-width: 68px; margin-top: -.2rem; padding: .35rem .5rem; border: 2px solid var(--ink); background: #fff9dd; color: var(--ink); font: 700 .9rem var(--mono); box-shadow: 3px 3px 0 var(--orange); }
.item-name { display: block; margin-top: .45rem; color: var(--white); font: 500 .58rem var(--mono); letter-spacing: .08em; text-shadow: 0 2px 3px var(--ink); text-transform: uppercase; }

.belt-base { position: relative; height: 72px; display: flex; align-items: center; gap: clamp(.45rem, 2vw, 2rem); padding: 0 1.2rem; border: 7px solid #25384c; border-top: 0; background: #c6d1d9; color: var(--ink); }
.belt-base span { margin-right: auto; font: 700 .61rem var(--mono); letter-spacing: .1em; }
.belt-base i { width: clamp(18px, 3vw, 36px); aspect-ratio: 1; border: 5px solid #607286; border-radius: 50%; background: #18293b; }

.register { position: relative; z-index: 6; align-self: center; padding: 1rem; border: 7px solid #25384c; background: #bfcbd4; color: var(--ink); box-shadow: 14px 18px 0 rgba(5,20,38,.2); }
.register-top { display: flex; justify-content: space-between; align-items: center; padding: .35rem .25rem 1rem; }
.register-top strong { display: block; margin-top: .15rem; font: 800 1.15rem var(--sans); letter-spacing: .11em; }
.status-light { width: 14px; height: 14px; border-radius: 50%; background: #82909c; box-shadow: inset 0 0 0 3px rgba(7,26,50,.28); }
.status-light.ready { background: var(--green); box-shadow: 0 0 12px var(--green); }
.status-light.error { background: var(--red); box-shadow: 0 0 12px var(--red); }
.display-panel { min-height: 142px; padding: 1rem; border: 6px solid #213449; background: #061322; color: var(--green); }
.display-panel > span { display: block; color: #89a1b9; font: 500 .58rem var(--mono); letter-spacing: .1em; }
.display-panel output { display: block; margin: .3rem 0 .2rem; font: 500 clamp(2.2rem, 5vw, 3.5rem) var(--mono); letter-spacing: .12em; }
.display-panel p { min-height: 2.1em; margin: 0; color: #d2deea; font: 400 .66rem/1.4 var(--mono); }
.register.shake { animation: register-shake .18s linear 2; }
@keyframes register-shake { 50% { transform: translateX(7px); } }

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin-top: 1rem; }
.keypad button { min-height: 52px; border: 2px solid #607286; background: #edf2f4; color: var(--ink); font: 700 1rem var(--mono); box-shadow: 0 4px 0 #607286; }
.keypad button:active { transform: translateY(3px); box-shadow: 0 1px 0 #607286; }
.keypad .key-clear { background: #d9e0e5; font-size: .68rem; text-transform: uppercase; }
.keypad .key-scan { border-color: #c54a20; background: var(--orange); box-shadow: 0 4px 0 #9d3512; font-size: .68rem; text-transform: uppercase; }
.keyboard-note { margin: .85rem 0 0; color: #5a6a78; text-align: center; font: 500 .58rem var(--mono); text-transform: uppercase; }

.bagging-area { position: absolute; z-index: 4; left: 4%; bottom: 3%; width: min(52%, 620px); min-height: 62px; display: flex; align-items: center; gap: 1rem; padding: .75rem 1rem; border: 1px solid rgba(7,26,50,.22); background: rgba(237,242,247,.88); color: var(--ink); }
.bagging-area > span { font: 700 .58rem var(--mono); letter-spacing: .12em; }
#bagged-items { display: flex; align-items: end; gap: .2rem; height: 35px; overflow: hidden; }
.bag-pip { width: 15px; height: 24px; border: 2px solid var(--ink); background: var(--orange); animation: bag-pop .2s ease-out; }
@keyframes bag-pop { from { transform: translateY(20px); } }

.instructions { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 1.5rem 0 0; color: #aebdd0; font-size: .82rem; }
.instructions p { margin: 0; }
.instructions strong { color: var(--white); }

.game-overlay { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(3,13,26,.88); backdrop-filter: blur(8px); }
.game-overlay[hidden] { display: none; }
.overlay-card { width: min(620px, 100%); padding: clamp(2rem, 6vw, 4rem); border: 1px solid rgba(255,255,255,.2); border-top: 7px solid var(--orange); background: var(--ink); color: var(--white); box-shadow: 18px 18px 0 rgba(255,105,51,.28); }
.overlay-card h1, .overlay-card h2 { margin: .8rem 0 1.2rem; font-size: clamp(3rem, 9vw, 6.5rem); line-height: .92; letter-spacing: -.06em; }
.overlay-card > p:not(.panel-label) { color: #b9c7d8; }
.overlay-card dl { display: grid; grid-template-columns: 1fr 1fr; margin: 2rem 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.overlay-card dl div { padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.overlay-card dt, .final-grid span { color: #8fa3bd; font: 500 .62rem var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.overlay-card dd { margin: .35rem 0 0; font: 500 1rem var(--mono); }
.overlay-card button { width: 100%; border: 0; background: var(--orange); color: var(--ink); padding: 1rem; font-weight: 800; }
.overlay-card button:hover { background: var(--orange-bright); }
.overlay-card > a { display: block; margin-top: 1.2rem; color: #b9c7d8; text-align: center; text-underline-offset: .3rem; }
.final-grid { display: grid; grid-template-columns: 1fr 1fr; margin: 2rem 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.final-grid div { padding: 1rem; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.final-grid strong { display: block; margin-top: .4rem; color: var(--orange); font: 500 1.5rem var(--mono); }

:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

@media (max-width: 900px) {
  .game-header { grid-template-columns: 1fr auto; }
  .game-name { display: none; }
  .checkout-floor { grid-template-columns: 1fr; padding-bottom: 8rem; }
  .register { width: min(430px, 100%); justify-self: center; }
  .belt-top { height: 230px; }
  .bagging-area { width: 70%; }
}

@media (max-width: 620px) {
  .game-header { gap: .7rem; padding: .8rem 1rem; }
  .brand > span:last-child { font-size: .66rem; }
  .sound-button { padding: .55rem .6rem; font-size: .6rem; }
  .game-shell { padding: .6rem; }
  .hud { grid-template-columns: repeat(2, 1fr); }
  .hud > div { min-height: 68px; padding: .7rem; border-bottom: 1px solid var(--line); }
  .hud > div:nth-child(2n) { border-right: 0; }
  .hud .timer { grid-column: 1 / -1; }
  .checkout-floor { min-height: 810px; padding: .6rem .6rem 7.5rem; }
  .market-sign span:last-child { display: none; }
  .belt-top { height: 210px; border-width: 6px; }
  .belt-base { height: 54px; padding: 0 .7rem; border-width: 5px; border-top: 0; }
  .belt-base span { display: none; }
  .belt-base i { flex: 1; max-width: 28px; }
  .grocery { width: 92px; }
  .grocery-art { height: 122px; }
  .price-tag { min-width: 58px; font-size: .78rem; }
  .register { border-width: 5px; }
  .bagging-area { left: .6rem; bottom: 1.1rem; width: calc(100% - 1.2rem); }
  .instructions { grid-template-columns: 1fr; gap: .8rem; padding: 1rem .4rem; }
  .overlay-card { box-shadow: 9px 9px 0 rgba(255,105,51,.28); }
  .overlay-card dl, .final-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 2026 flat-modern checkout: one readable lane from belt to register to bagging. */
body { background: #dceff8; color: var(--ink); }
.game-header { position: relative; z-index: 20; background: var(--ink); color: var(--white); }
.sound-controls { justify-self: end; display: flex; gap: .5rem; }
.game-shell { max-width: 1180px; min-height: 0; }
.hud { position: sticky; top: 0; z-index: 15; border-color: rgba(7,26,50,.15); background: #fff8e8; box-shadow: 0 8px 24px rgba(7,26,50,.08); }
.hud > div { border-color: rgba(7,26,50,.14); }
.hud span { color: #647488; }
.hud strong { color: var(--ink); }
.checkout-art { position: relative; aspect-ratio: 16 / 6.6; margin: 1rem 0 0; overflow: hidden; border: 1px solid rgba(7,26,50,.18); background: #9dd7f3; }
.checkout-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.checkout-art figcaption { position: absolute; left: 1rem; bottom: 1rem; padding: .55rem .7rem; background: rgba(7,26,50,.9); color: var(--white); font: 500 .62rem var(--mono); letter-spacing: .12em; }
.checkout-floor { display: grid; grid-template-columns: 1fr; gap: 1rem; min-height: 0; padding: clamp(.75rem,2vw,1.5rem); overflow: visible; border: 1px solid rgba(7,26,50,.17); border-top: 0; background: #f8efd9; }
.checkout-floor::before { display: none; }
.market-sign { grid-column: 1; height: 48px; }
.belt-wrap { width: 100%; align-self: auto; filter: drop-shadow(0 12px 15px rgba(7,26,50,.16)); }
.belt-top { height: 255px; }
.register { display: grid; grid-template-columns: minmax(250px,.85fr) minmax(300px,1.15fr); gap: 1rem; width: 100%; align-self: auto; padding: clamp(.8rem,2vw,1.35rem); border: 6px solid #314b62; background: #b9d3df; box-shadow: 9px 10px 0 rgba(7,26,50,.16); }
.register-top { grid-column: 1 / -1; padding: 0 .25rem .4rem; }
.display-panel { min-height: 100%; display: flex; flex-direction: column; justify-content: center; }
.keypad { margin-top: 0; }
.keyboard-note { grid-column: 1 / -1; margin: 0; }
.bagging-area { position: static; width: 100%; min-height: 72px; background: #d9ecdf; border: 1px solid rgba(7,26,50,.2); }
.instructions { color: #40556e; }
.instructions strong { color: var(--ink); }

@media (max-width: 720px) {
  .game-header { grid-template-columns: 1fr auto; gap: .55rem; padding: .65rem .75rem; }
  .game-name { display: none; }
  .brand > span:last-child { display: none; }
  .sound-controls { gap: .3rem; }
  .sound-button { padding: .5rem .45rem; font-size: .55rem; }
  .game-shell { padding: 0; }
  .checkout-art { margin: 0; aspect-ratio: 16 / 8.8; border-left: 0; border-right: 0; }
  .checkout-art figcaption { left: .6rem; bottom: .6rem; }
  .hud { grid-template-columns: repeat(5, minmax(0,1fr)); overflow-x: auto; }
  .hud > div { min-width: 76px; min-height: 62px; padding: .55rem; border-bottom: 0; border-right: 1px solid rgba(7,26,50,.14); }
  .hud > div:nth-child(2n) { border-right: 1px solid rgba(7,26,50,.14); }
  .hud .timer { grid-column: auto; }
  .hud span { font-size: .5rem; letter-spacing: .04em; }
  .hud strong { font-size: 1rem; }
  .checkout-floor { min-height: 0; padding: .65rem; }
  .market-sign { margin: -.65rem -.65rem 0; }
  .belt-top { height: 205px; border-width: 6px; border-bottom-width: 10px; }
  .belt-base { height: 48px; }
  .grocery { width: 88px; }
  .grocery-art { height: 115px; }
  .item-name { display: none; }
  .register { grid-template-columns: 1fr; width: 100%; border-width: 4px; box-shadow: 5px 6px 0 rgba(7,26,50,.15); }
  .register-top { grid-column: auto; }
  .display-panel { min-height: 128px; }
  .display-panel output { font-size: 2.65rem; }
  .keyboard-note { grid-column: auto; }
  .bagging-area { left: auto; bottom: auto; width: 100%; }
  .instructions { padding: 1.1rem; }
}

/* Cute market cabinet and player-selected compact mobile view. */
.view-toolbar {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .75rem;
  border: 1px solid rgba(7,26,50,.16);
  border-top: 0;
  background: #fff0e8;
  color: var(--ink);
}
.view-toolbar > span { color: #b64c42; font: 500 .6rem var(--mono); letter-spacing: .12em; }
.view-toolbar small { margin-left: auto; color: #6f5861; font-size: .68rem; }
.view-options { display: flex; gap: .35rem; }
.view-options button,
.start-view-choice button {
  border: 1px solid #d29b9b;
  border-radius: 999px;
  background: #fffaf3;
  color: var(--ink);
  padding: .42rem .8rem;
  font: 700 .65rem var(--sans);
}
.view-options button.selected,
.start-view-choice button.selected { border-color: #d34f54; background: #ff7b72; color: #fff; }
.start-view-choice { margin: 1.3rem 0 .2rem; padding: .8rem; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06); }
.start-view-choice > span { display: block; margin-bottom: .6rem; color: #ffd7c9; font: 500 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.start-view-choice > div { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.overlay-card .start-view-choice button { width: auto; padding: .65rem; }
.player-name-field { display: block; margin: 1.3rem 0 0; }
.player-name-field span { display: block; margin-bottom: .5rem; color: #ffd7c9; font: 500 .64rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.player-name-field input { width: 100%; border: 1px solid rgba(255,255,255,.35); border-radius: 10px; background: #fffaf3; color: var(--ink); padding: .78rem .9rem; font: 700 1rem var(--sans); }
.player-name-field input::placeholder { color: #7e8794; }
.grocery-art img { display: block; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 7px 5px rgba(7,26,50,.25)); }
.grocery[data-grocery="citrus-sparkle"] .grocery-art img { transform: scale(.86) translateY(-4px); transform-origin: center bottom; }
.register {
  border-color: #e96868;
  border-radius: 28px;
  background: #ffdcd4;
  box-shadow: 9px 10px 0 #eab0a5;
}
.register-brand { display: flex; align-items: center; gap: .75rem; }
.register-avatar { width: 52px; height: 52px; border: 3px solid #fff8e8; border-radius: 50%; object-fit: cover; object-position: 56% 33%; box-shadow: 0 3px 0 #e96868; }
.register-label { color: #c6434a; }
.display-panel { border-color: #423653; border-radius: 18px; background: #15243f; color: #ffe897; box-shadow: inset 0 0 0 2px rgba(255,255,255,.05); }
.display-panel > span { color: #f3aaa2; }
.display-panel p { color: #fff5dc; }
.keypad button { border: 2px solid #dc9da2; border-radius: 14px; background: #fff9e9; box-shadow: 0 4px 0 #c98289; }
.keypad button:nth-child(3n + 2) { background: #fff0f1; }
.keypad .key-clear { border-color: #d9aaa3; background: #f4ddd6; box-shadow: 0 4px 0 #c89c95; }
.keypad .key-scan { border-color: #bd454e; border-radius: 14px; background: #ff6e68; box-shadow: 0 4px 0 #a83c43; color: #fff; }
.belt-top { border-color: #43556a; border-radius: 22px 22px 0 0; background: #243653; }
.belt-base { border-color: #e58e88; border-radius: 0 0 22px 22px; background: #ffe2d6; }
.belt-base i { border-color: #ca7e83; background: #fff5df; }
.price-tag { border-color: #49364d; border-radius: 9px; background: #fff9df; box-shadow: 3px 3px 0 #ff7b72; }
.bagging-area { border-radius: 18px; background: #e2f1d7; }

body.compact-view { background: #fff4e6; }
body.compact-view .game-shell { max-width: 760px; padding: 0; }
body.compact-view .checkout-art,
body.compact-view .market-sign,
body.compact-view .instructions { display: none; }
body.compact-view .hud { position: static; grid-template-columns: repeat(5, minmax(0,1fr)); overflow: hidden; box-shadow: none; }
body.compact-view .hud > div { min-width: 0; min-height: 58px; padding: .45rem .5rem; border-bottom: 0; border-right: 1px solid rgba(7,26,50,.14); }
body.compact-view .hud span { font-size: clamp(.42rem, 1.7vw, .56rem); letter-spacing: .02em; }
body.compact-view .hud strong { font-size: clamp(.9rem, 4vw, 1.3rem); }
body.compact-view .view-toolbar { min-height: 42px; padding: .35rem .55rem; }
body.compact-view .view-toolbar small { display: none; }
body.compact-view .checkout-floor { gap: .45rem; padding: .45rem; border-top: 0; background: #fff0dc; }
body.compact-view .belt-wrap { filter: none; }
body.compact-view .belt-top { height: 148px; border-width: 5px; border-bottom-width: 7px; border-radius: 16px 16px 0 0; }
body.compact-view .belt-base { height: 34px; gap: .3rem; padding: 0 .45rem; border-width: 4px; border-top: 0; border-radius: 0 0 16px 16px; }
body.compact-view .belt-base span { display: none; }
body.compact-view .belt-base i { flex: 1; max-width: 23px; border-width: 3px; }
body.compact-view .grocery { bottom: 7px; width: clamp(62px, 20vw, 90px); }
body.compact-view .grocery-art { height: 84px; }
body.compact-view .grocery[data-grocery="citrus-sparkle"] .grocery-art img { width: auto; max-width: 70px; height: 72px; transform: translateY(-8px); transform-origin: center bottom; }
body.compact-view .price-tag { min-width: 50px; margin-top: -2px; padding: .18rem .3rem; font-size: .72rem; }
body.compact-view .grocery[data-grocery="citrus-sparkle"] .price-tag { margin-top: 1px; }
body.compact-view .item-name { display: none; }
body.compact-view .scanner-zone span { top: .25rem; font-size: .48rem; }
body.compact-view .register { grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: .5rem; padding: .55rem; border-width: 4px; border-radius: 20px; box-shadow: 4px 5px 0 #eab0a5; }
body.compact-view .register-top { grid-column: 1 / -1; min-height: 40px; padding: 0 .2rem; }
body.compact-view .register-avatar { width: 36px; height: 36px; border-width: 2px; }
body.compact-view .register-label { font-size: .48rem; }
body.compact-view .register-top strong { margin-top: 0; font-size: .85rem; }
body.compact-view .display-panel { min-height: 176px; padding: .65rem; border-width: 4px; border-radius: 14px; }
body.compact-view .display-panel output { margin: .45rem 0 .3rem; font-size: clamp(1.6rem, 9vw, 2.45rem); }
body.compact-view .display-panel p { font-size: .56rem; }
body.compact-view .keypad { gap: .28rem; margin: 0; }
body.compact-view .keypad button { min-height: 42px; padding: 0; border-width: 1px; border-radius: 10px; box-shadow: 0 3px 0 #c98289; font-size: .85rem; }
body.compact-view .keypad .key-clear,
body.compact-view .keypad .key-scan { font-size: .5rem; }
body.compact-view .keyboard-note { display: none; }
body.compact-view .bagging-area { min-height: 38px; padding: .35rem .6rem; border-radius: 12px; }
body.compact-view #bagged-items { height: 26px; }
body.compact-view .bag-pip { width: 12px; height: 20px; }

@media (max-width: 540px) {
  .view-toolbar { flex-wrap: wrap; }
  .view-toolbar small { width: 100%; margin-left: 0; }
  body.compact-view .game-header { min-height: 46px; padding: .4rem .55rem; }
  body.compact-view .brand-mark { width: 30px; height: 30px; }
  body.compact-view .sound-button { padding: .42rem .4rem; font-size: .5rem; }
  body.compact-view .view-toolbar { flex-wrap: nowrap; }
  body.compact-view .register { width: 100%; }
  body.compact-view .overlay-card { max-height: calc(100vh - 1.2rem); overflow-y: auto; padding: 1.3rem; }
  body.compact-view .overlay-card h1 { font-size: 3.2rem; }
  body.compact-view .overlay-card dl { grid-template-columns: 1fr 1fr; margin: 1rem 0; }
  body.compact-view .overlay-card dl div { padding: .65rem; }
}

/* Deterministic catalog state used for visual QA of every scannable product. */
body.grocery-qa { min-height: 100vh; background: #f5efe5; color: var(--ink); }
body.grocery-qa > .game-header,
body.grocery-qa > .game-shell,
body.grocery-qa > .game-overlay { display: none !important; }
.grocery-qa-board { width: min(1500px, 100%); margin: 0 auto; padding: clamp(1rem, 3vw, 3rem); }
.grocery-qa-board > header { margin-bottom: 1.5rem; padding: clamp(1.2rem, 3vw, 2.25rem); border: 1px solid rgba(7,26,50,.15); border-top: 8px solid #ff6e68; background: #fffaf2; }
.grocery-qa-board > header span { color: #bd454e; font: 700 .68rem var(--mono); letter-spacing: .12em; }
.grocery-qa-board > header h1 { margin: .45rem 0 .25rem; font-size: clamp(2rem, 5vw, 4rem); line-height: 1; letter-spacing: -.04em; }
.grocery-qa-board > header p { margin: 0; color: #667386; font: 500 .72rem var(--mono); }
.grocery-qa-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.65rem, 1.5vw, 1.15rem); }
.grocery-qa-grid article { min-width: 0; padding: clamp(.65rem, 1.5vw, 1rem); border: 1px solid rgba(7,26,50,.14); border-radius: 18px; background: #fffaf2; box-shadow: 0 5px 0 rgba(7,26,50,.08); }
.grocery-qa-grid article > div { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 12px; background: #d9d2c5; overflow: hidden; }
.grocery-qa-grid img { display: block; width: 92%; height: 92%; object-fit: contain; }
.grocery-qa-grid strong { display: block; margin-top: .7rem; font-size: .9rem; }
.grocery-qa-grid small { display: block; margin-top: .15rem; color: #7b6870; font: 500 .58rem var(--mono); }

@media (max-width: 900px) {
  .grocery-qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .grocery-qa-board { padding: .6rem; }
  .grocery-qa-board > header { margin-bottom: .6rem; }
  .grocery-qa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .grocery-qa-grid article { padding: .45rem; border-radius: 12px; }
  .grocery-qa-grid article > div { border-radius: 8px; }
  .grocery-qa-grid strong { font-size: .72rem; }
  .grocery-qa-grid small { font-size: .46rem; }
}

/* Illustrated Signal Checkout interface: recovered production artwork with live controls. */
.hud {
  position: sticky;
  top: 0;
  z-index: 15;
  height: clamp(126px, 18vw, 210px);
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: center;
  gap: 1.2%;
  padding: 8.5% 8.3% 4.2%;
  border: 0;
  background: transparent url("assets/signal-checkout-hud-bar.png") center / 100% 100% no-repeat;
  box-shadow: none;
}
.hud > div,
body.compact-view .hud > div {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  text-align: center;
}
.hud span {
  margin: 0;
  color: #bd4b4e;
  font-size: clamp(.45rem, 1vw, .68rem);
  letter-spacing: .07em;
}
.hud strong,
.hud .timer strong,
body.compact-view .hud strong {
  color: #102749;
  font-size: clamp(.9rem, 2.1vw, 1.8rem);
  line-height: 1.05;
}

.register,
body.compact-view .register {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1672 / 941;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/signal-checkout-keypad-panel-labeled.png") center / 100% 100% no-repeat;
  box-shadow: none;
  color: #102749;
}
.register-top,
body.compact-view .register-top {
  position: absolute;
  top: 13.5%;
  left: 8.5%;
  z-index: 2;
  width: 47%;
  min-height: 0;
  padding: 0;
}
.register-brand { gap: .55rem; }
.register-avatar,
body.compact-view .register-avatar {
  width: clamp(28px, 4.4vw, 48px);
  height: clamp(28px, 4.4vw, 48px);
  border: 2px solid #fff8df;
  box-shadow: 0 2px 0 #e45d5f;
}
.register-label,
body.compact-view .register-label { color: #bd4b4e; font-size: clamp(.42rem, .85vw, .62rem); }
.register-top strong,
body.compact-view .register-top strong { color: #102749; font-size: clamp(.62rem, 1.45vw, 1rem); }
.status-light { width: clamp(8px, 1.2vw, 14px); height: clamp(8px, 1.2vw, 14px); }
.display-panel,
body.compact-view .display-panel {
  position: absolute;
  top: 28.5%;
  left: 8%;
  width: 48%;
  height: 48.5%;
  min-height: 0;
  padding: 2.4%;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: transparent;
  box-shadow: none;
}
.display-panel > span { color: #bd4b4e; font-size: clamp(.42rem, .8vw, .62rem); }
.display-panel output,
body.compact-view .display-panel output {
  margin: 1.5% 0;
  color: #102749;
  font-size: clamp(1.2rem, 4.7vw, 3.4rem);
  line-height: 1;
}
.display-panel p,
body.compact-view .display-panel p {
  min-height: 0;
  color: #364e67;
  font-size: clamp(.45rem, 1vw, .72rem);
  line-height: 1.25;
}
.keypad,
body.compact-view .keypad {
  position: absolute;
  top: 26.5%;
  left: 58.6%;
  width: 35.6%;
  height: 53.5%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(0, 1fr));
  gap: 3.5% 3%;
  margin: 0;
}
.keypad button,
.keypad button:nth-child(3n + 2),
.keypad .key-clear,
.keypad .key-scan,
body.compact-view .keypad button {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: #102749;
  font-size: clamp(.62rem, 1.8vw, 1.25rem);
}
.keypad .key-clear,
.keypad .key-scan,
body.compact-view .keypad .key-clear,
body.compact-view .keypad .key-scan { color: transparent; font-size: clamp(.36rem, .82vw, .64rem); }
.keypad button:hover { background: rgba(255,255,255,.34); }
.keypad button:active { transform: translateY(2px); box-shadow: none; }
.keyboard-note,
body.compact-view .keyboard-note { display: none; }

.bagging-area,
body.compact-view .bagging-area {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  aspect-ratio: 2206 / 713;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent url("assets/signal-checkout-bagging-tray.png") center / 100% 100% no-repeat;
}
.bagging-area > span {
  position: absolute;
  top: 20%;
  left: 42%;
  width: 16%;
  color: #bd4b4e;
  text-align: center;
  font-size: clamp(.42rem, .9vw, .65rem);
}
#bagged-items,
body.compact-view #bagged-items {
  position: absolute;
  top: 38%;
  right: 25%;
  bottom: 22%;
  left: 25%;
  height: auto;
  justify-content: center;
}
.bag-pip { border-radius: 5px 5px 2px 2px; }

.game-overlay {
  overflow: auto;
  padding: clamp(.45rem, 2vw, 1.2rem);
  background: rgba(3, 13, 26, .91);
  backdrop-filter: blur(8px);
}
.start-shell,
.result-shell {
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  width: min(92vw, 68vh, 720px);
  aspect-ratio: 1122 / 1402;
  color: #102749;
}
.result-shell::before {
  content: "";
  position: absolute;
  inset: 7.5% 6.5%;
  z-index: 0;
  border: clamp(3px, .6vw, 6px) solid #102749;
  border-radius: 7%;
  background: linear-gradient(180deg, rgba(255, 249, 227, .99), rgba(255, 239, 205, .99));
  box-shadow: 0 10px 0 rgba(189, 75, 78, .72);
}
.start-shell-art,
.result-shell-art {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.start-shell-overlay,
.result-shell-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.result-shell-overlay { z-index: 10; }
.result-shell-art.asset-fallback { opacity: 0; }
.start-shell h1 {
  position: absolute;
  top: 11.15%;
  left: 15%;
  z-index: 2;
  width: 70%;
  margin: 0;
  color: #102749;
  text-align: center;
  font-size: clamp(1.15rem, 4.2vw, 2.35rem);
  line-height: 1;
  letter-spacing: -.035em;
}
.start-panel {
  position: absolute;
  top: 20.8%;
  left: 13.2%;
  z-index: 2;
  display: flex;
  width: 73.6%;
  height: 61.5%;
  flex-direction: column;
  justify-content: flex-start;
  gap: clamp(.22rem, .8vw, .55rem);
  padding: clamp(.52rem, 2vw, 1.1rem);
  border: clamp(2px, .45vw, 4px) solid #102749;
  border-radius: clamp(12px, 2vw, 20px);
  background: rgba(255, 249, 227, .97);
  box-shadow: 0 5px 0 rgba(228, 93, 95, .8);
}
.start-panel .panel-label {
  color: #bd4b4e;
  text-align: center;
  font-size: clamp(.38rem, 1.15vw, .62rem);
  font-weight: 700;
}
.start-copy {
  margin: 0;
  color: #42556a;
  text-align: center;
  font-size: clamp(.55rem, 1.65vw, .9rem);
  line-height: 1.25;
}
.start-panel .player-name-field,
.start-panel .start-view-choice { margin: 0; }
.start-panel .player-name-field span,
.start-panel .start-view-choice > span {
  margin: 0 0 .2rem;
  color: #bd4b4e;
  font-size: clamp(.4rem, 1.1vw, .62rem);
}
.start-panel .player-name-field { margin-top: clamp(.1rem, .45vw, .3rem); }
.start-panel .player-name-field input {
  min-height: clamp(30px, 6vw, 44px);
  padding: .38rem .6rem;
  border: 2px solid #102749;
  border-radius: clamp(8px, 1.5vw, 14px);
  background: #fffef7;
  font-size: clamp(.66rem, 1.8vw, 1rem);
}
.start-panel .start-view-choice {
  padding: 0;
  border: 0;
  background: transparent;
}
.start-panel .start-view-choice > div { gap: clamp(.25rem, .7vw, .5rem); }
.start-panel .start-view-choice button {
  min-height: clamp(28px, 5.5vw, 42px);
  padding: .2rem .35rem;
  border: 2px solid #102749;
  border-radius: clamp(8px, 1.5vw, 14px);
  background: #fff8df;
  color: #102749;
  font-size: clamp(.52rem, 1.5vw, .82rem);
}
.start-panel .start-view-choice button.selected { border-color: #bd4b4e; background: #ff7b72; color: #fff; }
.start-panel dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0;
  border: 2px solid #102749;
  border-radius: clamp(8px, 1.5vw, 14px);
  overflow: hidden;
}
.start-panel dl div { padding: clamp(.22rem, .8vw, .5rem); border: 0; }
.start-panel dl div + div { border-left: 2px solid #102749; }
.start-panel dt { color: #7b6570; font-size: clamp(.36rem, .95vw, .55rem); }
.start-panel dd { margin: .08rem 0 0; color: #102749; font-size: clamp(.55rem, 1.55vw, .9rem); }
.start-panel #start-button {
  min-height: clamp(32px, 6vw, 46px);
  border: 2px solid #a73e46;
  border-radius: clamp(9px, 1.6vw, 15px);
  background: #ff6f68;
  color: #fff;
  font-size: clamp(.68rem, 1.9vw, 1rem);
  box-shadow: 0 3px 0 #a73e46;
}
.start-panel #start-button:hover { background: #ff8179; }
.start-panel > a {
  margin-top: auto;
  margin-bottom: clamp(.12rem, .6vw, .4rem);
  color: #102749;
  text-align: center;
  font-size: clamp(.48rem, 1.25vw, .72rem);
  text-underline-offset: .2rem;
}

.result-shell h2 {
  position: absolute;
  top: 33.8%;
  left: 17%;
  z-index: 2;
  display: grid;
  width: 66%;
  height: 7.1%;
  place-items: center;
  margin: 0;
  color: #102749;
  text-align: center;
  font-size: clamp(1.65rem, 6.5vw, 2.4rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1;
}
.result-shell .final-grid {
  position: absolute;
  top: 45.55%;
  left: 10.8%;
  z-index: 2;
  display: grid;
  width: 80.2%;
  height: 20.35%;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18% 5.5%;
  margin: 0;
  border: 0;
}
.result-shell .final-grid div {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  padding: 4% 7%;
  border: 0;
}
.result-shell .final-grid span { color: #7b6570; font-size: clamp(.36rem, 1.05vw, .58rem); }
.result-shell .final-grid strong {
  margin-top: 2%;
  color: #102749;
  font-size: clamp(.8rem, 2.8vw, 1.55rem);
}
.result-shell #record-message {
  position: absolute;
  top: 69.85%;
  left: 11.4%;
  z-index: 2;
  display: grid;
  width: 77.2%;
  height: 8.35%;
  place-items: center;
  margin: 0;
  color: #42556a;
  text-align: center;
  font-size: clamp(1rem, 4.1vw, 1.25rem);
  font-weight: 600;
  text-transform: uppercase;
}
.result-actions {
  position: absolute;
  top: 81.6%;
  left: 13.3%;
  z-index: 2;
  display: grid;
  width: 73.5%;
  height: 8.8%;
  grid-template-columns: 1fr 1fr;
  gap: 3%;
}
.result-actions button,
.result-actions a {
  box-sizing: border-box;
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 0 4%;
  border: 0;
  border-radius: clamp(8px, 1.4vw, 14px);
  background: transparent;
  color: #102749;
  text-align: center;
  text-decoration: none;
  font: 800 clamp(.84rem, 3.2vw, 1rem)/1 var(--sans);
  text-transform: uppercase;
}
.result-actions button:hover,
.result-actions a:hover { background: rgba(255,255,255,.34); }

@media (max-width: 720px) {
  .hud { position: sticky; height: clamp(112px, 31vw, 142px); padding-top: 14%; padding-bottom: 6.5%; }
  .hud span { font-size: clamp(.34rem, 1.65vw, .5rem); letter-spacing: .02em; }
  .hud strong,
  .hud .timer strong { font-size: clamp(.72rem, 4vw, 1.1rem); }
  .checkout-floor { gap: .25rem; padding: .45rem; }
  .market-sign { margin: -.45rem -.45rem 0; }
  .register-label { display: none; }
  .register-avatar { width: 26px; height: 26px; }
  .register-top strong { font-size: clamp(.52rem, 2.4vw, .78rem); }
  .display-panel p { font-size: clamp(.37rem, 1.8vw, .58rem); }
  .bagging-area > span { top: 16%; }
}

@media (max-width: 420px) {
  .start-shell,
  .result-shell { width: min(96vw, 72vh); }
  .start-panel { gap: .18rem; padding: .48rem; }
  .start-copy { font-size: clamp(.5rem, 2.65vw, .66rem); }
  .start-panel .player-name-field input { min-height: 28px; }
  .start-panel .start-view-choice button { min-height: 27px; }
  .start-panel #start-button { min-height: 30px; }
  body.compact-view .overlay-card { overflow: visible; }
}

/* Mobile gameplay repair: every illustrated frame owns its live window, and the
   transparent foreground artwork is always the final layer. */
.hud,
body.compact-view .hud {
  position: sticky;
  top: 0;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2149 / 732;
  padding: 0;
  overflow: visible;
  background: transparent url("assets/signal-checkout-hud-bar.png") center / 100% 100% no-repeat;
}
.hud > div,
body.compact-view .hud > div {
  position: absolute;
  top: 47.5%;
  display: flex;
  width: 15.2%;
  height: 26%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: translateY(-3%);
}
.hud > div:nth-child(1) { left: 8.2%; }
.hud > div:nth-child(2) { left: 25.2%; }
.hud > div:nth-child(3) { left: 42.1%; }
.hud > div:nth-child(4) { left: 59%; }
.hud > div:nth-child(5) { left: 75.9%; }
.hud span,
body.compact-view .hud span {
  margin: 0;
  white-space: nowrap;
  font-size: clamp(.34rem, .95vw, .62rem);
  line-height: 1;
  letter-spacing: .035em;
}
.hud strong,
.hud .timer strong,
body.compact-view .hud strong {
  margin-top: clamp(1px, .2vw, 3px);
  font-size: clamp(.74rem, 2vw, 1.45rem);
  line-height: .9;
}

.belt-wrap,
body.compact-view .belt-wrap {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 2206 / 713;
  filter: drop-shadow(0 12px 15px rgba(7,26,50,.16));
}
.belt-top,
body.compact-view .belt-top {
  position: absolute;
  top: 31.5%;
  left: 6.1%;
  z-index: 1;
  width: 87.8%;
  height: 41.8%;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: #243653;
}
.belt-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.belt-frame-overlay img {
  display: block;
  width: 100%;
  height: 100%;
}
.belt-base { display: none; }

.bagging-area,
body.compact-view .bagging-area {
  isolation: isolate;
  background: transparent url("assets/signal-checkout-bagging-tray.png") center / 100% 100% no-repeat;
}
.bagging-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#bagged-items,
body.compact-view #bagged-items { z-index: 2; }

.register,
body.compact-view .register {
  isolation: isolate;
  background: transparent;
}
.register-art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.register-art img {
  display: block;
  width: 100%;
  height: 100%;
}
.register-art-base { z-index: 1; }
.register-art-overlay { z-index: 4; }
.register-nameplate { display: none; }
.register-top,
body.compact-view .register-top {
  top: 17.5%;
  left: 11%;
  z-index: 2;
  width: 43%;
  height: 7%;
  align-items: center;
}
.register-avatar,
.register-label { display: none; }
.register-brand,
.register-brand > div { width: 100%; }
.register-top strong,
body.compact-view .register-top strong {
  margin: 0;
  text-align: center;
}
.status-light { display: none; }
.display-panel,
body.compact-view .display-panel,
.keypad,
body.compact-view .keypad { z-index: 2; }
.keypad button,
.keypad button:nth-child(3n + 2),
.keypad .key-clear,
.keypad .key-scan,
body.compact-view .keypad button,
body.compact-view .keypad .key-clear,
body.compact-view .keypad .key-scan {
  color: transparent;
  text-shadow: none;
}

@media (max-width: 720px) {
  .register-nameplate {
    position: absolute;
    top: 6.5%;
    left: 31%;
    z-index: 5;
    display: block;
    width: 38%;
    height: 6.3%;
    pointer-events: none;
  }
  .hud,
  body.compact-view .hud {
    height: auto;
    padding: 0;
  }
  .hud > div,
  body.compact-view .hud > div { top: 40%; height: 25%; }
  .hud span,
  body.compact-view .hud span { font-size: clamp(.32rem, 1.45vw, .42rem); }
  .hud strong,
  .hud .timer strong,
  body.compact-view .hud strong { font-size: clamp(.72rem, 3.6vw, 1rem); }

  .belt-wrap,
  body.compact-view .belt-wrap {
    aspect-ratio: 1672 / 941;
    filter: none;
  }
  .belt-top,
  body.compact-view .belt-top {
    top: 24.5%;
    left: 6.8%;
    width: 86.3%;
    height: 56.5%;
    border-radius: 8px;
  }
  body.compact-view .grocery {
    bottom: 4%;
    width: clamp(72px, 22vw, 94px);
  }
  body.compact-view .grocery-art { height: clamp(88px, 25vw, 108px); }
  body.compact-view .grocery[data-grocery="citrus-sparkle"] .grocery-art img {
    width: 100%;
    max-width: none;
    height: 100%;
    transform: none;
  }
  body.compact-view .scanner-zone span { top: .35rem; }

  .bagging-area,
  body.compact-view .bagging-area { margin-top: -.15rem; }

  .register,
  body.compact-view .register {
    width: min(100%, 500px);
    aspect-ratio: 1189 / 1323;
    justify-self: center;
  }
  .register-top,
  body.compact-view .register-top {
    top: 6.85%;
    left: 32.2%;
    z-index: 6;
    width: 35.6%;
    height: 5.5%;
    padding: 0;
  }
  .register-top strong,
  body.compact-view .register-top strong {
    font-size: clamp(.58rem, 3vw, .86rem);
    line-height: 1;
  }
  .display-panel,
  body.compact-view .display-panel {
    top: 16.1%;
    left: 12%;
    width: 76.4%;
    height: 20.6%;
    padding: 4.5%;
  }
  .display-panel > span { font-size: clamp(.46rem, 2vw, .62rem); }
  .display-panel output,
  body.compact-view .display-panel output {
    margin: 2.5% 0;
    font-size: clamp(1.7rem, 10vw, 2.7rem);
  }
  .display-panel p,
  body.compact-view .display-panel p {
    font-size: clamp(.52rem, 2.25vw, .68rem);
    line-height: 1.3;
  }
  .keypad,
  body.compact-view .keypad {
    top: 40.8%;
    left: 12%;
    width: 76.4%;
    height: 45.7%;
    gap: 3.6% 5.2%;
  }
  .keypad button,
  body.compact-view .keypad button {
    min-height: 44px;
    border-radius: 18px;
  }
}

/* Entry card controls: compact register keys instead of full-width bars. */
.start-panel .start-view-choice > div {
  display: flex;
  justify-content: center;
  gap: clamp(.35rem, 1.25vw, .7rem);
}
.start-panel .start-view-choice button {
  flex: 0 0 clamp(78px, 25%, 112px);
  width: auto;
  min-height: clamp(27px, 4.2vw, 36px);
  padding: .18rem .45rem;
  border: 2px solid #102749;
  border-radius: clamp(7px, 1vw, 10px);
  background: #fff8df;
  color: #102749;
  box-shadow: 0 2px 0 #bd4b4e;
  font-size: clamp(.5rem, 1.25vw, .72rem);
}
.start-panel .start-view-choice button.selected {
  border-color: #102749;
  background: #ff7b72;
  color: #fff;
  box-shadow: 0 2px 0 #8d343c;
}
.start-panel #start-button {
  align-self: center;
  width: clamp(132px, 46%, 190px);
  min-height: clamp(30px, 4.8vw, 40px);
  padding: .25rem .75rem;
  border-radius: clamp(8px, 1.1vw, 11px);
  font-size: clamp(.62rem, 1.45vw, .82rem);
}

@media (max-width: 420px) {
  .start-panel .start-view-choice button {
    flex-basis: 82px;
    min-height: 27px;
    font-size: .56rem;
  }
  .start-panel #start-button {
    width: 138px;
    min-height: 30px;
    font-size: .65rem;
  }
}

/* Gameplay fit and input-readability repair. The active desktop station keeps
   the moving label and keypad inside the same viewport. */
.hud span,
body.compact-view .hud span {
  white-space: normal;
  text-align: center;
  font-size: clamp(.48rem, 1vw, .7rem);
  line-height: 1.05;
}

@media (min-width: 901px) {
  body:not(.compact-view) .game-shell {
    max-width: 1240px;
    padding: clamp(.5rem, 1.5vw, 1rem);
  }
  body:not(.compact-view) .hud {
    width: min(100%, 760px);
    margin: 0 auto;
  }
  body:not(.compact-view) .checkout-art {
    height: clamp(120px, 14vw, 160px);
    aspect-ratio: auto;
  }
  body:not(.compact-view):not(.waiting) .checkout-art,
  body:not(.compact-view):not(.waiting) .instructions {
    display: none;
  }
  body:not(.compact-view) .view-toolbar {
    margin-top: .35rem;
  }
  body:not(.compact-view) .checkout-floor {
    grid-template-columns: minmax(0, 1.15fr) minmax(430px, .85fr);
    grid-template-rows: auto auto auto;
    gap: .65rem 1rem;
    padding: .8rem;
  }
  body:not(.compact-view) .market-sign {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  body:not(.compact-view) .belt-wrap {
    grid-column: 1;
    grid-row: 2;
  }
  body:not(.compact-view) .bagging-area {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }
  body:not(.compact-view) .register {
    grid-column: 2;
    grid-row: 2 / 4;
    align-self: center;
  }
}

@media (max-width: 720px) {
  .hud span,
  body.compact-view .hud span {
    font-size: clamp(.42rem, 1.75vw, .56rem);
    line-height: 1.02;
  }
}

/* Active mobile play is a fixed-height game stage. HUD, conveyor, and register
   share the visible viewport; auxiliary controls and the later-level bagging
   rail leave the stage once the shift begins. */
@media (max-width: 720px) {
  body.compact-view:not(.waiting) {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    background-color: #f3dfc5;
    background-image:
      linear-gradient(rgba(255, 244, 230, .64), rgba(255, 244, 230, .64)),
      url("assets/signal-checkout-store-shelves.webp");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  body.compact-view:not(.waiting) .game-header,
  body.compact-view:not(.waiting) .view-toolbar,
  body.compact-view:not(.waiting) .instructions,
  body.compact-view:not(.waiting) .bagging-area {
    display: none;
  }

  body.compact-view:not(.waiting) .game-shell {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    touch-action: manipulation;
  }

  body.compact-view:not(.waiting) .hud {
    position: relative;
    top: auto;
    flex: 0 0 34.06vw;
    height: 34.06vw;
    aspect-ratio: auto;
  }

  body.compact-view:not(.waiting) .hud > div {
    top: 47.5%;
    width: 14.4%;
    height: 22%;
    overflow: hidden;
    transform: none;
  }

  body.compact-view:not(.waiting) .hud > div:nth-child(1) { left: 8.6%; }
  body.compact-view:not(.waiting) .hud > div:nth-child(2) { left: 25.5%; }
  body.compact-view:not(.waiting) .hud > div:nth-child(3) { left: 42.4%; }
  body.compact-view:not(.waiting) .hud > div:nth-child(4) { left: 59.3%; }
  body.compact-view:not(.waiting) .hud > div:nth-child(5) { left: 76.2%; }

  body.compact-view:not(.waiting) .hud span {
    width: 100%;
    overflow: hidden;
    font-size: clamp(.31rem, 1.3vw, .39rem);
    line-height: 1;
  }

  body.compact-view:not(.waiting) .hud strong,
  body.compact-view:not(.waiting) .hud .timer strong {
    width: 100%;
    margin-top: 1px;
    overflow: hidden;
    font-size: clamp(.66rem, 3.05vw, .86rem);
    line-height: 1;
    letter-spacing: -.03em;
  }

  body.compact-view:not(.waiting) .hud > div:first-child strong {
    font-size: clamp(.58rem, 2.65vw, .74rem);
    letter-spacing: -.06em;
  }

  body.compact-view:not(.waiting) .checkout-floor {
    display: grid;
    width: 100%;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    justify-items: center;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
  }

  body.compact-view:not(.waiting) .belt-wrap {
    grid-row: 1;
    width: 100%;
    margin: 0;
    touch-action: manipulation;
  }

  body.compact-view:not(.waiting) .register {
    grid-row: 2;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 1189 / 1323;
    align-self: start;
    justify-self: center;
    margin: 0;
    overflow: hidden;
    touch-action: manipulation;
  }

  body.compact-view:not(.waiting) .register-top {
    top: 6.85%;
    left: 32.2%;
    width: 35.6%;
    height: 5.5%;
  }

  body.compact-view:not(.waiting) .display-panel {
    top: 14.7%;
    left: 9.7%;
    display: grid;
    width: 80.6%;
    height: 11%;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 3%;
    padding: 1.2% 2.6%;
  }

  body.compact-view:not(.waiting) .display-panel > span {
    overflow: hidden;
    font-size: clamp(.34rem, 1.45vw, .52rem);
    line-height: 1.1;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.compact-view:not(.waiting) .display-panel output {
    margin: 0;
    font-size: clamp(1.55rem, 8.5vw, 2.65rem);
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    white-space: nowrap;
  }

  body.compact-view:not(.waiting) .display-panel p {
    min-width: 0;
    overflow: hidden;
    font-size: clamp(.3rem, 1.3vw, .48rem);
    line-height: 1.15;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.compact-view:not(.waiting) .keypad {
    top: 29.2%;
    left: 8.2%;
    width: 83.6%;
    height: 59.7%;
    gap: 2.3% 2.8%;
    touch-action: manipulation;
  }

  body.compact-view:not(.waiting) .keypad button {
    min-height: 0;
    border-radius: 18px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  body.compact-view:not(.waiting) .keypad button:active {
    background: rgba(255, 111, 104, .2);
  }
}

@media (max-width: 720px) and (min-aspect-ratio: 1 / 2) {
  body.compact-view:not(.waiting) .register {
    width: auto;
    height: 100%;
  }
}

/* Desktop station repair. Every selector in this block begins above the phone
   breakpoint, leaving the stable compact layout untouched. */
@media (min-width: 901px) {
  body.overlay-open { overflow: hidden; }

  body:not(.compact-view):not(.waiting) .game-shell {
    min-height: calc(100vh - 76px);
    padding-top: .35rem;
    padding-bottom: .6rem;
  }
  body:not(.compact-view):not(.waiting) .hud {
    width: min(100%, 575px);
  }
  body:not(.compact-view):not(.waiting) .view-toolbar {
    min-height: 38px;
    margin: .2rem 0 .35rem;
    padding: .3rem .7rem;
  }
  body:not(.compact-view):not(.waiting) .checkout-floor {
    grid-template-columns: minmax(0, 1fr) minmax(460px, .95fr);
    grid-template-rows: 42px minmax(0, 1fr);
    height: clamp(350px, calc(100vh - 370px), 455px);
    min-height: 350px;
    gap: .3rem .6rem;
    padding: .55rem;
    overflow: visible;
    border: 1px solid rgba(7, 26, 50, .22);
    border-radius: 0 0 18px 18px;
    background: linear-gradient(180deg, #fff0dc 0 76%, #ecd9b8 76% 100%);
    box-shadow: 0 18px 35px rgba(2, 13, 28, .22);
  }
  body:not(.compact-view):not(.waiting) .market-sign {
    grid-column: 1 / -1;
    grid-row: 1;
    height: 42px;
    margin: -.55rem -.55rem 0;
    padding: 0 1.1rem;
    border-radius: 0;
  }
  body:not(.compact-view):not(.waiting) .market-sign span:first-child {
    color: #fff0dc;
  }
  body:not(.compact-view):not(.waiting) .belt-wrap {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    width: 100%;
    margin-top: .15rem;
  }
  body:not(.compact-view):not(.waiting) .belt-top {
    z-index: auto;
    overflow: hidden;
  }
  body:not(.compact-view):not(.waiting) #grocery-layer {
    overflow: visible;
  }
  body:not(.compact-view):not(.waiting) .grocery {
    z-index: 5;
    bottom: 0;
    width: clamp(64px, 5.8vw, 84px);
  }
  body:not(.compact-view):not(.waiting) .grocery-art {
    height: clamp(42px, 3.6vw, 48px);
  }
  body:not(.compact-view):not(.waiting) .grocery-art img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 7px 3px rgba(5, 20, 38, .2));
  }
  body:not(.compact-view):not(.waiting) .price-tag {
    min-width: 54px;
    margin-top: -.1rem;
    padding: .16rem .34rem;
    font-size: .72rem;
    line-height: 1;
  }
  body:not(.compact-view):not(.waiting) .item-name {
    overflow: visible;
    margin-top: .14rem;
    font-size: .43rem;
    line-height: 1.1;
    letter-spacing: .02em;
    white-space: nowrap;
  }
  body:not(.compact-view):not(.waiting) .bagging-area {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    width: 100%;
    margin: 0;
  }
  body:not(.compact-view):not(.waiting) #bagged-items {
    top: 31%;
    right: 18%;
    bottom: 15%;
    left: 18%;
    z-index: 5;
    display: flex;
    align-items: end;
    justify-content: center;
    gap: .2rem;
    overflow: visible;
  }
  body:not(.compact-view):not(.waiting) .bag-pip {
    width: clamp(50px, 4.8vw, 68px);
    height: clamp(50px, 4.8vw, 68px);
    border: 0;
    background: transparent !important;
  }
  body:not(.compact-view):not(.waiting) .bag-pip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 2px rgba(5, 20, 38, .22));
  }
  body:not(.compact-view):not(.waiting) .register {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    width: 100%;
    margin-top: -1.5rem;
  }
  body:not(.compact-view):not(.waiting) .register-top {
    top: 20.4%;
    left: 12%;
    width: 41%;
    height: 6%;
  }
  body:not(.compact-view):not(.waiting) .register-top strong {
    overflow: hidden;
    font-size: clamp(.62rem, .92vw, .88rem);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body:not(.compact-view):not(.waiting) .keyboard-note {
    position: absolute;
    right: 7%;
    bottom: -1.3rem;
    left: 7%;
    display: block;
    margin: 0;
    color: #5b4938;
    font-size: .55rem;
    letter-spacing: .08em;
  }
}