:root {
  --teal: #0f3b39; --teal2: #17524d; --teal3: #1f6a63;
  --cream: #fff4e0; --cream2: #f3e3c3; --mustard: #f2b63c; --red: #e4572e; --ink: #2a1f14;
  --green: #3fae73; --muted: rgba(255, 244, 224, .62);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--teal); color: var(--cream); }
body {
  position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 72%, rgba(0,0,0,.18) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 46px),
    var(--teal);
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
#app {
  position: absolute; inset: 0; margin: 0 auto; max-width: 560px;
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 12px)
           calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 12px);
}

#hud { grid-row: 1; } #ticket { grid-row: 2; } #stageWrap { grid-row: 3; } #controls { grid-row: 4; }   /* fixed rows: a hidden ticket mustn't shift the stage */
/* top bar */
#hud { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.hud-l { display: flex; align-items: baseline; gap: 10px; }
.hud-l b { font-size: 18px; letter-spacing: .3px; }
.hud-l span { color: var(--muted); font-size: 15px; }
.hud-r { display: flex; align-items: center; gap: 8px; }
.coin { background: var(--mustard); color: var(--ink); font-weight: 800; padding: 5px 11px; border-radius: 999px; font-size: 15px; }
.icon-btn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.1); font-size: 16px; font-weight: 800; }

/* order ticket */
#ticket {
  display: flex; gap: 10px; align-items: center; background: var(--cream); color: var(--ink);
  border-radius: 14px; padding: 8px 10px; box-shadow: 0 4px 0 rgba(0,0,0,.18);
  position: relative;
}
#ticket[hidden] { display: none; }
#ticket::after { /* zig-zag tear at the bottom */
  content: ""; position: absolute; left: 10px; right: 10px; bottom: -6px; height: 7px;
  background: linear-gradient(-45deg, transparent 4px, var(--cream) 0) 0 0 / 10px 7px repeat-x,
              linear-gradient(45deg, transparent 4px, var(--cream) 0) 0 0 / 10px 7px repeat-x;
}
.face { font-size: 32px; line-height: 1; width: 44px; height: 44px; display: grid; place-items: center;
  background: #f0dfbd; border-radius: 50%; flex: none; }
.t-body { flex: 1; min-width: 0; }
.t-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.t-top b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-done { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; padding: 3px 8px; border-radius: 999px; color: #fff; }
.t-done.light { background: #d6a54f; } .t-done.golden { background: #c27a26; } .t-done.crispy { background: #7a4019; }
.t-say { font-size: 13px; margin: 1px 0 5px; color: #5a4632; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip { font-size: 12px; padding: 2px 7px; border-radius: 999px; background: #efe0c2; color: #5a4632; font-weight: 700; }
.chip.ok { background: var(--green); color: #fff; }
.patience { height: 6px; border-radius: 6px; background: #e6d4b0; margin-top: 6px; overflow: hidden; }
.patience i { display: block; height: 100%; width: 100%; background: var(--green); border-radius: 6px; transition: background .4s; }
.patience i.mid { background: var(--mustard); } .patience i.low { background: var(--red); }

/* stage */
#stageWrap { position: relative; min-height: 0; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#hint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); max-width: 92%; text-align: center; font-size: 14px; font-weight: 700;
  color: var(--cream); background: rgba(10,30,28,.72); padding: 6px 12px; border-radius: 999px; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#hint:empty { display: none; }

/* controls */
#controls { display: grid; gap: 8px; }
.row { display: grid; gap: 8px; grid-auto-flow: column; grid-auto-columns: 1fr; }
.shelf { display: flex; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 6px; margin: 0 -2px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x; }
.shelf::-webkit-scrollbar { display: none; }
.ing {
  flex: 1 0 64px; max-width: 92px; scroll-snap-align: start;
  background: var(--cream); color: var(--ink); border-radius: 14px; padding: 6px 2px 5px; min-height: 66px;
  display: grid; place-items: center; gap: 1px; box-shadow: 0 3px 0 rgba(0,0,0,.2); font-size: 11.5px; font-weight: 700; line-height: 1.1;
}
.ing .e { font-size: 26px; line-height: 1.1; }
.ing.bread { background: #f7e6c2; } .ing.cheese { background: #fde9a6; } .ing.extra { background: #e9f1dc; }
.ing:disabled { opacity: .4; }
.ing:active, .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.btn {
  background: var(--teal3); border-radius: 14px; min-height: 52px; padding: 8px 10px; font-weight: 800; font-size: 16px;
  box-shadow: 0 3px 0 rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn small { font-weight: 600; opacity: .75; font-size: 11px; }
.row.r4 .btn { flex-direction: column; gap: 1px; font-size: 22px; min-height: 60px; padding: 6px 4px; }
.row.r4 .btn span { font-size: 13px; }
.btn.go { background: var(--mustard); color: var(--ink); }
.btn.hot { background: var(--red); }
.btn.held { background: #0b2c2a; transform: translateY(2px); box-shadow: none; }
.btn:disabled { opacity: .38; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: rgba(0,0,0,.25); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { border-radius: 10px; min-height: 40px; font-weight: 800; font-size: 15px; background: transparent; color: var(--muted); }
.seg button.on { background: var(--cream); color: var(--ink); }
.seg button.on.h0 { background: #8fd0ff; } .seg button.on.h1 { background: var(--mustard); } .seg button.on.h2 { background: #ff8a5c; }

/* overlays */
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; z-index: 5;
  background: rgba(8, 30, 29, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.overlay[hidden] { display: none; }
.panel { width: 100%; max-width: 420px; max-height: 100%; overflow: auto; background: var(--cream); color: var(--ink);
  border-radius: 22px; padding: 20px 18px; box-shadow: 0 10px 40px rgba(0,0,0,.35); }
.panel h2 { margin: 0 0 10px; font-size: 24px; }
.big { display: block; width: 100%; border-radius: 16px; min-height: 56px; font-size: 19px; font-weight: 800; margin-top: 10px; }
.big.go { background: var(--mustard); color: var(--ink); box-shadow: 0 4px 0 #b9821b; }
.big.ghost { background: transparent; color: var(--teal2); box-shadow: inset 0 0 0 2px #d9c7a3; }
.title-panel { text-align: center; padding-top: 22px; }
#title { align-items: end; background: linear-gradient(180deg, rgba(8,30,29,.15) 0%, rgba(8,30,29,.55) 45%, rgba(8,30,29,.85) 100%); backdrop-filter: none; -webkit-backdrop-filter: none; }
.logo { display: grid; line-height: .9; font-weight: 900; font-size: 58px; letter-spacing: -1px; }
.logo span:first-child { color: var(--mustard); -webkit-text-stroke: 2px var(--ink); text-shadow: 0 5px 0 var(--ink); }
.logo span:last-child { color: var(--teal2); font-size: 40px; letter-spacing: 6px; text-transform: uppercase; margin-top: 8px; }
.tag { font-size: 17px; color: #6a5440; margin: 14px 0 8px; }
.rec { font-size: 13px; color: #8a7358; min-height: 1em; margin: 12px 0 0; }
.how { padding-left: 20px; margin: 0; font-size: 15px; line-height: 1.45; }
.how li { margin-bottom: 6px; }
.result-panel { text-align: center; }
.bubble { background: #fff; border-radius: 16px; padding: 10px 14px; font-weight: 700; font-size: 16px; position: relative; display: inline-block; margin-bottom: 4px; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -8px; border: 8px solid transparent; border-bottom: 0; border-top-color: #fff; }
#plate { width: 100%; display: block; margin: 6px 0 2px; }
.stars { font-size: 34px; letter-spacing: 3px; color: #e2cfa9; }
.stars b { color: var(--mustard); text-shadow: 0 2px 0 #b9821b; font-weight: 400; }
.receipt { text-align: left; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 14px; background: #fffaf0;
  border: 2px dashed #e0cda8; border-radius: 12px; padding: 8px 12px; margin-top: 6px; }
.receipt div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.receipt .good { color: #23874f; } .receipt .meh { color: #b07a12; } .receipt .bad { color: #c2391b; }
.tip { font-size: 22px; font-weight: 900; margin-top: 8px; color: #23874f; }
.sum div { display: flex; justify-content: space-between; font-size: 17px; padding: 6px 0; border-bottom: 1px solid #ead9b8; }
.unlock { margin-top: 12px; font-size: 15px; color: #6a5440; min-height: 1em; }
#toast { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%) scale(.9); background: var(--ink); color: var(--cream);
  padding: 10px 16px; border-radius: 12px; font-weight: 700; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9; max-width: 80%; text-align: center; }
#toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-height: 640px) { .ing { min-height: 50px; } .ing .e { font-size: 19px; } .btn { min-height: 46px; } .face { width: 44px; height: 44px; font-size: 32px; } }