:root{
  --bg1:#fff6e5;
  --bg2:#e6f7ff;
  --card:#ffffff;
  --ink:#3a3a5a;
  --ink-soft:#6b6b8a;
  --purple:#7c5cff;
  --purple-dark:#5b3fe0;
  --pink:#ff6fa5;
  --pink-dark:#e6488a;
  --blue:#3fb4ff;
  --blue-dark:#1f8fe0;
  --green:#3ecf8e;
  --green-dark:#1fae70;
  --orange:#ffb020;
  --orange-dark:#e8930a;
  --red:#ff5d6c;
  --red-dark:#e33a4a;
  --yellow:#ffd23f;
  --shadow: 0 10px 24px rgba(60,40,120,.14);
  --radius: 22px;
  font-size: 18px;
}

*{box-sizing:border-box;}
[hidden]{ display:none !important; }
html,body{height:100%;}
body{
  margin:0;
  font-family:"Segoe UI Rounded","Baloo 2",'Trebuchet MS',system-ui,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 10% 10%, #ffe6f2 0%, transparent 40%),
    radial-gradient(circle at 90% 20%, #dff3ff 0%, transparent 45%),
    radial-gradient(circle at 30% 90%, #eafff0 0%, transparent 40%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  min-height:100vh;
  overflow-x:hidden;
  -webkit-tap-highlight-color: transparent;
  user-select:none;
}

button{ font-family:inherit; cursor:pointer; border:none; }
input{ font-family:inherit; }

/* ---------- screens ---------- */
.screen{
  display:none;
  min-height:100vh;
  padding: 14px 16px 40px;
  animation: fadeIn .25s ease;
}
.screen.active{ display:block; }

@keyframes fadeIn{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.topbar{
  display:flex;
  align-items:center;
  gap:10px;
  max-width:820px;
  margin: 0 auto 18px;
}
.topbar h2{ flex:1; text-align:center; margin:0; font-size:1.3rem; }
.topbar-spacer{ width:44px; }

.icon-btn{
  width:44px; height:44px; min-width:44px;
  border-radius:50%;
  background:var(--card);
  box-shadow:var(--shadow);
  font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
  transition: transform .12s ease;
}
.icon-btn:active{ transform: scale(.9); }

.fullscreen-btn{
  position: fixed;
  top: 12px; right: 12px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow);
  font-size: 1.15rem;
  display:flex; align-items:center; justify-content:center;
  z-index: 900;
  transition: transform .12s ease;
}
.fullscreen-btn:active{ transform: scale(.88); }

/* leave the top-right corner free for the fullscreen button */
#btnClearLeaderboard, #btnChangeTables{ margin-right: 48px; }

/* ---------- home ---------- */
.home-wrap{
  max-width:760px;
  margin:0 auto;
  text-align:center;
  padding-top: 6px;
}
.mascot{
  font-size:4.4rem;
  animation: bob 2.4s ease-in-out infinite;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.12));
}
.mascot.small{ font-size:2.6rem; }
.mascot.big{ font-size:5.2rem; }
@keyframes bob{
  0%,100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-10px) rotate(3deg); }
}

.title{
  font-size: clamp(1.6rem, 5vw, 2.4rem);
  margin: 6px 0 2px;
  color: var(--purple-dark);
  text-shadow: 2px 2px 0 #fff;
}
.subtitle{ color:var(--ink-soft); margin: 0 0 22px; font-size:1.05rem; }

.mode-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
  margin-bottom: 22px;
}
@media (max-width: 720px){
  .mode-grid{ grid-template-columns: 1fr; }
}

.mode-card{
  background: var(--card);
  border-radius: var(--radius);
  padding: 26px 16px;
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center; gap:6px;
  transition: transform .15s ease, box-shadow .15s ease;
  border: 3px solid transparent;
}
.mode-card:active{ transform: scale(.95); }
.mode-card:hover{ transform: translateY(-4px); }
.mode-emoji{ font-size: 2.6rem; }
.mode-name{ font-size:1.25rem; font-weight:800; }
.mode-desc{ font-size:.85rem; color:var(--ink-soft); }
.mode-learn{ border-color: #bfe3ff; }
.mode-practice{ border-color: #ffe0b0; }
.mode-test{ border-color: #ffc2d4; }

.home-actions{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
}

.pill-btn{
  background: linear-gradient(135deg, var(--purple), var(--purple-dark));
  color:#fff;
  padding: 14px 22px;
  border-radius: 999px;
  font-size:1rem;
  font-weight:700;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.pill-btn:active{ transform: scale(.94); }

.chip-btn{
  background: var(--card);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 999px;
  font-weight:700;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.chip-btn:active{ transform: scale(.93); }
.chip-btn.danger{ color: var(--red-dark); }

/* ---------- table picker ---------- */
.picker-wrap{ max-width:760px; margin:0 auto; text-align:center; }
.picker-toolbar{ display:flex; gap:10px; justify-content:center; margin-bottom:16px; }

.table-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:12px;
  margin-bottom:26px;
}
@media (max-width: 560px){
  .table-grid{ grid-template-columns: repeat(3, 1fr); }
}

.table-tile{
  aspect-ratio: 1;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:1.6rem;
  font-weight:800;
  color: var(--ink-soft);
  border: 3px solid transparent;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.table-tile small{ font-size:.55rem; font-weight:600; margin-top:2px; }
.table-tile:active{ transform: scale(.92); }
.table-tile.selected{
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color:#fff;
  border-color: #fff;
}

.mini-table-grid{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap:8px;
  max-width:420px;
  margin: 8px auto 0;
}
.mini-table-grid .table-tile{ font-size:1.1rem; border-radius:12px; }

.big-start-btn{
  background: linear-gradient(135deg, var(--orange), var(--orange-dark));
  color:#fff;
  font-size:1.2rem;
  font-weight:800;
  padding: 16px 30px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.big-start-btn:active{ transform: scale(.95); }

/* ---------- play ---------- */
.play-hud{
  flex:1;
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.hud-chip{
  background: var(--card);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight:800;
  box-shadow: var(--shadow);
  font-size:.95rem;
}
#hudTimer.urgent{ background: var(--red); color:#fff; animation: pulse .6s infinite; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.08);} }

.play-wrap{ max-width:640px; margin:0 auto; text-align:center; }

.progress-bar-outer{
  height:10px; background:#fff; border-radius:999px; box-shadow: inset 0 0 0 2px #eee;
  overflow:hidden; margin-bottom:10px;
}
.progress-bar-inner{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--blue), var(--green));
  transition: width .3s ease;
}

.question-card{
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 20px;
  margin: 14px 0 10px;
}
.question-hint-btn{
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px; min-width: 30px;
  font-size: .9rem;
}
.question-text{
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 900;
  color: var(--purple-dark);
}

.table-hint-panel{
  background:#fffaf0;
  border: 2px dashed var(--orange);
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 12px;
  display:flex; flex-direction:column; gap:8px; align-items:center;
  animation: fadeIn .2s ease;
}
.table-hint-panel .hint-label{ font-weight:700; color: var(--orange-dark); font-size:.9rem; text-align:center; }
.candy-row{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.candy-group{
  display:flex; gap:3px; padding:6px; background:#fff; border-radius:10px;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
  flex-wrap:wrap; max-width: 180px;
}
.candy{
  font-size:1.2rem;
  opacity:0;
  animation: pop .3s ease forwards;
}
@keyframes pop{
  from{ opacity:0; transform: scale(0); }
  to{ opacity:1; transform: scale(1); }
}

.answer-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:14px;
  margin-top: 16px;
}
@media (min-width: 640px){
  .answer-grid{ grid-template-columns: repeat(4, 1fr); }
}

.answer-btn{
  background: var(--card);
  border-radius: 18px;
  padding: 20px 10px;
  font-size:1.5rem;
  font-weight:800;
  color: var(--ink);
  box-shadow: var(--shadow);
  border: 3px solid transparent;
  transition: transform .1s ease, background .15s ease, border-color .15s ease;
}
.answer-btn:active{ transform: scale(.93); }
.answer-btn.correct{
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color:#fff;
  animation: correctPulse .4s ease;
}
.answer-btn.wrong{
  background: linear-gradient(135deg, var(--red), var(--red-dark));
  color:#fff;
  animation: shake .4s ease;
}
.answer-btn.disabled{ pointer-events:none; opacity:.55; }
@keyframes correctPulse{
  0%{ transform:scale(1);} 50%{ transform:scale(1.12);} 100%{ transform:scale(1);}
}
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  20%{ transform:translateX(-8px); }
  40%{ transform:translateX(8px); }
  60%{ transform:translateX(-6px); }
  80%{ transform:translateX(6px); }
}

.feedback-banner{
  margin-top:16px;
  padding: 12px 18px;
  border-radius: 16px;
  font-weight:800;
  font-size:1.1rem;
  animation: fadeIn .2s ease;
}
.feedback-banner.ok{ background:#e6fff2; color: var(--green-dark); }
.feedback-banner.bad{ background:#ffecee; color: var(--red-dark); }

/* ---------- learn table browser ---------- */
.learn-table-wrap{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }

.table-card{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}
.table-card-header{
  font-size:1.3rem; font-weight:900; color: var(--purple-dark); margin-bottom:12px; text-align:center;
}

.table-rows{ display:flex; flex-direction:column; gap:8px; }
.table-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background: var(--bg2);
  border-radius: 14px;
  padding: 12px 14px;
  font-size:1.1rem;
  font-weight:700;
  border: 2px solid transparent;
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
}
.table-row:active{ transform: scale(.97); }
.table-row.active{
  border-color: var(--orange);
  background: #fff3d6;
}
.row-eq strong{ color: var(--purple-dark); }
.bulb-btn{
  background: var(--yellow);
  width:36px; height:36px; min-width:36px; border-radius:50%;
  font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: transform .12s ease;
}
.bulb-btn:active{ transform: scale(.85) rotate(-10deg); }

/* ---------- result ---------- */
.result-wrap{
  max-width:520px; margin: 30px auto; text-align:center;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 20px;
}
#resultTitle{ color: var(--purple-dark); font-size:1.8rem; margin: 6px 0 14px; }
.result-stats{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:18px;
}
.stat-pill{
  background: var(--bg2);
  border-radius: 14px;
  padding: 12px 16px;
  min-width:110px;
}
.stat-pill .stat-val{ font-size:1.4rem; font-weight:900; color: var(--purple-dark); display:block; }
.stat-pill .stat-label{ font-size:.8rem; color: var(--ink-soft); }

.save-record{ margin: 14px 0; }
.save-record-row{ display:flex; gap:8px; justify-content:center; margin-top:8px; flex-wrap:wrap; }
#playerName{
  padding: 12px 14px; border-radius: 12px; border:2px solid #ddd; font-size:1rem; width: 180px;
}
.result-actions{ display:flex; gap:12px; justify-content:center; margin-top:18px; flex-wrap:wrap; }

/* ---------- leaderboard ---------- */
.leaderboard-wrap{ max-width:640px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.lb-empty{ text-align:center; color: var(--ink-soft); margin-top: 40px; font-size:1.1rem; }
.lb-row{
  display:flex; align-items:center; gap:12px;
  background: var(--card); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow);
}
.lb-rank{ font-size:1.3rem; font-weight:900; width:36px; text-align:center; }
.lb-row:nth-child(1) .lb-rank{ color: #ffb300; }
.lb-row:nth-child(2) .lb-rank{ color: #9aa0a6; }
.lb-row:nth-child(3) .lb-rank{ color: #cd7f32; }
.lb-info{ flex:1; }
.lb-name{ font-weight:800; }
.lb-meta{ font-size:.8rem; color:var(--ink-soft); }
.lb-time{ font-weight:900; font-size:1.15rem; color: var(--purple-dark); }

/* ---------- settings ---------- */
.settings-wrap{ max-width:560px; margin:0 auto; }
.settings-row{
  background: var(--card); border-radius: 16px; padding: 16px 18px; margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.settings-row label{ font-weight:700; display:block; margin-bottom:8px; }
.slider-row{ display:flex; align-items:center; gap:12px; }
.slider-row input[type=range]{ flex:1; accent-color: var(--purple); }
.slider-val{ font-weight:800; color: var(--purple-dark); min-width:64px; text-align:right; }
.switch-row{ display:flex; align-items:center; justify-content:space-between; }
.switch-row label{ margin-bottom:0; }
.switch-row input[type=checkbox]{ width:26px; height:26px; accent-color: var(--purple); }
.settings-note{ text-align:center; color: var(--ink-soft); font-size:.85rem; }

/* ---------- confirm modal ---------- */
.modal-backdrop{
  position: fixed; inset: 0;
  background: rgba(40, 20, 70, .5);
  display:flex; align-items:center; justify-content:center;
  z-index: 1000;
  padding: 20px;
  animation: fadeIn .2s ease;
}
.modal-box{
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 24px 24px;
  max-width: 340px;
  width: 100%;
  text-align: center;
  animation: correctPulse .25s ease;
}
.modal-mascot{ font-size: 3rem; margin-bottom: 6px; }
.modal-message{
  font-size: 1.15rem; font-weight: 800; color: var(--ink);
  margin: 0 0 22px; line-height: 1.45;
}
.modal-actions{ display:flex; flex-direction:column; gap:12px; }
.modal-btn{
  padding: 15px 20px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.05rem;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
}
.modal-btn:active{ transform: scale(.95); }
.modal-btn-yes{ background: linear-gradient(135deg, var(--red), var(--red-dark)); color:#fff; }
.modal-btn-no{ background: linear-gradient(135deg, var(--green), var(--green-dark)); color:#fff; }

/* ---------- confetti ---------- */
#confetti-layer{
  position:fixed; inset:0; pointer-events:none; z-index:999; overflow:hidden;
}
.confetti-piece{
  position:absolute; top:-10px; width:10px; height:14px; opacity:.9;
  animation-name: confetti-fall; animation-timing-function: ease-in; animation-fill-mode: forwards;
}
@keyframes confetti-fall{
  to{ transform: translateY(110vh) rotate(540deg); opacity:0; }
}

/* larger tap targets on touch devices */
@media (hover:none){
  .answer-btn, .table-tile, .mode-card, .pill-btn, .chip-btn, .icon-btn{ min-height:44px; }
}