/* The Chinese Bliss — static premium QR menu. No external fonts, scripts or stock photos. */
:root {
  color-scheme: dark;
  --bg: #0f0f10;
  --panel: #1b1b1d;
  --panel-light: #232123;
  --border: #373034;
  --text: #fbf7f1;
  --muted: #b4a9a0;
  --orange: #f69a3e;
  --orange-soft: #ffc180;
  --green: #9bd897;
  --nonveg: #ef9e88;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 118px; }
body {
  margin: 0; min-width: 320px; color: var(--text);
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
  background:
    radial-gradient(ellipse 21rem 23rem at -12% 37rem, #a4522617, transparent 75%),
    radial-gradient(ellipse 26rem 28rem at 110% 73rem, #b95c2613, transparent 75%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
}
button, select { font: inherit; }
button, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.skip-link { position:absolute; z-index:200; top:-70px; left:12px; color:#18100c; background:var(--orange); padding:8px 14px; border-radius:9px; }
.skip-link:focus { top:8px; }

/* Compact branded header: real restaurant logo + warm, restrained decoration. */
.brand-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 28px 20px 30px;
  border-bottom: 1px solid #3a2c24;
  background: linear-gradient(142deg, #221b17 0%, #161516 56%, #211913 100%);
}
.brand-hero::before, .brand-hero::after { content:""; position:absolute; z-index:-1; pointer-events:none; border:1px solid #e58e3e23; border-radius:50%; }
.brand-hero::before { height:290px; width:290px; left:-188px; top:-184px; box-shadow:0 0 0 34px #f69a3e0a, 0 0 0 83px #f69a3e06; }
.brand-hero::after { height:260px; width:260px; right:-174px; bottom:-213px; box-shadow:0 0 0 31px #f69a3e0b, 0 0 0 66px #f69a3e05; }
.brand-hero__halo { position:absolute; z-index:-1; top:-105px; left:36%; width:350px; height:330px; background:radial-gradient(ellipse,#f1883030,transparent 69%); pointer-events:none; }
.brand-hero__inner { max-width:1010px; margin:0 auto; display:flex; align-items:center; gap:20px; }
.brand-logo { flex:0 0 112px; height:112px; border:1px solid #f6a85a52; background:#f8a04b17; border-radius:100%; padding:5px; box-shadow:0 0 0 7px #f4a14c09, 0 20px 45px #0004; }
.brand-logo img { display:block; height:100%; width:100%; object-fit:cover; border-radius:50%; }
.brand-intro { min-width:0; }
.brand-eyebrow, .section-eyebrow { color:var(--orange-soft); font-size:.66rem; font-weight:800; letter-spacing:.23em; margin:0 0 8px; }
.brand-intro h1 { font:900 clamp(1.55rem,5.3vw,2.6rem)/1.05 system-ui,-apple-system,sans-serif; letter-spacing:-.035em; margin:0; max-width:19ch; text-transform:uppercase; }
.brand-intro h1 span { color:var(--orange); }
.brand-tagline { margin:10px 0 0; color:#f6d9b8; font-size:clamp(.76rem,2.6vw,.94rem); font-weight:500; }

.page-shell { max-width:920px; margin:0 auto; padding:0 16px 42px; }
/* Single offer card: no fabricated expiry date, code or minimum order. */
.offer {
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; gap:22px;
  margin:22px auto 30px; padding:22px 24px;
  border-radius:20px; border:1px solid #faaf57a6;
  background:linear-gradient(125deg,#c96c24 0%,#ee963c 56%,#f8b25f 100%);
  box-shadow:0 16px 38px #0004, inset 0 1px 0 #ffffff4c;
  color:#22140b;
}
.offer::before { content:""; pointer-events:none; position:absolute; z-index:-1; right:-70px; top:-135px; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle,#fff6dd62,transparent 72%); }
.offer__ring { pointer-events:none; position:absolute; right:-115px; bottom:-175px; width:330px; height:330px; border:1px solid #401b0d28; border-radius:50%; box-shadow:0 0 0 24px #fff6dc12,0 0 0 62px #fff6dc13; }
.offer__amount { flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-start; border-right:1px solid #47260e58; padding-right:24px; }
.offer__amount strong { font-size:clamp(3.3rem,11vw,5.15rem); font-weight:1000; letter-spacing:-.10em; line-height:.91; white-space:nowrap; }
.offer__amount strong span { font-size:.51em; letter-spacing:-.07em; vertical-align:.33em; margin-left:3px; }
.offer__off { font-size:1.1rem; letter-spacing:.40em; font-weight:950; margin-left:4px; margin-top:6px; }
.offer__eyebrow { font-size:.69rem; letter-spacing:.2em; font-weight:900; margin:0 0 7px; }
.offer__copy h2 { margin:0; font-size:clamp(1.36rem,4vw,2rem); line-height:1.1; letter-spacing:-.035em; font-weight:900; }
.offer__copy p:last-child { max-width:26ch; font-size:.80rem; line-height:1.45; font-weight:600; margin:8px 0 0; color:#402313; }

.browse { scroll-margin-top:12px; }
.browse__title { margin:0 0 17px; }
.browse__title h2 { font-size:clamp(1.45rem,4.6vw,2rem); line-height:1.13; letter-spacing:-.04em; margin:0; font-weight:800; }
.browse__title h2 span { color:var(--orange); }
.view-switch { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:5px; background:#211e1d; border:1px solid #554033; border-radius:15px; }
.view-switch__button { cursor:pointer; min-height:48px; padding:11px 6px; border:0; border-radius:10px; background:transparent; color:#e0d2c4; font-weight:750; font-size:.90rem; transition:background .18s ease; }
.view-switch__button.is-active { background:linear-gradient(130deg,#ffc17a,#f59b42); color:#281508; box-shadow:0 3px 13px #0004; }
.view-switch__button span { margin-left:3px; }

/* Native select (not horizontally scrolling chips) for quick access to all 8 sections. */
.category-jump {
  position:sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:19px -16px 5px; padding:11px 16px;
  border-top:1px solid #3f342b; border-bottom:1px solid #3f342b;
  background:#101011f7; backdrop-filter:blur(10px);
}
.category-jump[hidden] { display:none; }
.category-jump label { flex:0 0 auto; color:#ddbb94; font-size:.65rem; letter-spacing:.14em; font-weight:800; }
.category-jump__select-wrap { position:relative; flex:1; max-width:330px; }
.category-jump select { display:block; width:100%; min-height:44px; cursor:pointer; appearance:none; border:1px solid #705038; border-radius:11px; background:#24201e; color:#fff5e7; padding:10px 39px 10px 12px; font-size:.85rem; font-weight:700; }
.category-jump select option { color:var(--text); background:#24201e; }
.category-jump__chevron { position:absolute; pointer-events:none; right:16px; top:17px; width:9px; height:9px; border-right:2px solid var(--orange); border-bottom:2px solid var(--orange); transform:rotate(45deg); }

#menu { min-height:30vh; padding:12px 0 26px; }
.menu-section { margin:0 0 27px; scroll-margin-top:99px; }
.menu-section__heading { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 2px 11px; }
.menu-section__heading h2 { margin:0; font-size:clamp(1.12rem,3.8vw,1.35rem); font-weight:850; letter-spacing:-.017em; }
.menu-section__count { color:#cba47c; font-size:.72rem; flex:0 0 auto; }
.menu-list { background:var(--panel); border:1px solid var(--border); border-radius:15px; overflow:hidden; box-shadow:0 15px 28px #0002; }
.menu-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:17px 16px; border-bottom:1px solid #393132; }
.menu-item:last-child { border-bottom:0; }
.dish-info { flex:1; min-width:0; }
.dish-name { margin:0; font-size:.91rem; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.dish-meta { display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin:7px 0 0; }
.diet-label { display:inline-flex; align-items:center; gap:6px; width:max-content; padding:3px 7px; border:1px solid; border-radius:5px; font-size:.65rem; font-weight:800; }
.diet-label--veg { color:var(--green); border-color:#5f986f77; background:#324d362a; }
.diet-label--non-veg { color:var(--nonveg); border-color:#a2625477; background:#703b3527; }
.diet-label__symbol { position:relative; display:inline-block; width:10px; height:10px; border:1.5px solid currentColor; border-radius:2px; }
.diet-label__symbol::after { content:""; position:absolute; width:4px; height:4px; left:2px; top:2px; border-radius:100%; background:currentColor; }
.diet-label--non-veg .diet-label__symbol::after { border-radius:0; }
.dish-category { font-size:.69rem; color:#bca99b; }
.dish-price { flex:0 0 auto; color:#ffaf58; font-size:1rem; font-weight:900; font-variant-numeric:tabular-nums; white-space:nowrap; }

.popular-heading { padding:20px 2px 16px; }
.popular-heading h2 { margin:0; font-size:clamp(1.45rem,4vw,1.9rem); line-height:1.18; letter-spacing:-.03em; }
.popular-heading__sub { color:var(--muted); margin:8px 0 0; font-size:.85rem; }
.popular-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.popular-item { position:relative; display:flex; align-items:center; justify-content:space-between; min-width:0; gap:10px; padding:20px 16px 20px 20px; border:1px solid #624835; border-radius:14px; background:linear-gradient(125deg,#35261e,#1b1a1d 73%); overflow:hidden; }
.popular-item::before { content:""; position:absolute; left:0; top:12px; bottom:12px; width:3px; background:var(--orange); border-radius:0 3px 3px 0; }
.status-state { padding:28px 18px; border:1px solid var(--border); background:var(--panel); border-radius:14px; color:var(--muted); text-align:center; }
.status-state--error { color:#ffd0b8; }
.order-footer { position:fixed; z-index:80; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:center; gap:10px; min-height:58px; padding:14px 18px calc(14px + env(safe-area-inset-bottom)); color:#fbe9d7; font-size:.86rem; font-weight:750; background:#1c1a19f9; border-top:1px solid #684527; box-shadow:0 -10px 32px #0007; }
.order-footer__dot { width:8px; height:8px; border-radius:100%; background:var(--orange); box-shadow:0 0 0 4px #f7a3471c; }

@media (min-width:700px) {
  .brand-hero { padding:45px 25px 48px; }
  .brand-hero__inner { gap:32px; }
  .brand-logo { flex-basis:145px; height:145px; }
  .page-shell { padding-inline:30px; }
  .offer { margin-top:32px; padding:29px 36px; gap:38px; }
  .offer__amount { padding-right:38px; }
  .browse { display:flex; align-items:end; justify-content:space-between; gap:20px; }
  .browse__title { margin:0 0 3px; }
  .view-switch { min-width:330px; }
  .category-jump { margin-inline:-30px; padding-inline:30px; }
  .menu-item { padding:19px 24px; }
  .popular-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1000px) {
  body::before, body::after { content:""; position:fixed; top:220px; height:390px; width:260px; pointer-events:none; border:1px solid #f69a3e15; border-radius:50%; z-index:-1; }
  body::before { left:-160px; box-shadow:0 0 0 25px #f69a3e0b, 0 0 0 55px #f69a3e08; }
  body::after { right:-160px; box-shadow:0 0 0 25px #f69a3e0b, 0 0 0 55px #f69a3e08; }
}
@media (max-width:400px) {
  .brand-hero { padding:22px 15px 24px; }
  .brand-hero__inner { gap:14px; }
  .brand-logo { flex-basis:96px; height:96px; padding:4px; }
  .brand-eyebrow { font-size:.58rem; margin-bottom:6px; }
  .brand-intro h1 { font-size:1.34rem; }
  .brand-tagline { font-size:.72rem; }
  .offer { gap:14px; padding:17px 16px; }
  .offer__amount { padding-right:15px; }
  .offer__amount strong { font-size:3.1rem; }
  .offer__off { font-size:.88rem; }
  .offer__copy h2 { font-size:1.27rem; }
  .offer__copy p:last-child { font-size:.72rem; }
  .category-jump { gap:10px; }
  .category-jump label { font-size:.56rem; }
  .category-jump select { font-size:.78rem; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .view-switch__button { transition:none; } }