/* ============================================================
   Qur'an Adventure — design system (source of truth: previews)
   ============================================================ */

:root{
  --ink:#2E2440; --ink-soft:#6C6080;
  --primary:#8B62A5; --primary-deep:#5E4278; --lilac:#EBE1F4;
  --coral:#F1A7AD; --coral-deep:#C85F6B; --rose:#DC5468; --rose-deep:#B83E54;
  --mint:#A7ECCD; --mint-deep:#2F9E75;
  --cream:#FAF6FD; --card:#FFFFFF; --line:#ECE3F2;
  --sans:'Plus Jakarta Sans',system-ui,sans-serif;
  --disp:'Fraunces',Georgia,serif;
  --ar:'Amiri',serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  font-family:var(--sans);
  background:radial-gradient(1200px 600px at 50% -10%, #F0E6FA 0%, transparent 60%), var(--cream);
  color:var(--ink);
  min-height:100%;
  display:flex;justify-content:center;
  -webkit-tap-highlight-color:transparent;
}

.app{
  width:100%;max-width:480px;min-height:100vh;
  min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--cream);
  box-shadow:0 0 0 1px var(--line);
}

/* ---------------- screens ---------------- */
.screen{
  flex:1;display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
  animation:rise .5s cubic-bezier(.2,.7,.2,1) both;
}
.screen[hidden]{display:none}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.fade-in{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion: reduce){
  .screen,.fade-in{animation:none}
  *{transition-duration:.01ms !important}
}

/* ---------------- top band ---------------- */
.topband{
  position:relative;background:var(--primary-deep);color:#fff;
  padding:calc(18px + env(safe-area-inset-top)) 20px 20px;
}
.topband .pattern{position:absolute;inset:0;opacity:.18;pointer-events:none;width:100%;height:100%}
.brandrow{display:flex;align-items:center;justify-content:space-between;position:relative;gap:10px}
.brand{font-family:var(--disp);font-weight:600;font-size:18px;letter-spacing:-.01em}
.brand--big{font-size:30px;line-height:1.15}
.roundpill{
  background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.30);
  padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;
}

.topband--home{padding-bottom:28px}
.home-hero{position:relative;padding-top:14px}
.home-tag{margin-top:8px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.85);max-width:320px}

/* team scoreboard in header */
.scores{display:flex;gap:10px;margin-top:14px;position:relative;flex-wrap:wrap}
.team{
  flex:1;min-width:110px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.24);
  border-radius:14px;padding:9px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  transition:transform .14s ease, background .14s ease;
}
.team:hover{transform:translateY(-1px);background:rgba(255,255,255,.24)}
.team .nm{font-size:12.5px;font-weight:800;opacity:.98;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team .pt{font-family:var(--disp);font-weight:700;font-size:20px}
.team.lead{background:var(--coral);border-color:transparent;color:var(--ink)}
.team.lead:hover{background:#F4B4B9}

/* ---------------- body ---------------- */
.body{padding:20px 20px 18px;flex:1;display:flex;flex-direction:column;align-items:flex-start}
.home-body{gap:18px;align-items:stretch}

.catpill{
  display:inline-block;background:var(--lilac);color:var(--primary-deep);
  font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:6px 11px;border-radius:999px;
}
.qlabel{margin-top:16px;color:var(--ink-soft);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.qtext{font-family:var(--disp);font-weight:500;font-size:22px;line-height:1.28;margin-top:6px}

/* multiple choice options */
.options{margin-top:18px;display:flex;flex-direction:column;gap:11px;width:100%}
.options[hidden]{display:none}
.opt{
  display:flex;align-items:center;gap:13px;padding:14px 14px;background:#fff;
  border:1.5px solid var(--line);border-radius:16px;cursor:pointer;text-align:left;width:100%;
  font-family:var(--sans);
  transition:border-color .15s ease, transform .13s ease, box-shadow .15s ease, background .15s ease, opacity .2s ease;
}
.opt .badge{
  width:32px;height:32px;flex-shrink:0;border-radius:10px;background:var(--lilac);color:var(--primary-deep);
  font-weight:800;font-size:14px;display:grid;place-items:center;
  transition:background .15s ease, color .15s ease;
}
.opt .txt{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.35}
.opt:hover{border-color:var(--primary);background:#FBF8FD;transform:translateY(-2px);box-shadow:0 14px 24px -16px rgba(139,98,165,.75)}
.opt:hover .badge{background:var(--primary);color:#fff}
.opt:active{transform:translateY(0);box-shadow:0 6px 12px -10px rgba(139,98,165,.6)}
.opt:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* reveal state of options */
.opt.is-correct{border-color:var(--mint-deep);background:var(--mint)}
.opt.is-correct .badge{background:var(--mint-deep);color:#fff}
.opt.is-correct:hover{transform:none;box-shadow:none;border-color:var(--mint-deep);background:var(--mint)}
.opt.is-faded{opacity:.38}
.opt.is-faded:hover{transform:none;box-shadow:none;border-color:var(--line);background:#fff}
.opt.is-faded:hover .badge{background:var(--lilac);color:var(--primary-deep)}

/* reveal card */
.reveal{
  margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:16px;box-shadow:0 10px 22px -16px rgba(46,36,64,.3);width:100%;
}
.reveal[hidden]{display:none}
.rlabel{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--primary-deep);text-transform:uppercase}
.answer{margin-top:5px;font-family:var(--disp);font-weight:600;font-size:20px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.answer .ar{font-family:var(--ar);font-size:24px;font-weight:400;color:var(--primary);line-height:1.4}
.refchip{
  display:inline-block;margin-top:11px;background:#FBE3E5;color:var(--coral-deep);
  font-size:12px;font-weight:600;padding:5px 11px;border-radius:999px;
}
.refchip[hidden]{display:none}

/* du'a reveal block */
.dua-block{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.dua-block[hidden]{display:none}
.dua-translit{font-size:14.5px;font-weight:600;font-style:italic;color:var(--ink);line-height:1.5}
.dua-arabic{font-family:var(--ar);font-size:27px;line-height:1.9;color:var(--primary);text-align:right}
.dua-translation{font-size:14px;color:var(--ink);line-height:1.55}
.dua-saidby{font-size:12.5px;font-weight:700;color:var(--ink-soft)}
.dua-translit:empty,.dua-arabic:empty,.dua-translation:empty,.dua-saidby:empty{display:none}

/* context strips */
.strip{margin-top:12px;border-radius:14px;padding:12px 14px;font-size:14px;line-height:1.5;width:100%}
.strip[hidden]{display:none}
.strip .h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.know{background:#FCEEEF;border-left:4px solid var(--coral)}
.know .h{color:var(--coral-deep)}
.talk{background:#E7FBF2;border-left:4px solid var(--mint)}
.talk .h{color:var(--mint-deep)}
.strip p{color:var(--ink)}

/* ---------------- footer ---------------- */
.footer{
  padding:14px 20px calc(20px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--card);
}
.hint{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px;text-align:center}
.award{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:9px}
.awardrow{display:flex;gap:9px;margin-bottom:12px;flex-wrap:wrap}

.btn-action{
  width:100%;background:var(--rose);color:#fff;border:none;border-radius:14px;padding:14px;
  font-family:var(--sans);font-weight:700;font-size:15px;cursor:pointer;
  box-shadow:0 12px 20px -12px rgba(220,84,104,.7);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.btn-action:hover{transform:translateY(-1px);box-shadow:0 16px 28px -12px rgba(220,84,104,.85);filter:saturate(1.05)}
.btn-action:active{transform:translateY(1px);box-shadow:0 8px 14px -10px rgba(220,84,104,.7)}
.btn-action:focus-visible{outline:2px solid var(--rose-deep);outline-offset:2px}
.btn-action:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.btn-quiet{
  width:100%;margin-top:10px;background:transparent;border:1.5px solid var(--line);border-radius:14px;
  padding:12px;font-family:var(--sans);font-weight:700;font-size:14px;color:var(--ink-soft);cursor:pointer;
  transition:border-color .14s ease, background .14s ease, transform .1s ease;
}
.btn-quiet:hover{border-color:var(--primary);color:var(--primary-deep);background:#F5EEFA}
.btn-quiet:active{transform:translateY(1px)}

.ghost{
  flex:1;min-width:120px;background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:10px;
  font-family:var(--sans);font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .14s ease, background .14s ease, transform .1s ease;
}
.ghost.t1{border-color:var(--primary);color:var(--primary-deep)}
.ghost.t1:hover{background:#F5EEFA}
.ghost.t2{border-color:var(--rose);color:var(--rose-deep)}
.ghost.t2:hover{background:#FDEDEF}
.ghost.t3{border-color:var(--mint-deep);color:var(--mint-deep)}
.ghost.t3:hover{background:#E7FBF2}
.ghost.t4{border-color:var(--coral-deep);color:var(--coral-deep)}
.ghost.t4:hover{background:#FCEEEF}
.ghost:active{transform:translateY(1px)}
.ghost.is-awarded{background:var(--mint);border-color:var(--mint-deep);color:var(--ink)}
.ghost.is-awarded:hover{background:var(--mint)}

/* ---------------- home / setup ---------------- */
.setup-card{
  background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px;width:100%;
  box-shadow:0 10px 22px -16px rgba(46,36,64,.25);
}
.card-title{font-family:var(--disp);font-weight:600;font-size:18px;margin-bottom:14px}
.field-label{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-soft);
  margin-bottom:9px;display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.field-label--gap{margin-top:18px}
.field-hint{font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink-soft)}
.mini-toggle{
  background:none;border:none;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--primary);
  cursor:pointer;text-transform:uppercase;letter-spacing:.04em;padding:2px 4px;border-radius:6px;
}
.mini-toggle:hover{background:var(--lilac)}

.team-list{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.team-list:empty{display:none}
.team-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--lilac);border-radius:12px;padding:9px 12px;
}
.team-row .tn{font-size:14px;font-weight:800;color:var(--primary-deep)}
.team-remove{
  background:none;border:none;color:var(--primary-deep);font-size:16px;font-weight:700;cursor:pointer;
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;line-height:1;
  transition:background .14s ease;
}
.team-remove:hover{background:rgba(255,255,255,.6)}

.team-add-row{display:flex;gap:8px}
.text-input{
  flex:1;border:1.5px solid var(--line);border-radius:12px;padding:11px 12px;
  font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink);background:#fff;
  transition:border-color .15s ease;min-width:0;
}
.text-input:focus{outline:none;border-color:var(--primary)}
.text-input::placeholder{color:#B4A9C4;font-weight:500}
.btn-ghost{
  background:#fff;border:1.5px solid var(--primary);border-radius:12px;padding:10px 16px;
  font-family:var(--sans);font-size:13px;font-weight:700;color:var(--primary-deep);cursor:pointer;
  transition:background .14s ease, transform .1s ease;
}
.btn-ghost:hover{background:#F5EEFA}
.btn-ghost:active{transform:translateY(1px)}

.cat-grid{display:flex;flex-wrap:wrap;gap:8px}
.cat-empty{font-size:13px;color:var(--ink-soft)}
.cat-chip{
  background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:7px 13px;
  font-family:var(--sans);font-size:12px;font-weight:700;color:var(--ink-soft);cursor:pointer;
  transition:border-color .14s ease, background .14s ease, color .14s ease, transform .1s ease;
}
.cat-chip:hover{transform:translateY(-1px);border-color:var(--primary)}
.cat-chip:active{transform:translateY(0)}
.cat-chip.is-on{background:var(--lilac);border-color:var(--primary);color:var(--primary-deep)}

.preset-row{display:flex;gap:8px;margin-bottom:12px}
.preset{
  flex:1;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 6px;
  font-family:var(--sans);cursor:pointer;display:flex;flex-direction:column;gap:2px;align-items:center;
  transition:border-color .14s ease, background .14s ease, transform .1s ease;
}
.preset:hover{transform:translateY(-1px);border-color:var(--primary)}
.preset:active{transform:translateY(0)}
.preset.is-selected{border-color:var(--primary);background:var(--lilac)}
.preset-name{font-size:13px;font-weight:800;color:var(--primary-deep)}
.preset-sub{font-size:10.5px;font-weight:600;color:var(--ink-soft)}

.stepper-row{display:flex;gap:10px;margin-bottom:16px}
.stepper{flex:1;background:#fff;border:1.5px solid var(--line);border-radius:14px;padding:10px 12px}
.stepper-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.stepper-ctrl{display:flex;align-items:center;justify-content:space-between}
.step-btn{
  width:30px;height:30px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  font-family:var(--sans);font-size:16px;font-weight:700;color:var(--primary-deep);cursor:pointer;
  transition:background .12s ease, border-color .12s ease, transform .1s ease;
}
.step-btn:hover{background:var(--lilac);border-color:var(--primary)}
.step-btn:active{transform:translateY(1px)}
.step-val{font-family:var(--disp);font-weight:700;font-size:20px}

.setup-warn{
  background:#FCEEEF;border-left:4px solid var(--coral);border-radius:10px;
  padding:10px 12px;font-size:13px;font-weight:600;color:var(--coral-deep);margin-bottom:12px;width:100%;
}
.setup-warn[hidden]{display:none}

.hs-list{list-style:none;display:flex;flex-direction:column;gap:8px;counter-reset:hs}
.hs-row{
  display:flex;align-items:center;gap:11px;background:var(--cream);border:1px solid var(--line);
  border-radius:12px;padding:9px 12px;counter-increment:hs;
}
.hs-row::before{
  content:counter(hs);width:24px;height:24px;flex-shrink:0;border-radius:8px;background:var(--lilac);
  color:var(--primary-deep);font-size:12px;font-weight:800;display:grid;place-items:center;
}
.hs-name{flex:1;font-size:13.5px;font-weight:800}
.hs-meta{font-size:11px;color:var(--ink-soft);font-weight:600}
.hs-pts{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--primary-deep)}

.data-status{font-size:11.5px;color:var(--ink-soft);text-align:center;line-height:1.5;padding:0 8px 8px}

/* ---------------- tally / end ---------------- */
.tally-title{font-family:var(--disp);font-weight:600;font-size:22px;margin-bottom:16px}
.tally-list{display:flex;flex-direction:column;gap:10px;width:100%}
.tally-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;
  transition:transform .14s ease, box-shadow .14s ease;
}
.tally-row:hover{transform:translateY(-1px);box-shadow:0 12px 22px -16px rgba(46,36,64,.3)}
.tally-row .tn{font-size:15px;font-weight:800}
.tally-row .tp{font-family:var(--disp);font-weight:700;font-size:24px}
.tally-row.lead{background:var(--coral);border-color:transparent}
.tally-row.winner{background:var(--mint);border-color:var(--mint-deep)}
.tally-row.winner .tp{color:var(--mint-deep)}
.winner-tag{
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--mint-deep);color:#fff;border-radius:999px;padding:3px 9px;margin-left:8px;
}

@media (min-width:481px){
  body{padding:0}
  .app{box-shadow:0 30px 60px -22px rgba(46,36,64,.4), 0 0 0 1px var(--line)}
}