/* ===== على كل باب… نور — Kandeel Group film script experience ===== */
@import url("fonts.css");

:root{
  --ink:#0d0c0b;            /* deeper than Cod Gray for the night */
  --cod:#151515;            /* Cod Gray */
  --kumera:#935726;         /* Kumera */
  --amber:#CFC4B1;          /* Soft Amber */
  --tango:#F27A21;          /* Tango */
  --dawn:#F2E8E5;           /* Dawn Pink */
  --flame:#ffc777;
  --glow:#ffb35c;
  --ar-display:"Amiri", "Noto Naskh Arabic", serif;
  --ar-ui:"Alexandria", "Segoe UI", Tahoma, sans-serif;
  --lat:"Fraunces", Georgia, serif;
  --vh:1vh;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--ink);color:var(--dawn);-webkit-text-size-adjust:100%}
body{font-family:var(--ar-ui);font-weight:300;line-height:1.7;background:var(--ink);overflow-x:hidden}
body.is-locked{overflow:hidden}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--tango);outline-offset:3px}
.lat,[dir=ltr]{font-family:var(--lat)}

/* ===== Buttons ===== */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:.9em 2.1em;border-radius:999px;font-size:clamp(15px,1.15vw,18px);font-weight:400;letter-spacing:.01em;transition:transform .35s cubic-bezier(.2,.8,.2,1),background .35s,box-shadow .35s;overflow:hidden;isolation:isolate}
.btn small{font-size:.75em;opacity:.65}
.btn--primary{background:linear-gradient(180deg,#ffcf8a,#f2a24a 55%,#d9772a);color:#1a1006;font-weight:600;box-shadow:0 0 0 1px rgba(255,214,150,.5) inset,0 10px 40px -8px rgba(242,122,33,.7)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(255,214,150,.7) inset,0 16px 60px -6px rgba(242,122,33,.9)}
.btn__glow{position:absolute;inset:-40%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.55),transparent 45%);z-index:-1;animation:breathe 3.2s ease-in-out infinite}
.btn--ghost{border:1px solid rgba(242,232,229,.28);background:rgba(13,12,11,.35);backdrop-filter:blur(6px)}
.btn--ghost:hover{border-color:var(--flame);color:var(--flame)}
@keyframes breathe{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.7;transform:scale(1.05)}}

.pill{display:inline-flex;align-items:center;gap:.45em;padding:.45em 1.05em;border-radius:999px;font-size:13px;background:rgba(242,232,229,.08);border:1px solid rgba(242,232,229,.18);transition:.3s}
.pill:hover{border-color:var(--flame);color:var(--flame)}
.pill--ghost{background:transparent}
.pill[aria-pressed=true]{color:var(--flame);border-color:rgba(255,199,119,.55)}
.ico-sound{width:14px;height:12px;display:inline-block;background:
 linear-gradient(currentColor,currentColor) 0 50%/3px 5px no-repeat,
 linear-gradient(currentColor,currentColor) 4px 50%/2px 9px no-repeat,
 linear-gradient(currentColor,currentColor) 8px 50%/2px 12px no-repeat,
 linear-gradient(currentColor,currentColor) 12px 50%/2px 7px no-repeat;opacity:.9}
.pill[aria-pressed=false] .ico-sound{opacity:.35}
.tag{display:inline-block;padding:.15em .75em;border-radius:6px;border:1px solid rgba(255,199,119,.45);color:var(--flame);font-size:.82em;font-weight:400;margin-inline-end:.5em;white-space:nowrap}
.tag--dim{opacity:.7}

/* ===== Top bar ===== */
.topbar{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px clamp(14px,3vw,36px);background:linear-gradient(180deg,rgba(13,12,11,.8),rgba(13,12,11,0));opacity:0;transform:translateY(-12px);transition:.6s;pointer-events:none}
body.is-in .topbar{opacity:1;transform:none;pointer-events:auto}
.topbar__logo{height:14px;width:auto;opacity:.9}
.topbar__actions{display:flex;gap:8px}
.lanterns{display:flex;gap:clamp(6px,1.1vw,14px);align-items:center}
.lantern-dot{position:relative;width:10px;height:14px;border-radius:3px 3px 4px 4px;border:1px solid rgba(207,196,177,.35);transition:.4s}
.lantern-dot::before{content:"";position:absolute;left:50%;top:-5px;width:1px;height:4px;background:rgba(207,196,177,.4)}
.lantern-dot.is-lit{background:radial-gradient(circle at 50% 60%,#fff2cf,var(--glow) 55%,#a5521c);border-color:#ffcf8a;box-shadow:0 0 10px 1px rgba(255,170,80,.55)}
.lantern-dot.is-current{transform:scale(1.35);box-shadow:0 0 16px 4px rgba(255,170,80,.75)}
.lantern-dot:hover{border-color:var(--flame)}
.lantern-dot::after{content:"";position:absolute;inset:-8px -6px}

/* ===== Intro ===== */
.intro{position:relative;height:100vh;height:100svh;min-height:560px;display:grid;place-items:center;overflow:hidden}
.intro__media,.intro__media img,.intro__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.intro__media img{animation:introZoom 18s ease-out both}
.intro__media video{opacity:0;transition:opacity 1.2s}
.intro__media video.is-ready{opacity:1}
@keyframes introZoom{from{transform:scale(1.12)}to{transform:scale(1.0)}}
.intro__veil{position:absolute;inset:0;background:
  radial-gradient(ellipse 60% 55% at 50% 52%,rgba(13,12,11,.15),rgba(13,12,11,.82) 70%),
  linear-gradient(180deg,rgba(13,12,11,.55),rgba(13,12,11,.1) 30%,rgba(13,12,11,.75))}
.intro__content{position:relative;z-index:2;text-align:center;padding:0 22px;max-width:980px;display:flex;flex-direction:column;align-items:center}
.intro__logo{width:clamp(180px,22vw,320px);height:auto;margin-bottom:clamp(18px,3vh,34px);opacity:0;animation:fadeUp 1.2s .2s forwards}
.intro__eyebrow{font-size:clamp(13px,1.05vw,16px);letter-spacing:.06em;color:var(--amber);opacity:0;animation:fadeUp 1.2s .4s forwards}
.intro__title{font-family:var(--ar-display);font-weight:700;font-size:clamp(54px,9.2vw,148px);line-height:1.15;margin:.12em 0 .18em;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .12em;text-shadow:0 4px 40px rgba(0,0,0,.6)}
.intro__title span{opacity:0;animation:fadeUp 1.4s forwards}
.intro__title span:nth-child(1){animation-delay:.6s}
.intro__title .dots{animation-delay:1.1s;color:var(--amber)}
.intro__title .nour{animation:nourIn 2.2s 1.5s forwards;color:#ffe2ad}
@keyframes nourIn{0%{opacity:0;text-shadow:none;filter:blur(8px)}60%{opacity:1;filter:none}100%{opacity:1;text-shadow:0 0 28px rgba(255,180,90,.9),0 0 90px rgba(242,122,33,.6)}}
.intro__sub{font-size:clamp(15px,1.35vw,20px);color:rgba(242,232,229,.82);max-width:36em;opacity:0;animation:fadeUp 1.2s 2s forwards}
.intro__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:clamp(22px,4vh,40px) 0 18px;opacity:0;animation:fadeUp 1.2s 2.3s forwards}
.intro__note{font-size:13px;color:rgba(242,232,229,.62);max-width:40em;opacity:0;animation:fadeUp 1.2s 2.6s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.scrollcue{position:absolute;bottom:22px;left:50%;width:22px;height:36px;margin-left:-11px;border:1px solid rgba(242,232,229,.35);border-radius:12px;opacity:0;transition:.6s}
body.is-in .scrollcue{opacity:1}
.scrollcue span{position:absolute;left:50%;top:7px;width:2px;height:7px;margin-left:-1px;background:var(--flame);border-radius:2px;animation:cue 1.8s infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* ===== Door sections ===== */
.chapter{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
.scene{position:absolute;inset:0;overflow:hidden;transform-origin:50% 55%;will-change:transform}
.media{position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;will-change:opacity}
.media.is-on{opacity:1}
.media>img,.media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.scene__shade{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(270deg,rgba(13,12,11,.92) 0%,rgba(13,12,11,.66) 40%,rgba(13,12,11,0) 66%),
  linear-gradient(0deg,rgba(13,12,11,.6),rgba(13,12,11,0) 30%)}

/* wall + door (the wall is the door's giant box-shadow) */
.wall{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:3}
.door{--w:min(40vh,62vw);position:relative;width:var(--w);height:calc(var(--w)*1.72);border-radius:calc(var(--w)/2) calc(var(--w)/2) 4px 4px;box-shadow:0 0 0 250vmax #0d0c0b;perspective:1400px;transform-origin:50% 58%;will-change:transform;margin-top:6vh}
.door__arch{position:absolute;inset:-14px;border-radius:inherit;border:2px solid rgba(207,196,177,.22);border-bottom:0;pointer-events:none}
.door__arch::after{content:"";position:absolute;inset:-12px;border-radius:inherit;border:1px solid rgba(207,196,177,.08);border-bottom:0}
.door__glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 60% 45% at 50% 62%,rgba(255,236,200,.55),rgba(255,170,80,.22) 45%,rgba(242,122,33,0) 75%);opacity:0;mix-blend-mode:screen;pointer-events:none;z-index:2}
.door__leaf{position:absolute;top:0;bottom:0;width:50%;background:
   linear-gradient(90deg,rgba(0,0,0,.35),rgba(255,255,255,.04) 50%,rgba(0,0,0,.35)),
   repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.04) 2px 7px),
   linear-gradient(180deg,#3a2414,#2a190e 60%,#1d1109);
  display:grid;grid-template-rows:1.25fr 1fr .8fr;gap:7%;padding:16% 13% 10%;backface-visibility:hidden;will-change:transform;z-index:1}
.door__leaf--r{right:0;transform-origin:100% 50%;border-radius:0 calc(var(--w)/2) 0 0}
.door__leaf--l{left:0;transform-origin:0 50%;border-radius:calc(var(--w)/2) 0 0 0}
.door__leaf i{border:1px solid rgba(207,160,110,.22);border-radius:3px;box-shadow:inset 0 0 0 4px rgba(0,0,0,.18),inset 0 0 0 5px rgba(207,160,110,.1),inset 0 18px 30px rgba(0,0,0,.35)}
.door__leaf--r i:first-child{border-top-right-radius:calc(var(--w)/2.6)}
.door__leaf--l i:first-child{border-top-left-radius:calc(var(--w)/2.6)}
.knob{position:absolute;top:56%;width:7px;height:7px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#ffe5b0,#b07a35 60%,#5a3a15)}
.door__leaf--r .knob{left:9%}
.door__leaf--l .knob{right:9%}
/* light leak in the seam before opening */
.door__seam{position:absolute;left:50%;top:6%;bottom:0;width:2px;margin-left:-1px;background:linear-gradient(180deg,transparent,#ffd18f 20%,#ffb460);box-shadow:0 0 12px 3px rgba(255,170,80,.6);z-index:2;opacity:.0}
.door__plate{position:absolute;left:50%;top:-11vh;transform:translateX(-50%);text-align:center;white-space:nowrap;z-index:4}
.lamp{width:clamp(26px,3.4vh,40px);margin:0 auto 10px;position:relative}
.lamp svg{width:100%;height:auto;overflow:visible}
.lamp .flame{opacity:.15;transition:opacity .8s}
.lamp .halo{opacity:0;transition:opacity 1s}
.is-lit .lamp .flame{opacity:1;animation:flicker 2.6s infinite}
.is-lit .lamp .halo{opacity:1;animation:flicker 3.4s infinite reverse}
@keyframes flicker{0%,100%{opacity:1}42%{opacity:.86}50%{opacity:.97}71%{opacity:.9}}
.door__num{display:block;font-family:var(--lat);font-weight:300;font-size:clamp(13px,1.6vh,16px);letter-spacing:.32em;color:var(--amber);opacity:.85}
.door__title{display:block;font-family:var(--ar-display);font-weight:700;font-size:clamp(20px,3.4vh,34px);line-height:1.3;color:var(--dawn)}
.door__kicker{display:block;font-size:clamp(11px,1.4vh,13px);color:rgba(207,196,177,.75);letter-spacing:.04em}
.door__hint{position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);font-size:12px;color:rgba(242,232,229,.5);letter-spacing:.05em;z-index:4;white-space:nowrap}

/* script lines — teleprompter */
.script{position:absolute;z-index:4;right:clamp(22px,6vw,110px);top:0;bottom:0;width:min(620px,46vw);display:flex;flex-direction:column;justify-content:center;opacity:0;pointer-events:none}
.script__head{margin-bottom:2.2vh}
.script__head .k{font-size:13px;color:var(--amber);letter-spacing:.05em;display:flex;gap:.7em;align-items:center}
.script__head .k b{font-family:var(--lat);font-weight:500;color:var(--flame);letter-spacing:.12em}
.script__head h2{font-family:var(--ar-display);font-weight:700;font-size:clamp(28px,3.2vw,48px);line-height:1.25;color:var(--dawn)}
.script__win{position:relative;height:min(52vh,460px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 22%,#000 70%,transparent)}
.script__list{position:absolute;inset:0 0 auto 0;will-change:transform;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.line{font-family:var(--ar-display);font-weight:400;font-size:clamp(22px,2.05vw,34px);line-height:1.55;padding:.22em 0;color:rgba(242,232,229,.5);transition:color .7s,text-shadow .7s,opacity .7s;opacity:1;text-shadow:0 2px 14px rgba(0,0,0,.85)}
.line.is-past{color:rgba(242,232,229,.42)}
.line.is-current{color:#fff6e8;opacity:1;text-shadow:0 2px 14px rgba(0,0,0,.9),0 0 22px rgba(255,170,80,.3)}
.line.is-current::before{content:"";display:inline-block;width:.38em;height:.38em;border-radius:50%;background:var(--flame);box-shadow:0 0 10px 2px rgba(255,170,80,.8);margin-inline-end:.45em;vertical-align:middle;transform:translateY(-.08em)}
.line .lt,.tsub .lt{font-family:var(--lat);font-weight:500;unicode-bidi:isolate;direction:ltr;display:inline-block}
.script__foot{margin-top:2vh;font-size:12px;color:rgba(242,232,229,.45);min-height:1.6em}
.next-cue{opacity:0;transition:opacity .6s;pointer-events:none;color:var(--flame);font-size:13px;padding:.5em 1.1em;border:1px solid rgba(255,199,119,.45);border-radius:999px}
.next-cue.is-on{opacity:1;pointer-events:auto}
.script__foot{pointer-events:auto}
.stage.is-title .script{display:none}
.theatre .stage.is-title .script{display:flex}

/* map */
.media--map{background:radial-gradient(ellipse at 40% 45%,#1c1612,#0d0c0b 70%)}
.egmap{position:absolute;top:52%;left:5vw;transform:translateY(-50%);width:min(44vw,calc(76vh*1.23));aspect-ratio:12.8/10.4}
.egmap svg{width:100%;height:100%;overflow:visible}
.egmap .land{fill:rgba(207,196,177,.05);stroke:rgba(207,196,177,.4);stroke-width:.035}
.egmap .nile{fill:none;stroke:rgba(120,160,190,.4);stroke-width:.045}
.egmap .city circle.core{fill:#5a4630;transition:fill .6s}
.egmap .city circle.halo{fill:url(#cityGlow);opacity:0;transition:opacity .9s;transform-box:fill-box;transform-origin:center}
.egmap .city text{font-family:var(--ar-ui);font-size:.42px;fill:rgba(242,232,229,.45);transition:fill .6s}
.egmap .city.is-lit circle.core{fill:#ffe1a6}
.egmap .city.is-lit circle.halo{opacity:1;animation:pulse 2.4s infinite}
.egmap .city.is-lit text{fill:#ffe9c4}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.egmap__inset{position:absolute;left:100%;top:12%;width:42%;min-width:170px}
.maplegend{position:absolute;left:5vw;bottom:7vh;font-size:13px;color:var(--amber)}
.maplegend ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;max-width:min(44vw,560px)}
.maplegend li{color:rgba(242,232,229,.35);transition:color .6s;font-size:13px}
.maplegend li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#5a4630;margin-inline-end:6px;transition:.6s}
.maplegend li.is-lit{color:#ffe9c4}
.maplegend li.is-lit::before{background:#ffe1a6;box-shadow:0 0 8px 2px rgba(255,170,80,.7)}
.maplegend strong{display:block;font-family:var(--ar-display);font-size:clamp(26px,2.6vw,40px);color:#ffe2ad;font-weight:700;line-height:1.2}

/* title card media */
.media--title{display:grid;place-items:center;text-align:center;background:radial-gradient(ellipse at 50% 60%,#2a1a0d,#0d0c0b 70%)}
.media--title .tc{position:relative;z-index:2}
.media--title img.bg{opacity:.35}
.tc__logo{width:clamp(180px,20vw,300px);height:auto;margin:0 auto 3vh}
.tc__t{font-family:var(--ar-display);font-weight:700;font-size:clamp(46px,7vw,110px);line-height:1.2;text-shadow:0 0 40px rgba(255,170,80,.5)}
.tc__t em{font-style:normal;color:#ffe2ad}
.tc__s{font-size:clamp(16px,1.6vw,24px);color:var(--amber);margin-top:1vh}

/* ===== Finale ===== */
.finale{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;padding:12vh 20px}
.finale__light{position:absolute;inset:0;background:radial-gradient(ellipse 45% 55% at 50% 60%,rgba(255,170,80,.28),rgba(242,122,33,.06) 50%,transparent 75%)}
.finale__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.2vh}
.finale__logo{width:clamp(170px,18vw,260px);height:auto;margin-bottom:3vh;opacity:.95}
.finale__eyebrow{color:var(--amber);font-size:15px;letter-spacing:.05em}
.finale__title{font-family:var(--ar-display);font-weight:700;font-size:clamp(50px,8vw,124px);line-height:1.2}
.finale__title em{font-style:normal;color:#ffe2ad;text-shadow:0 0 30px rgba(255,180,90,.9),0 0 90px rgba(242,122,33,.6)}
.finale__tagline{font-family:var(--ar-display);font-size:clamp(20px,2.2vw,32px);color:var(--dawn);opacity:.9;margin-bottom:4vh}

.footer{padding:34px 20px 40px;text-align:center;border-top:1px solid rgba(242,232,229,.08)}
.footer__brands{display:flex;align-items:center;justify-content:center;gap:14px;direction:ltr}
.footer__brands img{height:20px;width:auto;opacity:.85}
.footer__brands .x{color:var(--tango);font-size:18px}
.footer__brands .kg{font-family:var(--lat);font-weight:500;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:var(--amber)}
.footer__note{margin-top:12px;font-size:12px;color:rgba(242,232,229,.42)}

/* sound nudge */
.soundnudge{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:60;display:flex;gap:6px}
.soundnudge[hidden]{display:none}
#nudgeX{padding:.7em .9em}
.soundnudge button{white-space:nowrap}
.soundnudge button{padding:.7em 1.4em;border-radius:999px;background:rgba(20,16,12,.85);border:1px solid rgba(255,199,119,.5);color:var(--flame);font-size:14px;backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.5)}

/* ===== Theatre (film mode) ===== */
.theatre{position:fixed;inset:0;z-index:100;background:#000;opacity:0;visibility:hidden;transition:opacity .8s,visibility 0s .8s}
.theatre.is-open{opacity:1;visibility:visible;transition:opacity .8s}
.theatre__stage{position:absolute;inset:0;overflow:hidden}
.theatre .stage{position:absolute;inset:0;height:100%}
.theatre .scene__shade{background:linear-gradient(0deg,rgba(0,0,0,.78) 0%,rgba(0,0,0,.35) 26%,rgba(0,0,0,0) 48%)}
.theatre .script{right:0;left:0;width:auto;top:auto;bottom:calc(84px + env(safe-area-inset-bottom));justify-content:flex-end;align-items:center;text-align:center;padding:0 6vw}
.theatre .script__head{display:none}
.theatre .script__win{height:auto;min-height:3.4em;overflow:visible;-webkit-mask-image:none;mask-image:none;width:100%}
.theatre .script__list{position:relative;transform:none!important;transition:none;display:grid}
.theatre .line{grid-area:1/1;opacity:0;transition:opacity .25s;font-size:clamp(22px,2.6vw,40px);color:#fff6e8;text-shadow:0 2px 18px rgba(0,0,0,.9),0 0 2px rgba(0,0,0,.9)}
.theatre .line.is-current{opacity:1}
.theatre .line.is-past{transition-duration:.08s}
.theatre .line.is-current::before{display:none}
.theatre .script__foot,.theatre .door__hint{display:none}
.theatre .chapter-badge{position:absolute;top:calc(20px + env(safe-area-inset-top));right:clamp(16px,3vw,40px);z-index:5;text-align:right;opacity:0;transition:opacity .8s}
.theatre .chapter-badge.is-on{opacity:1}
.chapter-badge .k{font-size:12px;color:var(--amber);letter-spacing:.06em}
.chapter-badge .k b{font-family:var(--lat);color:var(--flame);font-weight:500;margin-inline-start:.5em}
.chapter-badge h3{font-family:var(--ar-display);font-size:clamp(20px,2vw,30px);font-weight:700}
.tcontrols{position:absolute;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:center;gap:10px;padding:12px clamp(12px,3vw,32px) calc(14px + env(safe-area-inset-bottom));background:linear-gradient(0deg,rgba(0,0,0,.85),rgba(0,0,0,0));transition:opacity .6s}
.theatre.is-idle .tcontrols{opacity:0}
.theatre.is-idle{cursor:none}
.tbtn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(242,232,229,.25);display:grid;place-items:center;font-size:15px;flex:none;transition:.3s}
.tbtn:hover{border-color:var(--flame);color:var(--flame)}
.tbtn--big{width:50px;height:50px;background:rgba(255,199,119,.12);border-color:rgba(255,199,119,.5);color:var(--flame)}
.tprogress{flex:1;display:flex;gap:4px;height:22px;align-items:center;cursor:pointer;direction:rtl}
.tprogress .seg{position:relative;height:3px;background:rgba(242,232,229,.18);border-radius:2px;overflow:hidden}
.tprogress .seg i{position:absolute;inset:0 0 0 auto;width:0;background:linear-gradient(270deg,#ffd9a0,var(--tango));display:block}
.tprogress .seg:hover{height:5px}
.tstart{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(0,0,0,.6)}

@media (max-width: 820px){
  .topbar{padding:10px 12px}
  .topbar__logo{display:none}
  .pill .lbl{display:none}
  .pill{padding:.5em .8em}
  .lanterns{gap:7px}
  .scene__shade{background:linear-gradient(0deg,rgba(13,12,11,.95) 0%,rgba(13,12,11,.82) 38%,rgba(13,12,11,.15) 66%,rgba(13,12,11,.2) 100%)}
  .script{left:20px;right:20px;width:auto;top:auto;bottom:calc(18px + env(safe-area-inset-bottom));justify-content:flex-end}
  .script__head{margin-bottom:1vh}
  .script__head h2{font-size:26px}
  .script__win{height:34vh}
  .line{font-size:21px;line-height:1.5}
  .door{--w:min(34vh,64vw);margin-top:9vh}
  .door__plate{top:-12.5vh}
  .egmap{left:50%;top:30%;transform:translate(-50%,-50%);width:78vw}
  .maplegend ul{display:none}
  .egmap__inset{display:none}
  .maplegend{left:auto;right:20px;top:calc(64px + env(safe-area-inset-top));bottom:auto;text-align:right}
  .theatre .script{bottom:calc(78px + env(safe-area-inset-bottom));padding:0 18px}
  .theatre .line{font-size:20px}
  .theatre .egmap{top:38%}
  .tcontrols{gap:6px;flex-wrap:wrap}
  .tcontrols .tag{display:none}
  .tbtn{width:36px;height:36px}
  .tbtn--big{width:44px;height:44px}
  .theatre .chapter-badge h3{font-size:18px}
  .intro__note{font-size:12px}
}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;transition-duration:.2s!important}
}

/* door name plate */
.door__label{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);z-index:3;text-align:center;width:84%;padding:1.1em .5em 1em;background:linear-gradient(180deg,rgba(20,14,9,.82),rgba(13,10,7,.9));border:1px solid rgba(207,160,110,.38);border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 3px rgba(0,0,0,.3),inset 0 0 0 4px rgba(207,160,110,.12);pointer-events:none}
.door__label .door__num{margin-bottom:.3em}
.door__label .door__kicker{margin-top:.35em}
.door__plate{top:auto;bottom:calc(100% + 18px)}

.theatre .maplegend ul{display:none}
.theatre .maplegend{bottom:auto;top:14vh}