/* ================================================================
   ركّب الكلمة — ورق مقصوص دافئ
   ================================================================ */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
html{-webkit-text-size-adjust:100%}
body{
  position:fixed;inset:0;overflow:hidden;
  background:#FFF6E5;
  color:#3A2A1A;
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- خلفية المشهد ---------- */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#bg .sun{
  position:absolute;top:14px;inset-inline-start:16px;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle at 42% 40%,#FFEFB8,#FFD86B 58%,rgba(255,216,107,0) 74%);
  opacity:.55;
}
#bg .dune{position:absolute;border-radius:50%;background:#E9C48A}
#bg .d1{bottom:-150px;inset-inline-start:-70px;width:78%;height:270px;opacity:.34}
#bg .d2{bottom:-180px;inset-inline-end:-90px;width:88%;height:310px;opacity:.22}

/* ---------- الهيكل ---------- */
#app{
  position:relative;z-index:2;
  height:100vh;height:100dvh;
  max-width:600px;margin:0 auto;
  display:flex;flex-direction:column;
  gap:8px;
  padding:8px 8px 10px;
}

/* ---------- الترويسة ---------- */
header{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0}
.mascot-wrap{
  position:relative;flex:0 0 auto;
  width:clamp(44px,11.5vw,54px);height:clamp(44px,11.5vw,54px);
}
.mascot{
  width:100%;height:100%;object-fit:contain;display:block;
  transform-origin:50% 88%;
  animation:breathe 3.6s ease-in-out infinite;
  will-change:transform;
  -webkit-user-drag:none;pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(150,104,48,.22));
}
.mascot-fallback{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:30px;line-height:1;
  filter:drop-shadow(0 2px 2px rgba(150,104,48,.22));
}
.mascot-wrap[data-state="hint"] .mascot{animation:peck .55s ease-in-out 2}
.mascot-wrap[data-state="celebrate"] .mascot{animation:cheer .5s cubic-bezier(.2,1.4,.4,1) 3}
.mascot-wrap[data-state="sad"] .mascot{animation:sadTilt .5s ease-out forwards}
@keyframes breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.03,.97)}}
@keyframes peck{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(7px) rotate(-11deg)}}
@keyframes cheer{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-13px) scale(.94,1.07) rotate(-7deg)}
  70%{transform:translateY(0) scale(1.07,.93) rotate(5deg)}100%{transform:translateY(0) scale(1)}}
@keyframes sadTilt{from{transform:rotate(0)}to{transform:rotate(10deg) translateY(3px)}}

.title{
  flex:1 1 auto;min-width:0;
  margin:0;font-size:clamp(15px,4.4vw,19px);font-weight:800;line-height:1.2;
  color:#3A2A1A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.chip{
  flex:0 0 auto;display:flex;align-items:center;gap:4px;
  background:#FFFFFF;border:3px solid #E8C79A;border-radius:999px;
  padding:3px 10px;box-shadow:0 3px 0 #E0B27E;
  font-weight:800;font-size:clamp(13px,3.6vw,16px);color:#1F6F5C;
}
.chip-star{color:#FFC93C;font-size:.95em;line-height:1}
.chip.pop{animation:chipPop .34s cubic-bezier(.2,1.5,.4,1)}
@keyframes chipPop{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}

.icon-btn{
  flex:0 0 auto;width:42px;height:42px;border-radius:14px;
  background:#FFFFFF;border:3px solid #E8C79A;box-shadow:0 3px 0 #E0B27E;
  color:#7C6853;display:grid;place-items:center;padding:0;cursor:pointer;
  transition:transform .12s,box-shadow .12s,color .12s;
}
.icon-btn svg{width:20px;height:20px}
.icon-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #E0B27E}
.icon-btn .ic-off{display:none}
.icon-btn.muted{color:#E4572E}
.icon-btn.muted .ic-on{display:none}
.icon-btn.muted .ic-off{display:block}

/* ---------- فقاعة الرسالة ---------- */
.bubble{
  flex:0 0 auto;
  background:#FFFFFF;border:3px solid #EFDFC4;border-radius:14px;
  padding:5px 12px;
  font-size:clamp(11.5px,3.4vw,13.5px);font-weight:500;color:#6B5A46;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 2px 0 rgba(224,178,126,.45);
  min-height:30px;display:flex;align-items:center;
}
.bubble.bump{animation:bump .3s ease-out}
@keyframes bump{0%{transform:translateY(0)}45%{transform:translateY(-3px)}100%{transform:translateY(0)}}

/* ---------- المنطقة الوسطى ---------- */
main{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:center;gap:10px;
}

/* ---------- بطاقة الكلمة ---------- */
.word-card{
  flex:0 0 auto;
  background:#FFFDF8;
  border:4px solid #E8C79A;
  border-radius:24px;
  box-shadow:0 6px 0 #E0B27E;
  padding:8px 10px 10px;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.pic{
  width:clamp(52px,13vw,72px);height:clamp(52px,13vw,72px);
  border-radius:20px;border:3px solid #F1DDBE;background:#FFF7E9;
  display:grid;place-items:center;padding:0;cursor:pointer;
  font-size:clamp(28px,8vw,40px);line-height:1;
  box-shadow:0 3px 0 #EBD3AE;
  transition:transform .14s,box-shadow .14s;
  font-family:'Tajawal',system-ui,sans-serif;
}
.pic:active{transform:translateY(2px);box-shadow:0 1px 0 #EBD3AE}

.word-area{
  position:relative;width:100%;
  display:flex;align-items:center;justify-content:center;
  min-height:clamp(54px,10vh,74px);
}
.slots{
  display:flex;align-items:center;justify-content:center;
  gap:clamp(5px,1.8vw,9px);
  transition:opacity .22s ease,transform .22s ease;
}
.slots.done{opacity:0;transform:scale(.86);pointer-events:none}
.slot{
  width:clamp(44px,12.6vw,60px);
  height:clamp(50px,9.4vh,68px);
  border-radius:16px;
  border:4px dashed #E4C79C;
  background:#FFFCF5;
  display:grid;place-items:center;
  position:relative;
  transition:border-color .15s,background .15s,transform .15s,box-shadow .15s;
}
.slot .dot{width:8px;height:8px;border-radius:50%;background:#E7CDA7;display:block}
.slot.filled{border-style:solid;border-color:#BFE0D6;background:#F2FBF7}
.slot .glyph{
  font-family:'Amiri',serif;font-weight:700;
  font-size:clamp(26px,7.4vw,36px);
  line-height:1.5;color:#1F6F5C;
  display:block;transform:translateY(1px);
  animation:glyphPop .26s cubic-bezier(.2,1.5,.4,1);
}
@keyframes glyphPop{0%{transform:translateY(1px) scale(.55);opacity:.2}100%{transform:translateY(1px) scale(1);opacity:1}}
.slot.near{
  border-color:#2D9CDB;background:#EAF6FD;
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 0 0 4px rgba(45,156,219,.16);
}
.slot.hint{animation:hintPulse 1s ease-in-out 3;border-color:#FFC93C}
@keyframes hintPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,201,60,0)}50%{box-shadow:0 0 0 8px rgba(255,201,60,.4)}}
.slot.wrong{animation:shake .42s ease-in-out;border-color:#E4572E;background:#FDEDE8}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-6px)}
  40%,60%{transform:translateX(6px)}
}

.fullword{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Amiri',serif;font-weight:700;
  font-size:clamp(32px,10.5vw,52px);line-height:1.6;
  color:#1F6F5C;
  opacity:0;transform:scale(.7);
  transition:opacity .25s ease,transform .34s cubic-bezier(.2,1.4,.4,1);
  pointer-events:none;
}
.fullword.show{opacity:1;transform:scale(1)}

/* ---------- السجادة والصينية ---------- */
.tray-wrap{
  flex:0 0 auto;position:relative;
  background:
    repeating-linear-gradient(90deg,rgba(196,80,58,.22) 0 5px,rgba(196,80,58,0) 5px 26px),
    linear-gradient(180deg,#F9D8AF,#F0C08E);
  border:4px solid #E0B27E;
  border-top-width:6px;
  border-radius:20px;
  box-shadow:0 6px 0 #D9A472,inset 0 0 0 2px rgba(255,255,255,.4);
  padding:9px 6px;
  display:grid;place-items:center;
  min-height:76px;
}
.tray{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(4px,1.6vw,8px);
  width:100%;
}
.tile{
  width:clamp(46px,12.4vw,58px);
  height:clamp(50px,9.4vh,62px);
  border-radius:16px;
  background:#FFFFFF;
  border:4px solid #E8C79A;
  box-shadow:0 5px 0 #E0B27E;
  font-family:'Amiri',serif;font-weight:700;
  font-size:clamp(25px,7vw,34px);
  color:#2B2118;
  display:grid;place-items:center;
  padding:0;cursor:grab;
  touch-action:none;
  position:relative;
  transition:transform .12s ease,box-shadow .12s ease;
  -webkit-user-drag:none;
}
.tile:active{transform:translateY(3px);box-shadow:0 2px 0 #E0B27E}
.tile.lifted{visibility:hidden}
.tile.hint{animation:hintPulse 1s ease-in-out 3;border-color:#FFC93C}
.tile.shake{animation:shake .42s ease-in-out}

/* شبح السحب */
#dragLayer{position:fixed;inset:0;z-index:900;pointer-events:none}
.ghost{
  position:fixed;left:0;top:0;
  transform-origin:0 0;
  transform:translate(0,0) rotate(-4deg) scale(1.09);
  visibility:visible;
  pointer-events:none;
  z-index:950;
  box-shadow:0 12px 20px rgba(96,64,22,.24),0 5px 0 #E0B27E;
  transition:none;
}

/* ---------- التذييل ---------- */
footer{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 2px;min-height:24px;
}
.pips{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.pip{
  width:clamp(11px,3.2vw,15px);height:clamp(11px,3.2vw,15px);
  border-radius:50%;background:#FFFFFF;border:2.5px solid #E8C79A;
  display:block;transition:background .2s,border-color .2s,transform .2s;
}
.pip.done{background:#1F6F5C;border-color:#1F6F5C}
.pip.now{border-color:#E4572E;background:#FFE8DE;transform:scale(1.15)}
.best{font-size:clamp(10.5px,3.1vw,12.5px);color:#7C6853;font-weight:500;white-space:nowrap}
.best b{color:#1F6F5C;font-weight:800}

/* ---------- النقاط الطائرة ---------- */
.float-score{
  position:fixed;z-index:960;pointer-events:none;
  transform:translate(-50%,-50%);
  font-weight:800;font-size:17px;color:#1F6F5C;
  text-shadow:0 2px 0 #fff,0 0 10px rgba(255,255,255,.9);
  animation:floatUp .9s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes floatUp{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}
  25%{opacity:1;transform:translate(-50%,-70%) scale(1.1)}
  100%{opacity:0;transform:translate(-50%,-190%) scale(1)}
}

/* ---------- النجوم ---------- */
.star-layer{position:fixed;inset:0;z-index:1100;pointer-events:none;overflow:hidden}
.star-item{
  position:absolute;top:-10%;color:#FFC93C;
  text-shadow:0 2px 0 rgba(224,178,126,.55);
  animation:starFall linear forwards;
}
@keyframes starFall{
  0%{transform:translateY(-12vh) rotate(0deg) scale(.5);opacity:0}
  14%{opacity:1}
  100%{transform:translateY(112vh) rotate(540deg) scale(1);opacity:.85}
}
.star-banner{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  background:#FFFFFF;color:#1F6F5C;
  border:4px solid #FFC93C;border-radius:999px;
  padding:13px 26px;
  font-weight:800;font-size:clamp(17px,5.2vw,25px);
  white-space:nowrap;
  box-shadow:0 8px 0 rgba(224,178,126,.85);
  animation:bannerPop .5s cubic-bezier(.2,1.5,.4,1) both;
}
@keyframes bannerPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* ---------- الطبقات المنبثقة ---------- */
.overlay{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:12px;
  background:rgba(58,42,26,.42);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
}
.overlay.hidden{display:none}

.teach{
  width:100%;max-width:430px;max-height:100%;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#FFFDF8;
  border:4px solid #E8C79A;border-radius:26px;
  box-shadow:0 8px 0 #E0B27E;
  padding:14px;
  display:flex;flex-direction:column;gap:11px;
  animation:popIn .28s cubic-bezier(.2,1.3,.4,1);
}
@keyframes popIn{0%{opacity:0;transform:scale(.9) translateY(10px)}100%{opacity:1;transform:scale(1) translateY(0)}}

.teach-head{text-align:center}
.teach-head h2{
  margin:0 0 2px;font-size:clamp(17px,5vw,21px);font-weight:800;color:#1F6F5C;
}
.teach-head p{margin:0;font-size:clamp(12.5px,3.6vw,14px);color:#7C6853}
.teach-head p b{
  font-family:'Amiri',serif;font-size:1.45em;color:#3A2A1A;font-weight:700;
}

.letter-big{
  display:flex;align-items:center;gap:10px;
  width:100%;min-height:64px;
  background:#FFFFFF;border:3px solid #EFE0C8;border-radius:18px;
  padding:6px 12px;cursor:pointer;
  box-shadow:0 3px 0 #EBD3AE;
  transition:transform .12s,box-shadow .12s;
}
.letter-big:active{transform:translateY(2px);box-shadow:0 1px 0 #EBD3AE}
.letter-big .lb-glyph{
  font-family:'Amiri',serif;font-weight:700;font-size:clamp(30px,9vw,40px);
  line-height:1.5;color:#1F6F5C;
}
.letter-big .lb-name{flex:1 1 auto;text-align:start;font-size:clamp(13px,3.8vw,15px);font-weight:700;color:#3A2A1A}
.letter-big .spk{flex:0 0 auto;width:34px;height:34px;border-radius:12px;background:#EAF6FD;color:#2D9CDB;display:grid;place-items:center}
.letter-big .spk svg{width:18px;height:18px}

.teach-hint{margin:0;text-align:center;font-size:clamp(11.5px,3.3vw,13px);color:#7C6853}

.forms{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.form-card{
  position:relative;
  background:#FFFFFF;border:3px solid #EFE0C8;border-radius:18px;
  padding:14px 4px 8px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:pointer;min-height:96px;
  box-shadow:0 3px 0 #EBD3AE;
  transition:transform .12s,box-shadow .12s,border-color .12s;
}
.form-card:active{transform:translateY(2px) scale(.98);box-shadow:0 1px 0 #EBD3AE;border-color:#BFE3F2}
.form-card .num{
  position:absolute;top:-9px;inset-inline-start:10px;
  width:20px;height:20px;border-radius:50%;
  background:#FFC93C;color:#5A3B00;border:2px solid #FFFDF8;
  font-size:11px;font-weight:800;display:grid;place-items:center;
}
.form-card .big{
  font-family:'Amiri',serif;font-weight:700;
  font-size:clamp(26px,8.4vw,36px);line-height:1.65;color:#1F6F5C;
}
.form-card .lab{font-size:clamp(10px,2.9vw,11.5px);color:#7C6853;font-weight:500;text-align:center}
.form-card .spk{color:#2D9CDB;width:20px;height:20px;display:grid;place-items:center}
.form-card .spk svg{width:15px;height:15px}

.word-line{
  margin:0;text-align:center;font-size:clamp(11.5px,3.3vw,13px);color:#7C6853;
  background:#FFF6E5;border-radius:12px;padding:6px 10px;
}

.btn-primary{
  width:100%;min-height:52px;
  border:none;border-radius:16px;
  background:#1F6F5C;color:#FFFFFF;
  font-family:'Tajawal',sans-serif;font-size:clamp(15px,4.4vw,17px);font-weight:800;
  box-shadow:0 5px 0 #14503F;
  cursor:pointer;padding:12px 18px;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .12s,box-shadow .12s;
}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #14503F}
.btn-primary:disabled{opacity:.6;cursor:default}

/* ---------- شاشة النهاية ---------- */
.end-card{
  width:100%;max-width:400px;max-height:100%;overflow-y:auto;
  background:#FFFDF8;border:4px solid #E8C79A;border-radius:26px;
  box-shadow:0 8px 0 #E0B27E;
  padding:16px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  text-align:center;
  animation:popIn .3s cubic-bezier(.2,1.3,.4,1);
}
.end-emoji{font-size:clamp(38px,12vw,52px);line-height:1;animation:cheer .7s cubic-bezier(.2,1.4,.4,1) 2}
.end-card h2{margin:0;font-size:clamp(17px,5vw,21px);font-weight:800;color:#1F6F5C}
.stars-row{display:flex;gap:6px;font-size:clamp(26px,8vw,34px);line-height:1}
.stars-row .on{color:#FFC93C;text-shadow:0 2px 0 #E0B27E}
.stars-row .off{color:#EADCC6}
.end-score{
  display:flex;align-items:baseline;gap:8px;
  background:#F2FBF7;border:3px solid #BFE0D6;border-radius:18px;
  padding:6px 18px;
}
.end-score span{font-size:12.5px;color:#7C6853;font-weight:500}
.end-score b{font-size:clamp(24px,7.5vw,32px);color:#1F6F5C;font-weight:800;line-height:1.2}
.end-best{margin:0;font-size:clamp(11.5px,3.3vw,13px);color:#7C6853}
.end-best b{color:#1F6F5C}

.lb-box{
  width:100%;display:flex;flex-direction:column;gap:7px;
  border-top:2px dashed #EFDFC4;padding-top:10px;
}
.lb-title{font-size:12.5px;font-weight:800;color:#3A2A1A;margin:0}
.lb-note{font-size:11.5px;color:#7C6853;margin:0;line-height:1.5}
.lb-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.lb-list li{
  display:flex;align-items:center;gap:8px;
  background:#FFFFFF;border:2px solid #EFE0C8;border-radius:12px;
  padding:5px 9px;font-size:12.5px;color:#3A2A1A;
}
.lb-list li.you{border-color:#1F6F5C;background:#F2FBF7;font-weight:800}
.lb-list .rank{width:18px;color:#B99A6E;font-weight:800;flex:0 0 auto}
.lb-list .handle{flex:1 1 auto;text-align:start;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-list .pts{color:#1F6F5C;font-weight:800;flex:0 0 auto}
.lb-tag{font-size:10px;color:#A08B72}

.btn-ghost{
  width:100%;min-height:46px;
  border:3px solid #BFE3F2;border-radius:14px;
  background:#EAF6FD;color:#1D6E9B;
  font-family:'Tajawal',sans-serif;font-size:14px;font-weight:800;
  cursor:pointer;padding:10px;
  transition:transform .12s;
}
.btn-ghost:active{transform:translateY(2px)}
.btn-ghost:disabled{opacity:.6}

/* ---------- شاشات قصيرة ---------- */
@media (max-height:560px){
  #app{gap:6px;padding:6px 8px 8px}
  .bubble{min-height:26px;font-size:11px;padding:3px 10px}
  .word-card{padding:6px 8px 8px;border-radius:20px}
  .pic{width:46px;height:46px;font-size:26px;border-radius:16px}
  .tray-wrap{padding:6px 5px;min-height:64px;border-radius:16px}
  .slot{height:clamp(44px,8.4vh,56px)}
  .tile{height:clamp(44px,8.4vh,54px)}
  main{gap:7px}
}
@media (max-height:430px){
  .bubble{display:none}
  .pic{display:none}
}

/* ---------- شاشات عريضة ---------- */
@media (min-width:640px){
  .title{font-size:20px}
  .word-card{padding:14px 18px 16px}
}

/* ---------- تقليل الحركة ---------- */
@media (prefers-reduced-motion:reduce){
  .mascot,.mascot-wrap[data-state] .mascot{animation:none !important}
  .chip.pop,.bubble.bump,.pic:active{animation:none !important}
  .star-item{animation-duration:.01s !important}
  .ghost{transition:none !important}
  *{scroll-behavior:auto !important}
}