/* style.css — all styling */
:root {
  color-scheme: dark;
  --bg:#0c1220; --surface:#172237; --surface-2:#1d2b45; --surface-3:#233653;
  --line:#2e4160; --text:#f3f7ff; --muted:#9aabc3; --accent:#6fe0bf;
  --accent-strong:#28c99b; --gold:#f5c76a; --danger:#ff8f92;
  --shadow:0 18px 45px rgba(0,0,0,.25);
}
@media (prefers-color-scheme:light) {
  :root { color-scheme:light; --bg:#eef3f8; --surface:#fff; --surface-2:#f1f5fa; --surface-3:#e5edf5; --line:#d4dfeb; --text:#172238; --muted:#64748b; --accent:#087f68; --accent-strong:#0a9a7b; --gold:#ad7110; --danger:#b53b46; --shadow:0 18px 45px rgba(55,78,105,.13); }
}
html[data-theme=dark] { color-scheme:dark; --bg:#0c1220; --surface:#172237; --surface-2:#1d2b45; --surface-3:#233653; --line:#2e4160; --text:#f3f7ff; --muted:#9aabc3; --accent:#6fe0bf; --accent-strong:#28c99b; --gold:#f5c76a; --danger:#ff8f92; --shadow:0 18px 45px rgba(0,0,0,.25); }
html[data-theme=light] { color-scheme:light; --bg:#eef3f8; --surface:#fff; --surface-2:#f1f5fa; --surface-3:#e5edf5; --line:#d4dfeb; --text:#172238; --muted:#64748b; --accent:#087f68; --accent-strong:#0a9a7b; --gold:#ad7110; --danger:#b53b46; --shadow:0 18px 45px rgba(55,78,105,.13); }

* { box-sizing:border-box; }
html,body { margin:0; padding:0; width:100%; min-height:100%; }
body { min-height:100dvh; background:radial-gradient(circle at 15% 0%,rgba(63,114,151,.22),transparent 32%),var(--bg); color:var(--text); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input { font:inherit; }
button { cursor:pointer; }
button:focus-visible,input:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

.app-shell { width:min(1240px,100%); min-height:100dvh; margin:auto; padding:clamp(18px,3vw,38px) clamp(14px,4vw,52px) calc(56px + env(safe-area-inset-bottom)); }
.topbar,.card-topline,.panel-heading,.progress-copy,.bottom-bar,.player-stats,.brand,.score-input-row { display:flex; align-items:center; }
.topbar { justify-content:space-between; gap:18px; margin-bottom:26px; }
.brand { gap:13px; min-width:0; }
.brand-mark { width:48px; height:48px; display:grid; place-items:center; border:1px solid var(--accent); border-radius:14px; color:var(--accent); font-weight:850; box-shadow:inset 0 0 22px rgba(111,224,191,.12); }
.brand-mark span { font-size:14px; }
.eyebrow,.section-kicker,.stat-label { margin:0; color:var(--accent); font-size:10px; letter-spacing:.16em; font-weight:800; }
h1,h2,p { margin-top:0; }
h1 { margin:2px 0 0; font-size:clamp(22px,4vw,30px); letter-spacing:-.04em; }
h2 { margin-bottom:8px; font-size:clamp(23px,4vw,34px); letter-spacing:-.045em; line-height:1.08; }
.player-stats { gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.stat-chip { min-width:54px; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-align:center; }
.stat-chip strong { display:block; margin-top:2px; font-size:16px; }
.stat-label { color:var(--muted); font-size:9px; letter-spacing:.1em; }
.coin-chip { color:var(--gold); display:flex; align-items:center; gap:6px; }
.coin-dot { width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 0 3px rgba(245,199,106,.15); }
.progress-strip { margin-bottom:24px; }
.progress-copy { justify-content:space-between; gap:12px; margin-bottom:8px; color:var(--muted); font-size:12px; }
.progress-copy strong { color:var(--text); font-size:12px; }
.progress-track { height:7px; overflow:hidden; background:var(--surface-3); border-radius:99px; }
.progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent-strong),var(--accent)); transition:width .45s ease; }

.game-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.8fr); gap:22px; align-items:start; }
.main-card,.panel { background:var(--surface); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); }
.main-card { position:relative; min-height:530px; padding:clamp(20px,4vw,45px); overflow:hidden; }
.main-card::before { content:""; position:absolute; width:240px; height:240px; top:-100px; right:-90px; border-radius:50%; background:rgba(111,224,191,.06); }
.card-topline { position:relative; justify-content:space-between; gap:12px; }
.phase-pill { padding:6px 10px; border:1px solid rgba(111,224,191,.35); border-radius:99px; color:var(--accent); font-size:10px; letter-spacing:.13em; font-weight:800; }
.round-label { color:var(--muted); font-size:12px; }
.view { position:relative; z-index:1; padding-top:36px; animation:rise .35s ease both; }
.hidden { display:none!important; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.element-hero { position:relative; width:min(100%,285px); aspect-ratio:1/1.05; margin-bottom:28px; padding:18px; border:1px solid var(--accent); border-radius:22px; background:linear-gradient(145deg,var(--surface-2),rgba(111,224,191,.08)); box-shadow:inset 0 0 34px rgba(111,224,191,.08),0 12px 25px rgba(0,0,0,.12); }
.mission-card { position:absolute; top:14px; right:14px; width:48px; height:67px; padding:3px; overflow:hidden; border-radius:7px; background:#fff; transform:rotate(6deg); box-shadow:0 5px 12px rgba(0,0,0,.25); }
.mission-card img { display:block; width:100%; height:100%; object-fit:contain; border-radius:4px; }
.card-caption { position:absolute; bottom:-17px; left:50%; color:var(--muted); transform:translateX(-50%); white-space:nowrap; font-size:7px; letter-spacing:.12em; font-weight:800; }
.card-fallback { background:var(--surface-3); }
.card-fallback img { display:none; }
.atomic-number { color:var(--accent); font-size:18px; font-weight:800; }
.element-symbol { margin:16px 0 8px; font-size:clamp(76px,13vw,118px); font-weight:800; letter-spacing:-.1em; line-height:.95; }
.element-name { font-size:22px; font-weight:750; }
.element-meta { margin-top:5px; color:var(--muted); font-size:12px; }
.lesson-copy { max-width:540px; }
.lesson-copy p:last-child,.quiz-heading .muted,#rewardText,#gameOverView>p:not(.section-kicker) { color:var(--muted); line-height:1.65; font-size:14px; }

.primary-button { display:flex; align-items:center; justify-content:space-between; width:min(100%,320px); min-height:52px; margin-top:25px; padding:12px 17px 12px 20px; border:0; border-radius:13px; background:var(--accent); color:#08231e; font-weight:800; transition:transform .18s,background .18s,box-shadow .18s; }
.primary-button:hover { background:#8bf0d3; transform:translateY(-2px); box-shadow:0 10px 22px rgba(40,201,155,.2); }
.button-arrow { font-size:16px; line-height:1; }
.answer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:560px; margin-top:26px; }
.answer-button { display:flex; align-items:center; min-height:78px; gap:10px; padding:9px 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--text); text-align:left; transition:transform .16s,border .16s,background .16s; }
.answer-button:hover:not(:disabled) { border-color:var(--accent); background:var(--surface-3); transform:translateY(-2px); }
.answer-button:disabled { opacity:.58; cursor:default; }
.answer-card-image { flex:0 0 32px; width:32px; height:48px; padding:1px; border-radius:4px; background:#fff; object-fit:contain; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.answer-symbol { min-width:38px; color:var(--accent); font-size:22px; font-weight:800; }
.feedback { min-height:26px; margin-top:18px; color:var(--muted); font-size:13px; }
.feedback.bad { color:var(--danger); }

.reward-burst,.finish-icon { display:grid; place-items:center; width:76px; height:76px; margin-bottom:24px; border-radius:50%; background:var(--accent); color:var(--bg); font-size:30px; font-weight:900; box-shadow:0 0 0 12px rgba(111,224,191,.1); }
.reward-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:25px; }
.reward-row>div { flex:1; min-width:92px; padding:13px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.reward-row span { display:block; color:var(--muted); font-size:9px; letter-spacing:.1em; }
.reward-row strong { display:block; margin-top:4px; color:var(--gold); font-size:20px; }

.side-column { display:grid; gap:22px; min-width:0; }
.panel { padding:20px; }
.panel-heading { justify-content:space-between; gap:10px; margin-bottom:14px; }
.panel-heading h2 { margin:3px 0 0; font-size:18px; }
.roster-count,.trophy { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--line); border-radius:9px; color:var(--accent); font-weight:800; }
.roster-list { display:grid; gap:7px; max-height:300px; overflow:auto; }
.roster-item { display:grid; grid-template-columns:25px 30px minmax(0,1fr) auto; align-items:center; gap:7px; min-height:39px; padding:5px 8px; border-radius:9px; background:var(--surface-2); font-size:12px; }
.roster-item.is-locked { opacity:.42; }
.mini-number { color:var(--muted); font-size:10px; text-align:center; }
.mini-symbol { color:var(--accent); font-weight:800; }
.mini-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mini-status { color:var(--muted); font-size:8px; letter-spacing:.08em; }
.leaderboard { display:grid; gap:7px; }
.leader-row { display:grid; grid-template-columns:25px minmax(0,1fr) auto; align-items:center; gap:8px; padding:9px 8px; border-bottom:1px solid var(--line); font-size:12px; }
.rank { color:var(--gold); font-weight:800; }
.leader-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.leader-score { color:var(--muted); }
.score-form { margin-top:18px; }
.score-form label { display:block; margin-bottom:7px; color:var(--muted); font-size:11px; }
.score-input-row { gap:7px; }
.score-input-row input { flex:1; min-width:0; height:44px; padding:0 11px; border:1px solid var(--line); border-radius:9px; background:var(--surface-2); color:var(--text); }
.score-input-row button { min-height:44px; padding:0 13px; border:1px solid var(--accent); border-radius:9px; background:transparent; color:var(--accent); font-weight:750; }
.form-note { min-height:17px; margin:7px 0 0; color:var(--muted); font-size:10px; }
.bottom-bar { justify-content:space-between; gap:15px; padding-top:22px; color:var(--muted); font-size:12px; }
.tip { display:flex; align-items:center; gap:8px; }
.tip-icon { display:grid; place-items:center; width:20px; height:20px; border:1px solid var(--accent); border-radius:50%; color:var(--accent); font-size:12px; font-weight:800; }
.text-button { min-height:44px; padding:10px; border:0; background:transparent; color:var(--muted); text-decoration:underline; text-underline-offset:3px; }

@media (max-width:760px) {
  .topbar { align-items:flex-start; }
  .player-stats { max-width:150px; }
  .game-layout { grid-template-columns:1fr; }
  .main-card { min-height:0; }
  .side-column { grid-template-columns:1fr 1fr; }
}
@media (max-width:520px) {
  .side-column { grid-template-columns:1fr; }
  .main-card { padding:20px; border-radius:17px; }
  .view { padding-top:27px; }
  .element-hero { width:190px; margin-bottom:22px; }
  .element-symbol { margin-top:10px; font-size:76px; }
  .answer-grid { gap:8px; }
  .answer-button { min-height:68px; gap:6px; padding:8px; font-size:12px; }
  .answer-card-image { flex-basis:26px; width:26px; height:40px; }
  .answer-symbol { min-width:30px; font-size:19px; }
  .bottom-bar { align-items:flex-start; }
}
@media (max-width:350px) {
  .brand-mark { width:40px; height:40px; }
  .eyebrow { font-size:8px; }
  .stat-chip { min-width:45px; padding:6px; }
  .stat-label { font-size:8px; }
  .answer-button { min-height:64px; }
  .answer-card-image { display:none; }
}