/* ==========================================================
   Antrenman oyunları — ortak stil.
   Çarpma / Toplama / Çıkarma / Bölme / Her Telden antrenmanları
   bu tek dosyayı kullanır (eskiden her HTML'de birebir aynı
   <style> bloğu kopyalanıyordu). İskeleti antrenman-core.js kurar.
   ========================================================== */
:root{
  --board-dark: #1f3a2e;
  --board: #2d4a3e;
  --chalk: #f4f1e8;
  --chalk-dim: #d8d3c4;
  --wood: #8b5e34;
  --wood-dark: #6b4423;
  --wood-light: #a67744;
  --brass: #d4af6a;
  --yellow: #f4c430;
  --green: #06D6A0;
  --red: #FF6F59;
}
*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; }
body{
  min-height:100vh;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, rgba(255,255,255,0.05), transparent),
    linear-gradient(180deg, var(--board-dark), var(--board) 60%, var(--board-dark));
  font-family:'Quicksand', sans-serif;
  color: var(--chalk);
  display:flex; flex-direction:column; align-items:center;
  padding: 16px 16px 40px;
}

.back-btn{
  align-self:flex-start;
  background: rgba(244,241,232,0.08);
  border:1px solid rgba(244,196,48,0.4);
  color: var(--chalk);
  font-family:'Quicksand', sans-serif;
  font-weight:700;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 8px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  margin-bottom: 10px;
}
.back-btn:hover{ background: var(--yellow); color:#3a2a10; }

h1{
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size: clamp(22px, 4vh, 30px);
  margin: 4px 0 6px;
  text-align:center;
}
.subtitle{
  text-align:center;
  color: var(--chalk-dim);
  font-size:14px;
  max-width:440px;
  margin: 0 0 18px;
}

.panel{
  width:100%; max-width:460px;
  background: linear-gradient(160deg, #2d5c46, #1b3327 75%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.35);
}

/* ---- start screen ---- */
.rules{ font-size:13.5px; line-height:1.7; color:var(--chalk-dim); margin:0 0 18px; padding-left:18px; }
.rules li{ margin-bottom:4px; }
.today-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(244,196,48,0.14); border:1px solid rgba(244,196,48,0.4);
  color:var(--yellow); font-weight:700; font-size:13px;
  padding:6px 12px; border-radius:999px; margin-bottom:16px;
}
.big-btn{
  display:block; width:100%; text-align:center;
  background:linear-gradient(135deg,#f4c430,#f4a430); color:#1F2233;
  text-decoration:none; font-weight:800; font-size:18px;
  padding:14px 20px; border-radius:14px; border:none; cursor:pointer;
  box-shadow:0 10px 22px rgba(244,196,48,0.3);
  font-family:'Baloo 2', sans-serif;
}
.big-btn:hover{ transform: translateY(-2px); }
.big-btn:disabled{ opacity:0.5; cursor:not-allowed; transform:none; }
.ghost-btn{
  display:block; width:100%; text-align:center; margin-top:10px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(244,196,48,0.35);
  color:var(--chalk); font-weight:700; font-size:14px;
  padding:11px 16px; border-radius:12px; cursor:pointer; text-decoration:none;
  font-family:'Quicksand', sans-serif;
}
.ghost-btn:hover{ background:rgba(244,196,48,0.15); }

/* ---- game screen ---- */
.bars{ margin-bottom: 14px; }
.bar-row{ display:flex; justify-content:space-between; font-size:11px; color:var(--chalk-dim); font-weight:700; text-transform:uppercase; letter-spacing:0.06em; margin-bottom:4px; }
.bar-track{ height:8px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
.bar-fill{ height:100%; border-radius:999px; background: var(--yellow); width:100%; }
#sessionFill{ background: linear-gradient(90deg, #4EA8DE, #06D6A0); transition: width .1s linear; }
#qFill{ background: var(--yellow); transition: width .05s linear; }
#qBar{ margin-top:10px; }

.score-live{ text-align:center; font-family:'Baloo 2', sans-serif; font-weight:800; font-size:15px; color:var(--yellow); margin-bottom:10px; }

.question{
  text-align:center;
  font-family:'Baloo 2', sans-serif;
  font-weight:800;
  font-size: clamp(34px, 8vh, 52px);
  margin: 10px 0 22px;
  letter-spacing:0.02em;
}

.options{
  display:grid; grid-template-columns: 1fr 1fr; gap:12px;
}
.opt-btn{
  font-family:'Baloo 2', sans-serif;
  font-weight:700; font-size:22px;
  padding: 18px 8px;
  border-radius:12px;
  border:2px solid rgba(244,196,48,0.4);
  background: rgba(244,241,232,0.06);
  color: var(--chalk);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.opt-btn:hover:not(:disabled){ background:rgba(244,196,48,0.16); transform:translateY(-2px); }
.opt-btn:disabled{ cursor:default; }
.opt-btn.correct{ background: var(--green); border-color: var(--green); color:#0a3327; }
.opt-btn.wrong{ background: var(--red); border-color: var(--red); color:#3a0a02; }

/* ---- end screen ---- */
.stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin: 16px 0 20px; }
.stat{ background:rgba(255,255,255,0.06); border-radius:12px; padding:12px; text-align:center; }
.stat b{ display:block; font-family:'Baloo 2', sans-serif; font-size:22px; }
.stat span{ font-size:11px; color:var(--chalk-dim); text-transform:uppercase; letter-spacing:0.05em; }

#gradePickWrap{ margin: 0 0 14px; }
#gradePickWrap label{ display:block; font-size:13.5px; color:var(--chalk-dim); margin-bottom:6px; font-weight:700; }
#gradeSelect{
  width:100%; padding:10px 12px; border-radius:10px;
  background:rgba(244,241,232,0.06); color:var(--chalk);
  border:1px solid rgba(244,196,48,0.4);
  font-family:'Quicksand', sans-serif; font-size:15px; font-weight:600;
}
#gradeSelect option{ color:#1f2233; }
#gradeInfo{ font-size:13px; color:var(--yellow); font-weight:700; margin-bottom:12px; }
#closedMsg{
  font-size:14px; color:var(--chalk-dim); line-height:1.6; margin:0 0 6px;
  background:rgba(255,111,89,0.12); border:1px solid rgba(255,111,89,0.4);
  padding:12px 14px; border-radius:12px;
}

.hidden{ display:none !important; }