/* Rebuilt game pages: home, subjects, topics, join and the game screen. Uses tokens from gsol-fun.css. */
.fun-panel {
  background: #fff;
  border: 3px solid var(--fun-ink);
  border-radius: var(--fun-radius);
  box-shadow: 0 8px 0 var(--fun-ink);
  padding: clamp(1.25rem, 3vw, 2rem);
}

.fun-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.fun-subject {
  align-items: flex-start;
  color: inherit !important;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  font: inherit;
  padding: 1.4rem;
  text-align: left;
  text-decoration: none !important;
  width: 100%;
}

.fun-subject .fun-play-hint { margin-top: auto; padding-top: 0.6rem; }
.fun-subject:focus-visible { outline: 4px solid var(--fun-yellow); outline-offset: 3px; }

.fun-level-grid {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.fun-level {
  background: #faf8ff;
  border: 3px solid #e4ddf7;
  border-radius: 22px;
  box-shadow: 0 5px 0 #e4ddf7;
  color: var(--fun-ink) !important;
  display: flex;
  flex-direction: column;
  padding: 1rem 1.1rem;
  text-decoration: none !important;
  transition: transform 150ms ease, border-color 150ms ease;
}

.fun-level strong { font-family: var(--fun-heading); font-size: 1.6rem; }
.fun-level span { color: var(--fun-muted); font-weight: 700; }
.fun-level:hover { border-color: var(--fun-purple); transform: translateY(-4px) rotate(-1deg); }

.fun-chips, .fun-past-papers { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }

.fun-chip {
  background: #fff;
  border: 2px solid #e4ddf7;
  border-radius: 999px;
  color: var(--fun-ink) !important;
  cursor: pointer;
  font-family: var(--fun-heading);
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  text-decoration: none !important;
}

.fun-chip:hover, .fun-chip.is-active { background: var(--fun-purple); border-color: var(--fun-purple); color: #fff !important; }
.fun-chip small { opacity: 0.7; }

/* ---------- Set-up dialog ---------- */
.fun-dialog {
  border: 3px solid var(--fun-ink);
  border-radius: 30px;
  box-shadow: 0 10px 0 var(--fun-ink);
  max-width: 560px;
  padding: 1.5rem;
  width: calc(100% - 2rem);
}

.fun-dialog::backdrop { background: rgba(36, 22, 79, 0.45); }
.fun-dialog[open] { animation: fun-pop-in 350ms cubic-bezier(.2, 1.4, .4, 1); }

.fun-choice-grid {
  border: 0;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 1rem;
  padding: 0;
}

.fun-choice { cursor: pointer; margin: 0; position: relative; }
.fun-choice input { opacity: 0; position: absolute; }

.fun-choice span {
  border: 3px solid #e4ddf7;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0.7rem 0.8rem;
  transition: border-color 120ms ease, background 120ms ease;
}

.fun-choice b { font-family: var(--fun-heading); font-size: 1.1rem; font-weight: 600; }
.fun-choice small { color: var(--fun-muted); font-weight: 700; }
.fun-choice input:checked + span { background: #f3edff; border-color: var(--fun-purple); }
.fun-choice input:focus-visible + span { outline: 3px solid var(--fun-yellow); }

.fun-setup-row { margin-bottom: 0.9rem; }
.fun-setup-row label { font-family: var(--fun-heading); font-weight: 600; }
.fun-setup-row[hidden] { display: none; }
.fun-dialog-actions { display: flex; gap: 0.75rem; justify-content: flex-end; margin-top: 1rem; }
.fun-form-error { color: var(--fun-red); font-weight: 800; }

/* ---------- Join ---------- */
.fun-join { margin: 0 auto; max-width: 560px; text-align: center; }
.fun-join .fun-step-icon { margin: 0 auto; }
.fun-join-form { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.fun-code-input {
  font-family: var(--fun-heading);
  font-size: 2rem;
  letter-spacing: 0.3em;
  max-width: 280px;
  text-align: center;
  text-transform: uppercase;
}

.fun-name-input { font-family: var(--fun-heading); font-size: 1.3rem; margin: 0.4rem auto 0; max-width: 340px; text-align: center; }

/* ---------- Lobby ---------- */
.fun-code {
  background: #fef3c7;
  border: 3px dashed var(--fun-orange);
  border-radius: 20px;
  display: inline-block;
  font-family: var(--fun-heading);
  font-size: clamp(2.2rem, 8vw, 3.4rem);
  letter-spacing: 0.25em;
  padding: 0.2rem 0.4rem 0.2rem 0.65rem;
}

.fun-player-list { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; list-style: none; padding: 0; }

.fun-player-list li {
  animation: fun-pop-in 400ms cubic-bezier(.2, 1.4, .4, 1);
  background: #f3edff;
  border-radius: 999px;
  font-weight: 800;
  padding: 0.4rem 0.9rem;
}

.fun-player-list li.is-me, .fun-mini-board li.is-me { background: #fef3c7; }

/* ---------- 3-2-1 ---------- */
.fun-countdown { display: grid; min-height: 50vh; place-items: center; }

.fun-countdown-number {
  color: var(--fun-purple);
  font-family: var(--fun-heading);
  font-size: clamp(6rem, 25vw, 12rem);
  font-weight: 700;
  text-shadow: 0 8px 0 rgba(36, 22, 79, 0.15);
}

/* ---------- Timer ---------- */
.fun-timer {
  background: #ede9fe;
  border-radius: 999px;
  height: 14px;
  margin-bottom: 0.9rem;
  overflow: hidden;
  position: relative;
}

.fun-timer-bar {
  background: linear-gradient(90deg, var(--fun-green), var(--fun-teal));
  height: 100%;
  transform-origin: left;
  width: 100%;
}

.fun-timer.is-low .fun-timer-bar { background: linear-gradient(90deg, var(--fun-red), var(--fun-orange)); }
.fun-timer span { font-size: 0.75rem; font-weight: 900; position: absolute; right: 8px; top: -2px; }

/* ---------- Question ---------- */
#game { position: relative; text-align: center; }
.fun-topic-label { color: var(--fun-purple); font-family: var(--fun-heading); font-weight: 600; margin-bottom: 0.4rem; }

.fun-question {
  color: var(--fun-ink);
  font-family: var(--fun-heading);
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 auto 0.5rem;
  max-width: 820px;
  white-space: pre-line;
}

.fun-question.question-long { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.fun-question.question-extra-long { font-size: 1.15rem; line-height: 1.45; text-align: left; }

.question-media { margin: 0 auto 1rem; max-width: 560px; }
.question-media[hidden] { display: none; }
.question-media img { background: #fff; border: 2px solid #ede9fe; border-radius: 18px; cursor: zoom-in; max-height: 340px; max-width: 100%; padding: 0.5rem; }
.question-media.is-zoomed { max-width: 100%; }
.question-media.is-zoomed img { cursor: zoom-out; max-height: none; }

.choice-option { color: var(--fun-ink); white-space: pre-wrap; }
.choice-option.is-chosen { border-color: var(--fun-purple) !important; box-shadow: 0 5px 0 var(--fun-purple) !important; }
.choice-option.is-correct { background: #dcfce7 !important; border-color: var(--fun-green) !important; box-shadow: 0 5px 0 var(--fun-green-dark) !important; }
.choice-option.is-wrong { background: #fee2e2 !important; border-color: var(--fun-red) !important; box-shadow: 0 5px 0 #b91c1c !important; }
.choice-option:disabled { cursor: default; opacity: 1; }

.fun-answer-form { margin: 0 auto; max-width: 560px; }

#answer-input {
  background: #faf8ff;
  border: 3px solid #ddd3fb;
  border-radius: 22px;
  font-family: var(--fun-heading);
  font-size: 1.6rem;
  min-height: 64px;
  text-align: center;
}

#answer-input.long-answer-field { font-family: var(--fun-body); font-size: 1rem; min-height: 150px; text-align: left; }
#answer-input:focus { border-color: var(--fun-purple); box-shadow: 0 0 0 6px rgba(124, 58, 237, 0.15); }

.fun-self-check { margin: 0 auto; max-width: 680px; text-align: left; }

.fun-scheme, #reveal-scheme-text {
  background: #f6f2ff;
  border-radius: 14px;
  font-family: var(--fun-body);
  font-size: 0.95rem;
  padding: 0.9rem;
  white-space: pre-wrap;
}

.fun-self-check-actions { display: flex; gap: 0.75rem; justify-content: center; }

.fun-waiting { font-weight: 800; margin-top: 1rem; text-align: center; }

.fun-reveal {
  animation: fun-pop-in 400ms cubic-bezier(.2, 1.4, .4, 1);
  background: #fff;
  border: 3px solid var(--fun-green);
  border-radius: 26px;
  margin-top: 1.4rem;
  padding: 1.2rem;
  text-align: center;
}

.fun-reveal-answer { font-family: var(--fun-heading); font-size: 1.5rem; font-weight: 600; margin-bottom: 0.3rem; }

.fun-mini-board { list-style: none; margin: 1rem auto; max-width: 420px; padding: 0; }

.fun-mini-board li {
  align-items: center;
  background: #f6f2ff;
  border-radius: 14px;
  display: flex;
  font-weight: 800;
  justify-content: space-between;
  margin-bottom: 0.35rem;
  padding: 0.45rem 0.8rem;
}

.fun-side-board {
  background: #fff;
  border: 3px solid var(--fun-ink);
  border-radius: 22px;
  box-shadow: 0 5px 0 var(--fun-ink);
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
}

.fun-side-board ol { margin: 0; padding-left: 1.2rem; }
.fun-side-board li { font-weight: 800; }
.fun-side-board li span + span { float: right; }
.fun-board-score { font-family: var(--fun-heading); }

/* ---------- Results ---------- */
.fun-podium { align-items: flex-end; display: flex; gap: 0.6rem; justify-content: center; margin: 1.5rem 0; }

.fun-podium-step {
  animation: fun-pop-in 600ms cubic-bezier(.2, 1.4, .4, 1) both;
  background: #f3edff;
  border: 3px solid var(--fun-ink);
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  padding: 0.8rem 0.6rem;
  width: 31%;
}

.fun-podium-step.place-1 { animation-delay: 300ms; background: #fef3c7; min-height: 190px; order: 2; }
.fun-podium-step.place-2 { animation-delay: 150ms; min-height: 150px; order: 1; }
.fun-podium-step.place-3 { min-height: 120px; order: 3; }
.fun-podium-medal { font-size: 2.2rem; }
.fun-podium-name { font-family: var(--fun-heading); font-size: clamp(0.8rem, 3.4vw, 1.05rem); font-weight: 600; overflow-wrap: break-word; }
.fun-podium-score { color: var(--fun-muted); font-size: 0.85rem; font-weight: 800; }

.fun-achievements { margin: 1rem 0 1.5rem; }

.fun-badge-chip {
  animation: fun-pop-in 500ms cubic-bezier(.2, 1.6, .4, 1) both;
  background: #fef3c7;
  border: 2px solid var(--fun-yellow);
  border-radius: 999px;
  display: inline-block;
  font-weight: 800;
  margin: 0.25rem;
  padding: 0.35rem 0.8rem;
}

/* ---------- Profile ---------- */
.fun-stats { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 1rem 0 2rem; }
.fun-stat { background: #fff; border: 3px solid #e4ddf7; border-radius: 22px; padding: 1rem; text-align: center; }
.fun-stat strong { display: block; font-family: var(--fun-heading); font-size: 2rem; }
.fun-stat span { color: var(--fun-muted); font-weight: 800; }
.fun-badge-grid { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.fun-badge-card { background: #fff; border: 3px solid #e4ddf7; border-radius: 20px; padding: 0.9rem; text-align: center; }
.fun-badge-card.is-locked { filter: grayscale(1); opacity: 0.45; }
.fun-badge-card .icon { font-size: 2rem; }
.fun-table { width: 100%; }
.fun-table th, .fun-table td { border-bottom: 1px solid #ede9fe; padding: 0.5rem; }

.fun-screen[hidden], .fun-reveal[hidden], .fun-waiting[hidden], .fun-side-board[hidden], .fun-timer[hidden] { display: none !important; }

@media (max-width: 575px) {
  .fun-choice-grid { grid-template-columns: 1fr; }
  .fun-podium-step { width: 33%; }
  .fun-code { letter-spacing: 0.12em; }
}

/* Answer buttons: Skip on the left edge, Check on the right edge of the answer box. */
.fun-answer-actions {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin: 1rem auto 0;
  max-width: 560px;
}

.fun-check { font-size: 1.25rem; min-height: 56px; min-width: 9rem; }

.fun-skip {
  background: transparent;
  border: 2px dashed #cbbff0;
  border-radius: 999px;
  color: var(--fun-muted);
  font-size: 0.95rem;
  min-height: 44px;
  padding: 0.4rem 1rem;
}

.fun-skip:hover { border-color: var(--fun-muted); color: var(--fun-ink); }