/* ================== سوق الحومة | النسخة الاحترافية ================== */
:root{
  --orange:#ff7a1a; --orange-d:#d35400;
  --green:#27ae60; --green-d:#1e8449;
  --blue:#2e86de; --blue-d:#1b5fa8;
  --dark:#2d1b0e; --cream:#fff6e9; --muted:#6b4e35;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  font-family:'Cairo',Tahoma,sans-serif;color:var(--dark);
  background:#1a0e07;
  overflow-x:hidden;user-select:none;margin:0;padding:0;
}
body::before{display:none}
#app{
  width:100%;max-width:1376px;margin:0 auto;padding:0;min-height:100vh;
  display:flex;align-items:center;justify-content:center;
}
.screen{display:none;width:100%;animation:fadeIn .35s ease}
.screen.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.muted{color:var(--muted);margin-bottom:12px;font-weight:600}

/* ---------- الأزرار ---------- */
.btn{
  font-family:inherit;font-weight:800;font-size:1.05rem;color:#fff;
  border:none;border-radius:16px;padding:12px 22px;cursor:pointer;
  background:linear-gradient(180deg,#ff9a3c,var(--orange));
  box-shadow:0 5px 0 var(--orange-d),0 8px 18px rgba(0,0,0,.2);
  transition:transform .08s,box-shadow .08s,filter .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 var(--orange-d)}
.btn-green{background:linear-gradient(180deg,#3ddc84,var(--green));box-shadow:0 5px 0 var(--green-d),0 8px 18px rgba(0,0,0,.2)}
.btn-green:active{box-shadow:0 1px 0 var(--green-d)}
.btn-secondary{background:linear-gradient(180deg,#4aa3ff,var(--blue));box-shadow:0 5px 0 var(--blue-d),0 8px 18px rgba(0,0,0,.2)}
.btn-secondary:active{box-shadow:0 1px 0 var(--blue-d)}
.btn-ghost{background:#fff;color:var(--dark);box-shadow:0 5px 0 #d9c7b0,0 8px 18px rgba(0,0,0,.12)}
.btn-ghost:active{box-shadow:0 1px 0 #d9c7b0}
.btn-danger{background:linear-gradient(180deg,#ff6b5b,#e74c3c);box-shadow:0 5px 0 #a93226}
.btn-xl{font-size:1.5rem;padding:16px 44px;border-radius:22px}
.btn-lg{font-size:1.2rem;padding:14px 30px}
.btn-sm{font-size:.95rem;padding:8px 16px;border-radius:12px}
.icon-btn{
  width:46px;height:46px;border-radius:14px;border:none;background:#fff;cursor:pointer;
  font-size:1.3rem;font-family:inherit;font-weight:900;color:var(--dark);
  box-shadow:0 4px 0 #d9c7b0;flex-shrink:0;
}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #d9c7b0}
.icon-btn.off{opacity:.5}

.glass{background:rgba(255,248,236,.95);border-radius:28px;box-shadow:0 20px 50px rgba(0,0,0,.35),inset 0 0 0 3px rgba(255,255,255,.6)}
.wallet-pill{
  background:linear-gradient(180deg,#fff3c4,#ffd966);color:#7a4b00;font-weight:900;
  border-radius:999px;padding:6px 16px;box-shadow:0 3px 0 #d4a017;
  display:inline-flex;align-items:center;gap:6px;font-size:1.05rem;white-space:nowrap;
}

/* ---------- القائمة ---------- */
#scr-menu.active{display:grid;place-items:center;min-height:100vh}
.corner-controls{position:fixed;top:14px;right:14px;display:flex;gap:8px;align-items:center;z-index:1000}
.menu-card{max-width:520px;width:100%;text-align:center;padding:24px 24px 30px;margin-top:80px;position:relative}
.menu-card .wallet-pill{position:absolute;top:16px;left:16px}
.mascot-big{
  width:150px;height:150px;border-radius:50%;object-fit:cover;
  border:6px solid #fff;box-shadow:0 10px 25px rgba(0,0,0,.25);
  margin-top:-100px;animation:float 3s ease-in-out infinite;
}
@keyframes float{50%{transform:translateY(-8px)}}
.logo{font-size:3.2rem;font-weight:900;line-height:1.15;margin:8px 0 2px;color:var(--orange);text-shadow:0 4px 0 #ffd2a8}
.logo span{color:var(--green);text-shadow:0 4px 0 #bdf0d0}
.tagline{font-size:1.1rem;color:var(--muted);margin-bottom:8px;font-weight:600}
.hello{font-weight:800;font-size:1.15rem;margin-bottom:18px;min-height:1.6em}
.hello button{background:none;border:none;cursor:pointer;font-size:1rem;margin-right:4px}
.menu-row{display:flex;gap:12px;justify-content:center;margin-top:18px;flex-wrap:wrap}

/* ---------- الشريط العلوي ---------- */
.topbar{
  display:flex;align-items:center;gap:12px;margin:16px auto;max-width:920px;
  background:rgba(255,248,236,.95);border-radius:18px;padding:10px 14px;box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.topbar h2{flex:1;font-size:1.35rem}

/* ---------- المستويات ---------- */
.levels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px;max-width:920px;margin:0 auto;padding:0 16px 24px}
.level-card{
  position:relative;font-family:inherit;border:none;cursor:pointer;color:var(--dark);
  background:#fff;border-radius:24px;padding:20px 14px 16px;text-align:center;overflow:hidden;
  box-shadow:0 7px 0 var(--c),0 14px 26px rgba(0,0,0,.3);transition:transform .15s;
}
.level-card::before{content:'';position:absolute;inset:0 0 auto 0;height:78px;background:var(--c);opacity:.18}
.level-card:hover{transform:translateY(-5px)}
.lc-icon{font-size:3.2rem;position:relative}
.lc-title{font-weight:900;font-size:1.3rem;color:var(--c);filter:brightness(.8)}
.lc-desc{font-size:.95rem;color:var(--muted);min-height:2.8em;font-weight:600}
.lc-stars{font-size:1.6rem;letter-spacing:2px}
.on{color:#f5b400;text-shadow:0 2px 0 #c98a00}
.off{color:#e0d6c8}
.lc-best{font-weight:700;color:#8a6d55;min-height:1.5em}
.lc-lock{
  position:absolute;inset:0;background:rgba(40,25,10,.74);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:2.4rem;
}
.lc-lock small{font-size:.9rem;padding:0 14px;font-weight:700}

/* ---------- واجهة اللعب (صورة 00 المطابقة) ---------- */
#scr-game.active{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:0;margin:0}

/* الشريط العلوي */
.hud{
  position:absolute;top:1.8cqw;left:3.5cqw;right:3.5cqw;height:5.6cqw;
  background:#ffffff;border:0.22cqw solid #eadbc7;border-radius:999px;
  box-shadow:0 0.8cqw 2cqw rgba(0,0,0,.12);
  display:flex;justify-content:space-between;align-items:center;padding:0 1.2cqw;z-index:30;
  direction:ltr; /* Left-to-right to guarantee Coin on Left, Title+✕ on Right */
}
.hud-info{display:flex;align-items:center;gap:1.2cqw;direction:rtl}
.hud-level{font-weight:900;font-size:2.1cqw;color:#1c0e07;font-family:'Cairo',sans-serif}
.btn-quit-game{
  width:4cqw;height:4cqw;border-radius:50%;border:0.2cqw solid #dfcfbe;
  background:#ffffff;color:#4a2818;font-size:2cqw;font-weight:900;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 0.3cqw 0.6cqw rgba(0,0,0,.1);transition:transform .1s;
}
.btn-quit-game:active{transform:scale(.92)}

.dots-wrapper{display:flex;align-items:center;justify-content:center;gap:0.8cqw;direction:ltr}
.dots{display:flex;align-items:center;gap:0.9cqw}
.dots i{width:1.4cqw;height:1.4cqw;border-radius:50%;background:#e8ded2;transition:all .3s cubic-bezier(.3,1.5,.5,1)}
.dots i.current{
  width:1.9cqw;height:1.9cqw;
  background:radial-gradient(circle at 35% 35%,#ffa63d,#ff6f00);
  box-shadow:0 0.2cqw 0.8cqw rgba(255,111,0,.55),inset 0 0 0 0.15cqw #ffd8a8;
  transform:scale(1.1);
}
.dots i.perfect{background:#2ecc71;box-shadow:0 0.2cqw 0.5cqw rgba(46,204,113,.4)}
.dots i.ok{background:#f1c40f;box-shadow:0 0.2cqw 0.5cqw rgba(241,196,15,.4)}
.dots i.fail{background:#e74c3c;box-shadow:0 0.2cqw 0.5cqw rgba(231,76,60,.4)}
.combo{display:none;font-weight:900;font-size:1.1cqw;color:#fff;background:linear-gradient(90deg,#ff512f,#f09819);border-radius:999px;padding:0.2cqw 0.8cqw;animation:pulse 1s infinite}
.combo.show{display:inline-block}
@keyframes pulse{50%{transform:scale(1.08)}}

.hud-wallet{display:flex;align-items:center;gap:0.8cqw;direction:ltr}
.hud-coin{
  width:4cqw;height:4cqw;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#ffe680,#f5b300 60%,#c28800);
  box-shadow:inset 0 0 0 0.2cqw #ffeb99,0 0.25cqw 0.5cqw rgba(0,0,0,.2);
  color:#734800;font-weight:900;font-size:2cqw;
  display:flex;align-items:center;justify-content:center;
}
#hudScore{font-size:2.3cqw;font-weight:900;color:#1c0e07;margin-left:0.2cqw}

/* ---------- المشهد (الحانوت) ---------- */
.stage{
  position:relative;width:100%;aspect-ratio:16/9;margin:0 auto;
  background:url(assets/shop.jpg) center/cover no-repeat;
  overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.5);
  container-type:inline-size;
}

/* الزبون في القوس الأيسر */
.customer-wrap{position:absolute;left:13.8cqw;top:12.8cqw;width:13.5cqw;z-index:20}
.avatar{
  width:13.5cqw;height:13.5cqw;border-radius:50%;overflow:hidden;
  border:0.5cqw solid #ffffff;background:#fff5d7;
  box-shadow:0 0 0 0.35cqw #fcd37e,0 1cqw 2.5cqw rgba(0,0,0,.35);
  transition:filter .4s,transform .4s;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.patience{height:0.7cqw;background:rgba(0,0,0,.25);border-radius:999px;margin:0.6cqw 1.2cqw 0;overflow:hidden;border:0.12cqw solid #fff}
.patience div{height:100%;width:100%;background:#2ecc71;border-radius:999px;transition:width .1s linear,background .3s}
.no-timer .patience{display:none}
.customer-wrap.enter{animation:custIn .7s cubic-bezier(.2,1.3,.4,1)}
@keyframes custIn{from{transform:translateX(-140%) rotate(-10deg);opacity:0}to{transform:none;opacity:1}}
.customer-wrap.leave{animation:custOut .6s ease-in forwards}
@keyframes custOut{to{transform:translateX(-160%) rotate(-8deg);opacity:0}}
.customer-wrap.happy .avatar{animation:hop .45s ease 2}
@keyframes hop{50%{transform:translateY(-8%) scale(1.04)}}
.customer-wrap.sad .avatar{filter:grayscale(.75) brightness(.9);transform:rotate(-6deg)}
.customer-wrap.impatient .avatar{animation:wiggle .5s infinite}
@keyframes wiggle{25%{transform:rotate(-3deg)}75%{transform:rotate(3deg)}}

/* فقاعة الكلام */
.speech{
  position:absolute;left:29cqw;top:15.5cqw;z-index:22;
  background:#ffffff;border-radius:2.4cqw;padding:1cqw 2.2cqw;
  box-shadow:0 0.8cqw 2.4cqw rgba(0,0,0,.2);min-width:25cqw;max-width:38cqw;text-align:center;
}
.speech::before{
  content:'';position:absolute;left:-1.4cqw;top:2.2cqw;
  border-style:solid;border-width:0.8cqw 1.5cqw 0.8cqw 0;
  border-color:transparent #ffffff transparent transparent;
}
.sp-name{font-size:1.6cqw;font-weight:900;color:#201007;line-height:1.35;font-family:'Cairo',sans-serif}
.sp-order{font-size:1.45cqw;font-weight:800;color:#201007;margin-top:0.3cqw;font-family:'Cairo',sans-serif}
.speech small{display:block;color:var(--orange);font-weight:900;font-size:.85em}
.speech b{color:#c0392b}
.speech.popping{animation:pop .4s .2s both}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}

/* السلع فوق الكونتوار */
.counter-items{
  position:absolute;left:40.5cqw;top:19.5cqw;
  display:flex;gap:1.6cqw;align-items:flex-end;z-index:15;
}
.citem{
  width:8.6cqw;min-width:8.6cqw;background:#ffffff;border-radius:1.6cqw 1.6cqw 0.3cqw 0.3cqw;
  padding:0.8cqw 0.8cqw 0.6cqw;text-align:center;
  box-shadow:0 0.8cqw 2cqw rgba(0,0,0,.22);position:relative;
  animation:drop .45s cubic-bezier(.3,1.5,.5,1) both;
}
.citem::after{
  content:'';position:absolute;bottom:-0.45cqw;left:-0.5cqw;right:-0.5cqw;height:0.6cqw;
  background:linear-gradient(180deg,#9b5a2b,#613313);border-radius:0.25cqw;
  box-shadow:0 0.3cqw 0.6cqw rgba(0,0,0,.45);
}
.ce{font-size:3.8cqw;line-height:1.1;position:relative;margin-bottom:0.2cqw;filter:drop-shadow(0 0.2cqw 0.4cqw rgba(0,0,0,.15))}
.qty{
  position:absolute;top:-0.6cqw;right:-0.8cqw;background:#0077f5;color:#fff;
  font-size:1.15cqw;font-weight:900;border-radius:999px;padding:0.1cqw 0.55cqw;
  box-shadow:0 0.2cqw 0 #0056b3;line-height:1.4;
}
.cn{
  font-weight:800;font-size:1.15cqw;color:#2b180f;
  display:flex;align-items:center;justify-content:center;gap:0.25cqw;margin:0.2cqw 0;
}
.cn .leaf{color:#27ae60;font-size:.85em}
.ctag{
  display:inline-block;background:linear-gradient(180deg,#ff4747 0%,#db2424 100%);
  color:#ffffff;font-weight:900;font-size:1.2cqw;border-radius:999px;
  padding:0.15cqw 0.9cqw;box-shadow:0 0.25cqw 0 #941313;white-space:nowrap;
}
@keyframes drop{from{transform:translateY(-60%) scale(.6);opacity:0}to{transform:none;opacity:1}}
.counter-items.clear .citem{animation:lift .4s ease-in forwards}
@keyframes lift{to{transform:translateY(-40%);opacity:0}}
.bill-on-counter{position:absolute;left:34cqw;bottom:27cqw;transform:rotate(-8deg);z-index:15}
.bill-on-counter .money{font-size:1.2cqw;animation:drop .5s both}

/* ---------- واجهة الكونتوار (السؤال الخشبي + الأزرار الزرقاء) ---------- */
.counter-board{
  position:absolute;left:50%;transform:translateX(-50%);top:32.5cqw;
  width:min(85cqw,780px);display:flex;flex-direction:column;align-items:center;z-index:18;
}
.req-mobile{display:none}

/* اللوحة الخشبية مع المسامير والمعداد */
.task-frame{
  background:#fff8ee;border:0.38cqw solid #9c5c2d;outline:0.12cqw solid #5c2f0f;border-radius:1.4cqw;
  padding:0.55cqw 2.2cqw;box-shadow:inset 0 0.15cqw 0.3cqw rgba(0,0,0,.08),0 0.8cqw 2cqw rgba(0,0,0,.38);
  display:flex;align-items:center;justify-content:center;gap:1.2cqw;position:relative;min-width:32cqw;
}
.screw{
  position:absolute;width:0.6cqw;height:0.6cqw;border-radius:50%;
  background:#d4a046;border:0.08cqw solid #6b3e12;box-shadow:inset 0 0.06cqw 0.1cqw #fff,0 0.08cqw 0.15cqw rgba(0,0,0,.35);
}
.screw::after{
  content:'';position:absolute;left:50%;top:50%;width:0.35cqw;height:0.08cqw;
  background:#552d0a;transform:translate(-50%,-50%) rotate(45deg);
}
.screw.s-tl{top:0.35cqw;right:0.35cqw}
.screw.s-tr{top:0.35cqw;left:0.35cqw}
.screw.s-bl{bottom:0.35cqw;right:0.35cqw}
.screw.s-br{bottom:0.35cqw;left:0.35cqw}

.task{font-size:2cqw;font-weight:900;color:#261309;text-align:center;line-height:1.3;font-family:'Cairo',sans-serif}
.task-icon-box{
  background:#fbf0dc;border:0.15cqw solid #b87b46;border-radius:0.5cqw;
  padding:0.1cqw 0.35cqw;display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0.1cqw 0.2cqw rgba(0,0,0,.1);
}
.task-icon{font-size:2.1cqw;line-height:1}

/* الأزرار الزرقاء 3D اللامعة */
.controls{margin-top:1.4cqw;width:100%;display:flex;justify-content:center}
.choices{display:flex;gap:1.8cqw;justify-content:center;align-items:center}
.choice{
  font-family:'Cairo',sans-serif;font-weight:900;font-size:2.3cqw;color:#ffffff;
  min-width:12.8cqw;padding:0.9cqw 2cqw;border:none;border-radius:1.8cqw;cursor:pointer;
  background:linear-gradient(180deg,#2eaeff 0%,#007cf8 55%,#0066d6 100%);
  box-shadow:0 0.65cqw 0 #004da3,0 1.2cqw 2.4cqw rgba(0,0,0,.4),inset 0 0.2cqw 0.3cqw rgba(255,255,255,.85),inset 0 -0.15cqw 0.3cqw rgba(0,0,0,.25);
  transition:transform .08s,box-shadow .08s;
  display:inline-flex;align-items:center;justify-content:center;gap:0.4cqw;
  text-shadow:0 0.15cqw 0.3cqw rgba(0,0,0,.3);
}
.choice small{font-size:0.85em;font-weight:900;margin-right:0.25cqw}
.choice:hover{filter:brightness(1.05)}
.choice:active{
  transform:translateY(0.45cqw);
  box-shadow:0 0.2cqw 0 #004da3,0 0.4cqw 0.8cqw rgba(0,0,0,.3),inset 0 0.1cqw 0.2cqw rgba(255,255,255,.6);
}
.choice.right{
  background:linear-gradient(180deg,#3eed88 0%,#20bf6b 100%);
  box-shadow:0 0.65cqw 0 #188a4c,0 1.2cqw 2.4cqw rgba(32,191,107,.4),inset 0 0.2cqw 0.3cqw rgba(255,255,255,.85);
}
.choice.wrong{background:#b0bec5;box-shadow:0 0.65cqw 0 #78909c;opacity:0.65;cursor:not-allowed}


/* لوحة المفاتيح وإرجاع الباقي */
.pad-wrap{display:flex;gap:1.4cqw;align-items:center;justify-content:center}
.pad-display{
  direction:ltr;background:#24160d;color:#3ddc84;border:0.25cqw solid #945325;
  border-radius:1.2cqw;padding:0.6cqw 1.4cqw;min-width:14cqw;text-align:center;
  font-weight:900;font-size:2.2cqw;box-shadow:inset 0 0.3cqw 0.8cqw rgba(0,0,0,.6),0 0.4cqw 0 #130a05;
}
.pad-display small{font-size:.5em;color:#9fb3c8;margin-left:8px}
.pad{display:grid;grid-template-columns:repeat(3,4.2cqw);gap:0.5cqw;direction:ltr}
.key{
  height:3.6cqw;border:none;border-radius:1cqw;font-family:inherit;font-weight:900;
  font-size:1.4cqw;background:#ffffff;color:var(--dark);box-shadow:0 0.3cqw 0 #dfcaa8;cursor:pointer;
}
.key:active{transform:translateY(0.2cqw);box-shadow:0 0.1cqw 0 #dfcaa8}
.k-ok{background:linear-gradient(180deg,#3ddc84,var(--green));color:#fff;box-shadow:0 0.3cqw 0 var(--green-d)}
.k-del{background:linear-gradient(180deg,#ffb26b,#f39c12);color:#fff;box-shadow:0 0.3cqw 0 #b9770e}

.change-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:0.8cqw}
.tray{
  width:100%;max-width:48cqw;min-height:6.5cqw;border:0.25cqw dashed #945325;
  border-radius:1.2cqw;padding:0.5cqw 0.8cqw;background:rgba(255,248,238,.95);
  box-shadow:0 0.4cqw 1cqw rgba(0,0,0,.2);
}
.tray-head{text-align:center;font-weight:800;font-size:1.2cqw}
.tray-head b{font-size:1.3em;color:var(--green-d)}
.tray-items{display:flex;flex-wrap:wrap;gap:0.4cqw;justify-content:center;align-items:center;margin-top:0.4cqw;min-height:3.5cqw}
.tray-items .money{font-size:0.75cqw}
.tray-empty{color:#9a7b5a;font-weight:600;font-size:1.1cqw}
.money-row{display:flex;flex-wrap:wrap;gap:0.6cqw;justify-content:center;align-items:center}
.money-row .money{font-size:0.95cqw}
.btn-row{display:flex;gap:0.8cqw;justify-content:center}
.btn-row .btn{font-size:1.2cqw;padding:0.6cqw 1.4cqw;border-radius:1.2cqw}

/* ---------- النقود ---------- */
.money{
  position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:inherit;cursor:pointer;transition:transform .1s;flex-shrink:0;font-size:15px;line-height:1;
}
.money:active{transform:scale(.9)}
.money.static,.money.mini{cursor:default}
.money.mini{font-size:9px}
.coin{
  width:4.2em;height:4.2em;border-radius:50%;color:#5a3d00;
  background:radial-gradient(circle at 35% 30%,#fff7c2,#f0c53a 45%,#b8860b 100%);
  box-shadow:inset 0 0 0 .25em #d4a017,inset 0 0 0 .42em #ffe58a,0 .3em 0 #8a6500;
}
.coin b{font-size:1.3em;font-weight:900}
.coin small{font-size:.65em;font-weight:700}
.coin.d5,.coin.d10,.coin.d20{
  color:#2c3e50;background:radial-gradient(circle at 35% 30%,#fff,#cfd6dc 45%,#8795a1);
  box-shadow:inset 0 0 0 .25em #a5b1bb,inset 0 0 0 .42em #eef2f5,0 .3em 0 #5d6d7e;
}
.coin.d100,.coin.d200{
  background:radial-gradient(circle at 50% 50%,#ffe27a 0,#e5b30f 52%,#cfd6dc 54%,#9aa6b2 100%);
  box-shadow:inset 0 0 0 .22em #8795a1,0 .3em 0 #5d6d7e;
}
.coin.d5{width:3.5em;height:3.5em}
.coin.d10{width:3.8em;height:3.8em}
.coin.d20{width:4em;height:4em}
.coin.d200{width:4.5em;height:4.5em}
.note{
  width:7.6em;height:3.9em;border-radius:.5em;color:#fff;overflow:hidden;align-items:flex-start;padding:0 .7em;
  border:.2em solid rgba(255,255,255,.75);box-shadow:0 .3em 0 rgba(0,0,0,.3);
}
.note::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0 6px,transparent 6px 12px)}
.note::after{content:'';position:absolute;width:2.6em;height:2.6em;border-radius:50%;left:.4em;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.18);border:.12em dashed rgba(255,255,255,.55)}
.note .nv{font-size:1.55em;font-weight:900;position:relative;z-index:1}
.note .nd{font-size:.75em;opacity:.92;position:relative;z-index:1;margin-top:.2em}
.note.d500{background:linear-gradient(135deg,#6c3483,#a569bd)}
.note.d1000{background:linear-gradient(135deg,#a04000,#e67e22)}
.note.d2000{background:linear-gradient(135deg,#1a5276,#3498db)}

/* ---------- المدرب (عمي السعيد) أسفل اليمين ---------- */
.coach{
  position:absolute;right:2.2cqw;bottom:1.6cqw;z-index:12;
  background:#fffcf2;border:0.22cqw dashed #dec9a8;border-radius:1.2cqw;
  padding:0.6cqw 1.2cqw;box-shadow:0 0.5cqw 1.4cqw rgba(0,0,0,.22);
  display:flex;align-items:center;gap:0.8cqw;max-width:36cqw;
}
.coach-text{font-size:1.4cqw;font-weight:800;color:#2d180b;line-height:1.35}
.coach-avatar{position:relative;width:4.2cqw;height:4.2cqw;flex-shrink:0}
.coach-avatar img{
  width:100%;height:100%;border-radius:50%;object-fit:cover;
  border:0.2cqw solid #ffffff;box-shadow:0 0.3cqw 0.8cqw rgba(0,0,0,.2);
}
.coach-badge{
  position:absolute;bottom:-0.2cqw;left:-0.3cqw;font-size:1.3cqw;line-height:1;
  filter:drop-shadow(0 0.1cqw 0.2cqw rgba(0,0,0,.3));
}
.coach.good{background:#f0fff4;border-color:#a3e635}
.coach.bad{background:#fff5f5;border-color:#fca5a5}
.coach.show{animation:pop .3s}
.hint-box{width:100%;background:#fff8e6;border-radius:12px;padding:8px 12px;line-height:2;font-size:1.2cqw}
.eq{font-weight:900;background:#fff;border-radius:8px;padding:0 8px;border:2px solid #ffd59e;display:inline-block;direction:ltr;unicode-bidi:isolate}
.steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:4px}
.step{background:var(--blue);color:#fff;font-weight:900;border-radius:10px;padding:2px 10px;display:inline-flex;flex-direction:column;align-items:center;line-height:1.3}
.step small{font-size:.75em;color:#d6eaff}
.step.start{background:#7f8c8d}
.arrow{font-weight:900;color:#c9a96e}
.hint-coins{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;align-items:center}

/* ---------- النتيجة ---------- */
.result-card{max-width:560px;margin:90px auto 20px;text-align:center;padding:24px}
.result-card h2{margin-top:8px}
.big-stars{font-size:4.2rem;letter-spacing:8px;margin:4px 0}
.big-stars span{display:inline-block;animation:starPop .55s cubic-bezier(.3,1.8,.5,1) both}
@keyframes starPop{from{transform:scale(0) rotate(-180deg)}to{transform:none}}
.r-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:14px 0}
.r-stat{background:#fff;border-radius:16px;padding:10px;box-shadow:0 4px 0 #ecdcc4;font-weight:700}
.r-stat b{display:block;font-size:1.6rem;color:var(--orange)}
.new-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:14px}
.badge{background:#fff;border-radius:14px;padding:6px 12px;font-weight:800;box-shadow:0 3px 0 #ecdcc4}
.badge small{display:block;font-weight:600;font-size:.75rem;color:var(--muted)}
.badge.locked{filter:grayscale(1);opacity:.45}
.badge.new{animation:pop .5s .8s both;background:#fff6d6}
.r-actions{display:flex;flex-direction:column;gap:12px;align-items:center}
.record,.unlock-msg{font-weight:900;animation:pulse 1s infinite;margin-bottom:4px}
.record{color:#c0392b}
.unlock-msg{color:var(--green-d)}

/* ---------- الزينة ---------- */
.decor-preview{width:min(100%,calc(42vh * 16 / 9));margin-bottom:16px}
.decor-layer{position:absolute;inset:0;pointer-events:none;z-index:1}
.decor{position:absolute;line-height:1;filter:drop-shadow(0 .4cqw .4cqw rgba(0,0,0,.35));animation:pop .4s both}
.d-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.d-card{background:#fff;border-radius:20px;padding:14px;text-align:center;box-shadow:0 6px 0 #ecdcc4}
.d-card.owned{background:#effcf4}
.d-emo{font-size:3rem;line-height:1.3}
.d-name{font-weight:800;margin-bottom:8px}
.d-owned{color:var(--green-d);font-weight:800}

/* ---------- فضاء الأولياء ---------- */
.p-wrap{display:grid;gap:14px}
.p-section{background:rgba(255,248,236,.97);border-radius:20px;padding:16px;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.p-section h3{margin-bottom:10px}
.p-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.p-card{background:#fff;border-radius:16px;padding:12px;box-shadow:0 4px 0 #ecdcc4}
.p-card.empty{opacity:.6}
.p-head{display:flex;justify-content:space-between;align-items:center;font-weight:900;margin-bottom:6px}
.p-head .lc-stars{font-size:1.1rem}
.p-bar{margin:6px 0}
.p-bar-top{display:flex;justify-content:space-between;font-size:.9rem;font-weight:600}
.p-track{height:10px;background:#f0e6d8;border-radius:99px;overflow:hidden}
.p-track div{height:100%;border-radius:99px}
.p-meta{display:flex;justify-content:space-between;font-size:.85rem;color:var(--muted);margin-top:8px;font-weight:600}
.p-summary{display:flex;gap:10px;flex-wrap:wrap}
.p-summary .r-stat{flex:1;min-width:120px;text-align:center}
.advice{padding-right:20px}
.advice li{margin:6px 0;line-height:1.8;font-weight:600}
.badges-grid{display:flex;flex-wrap:wrap;gap:8px}
.switch-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #f0e6d8;flex-wrap:wrap;font-weight:700}
.switch-row:last-child{border-bottom:none}

/* ---------- النوافذ ---------- */
.modal{position:fixed;inset:0;background:rgba(20,10,0,.6);display:none;place-items:center;z-index:50;padding:16px;backdrop-filter:blur(4px)}
.modal.show{display:grid}
.modal-card{background:var(--cream);border-radius:26px;padding:24px;max-width:420px;width:100%;text-align:center;animation:pop .3s;box-shadow:0 20px 50px rgba(0,0,0,.4)}
.modal-card h2{margin:6px 0}
.modal-card p{margin-bottom:12px;font-weight:600}
.modal-card input{width:100%;font-family:inherit;font-size:1.3rem;font-weight:700;padding:12px;border-radius:14px;border:3px solid #ffd2a8;text-align:center;margin-bottom:14px;outline:none}
.modal-card input:focus{border-color:var(--orange)}
.modal-mascot{width:100px;height:100px;border-radius:50%;object-fit:cover;border:4px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.gate-q{font-size:2rem;margin:8px 0 14px}
.modal-actions{display:flex;gap:10px;justify-content:center;margin-top:16px;flex-wrap:wrap}
.modal .choice{min-width:90px;font-size:1.4rem}

/* ---------- المؤثرات ---------- */
.confetti{position:fixed;top:-20px;width:10px;height:16px;border-radius:2px;z-index:100;pointer-events:none;animation:confFall linear forwards}
@keyframes confFall{to{transform:translate(var(--dx),110vh) rotate(var(--r))}}
.float-text{position:fixed;transform:translate(-50%,0);font-size:2.2rem;font-weight:900;color:#27ae60;text-shadow:0 3px 0 #fff,0 0 12px #fff;pointer-events:none;z-index:90;animation:floatUp 1.2s ease-out forwards}
@keyframes floatUp{to{transform:translate(-50%,-90px);opacity:0}}
.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.bump{animation:bump .35s}
@keyframes bump{50%{transform:scale(1.25)}}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,150%);opacity:0;background:var(--dark);color:#fff;padding:12px 22px;border-radius:999px;font-weight:800;z-index:120;box-shadow:0 10px 30px rgba(0,0,0,.4);max-width:92vw;text-align:center}
.toast.show{animation:toast 2.6s ease forwards}
@keyframes toast{0%{transform:translate(-50%,150%);opacity:0}10%,85%{transform:translate(-50%,0);opacity:1}100%{transform:translate(-50%,150%);opacity:0}}

/* ---------- الهاتف ---------- */
/* ---------- التجاوب على الشاشات الصغيرة ---------- */
@media (max-width:768px){
  #app{padding:4px}
  .stage{border-radius:16px}
  .logo{font-size:2.5rem}
  .btn-xl{font-size:1.3rem;padding:14px 32px}
}
@media (max-width:480px) and (orientation:portrait){
  .stage{aspect-ratio:4/3}
  .speech{padding:0.6cqw 1.2cqw}
  .sp-name{font-size:2.4cqw}
  .sp-order{font-size:2.2cqw}
  .task{font-size:2.3cqw}
  .choice{font-size:2.5cqw;min-width:14cqw}
}

/* زر العودة لأكاديمية النابغة الصغير (مدمج في الركن الأيمن والبطاقة) */
.btn-academy-hub {
  background: linear-gradient(135deg, #1b4332, #2d6a4f);
  color: #ffffff !important;
  border: 2px solid #ffca28;
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Cairo', sans-serif;
  font-size: 0.92rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn-academy-hub:hover, .btn-academy-hub:active {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
  background: linear-gradient(135deg, #2d6a4f, #1b4332);
}
.btn-academy-hub .hub-arrow {
  font-size: 1.1rem;
  color: #ffca28;
}

.btn-home-hub {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  background: linear-gradient(135deg, #1b4332 0%, #2d6a4f 100%);
  color: #fff !important;
  border: 2px solid #ffca28;
  border-radius: 18px;
  padding: 12px 24px;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(27, 67, 50, 0.4);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.btn-home-hub:hover, .btn-home-hub:active {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(27, 67, 50, 0.55);
}

@media (max-width: 640px) {
  .corner-controls {
    top: 10px;
    right: 10px;
    gap: 6px;
  }
  .btn-academy-hub {
    padding: 6px 12px;
    font-size: 0.82rem;
    gap: 4px;
  }
}