main.view-kid-count {
  min-height: 100vh;
  background: #fff;
}

body:not(.kid-count-play-mode) main.view-kid-count > :not(.site-header):not(#kid-count-trainer-screen) {
  display: none !important;
}

main.view-kid-count .site-header {
  display: grid !important;
}

body.kid-count-play-mode main.view-kid-count .site-header {
  display: none !important;
}

.trainer-tile-kid-count .trainer-tile-art {
  background-image: linear-gradient(180deg, rgba(16, 19, 24, 0), rgba(16, 19, 24, .16)), url("./kid-count-card.png");
  background-size: cover;
  background-position: center;
}

.trainer-tile-kid-count .trainer-tile-art:before,
.trainer-tile-kid-count .trainer-tile-art:after,
.trainer-tile-kid-count .trainer-tile-art .shape,
.trainer-tile-kid-count .trainer-tile-art b {
  display: none !important;
}

.kid-count-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .42) 0 18%, transparent 42%);
}

.trainer-tile-kid-count .trainer-tile-body strong {
  font-weight: 820;
}

.trainer-age-heading {
  display: grid;
  gap: 6px;
  margin: 18px 0 12px;
}

.trainer-age-heading h2 {
  margin: 0;
  color: var(--ink);
  font-size: 1.45rem;
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: 0;
}

.trainer-age-heading p {
  margin: 0;
  color: var(--muted);
  font-size: .96rem;
  line-height: 1.45;
  font-weight: 650;
}

.trainer-adult-heading {
  margin-top: 0;
}

.trainer-kids-section {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(223, 230, 236, .9);
}

.trainer-kids-heading h2 {
  color: #c9187b;
}

.trainer-kids-grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.trainer-tile-kid-count .trainer-tile-star {
  color: #ff66b7;
  text-shadow: -6px -4px 0 #18c2ba;
}

.kid-count-setup .arithmetic-hero h1:after {
  background: linear-gradient(90deg, #ff55b8 0%, #12c7bf 42%, #37a2f5 68%, #f6b24a 100%);
}

.kid-count-setup .arithmetic-choice-row button.selected {
  border-color: #ff5bbd;
  background: linear-gradient(135deg, #fff0f8, #fbfffe 72%);
  color: #d91c86;
  box-shadow: 0 15px 32px rgba(255, 91, 189, .16);
}

.kid-count-setup .arithmetic-choice-row button:before,
.kid-count-setup .arithmetic-choice-row button:after {
  content: none !important;
  display: none !important;
}

.kid-count-setup .arithmetic-choice-row button em {
  display: none;
  position: absolute;
  right: -4px;
  top: -7px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5bbd, #d91c86);
  place-items: center;
  box-shadow: 0 8px 18px rgba(217, 28, 134, .22);
  font-style: normal;
}

.kid-count-setup .arithmetic-choice-row button em:after {
  content: "";
  position: static;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: translateY(-1px) rotate(42deg);
  transform-origin: center;
}

.kid-count-setup .arithmetic-choice-row button.selected em {
  display: grid;
}

.kid-count-setup .arithmetic-start {
  background: linear-gradient(100deg, #ff55b8 0%, #37a2f5 52%, #05c8bd 100%);
  box-shadow: 0 18px 42px rgba(255, 85, 184, .2);
}

.kid-count-setup .arithmetic-about h2:before {
  border-color: #ff95d1;
  background: #fff4fb;
  color: #d91c86;
  box-shadow: inset 0 0 0 4px rgba(255, 149, 209, .12);
}

.kid-count-brain {
  filter: drop-shadow(0 22px 32px rgba(217, 28, 134, .16));
}

@media (min-width: 721px) {
  .kid-count-setup {
    box-sizing: border-box;
    width: min(1060px, calc(100% - 44px));
    margin: 0 auto;
    padding: 18px 0 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 410px);
    gap: 14px 18px;
    align-items: start;
  }

  .kid-count-setup .arithmetic-back {
    grid-column: 1 / -1;
    justify-self: start;
    min-height: 38px;
  }

  .kid-count-setup .arithmetic-hero {
    grid-column: 1;
    min-height: 0;
    margin: 0;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(112px, 180px);
    align-items: center;
    gap: 14px;
  }

  .kid-count-setup .arithmetic-hero h1 {
    font-size: 3rem;
    line-height: 1;
  }

  .kid-count-setup .arithmetic-hero p:not(.arithmetic-kicker) {
    margin-top: 9px;
    font-size: .95rem;
    line-height: 1.42;
  }

  .kid-count-setup .arithmetic-brain {
    width: min(180px, 100%);
    max-height: 190px;
    object-fit: contain;
  }

  .kid-count-setup .arithmetic-settings-card {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 8px;
    gap: 7px;
  }

  .kid-count-setup .arithmetic-setting {
    gap: 7px;
    margin-top: 12px;
    padding: 22px 24px;
  }

  .kid-count-setup .arithmetic-setting h2 {
    gap: 14px;
    font-size: .86rem;
    line-height: 1.15;
  }

  .kid-count-setup .arithmetic-choice-row {
    gap: 7px;
  }

  .kid-count-setup .arithmetic-choice-row button {
    min-height: 44px;
    padding: 6px 8px;
    gap: 6px;
  }

  .kid-count-setup .arithmetic-choice-row button strong {
    font-size: 1.08rem;
    line-height: 1;
  }

  .kid-count-setup .arithmetic-choice-row button span {
    gap: 5px;
    font-size: .96rem;
  }

  .kid-count-setup .arithmetic-choice-row button span strong {
    font-size: 1.28rem;
  }

  .kid-count-setup .arithmetic-choice-row button.selected span strong {
    font-size: 1.34rem;
  }

  .kid-count-setup .arithmetic-level-row button.selected strong {
    font-size: 1.14rem;
  }

  .kid-count-setup .arithmetic-choice-row button em {
    right: -3px;
    top: -6px;
    width: 20px;
    height: 20px;
  }

  .kid-count-setup .arithmetic-choice-row button em:after {
    width: 5px;
    height: 9px;
    border-width: 0 2px 2px 0;
  }

  .kid-count-setup .arithmetic-start {
    min-height: 50px;
    font-size: 1.08rem;
  }

  .kid-count-setup .arithmetic-about {
    grid-column: 1;
    margin: 0;
    padding: 14px 16px;
    gap: 8px;
  }

  .kid-count-setup .arithmetic-about h2 {
    font-size: 1.08rem;
  }

  .kid-count-setup .arithmetic-about p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.38;
  }
}

@media (min-width: 721px) and (max-width: 900px) {
  .kid-count-setup {
    width: min(100% - 28px, 820px);
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    gap: 12px;
  }

  .kid-count-setup .arithmetic-hero {
    grid-template-columns: minmax(0, 1fr) 118px;
    padding: 14px;
  }

  .kid-count-setup .arithmetic-hero h1 {
    font-size: 2.35rem;
    max-width: calc(100% - 130px);
  }

  .kid-count-setup .arithmetic-hero h1:after {
    width: 196px;
  }

  .kid-count-setup .arithmetic-hero p:not(.arithmetic-kicker) {
    font-size: .86rem;
    line-height: 1.34;
  }

  .kid-count-setup .arithmetic-brain {
    max-height: 132px;
  }

  .kid-count-setup .arithmetic-choice-row button {
    min-height: 42px;
    padding: 5px 7px;
  }

  .kid-count-setup .arithmetic-setting {
    margin-top: 10px;
    padding: 20px 22px;
  }
}

.kid-count-play .play-session i {
  background: linear-gradient(90deg, #ff55b8 var(--session-progress), #e4ebf0 0) !important;
}

.kid-count-play .play-round i {
  background: linear-gradient(90deg, #ff55b8 var(--round-progress), #e4ebf0 0) !important;
}

.kid-count-play .play-history .listen {
  background: #f6b24a;
}

.kid-count-game-actions {
  right: max(8px, calc((100vw - 366px) / 2));
}

body.kid-count-game-paused .kid-count-problem-card,
body.kid-count-game-paused .kid-count-options-grid {
  opacity: .88;
  filter: saturate(.9);
}

body.kid-count-game-paused .kid-count-option {
  pointer-events: none;
}

.kid-count-problem-card {
  border-color: rgba(255, 91, 189, .25);
  background: radial-gradient(circle at 78% 20%, rgba(255, 91, 189, .16), transparent 32%), linear-gradient(180deg, #fff, #fff7fc);
}

.kid-count-play.kid-count-effect-right {
  background: radial-gradient(circle at 50% 44%, rgba(35, 204, 119, .24), transparent 42%), linear-gradient(180deg, #f4fff8, #ffffff 72%);
  box-shadow: inset 0 0 0 2px rgba(35, 204, 119, .16), 0 24px 70px rgba(35, 204, 119, .18);
}

.kid-count-play.kid-count-effect-right .kid-count-problem-card {
  border-color: rgba(35, 204, 119, .5);
  background: radial-gradient(circle at 78% 20%, rgba(35, 204, 119, .24), transparent 32%), linear-gradient(180deg, #f2fff8, #ffffff);
  box-shadow: 0 22px 55px rgba(35, 204, 119, .2);
}

.kid-count-play.kid-count-effect-right .kid-count-problem-card p.show {
  color: #0f8d4c;
}

.kid-count-play.kid-count-effect-wrong .kid-count-problem-card {
  box-shadow: 0 18px 44px rgba(239, 63, 44, .18);
}

.kid-count-problem-card .arithmetic-level-badge {
  background: rgba(255, 91, 189, .1);
  color: #c9187b;
}

.kid-count-problem-card.right {
  background: #f0fbf5;
}

.kid-count-problem-card.wrong {
  background: #ffe6e1;
  border-color: #ef3f2c;
}

.kid-count-problem-card.revealed {
  background: radial-gradient(circle at 78% 20%, rgba(246, 178, 74, .22), transparent 32%), linear-gradient(180deg, #fff, #fffaf0);
  border-color: rgba(246, 178, 74, .42);
}

.kid-count-problem-card.revealed p.show {
  color: #9a6410;
}

.kid-count-options-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.kid-count-option {
  min-height: clamp(72px, 12dvh, 112px);
  font-size: clamp(1.8rem, 5vw, 3rem);
}

.kid-count-hard {
  grid-template-rows: auto auto auto minmax(0, 1fr);
}

.kid-count-hard .kid-count-problem-card {
  min-height: 0;
}

.kid-count-hard .arithmetic-expression {
  font-size: clamp(3.6rem, 16vw, 8rem);
}

.kid-count-results.trainer-results {
  width: min(720px, calc(100% - 24px));
  height: calc(100dvh - 76px);
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  align-content: start;
  gap: 12px;
  padding: 18px 0 14px;
}

.kid-count-results.trainer-results .results-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.kid-count-results.trainer-results .metric {
  padding: 13px;
}

.kid-count-results.trainer-results .metric strong {
  font-size: clamp(1.15rem, 4.8vw, 1.65rem);
  word-break: break-word;
}

.kid-count-results.trainer-results .results-actions {
  gap: 9px;
}

.kid-count-results.trainer-results .results-actions .setup-start,
.kid-count-results.trainer-results .results-actions .secondary {
  min-height: 50px;
}

@media (max-width: 720px) {
  .trainer-age-heading {
    margin: 16px 0 10px;
  }

  .trainer-age-heading h2 {
    font-size: 1.28rem;
  }

  .trainer-kids-section {
    margin-top: 24px;
    padding-top: 20px;
  }

  .trainer-tile-kid-count .trainer-tile-art {
    background-position: center;
  }

  .kid-count-options-grid {
    gap: 8px;
  }

  .kid-count-option {
    min-height: clamp(66px, 12dvh, 96px);
    font-size: clamp(1.55rem, 12vw, 2.7rem);
  }

  .kid-count-setup .arithmetic-choice-row button em {
    right: -3px;
    top: -6px;
    width: 18px;
    height: 18px;
  }

  .kid-count-setup .arithmetic-choice-row button em:after {
    width: 5px;
    height: 9px;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(42deg);
  }

  .kid-count-hard .arithmetic-expression {
    font-size: clamp(3rem, 17vw, 5.4rem);
  }
}

@media (max-width: 430px) {
  .kid-count-results.trainer-results {
    height: calc(100dvh - 64px);
    padding: 12px 0 10px;
    gap: 9px;
  }

  .kid-count-results.trainer-results h1 {
    font-size: 2rem;
  }

  .kid-count-results.trainer-results .results-grid {
    gap: 8px;
  }

  .kid-count-results.trainer-results .metric {
    padding: 10px;
  }

  .kid-count-results.trainer-results .metric span {
    font-size: .66rem;
  }

  .kid-count-results.trainer-results .metric strong {
    margin-top: 5px;
    font-size: 1.18rem;
  }

  .kid-count-results.trainer-results .results-actions .setup-start,
  .kid-count-results.trainer-results .results-actions .secondary {
    min-height: 48px;
  }
}