/*
 * Premium-light question screens shared by all Swedish modules.
 * Module overview pages are intentionally unaffected.
 */

/*
 * Shared StarPath home logo standard for module/level/quiz pages.
 * This file loads after language-specific module CSS, so it prevents
 * page-specific module overrides from stretching or resizing the logo.
 */
.site-header .module-home-nav {
  position: relative;
  inset: auto;
  width: 58px;
  flex: 0 0 58px;
  margin-right: 20px;
}

.site-header .module-home-button {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  aspect-ratio: 1 / 1;
}

.site-header .module-home-button img,
.site-header .starpath-home-icon img {
  width: 100%;
  height: 100%;
  display: block;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

@media (max-width: 640px) {
  .site-header .module-home-nav {
    width: 48px;
    flex-basis: 48px;
    margin-right: 12px;
  }

  .site-header .module-home-button {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }
}

@media (max-width: 620px) {
  .site-header .module-home-nav {
    width: 40px;
    flex-basis: 40px;
    margin-right: 6px;
  }

  .site-header .module-home-button {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}

body.game-active {
  --quiz-navy: #061a3a;
  --quiz-navy-soft: #17335f;
  --quiz-gold: #e3ad3f;
  --quiz-gold-bright: #ffd66b;
  --quiz-purple: #6555d9;
  position: relative;
  isolation: isolate;
  background: #fffaf0;
  overflow-x: hidden;
}

body.game-active::before {
  content: none;
  display: none;
  background: none;
}

body.game-active::after {
  content: none;
  display: none;
  background: none;
}

body.game-active .site-header {
  width: 100%;
  min-height: 68px;
  height: auto;
  margin: 0;
  padding:
    7px max(18px, calc((100vw - 1120px) / 2))
    8px;
  gap: 16px;
  color: white;
  background: rgba(6, 26, 58, .96);
  border-bottom: 1px solid rgba(255, 214, 107, .24);
  box-shadow: 0 10px 28px rgba(6, 26, 58, .14);
  backdrop-filter: blur(12px);
}

body.game-active .site-header::after {
  content: "✦ · · ·";
  position: absolute;
  right: max(20px, calc((100vw - 1120px) / 2 + 8px));
  bottom: 3px;
  color: rgba(255, 214, 107, .42);
  font-size: 10px;
  letter-spacing: .28em;
  pointer-events: none;
}

body.game-active .site-header .module-home-nav {
  margin-right: 20px;
}

body.game-active .site-header .module-home-button {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 214, 107, .4);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}

body.game-active .site-header .module-header-controls {
  margin-left: auto;
  gap: 10px;
}

body.game-active .site-header .back-swedish-button {
  background: var(--quiz-purple);
  box-shadow: 0 4px 0 #4135a5;
}

body.game-active .site-header .voice-gender-selector {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .2);
}

body.game-active .site-header .voice-gender-selector button {
  color: #e9e6ff;
}

body.game-active .site-header .voice-gender-selector button.active {
  color: #101a37;
  background: var(--quiz-gold-bright);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .2);
}

body.game-active .site-header .sound-button {
  color: white;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .22);
}

body.game-active .voice-status {
  top: calc(100% + 5px);
  right: max(18px, calc((100vw - 1120px) / 2));
}

body.game-active main {
  width: min(880px, calc(100% - 36px));
}

body.game-active .game-screen {
  position: relative;
  max-width: 820px;
  margin: 12px auto 24px;
}

body.game-active .game-screen::before {
  content: none;
  display: none;
}

body.game-active .standard-footer {
  width: 100%;
  min-height: 0;
  margin-top: 0;
  padding: 18px 20px 20px !important;
  color: var(--quiz-navy) !important;
  background: transparent !important;
}

body.game-active .standard-footer .footer-tagline {
  color: #9a6a0a !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

body.game-active .standard-footer .footer-copyright {
  color: rgba(6, 26, 58, .68) !important;
}

body.game-active .game-topbar {
  position: relative;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-bottom: 9px;
  padding: 8px 12px 9px;
  gap: 10px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(227, 173, 63, .28);
  border-radius: 21px;
  box-shadow: 0 12px 32px rgba(12, 35, 73, .08);
  backdrop-filter: blur(7px);
}

body.game-active .game-topbar > div:first-child::before {
  content: none;
  display: none;
}

body.game-active .level-label {
  margin-bottom: 0;
  color: var(--quiz-navy);
  font-size: 15px;
  letter-spacing: .02em;
  text-transform: none;
}

body.game-active .question-count {
  margin-bottom: 4px;
  color: #6655ca;
  font-size: 13px;
}

body.game-active .progress-track {
  position: relative;
  height: 10px;
  padding: 2px;
  background: #e8e5f3;
  border: 1px solid rgba(101, 85, 217, .12);
  box-shadow: inset 0 2px 5px rgba(23, 51, 95, .08);
}

body.game-active .progress-track::after {
  content: "✦        ✦        ✦";
  position: absolute;
  z-index: 2;
  inset: 50% 8px auto;
  color: rgba(255, 255, 255, .88);
  font-size: 7px;
  line-height: 1;
  letter-spacing: .2em;
  text-align: justify;
  text-shadow: 0 1px 3px rgba(76, 55, 153, .28);
  transform: translateY(-50%);
  pointer-events: none;
}

body.game-active #progress-fill {
  background: linear-gradient(90deg, var(--quiz-gold-bright), #dfa83a 35%, #7b65e5 100%);
  box-shadow: 0 0 10px rgba(227, 173, 63, .42);
  transition: width .45s cubic-bezier(.22, .8, .3, 1);
}

body.game-active .score-pill {
  padding: 8px 12px;
  font-size: 18px;
  color: var(--quiz-navy);
  background: #fffaf0;
  border: 1px solid rgba(227, 173, 63, .5);
  box-shadow: 0 8px 18px rgba(12, 35, 73, .08);
}

body.game-active .score-pill span {
  color: #d99b20;
}

body.game-active .question-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 17px 24px 18px;
  background: rgba(255, 252, 245, .975);
  border: 1px solid rgba(227, 173, 63, .66);
  border-radius: 28px;
  box-shadow:
    0 24px 58px rgba(12, 35, 73, .13),
    0 0 34px rgba(227, 173, 63, .075),
    inset 0 1px 0 rgba(255, 232, 171, .7);
}

body.game-active .question-card::after {
  content: none;
  display: none;
}

body.game-active .question-card > * {
  position: relative;
  z-index: 1;
}

body.game-active .picture {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: 8px;
  border-radius: 32px;
  font-size: 78px;
  background: linear-gradient(145deg, #f4f0ff, #fff8df);
  border: 1px solid rgba(227, 173, 63, .48);
  box-shadow:
    0 0 0 7px rgba(255, 214, 107, .12),
    0 10px 24px rgba(23, 51, 95, .08),
    0 0 28px rgba(255, 214, 107, .18);
  animation: pictureFloat 4.5s ease-in-out infinite;
}

body.game-active .picture::before,
body.game-active .picture::after {
  content: "✦";
  position: absolute;
  color: rgba(211, 151, 29, .58);
  font-size: 10px;
  pointer-events: none;
  animation: iconSparkle 3.8s ease-in-out infinite;
}

body.game-active .picture::before {
  top: 8px;
  right: 11px;
}

body.game-active .picture::after {
  left: 10px;
  bottom: 9px;
  font-size: 7px;
  animation-delay: 1.7s;
}

body.game-active .prompt-label {
  margin-bottom: 0;
  color: #6d6a82;
  font-size: 14px;
  line-height: 1.2;
}

body.game-active .swedish-prompt {
  margin-top: 0;
  padding-block: 1px;
  font-size: 34px;
  line-height: 1.05;
}

body.game-active .listen-icon {
  font-size: 19px;
}

body.game-active .flag-question-button {
  margin: 1px auto 7px;
  padding: 5px 11px;
  font-size: 12px;
}

body.game-active .swedish-prompt:hover,
body.game-active .swedish-prompt:focus-visible {
  background: #f3f0ff;
  box-shadow: 0 0 0 3px rgba(101, 85, 217, .12);
}

body.game-active .answer-button {
  min-height: 52px;
  padding: 7px 15px;
  gap: 11px;
  border: 2px solid #d9d3f1;
  border-radius: 20px;
  box-shadow: 0 5px 12px rgba(23, 51, 95, .045);
  transition:
    transform .15s ease,
    border-color .15s ease,
    background .15s ease,
    box-shadow .15s ease;
}

body.game-active .answers {
  gap: 8px;
  margin: 10px 0 7px;
}

body.game-active .answer-button:hover,
body.game-active .answer-button:focus-visible {
  transform: translateY(-2px);
  border-color: #a99ee5;
  box-shadow: 0 9px 20px rgba(63, 49, 139, .1);
  outline: none;
}

body.game-active .answer-button.selected {
  color: #342c86;
  background: #f0edff;
  border-color: var(--quiz-purple);
  box-shadow: 0 0 0 3px rgba(101, 85, 217, .1);
}

body.game-active .answer-button.correct {
  color: #12683f;
  background: #e8f8ef;
  border-color: #36a96f;
  box-shadow: 0 0 0 3px rgba(54, 169, 111, .1);
}

body.game-active .answer-button.wrong {
  color: #9d403e;
  background: #fff0ef;
  border-color: #e77b76;
  box-shadow: 0 0 0 3px rgba(231, 123, 118, .09);
}

body.game-active .answer-letter {
  width: 30px;
  height: 30px;
  color: #4d428f;
  background: #eeeafb;
  border-radius: 11px;
}

body.game-active .feedback {
  position: relative;
  z-index: 20;
  height: 40px;
  min-height: 40px;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: visible;
  white-space: pre-line;
  line-height: 1.25;
  font-size: 14px;
}

body.game-active .feedback.good {
  position: relative;
  z-index: 30;
  width: fit-content;
  height: 40px;
  min-width: 150px;
  margin: 0 auto;
  padding: 4px 13px;
  box-sizing: border-box;
  color: #157348;
  background: linear-gradient(135deg, #fff9df, #fffdf7);
  border: 1px solid rgba(227, 173, 63, .55);
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(134, 91, 12, .1);
  font-size: 12.5px;
  line-height: 1.12;
  transform: translateY(-6px);
  animation: rewardPop 1s ease-out;
}

body.game-active .submit-button {
  min-height: 48px;
  padding-block: 0;
  box-shadow: 0 6px 0 var(--purple-dark);
}

body.game-active .score-pill.reward-pulse {
  animation: starCounterReward 1s ease-out;
}

body.game-active .progress-track.reward-pulse {
  animation: progressReward 1s ease-out;
}

body.game-active .question-card.reward-pulse {
  animation: cardReward 1s ease-out;
}

body.game-active .feedback.good::first-line {
  color: #9c6a00;
}

body.game-active .feedback.good::before,
body.game-active .feedback.good::after {
  content: "✦";
  position: absolute;
  color: #e3ad3f;
  pointer-events: none;
  animation: rewardSparkle 1s ease-out both;
}

body.game-active .feedback.good::before {
  top: -5px;
  left: 13px;
}

body.game-active .feedback.good::after {
  right: 12px;
  bottom: -5px;
  animation-delay: .12s;
}

@keyframes rewardPop {
  0% { opacity: 0; transform: translateY(0) scale(.96); }
  38% { opacity: 1; transform: translateY(-6px) scale(1.035); }
  100% { opacity: 1; transform: translateY(-6px) scale(1); }
}

@keyframes rewardSparkle {
  0% { opacity: 0; transform: scale(.2) rotate(0); }
  42% { opacity: 1; transform: scale(1.35) rotate(80deg); }
  100% { opacity: 0; transform: scale(.7) rotate(150deg); }
}

@keyframes pictureFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes iconSparkle {
  0%, 100% { opacity: .28; transform: scale(.72) rotate(0); }
  50% { opacity: .9; transform: scale(1.12) rotate(70deg); }
}

@keyframes starCounterReward {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 18px rgba(12, 35, 73, .08); }
  38% { transform: scale(1.12) rotate(2deg); box-shadow: 0 0 22px rgba(227, 173, 63, .5); }
}

@keyframes progressReward {
  0%, 100% { box-shadow: inset 0 2px 5px rgba(23, 51, 95, .08); }
  42% { box-shadow: inset 0 2px 5px rgba(23, 51, 95, .08), 0 0 18px rgba(227, 173, 63, .65); }
}

@keyframes cardReward {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.008); }
}

@media (max-width: 700px) {
  body.game-active .site-header {
    min-height: 0;
    padding: 9px 12px 10px;
    flex-wrap: nowrap;
    gap: 3px;
  }

  body.game-active .site-header::after {
    display: none;
  }

  body.game-active .site-header .module-home-nav {
    margin-right: 12px;
  }

  body.game-active .site-header .module-header-controls {
    width: auto;
    min-width: 0;
    margin-left: auto;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: 3px;
  }

  body.game-active .site-header .back-swedish-button {
    width: 92px;
    min-height: 38px;
    padding-inline: 5px;
    font-size: 9px;
    line-height: 1.05;
    text-align: center;
    white-space: normal;
  }

  body.game-active .site-header .sound-button {
    min-width: 62px;
    padding-inline: 6px;
    font-size: 10px;
  }

  body.game-active main {
    width: min(100% - 20px, 880px);
  }

  body.game-active .game-screen {
    margin-top: 20px;
  }

  body.game-active .game-topbar {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 11px;
    gap: 8px 10px;
    border-radius: 18px;
  }

  body.game-active .game-topbar > div:first-child::before {
    font-size: 9px;
    letter-spacing: .08em;
  }

  body.game-active .question-card {
    padding: 25px 16px;
    border-radius: 27px;
  }

  body.game-active .question-card::after {
    right: 10px;
    bottom: 10px;
    font-size: 49px;
  }

  body.game-active .answer-button {
    min-height: 60px;
    padding-inline: 13px;
    border-radius: 17px;
    font-size: 17px;
  }
}

@media (max-width: 390px) {
  body.game-active .game-topbar {
    gap: 8px;
  }

  body.game-active .score-pill {
    padding: 8px 11px;
    font-size: 17px;
  }

  body.game-active .swedish-prompt {
    font-size: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.game-active #progress-fill,
  body.game-active .feedback.good,
  body.game-active .feedback.good::before,
  body.game-active .feedback.good::after,
  body.game-active .picture,
  body.game-active .picture::before,
  body.game-active .picture::after,
  body.game-active .score-pill.reward-pulse,
  body.game-active .progress-track.reward-pulse,
  body.game-active .question-card.reward-pulse {
    transition: none;
    animation: none;
  }

}

@media (max-width: 620px) {
  body.game-active .site-header .module-home-nav {
    margin-right: 6px;
  }
}

/* Shared premium completion result ------------------------------------------------ */
body.result-active {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 214, 107, .2), transparent 28%),
    radial-gradient(circle at 88% 24%, rgba(127, 104, 226, .16), transparent 30%),
    #fffaf0;
}

body.result-active main {
  width: min(900px, calc(100% - 32px));
}

body.result-active .result-screen {
  position: relative;
  isolation: isolate;
  width: min(760px, 100%);
  min-height: 650px;
  margin: 28px auto 54px;
  padding: clamp(30px, 5vw, 48px) clamp(18px, 6vw, 58px) 44px;
  overflow: hidden;
  color: #312b48;
  text-align: center;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .97), rgba(255, 250, 239, .97) 52%, rgba(246, 242, 255, .98));
  border: 1px solid rgba(113, 92, 207, .16);
  border-radius: 38px;
  box-shadow: 0 28px 70px rgba(48, 37, 104, .14);
}

body.result-active .result-screen::before,
body.result-active .result-screen::after {
  position: absolute;
  z-index: -1;
  content: "";
  border-radius: 50%;
  pointer-events: none;
}

body.result-active .result-screen::before {
  width: 280px;
  height: 280px;
  top: -145px;
  right: -95px;
  background: radial-gradient(circle, rgba(255, 211, 92, .3), transparent 68%);
}

body.result-active .result-screen::after {
  width: 330px;
  height: 330px;
  left: -175px;
  bottom: -205px;
  background: radial-gradient(circle, rgba(112, 88, 218, .2), transparent 70%);
}

body.result-active .result-screen > * {
  position: relative;
  z-index: 1;
}

body.result-active .result-screen,
body.result-active .result-screen .starpath-result-card,
body.result-active .result-screen .result-actions,
body.result-active .result-screen .result-actions button {
  box-sizing: border-box;
  max-width: 100%;
}

body.result-active .result-screen .result-mascot {
  width: clamp(112px, 18vw, 164px);
  max-height: 170px;
  margin: 0 auto 2px;
  object-fit: contain;
  filter: drop-shadow(0 16px 14px rgba(59, 42, 131, .16));
}

body.result-active .result-screen .eyebrow {
  margin: 0 0 8px;
  color: #6555d9;
  font-size: clamp(14px, 2vw, 17px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1.45;
  text-transform: none;
}

body.result-active .result-screen h1 {
  margin: 0;
  color: #4e3fbd;
  font-size: clamp(42px, 7vw, 68px);
  line-height: 1.04;
  text-wrap: balance;
}

body.result-active .result-screen .result-message {
  max-width: 590px;
  margin: 14px auto 22px;
  color: #5f5a72;
  font-size: clamp(16px, 2.2vw, 19px);
  font-weight: 800;
  line-height: 1.65;
  white-space: pre-line;
}

body.result-active .result-screen .starpath-result-card {
  position: relative;
  isolation: isolate;
  display: grid;
  width: min(410px, 100%);
  min-width: 0;
  margin: 0 auto 28px;
  padding: 28px 38px 25px;
  overflow: hidden;
  place-items: center;
  gap: 8px;
  color: #352979;
  background:
    radial-gradient(circle at 16% 8%, rgba(255, 213, 72, .22), transparent 35%),
    linear-gradient(145deg, #fffdf8 0%, #fff8e6 48%, #f8f4ff 100%);
  border: 1px solid rgba(113, 92, 207, .2);
  border-radius: 32px;
  box-shadow:
    0 22px 50px rgba(48, 37, 104, .16),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}

body.result-active .result-screen[data-result-state="complete"] .starpath-result-card {
  border-color: rgba(220, 169, 49, .55);
  box-shadow:
    0 24px 54px rgba(48, 37, 104, .17),
    0 0 34px rgba(237, 185, 54, .12),
    inset 0 1px 0 rgba(255, 255, 255, .95);
}

body.result-active .result-screen .starpath-result-card::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .58) 48%, transparent 72%);
  transform: translateX(-120%);
}

body.result-active .result-screen .score-stars {
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #d5d0e2;
  font-size: clamp(30px, 5vw, 38px);
  letter-spacing: 0;
  line-height: 1;
}

body.result-active .starpath-result-star {
  display: inline-block;
  color: #d5d0e2;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .85);
  transform-origin: center bottom;
}

body.result-active .starpath-result-star.is-earned {
  color: #e0a526;
  filter: drop-shadow(0 3px 6px rgba(202, 139, 8, .28));
  text-shadow: 0 0 14px rgba(255, 214, 83, .42);
}

body.result-active .starpath-result-star.is-dimmed {
  color: #d5d0e2;
  filter: none;
}

body.result-active .starpath-result-card strong {
  display: block;
  margin: 2px 0 0;
  color: #352979;
  font: 900 clamp(44px, 8vw, 64px)/1 "Baloo 2", "Nunito", sans-serif;
  letter-spacing: -.03em;
  text-shadow: none;
}

body.result-active .starpath-result-card small {
  display: block;
  color: #6d6682;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body.result-active .result-screen .result-actions {
  display: flex;
  width: min(650px, 100%);
  max-width: 650px;
  margin-inline: auto;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

body.result-active .result-actions button {
  min-height: 52px;
  border-radius: 17px;
}

body.result-active .result-actions .starpath-result-primary {
  order: 0;
  min-width: 180px;
  padding-inline: 24px;
  color: #fff;
  background: linear-gradient(135deg, #6959df, #4d3dc1);
  border-color: transparent;
  box-shadow: 0 6px 0 #3e31a2, 0 14px 28px rgba(76, 57, 178, .18);
}

body.result-active .result-actions .starpath-result-secondary {
  order: 1;
  color: #5444c2;
  background: rgba(255, 255, 255, .92);
  border: 2px solid #d3cdf3;
  box-shadow: 0 7px 18px rgba(60, 45, 128, .08);
}

body.result-active .result-actions button:focus-visible {
  outline: 4px solid rgba(101, 85, 217, .28);
  outline-offset: 3px;
}

body.result-active .result-actions button[hidden],
body.result-active .result-actions button.hidden {
  display: none !important;
}

body.result-active .result-screen.starpath-result-animate .starpath-result-card {
  animation: starpathResultCardIn 320ms cubic-bezier(.2, .85, .3, 1);
}

body.result-active .result-screen.starpath-result-animate .starpath-result-card::before {
  animation: starpathResultShine 520ms ease-out 40ms;
}

body.result-active .result-screen.starpath-result-animate .starpath-result-star {
  animation: starpathResultStarIn 180ms cubic-bezier(.22, .9, .32, 1.25) backwards;
  animation-delay: calc(170ms + var(--star-index) * 80ms);
}

body.result-active .result-screen.starpath-result-animate .starpath-result-primary {
  animation: starpathResultActionIn 150ms ease-out 420ms backwards;
}

@keyframes starpathResultCardIn {
  from { opacity: 0; transform: translateY(9px) scale(.965); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes starpathResultShine {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

@keyframes starpathResultStarIn {
  from { opacity: 0; transform: translateY(7px) scale(.55) rotate(-8deg); }
  to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes starpathResultActionIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 640px) {
  body.result-active {
    overflow-x: hidden;
  }

  body.result-active main {
    width: min(100% - 18px, 900px);
  }

  body.result-active .result-screen {
    min-height: calc(100dvh - 150px);
    margin: 10px auto 28px;
    padding: 28px 14px 34px;
    border-radius: 28px;
  }

  body.result-active .result-screen .result-mascot {
    width: 108px;
  }

  body.result-active .result-screen .result-message {
    width: 100%;
    margin-block: 10px 18px;
  }

  body.result-active .result-screen h1 {
    max-width: 100%;
    font-size: clamp(34px, 10.5vw, 44px);
    overflow-wrap: anywhere;
  }

  body.result-active .result-screen .starpath-result-card {
    width: min(360px, 100%);
    margin-bottom: 22px;
    padding-inline: 24px;
    border-radius: 28px;
  }

  body.result-active .result-screen .result-actions {
    width: 100%;
    flex-direction: column;
  }

  body.result-active .result-screen .result-actions button {
    width: min(360px, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.result-active .result-screen.starpath-result-animate .starpath-result-card,
  body.result-active .result-screen.starpath-result-animate .starpath-result-card::before,
  body.result-active .result-screen.starpath-result-animate .starpath-result-star,
  body.result-active .result-screen.starpath-result-animate .starpath-result-primary {
    animation: none;
  }
}