/* =============================================================================
 * EpicFlex Kiosk — shell styling
 * Portrait first (1080x1920). White / black / ochre. Ochre only ever marks
 * the active thing; nothing decorative is allowed to use it.
 * ========================================================================== */

:root {
  /* Dark by default. The logos are white and ochre on black, so the interface
     is built the same way round instead of fighting them. */
  --paper: #0a0a0b;
  --ink: #f4f1ec;
  --ink-rgb: 244, 241, 236;
  --accent: #b36e32;

  --ink-70: rgba(var(--ink-rgb), 0.70);
  --ink-45: rgba(var(--ink-rgb), 0.42);
  --ink-16: rgba(var(--ink-rgb), 0.18);
  --ink-08: rgba(var(--ink-rgb), 0.08);

  --rule: 1px solid var(--ink-16);
  --pad: clamp(20px, 3.2vw, 52px);
  --bar-h: clamp(104px, 10.5vh, 190px);

  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step-caption: clamp(11px, 1.05vw, 18px);
  --step-body: clamp(17px, 1.9vw, 34px);
  --step-lead: clamp(22px, 2.6vw, 46px);
  --step-title: clamp(34px, 4.6vw, 82px);
  --step-huge: clamp(120px, 26vw, 460px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  overscroll-behavior: none;
  cursor: none;
}

body.show-cursor { cursor: default; }

#kiosk {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#stage {
  position: absolute;
  inset: 0;
}

/* --------------------------------------------------------------- chrome */

#chrome {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
}

#delete-hint {
  position: absolute;
  right: var(--pad);
  bottom: var(--pad);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--step-caption);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-70);
  background: rgba(10, 10, 11, 0.88);
  border: var(--rule);
  padding: 10px 12px;
  animation: drift 900s linear infinite;
}

#delete-hint[hidden] { display: none; }

#delete-qr {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
}
#delete-qr svg { display: block; width: 100%; height: 100%; }

@keyframes drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(7px, 4px); }
  50%  { transform: translate(2px, 9px); }
  75%  { transform: translate(-6px, 3px); }
  100% { transform: translate(0, 0); }
}

#debug {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 60;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-45);
  background: rgba(10, 10, 11, 0.94);
  border: var(--rule);
  padding: 8px 10px;
  white-space: pre;
  pointer-events: none;
  display: none;
}
#debug.on { display: block; }

/* --------------------------------------------------------------- views */

.view {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  opacity: 0;
  animation: view-in 260ms ease forwards;
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .view { animation: none; opacity: 1; }
  #wordmark, #delete-hint { animation: none; }
}

/* --------------------------------------------------------------- attract */

.attract-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--bar-h);
  opacity: 0;
  transition: opacity var(--fade, 900ms) ease;
  overflow: hidden;
  /* deliberately not var(--ink): that token is the *text* colour, which the
     dark palette made cream. Behind a photo the surround has to be black. */
  background: #000;
  will-change: opacity;
}
.attract-layer.visible { opacity: 1; }

/* Blurred, darkened copy of the same frame. Fills the 9:16 screen behind
   material that is 3:4 or 4:5 without cropping anything off the real image. */
.layer-backdrop {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(48px) saturate(1.2) brightness(0.32);
  transform: scale(1.15);
}

.layer-media {
  position: absolute;
  inset: 0;
}
/* Absolute, not a centred grid item. A percentage height on a non-stretched
   grid item does not resolve against the grid area — it silently falls back
   to auto and the element takes its aspect-ratio height instead. Measured on
   the diagnostics page: a 1726x258 container held a 1726x2301 image. Against
   a positioned parent, inset:0 is definite unconditionally. */
.layer-media img,
.layer-media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.layer-media .fit-cover {
  object-fit: cover;
}

/* Same class as the blurred fill, therefore the same layout rules that have
   worked since the first version — with the blur and the overscan turned back
   off. This carries the sharp picture. */
.layer-photo {
  inset: 0;
  filter: none;
  transform: none;
  background-size: contain;
  background-repeat: no-repeat;
}

.attract-layer.ken .layer-photo {
  animation: kenburns var(--kb, 9000ms) ease-out forwards;
}
.attract-layer.ken .layer-backdrop {
  animation: backdrop-drift var(--kb, 9000ms) ease-out forwards;
}

@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.035) translate(-0.5%, -0.6%); }
}
@keyframes backdrop-drift {
  from { transform: scale(1.15) translate(0, 0); }
  to   { transform: scale(1.24) translate(-1.4%, -1.2%); }
}

.attract-empty {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--bar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  padding: var(--pad);
}
/* display:flex above beats the browser's own [hidden] { display: none } —
   equal specificity, author sheet wins. Without this line the empty state
   stays on screen behind a running slide. */
.attract-empty[hidden] { display: none; }
.attract-empty .glyph {
  width: 96px;
  height: 96px;
  border: 3px solid var(--ink-16);
  border-radius: 50%;
  position: relative;
}
.attract-empty .glyph::after {
  content: "";
  position: absolute;
  inset: 26px;
  border: 3px solid var(--ink-16);
  border-radius: 50%;
}
.attract-empty p {
  margin: 0;
  font-size: var(--step-body);
  color: var(--ink-45);
  max-width: 22ch;
}

.attract-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-h);
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
  padding: 0 var(--pad);
  background: var(--paper);
  border-top: 3px solid var(--ink);
}
.attract-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.attract-bar .headline {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 58px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.attract-bar .sub {
  margin: 0;
  font-size: var(--step-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.attract-pulse {
  width: clamp(52px, 5.2vw, 92px);
  height: clamp(52px, 5.2vw, 92px);
  flex: 0 0 auto;
  border-radius: 50%;
  border: 4px solid var(--accent);
  display: grid;
  place-items: center;
  animation: pulse 2400ms ease-in-out infinite;
}
.attract-pulse .dot {
  width: 34%;
  height: 34%;
  border-radius: 50%;
  background: var(--accent);
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.09); opacity: 0.72; }
}
@media (prefers-reduced-motion: reduce) {
  .attract-pulse { animation: none; }
  .attract-layer.ken .layer-photo,
  .attract-layer.ken .layer-backdrop { animation: none; }
}

/* --------------------------------------------------------------- panels */

.panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: calc(var(--pad) * 2) var(--pad) var(--pad);
  gap: var(--pad);
}

.panel-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.eyebrow {
  font-size: var(--step-caption);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.panel h1 {
  margin: 0;
  font-size: var(--step-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.0;
}
.panel .lead {
  margin: 0;
  font-size: var(--step-lead);
  line-height: 1.42;
  color: var(--ink-70);
  max-width: 26ch;
}

.consent-body {
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: var(--pad) 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.consent-body p {
  margin: 0;
  font-size: var(--step-body);
  line-height: 1.5;
}
.consent-meta {
  font-family: var(--font-mono);
  font-size: var(--step-caption);
  color: var(--ink-45);
  letter-spacing: 0.04em;
}

.spacer { flex: 1; }

/* --------------------------------------------------------------- buttons */

.actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.actions.row {
  flex-direction: row;
  flex-wrap: wrap;
}
.actions.row > * { flex: 1 1 0; }

.btn {
  appearance: none;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 26px 28px;
  min-height: 96px;
  cursor: pointer;
  transition: transform 90ms ease, background-color 120ms ease, border-color 120ms ease;
}
.btn:active { transform: scale(0.985); }
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}
.btn.quiet {
  border-color: var(--ink-16);
  color: var(--ink-70);
  font-weight: 600;
  min-height: 76px;
  font-size: var(--step-body);
  padding: 18px 24px;
}
.btn[disabled] { opacity: 0.4; pointer-events: none; }

/* --------------------------------------------------------------- camera */

.cam-wrap {
  position: absolute;
  inset: 0;
  background: var(--ink);
  overflow: hidden;
}
.cam-wrap video,
.cam-wrap img.shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cam-wrap video.mirror { transform: scaleX(-1); }

.cam-frame {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 14px solid var(--paper);
}
.cam-frame::after {
  content: attr(data-caption);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 96px;
  background: var(--paper);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-size: var(--step-caption);
  font-weight: 700;
  letter-spacing: 0.34em;
}

.cam-hint {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: calc(var(--pad) * 2);
  text-align: center;
  color: var(--paper);
  font-size: var(--step-lead);
  font-weight: 700;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
  z-index: 5;
}

.cam-actions {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(var(--pad) + 110px);
  z-index: 6;
}

.countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 8;
  pointer-events: none;
}
.countdown span {
  font-size: var(--step-huge);
  font-weight: 800;
  color: var(--paper);
  line-height: 1;
  text-shadow: 0 6px 60px rgba(0, 0, 0, 0.5);
  animation: tick 900ms ease-out;
}
@keyframes tick {
  from { transform: scale(1.5); opacity: 0; }
  40%  { opacity: 1; }
  to   { transform: scale(1); opacity: 0.9; }
}

.flash {
  position: absolute;
  inset: 0;
  background: #ffffff;
  z-index: 9;
  opacity: 0;
  pointer-events: none;
  animation: flash 320ms ease-out;
}
@keyframes flash {
  from { opacity: 0.95; }
  to   { opacity: 0; }
}

/* --------------------------------------------------------------- picker */

.picker {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  padding: calc(var(--pad) * 1.5) var(--pad) var(--pad);
  gap: 18px;
}
.picker h2 {
  margin: 0;
  font-size: var(--step-title);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.shots {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-content: center;
}
.shot-tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 3px solid var(--ink-16);
  background: var(--ink-08);
  overflow: hidden;
  cursor: pointer;
  padding: 0;
}
.shot-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shot-tile[aria-pressed="true"] { border-color: var(--accent); }
.shot-tile[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 6px solid var(--accent);
}
.shot-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------- done */

.done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: var(--pad);
  text-align: center;
}
.done h2 {
  margin: 0;
  font-size: var(--step-title);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.done p {
  margin: 0;
  font-size: var(--step-body);
  color: var(--ink-70);
  max-width: 24ch;
}
.done .qr {
  width: min(46vw, 420px);
  height: min(46vw, 420px);
  border: var(--rule);
  padding: 14px;
  background: var(--paper);
}
.done .qr svg { display: block; width: 100%; height: 100%; }
.done .exit-note {
  font-family: var(--font-mono);
  font-size: var(--step-caption);
  color: var(--ink-45);
  letter-spacing: 0.06em;
}

.error-box {
  border: 2px solid var(--ink);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.error-box strong { font-size: var(--step-lead); }
.error-box code {
  font-family: var(--font-mono);
  font-size: var(--step-caption);
  color: var(--ink-70);
  word-break: break-all;
}

/* --------------------------------------------------------------- home */

/* Four functions, four logos, fixed positions. The logos carry the wording,
   so the tiles carry nothing else — no label, no number, no icon. */
.panel.home {
  gap: 14px;
  padding: var(--pad);
}

.tiles {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: 14px;
  align-content: stretch;
  overflow: hidden;
}

.tile {
  appearance: none;
  position: relative;
  border: 1px solid var(--ink-16);
  background: #000;
  color: var(--ink);
  font: inherit;
  padding: clamp(14px, 2.4vw, 34px);
  display: grid;
  place-items: center;
  min-height: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 140ms ease, transform 90ms ease;
}
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 0 solid var(--accent);
  transition: border-width 120ms ease;
  pointer-events: none;
}
.tile:active { transform: scale(0.988); }
.tile:active::after { border-width: 3px; }
.tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.tile-logo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.tile-name {
  font-size: clamp(22px, 3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* --------------------------------------------------------------- shop */

.panel.shop { gap: calc(var(--pad) * 0.7); }

.lines {
  flex: 1;
  overflow-y: auto;
  border-top: var(--rule);
  -webkit-overflow-scrolling: touch;
}

.line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(12px, 1.6vw, 22px) 0;
  border-bottom: var(--rule);
}
.line.picked { box-shadow: inset 4px 0 0 var(--accent); padding-left: 14px; }
/* Zusammenfassung vor dem Bestellen: keine Mengen-Buttons, also auch kein
   Platz dafuer reservieren. */
.line.static { gap: 20px; }
.line-text { flex: 1; min-width: 0; }
.line-name {
  font-size: var(--step-body);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.line-note {
  font-size: var(--step-caption);
  color: var(--ink-45);
  margin-top: 3px;
}
.line-price {
  font-family: var(--font-mono);
  font-size: var(--step-body);
  font-weight: 600;
  white-space: nowrap;
}

.qty { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.qty-btn {
  appearance: none;
  width: clamp(48px, 5vw, 76px);
  height: clamp(48px, 5vw, 76px);
  border: 2px solid var(--ink-16);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: var(--step-body);
  font-weight: 700;
  cursor: pointer;
}
.qty-btn:active { background: var(--ink-08); }
.qty-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.qty-value {
  min-width: clamp(38px, 4vw, 60px);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step-body);
  font-weight: 700;
}

.shop-foot { display: flex; flex-direction: column; gap: 14px; }
.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 3px solid var(--ink);
  padding-top: 14px;
}
.total-label {
  font-size: var(--step-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.total-value {
  font-family: var(--font-mono);
  font-size: var(--step-lead);
  font-weight: 700;
}

/* --------------------------------------------------------------- fields */

.fields { flex: 1; display: flex; flex-direction: column; gap: 12px; align-content: start; }
.field {
  appearance: none;
  border: 2px solid var(--ink-16);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  text-align: left;
  padding: clamp(14px, 1.8vw, 22px);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field.active { border-color: var(--accent); }
.field:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.field-label {
  font-size: var(--step-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.field-value {
  font-size: var(--step-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.field-value.empty { color: var(--ink-16); font-weight: 500; }

.kv-box { border: var(--rule); padding: clamp(12px, 1.6vw, 20px); display: flex; flex-direction: column; gap: 8px; }
.kv { display: flex; justify-content: space-between; gap: 16px; }
.kv-key { font-size: var(--step-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); }
.kv-val { font-size: var(--step-body); font-weight: 600; }

/* --------------------------------------------------------------- pickup */

.pickup {
  border: 3px solid var(--ink);
  padding: clamp(18px, 2.6vw, 36px) clamp(28px, 5vw, 64px);
  text-align: center;
}
.pickup-label {
  font-size: var(--step-caption);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: 10px;
}
.pickup-code {
  font-family: var(--font-mono);
  font-size: clamp(56px, 11vw, 180px);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--accent);
}

/* --------------------------------------------------------------- keyboard */

body.osk-open .panel.shop { padding-bottom: 0; }

.osk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: var(--paper);
  border-top: 3px solid var(--ink);
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  display: none;
  flex-direction: column;
  gap: 6px;
}
.osk.on { display: flex; }
.osk-num { align-items: center; }
.osk-num .osk-row { justify-content: center; }

.osk-hint {
  font-family: var(--font-mono);
  font-size: var(--step-caption);
  color: var(--ink-45);
  letter-spacing: 0.16em;
  padding: 2px 0 6px;
}

.osk-row { display: flex; gap: 6px; justify-content: center; }

.osk-key {
  appearance: none;
  flex: 1 1 0;
  min-width: 0;
  min-height: clamp(48px, 6vh, 86px);
  border: 1px solid var(--ink-16);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: clamp(17px, 2vw, 30px);
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}
.osk-num .osk-key { flex: 0 0 clamp(74px, 9vw, 140px); }
.osk-key:active { background: var(--ink-08); }
.osk-key:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.osk-key.space { flex: 3 1 0; }
.osk-key.mod { flex: 1.3 1 0; }
.osk-key.wide { flex: 0 0 clamp(74px, 9vw, 140px); }
.osk-key.blank { visibility: hidden; pointer-events: none; }
.osk-key.on { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.osk-key.done {
  flex: 1.6 1 0;
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
  font-weight: 700;
}

/* The empty state carries two meanings — nothing to show, or nothing reachable.
   They must not look the same. */
.attract-empty .empty-head {
  margin: 0;
  font-size: var(--step-title);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  color: var(--ink);
  max-width: 18ch;
}
.attract-empty .empty-sub {
  margin: 0;
  font-size: var(--step-body);
  color: var(--ink-45);
  max-width: 26ch;
}
.attract-empty.warn .glyph {
  border-color: var(--accent);
  border-radius: 0;
  transform: rotate(45deg);
}
.attract-empty.warn .glyph::after {
  border-color: var(--accent);
  border-radius: 0;
}
.attract-empty.warn .empty-sub {
  font-family: var(--font-mono);
  font-size: var(--step-caption);
  letter-spacing: 0.02em;
  color: var(--ink-70);
  border: var(--rule);
  padding: 10px 14px;
  max-width: 40ch;
}

/* Wordmark rides in the bar. Floating it over the photo needed a blend-mode
   hack that turned it invisible on light backgrounds, and the panels already
   carry the name in their eyebrow — it was showing up twice. */
/* Bildmarke in der Leiste. Hoehe gegen die Leiste gedeckelt, Breite folgt —
   so bleibt sie in jedem Fensterformat gleich gross wie der Menuetext. */
.attract-mark-logo {
  margin-left: auto;
  flex: 0 0 auto;
  display: block;
  height: clamp(26px, 44%, 62px);
  width: auto;
  max-width: 40%;
  object-fit: contain;
  padding-left: 12px;
}

.attract-mark {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--step-caption);
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--ink-45);
  padding-left: 12px;
}

/* Input lock: for half a second after leaving the wall, nothing on the stage
   is clickable. Otherwise the same tap that opens the menu also presses the
   tile that appears under the finger. */
body.input-locked #stage { pointer-events: none; }

/* Flex columns need min-height:0, otherwise a child with overflow-y:auto
   grows to fit its content instead of scrolling — which pushed the shop's
   Weiter/Abbrechen buttons off the bottom of the screen. */
.view,
.panel,
.panel.shop,
.panel.home,
.picker { min-height: 0; }

.panel-head,
.shop-foot,
.consent-body,
.kv-box,
.actions { flex: 0 0 auto; }

.lines,
.shots,
.tiles,
.fields {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

/* A visible edge when there is more below, so nobody assumes the list ends
   where the screen does. */
.lines { position: relative; }

/* --------------------------------------------------------------- embed */

.embed-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--paper);
}
.embed {
  flex: 1;
  width: 100%;
  min-height: 0;
  border: 0;
  display: block;
  background: #000;
}
.embed-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px var(--pad);
  border-top: 3px solid var(--ink);
  background: var(--paper);
}
.embed-label {
  flex: 1;
  font-size: var(--step-caption);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.embed-bar .btn { width: auto; min-height: 64px; padding: 14px 28px; }

/* --------------------------------------------------------------- dark fixes */

/* The QR card was a white sheet; on the dark surface it becomes an inverted
   code, which scanners read just as well. */
.done .qr {
  background: var(--paper);
  border-color: var(--ink-16);
}

/* Photos sit on pure black, not on the page background, so a bright frame
   never bleeds into the surrounding chrome. */
.cam-wrap { background: #000; }
.cam-frame { border-color: #000; }
.cam-frame::after {
  background: #000;
  color: var(--accent);
}

.shot-tile { background: #000; border-color: var(--ink-16); }

.qty-btn { background: transparent; }
.qty-btn:active { background: var(--ink-08); }

.btn { background: transparent; }
.osk { background: var(--paper); }
.osk-key { background: transparent; }
.osk-key:active { background: var(--ink-08); }
.field { background: transparent; }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: var(--ink-16); }
::-webkit-scrollbar-track { background: transparent; }