/* Gyro restaurant menu overlay — branch room/kitchen */
.menu-wrap{position:fixed;inset:0;display:grid;place-items:center;overflow-y:auto;
  padding:calc(96px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) calc(150px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(ellipse at 50% 30%,rgba(60,42,22,.55),rgba(0,0,0,0) 60%),linear-gradient(#0b0a09,#050505)}
.menu-card{width:min(640px,100%);background:rgba(20,18,16,.82);border:1px solid rgba(212,175,106,.35);border-radius:18px;
  padding:26px clamp(18px,4vw,34px);display:grid;gap:18px;box-shadow:0 30px 80px rgba(0,0,0,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.menu-head{display:grid;gap:6px}
.menu-eyebrow{margin:0;font:600 11px/1 "Public Sans",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#d4af6a}
.menu-head h2{margin:0;font:800 clamp(36px,6vw,54px)/.95 "Big Shoulders Display","Arial Narrow",sans-serif;color:#f6efe2;text-wrap:balance}
.menu-note{margin:0;color:#bdb4a6;font-size:14px}
.menu-tabs{display:flex;gap:6px;flex-wrap:wrap}
.menu-tabs button{border:1px solid rgba(255,255,255,.14);background:none;color:#e9e2d6;border-radius:999px;padding:7px 14px;cursor:pointer}
.menu-tabs button[aria-selected="true"]{background:#d4af6a;color:#1a1408;border-color:#d4af6a}
.menu-items{display:grid;gap:12px}
.mi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08)}
.mi img{width:64px;height:64px;object-fit:cover;border-radius:10px}
.mi h3{margin:0;font:600 16px/1.3 "Public Sans",system-ui,sans-serif;color:#f3ede3}
.mi p{margin:4px 0 0;color:#b5ac9f;font-size:14px}
.mp{font:600 15px "Public Sans",system-ui,sans-serif;color:#e7c98c;font-variant-numeric:tabular-nums}
.menu-skel{display:grid;gap:14px}
.sk-row{display:grid;grid-template-columns:minmax(0,1fr) 56px;grid-template-rows:auto auto;gap:6px 16px}
.sk-row span{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.12),rgba(255,255,255,.06));background-size:200% 100%;animation:sk 2.4s linear infinite}
.sk-a{width:45%;height:14px!important}.sk-b{grid-row:2;width:80%;opacity:.6}.sk-p{grid-column:2;grid-row:1}
@keyframes sk{to{background-position:-200% 0}}
.menu-pending{margin:0;font-size:14px;color:#cfc6b8;background:rgba(212,175,106,.08);border:1px dashed rgba(212,175,106,.4);border-radius:10px;padding:12px 14px}
.menu-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn-brass,.btn-ghost{font:600 14px/1 "Public Sans",system-ui,sans-serif;border-radius:999px;padding:11px 18px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.btn-brass{background:#d4af6a;color:#1a1408;border:0}
.btn-ghost{background:none;color:#efe7da;border:1px solid rgba(255,255,255,.22)}
@media (prefers-reduced-motion: reduce){.sk-row span{animation:none}}
.menu-cats{display:flex;flex-wrap:wrap;gap:8px}
.menu-cats span{border:1px solid rgba(212,175,106,.45);color:#efe2c4;border-radius:999px;padding:7px 13px;font:600 13px "Public Sans",system-ui,sans-serif}
.menu-src{display:block;margin-top:6px;color:#9c9387;font-size:12px}
.menu-cater{margin:0;color:#e7c98c;font-weight:600;font-size:15px}
/* panel mode (room has a panorama): the room stays visible behind a dimmed backdrop */
.menu-sheet{background:rgba(0,0,0,.55);z-index:24}
.menu-sheet .menu-card{position:relative;max-height:calc(100vh - 200px);overflow:auto}
.menu-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(0,0,0,.3);color:#f3ede3;cursor:pointer}
.menu-launch{position:fixed;z-index:6;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(72px + env(safe-area-inset-bottom,0px));
  background:#d4af6a;color:#1a1408;border:0;border-radius:999px;padding:12px 22px;font:700 15px "Public Sans",system-ui,sans-serif;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.menu-empty{margin:0;color:#b5ac9f;font-size:14px}
@media (max-width:620px){.menu-launch{bottom:calc(128px + env(safe-area-inset-bottom,0px))}.menu-sheet .menu-card{max-height:calc(100vh - 230px)}}
/* #menuLayer is position:fixed, so it is its own stacking layer: below the chapter bar normally, on top while the panel is open */
#menuLayer{z-index:4}
body.menu-open #menuLayer{z-index:30}