/* سفح · المنيو جبل */
:root{
  --sand:#EDE4D6;--cream:#F8F3EB;--coffee:#2E2119;--ember:#A45A32;
  --ease:cubic-bezier(.16,1,.3,1);
    --paper:#EDE4D6;--ink:#2E2119;--ink-2:rgba(46,33,25,.74);--hair:rgba(46,33,25,.2);--panel:#F8F3EB;--knob:#F8F3EB;--knob-ink:#2E2119;
  --safe-b:env(safe-area-inset-bottom,0px);
}
.t0{--paper:#EDE4D6;--panel:#F8F3EB}
.t1{--paper:#DCC4A8;--panel:#EDE4D6;--ink-2:rgba(46,33,25,.82);--hair:rgba(46,33,25,.26)}
.t2{--paper:#2E2119;--ink:#F8F3EB;--ink-2:rgba(248,243,235,.76);--hair:rgba(248,243,235,.22);--panel:#2E2119;--knob:#F8F3EB;--knob-ink:#2E2119}

*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;scrollbar-width:none;transition:background-color .9s ease}
html::-webkit-scrollbar{display:none}
html.lock{overflow:hidden}
@media (hover:none) and (pointer:coarse){html.js{scroll-snap-type:y mandatory}}
body{margin:0;color:var(--ink);font-family:var(--ar);font-size:16px;line-height:1.65;overflow-x:clip;transition:color .9s ease}
h1,h2,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:2px}
.t2 :focus-visible{outline-color:var(--cream)}
.num,.lat{font-family:var(--lat)}
bdi{unicode-bidi:isolate}
.skip{position:fixed;inset-block-start:8px;inset-inline-start:8px;z-index:60;background:var(--coffee);color:var(--cream);padding:8px 14px;transform:translateY(-200%);transition:transform .2s var(--ease)}
.skip:focus{transform:none}

/* الأرض */
#terrain{position:fixed;inset:0;inline-size:100%;block-size:100lvh;display:block;touch-action:pan-y;z-index:0;cursor:grab;opacity:0;transition:opacity .5s ease}
#terrain.drag{cursor:grabbing}
.gl #terrain,.flat #terrain{opacity:1}
.no-js #terrain,.no-js #pins,.no-js .seg,.no-js .dock,.no-js .alti,.no-js .cue,.no-js .toast,.no-js dialog{display:none}

/* دبابيس الخريطة: الإحداثيات من الجسم، فالحاوية ltr والنص داخلها عربي */
#pins{position:fixed;inset:0;overflow:hidden;z-index:2;pointer-events:none;direction:ltr}
.pin{position:absolute;inset-block-start:0;inset-inline-start:0;display:block;pointer-events:auto;will-change:transform;white-space:nowrap;opacity:0;transition:opacity .28s ease;min-block-size:44px;min-inline-size:44px}
.pin.show{opacity:1}
.pin.off{pointer-events:none}
.mg-off{margin-block:8px 0}
.pin .tx{display:block;direction:rtl;text-align:center;line-height:1.3;color:var(--ink);text-shadow:2px 0 0 var(--paper),-2px 0 0 var(--paper),0 2px 0 var(--paper),0 -2px 0 var(--paper),1.5px 1.5px 0 var(--paper),-1.5px 1.5px 0 var(--paper),1.5px -1.5px 0 var(--paper),-1.5px -1.5px 0 var(--paper),0 0 5px var(--paper)}
.pin b{display:block;font-weight:500;font-size:14px}
.pin em{display:block;font-style:normal;font-family:var(--lat);font-size:12px;font-weight:500}
.pin .stem{display:block;inline-size:1px;block-size:22px;background:var(--ink);margin:3px auto 0}
.pin .dot{display:block;inline-size:7px;block-size:7px;border-radius:50%;background:var(--ink);margin:-1px auto 0}
.pin.on .stem,.pin.on .dot{background:var(--ember)}
.t2 .pin.on .stem,.t2 .pin.on .dot{background:var(--cream)}
.pin.tiny .tx,.pin.tiny .stem{visibility:hidden}
.pin.head{pointer-events:none}
.pin.head b{font-weight:600}
@media (hover:hover) and (pointer:fine){.pin:hover b{text-decoration:underline;text-underline-offset:3px}}

/* الشريط العلوي */
.bar{position:fixed;inset-block-start:0;inset-inline:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,3vw,40px);pointer-events:none}
.bar>*{pointer-events:auto}
.mark{font-family:var(--ar-d);font-weight:700;font-size:28px;line-height:1.3;text-decoration:none}
.table{font-size:14px;white-space:nowrap}
.seg{position:relative;display:grid;grid-template-columns:repeat(3,1fr);inline-size:min(330px,54vw);border:1px solid var(--ink);border-radius:999px;background:var(--paper);transition:background-color .9s ease,border-color .9s ease}
.seg button{position:relative;z-index:1;min-block-size:42px;font-size:14px;border-radius:999px;transition:color .25s ease}
.seg button[aria-pressed="true"]{color:var(--paper)}
.seg .knob{position:absolute;inset-block:0;inset-inline-start:0;inline-size:33.334%;background:var(--ink);border-radius:999px;transition:transform .5s var(--ease),background-color .9s ease}
.t1 .seg .knob{transform:translateX(-100%)}
.t2 .seg .knob{transform:translateX(-200%)}

/* مقياس الارتفاع */
.alti{position:fixed;z-index:10;inset-inline-end:clamp(16px,3vw,40px);inset-block:96px 96px;display:flex;flex-direction:column;align-items:flex-end;pointer-events:none;opacity:0;transition:opacity .4s ease}
.past-hero .alti{opacity:1}
.alti-read{font-size:15px;display:flex;gap:4px;align-items:baseline;direction:rtl;margin-block-end:10px;text-shadow:0 0 4px var(--paper),0 0 4px var(--paper)}
.alti-read b{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2}
.alti-read i{font-style:normal}
.alti-rule{position:relative;flex:1;inline-size:14px;border-inline-end:1px solid var(--ink)}
.alti-rule u{position:absolute;inset-inline-end:0;block-size:1px;inline-size:8px;background:var(--ink);text-decoration:none}
.alti-rule s{position:absolute;inset-inline-end:-1px;block-size:2px;inline-size:14px;background:var(--ember);will-change:transform;inset-block-start:0}
.t2 .alti-rule s{background:var(--cream)}

/* الأقسام */
main{position:relative;z-index:5;pointer-events:none}
main a,main button{pointer-events:auto}
.hero,.stop,.summit{min-block-size:100vh;min-block-size:100svh;scroll-snap-align:start;position:relative;display:flex}
.hero h1{position:absolute;inset-block-end:18vh;inset-inline:0;text-align:center;font-family:var(--ar-d);font-weight:700;font-size:clamp(120px,26vw,360px);line-height:1.3;transition:opacity .6s ease}
.gl .hero h1,.flat .hero h1{position:absolute;inline-size:1px;block-size:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.hero-t{position:absolute;inset-inline-start:clamp(16px,3vw,40px);inset-block-start:clamp(92px,13vh,130px);max-inline-size:min(440px,calc(100vw - 32px))}
.greet{font-family:var(--ar-d);font-weight:700;font-size:clamp(30px,3.4vw,50px);line-height:1.3;text-shadow:0 0 6px var(--paper),0 0 6px var(--paper),0 0 12px var(--paper)}
.greet-s{margin-block-start:6px;font-size:clamp(16px,1.3vw,19px);line-height:1.6;text-shadow:0 0 4px var(--paper),0 0 4px var(--paper),0 0 8px var(--paper)}
.cue{position:absolute;inset-block-end:clamp(84px,12vh,110px);inset-inline-start:clamp(16px,3vw,40px);display:flex;align-items:center;gap:10px;min-block-size:44px;text-decoration:none;font-weight:500;text-shadow:0 0 4px var(--paper),0 0 4px var(--paper)}
.cue i{display:block;inline-size:1px;block-size:44px;background:var(--ink);position:relative}
.cue i::after{content:"";position:absolute;inset-block-end:0;inset-inline-start:-3px;inline-size:7px;block-size:7px;border-radius:50%;background:var(--ember)}

.stop,.summit{align-items:flex-end;padding:96px clamp(16px,3vw,40px) clamp(84px,11vh,110px)}
.eb{font-size:15px;font-weight:500;display:flex;gap:10px;align-items:baseline}
.eb small{font-size:13px;font-weight:400;color:var(--ink-2)}
.stop h2,.summit h2{font-family:var(--ar-d);font-weight:700;line-height:1.3;font-size:clamp(46px,7.4vw,118px);margin-block:2px 8px;text-wrap:balance}
.stop .d,.summit .d{font-size:clamp(16px,1.5vw,21px);line-height:1.6;max-inline-size:34em}
.stop .st{display:none}
.plate{max-inline-size:min(62vw,860px);text-shadow:0 0 5px var(--paper),0 0 5px var(--paper),0 0 10px var(--paper),0 0 16px var(--paper);opacity:1;transition:opacity .35s ease}
.alt-l{display:flex;gap:6px;align-items:baseline;font-size:15px}
.alt-l b{font-size:19px;font-weight:600}
.open{display:inline-flex;align-items:center;justify-content:center;min-block-size:48px;padding-inline:26px;margin-block-start:16px;background:var(--ember);color:var(--cream);border-radius:999px;font-weight:500;text-shadow:none;transition:transform .14s var(--ease)}
.open:active,.add:active,.want:active,.dock-b:active{transform:scale(.97)}
.want{display:inline-flex;align-items:center;min-block-size:52px;padding-inline:34px;margin-block-start:20px;background:var(--ember);color:var(--cream);border-radius:999px;font-weight:600;font-size:18px;text-decoration:none;text-shadow:none;transition:transform .14s var(--ease)}
.summit h2{font-size:clamp(40px,6vw,92px)}

/* الدوك */
.dock{position:fixed;z-index:21;inset-block-end:calc(36px + var(--safe-b));inset-inline-start:clamp(16px,3vw,40px);display:flex;gap:8px}
.dock-b{min-block-size:46px;padding-inline:20px;border:1px solid var(--ink);border-radius:999px;background:var(--paper);font-size:15px;font-weight:500;transition:transform .14s var(--ease),background-color .9s ease,border-color .9s ease}
.dock-o.has{background:var(--ember);border-color:var(--ember);color:var(--cream)}
.fine{position:fixed;z-index:21;inset-block-end:calc(8px + var(--safe-b));inset-inline-start:clamp(16px,3vw,40px);font-size:12px;line-height:20px;text-shadow:0 0 3px var(--paper),0 0 3px var(--paper),0 0 6px var(--paper);text-underline-offset:2px}
.toast{position:fixed;z-index:30;inset-block-start:78px;inset-inline:auto;inset-inline-start:50%;translate:50% 0;inline-size:min(520px,calc(100vw - 32px));padding:14px 18px;background:var(--coffee);color:var(--cream);border-radius:14px;font-size:15px;line-height:1.6;opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .3s var(--ease);pointer-events:none}
.t2 .toast{background:var(--cream);color:var(--coffee)}
.toast.on{opacity:1;transform:none}

html.lock main,html.lock .bar,html.lock .alti,html.lock .dock,html.lock .fine{opacity:0;transition:opacity .25s ease}
main,.bar,.dock,.fine{transition:opacity .35s ease}

/* الأوراق */
.sheet{position:fixed;margin:0;padding:0;border:0;color:var(--ink);background:var(--panel);inset-block:0;inset-inline-start:0;inset-inline-end:auto;block-size:100vh;block-size:100dvh;max-block-size:none;inline-size:min(600px,48vw);max-inline-size:none;display:none;flex-direction:column;overflow:hidden;transform:translateX(100%);opacity:0;transition:transform .5s var(--ease),opacity .25s ease,background-color .9s ease}
.sheet[open]{display:flex}
.sheet.in{transform:none;opacity:1}
.sheet::backdrop{background:transparent}
.sheet-s{inline-size:min(460px,48vw)}
.t2 .sheet{border-inline-end:1px solid var(--hair)}
.grip{display:none}
.x{position:absolute;inset-block-start:14px;inset-inline-end:14px;inline-size:44px;block-size:44px;z-index:3;border-radius:50%}
.x::before,.x::after{content:"";position:absolute;inset-block-start:21px;inset-inline-start:11px;inline-size:22px;block-size:1.5px;background:currentColor}
.x::before{transform:rotate(45deg)}
.x::after{transform:rotate(-45deg)}
.sheet-b{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:28px clamp(20px,3vw,40px) 24px;scrollbar-width:thin}
.sheet-f{padding:12px clamp(20px,3vw,40px) calc(16px + var(--safe-b));border-block-start:1px solid var(--hair)}
.sheet h2{font-family:var(--ar-d);font-weight:700;font-size:clamp(34px,3.6vw,54px);line-height:1.3;margin-block:4px 6px;padding-inline-end:44px}
.sh-alt{font-size:14px;color:var(--ink-2)}
.sh-alt b{color:var(--ink);font-weight:600;font-size:16px}
.sh-story{font-size:18px;line-height:1.7;margin-block:16px 12px;max-inline-size:32em}
.notes{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:15px;color:var(--ink-2)}
.notes li{position:relative;padding-inline-start:12px}
.notes li::before{content:"";position:absolute;inset-inline-start:0;inset-block-start:.72em;inline-size:5px;block-size:5px;border-radius:50%;background:var(--ember)}
.brew{margin-block-start:22px;padding-block-start:18px;border-block-start:1px solid var(--hair)}
.mth{display:flex;flex-wrap:wrap;gap:6px}
.mth button{min-block-size:44px;padding-inline:18px;border:1px solid var(--hair);border-radius:999px;font-size:15px;transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.mth button[aria-pressed="true"]{background:var(--ink);color:var(--panel);border-color:var(--ink)}
.brew-read{margin-block:16px 6px}
.brew-read b{display:block;font-family:var(--ar-d);font-weight:700;font-size:clamp(30px,3vw,42px);line-height:1.3}
.brew-read span{font-size:15px;color:var(--ink-2)}
.brew-draw{display:grid;grid-template-columns:minmax(130px,42%) 1fr;gap:18px;align-items:end;margin-block-start:10px}
#brew-v{inline-size:100%;block-size:auto;display:block;color:var(--ink);overflow:visible}
#brew-v path{fill:none;stroke:currentColor;stroke-width:.8;vector-effect:non-scaling-stroke;stroke-linecap:round}
#brew-v .bk{opacity:.28}
#brew-v .rim{stroke-width:1.5}
#brew-v .bed{stroke-width:1.1}
#brew-v .liq{stroke:var(--ember);stroke-width:1.2;opacity:1}
#brew-v .liq.bk{opacity:.55}
.t2 #brew-v .liq{stroke:#D98A5C}
#brew-c{inline-size:100%;block-size:78px;display:block;overflow:visible}
#brew-c path{fill:none;vector-effect:non-scaling-stroke;stroke:currentColor}
#brew-c .base{stroke-width:1;opacity:.35}
#brew-c .prof{stroke:var(--ember);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.t2 #brew-c .prof{stroke:#D98A5C}
.steps{display:grid;gap:2px;margin-block-start:10px;font-size:14px;line-height:1.5}
.steps li{display:flex;justify-content:space-between;gap:12px;color:var(--ink-2);transition:color .2s ease}
.steps li.on{color:var(--ink);font-weight:500}
.steps bdi{white-space:nowrap}
.add{inline-size:100%;min-block-size:52px;background:var(--ember);color:var(--cream);border-radius:999px;font-weight:600;font-size:17px;transition:transform .14s var(--ease),opacity .2s ease}
.add:disabled{background:transparent;color:var(--ink);outline:1px dashed var(--ink);outline-offset:-1px;cursor:not-allowed}
.sub{font-size:14px;color:var(--ink-2);margin-block-end:12px}
.mg{margin-block-start:18px}
.mg h3{font-family:var(--ar-d);font-weight:700;font-size:18px;line-height:1.3;margin:0;display:flex;gap:10px;align-items:baseline;padding-block-end:6px;border-block-end:1px solid var(--ink)}
.mg h3 small{font-family:var(--ar);font-weight:400;font-size:13px;color:var(--ink-2)}
.ml{display:grid;grid-template-columns:1fr auto;gap:2px 14px;inline-size:100%;min-block-size:56px;padding-block:8px;text-align:start;border-block-end:1px solid var(--hair);align-items:center}
.ml b{font-weight:500;font-size:16px;line-height:1.4}
.ml span{grid-column:1;font-size:13px;color:var(--ink-2);line-height:1.4}
.ml em{grid-row:1/span 2;grid-column:2;font-style:normal;font-family:var(--lat);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.ord li{display:flex;justify-content:space-between;align-items:center;gap:12px;min-block-size:56px;border-block-end:1px solid var(--hair)}
.ord button{min-block-size:44px;padding-inline:12px;font-size:14px;color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
#ord-empty{margin-block-start:10px}
#order .sub:last-child{margin-block-start:16px}

/* الجوال: هذه هي المنيو من رمز الطاولة */
@media (max-width:767px){
  .bar{padding:10px 14px;gap:10px}
  .mark{font-size:24px}
  .table{font-size:13px}
  .seg{inline-size:auto;flex:1;max-inline-size:230px}
  .seg button{font-size:13px;min-block-size:42px}
  .hero-t{inset-block-start:70px;inset-inline-start:16px}
  .cue{inset-block-end:104px;inset-inline-start:16px}
  .stop,.summit{padding:0}
  .plate{inline-size:100%;max-inline-size:none;background:var(--paper);padding:14px 16px calc(100px + var(--safe-b));border-block-start:1px solid var(--ink);text-shadow:none;pointer-events:none;transition:background-color .9s ease}
  .stop h2,.summit h2{font-size:clamp(34px,10.4vw,46px);margin-block:0 2px}
  .stop .d{font-size:16px}
  .alt-l{font-size:14px}
  .open{min-block-size:48px;margin-block-start:10px;inline-size:100%}
  .want{inline-size:100%;justify-content:center}
  .alti{inset-block:70px auto;block-size:30vh;inset-inline-end:10px}
  .alti-read b{font-size:18px}
  .alti-read{font-size:12px;margin-block-end:4px}
  .alti-rule{inline-size:10px}
  .alti-rule u{inline-size:5px}
  .alti-rule s{inline-size:10px}
  .dock{inset-inline:12px;inset-block-end:calc(28px + var(--safe-b));gap:8px}
  .dock-b{flex:1;min-block-size:48px;padding-inline:8px}
  .fine{inset-inline:12px;inset-block-end:calc(4px + var(--safe-b));text-align:center;font-size:11px}
  .toast{inset-block-start:64px}
  .pin b{font-size:13px}
  .sheet,.sheet-s{inset-block:auto 0;inset-inline:0;inline-size:100%;block-size:auto;max-block-size:76dvh;border-radius:20px 20px 0 0;transform:translateY(100%);border-block-start:1px solid var(--ink)}
  .sheet-s{max-block-size:84dvh}
  .sheet.in{transform:none}
  .sheet.drag{transition:none}
  .grip{display:block;padding:10px 0 6px;touch-action:none;cursor:grab}
  .grip i{display:block;inline-size:42px;block-size:4px;border-radius:4px;background:var(--hair);margin:0 auto}
  .x{inset-block-start:6px;inset-inline-end:6px}
  .sheet-b{padding:2px 16px 14px}
  .sheet-f{padding:10px 16px calc(12px + var(--safe-b))}
  .sheet h2{font-size:32px}
  .sh-story{font-size:16px;margin-block:10px}
  .brew{margin-block-start:14px;padding-block-start:12px}
  .brew-read b{font-size:28px}
  .brew-read{margin-block:10px 2px}
  .brew-draw{grid-template-columns:112px 1fr;gap:12px}
  .steps{font-size:13px}
  #brew-c{block-size:54px}
}
@media (max-width:767px) and (max-height:700px){
  .hero-t{inset-block-start:60px}
  .greet{font-size:26px}
  .greet-s{font-size:15px;margin-block-start:2px}
  .cue{inset-block-end:80px;min-block-size:34px}
  .cue i{block-size:28px}

  .stop h2{font-size:30px}
  .open{min-block-size:44px;margin-block-start:6px}
  .plate{padding-block-start:10px}
}

/* بلا JS: قائمة مقروءة على ورق رملي */
.no-js .bar{position:static;padding:20px 16px}
.no-js .hero,.no-js .stop,.no-js .summit{min-block-size:0;display:block;padding:16px}
.no-js .hero{padding-block:8px 24px}
.no-js .hero h1{position:static;text-align:start;font-size:clamp(90px,24vw,200px);line-height:1.3;padding-block-end:.3em}
.no-js .hero-t{position:static}
.no-js .plate{max-inline-size:none;background:none;border:0;padding:0;text-shadow:none}
.no-js .stop{border-block-start:1px solid var(--hair)}
.no-js .stop h2{font-size:clamp(28px,5vw,46px)}
.no-js .stop .st{display:block;margin-block-start:6px}
.no-js .summit h2{font-size:clamp(28px,5vw,46px)}
.no-js main{pointer-events:auto}
.no-js .fine{position:static;display:block;padding:16px;text-align:start}

/* بديل بلا WebGL: خريطة ثابتة مقصودة تحت المنيو */
.flat .alti-rule s{transition:transform .2s ease}

@media (prefers-reduced-motion:reduce){
  .sheet,.toast,.skip,.seg .knob,.pin{transition:opacity .2s ease,background-color .2s ease,color .2s ease}
  .sheet,.sheet-s{transform:none}
  html,body{transition:none}
  .open:active,.add:active,.want:active,.dock-b:active{transform:none}
}