/* ============================================================
   Syar9a Note — styles
   ============================================================ */

:root{
  --bg:#0b1020;
  --bg-2:#121a30;
  --card:#16203a;
  --card-2:#1c2745;
  --line:#26324f;
  --txt:#eaf0ff;
  --muted:#8d9bc0;
  --blue:#1f5fd8;
  --blue-hi:#2f7bff;
  --green:#1ea672;
  --green-hi:#2bc78d;
  --red:#e0413f;
  --red-dim:#2a1620;
  --pad-h:12px;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{ margin:0; padding:0; height:100%; }

body{
  background:var(--bg);
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  display:flex;
  flex-direction:column;
  height:100dvh;
  overflow:hidden;
  overscroll-behavior:none;
}

button{ font-family:inherit; cursor:pointer; border:none; color:inherit; }
.hidden{ display:none !important; }

/* ---------------- header ---------------- */

header{
  flex:none;
  display:flex; align-items:center; gap:8px;
  background:#0d1428;
  border-bottom:1px solid var(--line);
  padding:calc(8px + env(safe-area-inset-top)) var(--pad-h) 8px;
}

.brand{
  flex:1; min-width:0;
  font-size:15px; font-weight:700;
  color:var(--muted);
  letter-spacing:.02em;
}

.icon-btn{
  flex:none;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:10px;
  width:46px; height:44px;
  font-size:19px; line-height:1;
  display:grid; place-items:center;
}
.icon-btn:active{ background:var(--card-2); }
.icon-btn.primary{ background:var(--blue); border-color:var(--blue-hi); }

/* ---------------- screens ---------------- */

.screen{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  max-width:640px;
  width:100%;
  margin:0 auto;
  padding:0 var(--pad-h) calc(10px + env(safe-area-inset-bottom));
}

/* ---------------- quiz stage ---------------- */

.stage{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:10px 0;
}

.qbig{ display:flex; flex-direction:column; align-items:center; line-height:1; }
.qlabel{ font-size:14px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); }
.qnum{
  font-size:clamp(64px,22vw,110px);
  font-weight:800;
  margin:6px 0 4px;
  font-variant-numeric:tabular-nums;
}
.qof{ font-size:15px; color:var(--muted); }

.picked{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  min-height:44px; align-items:center;
}
.chip{
  min-width:44px; height:44px; padding:0 12px;
  display:grid; place-items:center;
  border-radius:11px;
  background:var(--blue); border:1.5px solid var(--blue-hi);
  font-size:20px; font-weight:800;
  font-variant-numeric:tabular-nums;
}
.chip.empty{
  background:transparent; border:1.5px dashed var(--line);
  color:var(--muted); font-size:14px; font-weight:600;
  padding:0 16px;
}

/* ---------------- keypad (mirrors the exam machine) ---------------- */

.keypad{
  flex:none;
  display:grid;
  grid-template-columns:70px 1fr 70px;
  gap:9px;
  height:min(38dvh,230px);
  margin-bottom:9px;
}

.pad{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:9px;
}

.key{
  border-radius:12px;
  background:var(--blue);
  border:1.5px solid var(--blue-hi);
  color:#fff;
  font-size:clamp(28px,9vw,40px);
  font-weight:800;
  font-variant-numeric:tabular-nums;
  transition:transform .06s ease, box-shadow .12s ease;
}
.key:active{ transform:scale(.96); }
.key.on{
  background:#0f3d94;
  border-color:#8fc0ff;
  box-shadow:inset 0 0 0 3px #8fc0ff, 0 0 16px rgba(47,123,255,.35);
}

.side{
  border-radius:12px;
  font-size:30px; font-weight:800;
  display:grid; place-items:center;
  transition:transform .06s ease;
}
.side:active{ transform:scale(.96); }
.side.red{ background:var(--red); border:1.5px solid #ff6b69; }
.side.green{ background:var(--green); border:1.5px solid var(--green-hi); }

/* ---------------- bottom nav ---------------- */

.qnav{ flex:none; display:flex; gap:8px; }

.nbtn{
  flex:1;
  height:48px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--line);
  font-size:15px; font-weight:700;
}
.nbtn:active{ background:var(--card-2); }
.nbtn.go{ background:var(--green); border-color:var(--green-hi); }
.nbtn:disabled{ opacity:.35; }

/* ---------------- result screen ---------------- */

.score{
  flex:none;
  display:flex; align-items:baseline; gap:10px;
  padding:14px 2px 10px;
}
.score-big{ font-size:32px; font-weight:800; font-variant-numeric:tabular-nums; }
.score-big b{ color:var(--green-hi); }
.score-sub{ font-size:13px; color:var(--muted); line-height:1.4; white-space:pre-line; }

.rlist{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  list-style:none;
  margin:0 0 10px;
  padding:0;
}

.rrow{
  display:flex; align-items:center; gap:10px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:11px;
  padding:7px 7px 7px 12px;
  margin-bottom:7px;
}
.rrow.miss{ background:transparent; border-style:dashed; }
.rrow.wrong{ background:var(--red-dim); border-color:#5b2b36; }

.rgo{
  flex:1;
  display:flex; align-items:center; gap:10px;
  background:transparent;
  min-height:40px;
  text-align:left;
}
.rq{
  min-width:50px;
  font-weight:800;
  color:var(--muted);
  font-variant-numeric:tabular-nums;
  font-size:16px;
}
.rrow.wrong .rq{ color:#ff8b88; }

.ra{ display:flex; gap:6px; flex-wrap:wrap; }
.ra span{
  min-width:32px; height:32px; padding:0 9px;
  display:grid; place-items:center;
  border-radius:8px;
  background:var(--blue); border:1px solid var(--blue-hi);
  font-weight:800; font-size:16px;
  font-variant-numeric:tabular-nums;
}
.rrow.wrong .ra span{ background:#7a2130; border-color:#b8404e; }
.ra em{ font-style:normal; font-size:15px; color:var(--muted); }

.mark{
  flex:none;
  width:46px; height:40px;
  border-radius:9px;
  background:transparent;
  border:1.5px solid var(--line);
  color:#5c6a90;
  font-size:18px; font-weight:800;
}
.mark:active{ background:var(--card-2); }
.rrow.wrong .mark{
  background:var(--red);
  border-color:#ff6b69;
  color:#fff;
}

/* ---------------- wide screens ---------------- */

@media (min-height:760px){ .keypad{ height:270px; } }
@media (min-width:700px){ .keypad{ height:280px; grid-template-columns:90px 1fr 90px; } }