*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:hidden;-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#0a1628;color:#e8eaf0;line-height:1.6}
/* Native vertical scrolling on the page; ls-app no longer forces full-height layout */
.ls-app{max-width:740px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;padding:1rem;padding-bottom:calc(120px + env(safe-area-inset-bottom));overflow-x:hidden}
.ls-header{display:flex;align-items:center;gap:.75rem;padding:.5rem 0 1rem;border-bottom:1px solid #1e3455;position:sticky;top:0;background:#0a1628;z-index:9}
.ls-back{color:#c9a227;text-decoration:none;font-size:1.4rem;font-weight:700;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.ls-title{flex:1;font-size:1.1rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ls-pill{background:rgba(201,162,39,.15);color:#c9a227;padding:.2rem .6rem;border-radius:99px;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;flex-shrink:0}
.ls-timer-bar{margin:.75rem 0;background:#1e3455;border-radius:99px;height:8px;overflow:hidden;position:relative}
.ls-timer-fill{height:100%;background:linear-gradient(90deg,#c9a227,#e8d477);width:100%;transition:width .25s linear}
.ls-timer-text{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:.8rem;color:#9aa4b8}
.ls-progress{display:flex;gap:6px;margin:.5rem 0 1rem;flex-wrap:wrap}
.ls-dot{width:18px;height:4px;background:#1e3455;border-radius:2px}
.ls-dot.done{background:#43a047}
.ls-dot.current{background:#c9a227}
.ls-body{flex:1;background:#12243d;border-radius:14px;padding:1.25rem;margin:1rem 0;word-wrap:break-word;overflow-wrap:break-word;min-width:0}
.ls-body img,.ls-body svg{max-width:100%;height:auto}
.ls-read-aloud{padding:.85rem 1.5rem;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:1rem;margin-top:.5rem;min-height:48px;background:rgba(255,255,255,.08);color:#e8eaf0;border:1px solid #1e3455}
/* Sticky submit so the action button is always reachable, even mid-passage scroll */
.ls-submit{padding:.95rem 1.5rem;border:none;border-radius:10px;font-weight:800;cursor:pointer;font-size:1.05rem;background:#c9a227;color:#0a1628;width:calc(100% - 2rem);position:fixed;left:50%;transform:translateX(-50%);bottom:calc(.75rem + env(safe-area-inset-bottom));max-width:calc(740px - 2rem);box-shadow:0 8px 24px rgba(0,0,0,.35);min-height:52px;z-index:10}
.ls-submit:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.ls-preview-banner{margin-top:1rem;padding:.75rem;background:rgba(201,162,39,.12);border:1px solid rgba(201,162,39,.3);border-radius:8px;text-align:center;font-size:.9rem;color:#c9a227}
.ls-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1rem}
.ls-choice-grid.one-col,.ls-choice-grid[data-cols="1"]{grid-template-columns:1fr}
.ls-choice{background:#0f1f38;border:1px solid #1e3455;border-radius:10px;padding:1rem;cursor:pointer;text-align:center;transition:all .15s;display:flex;flex-direction:column;align-items:center;gap:.5rem;min-height:88px;justify-content:center;color:#e8eaf0;font-size:1rem;-webkit-tap-highlight-color:transparent}
.ls-choice:hover{border-color:#c9a227}
.ls-choice:active{transform:scale(.98)}
.ls-choice.selected{border-color:#c9a227;background:rgba(201,162,39,.1)}
.ls-choice.correct{border-color:#43a047;background:rgba(67,160,71,.15)}
.ls-choice.wrong{border-color:#e53935;background:rgba(229,57,53,.15)}
.ls-choice svg{max-width:120px;max-height:120px;width:auto;height:auto}
.ls-choice-text{word-wrap:break-word;overflow-wrap:break-word}
.ls-choice-letter{display:inline-block;width:28px;height:28px;border-radius:50%;background:#c9a227;color:#0a1628;line-height:28px;text-align:center;font-weight:700;margin-right:.5rem}
/* 16px input prevents iOS Safari auto-zoom on focus */
.ls-input{width:100%;padding:.85rem;border:1px solid #1e3455;background:#0f1f38;color:#e8eaf0;border-radius:8px;font-size:16px;font-family:inherit;min-height:48px}
.ls-words-list{margin-top:1rem;display:flex;flex-wrap:wrap;gap:.5rem}
.ls-word-tag{background:rgba(201,162,39,.15);color:#c9a227;padding:.3rem .7rem;border-radius:99px;font-size:.85rem}
.ls-passage{background:#0f1f38;padding:1rem;border-radius:8px;font-size:1.05rem;line-height:1.8;margin-bottom:1rem;max-height:none;word-wrap:break-word}
.ls-stream{font-size:4rem;text-align:center;font-weight:700;letter-spacing:.1em;height:120px;display:flex;align-items:center;justify-content:center}
.ls-results{text-align:center}
.ls-results h2{color:#c9a227;margin-bottom:1rem}
.ls-score-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.75rem;margin:1rem 0}
.ls-score-cell{background:#0f1f38;padding:1rem;border-radius:10px}
.ls-score-num{font-size:2rem;font-weight:900;color:#c9a227}
.ls-score-label{font-size:.75rem;color:#9aa4b8;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:560px){
  .ls-app{padding:.75rem;padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  .ls-body{padding:1rem;margin:.75rem 0;border-radius:12px}
  .ls-choice-grid{grid-template-columns:1fr}
  .ls-score-grid{grid-template-columns:1fr}
  .ls-title{font-size:1rem}
  .ls-stream{font-size:3rem;height:96px}
  .ls-submit{width:calc(100% - 1.5rem);max-width:none}
}
@media(max-width:380px){
  .ls-app{padding:.6rem;padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  .ls-passage{font-size:1rem}
  .ls-choice{min-height:64px;padding:.85rem;font-size:.95rem}
}