@font-face{font-family:"Cairo";src:url("../fonts/cairo.woff2") format("woff2");font-weight:200 1000;font-display:swap}
:root{--bg:#1b1230;--card:#2a1d48;--gold:#f5c542;--teal:#2ec4b6;--red:#ef476f;--text:#fff7ea;--muted:#c9bde6}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:"Cairo","Segoe UI",Tahoma,sans-serif;touch-action:manipulation;user-select:none;-webkit-user-select:none}
body{background:radial-gradient(900px 500px at 90% -10%,#4a2a7a 0%,transparent 60%),radial-gradient(800px 500px at -10% 110%,#6b2a3a 0%,transparent 55%),var(--bg)}
#app{height:100vh;height:100dvh}
.scr{display:none;height:100%}
.scr.active{display:flex;flex-direction:column}
/* القائمة */
#menu{overflow-y:auto;align-items:center}
.mbox{width:100%;max-width:560px;padding:14px 16px calc(24px + env(safe-area-inset-bottom));position:relative}
.back-hub{display:inline-block;color:var(--muted);text-decoration:none;font-weight:700;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.07)}
.logo{text-align:center;margin:8px 0 2px;line-height:1.05;font-weight:900}
.logo .lg1{display:block;font-size:46px;color:var(--gold);text-shadow:0 4px 0 #9a5b00,0 8px 18px rgba(0,0,0,.5);transform:rotate(-3deg)}
.logo .lg2{display:inline-block;font-size:36px;color:#fff;text-shadow:0 4px 0 #b02a4a,0 8px 18px rgba(0,0,0,.5)}
.logo .lg3{font-size:36px;margin-right:6px}
.tag{text-align:center;color:var(--muted);margin:6px 0 10px;font-weight:600}
#menuArt{width:100%;height:auto;border-radius:18px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.levels{display:grid;gap:10px;margin:14px 0}
.lvl{display:flex;align-items:center;gap:12px;width:100%;text-align:right;border:0;border-radius:18px;padding:12px 14px;font:inherit;color:var(--text);cursor:pointer;
  background:linear-gradient(180deg,#3a2866,#2a1d48);box-shadow:0 5px 0 #160d29,0 10px 20px rgba(0,0,0,.3);transition:transform .08s}
.lvl:active{transform:translateY(4px);box-shadow:0 1px 0 #160d29}
.lvl .ln{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;font-weight:900;background:linear-gradient(180deg,#ffd76a,#f0a020);color:#4a2a00;flex:none}
.lvl b{display:block;font-size:18px}.lvl small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.lvl .ls{margin-right:auto;font-size:18px;white-space:nowrap;letter-spacing:-2px}
.lvl.locked{opacity:.55;filter:grayscale(.6)}
.lvl.soon .ln{background:#555;color:#ddd}
.mrow{display:flex;gap:10px}.mrow .btn{flex:1}
.btn{border:0;border-radius:16px;padding:12px 18px;font:inherit;font-weight:800;font-size:17px;cursor:pointer;color:#3a2200;background:linear-gradient(180deg,#ffe07a,#f5b42a);box-shadow:0 5px 0 #a86a00,0 8px 16px rgba(0,0,0,.3);transition:transform .08s}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #a86a00}
.btn.ghost{color:var(--text);background:linear-gradient(180deg,#4b3a78,#36275c);box-shadow:0 5px 0 #1c1236,0 8px 16px rgba(0,0,0,.3)}
/* اللعبة */
.hud{display:flex;align-items:center;gap:6px;padding:calc(6px + env(safe-area-inset-top)) 8px 6px;background:linear-gradient(180deg,#2c1d4c,#20153a);box-shadow:0 2px 10px rgba(0,0,0,.4);z-index:2;flex:none}
.hb{flex:none;width:40px;height:40px;border:0;border-radius:12px;background:rgba(255,255,255,.1);color:#fff;font-size:19px;cursor:pointer;display:grid;place-items:center;padding:0}
.hb:active{background:rgba(255,255,255,.22)}
.hmid{flex:1;min-width:0}
.hl{display:flex;justify-content:space-between;gap:6px;font-size:14px;line-height:1.2}
.hl b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hTime{font-weight:900;color:var(--gold);font-variant-numeric:tabular-nums}
#hTime.low{color:#ff6b6b;animation:blink .6s infinite alternate}
@keyframes blink{to{opacity:.4}}
.rage{display:flex;align-items:center;gap:4px;margin-top:3px}.rage i{font-style:normal;font-size:14px}
.rbar{flex:1;height:10px;border-radius:6px;background:rgba(0,0,0,.4);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
#rageFill{height:100%;width:0;background:linear-gradient(90deg,#ffd166,#ff7a3d,#e0213f);border-radius:6px;transition:width .5s}
.hstats{display:flex;flex-direction:column;align-items:center;font-size:12px;line-height:1.25;font-weight:800;min-width:56px}
#hScore{color:var(--gold);font-size:15px}
#stage{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
#cv{display:block;touch-action:none;border-radius:10px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.toast{position:absolute;top:72px;z-index:4;left:50%;transform:translate(-50%,-20px);background:rgba(20,10,40,.9);border:2px solid var(--gold);padding:6px 14px;border-radius:14px;font-weight:800;opacity:0;transition:.25s;pointer-events:none;white-space:nowrap;max-width:94%;overflow:hidden;text-overflow:ellipsis}
.toast.on{opacity:1;transform:translate(-50%,0)}
.foot{flex:none;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#2c1d4c,#20153a);display:grid;grid-template-columns:auto 1fr;gap:4px 8px;align-items:center}
.inv{display:flex;gap:6px}
.slot{width:44px;height:44px;border-radius:12px;background:rgba(0,0,0,.35);border:2px dashed rgba(255,255,255,.18);display:grid;place-items:center;font-size:24px}
.slot.full{border:2px solid var(--gold);background:rgba(245,197,66,.15);animation:pop .3s}
@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.15)}}
.pr{display:flex;gap:4px;justify-content:flex-start;flex-wrap:wrap;font-size:20px}
.pr span{opacity:.35;filter:grayscale(1)}.pr span.ok{opacity:1;filter:none}.pr span.arm{opacity:.8;filter:none;outline:2px dashed var(--teal);border-radius:8px}
.status{grid-column:1/-1;font-size:13px;color:var(--muted);font-weight:700;min-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* مودال */
.modal{position:fixed;inset:0;background:rgba(10,4,20,.72);display:none;align-items:center;justify-content:center;z-index:20;padding:14px}
.modal.open{display:flex}
.mcard{background:linear-gradient(180deg,#3a2866,#241842);border:2px solid rgba(245,197,66,.5);border-radius:22px;padding:16px 18px;max-width:480px;width:100%;max-height:92%;overflow-y:auto;box-shadow:0 20px 50px rgba(0,0,0,.6);animation:pop .3s}
.mcard h2{margin:0 0 8px;text-align:center;color:var(--gold)}
.mcard ol{padding-right:20px;margin:0 0 12px;line-height:1.6;font-size:15px}.mcard li{margin-bottom:6px}
.mcard>.btn{width:100%}
.end{text-align:center}
.stars{font-size:46px;letter-spacing:4px;margin:4px 0}
.stars i{font-style:normal;display:inline-block;filter:grayscale(1) brightness(.5)}
.stars i.on{filter:none;animation:pop .5s backwards}
.stars i.on:nth-child(2){animation-delay:.25s}.stars i.on:nth-child(3){animation-delay:.5s}
#endP{line-height:1.7;font-weight:700;white-space:pre-line}
.endbtns{display:grid;gap:10px}
/* شاشة كاملة على الآيفون */
html.imm .hud{padding-top:calc(2px + env(safe-area-inset-top))}
@media (orientation:landscape) and (max-height:500px){
  .hud{padding-top:3px;padding-bottom:3px}.hb{width:34px;height:34px;font-size:16px}
  .foot{grid-template-columns:auto 1fr auto;padding-top:3px;padding-bottom:3px}.status{grid-column:auto}
  .slot{width:36px;height:36px;font-size:20px}
}

/* شاشات عريضة: الشريط اللي تحت بيبقى فوق اللعبة عشان البيت ياخد الطول كله */
@media (min-width:900px) and (orientation:landscape){
  #game{position:relative}
  .foot{position:absolute;left:0;right:0;bottom:0;background:transparent;pointer-events:none;grid-template-columns:auto 1fr auto}
  .foot>*{pointer-events:auto}.status{grid-column:auto;text-align:left;background:rgba(20,10,40,.7);padding:4px 10px;border-radius:10px;justify-self:end;max-width:40vw}
  .inv,.pr{background:rgba(20,10,40,.6);padding:4px;border-radius:12px}
}

.credits{display:block;text-align:center;margin-top:14px;color:var(--muted);font-size:13px}

#stage{position:relative}
.sched{position:absolute;top:6px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:rgba(18,10,36,.78);border:1px solid rgba(255,255,255,.14);color:#fff;font-size:12.5px;font-weight:700;padding:5px 11px;border-radius:12px;white-space:nowrap;pointer-events:none;z-index:3;max-width:96%;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.sched b{color:#ffd166}.sched .nx{color:#b9b3d6;font-weight:600}
@media (max-width:520px){.sched{flex-wrap:wrap;justify-content:center;row-gap:1px;font-size:11.5px;white-space:normal;width:max-content;max-width:94%}.sched .nx{flex-basis:100%;text-align:center}}

.prev{position:absolute;inset:0;pointer-events:none;z-index:5}
.prev .prevcap{position:absolute;left:50%;bottom:64px;transform:translateX(-50%);max-width:92%;background:rgba(15,8,30,.88);color:#ffd166;border:2px solid #ffd166;border-radius:14px;padding:8px 14px;font-weight:800;font-size:15px;text-align:center;line-height:1.5}
.prev .skip{pointer-events:auto;position:absolute;top:72px;left:12px;background:#ffd166;color:#2a1240;border:0;border-radius:999px;padding:10px 16px;font-weight:900;font-size:15px;box-shadow:0 4px 0 #b8892a;cursor:pointer}
.prev .skip:active{transform:translateY(2px);box-shadow:0 2px 0 #b8892a}

.prev .live{position:absolute;top:74px;right:12px;background:rgba(200,0,0,.8);color:#fff;font-weight:900;padding:3px 10px;border-radius:8px;animation:pvb 1.2s infinite}@keyframes pvb{50%{opacity:.45}}
.prev .go{top:auto;bottom:70px;left:50%;transform:translateX(-50%);font-size:20px;padding:12px 28px}.prev .go:active{transform:translateX(-50%) translateY(2px)}
.stage-pv #sched{display:none}
#stage.stage-top{align-items:flex-start}