/* =========================================================
   QUIZMÄSTAREN – STYLES
   All visual styling for the app lives here. The actual page
   markup is generated at runtime by the scripts in js/ — see
   js/pages/*.js — index.html only contains an empty <main id="app">.
   ========================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

:root {
  --bg1: #4f46e5;
  --bg2: #7c3aed;
  --card: #ffffff;
  --ink: #1e1b4b;
  --accent: #f59e0b;
  --good: #22c55e;
  --bad: #ef4444;
}

html, body { height: 100%; }

body {
  font-family: "Comic Sans MS", "Chalkboard SE", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  align-items: center;
  /* On pages taller than the viewport (many subject buttons, the
     highscore filters+list, ...), plain "center" overflows equally
     above AND below - and the part pushed above y=0 becomes
     unreachable by scrolling (the back button included). "safe
     center" falls back to start-alignment once content overflows,
     so everything stays scrollable into view. Older browsers that
     don't understand "safe center" simply keep the line above. */
  align-items: safe center;
  justify-content: center;
  padding: 16px;
}

/* #app is the mount point that the router renders pages into. */
#app { width: 100%; display: flex; justify-content: center; }

.page {
  width: 100%;
  max-width: 640px;
  background: var(--card);
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  text-align: center;
  animation: pop .35s ease;
}

@keyframes pop {
  from { transform: scale(.92); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

h1 { font-size: 2rem; margin-bottom: 6px; }
.subtitle { color: #6b7280; margin-bottom: 22px; font-size: 1.05rem; }
.logo { font-size: 3.2rem; margin-bottom: 8px; }

/* ---------- Top bar / back button (every page except the menu) ---------- */
.top-bar { display: flex; align-items: center; min-height: 34px; margin-bottom: 6px; }
.back-btn {
  background: #f3f4f6;
  border: 2px solid #e5e7eb;
  border-radius: 999px;
  width: 40px; height: 40px;
  font-size: 1.2rem; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  transition: transform .12s, background .12s;
}
.back-btn:hover { background: #e5e7eb; transform: translateX(-2px); }

/* ---------- Home menu ---------- */
.menu-list { display: grid; gap: 14px; margin: 22px 0 6px; }
.menu-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  border: none; border-radius: 20px; padding: 18px;
  font-family: inherit; font-size: 1.2rem; font-weight: bold; color: #fff;
  cursor: pointer;
  transition: transform .12s;
}
.menu-btn .emoji { font-size: 1.5rem; }
.menu-btn:hover { transform: scale(1.03); }
.menu-play      { background: linear-gradient(135deg, #f59e0b, #f97316); }
.menu-highscore { background: linear-gradient(135deg, #6366f1, #4338ca); }
.menu-account   { background: linear-gradient(135deg, #22c55e, #16a34a); }
.menu-about     { background: linear-gradient(135deg, #38bdf8, #0284c7); }

/* ---------- Subject page ---------- */
.subjects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}
.subject-btn {
  border: 3px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 20px;
  padding: 18px 10px;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--ink);
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
}
.subject-btn .emoji { display: block; font-size: 2.4rem; margin-bottom: 6px; }
.subject-btn:hover { transform: translateY(-3px); }
.subject-btn.selected {
  border-color: var(--bg1);
  background: #eef2ff;
  box-shadow: 0 6px 16px rgba(79,70,229,0.25);
}
.subject-btn.selected::after { content: " ✔"; color: var(--bg1); }

.big-btn {
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, var(--accent), #f97316);
  border: none;
  border-radius: 999px;
  padding: 16px 42px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(249,115,22,0.4);
  transition: transform .12s;
}
.big-btn:hover:not(:disabled) { transform: scale(1.05); }
.big-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ---------- Name / account inputs ---------- */
.name-input {
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: bold;
  text-align: center;
  color: var(--ink);
  width: 100%;
  max-width: 340px;
  padding: 14px 18px;
  border: 3px solid #e5e7eb;
  border-radius: 999px;
  outline: none;
  margin-bottom: 20px;
  transition: border-color .15s;
}
.name-input:focus { border-color: var(--bg1); background: #eef2ff; }

/* ---------- Highscore list ---------- */
.highscore-box {
  background: #f9fafb;
  border: 3px solid #e5e7eb;
  border-radius: 20px;
  padding: 16px;
  margin: 0 0 22px;
  text-align: left;
}
.highscore-box h2 { text-align: center; font-size: 1.2rem; margin-bottom: 10px; }
.hs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 1rem;
}
.hs-row .hs-rank { width: 2em; font-weight: bold; color: #6b7280; }
.hs-row .hs-name { flex: 1; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-row .hs-level { font-size: .8rem; color: #6b7280; }
.hs-row .hs-points { font-weight: bold; color: var(--bg1); }
.hs-row.new-entry {
  background: #fef3c7;
  border: 2px solid var(--accent);
  animation: glow 1s ease infinite alternate;
}
@keyframes glow {
  from { box-shadow: 0 0 4px rgba(245,158,11,.4); }
  to   { box-shadow: 0 0 14px rgba(245,158,11,.8); }
}
.hs-empty { text-align: center; color: #6b7280; padding: 8px; }

/* ---------- Dedicated highscore page filters ---------- */
.highscore-filters { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.hs-filter { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: bold; color: #6b7280; }
.hs-filter select {
  font-family: inherit; font-size: 1rem; font-weight: bold; color: var(--ink);
  border: 3px solid #e5e7eb; border-radius: 999px; padding: 8px 14px;
  background: #fff;
}
.hs-level-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.hs-tab {
  border: 3px solid #e5e7eb; background: #f9fafb; border-radius: 999px;
  padding: 8px 16px; font-family: inherit; font-weight: bold; color: var(--ink);
  cursor: pointer; transition: all .12s;
}
.hs-tab.active { border-color: var(--bg1); background: #eef2ff; color: var(--bg1); }

/* ---------- Account page ---------- */
.account-tabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 18px; }
.account-tab {
  border: 3px solid #e5e7eb; background: #f9fafb; border-radius: 999px;
  padding: 10px 20px; font-family: inherit; font-weight: bold; color: #6b7280;
  cursor: pointer; transition: all .12s;
}
.account-tab.active { border-color: var(--bg1); background: #eef2ff; color: var(--bg1); }
.account-form { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.form-msg { min-height: 1.2em; font-weight: bold; color: var(--bad); margin-bottom: 8px; }
.account-note { margin-top: 16px; font-size: .85rem; color: #9ca3af; }

.password-field { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.password-field .name-input { flex: 1; max-width: 300px; }
.hint-btn {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid #e5e7eb; background: #f9fafb; color: var(--ink);
  font-family: inherit; font-weight: bold; font-size: 1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.hint-btn:hover, .hint-btn.active { border-color: var(--bg1); background: #eef2ff; color: var(--bg1); }
.hint-popup {
  background: #eef2ff; border: 2px solid var(--bg1); border-radius: 12px;
  padding: 10px 14px; font-size: .85rem; color: var(--ink); text-align: left;
  max-width: 340px; margin-bottom: 8px;
}
.hint-popup[hidden] { display: none; }

/* ---------- About page ---------- */
.about-content { text-align: left; color: #374151; line-height: 1.6; display: flex; flex-direction: column; gap: 10px; margin-bottom: 8px; }

/* ---------- Difficulty / age page ---------- */
.levels { display: grid; gap: 14px; margin-bottom: 22px; }
.level-btn {
  border: none;
  border-radius: 20px;
  padding: 20px;
  font-family: inherit;
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
  cursor: pointer;
  transition: transform .12s;
}
.level-btn small { display: block; font-size: .85rem; font-weight: normal; opacity: .9; margin-top: 4px; }
.level-btn:hover { transform: scale(1.03); }
.level-easy { background: linear-gradient(135deg, #22c55e, #16a34a); }
.level-medium { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.level-hard { background: linear-gradient(135deg, #ef4444, #b91c1c); }

.age-early { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.age-tween { background: linear-gradient(135deg, #22c55e, #16a34a); }
.age-teen  { background: linear-gradient(135deg, #f59e0b, #ea580c); }
.age-adult { background: linear-gradient(135deg, #6366f1, #4338ca); }

.back-link {
  background: none; border: none; font-family: inherit;
  color: #6b7280; font-size: 1rem; cursor: pointer; margin-top: 14px;
  text-decoration: underline;
}

/* ---------- Countdown page ---------- */
#countdown-number {
  font-size: 7rem;
  font-weight: bold;
  color: var(--bg1);
  animation: pulse 1s infinite;
  line-height: 1.2;
}
@keyframes pulse {
  0% { transform: scale(.7); opacity: .4; }
  50% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- Quiz page ---------- */
#quiz-page { text-align: center; }

.quiz-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 1rem;
  color: #6b7280;
}
#timer-circle {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #eef2ff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; font-weight: bold; color: var(--bg1);
  border: 4px solid var(--bg1);
  transition: border-color .3s, color .3s;
}
#timer-circle.warning { border-color: var(--bad); color: var(--bad); animation: shake .4s infinite; }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

.timer-bar-wrap {
  height: 10px; background: #e5e7eb; border-radius: 999px;
  overflow: hidden; margin-bottom: 16px;
}
#timer-bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--good), var(--accent));
  border-radius: 999px;
}
#timer-bar.running { transition: width 10s linear; width: 0%; }

.question-img { font-size: 4.6rem; line-height: 1.15; margin-bottom: 10px; }
#question-text { font-size: 1.35rem; margin-bottom: 18px; min-height: 3.2rem; }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
@media (max-width: 480px) { .answers { grid-template-columns: 1fr; } }

.answer-btn {
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--ink);
  background: #f3f4f6;
  border: 3px solid #e5e7eb;
  border-radius: 16px;
  padding: 16px 10px;
  cursor: pointer;
  transition: transform .1s, background .15s, border-color .15s;
}
.answer-btn:hover:not(:disabled) { transform: scale(1.03); border-color: var(--bg1); }
.answer-btn:disabled { cursor: default; }
.answer-btn.correct { background: var(--good); border-color: #15803d; color: #fff; }
.answer-btn.wrong { background: var(--bad); border-color: #991b1b; color: #fff; }

.progress-dots { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.dot {
  width: 32px; height: 32px; border-radius: 50%;
  background: #e5e7eb; color: #6b7280;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: bold;
  transition: background .2s, color .2s, transform .2s;
}
.dot.current { background: var(--bg1); color: #fff; transform: scale(1.18); }
.dot.right { background: var(--good); color: #fff; }
.dot.wrong { background: var(--bad); color: #fff; }

/* ---------- Result page ---------- */
#result-emoji { font-size: 4.5rem; margin-bottom: 8px; }
#result-score {
  font-size: 3rem; font-weight: bold; color: var(--bg1);
  margin: 6px 0;
}
#result-stars { font-size: 2.2rem; letter-spacing: 6px; margin-bottom: 8px; }
#result-message { font-size: 1.15rem; color: #6b7280; margin-bottom: 22px; }