/* =========================================================
   روضة الحروف — نمط «الملصقات المسطّحة» على ورق فاتح
   ========================================================= */

:root{
  --paper:#FFF7E8;
  --white:#FFFDF8;
  --coral:#FF6B6B;
  --sun:#FFD93D;
  --teal:#4ECDC4;
  --violet:#7C5CFF;
  --mint:#7BD389;
  --ink:#2B2A4A;
  --ink-2:#6A6885;
  --line:rgba(43,42,74,0.16);
  --sk:0 4px 0 rgba(43,42,74,0.18);
  --sk-lg:0 7px 0 rgba(43,42,74,0.16);
  --r:22px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}

body{
  font-family:'Tajawal',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.55;
  color:var(--ink);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.075'/%3E%3C/svg%3E");
  min-height:100vh;
  -webkit-user-select:none;
  user-select:none;
  overscroll-behavior-y:none;
}

h1,h2,h3,.big,.lc-letter,.lb-letter{
  font-family:'Baloo Bhaijaan 2','Tajawal',system-ui,sans-serif;
  line-height:1.25;
  margin:0;
}

button{font-family:inherit;color:inherit;cursor:pointer;user-select:none;-webkit-user-select:none;border:0;background:none;padding:0;}
img{max-width:100%;display:block;}
.hidden{display:none !important;}

.app{max-width:760px;margin:0 auto;padding:0 14px 20px;}

/* ---------------- TOP BAR ---------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:10px;
  padding:10px 2px 12px;
  background:linear-gradient(to bottom,var(--paper) 74%,rgba(255,247,232,0));
  backdrop-filter:blur(3px);
}
.brand{display:flex;align-items:center;gap:9px;min-width:0;}
.brand-badge{
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;font-size:22px;
  background:var(--mint);border:3px solid var(--ink);border-radius:14px;
  box-shadow:var(--sk);
}
.brand-txt{min-width:0;}
.brand-txt h1{font-size:21px;font-weight:800;letter-spacing:0;white-space:nowrap;}
.brand-txt p{margin:0;font-size:12px;color:var(--ink-2);font-weight:500;white-space:nowrap;}
.topstats{display:flex;align-items:center;gap:7px;margin-inline-start:auto;}

.pill{
  display:inline-flex;align-items:center;gap:5px;
  padding:6px 12px;border-radius:999px;
  background:var(--white);border:2.5px solid var(--ink);
  font-weight:800;font-size:15px;box-shadow:0 3px 0 rgba(43,42,74,0.14);
  white-space:nowrap;
}
.pill.soft{background:#FFF1C9;font-size:13px;padding:5px 11px;}
.star-pill{background:var(--sun);}
.pill-ico{font-size:15px;line-height:1;}

.icon-btn{
  width:46px;height:46px;flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--white);border:3px solid var(--ink);border-radius:15px;
  box-shadow:var(--sk);color:var(--ink);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.icon-btn svg{width:22px;height:22px;}
.icon-btn:hover{background:#FFEFC7;}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,42,74,0.18);}
.icon-btn.small{width:40px;height:40px;border-width:2.5px;border-radius:13px;box-shadow:none;}
.icon-btn.small svg{width:18px;height:18px;}
.back-btn{background:#E9E6FF;}

/* ---------------- SCREENS ---------------- */
.screen{padding-bottom:8px;animation:popin .28s cubic-bezier(.22,1.1,.36,1) both;}
@keyframes popin{from{opacity:0;transform:translateY(10px) scale(.99);}to{opacity:1;transform:none;}}

.row-top{display:flex;align-items:center;gap:8px;margin:4px 0 12px;}
.row-top .star-pill{margin-inline-start:auto;}

/* ---------------- DAILY PANEL ---------------- */
.daily-panel{
  display:flex;align-items:center;gap:14px;
  background:var(--white);
  border:3.5px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sk-lg);
  padding:12px 16px;margin-bottom:16px;
}
.daily-txt h2{font-size:18px;font-weight:800;}
.daily-txt p{margin:1px 0 0;font-size:14px;color:var(--ink-2);}
.daily-txt b{color:var(--ink);font-size:16px;}
.daily-dots{display:flex;gap:7px;margin-inline-start:auto;}
.daily-dots span{
  width:26px;height:26px;border-radius:50%;
  border:3px solid var(--ink);background:#EFECFB;
  transition:background .25s ease,transform .25s cubic-bezier(.22,1.4,.36,1);
}
.daily-dots span.on{background:var(--mint);transform:scale(1.12);}

/* ---------------- SECTION HEAD ---------------- */
.section-head{display:flex;align-items:baseline;gap:10px;margin:0 4px 12px;flex-wrap:wrap;}
.section-head h2{font-size:22px;font-weight:800;}
.section-sub{margin:0;font-size:13px;color:var(--ink-2);}

/* ---------------- LETTER GRID (path) ---------------- */
.letter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(74px,1fr));
  gap:14px 10px;
  padding:6px 2px 120px;
}
.letter-bubble{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;
  aspect-ratio:1/1;
  background:var(--c,var(--teal));
  border:3.5px solid var(--ink);
  border-radius:20px;
  box-shadow:0 4px 0 rgba(43,42,74,0.2);
  transition:transform .13s ease,box-shadow .13s ease,filter .2s ease;
  overflow:hidden;
}
.letter-grid .letter-bubble:nth-child(even){transform:translateY(9px);}
.letter-bubble:active{transform:translateY(4px) scale(.97);box-shadow:0 1px 0 rgba(43,42,74,0.2);}
.letter-grid .letter-bubble:nth-child(even):active{transform:translateY(13px) scale(.97);}
.lb-letter{
  font-size:34px;font-weight:800;color:var(--ink);
  line-height:1;margin-top:3px;
}
.lb-stars{font-size:11px;letter-spacing:1px;color:var(--ink);opacity:.9;line-height:1;}
.letter-bubble.locked{filter:grayscale(.75) brightness(1.06);opacity:.62;}
.lb-lock{
  position:absolute;inset-block-start:5px;inset-inline-end:6px;
  width:17px;height:17px;opacity:.8;
}
.lb-lock svg{width:17px;height:17px;display:block;}
.letter-bubble.next{animation:nextPulse 1.8s ease-in-out infinite;}
.letter-bubble.next::after{
  content:'';position:absolute;inset:-6px;border-radius:24px;
  border:3px dashed var(--ink);opacity:.35;
  animation:ringSpin 9s linear infinite;
}
@keyframes nextPulse{0%,100%{transform:translateY(0) scale(1);}50%{transform:translateY(-4px) scale(1.035);}}
@keyframes ringSpin{to{transform:rotate(360deg);}}

/* ---------------- LETTER CARD ---------------- */
.letter-card{
  display:flex;align-items:center;gap:12px;
  background:var(--white);
  border:3.5px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sk-lg);
  padding:10px 14px;margin-bottom:10px;
}
.lc-letter{
  width:66px;height:66px;flex:0 0 auto;
  display:grid;place-items:center;
  font-size:40px;font-weight:800;color:var(--ink);
  background:var(--sun);
  border:3px solid var(--ink);border-radius:18px;
  box-shadow:0 3px 0 rgba(43,42,74,0.2);
}
.lc-mid{min-width:0;flex:1 1 auto;}
.lc-name{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:22px;font-weight:800;}
.lc-word{font-size:16px;font-weight:700;color:var(--ink-2);}
.listen-btn{
  flex:0 0 auto;
  display:flex;align-items:center;gap:6px;
  min-height:52px;padding:0 16px;
  background:var(--teal);
  border:3px solid var(--ink);border-radius:16px;
  box-shadow:0 4px 0 rgba(43,42,74,0.2);
  font-weight:800;font-size:16px;color:var(--ink);
  transition:transform .12s ease,box-shadow .12s ease;
}
.listen-btn svg{width:21px;height:21px;}
.listen-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,42,74,0.2);}
.listen-btn[disabled]{opacity:.7;}
.listen-btn.busy svg{animation:wave 0.7s ease-in-out infinite;}
@keyframes wave{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}}

.voice-error{
  margin:-2px 4px 10px;padding:8px 12px;
  background:#FFE3E3;border:2.5px solid var(--coral);border-radius:14px;
  font-size:13.5px;font-weight:700;color:#8A2020;
}

/* ---------------- TRACE CARD ---------------- */
.trace-card{
  background:var(--white);
  border:3.5px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sk-lg);
  padding:12px 14px 14px;
}
.trace-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.trace-title{font-weight:800;font-size:15px;}
.trace-stars{font-size:15px;letter-spacing:1px;color:var(--ink);margin-inline-start:auto;}
.pct{
  font-weight:800;font-size:14px;
  background:#FFF1C9;border:2.5px solid var(--ink);border-radius:999px;
  padding:1px 10px;min-width:52px;text-align:center;
}
.trace-wrap{
  position:relative;
  width:min(100%,380px,44vh);
  aspect-ratio:1/1;
  margin:0 auto;
  background:radial-gradient(circle at 50% 42%,#FFFFFF 0%,#FBF8FF 62%,#F1ECFB 100%);
  border:3px dashed rgba(43,42,74,.22);
  box-shadow:inset 0 2px 10px rgba(43,42,74,.06);
  border-radius:18px;
  overflow:hidden;
}
#traceCanvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;}

.progress-bar{
  height:16px;margin:12px 2px 6px;
  background:#EFECFB;border:2.5px solid var(--ink);border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg,var(--mint),var(--teal));
  border-radius:999px;
  transition:width .18s ease;
}
.trace-hint{margin:2px 2px 10px;font-size:12.5px;color:var(--ink-2);text-align:center;}
.trace-actions{display:flex;gap:10px;}

/* ---------------- BUTTONS ---------------- */
.btn{
  flex:1 1 auto;
  min-height:54px;padding:0 16px;
  display:inline-flex;align-items:center;justify-content:center;
  border:3px solid var(--ink);border-radius:16px;
  font-weight:800;font-size:16.5px;color:var(--ink);
  box-shadow:0 4px 0 rgba(43,42,74,0.2);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,opacity .2s ease;
  text-align:center;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,42,74,0.2);}
.btn.primary{background:var(--coral);color:var(--ink);}
.btn.ghost{background:var(--white);}
.btn.danger{background:#FFB3B3;color:#7A1414;}
.btn[disabled]{opacity:.45;box-shadow:0 2px 0 rgba(43,42,74,0.14);pointer-events:none;}
.foot{text-align:center;font-size:12px;color:var(--ink-2);padding:18px 0 10px;}

/* ---------------- MATCH SCREEN ---------------- */
.match-card{
  background:var(--white);
  border:3.5px solid var(--ink);border-radius:var(--r);
  box-shadow:var(--sk-lg);
  padding:14px 14px 18px;
  text-align:center;
}
.mascot-sm{width:92px;height:92px;object-fit:contain;margin:-6px auto 2px;}
.match-q{font-size:22px;font-weight:800;margin-bottom:2px;}
.hl{
  display:inline-grid;place-items:center;
  min-width:46px;height:46px;padding:0 8px;
  background:var(--sun);border:3px solid var(--ink);border-radius:14px;
  font-size:26px;line-height:1;vertical-align:middle;
}
.match-hint{margin:2px 0 14px;font-size:14px;color:var(--ink-2);font-weight:600;min-height:22px;}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.match-card-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:14px 6px 10px;
  background:#FFFDF8;
  border:3.5px solid var(--ink);border-radius:18px;
  box-shadow:0 4px 0 rgba(43,42,74,0.2);
  transition:transform .13s ease,box-shadow .13s ease,background .18s ease;
  min-height:130px;
}
.match-card-btn .mc-emoji{font-size:40px;line-height:1.1;}
.match-card-btn .mc-word{font-weight:800;font-size:15px;}
.match-card-btn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(43,42,74,0.2);}
.match-card-btn.correct{background:#D7F7DC;border-color:#2F8B45;animation:correctPop .4s cubic-bezier(.22,1.4,.36,1);}
@keyframes correctPop{0%{transform:scale(1);}55%{transform:scale(1.07);}100%{transform:scale(1);}}
.match-card-btn.wrong{background:#FFE0E0;border-color:var(--coral);animation:wrongShake .4s ease;}
@keyframes wrongShake{0%,100%{transform:translateX(0);}25%{transform:translateX(-6px);}75%{transform:translateX(6px);}}

/* ---------------- WIN SCREEN ---------------- */
.win-card{
  background:var(--white);
  border:3.5px solid var(--ink);border-radius:28px;
  box-shadow:var(--sk-lg);
  padding:16px 18px 20px;
  text-align:center;
  margin-top:8px;
}
.mascot-big{width:148px;height:148px;object-fit:contain;margin:-4px auto 0;}
.win-card h2{font-size:28px;font-weight:800;}
.stars-big{display:flex;justify-content:center;gap:8px;font-size:42px;line-height:1;margin:6px 0 2px;}
.stars-big span{color:#DDD9EE;transition:color .3s ease,transform .3s cubic-bezier(.22,1.4,.36,1);}
.stars-big span.on{color:var(--sun);text-shadow:0 3px 0 rgba(43,42,74,.18);transform:scale(1.06);}
.win-msg{margin:6px 0 10px;font-size:15px;color:var(--ink-2);font-weight:600;}
.win-sticker{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:#FFF1C9;border:3px solid var(--ink);
  font-weight:800;font-size:16px;
}
.win-badges{display:flex;flex-direction:column;gap:8px;margin:12px 0 0;}
.new-badge{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;border-radius:16px;
  background:#E6FBF3;border:3px solid var(--teal);
  font-weight:800;font-size:14.5px;text-align:start;
  animation:popin .35s cubic-bezier(.22,1.4,.36,1) both;
}
.new-badge .nb-emoji{font-size:22px;}
.win-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.win-actions .btn{flex:1 1 42%;}

/* ---------------- MASCOT DOCK ---------------- */
.mascot-dock{
  position:fixed;bottom:6px;right:6px;z-index:40;
  display:flex;flex-direction:column;align-items:flex-end;gap:4px;
  pointer-events:none;
}
.mascot-dock img{width:96px;height:96px;object-fit:contain;animation:bob 3.4s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
.mascot-bubble{
  max-width:170px;
  background:var(--white);border:3px solid var(--ink);border-radius:16px 16px 4px 16px;
  padding:6px 12px;font-size:12.5px;font-weight:700;
  box-shadow:0 3px 0 rgba(43,42,74,0.16);
  transition:opacity .3s ease,transform .3s ease;
}
.mascot-bubble.hide{opacity:0;transform:translateY(6px);}

/* ---------------- MODALS ---------------- */
.overlay{
  position:fixed;inset:0;z-index:120;
  display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:rgba(43,42,74,.45);
  backdrop-filter:blur(4px);
  animation:fadein .2s ease both;
}
@keyframes fadein{from{opacity:0;}to{opacity:1;}}
.modal{
  width:100%;max-width:480px;max-height:86vh;overflow-y:auto;
  background:var(--paper);
  border:4px solid var(--ink);border-radius:26px;
  box-shadow:0 8px 0 rgba(43,42,74,.22);
  padding:16px 16px 20px;
  animation:popin .26s cubic-bezier(.22,1.2,.36,1) both;
}
.modal-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.modal-head h2{font-size:21px;font-weight:800;}
.modal-head .icon-btn{margin-inline-start:auto;}
.modal-sub{font-size:16px;font-weight:800;margin:14px 0 8px;}
.modal-text{font-size:14px;color:var(--ink-2);margin:0 0 12px;font-weight:600;}
.modal-text.warn{color:#8A2020;background:#FFE3E3;border:2.5px solid var(--coral);border-radius:14px;padding:9px 12px;}
.modal-note{font-size:13px;color:var(--ink-2);margin:14px 0 0;background:#FFF1C9;border:2.5px dashed var(--ink);border-radius:14px;padding:9px 12px;font-weight:600;}
.treasure-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px;}
.ts-item{
  display:flex;flex-direction:column;align-items:center;
  background:var(--white);border:3px solid var(--ink);border-radius:16px;
  padding:8px 4px;
}
.ts-item b{font-size:20px;font-family:'Baloo Bhaijaan 2',sans-serif;}
.ts-item span{font-size:12px;color:var(--ink-2);font-weight:700;}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;}
.badge{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 4px;border-radius:16px;text-align:center;
  background:var(--white);border:3px solid var(--ink);
  box-shadow:0 3px 0 rgba(43,42,74,.14);
}
.badge.locked{opacity:.45;filter:grayscale(1);box-shadow:none;}
.badge .b-emoji{font-size:26px;line-height:1.1;}
.badge .b-name{font-size:11.5px;font-weight:800;line-height:1.2;}
.badge .b-desc{font-size:10px;color:var(--ink-2);line-height:1.25;}
.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px;}
.sticker{
  aspect-ratio:1/1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-radius:14px;border:3px solid var(--ink);
  background:var(--c,var(--sun));
  font-family:'Baloo Bhaijaan 2',sans-serif;font-size:20px;font-weight:800;
  box-shadow:0 3px 0 rgba(43,42,74,.16);
  line-height:1;
}
.sticker .st-emoji{font-size:14px;line-height:1;margin-top:1px;}
.sticker.locked{background:#EDEAF7;color:#B7B2CE;border-style:dashed;box-shadow:none;}
.reset-confirm{margin-top:10px;}
.confirm-row{display:flex;gap:9px;flex-wrap:wrap;}
.confirm-row .btn{flex:1 1 44%;}

/* ---------------- TOAST ---------------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,26px);
  z-index:200;
  max-width:min(90vw,420px);
  background:var(--ink);color:#FFF7E8;
  padding:11px 18px;border-radius:999px;
  font-weight:800;font-size:14.5px;text-align:center;
  opacity:0;pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,1.2,.36,1);
}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:430px){
  .app{padding:0 11px 18px;}
  .brand-txt h1{font-size:19px;}
  .brand-txt p{display:none;}
  .brand-badge{width:38px;height:38px;font-size:19px;border-radius:12px;}
  .icon-btn{width:43px;height:43px;border-radius:13px;}
  .pill{font-size:14px;padding:5px 10px;}
  .letter-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:12px 8px;}
  .lb-letter{font-size:30px;}
  .lc-letter{width:58px;height:58px;font-size:34px;border-radius:15px;}
  .lc-name{font-size:19px;}
  .listen-btn{padding:0 12px;font-size:15px;min-height:48px;}
  .listen-btn span{display:none;}
  .listen-btn svg{width:23px;height:23px;}
  .cards{gap:8px;}
  .match-card-btn{min-height:118px;padding:12px 4px 8px;}
  .match-card-btn .mc-emoji{font-size:34px;}
  .match-card-btn .mc-word{font-size:13.5px;}
  .match-q{font-size:19px;}
  .mascot-dock img{width:80px;height:80px;}
  .mascot-bubble{font-size:11.5px;max-width:150px;}
  .win-card h2{font-size:24px;}
  .stars-big{font-size:36px;}
}

@media (max-height:520px){
  .trace-wrap{width:min(100%,300px,42vh);}
  .mascot-dock img{width:64px;height:64px;}
  .mascot-bubble{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .mascot-dock img{animation:none;}
}