:root {
  --app-width: 100vw;
  --app-height: 100dvh;
  --app-min-side: 100vmin;
  --app-max-side: 100vmax;
  --viewport-offset-top: 0px;
  --viewport-offset-left: 0px;
  --viewport-scale: 1;
  --stage-width: 1536px;
  --stage-height: 1024px;
  --stage-scale: 1;
  --stage-aspect: 1536 / 1024;
  --stage-ratio: 1.5;
  --stage-inverse-ratio: 0.6667;
  --stage-fit-width: min(100vw, 150vh);
  --stage-fit-height: min(100dvh, 66.6667vw);
  --stage-crop-x: 0px;
  --stage-crop-y: 0px;
  --stage-crop-x-stage: 0px;
  --stage-crop-y-stage: 0px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --device-width: 100vw;
  --device-height: 100dvh;
  --hud-edge: 16px;
  --touch-target-min: 44px;
  --compact-copy-min: 14px;
  --touch-target-stage: 44px;
  --compact-copy-stage: 14px;
  --transition-bg: #03172f;
}

@supports not (height: 100dvh) {
  :root {
    --app-height: 100vh;
    --stage-fit-height: min(100vh, 66.6667vw);
  }
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--transition-bg);
  overscroll-behavior: none;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background-color: var(--transition-bg);
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

.game-viewport-ready,
.game-viewport-ready body {
  width: var(--app-width);
  height: var(--app-height);
  min-height: var(--app-height);
  overflow: hidden;
}

.game-viewport-ready .viewport {
  width: var(--app-width) !important;
  height: var(--app-height) !important;
  min-height: var(--app-height);
  max-height: var(--app-height);
}

.game-viewport-ready.requires-landscape .viewport {
  position: fixed;
  inset: 0;
  display: grid !important;
  place-items: center;
}

.game-viewport-ready.requires-landscape .stage {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: var(--stage-width) !important;
  height: var(--stage-height) !important;
  min-width: var(--stage-width);
  min-height: var(--stage-height);
  max-width: none;
  max-height: none;
  aspect-ratio: var(--stage-aspect) !important;
  transform: translate(-50%, -50%) scale(var(--stage-scale));
  transform-origin: center;
}

/* Several legacy art-directed scenes were authored as a single 1672×941
   widescreen composition. On desktop, preserve that canvas so integrated HUD
   artwork stays aligned; touch devices continue using the shared safe stage. */
.game-viewport-ready.requires-landscape:not(.is-touch):is(
  .page-guide,
  .page-etymology-temple-part1,
  .page-etymology-temple-part1-intro,
  .page-etymology-temple-part1-match,
  .page-etymology-temple-part1-awaken,
  .page-etymology-temple-part2,
  .page-etymology-temple-part2-light,
  .page-etymology-temple-part2-collect,
  .page-etymology-temple-part2-reward,
  .page-etymology-temple-part3,
  .page-etymology-temple-part3-puzzle,
  .page-etymology-temple-part3-reward
) .stage {
  width: min(100vw, 177.68vh) !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  aspect-ratio: 1672 / 941 !important;
  transform: translate(-50%, -50%) !important;
}

.game-viewport-ready.is-mobile-landscape .stage {
  border-radius: 0;
  box-shadow: none;
}

.safe-top-left {
  top: max(12px, var(--safe-top)) !important;
  left: max(12px, var(--safe-left)) !important;
}

.safe-top-right {
  top: max(12px, var(--safe-top)) !important;
  right: max(12px, var(--safe-right)) !important;
}

.safe-bottom-left {
  bottom: max(12px, var(--safe-bottom)) !important;
  left: max(12px, var(--safe-left)) !important;
}

.safe-bottom-right {
  right: max(12px, var(--safe-right)) !important;
  bottom: max(12px, var(--safe-bottom)) !important;
}

.safe-bottom-center {
  bottom: max(12px, var(--safe-bottom)) !important;
}

.game-viewport-ready.is-mobile-landscape .back-button,
.game-viewport-ready.is-mobile-landscape .return-opening,
.game-viewport-ready.is-mobile-landscape .part2-return-button,
.game-viewport-ready.is-mobile-landscape .part3-return-button {
  top: max(1.2%, var(--safe-top)) !important;
  right: max(1%, var(--safe-right)) !important;
  left: auto !important;
}

.game-viewport-ready.is-phone.is-mobile-landscape .stage > .temple-settings-trigger,
.game-viewport-ready.is-phone.is-mobile-landscape .stage > :is(
  .back-button,
  .return-opening,
  .part2-return-button,
  .part3-return-button
) {
  top: 18px !important;
}

.game-viewport-ready.page-guide.is-mobile-landscape .back-button {
  top: max(1.2%, var(--safe-top)) !important;
  right: max(2.2%, var(--safe-right)) !important;
  left: auto !important;
}

.game-viewport-ready.is-mobile-landscape .bgm-toggle-button {
  top: max(2.4%, var(--safe-top)) !important;
  right: max(6.3%, var(--safe-right)) !important;
  z-index: 120 !important;
  display: flex !important;
  width: var(--touch-target-stage) !important;
  min-width: var(--touch-target-stage);
  min-height: var(--touch-target-stage);
  opacity: 1 !important;
  visibility: visible !important;
}

.game-viewport-ready.is-mobile-landscape .pause-button {
  top: max(2.4%, var(--safe-top)) !important;
  right: max(1.3%, var(--safe-right)) !important;
  z-index: 120 !important;
  display: block !important;
  width: var(--touch-target-stage) !important;
  min-width: var(--touch-target-stage);
  min-height: var(--touch-target-stage);
  opacity: 1 !important;
  visibility: visible !important;
}

.game-viewport-ready.is-phone.is-mobile-landscape .bgm-toggle-button,
.game-viewport-ready.is-phone.is-mobile-landscape .pause-button {
  top: 18px !important;
}

.game-viewport-ready.is-mobile-landscape .start-challenge,
.game-viewport-ready.is-mobile-landscape .part2-start-button {
  bottom: max(3.7%, var(--safe-bottom)) !important;
}

.game-viewport-ready.is-phone.is-mobile-landscape :is(.start-challenge, .part2-start-button) {
  bottom: 18px !important;
}

.game-viewport-ready.is-phone.is-mobile-landscape .stage > :is(
  .collect-next-button,
  .reward-next-button
) {
  bottom: 18px !important;
}

.game-viewport-ready.is-phone.is-mobile-landscape :is(.part2-light-stage, .fruit-collect-stage) .temple-settings-trigger {
  right: calc(var(--touch-target-stage) + 20px) !important;
}

.game-viewport-ready.is-phone.is-mobile-landscape :is(.part2-light-stage, .fruit-collect-stage) .part2-return-button {
  right: 0 !important;
}

/* 收集词源果：标题让位给功能信息，按钮避开卡包点击区。 */
.game-viewport-ready.is-phone.is-mobile-landscape .fruit-collect-stage .collect-title-art {
  display: none;
}

.game-viewport-ready.is-phone.is-mobile-landscape .fruit-collect-stage .collect-progress {
  top: 10px;
  right: auto;
  left: 12px;
  width: 13%;
}

.game-viewport-ready.is-phone.is-mobile-landscape .fruit-collect-stage .collect-root-card {
  top: 8px;
  bottom: auto;
}

.game-viewport-ready.is-phone.is-mobile-landscape .fruit-collect-stage .collect-root-card strong {
  font-size: 34px;
}

.game-viewport-ready.is-phone.is-mobile-landscape .fruit-collect-stage .collect-root-card span {
  font-size: 26px;
}

.game-viewport-ready.is-phone.is-mobile-landscape .fruit-collect-stage .collect-next-button {
  right: 25%;
  width: 17%;
}

.game-viewport-ready.is-phone.is-mobile-landscape .fruit-collect-stage.is-complete .collect-feedback {
  top: 8px;
}

.game-viewport-ready.is-phone.is-mobile-landscape .part3-puzzle-stage .temple-settings-trigger {
  right: calc(var(--touch-target-stage) + 20px) !important;
}

.game-viewport-ready.is-phone.is-mobile-landscape .part3-puzzle-stage .part3-return-button {
  right: 0 !important;
}

/* 修复词源卷轴：两列卡片整体收进可视区域，避免底部卡片被截断。 */
.game-viewport-ready.is-phone.is-mobile-landscape .part3-puzzle-stage .match-column {
  top: 60px;
  bottom: 18px;
  height: auto;
}

.game-viewport-ready.is-phone.is-mobile-landscape .part3-puzzle-stage .fragment-counter.compact {
  top: 8px;
  left: 8px;
  width: 200px;
  min-height: 0;
  padding: 6px 10px;
}

.game-viewport-ready.is-phone.is-mobile-landscape .part3-puzzle-stage .fragment-counter.compact img {
  width: 20%;
}

.game-viewport-ready.is-phone.is-mobile-landscape .part3-puzzle-stage .fragment-counter.compact span {
  font-size: 18px;
}

.game-viewport-ready.is-phone.is-mobile-landscape .part3-puzzle-stage .fragment-counter.compact strong {
  font-size: 30px;
}

.game-viewport-ready.is-phone.is-mobile-landscape .part3-puzzle-stage .match-orbit {
  top: 70px;
  height: calc(100% - 110px);
}

/* Controls inside the scaled 1536×1024 scene use inverse-scaled dimensions,
   so their real on-screen hit boxes remain at least 44 CSS pixels. */
.game-viewport-ready:is(.is-touch, .is-phone, .is-tablet).requires-landscape .stage :is(
  .back-button,
  .temple-settings-trigger,
  .bgm-toggle-button,
  .pause-button,
  .return-opening,
  .part2-return-button,
  .part3-return-button,
  .fragment-pagination button,
  .district-page-button,
  .residents-next,
  .expedition-entry,
  .continue-button,
  .map-button
) {
  min-width: var(--touch-target-stage);
  min-height: var(--touch-target-stage);
  touch-action: manipulation;
}

.game-viewport-ready:is(.is-touch, .is-phone, .is-tablet).requires-landscape .stage :is(
  .answer-button,
  .question-nav-button,
  .energy-droplet,
  .district-resident-card,
  .part2-next-button,
  .collect-next-button,
  .reward-next-button,
  .grammar-chapter-card button,
  .start-button,
  .start-challenge,
  .part2-start-button
) {
  min-height: var(--touch-target-stage);
  touch-action: manipulation;
}

.game-viewport-ready:is(.is-touch, .is-phone, .is-tablet).requires-landscape .stage :is(
  .answer-button,
  .question-nav-button,
  .energy-droplet,
  .district-resident-card,
  .fragment-pagination,
  .grammar-chapter-status
) {
  font-size: max(var(--compact-copy-stage), 1em);
}

.game-viewport-ready:is(.is-touch, .is-phone, .is-tablet).requires-landscape .grammar-chapter-card :is(h2, p, button) {
  font-size: max(var(--compact-copy-stage), 1em);
}

.game-viewport-ready.page-guide.is-tablet .back-button {
  top: 2% !important;
  right: 2.2% !important;
  left: auto !important;
  min-width: var(--touch-target-stage);
  min-height: var(--touch-target-stage);
}

.game-viewport-ready.page-guide.is-tablet .profile-panel {
  top: 1.1% !important;
  left: 1.2% !important;
  min-width: calc(var(--touch-target-stage) * 2.7);
  min-height: var(--touch-target-stage);
}

@media (prefers-reduced-motion: reduce) {
  .game-viewport-ready *,
  .game-viewport-ready *::before,
  .game-viewport-ready *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

.mobile-rotate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding:
    max(24px, var(--safe-top))
    max(24px, var(--safe-right))
    max(24px, var(--safe-bottom))
    max(24px, var(--safe-left));
  background:
    radial-gradient(circle at 50% 26%, rgba(13, 143, 255, 0.26), transparent 42%),
    linear-gradient(180deg, rgba(3, 23, 47, 0.96), rgba(2, 10, 24, 0.98));
  color: #ffe9a4;
  text-align: center;
}

.mobile-rotate-card {
  display: grid;
  width: min(84vw, 360px);
  justify-items: center;
  gap: 12px;
  padding: 24px 22px 22px;
  border: 1px solid rgba(255, 233, 164, 0.34);
  border-radius: 20px;
  background: rgba(3, 16, 36, 0.82);
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.42),
    inset 0 0 28px rgba(13, 143, 255, 0.16);
}

.mobile-rotate-icon {
  position: relative;
  width: 54px;
  height: 54px;
  border: 3px solid rgba(255, 233, 164, 0.88);
  border-radius: 13px;
  transform: rotate(90deg);
  box-shadow: 0 0 18px rgba(244, 189, 69, 0.28);
}

.mobile-rotate-icon::after {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 6px;
  height: 6px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.mobile-rotate-card strong {
  display: block;
  color: #fff1b8;
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 900;
  line-height: 1.1;
}

.mobile-rotate-card span {
  display: block;
  max-width: 18em;
  color: rgba(255, 241, 184, 0.84);
  font-size: clamp(13px, 3.8vw, 16px);
  font-weight: 700;
  line-height: 1.45;
}

.game-viewport-ready.is-portrait.requires-landscape:is(.is-phone, .is-tablet) .mobile-rotate-overlay {
  display: flex;
}

/* Shared compact rules for story/map pages. */
.game-viewport-ready.page-guide.is-mobile-compact .profile-panel {
  top: 1%;
  left: 1%;
  width: 21.5%;
  height: 13.5%;
}

.game-viewport-ready.page-guide.is-mobile-compact .profile-user-name {
  font-size: calc(var(--compact-copy-stage) * 1.04);
}

.game-viewport-ready.page-guide.is-phone.is-mobile-landscape .profile-panel,
.game-viewport-ready.page-guide.is-phone.is-mobile-landscape .game-title,
.game-viewport-ready.page-guide.is-phone.is-mobile-landscape .expedition-entry {
  top: 18px !important;
}

.game-viewport-ready.page-guide.is-phone.is-mobile-landscape .resource-bar {
  top: 132px !important;
}

.game-viewport-ready.page-guide.is-mobile-compact .game-title {
  top: 1.8%;
  left: 26.2%;
  width: 24%;
}

.game-viewport-ready.page-guide.is-mobile-compact .mentor {
  left: 1.5%;
  bottom: 0.8%;
  width: 21.5%;
  height: 25%;
}

.game-viewport-ready.page-guide.is-mobile-compact .mentor-role {
  left: 0;
  bottom: 0;
  width: 31%;
}

.game-viewport-ready.page-guide.is-mobile-compact .speech-bubble {
  left: 29%;
  bottom: 7%;
  width: 57%;
}

.game-viewport-ready.page-guide.is-mobile-compact .speech-copy {
  left: 34%;
  bottom: 20.5%;
  width: 46%;
  min-height: 18%;
  gap: 0.05em;
  font-size: clamp(9px, 1.45vmin, 13px);
  line-height: 1.18;
}

.game-viewport-ready.page-guide.is-mobile-compact .scroll-modal {
  top: 50%;
  width: 31.5%;
  height: 86%;
}

.game-viewport-ready.page-guide.is-mobile-compact .scroll-copy {
  left: 19.5%;
  top: 17.5%;
  width: 61%;
  height: 58%;
  overflow: hidden;
}

.game-viewport-ready.page-guide.is-mobile-compact .scroll-copy h1 {
  margin-bottom: 1.5%;
  font-size: clamp(19px, 4.1vmin, 32px);
  line-height: 0.98;
}

.game-viewport-ready.page-guide.is-mobile-compact .scroll-copy p {
  margin-bottom: 0.1%;
  font-size: clamp(8px, 1.9vmin, 14px);
  font-weight: 700;
  line-height: 1.12;
  text-indent: 1.2em;
}

.game-viewport-ready.page-guide.is-mobile-compact .scroll-copy .sign {
  margin-top: 0.7%;
  font-size: clamp(8px, 1.75vmin, 13px);
  line-height: 1.05;
}

.game-viewport-ready.page-guide.is-mobile-compact .journey-button {
  bottom: -4.5%;
  width: 62%;
  min-height: 4.4vmin;
  padding: 0 0.8em;
  font-size: clamp(9px, 1.95vmin, 15px);
  line-height: 1;
  white-space: nowrap;
}

/* Shared compact rules for the trials grid. */
.game-viewport-ready.page-trials.is-mobile-compact .back-button {
  top: 1.2%;
  right: 1%;
  left: auto;
  width: 5.2%;
}

.game-viewport-ready.page-trials.is-mobile-compact .forest-title {
  top: -0.4%;
  width: 39%;
}

.game-viewport-ready.page-trials.is-mobile-compact .trial-grid {
  inset: 12.2% 3.1% 2.4%;
}

.game-viewport-ready.page-trials.is-mobile-compact .trial-card {
  width: 18.6%;
}

.game-viewport-ready.page-trials.is-mobile-compact .status-badge {
  max-width: 84%;
  padding: 0.22em 0.46em;
  font-size: clamp(7px, 1.35vmin, 10px);
  white-space: nowrap;
}

/* 手机横屏舞台放不下两行卡片：改为单行大卡横向滑动，全部内容落在可视区域内。 */
.game-viewport-ready.page-trials.is-phone.is-mobile-landscape .forest-title {
  top: 10px;
  width: 30%;
}

.game-viewport-ready.page-trials.is-phone.is-mobile-landscape .trial-grid {
  top: 150px;
  right: 28px;
  bottom: 24px;
  left: 28px;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 8px;
  gap: 26px;
  -webkit-overflow-scrolling: touch;
}

.game-viewport-ready.page-trials.is-phone.is-mobile-landscape .trial-card {
  position: relative;
  inset: auto;
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  aspect-ratio: 500 / 768;
}

.game-viewport-ready.page-trials.is-phone.is-mobile-landscape .trial-card img {
  width: 100%;
  height: 100%;
}

/* Shared compact rules for level-intro story panels. */
.game-viewport-ready.page-level-intro.is-mobile-compact .back-button {
  top: 1.2%;
  right: 1%;
  left: auto;
  width: 5.2%;
}

.game-viewport-ready.page-level-intro.is-mobile-compact .scroll-panel {
  inset: 3.5% 6% 3.5%;
}

.game-viewport-ready.page-level-intro.is-mobile-compact .scroll-copy {
  width: 58%;
  min-height: 48%;
  padding: 1.4% 2.4% 2%;
}

.game-viewport-ready.page-level-intro.is-mobile-compact .eyebrow {
  margin-bottom: 0.45em;
  font-size: clamp(8px, 1.6vmin, 12px);
}

.game-viewport-ready.page-level-intro.is-mobile-compact .scroll-copy h1 {
  margin-bottom: 0.36em;
  font-size: clamp(18px, 4.2vmin, 30px);
  line-height: 1;
  white-space: nowrap;
}

.game-viewport-ready.page-level-intro.is-mobile-compact .scroll-copy p {
  max-width: 27em;
  font-size: clamp(9px, 1.95vmin, 14px);
  line-height: 1.38;
}

.game-viewport-ready.page-level-intro.is-mobile-compact .start-button {
  min-height: 2.35em;
  margin-top: 1em;
  padding: 0 1.45em;
}

.game-viewport-ready.page-level-intro.is-mobile-compact .btn-text {
  font-size: clamp(12px, 2.6vmin, 18px);
  line-height: 1;
  white-space: nowrap;
}

/* Shared compact rules for the word-study gameplay canvas. */
.game-viewport-ready.page-word-study.is-mobile-compact .bgm-toggle-button {
  top: 18px !important;
  right: calc(var(--touch-target-stage) + 20px) !important;
  width: 3.8%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .pause-button {
  top: 18px !important;
  right: 0 !important;
  width: 3.8%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .hero-image {
  left: -5.5%;
  height: 66%;
  max-width: 36%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .hero-image.is-wrong {
  height: 69%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .npc-image {
  right: 2.2%;
  bottom: 6%;
  height: 62%;
  max-width: 27%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .npc-image.is-fairy {
  right: 4%;
  bottom: 28%;
  height: 43%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .npc-bubble {
  top: 24px;
  left: 26%;
  width: 50%;
  height: 22%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .scene-label {
  top: 4.8%;
  height: 18%;
  font-size: var(--compact-copy-stage);
}

.game-viewport-ready.page-word-study.is-mobile-compact .bubble-copy {
  inset: 24% 10% 10%;
  gap: 1.5%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .bubble-copy p {
  font-size: var(--compact-copy-stage);
  line-height: 1.2;
  -webkit-line-clamp: 1;
}

.game-viewport-ready.page-word-study.is-mobile-compact .bubble-copy strong {
  font-size: calc(var(--compact-copy-stage) * 1.28);
  line-height: 1.15;
}

.game-viewport-ready.page-word-study.is-mobile-compact .answers-panel {
  left: 28%;
  bottom: 30%;
  width: 44%;
  max-height: 13%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .answers {
  gap: 3%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .answer-button {
  min-height: 5.6vmin;
  padding: 5% 4%;
  border-radius: 0.55vmin;
  font-size: calc(var(--compact-copy-stage) * 1.14);
  line-height: 1.05;
}

.game-viewport-ready.page-word-study.is-mobile-compact .answer-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-viewport-ready.page-word-study.is-mobile-compact .question-nav {
  left: 28%;
  bottom: 17.5%;
  width: 44%;
}

.game-viewport-ready.page-word-study.is-mobile-compact .question-nav-button {
  width: 39%;
  min-width: 0;
}

.game-viewport-ready.page-word-study.is-mobile-compact .progress-panel {
  top: 225px;
  left: 34%;
  bottom: auto;
  width: 32%;
  min-height: calc(var(--compact-copy-stage) * 1.55);
  padding: 4px 12px;
  gap: 0.8vmin;
  font-size: var(--compact-copy-stage);
}

.game-viewport-ready.page-word-study.is-mobile-compact .progress-track {
  height: 0.85vmin;
}

/* The success layer now uses a self-contained .success-frame that scales with
   the stage, so the old per-element compact overrides below were removed.
   Only the continue button still needs a compact tweak for touch target size. */
.game-viewport-ready.page-word-study.is-mobile-compact .continue-button {
  top: auto;
  bottom: 18px;
  width: 16%;
  min-width: calc(var(--touch-target-stage) * 2.2) !important;
  min-height: var(--touch-target-stage);
}

/* Shared compact rules for reward/result screens. */
.game-viewport-ready.page-reward.is-mobile-compact .hero-slot {
  left: 0.5%;
  width: 38%;
  height: 83%;
}

.game-viewport-ready.page-reward.is-mobile-compact .info-flow {
  right: 2.4%;
  top: 14px;
  bottom: 14px;
  height: auto;
  width: 57%;
  max-height: none;
  gap: 0.85vmin;
  justify-content: center;
  transform: none;
}

.game-viewport-ready.page-reward.is-mobile-compact .completion-header {
  gap: 1.3vmin;
}

.game-viewport-ready.page-reward.is-mobile-compact .completion-title {
  font-size: calc(var(--compact-copy-stage) * 1.8);
  letter-spacing: 0.12em;
}

.game-viewport-ready.page-reward.is-mobile-compact .star-rating {
  gap: 0.75vmin;
}

.game-viewport-ready.page-reward.is-mobile-compact .star-rating span {
  width: clamp(18px, 4.8vmin, 34px);
}

.game-viewport-ready.page-reward.is-mobile-compact .stat-badges {
  gap: 0.8vmin;
}

.game-viewport-ready.page-reward.is-mobile-compact .stat-badge {
  min-width: 0;
  padding: 0.85vmin 1.25vmin;
  gap: 0.55vmin;
  border-radius: 0.75vmin;
}

.game-viewport-ready.page-reward.is-mobile-compact .stat-badge img {
  width: clamp(14px, 2.9vmin, 20px);
}

.game-viewport-ready.page-reward.is-mobile-compact .stat-label {
  font-size: calc(var(--compact-copy-stage) * 0.8);
}

.game-viewport-ready.page-reward.is-mobile-compact .stat-number {
  font-size: calc(var(--compact-copy-stage) * 1.2);
}

.game-viewport-ready.page-reward.is-mobile-compact .stat-accent {
  font-size: var(--compact-copy-stage);
}

.game-viewport-ready.page-reward.is-mobile-compact .reward-showcase {
  width: calc(var(--compact-copy-stage) * 12);
  max-width: calc(var(--compact-copy-stage) * 12);
}

.game-viewport-ready.page-reward.is-mobile-compact .reward-label {
  font-size: var(--compact-copy-stage);
}

.game-viewport-ready.page-reward.is-mobile-compact .reward-amount {
  font-size: calc(var(--compact-copy-stage) * 1.35);
}

.game-viewport-ready.page-reward.is-mobile-compact .achievement-card {
  width: calc(var(--compact-copy-stage) * 12);
  max-width: calc(var(--compact-copy-stage) * 12);
}

.game-viewport-ready.page-reward.is-mobile-compact .achievement-content {
  inset: 27% 13% 45% 13%;
}

.game-viewport-ready.page-reward.is-mobile-compact .achievement-content p {
  font-size: calc(var(--compact-copy-stage) * 0.78);
  line-height: 1.25;
  white-space: normal;
  text-wrap: balance;
}

.game-viewport-ready.page-reward.is-mobile-compact .map-button {
  width: min(44%, 18vmin);
  min-width: calc(var(--touch-target-stage) * 3) !important;
  min-height: var(--touch-target-stage);
}