/* Series engine (public/engine.js). Colours come from the variables of style.css.
   The content security policy forbids inline styles: every state is a class. */

.series-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 14px;
}
.series-progress progress {
  flex: 1;
  height: 12px;
  accent-color: var(--green);
}
.series-count {
  font-size: 14px;
  font-weight: 650;
  color: var(--muted);
  white-space: nowrap;
}
.chip.streak {
  background: #fff2d2;
  color: #604b16;
  font-weight: 750;
}

.question > h2 {
  font-size: 24px;
}

/* Tiles: every tappable answer, in every mechanic. */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 22px 0;
}
button.tile {
  min-height: 60px;
  justify-content: flex-start;
  text-align: left;
  background: #fff;
  color: var(--ink);
  border: 2px solid #cbd5c8;
  border-radius: 14px;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 3px 0 #dfe6d8;
}
button.tile:hover:not(:disabled) {
  filter: none;
  border-color: var(--green);
  background: #f3f8ef;
}
button.tile:active:not(:disabled) {
  box-shadow: none;
  translate: 0 3px;
}
button.tile.is-selected {
  border-color: var(--green);
  background: #e8f2e4;
}
button.tile.is-matched {
  border-color: #9cc49a;
  background: #e9f2e7;
  color: #2f6a41;
  opacity: 1;
  box-shadow: none;
}
button.tile.is-matched::after {
  content: '✓';
  margin-left: auto;
  padding-left: 10px;
}
button.tile.is-wrong {
  border-color: #c9633f;
  background: #fcebe4;
}

.pairs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 22px 0 12px;
}
.pairs-column {
  display: grid;
  gap: 10px;
  align-content: start;
}

.blank-text {
  font-size: 19px;
  line-height: 2.5;
  color: var(--ink) !important;
}
input.blank {
  display: inline-block;
  width: auto;
  min-height: 40px;
  margin: 0 4px;
  padding: 6px 10px;
  border: 0;
  border-bottom: 3px solid var(--green);
  border-radius: 6px 6px 0 0;
  background: #f0f5ea;
  font-weight: 650;
  text-align: center;
}

.sort-card {
  margin: 8px 0 6px;
  padding: 26px 20px;
  border: 2px dashed #a3b295;
  border-radius: 16px;
  background: #fffdf0;
  color: var(--ink) !important;
  font-size: 26px !important;
  font-weight: 700;
  text-align: center;
}
.sort-last {
  margin: 0;
  font-size: 14px !important;
  font-weight: 650;
}
.sort-last.is-correct {
  color: #2f6a41 !important;
}
.sort-last.is-wrong {
  color: #8b3425 !important;
}

.series .feedback h3 {
  margin-top: 0;
}
.series .feedback p {
  color: var(--ink);
  font-size: 16px;
}

.results {
  text-align: center;
}
.results table {
  text-align: left;
}
.results h3 {
  margin-top: 26px;
  text-align: left;
}
.results-stars {
  margin: 0;
  color: #d9a21b !important;
  font-size: 46px !important;
  letter-spacing: 6px;
  line-height: 1.1;
}
.results-score {
  margin: 4px 0 10px;
  color: var(--ink) !important;
  font-size: 44px !important;
  font-weight: 800;
  letter-spacing: -1px;
}

/* ---- Celebration: confetti drawn by CSS alone (the content security policy forbids inline styles). */
.feedback,
.results {
  position: relative;
}
/* Confetti fly past the edge of a phone screen: clip them sideways, or the page widens and a
   horizontal scrollbar flashes during every celebration. They still fly freely upwards. */
.series {
  overflow-x: clip;
}
.burst {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.burst i {
  position: absolute;
  width: 12px;
  height: 18px;
  border-radius: 2px;
  opacity: 0;
}
.burst i:nth-child(3n) {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}
.burst i:nth-child(1) {
  --x: 90px;
  --y: -40px;
  --r: -180deg;
  background: #e5b52e;
  animation-delay: 0s;
}
.burst i:nth-child(2) {
  --x: 104px;
  --y: 18px;
  --r: -107deg;
  background: #2f8f62;
  animation-delay: 0.02s;
}
.burst i:nth-child(3) {
  --x: 142px;
  --y: 26px;
  --r: -34deg;
  background: #d9694a;
  animation-delay: 0.04s;
}
.burst i:nth-child(4) {
  --x: 51px;
  --y: 48px;
  --r: 39deg;
  background: #4f86c6;
  animation-delay: 0.06s;
}
.burst i:nth-child(5) {
  --x: 79px;
  --y: 69px;
  --r: 112deg;
  background: #b56bc9;
  animation-delay: 0.08s;
}
.burst i:nth-child(6) {
  --x: -10px;
  --y: 52px;
  --r: -175deg;
  background: #f08a24;
  animation-delay: 0s;
}
.burst i:nth-child(7) {
  --x: 0px;
  --y: 82px;
  --r: -102deg;
  background: #e5b52e;
  animation-delay: 0.02s;
}
.burst i:nth-child(8) {
  --x: -63px;
  --y: 31px;
  --r: -29deg;
  background: #2f8f62;
  animation-delay: 0.04s;
}
.burst i:nth-child(9) {
  --x: -73px;
  --y: 61px;
  --r: 44deg;
  background: #d9694a;
  animation-delay: 0.06s;
}
.burst i:nth-child(10) {
  --x: -93px;
  --y: -5px;
  --r: 117deg;
  background: #4f86c6;
  animation-delay: 0.08s;
}
.burst i:nth-child(11) {
  --x: -121px;
  --y: 16px;
  --r: -170deg;
  background: #b56bc9;
  animation-delay: 0s;
}
.burst i:nth-child(12) {
  --x: -97px;
  --y: -47px;
  --r: -97deg;
  background: #f08a24;
  animation-delay: 0.02s;
}
.burst i:nth-child(13) {
  --x: -134px;
  --y: -40px;
  --r: -24deg;
  background: #e5b52e;
  animation-delay: 0.04s;
}
.burst i:nth-child(14) {
  --x: -74px;
  --y: -82px;
  --r: 49deg;
  background: #2f8f62;
  animation-delay: 0.06s;
}
.burst i:nth-child(15) {
  --x: -111px;
  --y: -91px;
  --r: 122deg;
  background: #d9694a;
  animation-delay: 0.08s;
}
.burst i:nth-child(16) {
  --x: -70px;
  --y: -160px;
  --r: -165deg;
  background: #4f86c6;
  animation-delay: 0s;
}
.burst i:nth-child(17) {
  --x: -61px;
  --y: -125px;
  --r: -92deg;
  background: #b56bc9;
  animation-delay: 0.02s;
}
.burst i:nth-child(18) {
  --x: 14px;
  --y: -167px;
  --r: -19deg;
  background: #f08a24;
  animation-delay: 0.04s;
}
.burst i:nth-child(19) {
  --x: 0px;
  --y: -133px;
  --r: 54deg;
  background: #e5b52e;
  animation-delay: 0.06s;
}
.burst i:nth-child(20) {
  --x: 88px;
  --y: -140px;
  --r: 127deg;
  background: #2f8f62;
  animation-delay: 0.08s;
}
.burst i:nth-child(21) {
  --x: 55px;
  --y: -116px;
  --r: -160deg;
  background: #d9694a;
  animation-delay: 0s;
}
.burst i:nth-child(22) {
  --x: 133px;
  --y: -90px;
  --r: -87deg;
  background: #4f86c6;
  animation-delay: 0.02s;
}
.burst i:nth-child(23) {
  --x: 90px;
  --y: -82px;
  --r: -14deg;
  background: #b56bc9;
  animation-delay: 0.04s;
}
.burst i:nth-child(24) {
  --x: 140px;
  --y: -30px;
  --r: 59deg;
  background: #f08a24;
  animation-delay: 0.06s;
}

/* ---- After a choice: the right tile in green, a wrong pick in red. */
.tiles.is-review button.tile:disabled {
  opacity: 0.55;
  box-shadow: none;
}
.tiles.is-review button.tile.is-right {
  opacity: 1;
  border-color: #2f8f62;
  background: #dff1e3;
  color: #1f5a3c;
}
.tiles.is-review button.tile.is-wrong {
  opacity: 1;
  border-color: #c9633f;
  background: #fcebe4;
  color: #8b3425;
}

/* ---- The right order, as a timeline. */
.timeline {
  display: flex;
  margin: 26px 0 8px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  overflow-x: auto;
}
.timeline li {
  position: relative;
  flex: 1;
  min-width: 110px;
  margin-top: 15px;
  padding: 22px 10px 0;
  border-top: 4px solid #93b88c;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  counter-increment: step;
}
.timeline li::before {
  content: counter(step);
  position: absolute;
  top: -15px;
  left: calc(50% - 13px);
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 13px;
}

/* ---- Pictures that go with a question. */
.visual {
  display: block;
  margin: 6px auto 18px;
}
svg.visual {
  width: min(100%, 340px);
  height: auto;
}
svg.visual.is-disc {
  width: 170px;
}
.visual .part {
  fill: #fffdf0;
  stroke: #5f7a57;
  stroke-width: 1.5;
}
.visual .part.is-taken {
  fill: #f0b84a;
}
.visual .part.is-crossed {
  fill: #d9ddd2;
}
.visual.is-emoji {
  margin: 0 0 12px;
  font-size: 64px !important;
  line-height: 1.1;
  text-align: center;
}
table.place-value {
  display: table;
  width: auto;
  border-collapse: separate;
  border-spacing: 4px 0;
}
.place-value th {
  padding: 4px 8px;
  border: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-align: center;
  text-transform: uppercase;
}
.place-value td {
  min-width: 46px;
  padding: 10px 8px;
  border: 2px solid #cbd5c8;
  border-radius: 10px;
  background: #fff;
  font-size: 28px;
  font-weight: 750;
  text-align: center;
}
.place-value th.is-comma,
.place-value td.is-comma {
  min-width: 0;
  padding: 10px 0;
  border: 0;
  background: none;
}

/* ---- Player bar: level, experience, day streak. */
.hud {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 24px;
  padding: 14px 18px;
  border: 1px solid #e5c26b;
  border-radius: 16px;
  background: linear-gradient(100deg, #fff6dc, #fffef8 70%);
}
.hud-level {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  line-height: 1.35;
}
.hud-badge {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--green);
  color: #f8df99;
  font-size: 20px;
  font-weight: 800;
  box-shadow: 0 0 0 4px #f4db94;
}
.hud-xp {
  color: #604b16;
  font-weight: 750;
}
.hud-note {
  color: var(--muted);
  font-size: 12px;
}
.hud-progress {
  flex: 1;
  min-width: 190px;
}
.hud-next {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.hud-streak {
  padding: 6px 12px;
  border-radius: 999px;
  background: #fde3c8;
  color: #8a4312;
  font-size: 13px;
  font-weight: 750;
  white-space: nowrap;
}
progress.xp-bar,
progress.meter,
.series-progress progress {
  display: block;
  width: 100%;
  height: 14px;
  border: 0;
  border-radius: 999px;
  background: #e5e9dd;
  overflow: hidden;
  appearance: none;
}
progress.xp-bar::-webkit-progress-bar,
progress.meter::-webkit-progress-bar,
.series-progress progress::-webkit-progress-bar {
  background: #e5e9dd;
}
progress.xp-bar::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #e5b52e, #f08a24);
}
progress.xp-bar::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #e5b52e, #f08a24);
}
progress.meter::-webkit-progress-value,
.series-progress progress::-webkit-progress-value {
  border-radius: 999px;
  background: linear-gradient(90deg, #4aa375, var(--green));
}
progress.meter::-moz-progress-bar,
.series-progress progress::-moz-progress-bar {
  border-radius: 999px;
  background: linear-gradient(90deg, #4aa375, var(--green));
}
.chip.score {
  background: #dff1e3;
  color: #1f5a3c;
  font-weight: 750;
}
.chip.streak.is-hot {
  background: #fde3c8;
  color: #8a4312;
}

/* ---- What a series unlocked. */
.xp-gain {
  display: inline-block;
  font-size: 22px !important;
}
.unlock {
  max-width: 520px;
  margin: 8px auto;
  padding: 10px 16px;
  border: 2px solid #e5c26b;
  border-radius: 12px;
  background: #fff6dc;
  color: #604b16 !important;
  font-size: 15px !important;
}
.unlock.level-up {
  border-color: var(--green);
  background: #e6f0e6;
  color: #1f5a3c !important;
}
.star {
  display: inline-block;
  color: #cfd5c8;
}
.star.is-won {
  color: #d9a21b;
}

/* ---- Series to resume and progress by subject, in the signed-in space. */
.resume-list {
  display: grid;
  gap: 12px;
  margin-bottom: 30px;
}
.resume-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 18px;
  align-items: center;
  border-left: 5px solid #f0b84a;
}
.resume-item progress {
  grid-column: 1 / -1;
}
.meter-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 54px;
  gap: 12px;
  align-items: center;
  margin: 10px 0;
  font-size: 14px;
}

/* ---- Opening an account: drawn pseudonyms to pick from, and the recovery code shown once. */
.pseudo-picker {
  margin: 18px 0;
  padding: 0;
  border: 0;
}
.pseudo-picker legend,
.inline-check {
  font-size: 14px;
  font-weight: 650;
}
.pseudo-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin: 10px 0;
}
.pseudo-option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin: 0;
  padding: 10px 14px;
  border: 2px solid #cbd5c8;
  border-radius: 14px;
  background: #fff;
  font-size: 16px;
  cursor: pointer;
}
.pseudo-option:has(input:checked) {
  border-color: var(--green);
  background: #e8f2e4;
}
.inline-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0;
}
.inline-check input {
  width: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: var(--green);
}
.recovery-code {
  margin: 18px 0;
  padding: 18px 12px;
  border: 2px dashed #e5c26b;
  border-radius: 14px;
  background: #fff6dc;
  color: #233c38 !important;
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-size: 28px !important;
  font-weight: 750;
  letter-spacing: 2px;
  text-align: center;
  overflow-wrap: anywhere;
  user-select: all;
}
@media print {
  header,
  aside,
  footer,
  #notice,
  .recovery-code ~ .row,
  .recovery-code ~ label,
  .recovery-code ~ button {
    display: none !important;
  }
}

/* ---- Top of a game: back button and sound switch on one line. */
.game-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.sound-toggle[aria-pressed='true'] {
  border-color: var(--green);
}

/* ---- Experience that flies away from a right answer. */
.xp-pop {
  position: absolute;
  top: 10px;
  right: 16px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f4db94;
  color: #5b4300;
  font-weight: 800;
  animation: xp-fly 1.1s ease-out both;
  pointer-events: none;
}
@keyframes xp-fly {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.8);
  }
  25% {
    opacity: 1;
    transform: translateY(0) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translateY(-36px) scale(1);
  }
}

/* ---- Challenges: clock, lives, ready and over screens. */
.challenge-hud {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}
.challenge-time {
  min-width: 70px;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.challenge-time.is-urgent {
  color: #b3261e;
  animation: tick-pulse 1s ease-in-out infinite;
}
.challenge-clock {
  flex: 1 1 140px;
  height: 12px;
  accent-color: var(--green);
}
.lives {
  color: #d1344b;
  font-size: 22px;
  letter-spacing: 2px;
}
.challenge-ready {
  text-align: center;
}
.challenge-icon {
  margin: 0;
  font-size: 56px;
  line-height: 1.1;
}
.challenge-modes {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.challenge-modes [aria-pressed='true'] {
  border-color: var(--green);
  background: #e8f2e4;
}
.feedback.is-quick {
  padding: 10px 16px;
}
@keyframes tick-pulse {
  50% {
    transform: scale(1.08);
  }
}

/* ---- Sorting by dragging the card onto a category. */
.sort-card[data-drag] {
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.sort-card.is-lifted {
  opacity: 0.35;
}
.drag-ghost {
  position: fixed;
  z-index: 50;
  margin: 0;
  pointer-events: none;
  opacity: 0.92;
  transform: rotate(-3deg) scale(0.8);
  transform-origin: top left;
  box-shadow: 0 14px 30px rgba(20, 40, 30, 0.25);
}
.tile.is-drop {
  border-color: var(--green);
  background: #e8f2e4;
  transform: scale(1.05);
}
@media (prefers-reduced-motion: reduce) {
  .xp-pop,
  .challenge-time.is-urgent {
    animation: none;
  }
  .drag-ghost,
  .tile.is-drop {
    transform: none;
  }
}

/* ---- Browsing by the programme: classes, subjects, chapters, notions. */
.grade-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 18px 0;
}
.grade-tab {
  display: grid;
  gap: 2px;
  min-height: 64px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: center;
}
.grade-tab strong {
  font-size: 22px;
}
.grade-tab span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.grade-tab[aria-pressed='true'] {
  border-color: var(--green);
  background: #e8f2e4;
}
.subject-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 16px;
  padding: 2px 0 8px;
  scrollbar-width: thin;
}
.subject-tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-weight: 650;
  white-space: nowrap;
}
.subject-tab[aria-pressed='true'] {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.subject-tab[aria-pressed='true'] .tag {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.chapters {
  display: grid;
  gap: 16px;
}
.chapter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.chapter-head h3 {
  margin: 0;
}
.chapter-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}
.chapter-meter progress {
  width: 90px;
  accent-color: var(--green);
}
.notions {
  margin: 12px 0;
  padding: 0;
  list-style: none;
}
.notion {
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.notion-title {
  margin: 0 0 6px;
  color: var(--ink) !important;
  font-weight: 650;
}
.notion.is-empty .notion-title {
  color: var(--muted) !important;
  font-weight: 500;
}
.notion-game {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 6px 0;
}
.notion-game .play {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-height: 52px;
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}
.notion-game .play:hover,
.notion-game .play:focus-visible {
  border-color: var(--green);
  background: #f4f9f1;
}
.play-title {
  font-weight: 750;
}
.play-meta {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.challenge-button {
  flex: 0 0 52px;
  min-height: 52px;
  padding: 0;
  font-size: 20px;
}
.search-panel {
  margin: 0 0 16px;
}
.search-field {
  flex: 1 1 260px;
}
.more-filters {
  flex: 1 1 100%;
}
.more-filters > summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--muted);
  font-weight: 650;
}
.more-filters[open] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.more-filters[open] > summary {
  grid-column: 1 / -1;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.chip.is-soon,
.chip.is-practice {
  background: #f2f2ee;
  color: var(--muted);
}
@media (max-width: 720px) {
  .grade-tabs {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The catalogue, one block per class and subject. */
.mission-group {
  margin: 28px 0;
}
.mission-group > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

/* Mistakes notebook, in the signed-in space. */
.notebook td:first-child {
  width: 45%;
}

@media (max-width: 720px) {
  .tiles {
    grid-template-columns: 1fr;
  }
  .pairs {
    gap: 8px;
  }
  button.tile {
    font-size: 16px;
    padding: 10px 12px;
  }
  .sort-card {
    font-size: 22px !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .burst i {
    animation: burst-fly 1.2s cubic-bezier(0.15, 0.8, 0.3, 1) forwards;
  }
  .tiles.is-review button.tile.is-right {
    animation: series-pop 0.3s ease-out;
  }
  .star.is-won {
    animation: star-in 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) backwards;
  }
  .star.is-won:nth-child(2) {
    animation-delay: 0.18s;
  }
  .star.is-won:nth-child(3) {
    animation-delay: 0.36s;
  }
  .unlock,
  .xp-gain {
    animation: series-pop 0.4s ease-out 0.5s backwards;
  }
  .chip.streak.is-hot {
    animation: pulse 1.2s ease-in-out infinite;
  }
  .series .feedback,
  .results-stars {
    animation: series-pop 0.28s ease-out;
  }
  button.tile.is-wrong {
    animation: series-shake 0.3s ease-in-out;
  }
  button.tile {
    transition:
      background 0.12s,
      border-color 0.12s;
  }
}
@keyframes series-pop {
  from {
    opacity: 0;
    scale: 0.96;
  }
  to {
    opacity: 1;
    scale: 1;
  }
}
@keyframes series-shake {
  25% {
    translate: -5px 0;
  }
  75% {
    translate: 5px 0;
  }
}
@keyframes burst-fly {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(calc(var(--x) * 1.7), calc(var(--y) * 1.7)) rotate(var(--r));
  }
}
@keyframes star-in {
  from {
    opacity: 0;
    scale: 0.2;
    rotate: -40deg;
  }
}
@keyframes pulse {
  50% {
    scale: 1.08;
  }
}

/* Compteur de points de la partie en cours, dans la barre du haut. */
.game-points {
  margin-left: auto;
  margin-right: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f4f9f1;
  color: var(--green, #246956);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Le défi du jour, en tête de la page des jeux. */
.daily-challenge {
  border: 2px solid var(--green, #246956);
  background: linear-gradient(180deg, #f4f9f1, #fff);
}
.daily-challenge h2 {
  margin: 4px 0 6px;
}
.challenge-done {
  color: var(--green, #246956);
  font-weight: 700;
}

/* ---- Session de révision « objectif brevet » (docs/SPEC_BREVET.md). */
.brevet-invite {
  border: 2px solid var(--green, #246956);
}
.brevet-invite h2 {
  margin: 4px 0 6px;
}
.brevet-countdown {
  margin: 6px 0 10px;
  font-size: 1.05rem;
}
.brevet-countdown strong {
  color: var(--green, #246956);
}
.brevet-papers {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 12px;
}
.brevet-chapters {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.brevet-chapter {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 4px 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e6ece6;
}
.brevet-chapter .note {
  grid-column: 1;
}
.brevet-chapter button {
  grid-row: 1 / span 2;
  grid-column: 2;
}
.brevet-chapter-title {
  font-weight: 650;
}
.brevet-chapter.is-pas-encore-vu .brevet-chapter-title,
.brevet-chapter.is-a-venir .brevet-chapter-title {
  color: var(--muted, #5b6b60);
  font-weight: 500;
}

/* Couverture du programme, dans l'espace d'administration. */
.coverage-chapter {
  margin: 10px 0 14px;
}
.coverage-chapter h4 {
  margin: 0 0 6px;
}
.coverage-row {
  padding: 6px 0;
  border-top: 1px solid var(--line, #dfe6e2);
}
.coverage-row p {
  margin: 2px 0;
}
.coverage-row ul {
  margin: 4px 0 0 18px;
}
.chip.is-missing {
  background: #fdeceb;
  color: #8a1c12;
}
.chip.is-done {
  background: #eef7e9;
  color: #246956;
}

/* Objectif brevet : le niveau d'acquisition, chapitre par chapitre puis d'un coup d'œil. */
.brevet-chapter-head {
  grid-column: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.brevet-bar {
  width: 100%;
  height: 12px;
  margin: 10px 0;
}
.brevet-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 0.92rem;
}
.brevet-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}
.chip.is-solide {
  background: #d9efdc;
  color: #1c5b3a;
}
.chip.is-en-cours {
  background: #e4eefb;
  color: #17456f;
}
.chip.is-fragile {
  background: #fdeceb;
  color: #8a1c12;
}
.chip.is-a-revoir {
  background: #fdf1dc;
  color: #7a4a06;
}
.chip.is-non-travaille {
  background: #eef1ee;
  color: #4a544c;
}

/* Le défi entre amis : l'invitation reçue, puis le verdict à la fin de la partie. */
.defi-invite {
  border-left: 4px solid var(--green);
}
.defi-verdict {
  font-size: 1.15rem;
  margin: 0 0 6px;
}