/* ============ هرم الطاقة - سادس ============ */
:root{
  --sky:#BFEBFF;
  --meadow:#8FD978;
  --sun:#FFC93C;
  --prod:#6BCB77;
  --cons:#FF9F45;
  --dec:#A78BFA;
  --ink:#4A3728;
  --paper:#FFF8E7;
  --sand:#F3E2B8;
  --font-title:'Baloo Bhaijaan 2','Tajawal',system-ui,sans-serif;
  --font-body:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; padding:0; }
body{
  font-family:var(--font-body);
  background:var(--sky);
  color:var(--ink);
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
}
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
[hidden]{ display:none !important; }

/* ============ المشهد ============ */
.scene{
  position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;
  background:linear-gradient(180deg,#DCF3FF 0%, #BFEBFF 52%, #CDEFB2 100%);
}
.cloud{
  position:absolute; background:#fff; border-radius:999px;
  box-shadow:0 0 0 1px rgba(74,55,40,.05);
  opacity:.95;
}
.cloud::before,.cloud::after{
  content:''; position:absolute; background:#fff; border-radius:50%;
}
.cl1{ width:110px; height:34px; top:9%; right:-140px; animation:drift 46s linear infinite; }
.cl1::before{ width:52px; height:52px; top:-24px; right:16px; }
.cl1::after{ width:36px; height:36px; top:-16px; right:62px; }
.cl2{ width:84px; height:26px; top:24%; right:-160px; animation:drift 62s linear infinite 8s; opacity:.85; }
.cl2::before{ width:40px; height:40px; top:-19px; right:12px; }
.cl2::after{ width:28px; height:28px; top:-12px; right:48px; }
.cl3{ width:130px; height:38px; top:4%; right:-200px; animation:drift 78s linear infinite 20s; opacity:.8; }
.cl3::before{ width:60px; height:60px; top:-28px; right:20px; }
.cl3::after{ width:42px; height:42px; top:-20px; right:74px; }
@keyframes drift{ from{ transform:translateX(0); } to{ transform:translateX(-140vw); } }

.hill{
  position:absolute; border-radius:50%; 
}
.hill-back{
  width:118%; height:44%; bottom:-14%; right:-14%;
  background:#A5DE8B;
}
.hill-front{
  width:96%; height:34%; bottom:-16%; left:-22%;
  background:#8FD978;
}
.meadow{
  position:absolute; left:0; right:0; bottom:0; height:13%;
  background:#7ECB68;
  border-top:3px solid rgba(74,55,40,.12);
}
.flowers{
  position:absolute; left:0; right:0; bottom:9%; height:10px;
  background-image:radial-gradient(circle,#FFF8E7 3px,transparent 3.4px),
                   radial-gradient(circle,#FFC93C 2.6px,transparent 3px);
  background-size:120px 10px, 90px 10px;
  background-position:0 0, 44px 3px;
  background-repeat:repeat-x;
  opacity:.55;
}

/* ============ الشاشات ============ */
.screen{
  position:fixed; inset:0; z-index:2;
  display:flex; flex-direction:column;
}

/* ============ الغلاف ============ */
.cover{
  align-items:center; justify-content:center;
  padding:18px; overflow-y:auto;
  text-align:center;
}
.cover-inner{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(8px,1.6vh,16px);
  width:100%; max-width:620px;
  padding:8px 0 14px;
}
.cover-sun{
  width:clamp(64px,13vh,108px); height:clamp(64px,13vh,108px);
  animation:spin 26s linear infinite;
}
.cover-sun svg{ width:100%; height:100%; display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.cover-title{
  margin:0;
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(44px,12.5vw,92px);
  line-height:1.05;
  color:var(--sun);
  text-shadow:
    3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 3px 0 var(--ink), 0 -3px 0 var(--ink),
    2px 2px 0 var(--ink), -2px 2px 0 var(--ink), 2px -2px 0 var(--ink), -2px -2px 0 var(--ink),
    0 9px 0 rgba(74,55,40,.22);
  animation:titlePop .7s cubic-bezier(.2,1.3,.4,1) backwards;
}
@keyframes titlePop{
  0%{ transform:scale(.6) rotate(-6deg); opacity:0; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}
.cover-sub{
  margin:0; font-weight:700;
  font-size:clamp(14px,3.4vw,19px);
  color:#3E6B2F;
}
.credit{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(16px,4.3vw,28px);
  line-height:1.7;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:22px;
  padding:10px 20px 12px;
  box-shadow:0 6px 0 rgba(74,55,40,.2);
  animation:titlePop .8s cubic-bezier(.2,1.3,.4,1) .18s backwards;
  max-width:100%;
}
.credit .c1{ color:#4CAF50; }
.credit .c2{ color:#E8862E; }
.credit .c3{ color:#8E6BF0; }
.credit .c4{ color:#E1553F; font-style:normal; display:inline-block; }
.credit .c5{ color:#2E7FC0; }

.btn-start{
  font-family:var(--font-title);
  font-weight:800;
  font-size:clamp(20px,4.8vw,30px);
  color:#fff;
  background:var(--prod);
  border:4px solid var(--ink);
  border-radius:999px;
  padding:11px 46px 15px;
  box-shadow:0 8px 0 var(--ink);
  transition:transform .12s ease, box-shadow .12s ease, background .15s;
  animation:titlePop .8s cubic-bezier(.2,1.3,.4,1) .32s backwards;
}
.btn-start:hover{ background:#5CC169; }
.btn-start:active{ transform:translateY(6px); box-shadow:0 2px 0 var(--ink); }
.btn-start:focus-visible{ outline:4px solid #2E7FC0; outline-offset:4px; }

.cover-best{
  margin:0; font-weight:700;
  font-size:clamp(12px,2.9vw,16px);
  color:#5C4633;
}

/* ============ شاشة اللعب ============ */
.game{ overflow:hidden; }

.hud{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px 6px;
}
.hud-score{
  display:flex; align-items:center; gap:3px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:999px;
  padding:1px 11px 3px 9px;
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(13px,2.1vh,19px);
  color:var(--ink);
  box-shadow:0 3px 0 rgba(74,55,40,.18);
  white-space:nowrap;
  flex:0 0 auto;
}
.star-mini{ color:var(--sun); font-size:.95em; }
.bar{
  flex:1 1 auto; min-width:52px;
  height:clamp(12px,1.9vh,18px);
  background:#fff;
  border:3px solid var(--ink);
  border-radius:999px;
  overflow:hidden;
  box-shadow:0 3px 0 rgba(74,55,40,.14);
}
.bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,#FFD86B,#FFC93C);
  transition:width .42s cubic-bezier(.2,.8,.3,1);
}
.step-label{
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(11px,1.7vh,15px);
  color:var(--ink);
  white-space:nowrap; min-width:34px; text-align:center;
  flex:0 0 auto;
}
.sound-btn{
  width:36px; height:36px; flex:0 0 auto;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--ink);
  display:grid; place-items:center;
  box-shadow:0 3px 0 rgba(74,55,40,.18);
  transition:transform .12s ease, box-shadow .12s ease;
}
.sound-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(74,55,40,.18); }
.sound-btn:focus-visible{ outline:3px solid #2E7FC0; outline-offset:2px; }

.play-row{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}

/* ============ المسرح والهرم ============ */
.stage{
  position:relative;
  flex:1 1 auto; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:5px 6px;
  --s:1;
}
.pyramid-wrap{
  position:relative;
  flex:0 0 auto;
  width:280px; height:262px;
}
.pyramid-svg{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
  overflow:visible;
}
.pyramid-svg path{
  transition:filter .2s ease;
}
.pyramid-svg path.glow{
  animation:pathGlow .85s ease-out;
}
@keyframes pathGlow{
  0%{ filter:brightness(1); }
  30%{ filter:brightness(1.45) saturate(1.25) drop-shadow(0 0 10px rgba(255,201,60,.95)); }
  100%{ filter:brightness(1); }
}

.tier{
  position:absolute;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:calc(var(--s,1) * 2px);
  padding:calc(var(--s,1) * 6px) calc(var(--s,1) * 4px);
  border-radius:calc(var(--s,1) * 14px);
  cursor:pointer;
  transition:background-color .16s ease, box-shadow .16s ease;
}
.tier.hot{
  background:rgba(255,255,255,.45);
  box-shadow:0 0 0 calc(var(--s,1) * 3px) #FFD86B inset;
}
.tier:focus-visible{ outline:3px solid #2E7FC0; outline-offset:2px; }

.tier-label{
  font-family:var(--font-title); font-weight:800;
  font-size:calc(var(--s,1) * 14px);
  line-height:1.12;
  color:#fff;
  text-shadow:0 calc(var(--s,1) * 2px) 0 rgba(74,55,40,.45);
  pointer-events:none;
  white-space:nowrap;
}
.tier-slots{
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:center;
  gap:calc(var(--s,1) * 4px);
  width:100%;
  min-height:calc(var(--s,1) * 30px);
  pointer-events:none;
}
.mini{
  width:calc(var(--s,1) * 30px);
  height:calc(var(--s,1) * 30px);
  background:#fff;
  border:calc(var(--s,1) * 2px) solid var(--ink);
  border-radius:50%;
  display:grid; place-items:center;
  overflow:hidden;
  box-shadow:0 2px 0 rgba(74,55,40,.18);
  animation:popIn .38s cubic-bezier(.2,1.4,.5,1) backwards;
}
.mini svg{ width:88%; height:88%; display:block; }
@keyframes popIn{
  0%{ transform:scale(0) rotate(-25deg); opacity:0; }
  60%{ transform:scale(1.18) rotate(6deg); opacity:1; }
  100%{ transform:scale(1) rotate(0); opacity:1; }
}

/* شارة مصدر الطاقة */
.energy-badge{
  position:absolute;
  top:2px; right:2px;
  width:calc(var(--s,1) * 84px);
  min-width:60px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  background:#FFF3D2;
  border:3px solid var(--ink);
  border-radius:calc(var(--s,1) * 16px);
  padding:calc(var(--s,1) * 4px) 3px calc(var(--s,1) * 6px);
  box-shadow:0 4px 0 rgba(74,55,40,.2);
  transition:transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.energy-badge .energy-ico{
  width:calc(var(--s,1) * 32px); height:calc(var(--s,1) * 32px);
  display:grid; place-items:center;
  opacity:.55;
  transition:opacity .25s ease, transform .25s ease;
}
.energy-ico svg{ width:100%; height:100%; display:block; }
.energy-txt{
  font-family:var(--font-title); font-weight:800;
  font-size:calc(var(--s,1) * 10.5px);
  line-height:1.12;
  color:var(--ink);
  text-align:center;
}
.energy-badge.hot{
  background:#FFE7A3;
  transform:scale(1.05);
  box-shadow:0 0 0 4px #FFD86B, 0 6px 0 rgba(74,55,40,.2);
}
.energy-badge.filled{
  background:#FFD86B;
}
.energy-badge.filled .energy-ico{ opacity:1; transform:scale(1.1); }
.energy-badge.glow{ animation:badgeGlow .85s ease-out; }
@keyframes badgeGlow{
  0%,100%{ box-shadow:0 4px 0 rgba(74,55,40,.2); }
  40%{ box-shadow:0 0 0 8px rgba(255,201,60,.6), 0 4px 0 rgba(74,55,40,.2); }
}
.energy-badge:focus-visible{ outline:3px solid #2E7FC0; outline-offset:2px; }

/* ============ الرف والبطاقة ============ */
.shelf{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
  padding:4px 10px 9px;
}
.shelf-board{
  background:linear-gradient(180deg,#F0DEBB,#E3CDA2);
  border:3px solid var(--ink);
  border-radius:20px;
  padding:6px 14px;
  box-shadow:0 5px 0 rgba(74,55,40,.22);
  display:flex; align-items:center; justify-content:center;
  min-width:clamp(110px,30vw,180px);
  min-height:clamp(70px,14vh,120px);
}
.card-slot{ display:flex; align-items:center; justify-content:center; }

.game-card{
  width:clamp(84px,17vh,140px);
  background:#fff;
  border:3px solid var(--ink);
  border-radius:20px;
  box-shadow:0 0 0 4px #fff, 0 5px 0 rgba(74,55,40,.22);
  padding:6px 8px 7px;
  display:flex; flex-direction:column; align-items:center;
  gap:2px;
  cursor:grab;
  touch-action:none;
  animation:cardDrop .45s cubic-bezier(.2,1.2,.4,1) backwards;
}
@keyframes cardDrop{
  0%{ transform:translateY(-52px) scale(.82); opacity:0; }
  100%{ transform:translateY(0) scale(1); opacity:1; }
}
.card-art{ width:100%; aspect-ratio:1 / 1; display:block; }
.card-art svg{ width:100%; height:100%; display:block; }
.card-name{
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(12px,1.9vh,17px);
  line-height:1.15;
  color:var(--ink);
  text-align:center;
}
.game-card.is-source{ opacity:.28; animation:none; }
.game-card.selected{ box-shadow:0 0 0 4px #FFD86B, 0 5px 0 rgba(74,55,40,.22); }

.drag-ghost{
  position:fixed; z-index:900;
  pointer-events:none;
  margin:0;
  animation:none !important;
  box-shadow:0 0 0 4px #fff, 0 16px 24px rgba(74,55,40,.3) !important;
  will-change:transform;
}

.hint{
  margin:0;
  font-size:clamp(11px,1.8vh,15px);
  font-weight:700;
  color:#5C4633;
  text-align:center;
  max-width:34ch;
  line-height:1.45;
  min-height:1.4em;
  transition:color .18s;
}
.hint.wrong{ color:#C24A32; }

/* ============ نجوم + نقاط طائرة ============ */
.star-bit{
  position:fixed; z-index:950; pointer-events:none;
  color:var(--sun);
  font-size:clamp(14px,2.4vh,22px);
  line-height:1;
  text-shadow:0 0 1px var(--ink);
  transform:translate(-50%,-50%);
}
.float-pts{
  position:fixed; z-index:951; pointer-events:none;
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(18px,3vh,28px);
  color:#2E9B3F;
  text-shadow:0 2px 0 #fff, 0 0 8px #fff;
  transform:translate(-50%,-50%);
}

/* ============ السؤال الأخير ============ */
.overlay{
  position:fixed; inset:0; z-index:800;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(74,55,40,.38);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.quiz-card{
  background:var(--paper);
  border:4px solid var(--ink);
  border-radius:26px;
  padding:16px 16px 14px;
  width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto;
  text-align:center;
  box-shadow:0 10px 0 rgba(74,55,40,.3);
  animation:popIn .35s cubic-bezier(.2,1.3,.4,1) backwards;
}
.quiz-tag{
  display:inline-block;
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(12px,1.9vh,15px);
  color:#fff;
  background:var(--dec);
  border:3px solid var(--ink);
  border-radius:999px;
  padding:2px 14px 4px;
  box-shadow:0 3px 0 rgba(74,55,40,.22);
}
.quiz-q{
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(18px,3.2vh,26px);
  line-height:1.4;
  margin:10px 0 8px;
  color:var(--ink);
}
.speak-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(12px,1.9vh,15px);
  color:#3E6B2F;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:999px;
  padding:4px 14px 5px;
  box-shadow:0 3px 0 rgba(74,55,40,.18);
  margin-bottom:12px;
  transition:transform .12s, box-shadow .12s;
}
.speak-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(74,55,40,.18); }
.quiz-opts{ display:flex; flex-direction:column; gap:9px; }
.quiz-opt{
  display:block; width:100%;
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(15px,2.5vh,20px);
  background:#fff; color:var(--ink);
  border:3px solid var(--ink);
  border-radius:16px;
  padding:12px 14px 14px;
  box-shadow:0 4px 0 rgba(74,55,40,.2);
  transition:transform .18s cubic-bezier(.2,1.2,.4,1), background .25s, color .25s, opacity .25s, box-shadow .18s;
  text-align:center;
}
.quiz-opt:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(74,55,40,.2); }
.quiz-opt:focus-visible{ outline:3px solid #2E7FC0; outline-offset:2px; }
.quiz-opt.ok{
  background:var(--prod); color:#fff;
  transform:scale(1.05);
  box-shadow:0 4px 0 var(--ink), 0 0 0 5px rgba(255,216,107,.7);
}
.quiz-opt.bad{
  background:#E7DECD; color:#9A8B7A;
  opacity:.6;
  transform:scale(.95);
}
.quiz-fb{
  margin:12px 0 0;
  font-weight:700;
  font-size:clamp(13px,2.1vh,17px);
  color:#3E6B2F;
  min-height:1.4em;
  line-height:1.5;
}

/* ============ شاشة النتيجة ============ */
.result{
  align-items:center; justify-content:center;
  padding:18px; overflow-y:auto;
}
.result-card{
  background:var(--paper);
  border:4px solid var(--ink);
  border-radius:28px;
  padding:20px 18px 18px;
  width:100%; max-width:460px;
  text-align:center;
  box-shadow:0 10px 0 rgba(74,55,40,.28);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  animation:popIn .4s cubic-bezier(.2,1.3,.4,1) backwards;
}
.result-stars{
  font-size:clamp(30px,6.5vh,50px);
  letter-spacing:6px;
  line-height:1;
  color:var(--sun);
  text-shadow:0 3px 0 var(--ink);
}
.result-stars .off{ color:#E4DAC6; }
.result-title{
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(20px,3.6vh,30px);
  margin:0; color:var(--ink); line-height:1.3;
}
.result-score{
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(16px,2.6vh,22px);
  color:#3E6B2F;
  display:flex; align-items:baseline; gap:4px;
}
.result-score b{ font-size:clamp(34px,6.6vh,52px); color:#2E9B3F; line-height:1; }
.result-note{
  margin:0; font-size:clamp(13px,2.1vh,17px);
  font-weight:500; line-height:1.65; color:#5C4633;
  max-width:32ch;
}
.save-status{
  margin:0; min-height:1.3em;
  font-weight:700;
  font-size:clamp(12px,1.9vh,15px);
}
.save-status.pending{ color:#A8842E; }
.save-status.ok{ color:#2E9B3F; }
.save-status.fail{ color:#B5503C; }

.btn-primary{
  font-family:var(--font-title); font-weight:800;
  font-size:clamp(17px,2.8vh,23px);
  color:#fff; background:var(--prod);
  border:4px solid var(--ink); border-radius:999px;
  padding:9px 36px 13px;
  box-shadow:0 7px 0 var(--ink);
  transition:transform .12s, box-shadow .12s, background .15s;
  margin-top:4px;
}
.btn-primary:hover{ background:#5CC169; }
.btn-primary:active{ transform:translateY(5px); box-shadow:0 2px 0 var(--ink); }
.btn-primary:focus-visible{ outline:4px solid #2E7FC0; outline-offset:4px; }

.btn-ghost{
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(13px,2.1vh,17px);
  color:var(--ink); background:#fff;
  border:3px solid var(--ink); border-radius:999px;
  padding:6px 24px 8px;
  box-shadow:0 4px 0 rgba(74,55,40,.22);
  transition:transform .12s, box-shadow .12s;
}
.btn-ghost:active{ transform:translateY(4px); box-shadow:0 0 0 rgba(74,55,40,.22); }

.btn-join{
  font-family:var(--font-title); font-weight:700;
  font-size:clamp(13px,2.1vh,17px);
  color:#fff; background:#2E7FC0;
  border:3px solid var(--ink); border-radius:999px;
  padding:7px 24px 9px;
  box-shadow:0 4px 0 var(--ink);
}
.btn-join:active{ transform:translateY(4px); box-shadow:0 0 0 var(--ink); }

.best-line{
  margin:2px 0 0;
  font-size:clamp(12px,1.9vh,15px);
  font-weight:700; color:#5C4633;
}

/* ============ شاشات قصيرة / أفقية ============ */
@media (max-height:560px){
  .hint{ display:none; }
  .shelf-board{ min-height:clamp(62px,13vh,92px); padding:5px 12px; }
}
@media (max-height:430px){
  .hud{ padding:4px 8px 4px; }
  .sound-btn{ width:30px; height:30px; }
  .cover-inner{ gap:6px; }
  .credit{ font-size:clamp(13px,3.4vw,20px); padding:6px 14px 8px; border-radius:16px; }
}
@media (orientation:landscape) and (max-height:560px){
  .play-row{ flex-direction:row; }
  .shelf{
    width:38%; max-width:250px;
    border-inline-start:3px dashed rgba(74,55,40,.18);
    padding:6px 8px;
  }
  .shelf-board{ padding:5px 10px; }
  .stage{ padding:4px; }
  .cover-sun{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .cloud{ animation:none; opacity:.8; }
  .cover-sun{ animation:none; }
  .cover-title,.credit,.btn-start,.result-card,.quiz-card,.game-card,.mini{ animation:none !important; }
  .pyramid-svg path.glow{ animation:none; filter:brightness(1.3); }
  .energy-badge.glow{ animation:none; }
}