/* VORLUX Academy — „Bab Almanya“ PRODUCT (2026-10-28, fix-all wave).
   Upgraded from the prototype stylesheet (same filename, per integration
   pack §0). Follows the site theme in both themes (W-02) on the flagship
   digital background (A-1); restrained motion: transform/opacity only.
   Legacy .bab-top/.bab-foot rules retained so the frozen prototype page
   still renders its frame. */

.bab [hidden]{display:none!important}
.bab .grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bab-dari{font-size:1.25rem;font-weight:700;color:var(--ink);margin:0 0 10px;line-height:1.9}
.bab-dari-sm{font-size:1rem;font-weight:600;color:var(--body)}
[dir="rtl"]{text-align:right}

/* ——— Legacy prototype frame (frozen page only) ——— */
.bab-top{position:sticky;top:0;z-index:60;background:var(--header-bg);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:2px solid var(--line)}
.bab-top-in{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px}
.bab-brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:800;font-size:1.1rem;letter-spacing:.02em}
.bab-brand:hover{text-decoration:none}
.bab-brand img{border-radius:50%}
.bab-brand small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.24em;color:var(--mut);text-transform:uppercase}
.bab-proto-pill{font-size:.8rem;font-weight:800;letter-spacing:.06em;color:var(--ink);
  border:2px solid var(--line2);border-radius:10px 4px 10px 10px;padding:6px 14px;background:var(--panel)}
.bab-foot{border-top:2px solid var(--line);margin-top:20px}
.bab-foot p{max-width:720px;margin:0 auto;padding:22px 20px 30px;text-align:center;color:var(--mut);font-size:.86rem}

/* ——— Head ——— */
.bab-head{text-align:center;padding:44px 20px 8px;max-width:820px}
.bab-kicker{font-size:.78rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase;color:var(--brand);margin:0 0 14px}
.bab-head h1{font-size:clamp(2.4rem,6vw,3.9rem);margin-bottom:.35em}
.bab-lead{max-width:620px;margin:0 auto 8px;font-size:1.06rem}
.bab-head .bab-dari-sm{max-width:620px;margin:0 auto}
.bab-mode-note{max-width:640px;margin:20px auto 0;text-align:left;background:var(--panel);
  border:2px solid var(--line);border-radius:16px 6px 16px 16px;box-shadow:var(--shadow);padding:16px 18px}
.bab-mode-note p{margin:0 0 6px}
.bab-mode-note .bab-dari-sm{margin:0 0 10px}
.bab-mode-note .actions{display:flex;gap:10px;flex-wrap:wrap}

/* ——— Map ——— */
.bab-map-sec{padding-top:22px}
.bab-map{position:relative;border:2px solid var(--line);border-radius:24px 8px 24px 24px;
  background:
    radial-gradient(700px 300px at 12% 0%,rgba(46,155,255,.13),transparent 60%),
    radial-gradient(700px 320px at 88% 100%,rgba(124,92,255,.12),transparent 60%),
    linear-gradient(180deg,var(--panel),var(--panel2));
  box-shadow:var(--shadow-lg);padding:30px 26px 18px;overflow:hidden}
.bab-route{position:absolute;left:0;right:0;top:0;width:100%;height:150px;pointer-events:none}
.bab-route-track{stroke:rgba(140,180,240,.28);stroke-width:1.6;stroke-dasharray:.5 3.4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.bab-route-done{stroke:url(#babGrad);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px rgba(56,225,255,.55))}
.bab-stops{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bab-stop{background:var(--panel);border:2px solid var(--line);border-radius:18px 6px 18px 18px;overflow:hidden;
  cursor:pointer;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.bab-stop:hover{transform:translateY(-3px)}
.bab-stop:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.bab-stop-photo{position:relative;aspect-ratio:3/2;background:var(--navy-deep)}
.bab-stop-photo img{width:100%;height:100%;object-fit:cover}
/* W-08: locked = designed veil + lock badge, full contrast in both themes
   (the prototype's 55 % card opacity wash is gone). */
.bab-stop.is-locked .bab-stop-photo img{filter:saturate(.45) brightness(.82)}
.bab-stop.is-locked .bab-stop-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,12,24,.18),rgba(6,12,24,.42))}
.bab-stop.is-locked .bab-stop-photo::before{content:"";position:absolute;left:50%;top:50%;z-index:2;
  width:34px;height:34px;transform:translate(-50%,-50%);opacity:.95;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Crect x='5' y='10.4' width='14' height='9.6' rx='2.4'/%3E%3Cpath d='M8 10.4V7.6a4 4 0 0 1 8 0v2.8'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
.bab-stop-num{position:absolute;top:8px;left:8px;z-index:3;width:26px;height:26px;border-radius:50%;
  background:rgba(8,17,32,.72);color:#fff;font-size:.8rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.bab-stop-body{padding:12px 13px 14px}
.bab-stop-body h3{font-size:1.02rem;margin:0 0 2px}
.bab-stop-country{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin:0 0 8px}
.bab-stop-state{margin:0}
.bab-chip{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.05em;border-radius:10px 4px 10px 10px;padding:4px 10px}
.bab-chip-now{background:var(--blue-pale);color:var(--blue-d);border:1.5px solid var(--blue)}
.bab-chip-lock{background:#0c1a36;color:#eaf2ff;border:1.5px solid #0c1a36}
.bab-chip-full{background:#0c1a36;color:#ffd977;border:1.5px solid #c9a44e}
.bab-chip-done{background:var(--green-pale);color:var(--good-d);border:1.5px solid var(--good)}
.bab-stop.is-current{border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,155,255,.22),var(--shadow)}
.bab-stop.is-done{border-color:var(--good)}
.bab-falke-slot{position:absolute;right:6px;bottom:0;z-index:3;width:64px;height:48px;pointer-events:none}
.bab-falke{position:absolute;right:2px;bottom:0;width:64px;height:48px;object-fit:cover;object-position:top;
  border-radius:10px 10px 0 0;animation:babFalkeFloat 5s ease-in-out infinite alternate}
@keyframes babFalkeFloat{from{transform:translateY(0)}to{transform:translateY(-4px)}}
.bab-progress{display:none;height:8px;border-radius:99px;background:var(--panel2);border:1.5px solid var(--line);margin-top:18px;overflow:hidden}
.bab-progress i{display:block;height:100%;width:0;background:var(--grad);border-radius:99px;transition:width .8s ease}
.bab-map-hint{text-align:center;color:var(--mut);font-size:.9rem;margin:16px 0 4px}

/* ——— Panel (learn / task / review / locks) ——— */
.bab-task{margin-top:20px;background:var(--panel);border:2px solid var(--line);border-radius:20px 7px 20px 20px;
  box-shadow:var(--shadow);padding:26px 26px 20px}
.bab-task-kicker{font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin:0 0 8px}
.bab-task h3{font-size:1.3rem;margin:0 0 6px}
.bab-task .bab-dari-sm{margin:0 0 16px}
.bab-phrases{display:grid;gap:10px;margin:2px 0 14px}
.bab-phrase{display:flex;align-items:flex-start;gap:10px;background:var(--panel2);
  border:1.5px solid var(--line);border-radius:14px 5px 14px 14px;padding:10px 12px}
.bab-phrase .ph-de{font-weight:700;color:var(--ink);line-height:1.45}
.bab-phrase .ph-ar{display:block;margin-top:2px}
.bab-phrase .bab-speak{margin-left:auto;flex:none}
.bab-sharh{background:var(--blue-pale);border:1.5px solid var(--blue);border-radius:14px 5px 14px 14px;
  padding:12px 14px;margin:0 0 6px;line-height:1.95}
.bab-sharh .lbl{font-weight:800;color:var(--blue-d);margin-left:6px}
.bab-panel-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;align-items:center}
.bab-panel-actions .bab-dari-sm{margin:0}
.bab-opts{display:grid;gap:10px}
.bab-opt{display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  font:inherit;font-weight:600;color:var(--ink);background:var(--panel);
  border:1.5px solid var(--line2);border-radius:12px 4px 12px 12px;padding:13px 16px;
  box-shadow:var(--ctl-sh);transition:transform .12s ease,border-color .15s ease,background .15s ease,box-shadow .18s ease}
.bab-opt:hover{border-color:var(--blue);box-shadow:var(--ctl-sh-hover)}
.bab-opt:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.bab-opt.sel{border-color:var(--blue);background:var(--blue-pale);box-shadow:0 0 0 3px rgba(46,155,255,.18),var(--ctl-sh)}
.bab-opt.right{border-color:var(--good);background:var(--green-pale);color:var(--ink);box-shadow:0 0 0 3px rgba(88,204,2,.20),var(--ctl-sh)}
.bab-opt.wrong{border-color:var(--bad);background:var(--bad-pale);box-shadow:0 0 0 3px rgba(255,75,75,.18),var(--ctl-sh)}
.bab-opt:disabled{cursor:default;opacity:.92}
.bab-build-answer{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-height:54px;
  background:var(--panel2);border:1.5px dashed var(--line2);border-radius:12px 4px 12px 12px;padding:10px;margin-bottom:12px}
.bab-build-answer .bab-build-ph{color:var(--mut);font-size:.9rem}
.bab-build-bank{display:flex;flex-wrap:wrap;gap:8px}
.bab-word{font:inherit;font-weight:700;color:var(--ink);padding:9px 14px;cursor:pointer;
  border-radius:10px 4px 10px 10px;border:1.5px solid var(--line2);background:var(--panel);box-shadow:var(--ctl-sh);
  transition:transform .12s ease,border-color .15s ease,background .15s ease}
.bab-word:hover{border-color:var(--blue)}
.bab-word:active{transform:translateY(1px)}
.bab-word.placed{background:var(--blue-pale);border-color:var(--blue)}
.bab-word:disabled{opacity:.35;cursor:default;box-shadow:none}
.bab-feedback{min-height:1.5em;margin:14px 0 2px;font-weight:700}
.bab-feedback.good{color:var(--good-d)}
.bab-feedback.bad{color:var(--bad-d)}
.bab-feedback.info{color:var(--body)}
.bab-feedback-dari{font-size:1.02rem;font-weight:600;line-height:1.9;margin:0;min-height:0;color:var(--body)}
.bab-feedback-dari.good{color:var(--good-d)}
.bab-feedback-dari.bad{color:var(--bad-d)}

/* ——— Door (A-3: fully digital — glass leaves, brand rim light, spill) ——— */
.bab-door-sec{padding:56px 20px 8px}
.bab-door-stage{position:relative;max-width:760px;margin:6px auto 0;border-radius:22px 8px 22px 22px;overflow:hidden;
  border:2px solid var(--line2);box-shadow:var(--shadow-lg),inset 0 0 0 3px rgba(201,164,78,.22);background:#050b18;perspective:1600px}
.bab-door-reveal{position:relative}
.bab-door-reveal img{width:100%;height:auto;display:block;filter:brightness(.92);transition:filter 2.2s ease}
.bab-door-stage.open .bab-door-reveal img{filter:brightness(1.06)}
.bab-door-caption{position:absolute;left:14px;bottom:12px;z-index:4;background:rgba(8,17,32,.72);color:#fff;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;border-radius:10px 4px 10px 10px;padding:5px 12px;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .8s ease .9s}
.bab-door-stage.open .bab-door-caption{opacity:1}
.bab-door-spill{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.3s ease .3s;
  background:radial-gradient(62% 92% at 50% 44%,rgba(150,225,255,.55),rgba(56,225,255,.20) 46%,transparent 72%);
  mix-blend-mode:screen}
.bab-door-stage.open .bab-door-spill{opacity:1}
.bab-door-floor{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:1;pointer-events:none;opacity:0;transition:opacity 1.5s ease .45s;
  background:linear-gradient(180deg,transparent,rgba(56,225,255,.20) 70%,rgba(124,92,255,.16))}
.bab-door-stage.open .bab-door-floor{opacity:1}
.bab-door-frame{position:absolute;inset:0;z-index:2;pointer-events:none}
.bab-door-glow{position:absolute;top:0;bottom:0;left:50%;width:130px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(56,225,255,.55),rgba(124,92,255,.55),transparent);
  filter:blur(16px);opacity:.6;transition:opacity .9s ease}
.bab-door-stage.open .bab-door-glow{opacity:0}
.bab-leaf{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 26%),
    repeating-linear-gradient(180deg,transparent 0 118px,rgba(0,0,0,.18) 118px 121px),
    linear-gradient(155deg,#1d3465 0%,#0d1c38 58%,#122a52 100%);
  border:3px solid rgba(160,124,44,.9);
  box-shadow:inset 0 0 0 5px rgba(201,164,78,.22),inset 0 0 70px rgba(0,0,0,.55);
  transition:transform 1.7s cubic-bezier(.45,.06,.35,1)}
.bab-leaf-panel{position:absolute;left:13%;right:13%;top:9%;height:35%;border:2px solid rgba(201,164,78,.45);
  border-radius:8px 3px 8px 8px;background:linear-gradient(160deg,rgba(46,155,255,.16),rgba(124,92,255,.07));
  box-shadow:inset 0 0 26px rgba(0,0,0,.5)}
.bab-leaf-panel.p2{top:53%;height:35%}
.bab-leaf-l{left:0;border-right:3px solid #ffd977;transform-origin:left center;border-radius:4px 0 0 4px;
  box-shadow:inset 0 0 0 5px rgba(201,164,78,.22),inset 0 0 70px rgba(0,0,0,.55),-6px 0 18px -6px rgba(56,225,255,.0)}
.bab-leaf-r{right:0;border-left:3px solid #ffd977;transform-origin:right center;border-radius:0 4px 4px 0}
.bab-knob{position:absolute;top:50%;width:17px;height:17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#ffe9a8,#c9a44e 55%,#7c5f22);
  box-shadow:0 2px 6px rgba(0,0,0,.55)}
.bab-leaf-l .bab-knob{right:16px}
.bab-leaf-r .bab-knob{left:16px}
.bab-door-stage.open .bab-leaf-l{transform:rotateY(-104deg)}
.bab-door-stage.open .bab-leaf-r{transform:rotateY(104deg)}
.bab-door-note{text-align:center;color:var(--mut);margin:18px auto 12px;max-width:560px}
.bab-door-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ——— Missions ——— */
.bab-missions{padding:56px 20px 10px}
.bab-missions-lock{max-width:640px;margin:0 auto;text-align:center;border:2px dashed var(--line2);
  border-radius:18px 6px 18px 18px;padding:26px 20px;color:var(--mut);background:var(--panel2)}
.bab-mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:18px;align-items:start}
.bab-mission{background:var(--panel);border:2px solid var(--line);border-radius:20px 7px 20px 20px;box-shadow:var(--shadow);padding:22px}
.bab-mission > header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bab-mission-tag{font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  background:var(--grad);border-radius:10px 4px 10px 10px;padding:4px 10px}
.bab-mission header h3{font-size:1.08rem;margin:0;flex:1}
.bab-mission-state{font-size:.74rem;font-weight:800;color:var(--mut);border:1.5px solid var(--line2);border-radius:10px 4px 10px 10px;padding:3px 9px}
.bab-mission-state.doing{color:var(--blue-d);border-color:var(--blue);background:var(--blue-pale)}
.bab-mission-state.done{color:var(--good-d);border-color:var(--good);background:var(--green-pale)}
.bab-mission-intro{font-size:.94rem;margin:0 0 14px}
.bab-speak{display:inline-flex;vertical-align:-3px;align-items:center;justify-content:center;width:28px;height:28px;
  border-radius:50%;border:1.5px solid var(--line2);background:var(--panel);color:var(--blue-d);cursor:pointer;margin-left:4px;
  box-shadow:var(--ctl-sh);transition:transform .12s ease,box-shadow .18s ease,border-color .15s ease}
.bab-speak:hover{border-color:var(--blue);box-shadow:var(--ctl-sh-hover)}
.bab-speak:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.bab-dialog{display:grid;gap:8px;margin-bottom:14px}
.bab-line{max-width:88%;padding:10px 14px;border-radius:16px 5px 16px 16px;font-size:.95rem;line-height:1.5}
.bab-line .who{display:block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:3px;opacity:.75}
.bab-line.npc{background:var(--panel2);border:1.5px solid var(--line);border-bottom-left-radius:6px;justify-self:start}
.bab-line.me{background:var(--blue-pale);border:1.5px solid var(--blue);border-bottom-right-radius:6px;justify-self:end}
.bab-line .bab-speak{width:24px;height:24px;margin-left:8px;vertical-align:-2px}
.bab-mapmini{margin-top:6px}
.bab-mapmini svg{width:100%;height:auto;display:block}
.mm-hall{fill:var(--panel2);stroke:var(--line2);stroke-width:1.5}
.mm-corridor{fill:none;stroke:rgba(140,180,240,.4);stroke-width:15;stroke-linecap:round;stroke-linejoin:round}
.mm-zone{fill:var(--panel);stroke:var(--line2);stroke-width:1.5;transition:stroke .2s ease,fill .2s ease}
.mm-label{fill:var(--ink);font-size:12.5px;font-weight:700;font-family:inherit}
.mm-target{cursor:pointer}
.mm-target:hover .mm-zone,.mm-target:focus-visible .mm-zone{stroke:var(--blue);fill:var(--blue-pale)}
.mm-target.right .mm-zone{stroke:var(--good);fill:var(--green-pale)}
.mm-target.wrong .mm-zone{stroke:var(--bad);fill:var(--bad-pale)}
.mm-you{fill:var(--cyan);stroke:#fff;stroke-width:2}
.mm-you-label{fill:var(--mut);font-size:11.5px;font-weight:700;font-family:inherit}

/* ——— Ankunft (W-24: stamp in normal flow — never clipped, never on the bird) ——— */
.bab-ankunft{padding:30px 20px 64px}
.bab-ankunft-card{position:relative;max-width:680px;margin:0 auto;text-align:center;background:var(--panel);
  border:2px solid var(--line);border-radius:24px 8px 24px 24px;box-shadow:var(--shadow-lg);padding:34px 30px 36px;overflow:hidden}
.bab-ankunft-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:8px}
.bab-ankunft-falke{width:150px;height:auto;border-radius:16px 6px 16px 16px}
.bab-stamp{width:128px;height:128px;flex:none;transform:rotate(-9deg);
  animation:babStampIn .5s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes babStampIn{from{opacity:0;transform:rotate(-9deg) scale(1.5)}to{opacity:1;transform:rotate(-9deg) scale(1)}}
.stamp-ring{fill:none;stroke:#e5484d;stroke-width:2.5;opacity:.85}
.stamp-ring-in{fill:none;stroke:#e5484d;stroke-width:1.6;opacity:.85}
.stamp-text{fill:#e5484d;font-size:15.5px;font-weight:800;letter-spacing:2.5px;opacity:.9}
.stamp-mid{fill:#e5484d;font-size:19px;font-weight:800;letter-spacing:2px;opacity:.92}
.stamp-sub{fill:#e5484d;font-size:12.5px;font-weight:700;letter-spacing:1.5px;opacity:.85}
.bab-ankunft-card h2{margin-bottom:.3em}
.bab-ankunft-card .bab-dari{margin-bottom:20px}
.bab-reset-note{color:var(--mut);font-size:.85rem;margin:12px 0 0}

/* ——— Responsive ——— */
@media(max-width:1020px){
  .bab-stops{grid-template-columns:repeat(3,1fr)}
  .bab-route{display:none}
  .bab-progress{display:block}
}
@media(max-width:620px){
  /* W-10: the first fold ends cleanly — tighter head, first stop row fully
     in view. On phones the Darija lead carries the explanation (the German
     lead stays on wider screens); both texts say the same thing. */
  .bab-head{padding:26px 16px 0}
  .bab-kicker{margin-bottom:8px}
  .bab-head h1{font-size:2.1rem}
  .bab-dari{font-size:1.12rem;margin-bottom:6px}
  .bab-lead{display:none}
  .bab-map-sec{padding-top:14px}
  .bab-map{padding:18px 14px 12px}
  .bab-falke{width:46px;height:35px}
  .bab-falke-slot{width:46px;height:35px}
  .bab-stops{grid-template-columns:repeat(2,1fr)}
  .bab-task{padding:20px 16px 14px}
  .bab-ankunft-card{padding:26px 18px 28px}
  .bab-ankunft-falke{width:104px}
  .bab-stamp{width:100px;height:100px}
}
@media(prefers-reduced-motion:reduce){
  .bab-falke,.bab-stamp{animation:none}
  .bab-leaf{transition-duration:.2s}
  .bab-door-reveal img{transition:none}
  .bab-opt,.bab-stop,.bab-progress i,.bab-word{transition:none}
}

/* Amiri for Bab Almania's Arabic (owner ruling 2026-10-27 17:04).
   The @font-face lives in site.css, loaded before this file. */
.bab-dari,.bab-dari-sm,.bab-feedback-dari,.bab-sharh,[dir="rtl"]{font-family:"Amiri",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}