/* Rounded Hebrew typography and soft, readable play controls. */
:root {
  --font-body: "Varela Round", "Arial Rounded MT Bold", sans-serif;
  --font-play: "Fredoka", "Varela Round", sans-serif;
}
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font-family: inherit; }
h1, h2, h3, strong, b {
  font-family: var(--font-play);
  font-weight: 500;
}
.section-top h2, .catalog-top h2, .friends h2, .how h2,
.membership h2, .card-info h3, .footer-brand {
  font-family: var(--font-play);
  font-weight: 500;
  letter-spacing: 0;
}
.button, .small-button, .quiet-link, .play-button, .filters button,
.stage-button, .parent-link, .voice-button, .welcome-voice,
.music-dock button, .quiz-next, .return-to-game > button {
  font-family: var(--font-play);
  font-weight: 400;
  letter-spacing: 0;
}
.button, .quiz-next, .return-to-game > button { border-radius: 999px; }
.button, .small-button, .parent-link, .return-to-game > button {
  box-shadow: 0 2px 0 #a9b8c42b;
}
.button.primary { box-shadow: 0 2px 0 #71419e38; }
.hero-portal .hero-actions .primary {
  font-family: var(--font-play);
  font-weight: 500;
  box-shadow: 0 3px 0 #bd861c55, inset 0 1px 0 #fff8cb;
}
.hero-portal .quiet-link, .hero-portal .welcome-voice,
.hero-portal .hero-notes { font-weight: 400; }
.hero-portal .welcome-voice { box-shadow: 0 2px 0 #b89ad145; }
.eyebrow, .section-kicker, .membership-tag { font-weight: 400; letter-spacing: 0; }
.stage-button { border-width: 1px; box-shadow: 0 2px 0 #95b9c92e; }
.stage-button:nth-child(n) { box-shadow: 0 2px 0 #9b8cac26; }
.stage-button strong { font-weight: 500; }
.stage-button.active { outline-width: 2px; box-shadow: 0 2px 0 #9864bf30; }
.filters button { min-height: 40px; border-radius: 999px; }
.filters button.active { box-shadow: 0 2px 0 #7040a22e; }
.game-card { border-bottom-width: 2px; box-shadow: 0 3px 10px #497a6810; }
.game-card:nth-child(n) { box-shadow: 0 3px 10px #497a6810; }
.card-info h3 { font-size: 20px; }
.play-button { min-height: 40px; font-size: 14px; }
.friend-card strong, .how-item h3 { font-weight: 500; }
.membership .dark { box-shadow: 0 2px 0 #6a379935; }
.price strong { font-weight: 500; }

/* A compact toolbar leaves the question and answer choices in focus. */
.game-dialog {
  border: 3px solid #fff;
  border-radius: 30px;
  background: #fffefa;
  color: #3c526b;
  box-shadow: 0 18px 75px #21487740;
  font-family: var(--font-body);
}
.game-dialog .game-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid #e9f0f4;
  background: #fffffff5;
  backdrop-filter: blur(10px);
}
.game-dialog .game-header h2 {
  color: #51638c;
  font-family: var(--font-play);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}
.game-header .section-kicker { color: #776a8b; font-size: 11px; }
.game-dialog .game-header .game-tools {
  flex: 0 0 auto;
  gap: 5px;
  grid-column: auto;
}
.game-dialog .game-header .icon-button {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid #e6e5f0;
  background: #f7f7fc;
  color: #7a6b96;
  box-shadow: none;
  font-size: 22px;
}
.game-dialog .game-header .icon-button[aria-pressed="true"] {
  background: #ece5fb;
  color: #664499;
  border-color: #c6b4e2;
  box-shadow: none;
}
.game-dialog .game-ribbon { border-bottom: 0; }
.game-ribbon > div > span {
  color: #41728b;
  font-family: var(--font-play);
  font-size: 18px;
  font-weight: 500;
}
.game-ribbon small { color: #526f7b; font-size: 11px; }
.ribbon-stars { opacity: .7; }
.game-dialog .game-meta {
  align-items: center;
  padding: 12px 24px 7px;
  background: transparent;
}
.game-dialog .game-meta p {
  color: #617184;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
}
.game-dialog .small-button {
  min-height: 44px;
  padding: 7px 13px;
  border: 1px solid #dedfeb;
  border-radius: 999px;
  background: #faf9ff;
  color: #74628e;
  box-shadow: none;
  font-size: 12px;
}
.game-dialog .game-voice-tools {
  gap: 6px;
  align-items: center;
  padding: 2px 24px 12px;
}
.game-dialog .game-voice-tools .voice-button {
  min-height: 44px;
  padding: 6px 12px;
  gap: 6px;
  border: 0;
  border-radius: 999px;
  background: #f2effa;
  box-shadow: none;
  color: #755795;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
}
.game-dialog .voice-button[aria-pressed="true"] {
  background: #e8f5ee;
  color: #386c56;
  box-shadow: none;
}
.game-dialog .voice-button[data-narration="encourage"],
.game-dialog .voice-button[data-narration="break"] {
  background: transparent;
  color: #776287;
}
.game-dialog .game-body {
  padding: 20px 28px 24px;
  min-height: 310px;
  background: radial-gradient(ellipse at 50% 100%, #edf8f46e, transparent 75%);
}
.game-dialog[data-game] .game-body::before { opacity: .025; }
.game-dialog .quiz-progress { gap: 7px; margin-bottom: 17px; }
.game-dialog .quiz-progress span {
  width: 8px;
  height: 8px;
  border: 0;
  background: #e8e2f3;
  box-shadow: none;
}
.game-dialog .quiz-progress span.done { background: #9d80cb; box-shadow: none; }
.game-dialog .quiz-prompt {
  color: #728096;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
}
.game-dialog .quiz-question,
.game-dialog .quiz-question.word-question {
  color: #674d91;
  font-family: var(--font-play);
  font-size: clamp(28px, 4.5vw, 36px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  text-shadow: none;
  margin: 9px 0 22px;
  text-wrap: balance;
}
.game-dialog .quiz-count { gap: 15px; margin: 8px 0 14px; }
.game-dialog .quiz-count .count-star {
  font-size: 43px;
  color: #e8b338;
  text-shadow: 0 1px 0 #c99a37;
  filter: none;
}
.game-dialog .quiz-answers { width: min(400px, 100%); gap: 14px; }
.game-dialog .quiz-answers button {
  position: relative;
  min-height: 76px;
  padding: 12px 18px;
  border: 1px solid #dcd0ee;
  border-radius: 24px;
  background: #f2ecfc;
  color: #68458e;
  box-shadow: 0 2px 0 #b9a0ce45;
  font-family: var(--font-play);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.35;
  opacity: 1;
  transition: transform .15s, background .15s, border-color .15s;
}
.game-dialog .quiz-answers button:nth-child(2) {
  background: #fff4de;
  color: #805c2d;
  border-color: #eaddbf;
  box-shadow: 0 2px 0 #cfb47b45;
}
.game-dialog .quiz-answers button:nth-child(3) {
  background: #edf8f1;
  color: #3d745b;
  border-color: #ccdfd4;
  box-shadow: 0 2px 0 #a5c6b345;
}
.game-dialog .quiz-answers button:nth-child(4) {
  background: #edf6ff;
  color: #47729c;
  border-color: #cedfef;
  box-shadow: 0 2px 0 #9dbac545;
}
.game-dialog .quiz-answers button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #ad91cd;
  background: #f5f0ff;
}
.game-dialog .quiz-answers button:active:not(:disabled) { transform: translateY(1px); }
.game-dialog .quiz-answers button.right {
  background: #e1f5e8;
  border-color: #79b791;
  color: #356a48;
  box-shadow: 0 2px 0 #88b89844;
}
.game-dialog .quiz-answers button.wrong {
  background: #fff1ed;
  border-color: #e6b9ad;
  color: #956354;
  box-shadow: none;
  opacity: 1;
}
.game-dialog .quiz-next {
  min-height: 48px;
  margin-top: 22px;
  padding: 10px 25px;
  border-radius: 999px;
  background: #9270c5;
  box-shadow: 0 2px 0 #7553a235;
  font-family: var(--font-play);
  font-size: 17px;
  font-weight: 400;
}
.game-dialog .game-status {
  min-height: 42px;
  padding: 9px 20px 12px;
  border: 0;
  background: transparent;
  color: #4c7b63;
  font-family: var(--font-play);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.game-dialog .game-status.error { color: #9b6254; }
.game-dialog .game-status.hint { background: #f7f2fc; color: #755b8c; }
.game-dialog .game-bottom { color: #697f8c; font-size: 11px; background: #f4f9fc; }
.game-dialog .sudoku-cell, .game-dialog .sudoku-numbers button {
  font-family: var(--font-play);
  font-weight: 400;
  box-shadow: 0 2px 0 #aa96c63b;
}
.game-dialog .sudoku-cell.given { font-weight: 500; }
.music-dock { box-shadow: 0 3px 14px #66507717; border-color: #e5dcef; }
.music-dock button { font-weight: 400; }

@media (max-width: 480px) {
  .card-info h3 { font-size: 17px; }
  .stage-button strong { font-size: 12px; }
  .stage-button small { font-size: 8px; }
  .filters button { min-height: 40px; font-size: 11px; }
  .game-dialog { width: calc(100% - 14px); border-radius: 24px; }
  .game-dialog .game-header { padding: 11px 13px; gap: 8px; }
  .game-dialog .game-header h2 { font-size: 20px; }
  .game-header .section-kicker { font-size: 10px; }
  .game-dialog .game-header .game-tools { gap: 3px; }
  .game-dialog .game-meta { padding: 11px 16px 5px; gap: 9px; }
  .game-dialog .game-meta p { max-width: none; font-size: 12px; }
  .game-dialog .small-button { padding-inline: 10px; font-size: 11px; }
  .game-dialog .game-voice-tools { padding: 0 16px 10px; gap: 5px; }
  .game-dialog .game-voice-tools .voice-button { padding: 6px 9px; gap: 5px; font-size: 12px; }
  .game-dialog .game-body { padding: 17px 19px 22px; min-height: 285px; }
  .game-dialog .quiz-prompt { font-size: 13px; }
  .game-dialog .quiz-question, .game-dialog .quiz-question.word-question {
    font-size: 28px;
    margin: 8px 0 20px;
    line-height: 1.5;
  }
  .game-dialog .quiz-count .count-star { font-size: 38px; }
  .game-dialog .quiz-answers { max-width: 340px; gap: 12px; }
  .game-dialog .quiz-answers button { min-height: 68px; border-radius: 22px; font-size: 31px; padding: 10px 13px; }
  .game-dialog .quiz-next { font-size: 16px; }
  .game-dialog .game-status { font-size: 14px; }
}
@media (max-width: 350px) {
  .game-dialog .game-header { flex-wrap: wrap; }
  .game-dialog .game-header .game-tools { margin-inline-start: auto; }
  .game-dialog .game-header h2 { font-size: 20px; }
  .game-dialog .quiz-question, .game-dialog .quiz-question.word-question { font-size: 25px; }
  .game-dialog .quiz-answers button { min-height: 64px; font-size: 29px; }
}
@media (prefers-reduced-motion: reduce) {
  .game-dialog .quiz-answers button, .button { transition: none; }
}