:root{--ink:#252525;--muted:#6f6f6f;--bg:#fafafa;--panel:#fff;--line:#e5e5e5;--accent:#327a59;--accent-ink:#fff;--danger:#c94a55;--radius:14px}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;background:var(--bg)}button{font:inherit;cursor:pointer}.app-shell{width:min(100%,980px);margin:auto;padding:28px 24px 48px}.brand{display:flex;align-items:center;gap:8px;font-weight:750;letter-spacing:.02em;font-size:1rem}.brand-mark{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--accent);color:#fff;font-size:.78rem}.screen{display:none;max-width:820px;margin:clamp(42px,9vh,92px) auto 0}.screen.active{display:block;animation:appear .2s ease-out}.hero-screen{max-width:660px;text-align:center;padding-top:clamp(18px,6vh,60px)}.eyebrow,.question-label{margin:0 0 12px;color:var(--accent);font-weight:800;letter-spacing:.1em;font-size:.74rem}.hero-screen h1{font-size:clamp(2.3rem,7vw,4.6rem);letter-spacing:-.065em;line-height:1.12;margin:0}.hero-screen em{font-style:normal;color:var(--accent)}.lead,.screen-description{color:var(--muted);line-height:1.8}.lead{max-width:520px;margin:24px auto 28px}.button{border:0;border-radius:10px;padding:15px 20px;font-weight:750;transition:background .15s}.button-primary{background:var(--accent);color:var(--accent-ink)}.button-primary:hover{background:#286548}.button-primary span{font-size:1.15em;margin-left:6px}.data-note{font-size:.78rem;color:var(--muted);margin-top:22px}.text-button,.button-ghost{border:0;background:transparent;color:var(--muted);padding:0}.text-button{margin-bottom:24px}.screen h2{font-size:clamp(1.9rem,5vw,2.7rem);letter-spacing:-.05em;margin:0}.card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:27px}.genre-card,.difficulty-card{color:var(--ink);text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:border-color .15s,box-shadow .15s}.genre-card:hover,.difficulty-card:hover{border-color:var(--accent);box-shadow:0 4px 14px rgba(0,0,0,.05)}.genre-icon{font-size:1.4rem;display:block;margin-bottom:8px}.genre-card strong{display:block;font-size:1.02rem}.genre-card small{display:block;color:var(--muted);margin-top:5px}.difficulty-list{display:grid;gap:10px;margin-top:27px}.difficulty-card{display:flex;align-items:center;gap:15px;width:100%}.difficulty-level{display:grid;place-items:center;width:40px;height:40px;border-radius:9px;background:#edf5ef;color:var(--accent);font-weight:900}.difficulty-card span{color:var(--muted);font-size:.82rem;margin-left:auto}.quiz-screen{max-width:680px}.quiz-top{display:flex;justify-content:space-between;align-items:center}.badge{color:var(--accent);font-size:.8rem;font-weight:800}.progress-track{height:6px;border-radius:20px;background:#e8e8e8;margin:16px 0 23px;overflow:hidden}.progress-bar{height:100%;width:10%;background:var(--accent);transition:width .3s}.question-card{padding:clamp(24px,5vw,40px);border:1px solid var(--line);border-radius:var(--radius);background:#fff}.question-card h2{font-size:clamp(1.4rem,3.5vw,1.95rem);line-height:1.5;letter-spacing:-.03em}.choices{display:grid;gap:10px;margin-top:17px}.choice{display:flex;align-items:center;gap:13px;padding:16px;border-radius:11px;text-align:left;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700}.choice:hover:not(:disabled){border-color:var(--accent);background:#f5faf6}.choice:disabled{cursor:default}.choice-letter{display:grid;place-items:center;flex:none;width:29px;height:29px;border-radius:8px;background:#f1f1f1;font-size:.82rem}.choice.correct{border-color:var(--accent);background:#edf8ef}.choice.wrong{border-color:var(--danger);background:#fff1f2}.feedback{min-height:25px;margin:14px 2px;color:var(--muted);font-weight:700}.feedback.correct-text{color:var(--accent)}.feedback.wrong-text{color:var(--danger)}.next-button{float:right;margin-top:4px}.result-screen{text-align:center;max-width:560px}.result-orbit{display:grid;place-items:center;width:68px;height:68px;margin:18px auto;border-radius:50%;font-size:1.8rem;color:var(--accent);background:#edf5ef}.result-score{font-size:clamp(2rem,7vw,3.3rem);font-weight:900;letter-spacing:-.06em;margin:20px 0 4px}.result-rate{font-size:1.1rem;color:var(--accent);font-weight:800;margin:0}.result-message{color:var(--muted);margin:21px 0}.result-actions{display:grid;gap:10px;max-width:340px;margin:auto}.button-secondary{background:#e9e9e9;color:var(--ink)}.button-ghost{padding:12px;font-weight:700}@keyframes appear{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@media(max-width:560px){.app-shell{padding:20px 16px 36px}.screen{margin-top:42px}.card-grid{grid-template-columns:1fr}.genre-card{padding:16px}.difficulty-card span{font-size:.74rem}.question-card{padding:24px 20px}.choice{padding:15px 13px}.next-button{width:100%;float:none;margin-top:4px}}

/* Android WebView のシステムバーに操作領域が重ならないよう、狭い画面だけ安全領域を考慮する。 */
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}

@media (max-width: 560px) {
  .app-shell {
    padding-top: max(20px, calc(20px + env(safe-area-inset-top)));
    padding-bottom: max(36px, calc(36px + env(safe-area-inset-bottom)));
  }
}