/* styles.css mobile-first */
:root{
  --bg-top:#3e6ef0; --bg-bottom:#2f59d9;
  --card:#fff; --primary:#5b8cff; --accent:#ffd15a; --text:#12233b;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',Arial;color:var(--text)}
body{background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));display:flex;justify-content:center;padding:12px;align-items:flex-start}

.app{width:100%;max-width:420px}

/* shared header */
.site-header{width:100%;display:flex;justify-content:center;margin-bottom:12px}
.site-header-img{width:100%;max-width:420px;border-radius:14px;display:block;}

/* cards */
.card{background:var(--card);border-radius:18px;padding:12px;box-shadow:0 12px 30px rgba(20,40,90,0.12)}

/* start screen */
.start-card{padding:16px;display:flex;flex-direction:column;gap:12px}
.mode-row{display:flex;gap:12px;justify-content:center}
.settings-row{display:flex;gap:12px;justify-content:space-around}
.btn{display:block;width:100%;padding:12px;border-radius:14px;border:0;font-size:18px;cursor:pointer}
.btn-primary{background:linear-gradient(180deg,var(--primary),#3f6fe6);color:white;box-shadow:0 12px 28px rgba(46,84,179,0.18)}
.btn-primary:hover{transform:translateY(-2px)}.btn-primary:active{transform:translateY(0);filter:brightness(.95)}
.btn-ghost{background:rgba(255,255,255,0.96);color:var(--text);box-shadow:0 6px 12px rgba(0,0,0,0.06)}

/* game header stats */
.game-header{display:flex;gap:8px;justify-content:space-between;margin-bottom:12px;color:white;padding:6px 0}
.game-header .stat{text-align:center;flex:1}
.game-header .label{font-size:13px;opacity:0.95}
.game-header .value{font-size:20px;font-weight:700;margin-top:4px}

/* main card */
.main-card{min-height:360px;padding:18px;position:relative;overflow:visible}
.question-panel{display:flex;justify-content:center;align-items:center;padding:14px 8px 6px}
.question{font-size:48px;font-weight:800;color:#193049;}

/* options */
.options{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:12px 4px 20px}
.option-btn{background:linear-gradient(180deg,#7fb4ff,#5b8cff);color:white;border:0;border-radius:16px;padding:18px;font-size:26px;font-weight:800;box-shadow:0 10px 22px rgba(36,67,119,0.15);min-height:68px;transition:transform .08s,box-shadow .08s}
.option-btn:hover{transform:translateY(-4px);box-shadow:0 14px 28px rgba(36,67,119,0.22)}
.option-btn:active{transform:translateY(0);filter:brightness(.95)}
.option-btn.correct{outline:4px solid rgba(76,175,80,0.12);box-shadow:0 10px 28px rgba(76,175,80,0.12)}
.option-btn.wrong{outline:4px solid rgba(255,107,107,0.08);box-shadow:0 8px 20px rgba(255,107,107,0.06)}

/* end screen */
.end-card{text-align:center;padding:36px;border-radius:18px}
.final-score{font-size:22px;color:#666;margin-bottom:6px}
.final-score-value{font-size:64px;font-weight:900;color:var(--primary);margin-bottom:18px}

/* utility */
.hidden{display:none}
@media(min-width:420px){ .question{font-size:64px} }