/*
 * _walk/walk.css — واجهة العوالم التي يُمشى فيها (العدّاد، البطاقة، التصويب، اللمس، اللوحات).
 * تُحمَّل بعد ../_kit/lab3d.css. العناصر يبنيها engine.js تلقائيّاً إن لم تضعها الصفحة.
 */
:root{--ink:#1A3365;--ink2:#2A3B5F;--mut:#5B6B8C;--card:rgba(255,255,255,.9);--edge:rgba(26,51,101,.12)}
html,body{background:#D6EAFC}
.hidden{display:none!important}
kbd{font-family:inherit}

/* الرأس (من lab3d.css) — أصغر أثناء اللعب */
#brand h1{font-size:18px}
html.playing #back{opacity:.85}

/* العدّاد أعلى الشاشة: نصّ بلا صناديق */
#hud{position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;
  pointer-events:none;z-index:4;color:var(--ink);text-shadow:0 0 6px #fff,0 0 2px #fff;white-space:nowrap}
#hTitle{font-size:26px;font-weight:800}
#hDots{display:flex;gap:6px;direction:rtl}
#hDots i{width:16px;height:18px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:rgba(26,51,101,.22)}
#hDots i.cur{background:#FF9000}
#hDots i.done{background:#1FBF75}
#hCoinW{display:flex;align-items:center;gap:6px;font-size:24px;font-weight:800}
#hCoinW svg{width:26px;height:26px;flex:none}

/* بطاقة المحطّة: نصّ الكتاب حرفيّاً */
#card{position:fixed;top:calc(max(14px,env(safe-area-inset-top)) + 64px);right:16px;width:min(460px,calc(100vw - 32px));z-index:4;
  background:var(--card);border:1px solid var(--edge);border-radius:22px;padding:14px 18px 14px;color:var(--ink);
  box-shadow:0 10px 30px rgba(26,51,101,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#cHead{display:flex;align-items:center;gap:12px;cursor:pointer;pointer-events:auto}
#cNum{flex:none;width:46px;height:52px;display:grid;place-items:center;background:#FF9000;color:#fff;font-weight:800;font-size:26px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
#cNum.done{background:#1FBF75}
#cTitle{margin:0;font-size:30px;line-height:1.2;font-weight:800;color:#1A3365}
#cBody{margin-top:8px}
#cQuotes blockquote{margin:0 0 8px;padding:0 12px 0 0;border-right:4px solid #FF9000;font-size:19px;line-height:1.7;color:#2A3B5F;font-weight:600}
#cDo{margin:6px 0 0;font-size:18px;line-height:1.6;color:#A35C00;font-weight:800}
#cSrc{margin:4px 0 0;font-size:13px;color:#5B6B8C;font-weight:700}
#card:not(.open) #cQuotes{display:none}
#cTog{margin-inline-start:auto;font-size:13px;color:#5B6B8C;font-weight:700;white-space:nowrap}
#card.open #cTog .o{display:none} #card:not(.open) #cTog .c{display:none}

/* التصويب */
#cross{position:fixed;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:rgba(26,51,101,.55);
  box-shadow:0 0 0 2px rgba(255,255,255,.8);pointer-events:none;z-index:3;transition:transform .15s,background .15s}
#cross.on{background:#FF9000;transform:scale(1.7)}
#aimHint{position:fixed;left:50%;top:calc(50% + 30px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;z-index:3;pointer-events:none;
  font-size:22px;font-weight:800;color:#1A3365;text-shadow:0 0 6px #fff,0 0 3px #fff,0 0 1px #fff;white-space:nowrap}
#aimHint kbd{background:#FF9000;color:#fff;border-radius:9px;padding:0 10px;font-size:20px;line-height:1.5;text-shadow:none}
#toast{position:fixed;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:5;max-width:min(92vw,760px);
  text-align:center;font-size:21px;font-weight:800;line-height:1.55;padding:12px 22px;border-radius:18px;
  background:#1A3365;color:#ffffff;box-shadow:0 10px 30px rgba(26,51,101,.25)}

/* لمس */
.tc{display:none}
html.touch .tc{display:block}
#joy{position:fixed;left:calc(24px + env(safe-area-inset-left));top:auto;bottom:calc(28px + env(safe-area-inset-bottom));width:120px;height:120px;border-radius:50%;
  border:2px solid rgba(26,51,101,.25);background:rgba(255,255,255,.35);z-index:4;pointer-events:none}
#joy.live{bottom:auto}
#joy div{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(26,51,101,.35);border:2px solid #fff}
#actBtn{position:fixed;right:calc(20px + env(safe-area-inset-right));bottom:calc(34px + env(safe-area-inset-bottom));z-index:4;
  min-height:58px;max-width:62vw;padding:6px 22px;border-radius:30px;font-size:19px;font-weight:800;line-height:1.3;
  background:var(--orange);color:#fff;box-shadow:0 8px 22px rgba(255,144,0,.35)}
html.touch #cross{width:10px;height:10px}

/* الطبقات: البداية، السؤال، النهاية */
.veil{position:fixed;inset:0;z-index:8;display:grid;place-items:center;padding:16px;background:rgba(214,234,252,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pane{width:min(620px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:28px;padding:26px 28px;color:#1A3365;
  box-shadow:0 24px 70px rgba(26,51,101,.25);border:1px solid var(--edge)}
.pane h1{margin:0 0 6px;font-size:36px;line-height:1.2;font-weight:800;color:#1A3365}
.pane .lead{margin:0 0 16px;font-size:19px;line-height:1.75;color:#2A3B5F;font-weight:600}
.keys{display:grid;grid-template-columns:auto 1fr;gap:9px 14px;font-size:17px;font-weight:700;margin:0 0 20px;align-items:center;color:#2A3B5F}
.keys kbd{background:#EEF3FA;border:1px solid #D3DCEB;border-bottom-width:3px;border-radius:9px;padding:1px 10px;font-size:15px;white-space:nowrap;justify-self:start;color:#1A3365}
.go{width:100%;min-height:58px;border-radius:18px;font-size:22px;font-weight:800;background:var(--orange);color:#fff;box-shadow:0 8px 22px rgba(255,144,0,.35)}
.go:focus-visible,.opt:focus-visible,.sec:focus-visible{outline:3px solid #00C6FF;outline-offset:3px}
.k-touch{display:none} html.touch .k-desk{display:none} html.touch .k-touch{display:grid}
.stops{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 0 18px;padding:0;list-style:none;font-size:16px;font-weight:800;color:#1A3365}
.stops li{display:flex;align-items:center;gap:6px}
.stops b{width:26px;height:29px;display:grid;place-items:center;background:#FF9000;color:#fff;font-size:15px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

#qPanel .eyebrow{margin:0 0 4px;font-size:16px;font-weight:800;color:#A35C00}
#qText{margin:0 0 18px;font-size:30px;line-height:1.5;font-weight:800;color:#1A3365}
#qOpts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{display:flex;align-items:center;gap:12px;min-height:66px;padding:10px 16px;border-radius:18px;background:#F3F7FC;border:2px solid #D8E2F0;
  font-size:24px;font-weight:800;color:#1A3365;text-align:right;transition:transform .12s,border-color .15s,background .15s}
.opt:hover{border-color:#00C6FF;transform:translateY(-2px)}
.opt i{font-style:normal;flex:none;width:36px;height:40px;display:grid;place-items:center;background:#1A3365;color:#fff;font-size:18px;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.opt.ok{background:#E3F8EE;border-color:#1FBF75} .opt.ok i{background:#1FBF75}
.opt.bad{background:#FFDCDC;border-color:#FF4343} .opt.bad i{background:#FF4343}
#qOpts.lock .opt{pointer-events:none}
.fb{margin:16px 0 0;font-size:21px;line-height:1.65;font-weight:800;min-height:0}
.fb.ok{color:#0F8F55} .fb.bad{color:#CB3535}
.row{display:flex;gap:10px;margin-top:16px}
.row .go{flex:1}
.sec{min-height:58px;border-radius:18px;padding:0 22px;font-size:20px;font-weight:800;background:#EEF3FA;color:#1A3365;border:1px solid #D3DCEB}

#end .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:8px 0 22px}
#end .stats div{text-align:center;padding:10px 6px;border-radius:18px;background:#F3F7FC}
#end .stats b{display:block;font-size:32px;font-weight:800;color:#1A3365;line-height:1.3}
#end .stats span{font-size:15px;font-weight:800;color:#5B6B8C}
#end .big{width:84px;height:94px;margin:0 auto 6px;display:grid;place-items:center;background:#1FBF75;color:#fff;font-size:44px;font-weight:800;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
#end h1{text-align:center}
#end .lead{text-align:center}

#loading p{color:#5B6B8C}
#err{display:none;max-width:420px}

/* مضمَّن في التطبيق: لا رأس */
body.embed #hud{top:12px}
body.embed #card{top:62px}

/* اللقطة الجانبيّة للوح التزلّج: المشهد يتكلّم */
html.cine #card,html.cine #cross,html.cine #aimHint,html.cine .tc{display:none!important}

/* لقطة المعاينة: المشهد وحده */
html.shot #hud,html.shot #card,html.shot #cross,html.shot #aimHint,html.shot #toast,html.shot .tc,html.shot #start,html.shot #top{display:none!important}

/* الجوّال والإطار القصير */
@media (max-width:700px){
  #brand p{display:none} #brand h1{font-size:14px} #brand img{width:28px;height:28px}
  html.playing #brand{display:none}
  #hud{gap:10px} #hTitle{font-size:19px} #hCoinW{font-size:18px} #hCoinW svg{width:20px;height:20px} #hDots i{width:12px;height:14px}
  #card{top:calc(max(12px,env(safe-area-inset-top)) + 40px);right:10px;width:calc(100vw - 20px);padding:10px 12px;border-radius:18px}
  #cNum{width:36px;height:40px;font-size:20px} #cTitle{font-size:21px}
  #cQuotes blockquote{font-size:15.5px;line-height:1.65} #cDo{font-size:15px} #cSrc{font-size:12px}
  #aimHint{font-size:17px}
  #toast{font-size:16px;bottom:calc(168px + env(safe-area-inset-bottom))}
  #card:not(.open) #cBody{display:none} #card:not(.open) #cHead{gap:10px}
  .pane{padding:20px 18px;border-radius:22px} .pane h1{font-size:27px} .pane .lead{font-size:16px}
  #qText{font-size:22px} #qOpts{grid-template-columns:1fr} .opt{font-size:19px;min-height:54px}
  #end .stats b{font-size:24px}
}
@media (max-height:560px){
  #card{width:min(380px,46vw);padding:8px 12px} #cTitle{font-size:20px} #cNum{width:32px;height:36px;font-size:18px}
  #card:not(.open) #cBody{display:none}
  #cQuotes blockquote{font-size:14px;line-height:1.55} #cDo{font-size:14px}
  #hTitle{font-size:18px} #hCoinW{font-size:17px}
  .pane{padding:14px 18px} .pane h1{font-size:24px} .pane .lead{font-size:15px;margin-bottom:10px} .keys{font-size:14px;gap:5px 10px;margin-bottom:12px}
  #qText{font-size:20px;margin-bottom:10px} .opt{min-height:46px;font-size:18px} .go,.sec{min-height:46px;font-size:18px}
}

/* أزرار اللمس الإضافيّة (قفز، إطلاق، سلاح…) — engine.input.button() */
.wbtn{position:fixed;z-index:4;width:64px;height:64px;border-radius:50%;display:none;place-items:center;padding:0;
  background:rgba(26,51,101,.55);border:2px solid rgba(255,255,255,.85);color:#fff;font-size:15px;font-weight:800;line-height:1.1;
  -webkit-user-select:none;user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;box-shadow:0 6px 18px rgba(26,51,101,.25)}
html.touch .wbtn{display:grid}
.wbtn.down{transform:scale(.92);background:rgba(255,144,0,.85)}
#jumpBtn{right:calc(22px + env(safe-area-inset-right));bottom:calc(112px + env(safe-area-inset-bottom))}
#joy.run{border-color:#FF9000;background:rgba(255,144,0,.18)}
html.cine .wbtn,html.shot .wbtn,html:not(.playing) .wbtn{display:none!important}
.credits-link{display:block;margin:14px auto 0;text-align:center;font-size:15px;font-weight:800;color:#5B6B8C;text-decoration:underline}
#credits ul{margin:6px 0 18px;padding:0 20px 0 0;font-size:17px;line-height:1.9;font-weight:700;color:#2A3B5F}

/* ══ تخطيط اللمس حسب الاتّجاه (engine.js يضع html.portrait / html.landscape و --vvw/--vvh من visualViewport) ══
   عموديّ: العصا أسفل اليسار، النظر بالسحب في اليمين والأعلى، والأزرار عنقودٌ يصله الإبهام أسفل اليمين.
   عرضيّ: تخطيط ألعاب الشوتر — العصا يساراً والأزرار يميناً (إبهامان). الأزرار ≥ ٥٦ px نصف شفّافة، بلا تداخل.
   الأزرار: #jumpBtn (المحرّك) · #fireBtn #rldBtn #wpnBtn #wAmmo (weapons.js) · #actBtn زرّ التفاعل. */
:root{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px)}
.pane{max-height:calc(var(--vvh,100vh) - 32px)}
html.touch .wbtn{width:60px;height:60px;background:rgba(26,51,101,.42);border-color:rgba(255,255,255,.8)}
html.touch #fireBtn{width:84px;height:84px;background:rgba(255,144,0,.72)}
html.touch #wpnBtn{font-size:12px}
html.touch #actBtn{min-height:56px;background:rgba(255,144,0,.9)}
html.touch #joy{width:120px;height:120px}
html.touch #toast{top:calc(var(--st) + 92px);bottom:auto;font-size:16px;max-width:min(88vw,620px)}
html.touch #wAmmo{flex-direction:row;align-items:baseline;gap:8px}
html.touch #wAmmo .n{font-size:28px}

/* عموديّ */
html.touch.portrait #joy{left:calc(18px + var(--sl));bottom:calc(22px + var(--sb))}
html.touch.portrait #jumpBtn{right:calc(20px + var(--sr));bottom:calc(22px + var(--sb))}
html.touch.portrait #fireBtn{right:calc(14px + var(--sr));bottom:calc(98px + var(--sb))}
html.touch.portrait #wpnBtn{right:calc(110px + var(--sr));bottom:calc(72px + var(--sb))}
html.touch.portrait #rldBtn{right:calc(110px + var(--sr));bottom:calc(142px + var(--sb))}
html.touch.portrait #actBtn{right:calc(14px + var(--sr));bottom:calc(98px + var(--sb));max-width:calc(100vw - 180px)}
html.touch.portrait.armed #actBtn{bottom:calc(214px + var(--sb))}
html.touch.portrait #wAmmo{left:calc(20px + var(--sl));right:auto;bottom:calc(152px + var(--sb))}
html.touch.portrait #card{max-height:calc(var(--vvh,100vh) - 300px);overflow-y:auto}

/* عرضيّ */
html.touch.landscape #joy{left:calc(28px + var(--sl));bottom:calc(20px + var(--sb))}
html.touch.landscape #jumpBtn{right:calc(24px + var(--sr));bottom:calc(20px + var(--sb))}
html.touch.landscape #fireBtn{right:calc(20px + var(--sr));bottom:calc(96px + var(--sb))}
html.touch.landscape #wpnBtn{right:calc(118px + var(--sr));bottom:calc(76px + var(--sb))}
html.touch.landscape #rldBtn{right:calc(118px + var(--sr));bottom:calc(146px + var(--sb))}
html.touch.landscape #actBtn{right:calc(100px + var(--sr));bottom:calc(20px + var(--sb));max-width:calc(100vw - 420px)}
html.touch.landscape.armed #actBtn{right:calc(196px + var(--sr))}
html.touch.landscape #wAmmo{left:calc(168px + var(--sl));right:auto;bottom:calc(26px + var(--sb))}
html.touch.landscape #card{right:auto;left:calc(12px + var(--sl));max-height:calc(var(--vvh,100vh) - 230px);overflow-y:auto}
html.touch.landscape #toast{max-width:min(56vw,620px)}
/* العصا الحيّة تتبع الإصبع (المحرّك يضع left/top) */
html.touch #joy.live{bottom:auto}
/* الأجهزة اللوحيّة: أزرار أكبر قليلاً */
html.touch.tablet .wbtn{width:68px;height:68px} html.touch.tablet #fireBtn{width:96px;height:96px}
html.touch.tablet.portrait #wpnBtn,html.touch.tablet.portrait #rldBtn{right:calc(124px + var(--sr))}
html.touch.tablet.portrait #rldBtn{bottom:calc(152px + var(--sb))}
html.touch.tablet.portrait.armed #actBtn{bottom:calc(232px + var(--sb))}
html.touch.tablet.landscape #wpnBtn,html.touch.tablet.landscape #rldBtn{right:calc(134px + var(--sr))}
html.touch.tablet.landscape #rldBtn{bottom:calc(156px + var(--sb))}
html.touch.tablet.landscape #fireBtn{bottom:calc(100px + var(--sb))}
html.touch.tablet.landscape.armed #actBtn{right:calc(214px + var(--sr))}
/* مساحة أدوات اللمس — لصفحات العوالم كي لا تغطّي لوحاتُها الأدوات:
   max-height:calc(var(--vvh) - var(--ctl-b) - <أعلى اللوحة>) · أو أبقِ اللوحة بين --ctl-l و --ctl-r أفقيّاً */
:root{--ctl-b:0px;--ctl-l:0px;--ctl-r:0px}
html.touch.portrait{--ctl-b:calc(170px + var(--sb))}
html.touch.portrait.armed{--ctl-b:calc(280px + var(--sb))}
html.touch.landscape{--ctl-b:calc(214px + var(--sb));--ctl-l:calc(160px + var(--sl));--ctl-r:calc(200px + var(--sr))}

/* شبكة الأمان (engine.js): «عالق؟ اضغط هنا» يظهر حين يُكتشف العلوق، و«أعدني للبداية» في قائمة الإيقاف */
#stuckBtn{position:fixed;left:50%;bottom:calc(110px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 24px;border-radius:999px;background:#FF9000;color:#fff;font:inherit;font-size:19px;font-weight:800;border:2px solid #FFBB00;box-shadow:0 10px 26px rgba(255,144,0,.35);cursor:pointer;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation}
#stuckBtn .kd{font-size:13px;font-weight:700;opacity:.92} #stuckBtn kbd{background:#fff;color:#C46A00;border-radius:6px;padding:0 6px}
html.touch #stuckBtn{bottom:calc(var(--ctl-b,170px) + 14px)} html.touch #stuckBtn .kd{display:none}
html:not(.playing) #stuckBtn{display:none!important}
#rescueBtn{margin-top:8px}