:root {
  --red: #c8202a; --red-d: #9e141c; --ink: #141414; --ink-2: #1e1e1e; --ink-3: #2a2a2a; --line: #333;
  --cream: #f6d9d6; --text: #f5f1ec; --muted: #a9a29b; --ok: #2fb36b;
  --host-glow: var(--red);
  /* Kiosk is portrait 9:16; on a desktop it's letterboxed. */
  --W: min(100vw, calc(100vh * 9 / 16));
  --u: calc(var(--W) / 108);   /* 1u = 10px on a 1080px-wide kiosk */
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #0a0a0a; color: var(--text); font-family: 'Cairo', system-ui, sans-serif; overflow: hidden; user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
#frame { position: relative; width: var(--W); height: calc(var(--W) * 16 / 9); max-height: 100vh; margin: 0 auto; background: var(--ink); overflow: hidden; }
[dir="ltr"] { font-family: 'Cairo', system-ui, sans-serif; }

.screen { position: absolute; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(calc(var(--u) * 2)); } to { opacity: 1; transform: none; } }

.host { position: relative; }
.host-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.h-arm { transition: opacity .25s; }

/* ---------- attract ---------- */
#attract { align-items: center; justify-content: space-between; padding: calc(var(--u) * 8) calc(var(--u) * 6) calc(var(--u) * 7);
  background: radial-gradient(120% 70% at 50% 40%, #2a0d0f 0%, var(--ink) 60%); }
#attract .logo { width: calc(var(--u) * 52); filter: drop-shadow(0 0 calc(var(--u) * 3) rgba(200,32,42,.5)); }
.attract-host { width: calc(var(--u) * 72); height: calc(var(--u) * 92); }
.attract-host .host { width: 100%; height: 100%; }
.attract-copy { text-align: center; }
.attract-copy h1 { font-size: calc(var(--u) * 9); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.attract-copy p { font-size: calc(var(--u) * 3.4); color: var(--muted); margin: calc(var(--u) * 1) 0 0; }
.lang-pick { display: flex; flex-direction: column; gap: calc(var(--u) * 2.4); width: 100%; align-items: center; }
.big-btn { display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 2); background: var(--red); color: #fff;
  font-size: calc(var(--u) * 4.2); font-weight: 800; padding: calc(var(--u) * 2.6) calc(var(--u) * 8); border-radius: calc(var(--u) * 10);
  min-width: calc(var(--u) * 64); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(200,32,42,.45); transition: transform .12s; }
.big-btn:active { transform: scale(.97); }
.big-btn.ghost { background: transparent; border: calc(var(--u) * .3) solid #555; box-shadow: none; font-size: calc(var(--u) * 3.4); }
.hint { color: var(--muted); font-size: calc(var(--u) * 2.6); margin: 0; animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.mic-ico { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); display: inline-block; background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-2.08A7 7 0 0 0 19 12Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 15a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-2.08A7 7 0 0 0 19 12Z"/></svg>') center/contain no-repeat; }

/* ---------- ordering ---------- */
.stage { position: relative; display: flex; align-items: flex-end; gap: calc(var(--u) * 2); height: calc(var(--u) * 54); padding: calc(var(--u) * 3) calc(var(--u) * 4) 0;
  background: radial-gradient(90% 100% at 75% 70%, #3a1114 0%, var(--ink) 70%); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.stage .host { width: calc(var(--u) * 40); height: calc(var(--u) * 52); flex-shrink: 0; }
.talk { flex: 1; display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); padding-bottom: calc(var(--u) * 4); min-width: 0; }
.bubble { position: relative; background: #fff; color: var(--ink); font-size: calc(var(--u) * 3.3); font-weight: 700; line-height: 1.45;
  padding: calc(var(--u) * 2.4) calc(var(--u) * 3); border-radius: calc(var(--u) * 3.4); min-height: calc(var(--u) * 12); box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(0,0,0,.4); }
.bubble::after { content: ''; position: absolute; bottom: calc(var(--u) * 3); inset-inline-start: calc(var(--u) * -1.6); border: calc(var(--u) * 1.4) solid transparent; border-inline-end-color: #fff; border-inline-start: 0; }
.bubble.thinking { color: #888; }
.bubble .dots i { display: inline-block; width: calc(var(--u) * 1.2); height: calc(var(--u) * 1.2); margin: 0 calc(var(--u) * .4); border-radius: 50%; background: #999; animation: dot 1s infinite; }
.bubble .dots i:nth-child(2) { animation-delay: .15s; } .bubble .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(calc(var(--u) * -1)); background: var(--red); } }
.heard { font-size: calc(var(--u) * 2.6); color: var(--muted); min-height: calc(var(--u) * 3.6); padding-inline-start: calc(var(--u) * 1); }
.heard:not(:empty)::before { content: '“'; } .heard:not(:empty)::after { content: '”'; }
.voice-row { display: flex; align-items: center; gap: calc(var(--u) * 2); }
.mic { position: relative; width: calc(var(--u) * 10); height: calc(var(--u) * 10); border-radius: 50%; background: var(--ink-3); color: #fff; display: grid; place-items: center; }
.mic .mic-ico { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); }
.mic .ring { position: absolute; inset: 0; border-radius: 50%; border: calc(var(--u) * .5) solid var(--red); opacity: 0; }
.mic.listening { background: var(--red); }
.mic.listening .ring { animation: ring 1.2s infinite; }
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.voice-state { font-size: calc(var(--u) * 2.6); color: var(--muted); font-weight: 600; }
.top-tools { position: absolute; top: calc(var(--u) * 2.4); inset-inline-end: calc(var(--u) * 3); display: flex; gap: calc(var(--u) * 1.4); }
.chip { background: var(--ink-3); border: 1px solid #444; padding: calc(var(--u) * .8) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 2.4); font-weight: 700; }

.otype { display: flex; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 4) 0; }
.otype button { flex: 1; padding: calc(var(--u) * 1.6); border-radius: calc(var(--u) * 2); background: var(--ink-2); border: calc(var(--u) * .25) solid var(--line); font-size: calc(var(--u) * 3); font-weight: 700; }
.otype button.on { border-color: var(--red); background: #3a1114; }

.cats { display: flex; gap: calc(var(--u) * 1.4); padding: calc(var(--u) * 2) calc(var(--u) * 4); overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats button { white-space: nowrap; padding: calc(var(--u) * 1.4) calc(var(--u) * 2.8); border-radius: calc(var(--u) * 4); background: var(--ink-2); font-size: calc(var(--u) * 2.8); font-weight: 700; border: 1px solid var(--line); }
.cats button.on { background: var(--red); border-color: var(--red); }

.grid { flex: 1; overflow-y: auto; padding: 0 calc(var(--u) * 4) calc(var(--u) * 4); display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.2); align-content: start; grid-auto-rows: max-content; scroll-behavior: smooth; }
.grid h3 { grid-column: 1 / -1; margin: calc(var(--u) * 2) 0 0; font-size: calc(var(--u) * 3.4); font-weight: 800; }
.card { position: relative; min-height: calc(var(--u) * 34); background: var(--ink-2); border: calc(var(--u) * .25) solid var(--line); border-radius: calc(var(--u) * 2.6); overflow: hidden; text-align: start; display: flex; flex-direction: column; transition: border-color .2s, transform .2s; }
.card:active { transform: scale(.98); }
.card .pic { height: calc(var(--u) * 24); flex-shrink: 0; background: #1d1d1d center/cover no-repeat; display: grid; place-items: center; font-size: calc(var(--u) * 9); }
.card .info { padding: calc(var(--u) * 1.4) calc(var(--u) * 1.8) calc(var(--u) * 1.8); display: flex; flex-direction: column; gap: calc(var(--u) * .4); flex: 1; }
.card .nm { font-size: calc(var(--u) * 2.6); font-weight: 700; line-height: 1.3; }
.card .pr { font-size: calc(var(--u) * 2.6); color: var(--cream); font-weight: 800; margin-top: auto; }
.card .add { position: absolute; top: calc(var(--u) * 1.2); inset-inline-end: calc(var(--u) * 1.2); width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; background: var(--red); font-size: calc(var(--u) * 4); line-height: 1; display: grid; place-items: center; font-weight: 800; }
.card .badge { position: absolute; top: calc(var(--u) * 1.2); inset-inline-start: calc(var(--u) * 1.2); background: #000a; padding: calc(var(--u) * .3) calc(var(--u) * 1.4); border-radius: calc(var(--u) * 2); font-size: calc(var(--u) * 1.8); font-weight: 700; }
.card.spot { border-color: var(--red); transform: scale(1.03); box-shadow: 0 0 0 calc(var(--u) * .6) rgba(200,32,42,.35); }
.card.soldout { opacity: .4; pointer-events: none; }

.cartbar { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 2.2) calc(var(--u) * 4); background: #0d0d0d; border-top: 1px solid var(--line); flex-shrink: 0; }
.cart-open { display: flex; align-items: center; gap: calc(var(--u) * 1.4); font-size: calc(var(--u) * 3); font-weight: 700; }
.count { min-width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; background: var(--red); display: grid; place-items: center; font-weight: 800; }
.count.bump { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.35); } }
.total { flex: 1; text-align: center; font-size: calc(var(--u) * 3.6); font-weight: 800; }
.checkout { background: var(--red); padding: calc(var(--u) * 1.8) calc(var(--u) * 4); border-radius: calc(var(--u) * 4); font-size: calc(var(--u) * 3); font-weight: 800; }
.checkout:disabled { background: var(--ink-3); color: #777; }
.offline { flex-shrink: 0; background: #5a3b00; color: #ffd27a; text-align: center; padding: calc(var(--u) * 1); font-size: calc(var(--u) * 2.4); }

/* ---------- sheets ---------- */
.sheet-bg { position: absolute; inset: 0; background: #000a; z-index: 10; }
.sheet { position: absolute; inset-inline: 0; bottom: 0; z-index: 11; background: var(--ink-2); border-radius: calc(var(--u) * 4) calc(var(--u) * 4) 0 0; padding: calc(var(--u) * 4); max-height: 75%; overflow-y: auto; animation: up .25s ease; }
@keyframes up { from { transform: translateY(100%); } to { transform: none; } }
.sheet h2 { margin: 0 0 calc(var(--u) * 2); font-size: calc(var(--u) * 4.2); }
.sheet .sub { color: var(--muted); font-size: calc(var(--u) * 2.6); margin: 0 0 calc(var(--u) * 2); }
.sheet .grp { margin: calc(var(--u) * 2) 0; }
.sheet .grp h4 { margin: 0 0 calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.8); }
.sheet .opt { display: flex; justify-content: space-between; width: 100%; padding: calc(var(--u) * 2); border: calc(var(--u) * .25) solid var(--line); border-radius: calc(var(--u) * 2); margin-bottom: calc(var(--u) * 1.2); font-size: calc(var(--u) * 2.8); font-weight: 600; }
.sheet .opt.on { border-color: var(--red); background: #3a1114; }
.sheet .row { display: flex; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 3); align-items: center; }
.sheet .primary { flex: 1; background: var(--red); padding: calc(var(--u) * 2.4); border-radius: calc(var(--u) * 3); font-size: calc(var(--u) * 3.2); font-weight: 800; }
.sheet .secondary { padding: calc(var(--u) * 2.4) calc(var(--u) * 3); border-radius: calc(var(--u) * 3); background: var(--ink-3); font-size: calc(var(--u) * 3); font-weight: 700; }
.qty { display: flex; align-items: center; gap: calc(var(--u) * 1.6); font-size: calc(var(--u) * 3.2); font-weight: 800; }
.qty button { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: var(--ink-3); font-size: calc(var(--u) * 3.6); }
.line { display: flex; align-items: center; gap: calc(var(--u) * 2); padding: calc(var(--u) * 1.8) 0; border-bottom: 1px solid var(--line); }
.line .ln { flex: 1; font-size: calc(var(--u) * 2.8); font-weight: 700; }
.line .ln small { display: block; color: var(--muted); font-weight: 600; font-size: calc(var(--u) * 2.2); }
.line .lp { font-size: calc(var(--u) * 2.8); font-weight: 800; color: var(--cream); }
.line.flash { animation: flash 1.2s; }
@keyframes flash { 30% { background: #3a1114; } }
.sum { display: flex; justify-content: space-between; font-size: calc(var(--u) * 3.6); font-weight: 800; margin-top: calc(var(--u) * 2.4); }
.vat { color: var(--muted); font-size: calc(var(--u) * 2.2); }

/* ---------- pay / done ---------- */
#pay, #done { align-items: center; justify-content: center; gap: calc(var(--u) * 3); padding: calc(var(--u) * 6); text-align: center; background: radial-gradient(100% 60% at 50% 30%, #2a0d0f 0%, var(--ink) 70%); }
#pay .host.small { width: calc(var(--u) * 36); height: calc(var(--u) * 46); }
#pay h2 { font-size: calc(var(--u) * 5); margin: 0; }
.pay-amount { font-size: calc(var(--u) * 9); font-weight: 800; color: var(--cream); }
.terminal { position: relative; width: calc(var(--u) * 30); height: calc(var(--u) * 40); border-radius: calc(var(--u) * 3); background: #222; border: calc(var(--u) * .4) solid #444; }
.terminal .card { position: absolute; width: calc(var(--u) * 24); height: calc(var(--u) * 15); left: 50%; top: calc(var(--u) * -6); margin-left: calc(var(--u) * -12); background: linear-gradient(135deg, var(--red), #5a0b10); border-radius: calc(var(--u) * 1.6); animation: tap 2s infinite; }
@keyframes tap { 50% { transform: translateY(calc(var(--u) * 8)); } }
.terminal .waves { position: absolute; bottom: calc(var(--u) * 6); left: 0; right: 0; display: flex; justify-content: center; gap: calc(var(--u) * 1); }
.terminal .waves i { width: calc(var(--u) * 1.4); height: calc(var(--u) * 5); border-radius: 9px; background: var(--ok); animation: pulse 1.2s infinite; }
.terminal .waves i:nth-child(2) { animation-delay: .2s; } .terminal .waves i:nth-child(3) { animation-delay: .4s; }
.link { color: var(--muted); text-decoration: underline; font-size: calc(var(--u) * 2.8); }
#done .host { width: calc(var(--u) * 56); height: calc(var(--u) * 72); }
#done p { font-size: calc(var(--u) * 4); margin: 0; color: var(--muted); }
.order-no { font-family: 'Bebas Neue', 'Cairo', sans-serif; font-size: calc(var(--u) * 26); line-height: 1; color: #fff; text-shadow: 0 0 calc(var(--u) * 4) rgba(200,32,42,.8); }
.done-sub { font-size: calc(var(--u) * 3) !important; }

/* ---------- photoreal host ---------- */
.ph { position: relative; width: 100%; height: 100%; }
.ph-head { position: absolute; inset: 0; transform-origin: 50% 80%; will-change: transform; }
.ph-frame { position: absolute; inset: 0; overflow: hidden; border-radius: 9%/7%; background: #2a2a2a;
  box-shadow: 0 0 0 calc(var(--u) * .35) rgba(200,32,42,.55), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(0,0,0,.6); transition: box-shadow .3s; }
.ph[data-mood="listening"] .ph-frame { box-shadow: 0 0 0 calc(var(--u) * .6) var(--red), 0 0 calc(var(--u) * 5) rgba(200,32,42,.7); }
.ph[data-mood="thinking"] .ph-frame { box-shadow: 0 0 0 calc(var(--u) * .5) #e0a040, 0 0 calc(var(--u) * 4) rgba(224,160,64,.5); }
.ph-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; user-select: none; pointer-events: none; }
.ph-talk, .ph-blink { opacity: 0; }
.ph-talk { transition: opacity 60ms linear; }
.ph-halo { position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(200,32,42,.35), transparent); transition: background .4s, transform .4s; }
.ph[data-mood="listening"] .ph-halo { background: radial-gradient(closest-side, rgba(200,32,42,.6), transparent); animation: halo 1.4s ease-in-out infinite; }
.ph[data-mood="thinking"] .ph-halo { background: radial-gradient(closest-side, rgba(255,190,90,.35), transparent); }
.ph[data-mood="talking"] .ph-halo { background: radial-gradient(closest-side, rgba(255,255,255,.18), transparent); }
@keyframes halo { 50% { transform: scale(1.06); } }
.ph-eq { position: absolute; left: 50%; bottom: 3%; z-index: 2; transform: translateX(-50%); display: flex; gap: 5%; width: 26%; height: 6%; align-items: center; }
.ph-eq i { flex: 1; height: 100%; border-radius: 99px; background: var(--red); transform-origin: 50% 50%; transform: scaleY(.06); }

/* ---------- add-to-cart feedback ---------- */
.toast { position: absolute; left: 50%; bottom: calc(var(--u) * 12); transform: translateX(-50%); z-index: 9; background: #fff; color: var(--ink);
  font-size: calc(var(--u) * 2.8); font-weight: 800; padding: calc(var(--u) * 1.4) calc(var(--u) * 3.4); border-radius: calc(var(--u) * 5);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(0,0,0,.5); white-space: nowrap; animation: toastIn .3s ease; display: flex; gap: calc(var(--u) * 1.2); align-items: center; }
.toast::before { content: '✓'; width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: calc(var(--u) * 2.4); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, calc(var(--u) * 3)); } }
.fly { position: fixed; z-index: 30; border-radius: 50%; background: #222 center/cover no-repeat; display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 0 0 calc(var(--u) * .4) var(--red), 0 calc(var(--u) * 1) calc(var(--u) * 4) rgba(0,0,0,.6); font-size: calc(var(--u) * 5); }
.cartbar.glow { animation: barGlow .9s; }
@keyframes barGlow { 30% { background: #3a1114; } }
.card.added { animation: cardAdd .7s; }
@keyframes cardAdd { 30% { transform: scale(1.06); border-color: var(--ok); } }
.toast[hidden] { display: none; }

/* ---------- voice speed popover ---------- */
.speed-pop { position: absolute; top: calc(var(--u) * 7); inset-inline-end: calc(var(--u) * 3); z-index: 12; width: calc(var(--u) * 50); background: #fff; color: var(--ink);
  border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 2.4); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 5) rgba(0,0,0,.55); animation: toastIn .2s; }
.speed-pop[hidden] { display: none; }
.sp-head { display: flex; justify-content: space-between; font-size: calc(var(--u) * 2.8); font-weight: 800; margin-bottom: calc(var(--u) * 1.4); }
.sp-head b { color: var(--red); }
.sp-row { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.sp-row button { width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; background: #f1eeea; font-size: calc(var(--u) * 3); }
.sp-row input { flex: 1; accent-color: var(--red); height: calc(var(--u) * 4); }
.sp-presets { display: flex; gap: calc(var(--u) * 1); margin-top: calc(var(--u) * 1.6); }
.sp-presets button { flex: 1; padding: calc(var(--u) * 1.2); border-radius: calc(var(--u) * 2); background: #f1eeea; font-size: calc(var(--u) * 2.3); font-weight: 700; }
.sp-presets button.on { background: var(--red); color: #fff; }

/* ---------- motion ---------- */
.bubble .w { opacity: .18; transition: opacity .18s, color .18s; }
.bubble .w.on { opacity: 1; }
.bubble.pop { animation: bubblePop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes bubblePop { from { transform: scale(.92) translateY(calc(var(--u) * 1)); opacity: .3; } }
.grid .card { animation: cardIn .45s cubic-bezier(.2,.9,.3,1) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(calc(var(--u) * 3)) scale(.97); } }
.card.spot { animation: spot 1.2s ease-in-out 3; }
@keyframes spot { 50% { transform: scale(1.05); box-shadow: 0 0 0 calc(var(--u) * 1) rgba(200,32,42,.45); } }
.card.spot::after { content: attr(data-offer); position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%) rotate(-6deg); background: var(--red); color: #fff;
  font-weight: 800; font-size: calc(var(--u) * 2.4); padding: calc(var(--u) * .6) calc(var(--u) * 1.8); border-radius: calc(var(--u) * 2); box-shadow: 0 calc(var(--u) * .6) calc(var(--u) * 2) rgba(0,0,0,.5); animation: tag .5s cubic-bezier(.2,1.6,.4,1); }
@keyframes tag { from { transform: translate(-50%, -50%) rotate(-6deg) scale(0); } }
.stage .ph { animation: hostIn .6s cubic-bezier(.2,1.2,.4,1); }
@keyframes hostIn { from { transform: translateY(calc(var(--u) * 6)) scale(.9); opacity: 0; } }
.sheet { animation: up .35s cubic-bezier(.2,1.1,.3,1); }
.cats button { transition: background .25s, transform .2s; } .cats button.on { transform: scale(1.04); }
.total { transition: color .3s; } .total.tick { animation: tick .5s; }
@keyframes tick { 40% { transform: scale(1.18); color: var(--cream); } }
/* attract: food floating behind the host */
.floaty { position: absolute; width: calc(var(--u) * 26); height: calc(var(--u) * 26); background: center/contain no-repeat; opacity: .16; filter: blur(1px); pointer-events: none; animation: floaty 14s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translate(0, 0) rotate(-8deg); } 50% { transform: translate(calc(var(--u) * 3), calc(var(--u) * -5)) rotate(8deg); } }
.hello-ring { position: absolute; inset: 8% 6% 14%; border-radius: 50%; border: calc(var(--u) * .4) solid rgba(200,32,42,.5); animation: ring 2.6s ease-out infinite; pointer-events: none; }
.hello-ring.r2 { animation-delay: 1.3s; }
.attract-host { position: relative; }
/* done: check + confetti */
.done-check { width: calc(var(--u) * 16); height: calc(var(--u) * 16); border-radius: 50%; background: var(--ok); display: grid; place-items: center; animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
.done-check svg { width: 60%; } .done-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .5s .3s forwards; }
@keyframes pop { from { transform: scale(0); } } @keyframes draw { to { stroke-dashoffset: 0; } }
.confetti { position: fixed; top: -2vh; width: 10px; height: 16px; z-index: 40; pointer-events: none; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 110vh) rotate(var(--rot)); } }
.order-no { animation: pop .6s .2s cubic-bezier(.2,1.5,.4,1) both; }
.edit-btn { background: var(--ink-3); border: 1px solid #444; border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 1) calc(var(--u) * 2); font-size: calc(var(--u) * 2.3); font-weight: 700; white-space: nowrap; }
.sheet .grp h4 { display: flex; gap: calc(var(--u) * 1); align-items: baseline; }
.sheet .opt { align-items: center; cursor: pointer; }
.sheet .opt .op { color: var(--muted); font-weight: 600; }
.ostep { display: flex; align-items: center; gap: calc(var(--u) * 1.4); }
.ostep button { width: calc(var(--u) * 5.4); height: calc(var(--u) * 5.4); border-radius: 50%; background: var(--ink-3); font-size: calc(var(--u) * 3.2); font-weight: 800; }
.ostep button:disabled { opacity: .35; }
.ostep b { min-width: calc(var(--u) * 3); text-align: center; font-size: calc(var(--u) * 3); }
.ocheck { width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: 50%; border: calc(var(--u) * .3) solid #555; display: grid; place-items: center; font-weight: 800; }
.opt.on .ocheck { background: var(--red); border-color: var(--red); }

/* ---------- loyalty ---------- */
.loy { display: flex; align-items: center; gap: calc(var(--u) * 2); background: linear-gradient(135deg, #3a1114, #22100f); border: calc(var(--u) * .25) solid #5a1a1f;
  border-radius: calc(var(--u) * 2.6); padding: calc(var(--u) * 2) calc(var(--u) * 2.4); margin-top: calc(var(--u) * 2.4); }
.loy .star { font-size: calc(var(--u) * 5); animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(1.15) rotate(12deg); } }
.loy .lt { flex: 1; font-size: calc(var(--u) * 2.6); font-weight: 700; line-height: 1.4; }
.loy .lt small { display: block; color: var(--muted); font-weight: 600; font-size: calc(var(--u) * 2.2); }
.loy button { background: #fff; color: var(--ink); font-weight: 800; padding: calc(var(--u) * 1.4) calc(var(--u) * 2.6); border-radius: calc(var(--u) * 3); font-size: calc(var(--u) * 2.5); white-space: nowrap; }
.loy button.on { background: var(--ok); color: #fff; }
.sum.disc { color: var(--ok); font-size: calc(var(--u) * 2.8); margin-top: calc(var(--u) * 1); }
.pad-num { text-align: center; font-family: 'Bebas Neue', 'Cairo', sans-serif; font-size: calc(var(--u) * 9); letter-spacing: .08em; direction: ltr; min-height: calc(var(--u) * 11); }
.pad-num.bad { color: #ff8a80; animation: shake .35s; }
@keyframes shake { 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.6); direction: ltr; margin-top: calc(var(--u) * 1.6); }
.pad button { height: calc(var(--u) * 10); border-radius: calc(var(--u) * 2.4); background: var(--ink-3); font-size: calc(var(--u) * 5); font-weight: 800; }
.pad button:active { background: var(--red); }
.pay-pts, .done-pts { background: #1e3a2a; color: #9be7b8; font-weight: 800; font-size: calc(var(--u) * 3); padding: calc(var(--u) * 1.2) calc(var(--u) * 3); border-radius: calc(var(--u) * 4); animation: pop .5s cubic-bezier(.2,1.6,.4,1); }
.done-pts button { background: #fff; color: var(--ink); border-radius: calc(var(--u) * 3); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); margin-inline-start: calc(var(--u) * 1.4); font-weight: 800; }

.loy-end { width: 100%; background: linear-gradient(135deg, #3a1114, #1d0d0c); border: calc(var(--u) * .3) solid #6a1d23; border-radius: calc(var(--u) * 4);
  padding: calc(var(--u) * 3.4); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 1.6); animation: pop .5s .4s cubic-bezier(.2,1.5,.4,1) both; }
.loy-end .big { font-size: calc(var(--u) * 5.4); font-weight: 800; color: #fff; }
.loy-end .big b { color: #ffd27a; }
.loy-end p { font-size: calc(var(--u) * 2.8) !important; color: var(--muted); margin: 0; }
.loy-end .acts { display: flex; gap: calc(var(--u) * 2); width: 100%; }
.loy-end .acts button { flex: 1; padding: calc(var(--u) * 2.2); border-radius: calc(var(--u) * 3); font-size: calc(var(--u) * 3); font-weight: 800; }
.loy-end .yes { background: #ffd27a; color: var(--ink); } .loy-end .no { background: var(--ink-3); color: var(--muted); }
#done .host { transition: width .4s, height .4s; } #done.loy-on .host { width: calc(var(--u) * 34); height: calc(var(--u) * 44); }
#done.loy-on .order-no { font-size: calc(var(--u) * 18); }

/* done screen must always fit: compact when the loyalty card shows, scroll as a last resort */
#done { justify-content: flex-start; padding-top: calc(var(--u) * 6); overflow-y: auto; gap: calc(var(--u) * 2); }
#done .done-check { width: calc(var(--u) * 11); height: calc(var(--u) * 11); flex-shrink: 0; }
#done .host { width: calc(var(--u) * 44); height: calc(var(--u) * 56); flex-shrink: 0; }
#done.loy-on { padding-top: calc(var(--u) * 3); gap: calc(var(--u) * 1.4); }
#done.loy-on .done-check { display: none; }
#done.loy-on .host { width: calc(var(--u) * 24); height: calc(var(--u) * 31); }
#done.loy-on .order-no { font-size: calc(var(--u) * 14); }
#done.loy-on p { font-size: calc(var(--u) * 3) !important; }
.loy-end { flex-shrink: 0; }
.loy-end .acts button { min-height: calc(var(--u) * 9); }
#phoneSheet { max-height: 92%; }

/* ---------- staff info (attract screen only) ---------- */
.info-btn { position: absolute; bottom: calc(var(--u) * 2); inset-inline-start: calc(var(--u) * 2); width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.4); border-radius: 50%;
  border: 1px solid #444; color: #777; font: italic 700 calc(var(--u) * 2.4) Georgia, serif; opacity: .6; z-index: 3; }
.info-sheet { font-size: calc(var(--u) * 2.6); }
.info-sheet table { width: 100%; border-collapse: collapse; margin: calc(var(--u) * 1) 0 calc(var(--u) * 2); }
.info-sheet td { padding: calc(var(--u) * .9) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.info-sheet td:first-child { color: var(--muted); width: 38%; }
.info-sheet .ok { color: var(--ok); } .info-sheet .warn { color: #ffd27a; }
.info-sheet .acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 1.4); }
.info-sheet .acts button { padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 2.4); background: var(--ink-3); font-weight: 800; font-size: calc(var(--u) * 2.6); }
.info-sheet .acts button.primary { background: var(--red); }
.info-sheet .msg { min-height: calc(var(--u) * 3); color: var(--muted); margin-top: calc(var(--u) * 1.4); }
.print-warn { background: #4a3500; color: #ffd27a; border-radius: calc(var(--u) * 2); padding: calc(var(--u) * 1.4) calc(var(--u) * 2.4); font-size: calc(var(--u) * 2.6); font-weight: 700; text-align: center; }
.info-sheet .acts { grid-template-columns: repeat(3, 1fr); }