:root{
  --bg:#f3f5ff; --ink:#1b1d24;
  --card:#ffffff; --line:#dde3ff;
  --accent:#6a7cff; --accent-dark:#4b59cc; --good:#36b37e; --bad:#e13f5e;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; background:var(--bg); color:var(--ink); }
.container{ max-width:960px; margin:0 auto; padding:16px; }
.card{ background:var(--card); border:2px solid var(--line); border-radius:16px; padding:16px; box-shadow:0 8px 26px rgba(0,0,0,.06); }

.hdr{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.hdr h1, .hdr h2{ margin:0; font-size:22px; }
.btn{ padding:10px 14px; border-radius:12px; border:2px solid var(--accent-dark); background:var(--accent); color:#fff; cursor:pointer; font-weight:600; }
.btn.secondary{ background:#e8ecff; color:#2a3170; border-color:#aab4ff; }
.btn.block{ width:100%; }
.btn:active{ transform:translateY(1px); }

.icon-btn{ width:40px; height:40px; border-radius:12px; border:2px solid var(--line); background:#eef2ff; cursor:pointer; display:grid; place-items:center; font-size:18px; font-weight:700; }
.icon-btn:active{ transform:translateY(1px); }
/* Спрячем старую i-кнопку, если где-то осталась */
.hdr .btn.secondary:has(:not(.icon-btn)){ display:none !important; }

.levels{ display:flex; gap:14px; justify-content:center; margin:18px 0; }
.level{ width:64px; height:64px; border-radius:50%; border:3px solid var(--accent-dark); background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:800; cursor:pointer; }
.level.lock{ background:#cfd6ff; border-color:#9aa6ff; color:#445; cursor:not-allowed; }
.level:hover{ filter:brightness(1.03); }

.small{ font-size:12px; opacity:.75; }
.row{ display:flex; flex-wrap:wrap; gap:12px; }
.row .btn{ flex:1 1 auto; }
input, textarea{ width:100%; padding:10px 12px; border-radius:12px; border:2px solid var(--line); background:#f9fbff; }
textarea{ min-height:120px; }

.modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; justify-content:center; align-items:flex-start; padding:22px; }
.modal.hidden{ display:none; }
.modal .modal-body{ background:var(--card); border:2px solid var(--line); border-radius:16px; width:min(880px,100%); min-height:200px; padding:16px; position:relative; }
.modal .close{ position:absolute; right:10px; top:10px; width:40px; height:40px; border-radius:10px; border:2px solid var(--line); background:#eef2ff; cursor:pointer; }

.hero{
  display:flex; flex-direction:column; gap:10px; align-items:center; padding:10px;
}
.duo{
  display:flex; align-items:flex-start; gap:12px; width:100%;
  background:#eef2ff; border:2px solid var(--line); border-radius:16px; padding:12px;
}
.avatar{ width:72px; height:72px; border-radius:50%; background:#ffd26e; border:3px solid #f2b23a; display:grid; place-items:center; font-size:36px; }
.bubble{ flex:1; background:#fff; border:2px solid var(--line); border-radius:14px; padding:12px; font-size:18px; }
.choices{ display:grid; grid-template-columns:1fr; gap:10px; width:100%; margin-top:12px; }
.choice{ border:2px solid var(--line); border-radius:12px; background:#fff; padding:10px; cursor:pointer; }
.choice:hover{ border-color:#b5bfff; }
.feedback{ font-weight:700; margin-top:8px; }
.feedback.ok{ color:var(--good); } .feedback.err{ color:var(--bad); }

.fullscreen{ position:fixed; inset:0; background:var(--bg); padding:10px; overflow:auto; }
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.progress{ font-size:14px; }

/* === scrollable modal body (patch) === */
@supports (height: 100dvh) {
  .modal .modal-body{ max-height: calc(100dvh - 48px); }
}
.modal .modal-body{
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-width: 480px){
  .modal{ padding: 12px; }
  .modal .modal-body{ padding: 12px; }
}

.modal.center{ display:flex; justify-content:center; align-items:center; }

#transition{ background:transparent; }

.modal.hidden{ pointer-events:none !important; }