:root{
  --cream:#FBF4E8;
  --cream-2:#F5E9D6;
  --coral:#E86A5C;
  --coral-dark:#C94E42;
  --teal:#3E8E8A;
  --teal-dark:#2E6E6A;
  --plum:#3A2E2A;
  --yellow:#F4C95D;
  --line:#E3D4B8;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--cream);
  font-family:'Segoe UI', Tahoma, Arial, sans-serif;
  color:var(--plum);
  -webkit-tap-highlight-color:transparent;
  padding-bottom:96px;               /* room for the submit bar */
}
.arabic{font-weight:700;}

header{padding:28px 20px 12px; text-align:center;}
header h1{
  font-size:2.1rem;
  font-weight:800;
  color:var(--coral-dark);
  margin:0 0 6px;
  line-height:1.25;
}
header p{margin:0; font-size:1rem; opacity:.7;}

.stars-wrap{max-width:480px; margin:14px auto 0; padding:0 24px; text-align:center;}
.stars{font-size:1.7rem; letter-spacing:4px; color:var(--yellow);}
.stars-label{font-size:.85rem; opacity:.6; margin-top:2px;}

main{max-width:480px; margin:0 auto; padding:20px 16px 30px;}

.activity{
  background:var(--cream-2);
  border:2px solid var(--line);
  border-radius:26px;
  padding:20px 14px 16px;
  margin-bottom:22px;
}
.activity-title{
  font-size:1.3rem;
  color:var(--teal-dark);
  text-align:center;
  margin:0 0 4px;
}
.activity-sub{text-align:center; font-size:.9rem; opacity:.65; margin:0 0 16px; font-weight:400;}

/* ---------- one question ---------- */
.q{
  background:#fff;
  border:2px solid var(--line);
  border-radius:18px;
  padding:14px 12px;
  margin-bottom:12px;
}
.q-prompt{margin-bottom:10px;}
.q-prompt .emoji{font-size:2rem; line-height:1;}
.q-prompt.picture{text-align:center;}
.q-prompt.scene{text-align:center; display:block;}
.q-prompt.scene .emoji{display:block; margin-bottom:6px;}
.q-prompt.scene .arabic{font-size:1.02rem; line-height:1.5;}
.q-prompt.sentence{font-size:1.15rem; font-weight:700;}

.opts{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.opts-stacked{flex-direction:column;}
.opts-cards{gap:10px;}

.opt{
  font-family:inherit;
  font-weight:700;
  font-size:1rem;
  color:var(--plum);
  background:var(--cream);
  border:2px solid var(--line);
  border-radius:14px;
  padding:9px 16px;
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.opt:hover{border-color:var(--coral);}
.opt:focus-visible{outline:3px solid var(--teal); outline-offset:2px;}

.opt.selected{background:var(--coral); border-color:var(--coral-dark); color:#fff;}

.opt.card{
  width:96px;
  padding:14px 6px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.opt.card .emoji{font-size:2rem;}
.opt.card .label{font-size:.85rem; font-weight:700;}

/* ---------- after grading ---------- */
.graded .opt{cursor:default;}
.graded .opt:hover{border-color:var(--line);}
.opt.right{background:var(--teal); border-color:var(--teal-dark); color:#fff;}
.opt.wrong{background:#F3B9B2; border-color:var(--coral-dark); color:var(--plum);}
.opt.reveal{border-color:var(--teal); border-style:dashed; background:#E9F5F3;}

.q.is-right{border-color:var(--teal); background:#F4FBFA;}
.q.is-wrong{border-color:var(--coral-dark); background:#FFF7F6;}
.q.is-empty{border-color:var(--yellow); background:#FFFBF0;}

.q-mark{font-size:.9rem; margin-top:8px; min-height:0; text-align:center; font-weight:700;}
.q.is-wrong .q-mark{color:var(--coral-dark);}
.q.is-right .q-mark{color:var(--teal-dark);}

.q.needs-answer{animation:nudge .4s;}
@keyframes nudge{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-5px);}
  75%{transform:translateX(5px);}
}

/* ---------- result ---------- */
.result{
  background:var(--coral);
  color:#fff;
  border-radius:20px;
  padding:18px;
  text-align:center;
  font-size:1.15rem;
  font-weight:700;
  line-height:1.6;
}
.result.perfect{background:var(--teal);}
.result.note{background:var(--yellow); color:var(--plum); font-size:1rem;}
.result .big{display:block; font-size:1.5rem; margin-bottom:4px;}

/* ---------- submit bar ---------- */
.submitbar{
  position:fixed;
  inset-inline:0;
  bottom:0;
  background:rgba(251,244,232,.96);
  border-top:2px solid var(--line);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  max-width:480px;
  margin:0 auto;
}
.progress{font-size:.9rem; opacity:.75;}
.submit-btn{
  font-family:inherit;
  font-size:1.05rem;
  font-weight:700;
  color:#fff;
  background:var(--teal);
  border:none;
  border-radius:16px;
  padding:12px 22px;
  cursor:pointer;
  transition:background .18s, transform .12s;
}
.submit-btn:hover{background:var(--teal-dark);}
.submit-btn:active{transform:scale(.97);}
.submit-btn:focus-visible{outline:3px solid var(--coral); outline-offset:2px;}
.submit-btn[disabled]{background:#B9C9C7; cursor:default;}
.submit-btn.retry{background:var(--coral);}
.submit-btn.retry:hover{background:var(--coral-dark);}

footer{text-align:center; font-size:.8rem; opacity:.4; padding:14px 20px 24px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}