/* Live QR menu (/menu) — phone first */
:root{
  --bg:#f7f2e8; --card:#fff; --ink:#1d1a15; --ink-2:#6d655a; --line:#e8dfcf;
  --head:#1b1712; --head-2:#2a241c; --gold:#f2b229; --gold-ink:#2a1d00;
  --ok:#1f9d55; --ok-bg:#e6f6ec; --low:#d98a00; --low-bg:#fff3d6; --crit:#d6342c; --crit-bg:#fde8e6;
  --r:18px; --shadow:0 1px 2px rgba(40,30,10,.06),0 6px 18px rgba(40,30,10,.07);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;min-height:100vh}
[dir=rtl] body,[lang=ar]{font-family:Tahoma,"Segoe UI","Noto Sans Arabic","Geeza Pro",Arial,sans-serif}
button{font:inherit;color:inherit}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* header */
.m-head{position:sticky;top:0;z-index:10;background:var(--head);color:#fff;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.m-head-in{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 8px;max-width:1100px;margin:0 auto}
.m-brand{display:flex;align-items:center;gap:12px;min-width:0}
.m-logo{width:44px;height:44px;border-radius:14px;background:var(--gold);color:var(--gold-ink);display:grid;place-items:center;flex-shrink:0}
.m-logo svg{width:26px;height:26px}
.m-brand-txt{display:grid;min-width:0}
.m-brand-txt strong{font-size:19px;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-brand-txt small{color:#cbbfa8;font-size:13px}
.m-lang{min-height:40px;min-width:64px;padding:0 14px;border-radius:999px;border:1px solid #4a4134;background:var(--head-2);color:#fff;font-weight:700;cursor:pointer}
.m-lang:focus-visible,.m-cat:focus-visible,.m-btn:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.m-live{display:flex;align-items:center;gap:8px;max-width:1100px;margin:0 auto;padding:0 16px 10px;font-size:13px;color:#cbbfa8}
.m-live b{color:#fff;letter-spacing:1.5px;font-size:12px}
.m-dot{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.7);animation:pulse 2s infinite}
.m-live.stale .m-dot{background:#9b917f;animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.6)}70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.m-cats{display:flex;gap:8px;overflow-x:auto;padding:0 16px 12px;max-width:1100px;margin:0 auto;scrollbar-width:none}
.m-cats::-webkit-scrollbar{display:none}
.m-cat{flex-shrink:0;min-height:38px;padding:0 15px;border-radius:999px;border:1px solid #4a4134;background:transparent;color:#efe6d6;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap}
.m-cat.on{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}

/* list */
.m-main{max-width:1100px;margin:0 auto;padding:14px 16px 8px}
.m-note{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#fff7e0;border:1px solid #f0dca6;color:#5a4410;font-weight:600}
.m-sec{margin:6px 0 18px;scroll-margin-top:150px}
.m-sec h2{display:flex;align-items:baseline;gap:10px;margin:8px 2px 10px;font-size:20px}
.m-sec h2 small{font-size:14px;color:var(--ink-2);font-weight:600}
.m-grid{display:grid;gap:12px}
@media (min-width:720px){.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.m-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.m-dish{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;padding:12px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:opacity .3s,filter .3s}
.m-pic{position:relative;width:112px;height:112px;border-radius:14px;overflow:hidden;background:#efe7d8}
.m-pic img{width:100%;height:100%;object-fit:cover;display:block}
.m-flag{position:absolute;left:6px;top:6px;padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.3px;background:var(--crit);color:#fff}
[dir=rtl] .m-flag{left:auto;right:6px}
.m-body{display:flex;flex-direction:column;min-width:0}
.m-name{margin:0;font-size:17px;line-height:1.25;font-weight:800}
.m-alt{margin:2px 0 0;color:var(--ink-2);font-size:14px;font-weight:600}
.m-desc{margin:6px 0 0;color:var(--ink-2);font-size:13.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.m-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.m-price{font-size:17px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}
.m-price small{font-size:12px;font-weight:700;color:var(--ink-2);margin-inline-start:3px}

/* life line */
.m-life{margin-top:9px}
.m-bar{height:8px;border-radius:999px;background:#efe7d8;overflow:hidden}
.m-bar i{display:block;height:100%;border-radius:999px;background:var(--ok);transition:width .8s ease,background-color .4s}
.m-life-txt{display:flex;align-items:center;gap:6px;margin-top:5px;font-size:13px;font-weight:700;color:var(--ok)}
.m-life-txt b{font-size:15px}
.m-life.low .m-bar i{background:var(--low)} .m-life.low .m-life-txt{color:var(--low)}
.m-life.crit .m-bar i{background:var(--crit)} .m-life.crit .m-life-txt{color:var(--crit)}
.m-life.out .m-life-txt{color:var(--ink-2)}
.m-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--ok-bg);color:var(--ok);font-size:12.5px;font-weight:800;white-space:nowrap}
.m-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.m-dish.bump .m-life-txt b{animation:bump .6s ease}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}

.m-dish.out{opacity:.62;filter:grayscale(.85)}
.m-dish.out .m-price{text-decoration:line-through;text-decoration-thickness:2px}

.m-empty{padding:42px 20px;text-align:center;color:var(--ink-2)}
.m-empty strong{display:block;color:var(--ink);font-size:19px;margin-bottom:6px}
.m-skel{height:136px;border-radius:var(--r);margin-bottom:12px;background:linear-gradient(90deg,#efe7d8 25%,#f7f1e6 50%,#efe7d8 75%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{to{background-position:-200% 0}}

/* footer */
.m-foot{max-width:1100px;margin:6px auto 0;padding:18px 16px calc(28px + env(safe-area-inset-bottom));text-align:center}
.m-how{margin:0 0 12px;font-weight:700}
.m-foot-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.m-btn{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;font-weight:700}
.m-btn-main{background:var(--head);border-color:var(--head);color:#fff}
.m-small{margin:14px 0 0;color:var(--ink-2);font-size:13px}

@media (max-width:380px){
  .m-dish{grid-template-columns:92px minmax(0,1fr);gap:10px;padding:10px}
  .m-pic{width:92px;height:92px}
  .m-name{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}