:root {
  color-scheme: dark;
  --page-top: #9ED3EA;
  --page-bottom: #6DB7D8;
  --ink: #f8f0d8;
  --accent: #e3b85f;
  --title-bg: url('./assets/ui/title_bg_main_scene_sunny_home_final.jpg?v=1170x2532');
  --bleed-title-bg: var(--title-bg);
  --bleed-river-sunny-bg: url('./assets/game/bridge/river_tile_sunny_topview_loop.jpg');
  --bleed-river-rainy-bg: url('./assets/game/bridge/river_tile_topview_loop.jpg');
  --fail-panel-bg: url('./assets/ui/fail_panel_oldpaper.png');
  --ui-dark-panel: #0b2b2f;
  --ui-dark-overlay: rgb(6 28 31 / 72%);
  --ui-paper: #f3dfaa;
  --ui-paper-light: #f8edc8;
  --ui-paper-text: #6d3f2a;
  --ui-gold: #e8bd55;
  --ui-gold-dark: #a87928;
  --ui-seal-red: #8f2f22;
  --receipt-paper: #ead2a5;
  --receipt-paper-light: #f3dfb8;
  --receipt-border: #8a6a3d;
  --receipt-ink: #4a3320;
}

@font-face {
  font-family: "AchaiQiaopiFont";
  src: url("./assets/fonts/lxgw-wenkai-gb-subset.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overflow: clip;
  overscroll-behavior: none;
  touch-action: none;
  background: var(--page-bottom);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 18%, rgb(198 235 249 / 52%), transparent 38%),
    linear-gradient(180deg, var(--page-top), var(--page-bottom));
}

#game-shell {
  --bleed-bg: var(--bleed-title-bg);
  --bleed-blur: 16px;
  --bleed-size: cover;
  --bleed-opacity: 0.82;
  --bleed-position: center;

  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  overflow: hidden;
  overflow: clip;
  user-select: none;
  -webkit-user-select: none;
  isolation: isolate;
  contain: paint;
  background:
    radial-gradient(circle at 50% 16%, rgb(207 241 250 / 42%), transparent 42%),
    linear-gradient(180deg, var(--page-top), var(--page-bottom));
}

#game-shell::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgb(255 255 255 / 8%), rgb(0 73 96 / 14%)),
    var(--bleed-bg);
  background-repeat: no-repeat;
  background-position: var(--bleed-position);
  background-size: auto, var(--bleed-size);
  opacity: var(--bleed-opacity);
  filter: blur(var(--bleed-blur));
  pointer-events: none;
  transition:
    opacity 240ms ease,
    filter 240ms ease;
}

#game-shell::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgb(12 70 86 / 18%), transparent 22%, transparent 78%, rgb(12 70 86 / 18%)),
    radial-gradient(circle at 50% 105%, rgb(255 244 191 / 10%), transparent 42%);
  pointer-events: none;
}

#game-shell[data-game-state="start"] {
  --bleed-bg: var(--bleed-title-bg);
  --bleed-blur: 18px;
  --bleed-size: cover;
  --bleed-opacity: 0.78;
}

#game-shell[data-game-state="playing"][data-scene-theme="sunny"],
#game-shell[data-game-state="success-animating"][data-scene-theme="sunny"],
#game-shell[data-game-state="fail-animating"][data-scene-theme="sunny"],
#game-shell[data-game-state="success"][data-scene-theme="sunny"],
#game-shell[data-game-state="fail"][data-scene-theme="sunny"] {
  --bleed-bg: var(--bleed-river-sunny-bg);
  --bleed-blur: 5px;
  --bleed-size: cover;
  --bleed-opacity: 0.94;
}

#game-shell[data-game-state="playing"][data-scene-theme="rainy"],
#game-shell[data-game-state="success-animating"][data-scene-theme="rainy"],
#game-shell[data-game-state="fail-animating"][data-scene-theme="rainy"],
#game-shell[data-game-state="success"][data-scene-theme="rainy"],
#game-shell[data-game-state="fail"][data-scene-theme="rainy"] {
  --bleed-bg: var(--bleed-river-rainy-bg);
  --bleed-blur: 5px;
  --bleed-size: cover;
  --bleed-opacity: 0.94;
}

#game-container {
  position: relative;
  z-index: 1;
  width: min(100vw, calc(100vh * 390 / 844));
  height: min(100vh, calc(100vw * 844 / 390));
  width: min(100vw, calc(100dvh * 390 / 844));
  height: min(100dvh, calc(100vw * 844 / 390));
  display: grid;
  place-items: center;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#game-container canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
  overscroll-behavior: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  box-shadow:
    0 18px 60px rgb(0 12 18 / 38%),
    0 0 0 1px rgb(230 199 120 / 10%);
}

.result-action-overlay {
  position: absolute;
  z-index: 82;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.result-action-overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.result-action-button {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  font-size: 1px;
  color: transparent;
  background: transparent;
  border: 0;
  border-radius: 999px;
  opacity: 0.01;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

.result-action-button:active {
  opacity: 0.04;
  background: rgb(255 255 255 / 12%);
}

.result-action-button[hidden],
.result-action-overlay[hidden] {
  display: none !important;
}

.asset-loading-status {
  position: fixed;
  left: 50%;
  bottom: calc(34px + env(safe-area-inset-bottom));
  z-index: 92;
  width: min(320px, calc(100vw - 48px));
  padding: 12px 18px;
  color: #f8e9bd;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
  letter-spacing: 0.06em;
  pointer-events: none;
  background: rgb(8 36 41 / 78%);
  border: 1px solid rgb(226 184 95 / 48%);
  border-radius: 999px;
  box-shadow: 0 12px 32px rgb(0 0 0 / 28%);
  opacity: 1;
  transform: translateX(-50%);
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

.asset-loading-status.is-complete {
  opacity: 0;
  transform: translateX(-50%) translateY(8px);
}

.audio-controls {
  position: fixed;
  z-index: 89;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  display: grid;
  gap: 6px;
  justify-items: end;
  max-width: min(184px, calc(100vw - 24px));
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  pointer-events: none;
  transition: right 180ms ease;
}

#game-shell.is-dev-mode .audio-controls {
  right: calc(72px + env(safe-area-inset-right));
}

.audio-toggle {
  min-width: 76px;
  min-height: 34px;
  padding: 6px 12px;
  color: #f7e9bd;
  font: 700 12px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  letter-spacing: 0.04em;
  cursor: pointer;
  background:
    linear-gradient(180deg, rgb(54 77 68 / 90%), rgb(20 50 54 / 94%));
  border: 1px solid rgb(226 184 95 / 66%);
  border-radius: 999px;
  box-shadow:
    0 8px 22px rgb(0 10 14 / 28%),
    inset 0 0 0 1px rgb(255 244 198 / 8%);
  pointer-events: auto;
  touch-action: manipulation;
}

.audio-toggle[aria-pressed="true"] {
  color: #3c2a18;
  background:
    linear-gradient(180deg, #f2d889, #dcae50);
  border-color: #ffe8a6;
}

.audio-toggle:active {
  transform: translateY(1px) scale(0.98);
}

.audio-toggle:focus-visible {
  outline: 2px solid #fff0b8;
  outline-offset: 2px;
}

.audio-debug-status {
  display: block;
  width: 100%;
  max-width: none;
  padding: 6px 8px;
  color: #f7e9bd;
  font: 600 9px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  text-align: left;
  background: rgb(5 23 29 / 78%);
  border: 1px solid rgb(227 184 95 / 42%);
  border-radius: 8px;
  box-shadow: 0 5px 14px rgb(0 8 12 / 24%);
  pointer-events: none;
}

.audio-debug-status[hidden] {
  display: none;
}

.balance-debug {
  position: absolute;
  z-index: 55;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  width: min(100vw, calc(100dvh * 390 / 844));
  height: min(100dvh, calc(100vw * 844 / 390));
  margin: auto;
  padding: calc(92px + env(safe-area-inset-top)) 4px 4px;
  pointer-events: none;
}

.balance-debug[hidden] {
  display: none;
}

.balance-debug pre {
  max-width: 104px;
  margin: 0;
  padding: 5px 6px;
  color: #f7e9bd;
  font: 600 8px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap;
  background: rgb(5 23 29 / 76%);
  border: 1px solid rgb(227 184 95 / 48%);
  border-radius: 8px;
  box-shadow: 0 5px 14px rgb(0 8 12 / 24%);
}

.qiaopi-overlay,
.asheng-growth-overlay,
.reward-overlay,
.home-stage-overlay,
.ending-overlay,
.postgame-culture-overlay,
.culture-lightbox-overlay {
  position: absolute;
  z-index: 60;
  inset: 0;
  display: grid;
  width: min(100vw, calc(100dvh * 390 / 844));
  height: min(100dvh, calc(100vw * 844 / 390));
  margin: auto;
  overflow: hidden;
  color: #382d25;
  background:
    radial-gradient(circle at 50% 18%, rgb(218 178 107 / 18%), transparent 34%),
    linear-gradient(180deg, rgb(18 42 46 / 98%), rgb(9 27 32 / 99%));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 220ms ease,
    visibility 220ms ease;
}

.qiaopi-overlay::before,
.asheng-growth-overlay::before,
.reward-overlay::before,
.home-stage-overlay::before,
.ending-overlay::before,
.postgame-culture-overlay::before,
.culture-lightbox-overlay::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(115deg, transparent 45%, rgb(255 233 177 / 5%) 50%, transparent 55%),
    repeating-linear-gradient(
      0deg,
      transparent 0 5px,
      rgb(255 255 255 / 1.5%) 6px
    );
  pointer-events: none;
}

.qiaopi-overlay.is-visible,
.asheng-growth-overlay.is-visible,
.reward-overlay.is-visible,
.home-stage-overlay.is-visible,
.ending-overlay.is-visible,
.postgame-culture-overlay.is-visible,
.culture-lightbox-overlay.is-visible {
  display: grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.qiaopi-overlay:not(.is-visible),
.asheng-growth-overlay:not(.is-visible),
.reward-overlay:not(.is-visible),
.home-stage-overlay:not(.is-visible),
.ending-overlay:not(.is-visible),
.postgame-culture-overlay:not(.is-visible),
.culture-lightbox-overlay:not(.is-visible) {
  display: none;
}

.qiaopi-view {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  padding:
    calc(28px + env(safe-area-inset-top))
    22px
    calc(22px + env(safe-area-inset-bottom));
  font-family: "AchaiQiaopiFont", "KaiTi", "STKaiti", serif;
}

.qiaopi-view[hidden] {
  display: none;
}

.qiaopi-envelope-view {
  display: grid;
  grid-template-rows: auto minmax(270px, 1fr) auto auto;
  align-items: center;
  gap: 7px;
}

.qiaopi-header,
.qiaopi-letter-header {
  font-family: "AchaiQiaopiFont", "KaiTi", "STKaiti", serif;
  text-align: center;
}

.qiaopi-kicker {
  margin: 0 0 5px;
  color: #dfc37f;
  font-size: 13px;
  letter-spacing: 0.28em;
}

.qiaopi-header h1,
.qiaopi-letter-header h1 {
  margin: 0;
  color: #f5e8c9;
  font-size: 29px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 8px rgb(0 0 0 / 28%);
}

.qiaopi-amount {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 15px;
  color: #6f3e2c;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: #ead29b;
  border: 1px solid rgb(125 69 42 / 58%);
  border-radius: 999px;
  box-shadow: 0 3px 0 rgb(67 46 36 / 25%);
}

.qiaopi-reward {
  margin: 9px 0 0;
  color: #eadfbf;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 8px rgb(0 0 0 / 24%);
}

.qiaopi-envelope-stage {
  position: relative;
  align-self: center;
  width: 300px;
  height: clamp(292px, 42dvh, 360px);
  margin: 0 auto;
  perspective: 800px;
}

.qiaopi-envelope-stage::after {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 30px;
  width: 238px;
  height: 44px;
  content: "";
  background: rgb(0 13 17 / 35%);
  border-radius: 50%;
  filter: blur(12px);
  transform: translateX(-50%);
}

.qiaopi-envelope-art,
.qiaopi-paper-peek {
  position: absolute;
  left: 50%;
  display: block;
  object-fit: contain;
  transform-origin: 50% 80%;
  will-change: transform, opacity;
}

.qiaopi-envelope-art {
  z-index: 2;
  bottom: 28px;
  width: clamp(250px, 72vw, 286px);
  transform: translateX(-50%) rotate(-1deg);
  filter: drop-shadow(0 16px 18px rgb(0 13 17 / 30%));
}

.qiaopi-paper-peek {
  z-index: 1;
  bottom: 100px;
  width: 148px;
  height: 238px;
  opacity: 0;
  transform: translateX(-50%) translateY(82px) scale(0.7);
  filter: drop-shadow(0 8px 12px rgb(0 13 17 / 28%));
}

.qiaopi-overlay.is-opening .qiaopi-envelope-art {
  animation: envelope-open 900ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.qiaopi-overlay.is-opening .qiaopi-paper-peek {
  animation: paper-rise 900ms cubic-bezier(0.16, 0.82, 0.26, 1) forwards;
}

.qiaopi-overlay.is-letter-opening-immersive .qiaopi-envelope-stage::before {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 140px;
  width: 132px;
  height: 92px;
  content: "";
  background:
    linear-gradient(180deg, rgb(255 246 214 / 85%), rgb(228 203 151 / 32%));
  border-radius: 10px 10px 4px 4px;
  box-shadow: 0 10px 22px rgb(0 13 17 / 18%);
  opacity: 0;
  transform: translateX(-50%) translateY(68px) scale(0.74);
  animation: paper-slip-out 900ms cubic-bezier(0.16, 0.82, 0.26, 1) forwards;
  pointer-events: none;
}

.qiaopi-actions {
  align-self: end;
  text-align: center;
}

.qiaopi-receipt,
.qiaopi-settlement {
  width: min(336px, calc(100% - 10px));
  color: var(--receipt-ink);
  font-family: "AchaiQiaopiFont", "KaiTi", "STKaiti", serif;
  background:
    linear-gradient(105deg, rgb(255 255 255 / 14%), transparent 42%),
    linear-gradient(180deg, var(--ui-paper-light), var(--receipt-paper));
  border: 1px solid var(--receipt-border);
  box-shadow:
    inset 0 0 0 1px rgb(255 246 214 / 52%),
    0 8px 22px rgb(0 15 18 / 24%);
}

.qiaopi-receipt {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px 13px;
  margin: -4px auto 6px;
  padding: 11px 15px;
  border-radius: 12px;
}

.qiaopi-receipt .qiaopi-amount {
  margin: 0;
  padding: 5px 10px;
  font-size: 14px;
  white-space: nowrap;
  background: rgb(255 239 197 / 70%);
  box-shadow: none;
}

.qiaopi-receipt .qiaopi-reward {
  margin: 0;
  color: var(--receipt-ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-shadow: none;
}

.qiaopi-button {
  width: min(252px, 78vw);
  min-height: 58px;
  padding: 12px 24px;
  color: #293e3e;
  font: 700 20px/1 "STKaiti", "KaiTi", "Songti SC", serif;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, #f0cf79, var(--ui-gold));
  border: 1px solid #f5dd9e;
  border-radius: 999px;
  box-shadow:
    0 5px 0 var(--ui-gold-dark),
    0 11px 24px rgb(0 16 20 / 28%);
  cursor: pointer;
  touch-action: manipulation;
}

.qiaopi-button:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 #806443,
    0 7px 16px rgb(0 16 20 / 24%);
}

.qiaopi-button:disabled {
  cursor: default;
  opacity: 0.58;
}

.qiaopi-button-secondary {
  color: #f7ead0;
  background: linear-gradient(180deg, #315f68, #173b44);
  border-color: rgb(245 221 158 / 48%);
  box-shadow:
    0 4px 0 #0b2830,
    0 10px 20px rgb(0 16 20 / 22%);
}

.qiaopi-actions p {
  margin: 12px 0 0;
  color: #d7c9aa;
  font-family: "AchaiQiaopiFont", "KaiTi", "STKaiti", serif;
  font-size: 14px;
  letter-spacing: 0.08em;
}

.asheng-growth-overlay {
  place-items: center;
  padding:
    calc(18px + env(safe-area-inset-top))
    18px
    calc(18px + env(safe-area-inset-bottom));
}

.asheng-growth-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(346px, 100%);
  max-height: calc(100% - 12px);
  padding: 18px 18px 20px;
  overflow: hidden;
  text-align: center;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 20%), transparent 46%),
    linear-gradient(180deg, #f3e3bf, #d8bd83);
  border: 1px solid rgb(120 75 41 / 44%);
  border-radius: 24px;
  box-shadow:
    inset 0 0 0 2px rgb(255 247 214 / 52%),
    0 22px 42px rgb(0 11 14 / 42%);
}

.asheng-growth-card::before {
  position: absolute;
  inset: 10px;
  content: "";
  border: 1px solid rgb(121 76 43 / 28%);
  border-radius: 18px;
  pointer-events: none;
}

.asheng-growth-header,
.asheng-growth-photo-frame,
.asheng-growth-button {
  position: relative;
  z-index: 1;
}

.asheng-growth-kicker {
  margin: 0 0 6px;
  color: #9a6a34;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.asheng-growth-header h1 {
  margin: 0;
  color: #513a26;
  font: 800 25px/1.14 "STKaiti", "KaiTi", "Songti SC", serif;
  letter-spacing: 0.06em;
}

.asheng-growth-photo-frame {
  display: grid;
  min-height: 0;
  margin: 0;
  padding: 9px;
  background: rgb(87 58 35 / 16%);
  border: 1px solid rgb(102 67 40 / 22%);
  border-radius: 18px;
  box-shadow: inset 0 0 18px rgb(72 45 26 / 12%);
}

.asheng-growth-photo {
  display: block;
  width: 100%;
  max-height: min(60dvh, 500px);
  object-fit: contain;
  border-radius: 13px;
  box-shadow: 0 12px 24px rgb(73 42 24 / 28%);
}

.asheng-growth-button {
  width: min(248px, 82%);
  min-height: 54px;
  justify-self: center;
  padding: 12px 22px;
  color: #263c3c;
  font: 800 19px/1 "STKaiti", "KaiTi", "Songti SC", serif;
  letter-spacing: 0.12em;
  background: linear-gradient(180deg, #f3d27b, #dca84e);
  border: 1px solid #f9e1a6;
  border-radius: 999px;
  box-shadow:
    0 5px 0 #927045,
    0 12px 23px rgb(82 48 25 / 26%);
  cursor: pointer;
  touch-action: manipulation;
}

.asheng-growth-button:active {
  transform: translateY(3px);
  box-shadow:
    0 2px 0 #806443,
    0 7px 16px rgb(82 48 25 / 22%);
}

.asheng-growth-button:disabled {
  cursor: default;
  opacity: 0.58;
}

.asheng-growth-overlay.is-final .asheng-growth-card {
  grid-template-rows: auto auto auto;
  max-height: none;
  overflow-y: auto;
  background:
    linear-gradient(135deg, rgb(255 255 255 / 23%), transparent 46%),
    linear-gradient(180deg, #f5e7c8, #dfc48b);
}

.asheng-growth-overlay.is-final {
  align-items: start;
  overflow-y: auto;
}

.asheng-growth-overlay.is-final .asheng-growth-photo-frame {
  place-items: center;
  overflow: visible;
}

.asheng-growth-overlay.is-final .asheng-growth-photo {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.qiaopi-letter-view {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  justify-items: center;
  gap: 8px;
  padding:
    calc(18px + env(safe-area-inset-top))
    16px
    calc(16px + env(safe-area-inset-bottom));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-width: thin;
  scrollbar-color: rgb(227 184 95 / 48%) transparent;
}

.qiaopi-letter-header h1 {
  font-size: 24px;
}

.qiaopi-letter-header .qiaopi-kicker {
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.letter-paper {
  --paper-height: clamp(446px, calc(100dvh - 390px), 508px);
  position: relative;
  width: min(286px, 78vw, calc(var(--paper-height) * 0.607));
  aspect-ratio: 977 / 1610;
  max-height: var(--paper-height);
  margin: 2px auto;
  filter: drop-shadow(0 15px 22px rgb(0 10 14 / 35%));
}

.letter-paper-background {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.letter-columns {
  position: absolute;
  z-index: 1;
  inset: 0;
  color: #4b3428;
  font-family: "AchaiQiaopiFont", "KaiTi", "STKaiti", serif;
  text-shadow: 0 0.4px 0 rgb(255 244 205 / 36%);
  pointer-events: none;
}

.letter-column {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  opacity: 1;
  transform: translateY(0);
}

.letter-columns.is-reading-reveal .letter-column {
  opacity: 0;
  transform: translateY(-7px);
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

.letter-column.is-visible,
.letter-columns.is-reading-reveal .letter-column.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.letter-column-closing {
  color: #5e3b2d;
}

.letter-character {
  display: block;
  height: var(--letter-line-height, 20px);
  font: 500 var(--letter-font-size, 16px) / var(--letter-line-height, 20px) "AchaiQiaopiFont", "KaiTi", "STKaiti", serif;
  text-align: center;
  text-shadow: 0 1px rgb(255 247 218 / 46%);
}

.qiaopi-letter-actions {
  width: 100%;
  padding-top: 0;
}

.qiaopi-letter-actions .qiaopi-button {
  min-height: 52px;
  font-size: 18px;
}

.qiaopi-letter-actions .qiaopi-button:disabled {
  cursor: default;
  opacity: 0.68;
  filter: saturate(0.82);
}

.qiaopi-letter-actions p {
  margin-top: 9px;
}

.qiaopi-settlement {
  position: relative;
  margin: 0 auto;
  padding: 12px 14px 11px;
  border-radius: 13px;
}

.qiaopi-settlement::before,
.qiaopi-settlement::after {
  position: absolute;
  top: 9px;
  width: 18px;
  height: 1px;
  content: "";
  background: rgb(92 62 31 / 42%);
}

.qiaopi-settlement::before {
  left: 13px;
}

.qiaopi-settlement::after {
  right: 13px;
}

.qiaopi-settlement h2 {
  margin: 0 0 8px;
  color: #6b4528;
  font-size: 14px;
  letter-spacing: 0.28em;
  text-align: center;
}

.qiaopi-settlement-primary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
}

.qiaopi-settlement .qiaopi-amount {
  margin: 0;
  padding: 4px 10px;
  color: #673b26;
  font-size: 13px;
  white-space: nowrap;
  background: rgb(255 242 206 / 68%);
  box-shadow: none;
}

.qiaopi-settlement .qiaopi-reward {
  margin: 0;
  color: #5b3b27;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: none;
}

.qiaopi-settlement-summary {
  margin: 8px 0 0;
  color: var(--receipt-ink);
  font-size: 13px;
  line-height: 1.42;
  text-align: center;
}

.qiaopi-emotional-line {
  margin: 4px 0 0;
  color: #78563b;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

.qiaopi-overlay.is-confirming {
  opacity: 0;
  transition-duration: 220ms;
}

.reward-overlay {
  z-index: 66;
  place-items: center;
  padding:
    calc(18px + env(safe-area-inset-top))
    16px
    calc(18px + env(safe-area-inset-bottom));
}

.reward-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  justify-items: center;
  gap: 8px;
  width: min(358px, 100%);
  height: 100%;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-height: 0;
  padding: 16px 13px 14px;
  color: #382d25;
  text-align: center;
  background:
    linear-gradient(125deg, rgb(255 255 255 / 12%), transparent 38%),
    radial-gradient(circle at 50% 24%, rgb(255 246 215 / 72%), transparent 38%),
    linear-gradient(180deg, rgb(247 230 188 / 98%), rgb(214 185 124 / 98%));
  border: 1px solid rgb(121 78 43 / 68%);
  border-radius: 24px;
  box-shadow:
    0 22px 60px rgb(0 12 18 / 42%),
    inset 0 0 0 1px rgb(255 255 255 / 36%);
  overflow: hidden;
}

.reward-card > * {
  min-width: 0;
}

.reward-header {
  width: 100%;
}

.reward-header .qiaopi-kicker {
  margin-bottom: 4px;
  color: var(--ui-seal-red);
  font-size: 12px;
}

.reward-header h1 {
  margin: 0;
  color: #713f2e;
  font-size: clamp(22px, 6.6vw, 29px);
  line-height: 1.25;
  letter-spacing: 0.06em;
}

.reward-level {
  margin: 5px 0 0;
  color: #765a3f;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.reward-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-height: 0;
}

.reward-items[data-count="1"] {
  grid-template-columns: minmax(0, 1fr);
  width: min(276px, 100%);
}

.reward-item {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  padding: 10px 8px 8px;
  background:
    linear-gradient(180deg, rgb(255 245 213 / 70%), rgb(232 207 155 / 70%));
  border: 1px solid rgb(111 72 40 / 42%);
  border-radius: 17px;
  box-shadow:
    0 10px 22px rgb(64 39 20 / 18%),
    inset 0 0 0 1px rgb(255 248 221 / 40%);
}

.reward-item-media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.reward-item-media::after {
  content: "";
  position: absolute;
  inset: 9%;
  z-index: 0;
  background:
    radial-gradient(circle, rgb(255 232 157 / 42%), transparent 64%);
  filter: blur(3px);
  pointer-events: none;
}

.reward-item-image {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 10px 14px rgb(67 42 23 / 22%));
}

.reward-item-image[hidden],
.reward-item-placeholder[hidden] {
  display: none;
}

.reward-item-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 150px;
  padding: 14px 8px;
  color: #79553b;
  font-size: 13px;
  line-height: 1.5;
  background:
    radial-gradient(circle at 50% 38%, rgb(255 246 216 / 82%), transparent 42%),
    repeating-linear-gradient(
      0deg,
      rgb(232 207 155 / 84%) 0 6px,
      rgb(238 217 171 / 84%) 7px
    );
  border: 1px dashed rgb(116 76 42 / 48%);
  border-radius: 12px;
}

.reward-item-label {
  margin: 7px 0 0;
  color: #653e2d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.reward-summary {
  width: 100%;
  min-height: 38px;
  margin: 0;
  color: #62462f;
  font-size: 14px;
  line-height: 1.5;
}

.reward-transition-hint {
  width: 100%;
  min-height: 24px;
  margin: -2px 0 0;
  color: #8a5136;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.04em;
}

.reward-card .qiaopi-button {
  width: min(278px, 100%);
  min-height: 52px;
  padding-inline: 16px;
  font-size: 17px;
}

.home-stage-overlay {
  z-index: 68;
  place-items: center;
  padding:
    calc(18px + env(safe-area-inset-top))
    16px
    calc(18px + env(safe-area-inset-bottom));
}

.home-stage-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  justify-items: center;
  width: min(358px, 100%);
  height: 100%;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  min-height: 0;
  padding: 14px 12px 12px;
  color: #382d25;
  text-align: center;
  background:
    linear-gradient(125deg, rgb(255 255 255 / 12%), transparent 40%),
    linear-gradient(180deg, rgb(246 229 188 / 97%), rgb(214 186 125 / 97%));
  border: 1px solid rgb(121 78 43 / 68%);
  border-radius: 24px;
  box-shadow:
    0 22px 60px rgb(0 12 18 / 42%),
    inset 0 0 0 1px rgb(255 255 255 / 36%);
  overflow: hidden;
}

.home-stage-card > * {
  min-width: 0;
}

.home-stage-header {
  position: relative;
  z-index: 2;
  width: 100%;
}

.home-stage-header .qiaopi-kicker {
  margin-bottom: 3px;
  color: var(--ui-seal-red);
  font-size: 12px;
}

.home-stage-header h1 {
  margin: 0;
  color: #713f2e;
  font-size: clamp(24px, 7vw, 30px);
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.home-stage-level {
  margin: 5px 0 9px;
  color: #765a3f;
  font-size: 12px;
  letter-spacing: 0.12em;
}

.home-stage-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
  background: #66543c;
  border: 1px solid rgb(100 64 35 / 58%);
  border-radius: 17px;
  box-shadow:
    0 12px 25px rgb(50 31 17 / 24%),
    inset 0 0 0 1px rgb(255 244 205 / 24%);
}

.home-stage-overlay.is-final-reunion .home-stage-card {
  grid-template-rows: auto auto auto auto auto auto;
  gap: 7px;
  padding: 13px 12px 12px;
}

.home-stage-overlay.is-final-reunion .home-stage-header .qiaopi-kicker {
  margin-bottom: 2px;
}

.home-stage-overlay.is-final-reunion .home-stage-header h1 {
  font-size: clamp(28px, 8vw, 34px);
  line-height: 1.12;
}

.home-stage-overlay.is-final-reunion .home-stage-level {
  margin: 4px 0 3px;
}

.home-stage-overlay.is-final-reunion .home-stage-media {
  --final-reunion-media-height: min(48dvh, 438px);
  width: min(calc(var(--final-reunion-media-height) * 600 / 1066), 74vw);
  height: var(--final-reunion-media-height);
  aspect-ratio: 600 / 1066;
  background:
    linear-gradient(180deg, rgb(124 92 53 / 92%), rgb(94 72 46 / 92%));
  border-radius: 18px;
}

.home-stage-overlay.is-final-reunion #home-stage-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  filter: brightness(1.05) saturate(1.04);
  opacity: 1;
}

.home-stage-overlay.is-final-reunion .home-highlight-message {
  min-height: 0;
  margin: 0;
}

.home-stage-overlay.is-final-reunion .home-stage-progress {
  margin: 4px 0 0;
  padding: 6px 10px;
}

.home-stage-overlay.is-final-reunion .home-stage-summary {
  min-height: 0;
  margin: 0;
}

.home-stage-overlay.is-final-reunion .home-stage-culture-actions {
  margin-bottom: 5px;
  padding: 8px 9px 9px;
}

.home-stage-overlay.is-final-reunion .home-stage-thanks {
  margin-bottom: 7px;
}

.home-stage-overlay.is-final-reunion .home-stage-card > .qiaopi-button {
  min-height: 48px;
}

.home-stage-overlay.is-level-9-portrait .home-stage-media {
  --level-9-media-height: min(58dvh, 500px);
  align-self: center;
  width: min(calc(var(--level-9-media-height) * 600 / 1066), 78vw);
  height: var(--level-9-media-height);
  aspect-ratio: 600 / 1066;
  background:
    linear-gradient(180deg, rgb(124 92 53 / 92%), rgb(94 72 46 / 92%));
}

.home-stage-overlay.is-level-9-portrait #home-stage-image {
  min-width: 0;
  min-height: 0;
  object-fit: contain;
  object-position: center;
}

#home-stage-image {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  background: #6f5a3e;
  filter: brightness(0.9) saturate(0.92);
  opacity: 0.88;
  transition:
    filter 420ms ease,
    opacity 420ms ease,
    transform 420ms ease;
}

.home-stage-media.is-before-after #home-stage-image {
  filter: brightness(0.82) saturate(0.84);
  opacity: 0.82;
}

.home-stage-media.is-before-after.is-highlight-active #home-stage-image {
  filter: brightness(0.98) saturate(1);
  opacity: 0.94;
  transform: scale(1.008);
}

.home-stage-media.is-before-after.is-home-bright #home-stage-image,
.home-stage-media:not(.is-before-after) #home-stage-image {
  filter: brightness(1.05) saturate(1.04);
  opacity: 1;
  transform: scale(1);
}

.home-highlight-layer,
.home-highlight-spots {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}

.home-highlight-layer {
  opacity: 0;
  transition: opacity 180ms ease;
}

.home-highlight-layer.is-active,
.home-highlight-layer.is-final-warm {
  opacity: 1;
}

.home-highlight-dim {
  position: absolute;
  background: rgb(22 25 20 / var(--home-highlight-dim-opacity, 0.22));
  opacity: 0;
  transition: opacity 180ms ease;
  pointer-events: none;
}

.home-highlight-layer.is-active .home-highlight-dim {
  opacity: 1;
}

.home-highlight-spot {
  position: absolute;
  z-index: 2;
  border: 2px solid rgb(255 232 158 / 94%);
  border-radius: 999px;
  background:
    radial-gradient(
      ellipse,
      rgb(255 224 132 / 44%) 0%,
      rgb(255 224 132 / 18%) 54%,
      rgb(255 221 130 / 0%) 76%
    );
  box-shadow:
    0 0 22px var(--home-highlight-glow, rgb(245 202 92 / 78%)),
    inset 0 0 15px rgb(255 241 184 / 46%);
  transform: translate(-50%, -50%);
  animation:
    homeHighlightPulse 700ms ease-in-out
    var(--home-highlight-pulses, 3) both;
  pointer-events: none;
}

.home-highlight-spot[data-shape="circle"] {
  border-radius: 50%;
}

.home-highlight-layer.is-final-warm .home-highlight-dim {
  opacity: 1;
  background:
    radial-gradient(
      circle at 50% 48%,
      rgb(255 224 151 / 32%),
      rgb(255 202 106 / 10%) 58%,
      transparent 82%
    );
  animation: homeFinalWarm 900ms ease-out both;
}

.home-highlight-message {
  width: 100%;
  min-height: 24px;
  margin: 7px 0 0;
  color: #884a2e;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: translateY(4px);
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.home-highlight-message.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.home-coordinate-debug {
  position: absolute;
  z-index: 5;
  right: 7px;
  bottom: 7px;
  max-width: calc(100% - 14px);
  padding: 6px 8px;
  color: #fff5d5;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.35;
  text-align: left;
  white-space: pre-wrap;
  background: rgb(23 31 32 / 88%);
  border: 1px solid rgb(255 222 143 / 62%);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 28%);
  pointer-events: none;
}

.home-coordinate-debug[hidden] {
  display: none;
}

#home-stage-image[hidden],
.home-stage-placeholder[hidden] {
  display: none;
}

.home-stage-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  width: 100%;
  height: 100%;
  min-height: 360px;
  padding: 32px 26px;
  color: #67462e;
  background:
    radial-gradient(circle at 50% 28%, rgb(255 244 206 / 72%), transparent 34%),
    repeating-linear-gradient(
      0deg,
      rgb(238 216 168 / 98%) 0 7px,
      rgb(234 208 156 / 98%) 8px
    );
}

.home-stage-placeholder::before {
  width: 72px;
  height: 72px;
  margin-bottom: 22px;
  content: "家";
  color: #f5e9ca;
  font-size: 34px;
  line-height: 72px;
  background: #9b4d3e;
  border: 3px double #e5c278;
  border-radius: 50%;
  box-shadow: 0 8px 18px rgb(76 42 24 / 24%);
}

.home-stage-placeholder span {
  font-size: 13px;
  letter-spacing: 0.08em;
}

.home-stage-placeholder strong {
  margin-top: 12px;
  color: #763f2f;
  font-size: 23px;
  line-height: 1.35;
}

.home-stage-placeholder p {
  margin: 13px 0 0;
  font-size: 15px;
  line-height: 1.65;
}

.home-stage-summary {
  width: 100%;
  min-height: 40px;
  margin: 4px 0 8px;
  color: #62462f;
  font-size: 14px;
  line-height: 1.5;
}

.home-stage-progress {
  width: 100%;
  margin: 7px 0 2px;
  padding: 7px 10px;
  color: #7c482d;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-align: center;
  background: rgb(255 239 190 / 62%);
  border: 1px solid rgb(158 105 56 / 24%);
  border-radius: 999px;
}

.home-stage-thanks {
  margin: 2px 0 8px;
  color: #7b402b;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.08em;
}

.home-stage-culture-actions {
  width: 100%;
  margin: 0 0 8px;
  padding: 9px 10px 10px;
  background: rgb(255 242 205 / 54%);
  border: 1px solid rgb(139 87 45 / 22%);
  border-radius: 18px;
}

.home-stage-culture-actions[hidden] {
  display: none;
}

.home-stage-culture-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.home-stage-culture-buttons .qiaopi-button {
  width: 100%;
  min-height: 38px;
  padding: 7px 6px;
  font-size: 12px;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

.home-stage-card .qiaopi-button {
  width: min(252px, 100%);
  min-height: 52px;
  font-size: 18px;
}

.home-stage-card .home-stage-culture-buttons .qiaopi-button {
  width: 100%;
  min-height: 38px;
  padding: 7px 6px;
  font-size: 12px;
  line-height: 1.25;
}

@keyframes homeHighlightPulse {
  0% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(0.96);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }

  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes homeFinalWarm {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ending-overlay {
  z-index: 70;
  place-items: center;
  padding:
    calc(24px + env(safe-area-inset-top))
    24px
    calc(24px + env(safe-area-inset-bottom));
}

.ending-card {
  position: relative;
  z-index: 1;
  width: min(330px, 86vw);
  padding: 34px 24px 28px;
  color: #382d25;
  text-align: center;
  background:
    linear-gradient(125deg, rgb(255 255 255 / 14%), transparent 38%),
    radial-gradient(circle at 50% 0%, rgb(255 230 154 / 42%), transparent 44%),
    linear-gradient(180deg, #f4e3b5, #d8bd78);
  border: 2px solid rgb(121 78 43 / 58%);
  border-radius: 28px;
  box-shadow:
    0 22px 60px rgb(0 12 18 / 42%),
    inset 0 0 0 1px rgb(255 255 255 / 32%);
}

.ending-card h1 {
  margin: 4px 0 18px;
  color: var(--ui-seal-red);
  font-size: 34px;
  letter-spacing: 0.16em;
}

.ending-card .qiaopi-kicker {
  color: #8b5a32;
}

.ending-body {
  margin: 0 auto 26px;
  color: #3c4039;
  font-size: 18px;
  line-height: 1.85;
  letter-spacing: 0.06em;
  white-space: pre-line;
}

.postgame-culture-overlay {
  z-index: 72;
  place-items: center;
  padding:
    calc(18px + env(safe-area-inset-top))
    16px
    calc(18px + env(safe-area-inset-bottom));
}

.postgame-culture-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(366px, 100%);
  max-height: calc(100dvh - 26px);
  padding: 18px 16px 16px;
  color: #3d2f24;
  font-family: "AchaiQiaopiFont", "KaiTi", "STKaiti", serif;
  background:
    linear-gradient(128deg, rgb(255 255 255 / 16%), transparent 42%),
    radial-gradient(circle at 50% 0%, rgb(255 239 181 / 48%), transparent 42%),
    linear-gradient(180deg, #f7e9c4, #ddc381);
  border: 2px solid rgb(126 83 45 / 56%);
  border-radius: 26px;
  box-shadow:
    0 22px 60px rgb(0 12 18 / 44%),
    inset 0 0 0 1px rgb(255 255 255 / 34%);
  overflow: hidden;
}

.postgame-culture-header {
  flex: 0 0 auto;
  text-align: center;
}

.postgame-culture-header h1 {
  margin: 4px 0 12px;
  color: #6d3d2b;
  font-size: clamp(24px, 7vw, 31px);
  line-height: 1.2;
  letter-spacing: 0.08em;
}

.postgame-culture-body {
  min-height: 0;
  padding: 0 4px 2px;
  color: #443525;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: pre-line;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.postgame-culture-body p {
  margin: 0 0 12px;
}

.postgame-culture-note {
  margin-top: 10px;
  padding: 10px 12px;
  color: #6e4a2d;
  font-size: 13px;
  line-height: 1.55;
  background: rgb(255 244 207 / 58%);
  border: 1px solid rgb(144 92 45 / 18%);
  border-radius: 16px;
}

.postgame-culture-archive {
  flex: 1 1 auto;
  min-height: 0;
  padding: 2px 4px 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.postgame-culture-archive[hidden],
.postgame-culture-contact[hidden] {
  display: none;
}

.culture-archive-card {
  margin: 0 0 12px;
  padding: 10px;
  text-align: left;
  background: rgb(255 249 224 / 68%);
  border: 1px solid rgb(125 84 46 / 22%);
  border-radius: 18px;
  box-shadow: 0 8px 18px rgb(83 50 27 / 12%);
}

.culture-archive-card button {
  display: block;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: zoom-in;
}

.culture-archive-card img {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  background: #d5bc7b;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 22%);
}

.culture-archive-card figcaption {
  margin-top: 9px;
}

.culture-archive-card strong {
  display: block;
  color: #704029;
  font-size: 15px;
  line-height: 1.35;
}

.culture-archive-card span {
  display: block;
  margin-top: 4px;
  color: #5f4b36;
  font-size: 13px;
  line-height: 1.55;
}

.postgame-culture-contact {
  padding: 14px 12px;
  text-align: center;
  background: rgb(255 248 222 / 62%);
  border: 1px solid rgb(130 86 43 / 22%);
  border-radius: 18px;
}

.postgame-contact-label {
  margin: 0 0 8px;
  color: #805034;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.postgame-feedback-form {
  width: min(100%, 292px);
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  margin: 8px auto 12px;
  padding: 10px;
  border-radius: 18px;
  background: rgb(255 246 219 / 62%);
  border: 1px solid rgb(154 124 69 / 22%);
}

.postgame-feedback-label {
  text-align: left;
  color: #38585d;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.postgame-feedback-textarea,
.postgame-feedback-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid rgb(56 88 93 / 28%);
  border-radius: 12px;
  outline: none;
  background: rgb(255 252 240 / 94%);
  color: #213d42;
  font: 700 13px/1.45 system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}

.postgame-feedback-textarea {
  min-height: 104px;
  padding: 10px 11px;
  resize: vertical;
}

.postgame-feedback-input {
  height: 38px;
  padding: 0 11px;
}

.postgame-feedback-textarea:focus,
.postgame-feedback-input:focus {
  border-color: rgb(226 184 95 / 92%);
  box-shadow: 0 0 0 3px rgb(226 184 95 / 18%);
}

.postgame-feedback-status {
  min-height: 18px;
  margin: 0;
  color: #315c68;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  white-space: pre-line;
}

.postgame-feedback-status[data-state="error"] {
  color: #8f4a3a;
}

.postgame-feedback-status[data-state="success"] {
  color: #3f7658;
}

.postgame-feedback-privacy {
  margin: 0;
  color: rgb(56 88 93 / 62%);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

.postgame-contact-email {
  display: inline-block;
  color: #1d5961;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.postgame-contact-actions,
.postgame-culture-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.postgame-contact-actions {
  margin-top: 12px;
}

.postgame-culture-actions {
  flex: 0 0 auto;
  margin-top: 12px;
}

.postgame-culture-actions .qiaopi-button,
.postgame-contact-actions .qiaopi-button {
  width: min(146px, 46%);
  min-height: 42px;
  padding-inline: 12px;
  font-size: 14px;
}

@media (max-height: 640px) {
  .postgame-culture-overlay {
    padding:
      calc(8px + env(safe-area-inset-top))
      8px
      calc(8px + env(safe-area-inset-bottom));
  }

  .postgame-culture-card {
    width: min(304px, 100%);
    max-height: calc(100dvh - 12px);
    padding: 12px 10px 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .postgame-culture-header h1 {
    margin: 2px 0 8px;
    font-size: clamp(22px, 6.4vw, 26px);
  }

  .postgame-culture-body {
    padding-inline: 2px;
    font-size: 13px;
    line-height: 1.46;
  }

  .postgame-culture-body p {
    margin-bottom: 7px;
  }

  .postgame-culture-contact {
    padding: 8px 7px;
    border-radius: 15px;
  }

  .postgame-feedback-form {
    gap: 5px;
    margin: 6px auto 8px;
    padding: 8px;
    border-radius: 14px;
  }

  .postgame-feedback-label {
    font-size: 11px;
  }

  .postgame-feedback-textarea {
    min-height: 72px;
    max-height: 72px;
    padding: 7px 8px;
    font-size: 12px;
    line-height: 1.34;
    resize: none;
  }

  .postgame-feedback-input {
    height: 32px;
    padding-inline: 8px;
    font-size: 12px;
  }

  .postgame-feedback-status {
    min-height: 15px;
    font-size: 11px;
  }

  .postgame-feedback-privacy {
    font-size: 9px;
    line-height: 1.32;
  }

  .postgame-contact-email {
    font-size: 13px;
  }

  .postgame-contact-actions {
    margin-top: 8px;
  }

  .postgame-culture-actions {
    margin-top: 8px;
    gap: 6px;
  }

  .postgame-culture-actions .qiaopi-button,
  .postgame-contact-actions .qiaopi-button {
    min-height: 36px;
    font-size: 12px;
  }
}

.postgame-copy-status {
  min-height: 20px;
  margin: 10px 0 0;
  color: #7b402b;
  font-size: 13px;
  font-weight: 800;
}

.culture-lightbox-overlay {
  z-index: 82;
  place-items: center;
  padding:
    calc(18px + env(safe-area-inset-top))
    14px
    calc(18px + env(safe-area-inset-bottom));
  background: rgb(7 18 21 / 88%);
}

.culture-lightbox-card {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  justify-items: center;
  width: min(370px, 100%);
  max-height: calc(100dvh - 32px);
  margin: 0;
  padding: 14px;
  color: #f8ebca;
  text-align: center;
  background: rgb(27 42 43 / 94%);
  border: 1px solid rgb(236 198 118 / 48%);
  border-radius: 22px;
  box-shadow: 0 22px 60px rgb(0 0 0 / 52%);
}

.culture-lightbox-card img {
  display: block;
  max-width: 100%;
  max-height: min(68dvh, 640px);
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgb(0 0 0 / 34%);
}

.culture-lightbox-card figcaption {
  color: #f6e0a8;
  font-family: "AchaiQiaopiFont", "KaiTi", "STKaiti", serif;
  font-size: 14px;
  line-height: 1.5;
}

.home-resume-overlay,
.challenge-chance-overlay,
.decision-overlay {
  position: fixed;
  inset: 0;
  z-index: 96;
  display: grid;
  place-items: center;
  padding:
    calc(20px + env(safe-area-inset-top))
    calc(18px + env(safe-area-inset-right))
    calc(20px + env(safe-area-inset-bottom))
    calc(18px + env(safe-area-inset-left));
  overflow: auto;
  font-family: "STKaiti", "KaiTi", "Songti SC", serif;
  background:
    radial-gradient(circle at 50% 22%, rgb(226 184 95 / 18%), transparent 42%),
    rgb(4 24 30 / 84%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.decision-overlay.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.decision-card {
  width: min(338px, calc(100vw - 36px));
  max-height: min(720px, calc(100dvh - 40px));
  padding: 30px 25px 24px;
  overflow: auto;
  color: #2e4648;
  text-align: center;
  background:
    linear-gradient(rgb(255 250 230 / 90%), rgb(244 224 177 / 92%)),
    #f4e0b1;
  border: 3px solid rgb(231 197 121 / 94%);
  border-radius: 28px;
  box-shadow:
    0 18px 55px rgb(0 0 0 / 42%),
    inset 0 0 0 2px rgb(117 77 38 / 18%);
}

.decision-kicker {
  margin: 0 0 7px;
  color: #9a6334;
  font: 700 13px/1.3 system-ui, sans-serif;
  letter-spacing: 0.16em;
}

.decision-card h1 {
  margin: 0;
  color: #583b28;
  font-size: clamp(25px, 7vw, 31px);
  line-height: 1.2;
}

.decision-message {
  max-width: 270px;
  margin: 18px auto 20px;
  font-size: 17px;
  line-height: 1.65;
  white-space: pre-line;
}

.decision-actions {
  display: grid;
  gap: 10px;
}

.decision-button {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  color: #f7ebc8;
  font: 700 15px/1.25 system-ui, sans-serif;
  background: #173d45;
  border: 1px solid rgb(226 184 95 / 62%);
  border-radius: 999px;
  box-shadow: 0 5px 0 rgb(7 28 33 / 35%);
  cursor: pointer;
  touch-action: manipulation;
}

.decision-button:active {
  transform: translateY(2px);
  box-shadow: 0 3px 0 rgb(7 28 33 / 35%);
}

.decision-button-primary {
  color: #17363d;
  background: #edc363;
  border-color: rgb(255 246 211 / 72%);
}

.decision-button-danger {
  color: #fff0dc;
  background: #8e4d3d;
}

.decision-button-quiet {
  min-height: 38px;
  color: #31545b;
  background: transparent;
  border-color: rgb(49 84 91 / 30%);
  box-shadow: none;
}

.decision-button[hidden] {
  display: none;
}

.challenge-chance-message {
  margin-bottom: 10px;
}

.challenge-countdown {
  min-height: 30px;
  margin: 0 0 15px;
  color: #8e4d3d;
  font: 700 15px/1.45 system-ui, sans-serif;
  white-space: pre-line;
}

@media (max-width: 340px), (max-height: 620px) {
  .decision-overlay {
    align-items: start;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-bottom: max(10px, env(safe-area-inset-bottom));
  }

  .decision-card {
    max-height: calc(100dvh - 20px);
    padding: 20px 18px 18px;
    border-radius: 22px;
  }

  .decision-message {
    margin: 11px auto 13px;
    font-size: 15px;
    line-height: 1.48;
  }

  .decision-actions {
    gap: 7px;
  }

  .decision-button {
    min-height: 42px;
    padding: 8px 12px;
    font-size: 13px;
  }
}

.share-challenge-overlay {
  position: absolute;
  z-index: 88;
  inset: 0;
  display: grid;
  place-items: center;
  width: min(100vw, calc(100dvh * 390 / 844));
  height: min(100dvh, calc(100vw * 844 / 390));
  margin: auto;
  padding:
    calc(22px + env(safe-area-inset-top))
    22px
    calc(22px + env(safe-area-inset-bottom));
  color: #382d25;
  background: rgb(5 18 23 / 74%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    visibility 180ms ease;
}

.share-challenge-overlay.is-visible {
  display: grid;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.share-challenge-overlay:not(.is-visible) {
  display: none;
}

.share-challenge-card {
  width: min(330px, 88vw);
  padding: 25px 20px 22px;
  text-align: center;
  background:
    linear-gradient(125deg, rgb(255 255 255 / 16%), transparent 42%),
    linear-gradient(180deg, #f5e7bd, #d5bc7a);
  border: 2px solid rgb(121 78 43 / 58%);
  border-radius: 24px;
  box-shadow:
    0 20px 58px rgb(0 12 18 / 42%),
    inset 0 0 0 1px rgb(255 255 255 / 32%);
}

.share-challenge-card h1 {
  margin: 2px 0 10px;
  color: #315c68;
  font-size: 25px;
  letter-spacing: 0.1em;
}

.share-challenge-status {
  margin: 0 auto 14px;
  color: #68472d;
  font: 700 14px/1.55 system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
}

.share-challenge-text {
  width: 100%;
  min-height: 158px;
  padding: 13px 14px;
  color: #243c42;
  font: 700 15px/1.62 system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  resize: none;
  background: rgb(255 248 222 / 84%);
  border: 1px solid rgb(121 78 43 / 38%);
  border-radius: 16px;
  outline: none;
  box-shadow: inset 0 2px 10px rgb(81 56 31 / 12%);
}

.share-challenge-actions {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 16px;
}

.share-challenge-actions .qiaopi-button {
  min-height: 46px;
  font-size: 16px;
}

.dev-panel-root {
  position: fixed;
  z-index: 90;
  top: calc(10px + env(safe-area-inset-top));
  right: calc(10px + env(safe-area-inset-right));
  width: min(206px, calc(100vw - 20px));
  color: #f8f0d8;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
  pointer-events: none;
}

.dev-panel-root.hidden {
  display: none;
}

.dev-panel-toggle {
  display: block;
  width: 52px;
  min-height: 34px;
  margin-left: auto;
  color: #f8f0d8;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgb(9 28 36 / 82%);
  border: 1px solid rgb(227 184 95 / 72%);
  border-radius: 999px;
  box-shadow: 0 8px 20px rgb(0 10 14 / 28%);
  pointer-events: auto;
}

.dev-panel {
  display: grid;
  gap: 7px;
  max-height: calc(100vh - 96px);
  max-height: min(74dvh, 620px);
  margin-top: 7px;
  padding: 10px;
  overflow-y: auto;
  color: #f7ead0;
  background: rgb(6 23 30 / 88%);
  border: 1px solid rgb(227 184 95 / 55%);
  border-radius: 14px;
  box-shadow:
    0 18px 38px rgb(0 9 12 / 44%),
    inset 0 0 0 1px rgb(255 255 255 / 8%);
  backdrop-filter: blur(7px);
  pointer-events: auto;
  touch-action: pan-y;
}

.dev-panel.hidden {
  display: none;
}

.dev-panel-title {
  color: #ffe2a0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.dev-panel-current,
.dev-panel-label {
  color: #d4e5df;
  font-size: 11px;
  line-height: 1.35;
}

.dev-level-grid,
.dev-failure-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.dev-failure-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dev-tuning-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
}

.dev-panel button {
  min-height: 30px;
  color: #f9efd3;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  background: rgb(43 87 93 / 86%);
  border: 1px solid rgb(185 219 209 / 25%);
  border-radius: 8px;
}

.dev-panel button:active,
.dev-panel-toggle:active {
  transform: translateY(1px);
}

.dev-level-grid button.is-active {
  color: #3a2a18;
  background: #e8bd62;
  border-color: #fff0bb;
}

.dev-panel button:not(.is-active):hover,
.dev-panel-toggle:hover {
  background: rgb(59 109 116 / 92%);
}

.dev-panel #dev-complete-level {
  color: #2b2117;
  background: #e2b85f;
  border-color: #f8df95;
}

.dev-panel #dev-return-home {
  color: #d6e9e2;
  background: rgb(21 48 56 / 88%);
}

@keyframes envelope-open {
  0% {
    transform: translateX(-50%) rotate(-2deg) scale(1);
  }

  48% {
    transform: translateX(-50%) rotate(3deg) scale(1.06);
  }

  100% {
    transform: translateX(-50%) translateY(28px) rotate(-1deg) scale(0.96);
  }
}

@keyframes paper-rise {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(72px) scale(0.74);
  }

  30% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(-54px) scale(1);
  }
}

@keyframes paper-slip-out {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(68px) scale(0.72) rotate(-1deg);
  }

  38% {
    opacity: 0.72;
    transform: translateX(-50%) translateY(16px) scale(0.88) rotate(1.5deg);
  }

  100% {
    opacity: 0.9;
    transform: translateX(-50%) translateY(-42px) scale(1) rotate(0deg);
  }
}

@keyframes deliveryBadgeIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes column-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.orientation-hint {
  position: fixed;
  z-index: 10;
  inset: auto 50% calc(14px + env(safe-area-inset-bottom)) auto;
  display: none;
  width: min(88vw, 440px);
  padding: 10px 18px;
  color: #17363d;
  text-align: center;
  background: rgb(248 240 216 / 94%);
  border: 1px solid rgb(227 184 95 / 72%);
  border-radius: 999px;
  box-shadow: 0 8px 26px rgb(0 20 25 / 24%);
  transform: translateX(50%);
  pointer-events: none;
}

.orientation-hint strong,
.orientation-hint span {
  display: block;
}

.orientation-hint strong {
  font-size: 15px;
  letter-spacing: 0.08em;
}

.orientation-hint span {
  margin-top: 2px;
  font-family: system-ui, sans-serif;
  font-size: 11px;
}

noscript {
  position: fixed;
  z-index: 20;
  inset: 50% auto auto 50%;
  padding: 16px 20px;
  color: #183f4b;
  background: #f8f0d8;
  border-radius: 14px;
  transform: translate(-50%, -50%);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (orientation: landscape) and (max-height: 600px) and (pointer: coarse) {
  .orientation-hint {
    display: block;
  }
}

@media (max-height: 760px) {
  .qiaopi-envelope-view {
    grid-template-rows: auto minmax(236px, 1fr) auto auto;
    gap: 5px;
  }

  .qiaopi-envelope-stage {
    height: clamp(236px, 38dvh, 304px);
  }

  .qiaopi-envelope-art {
    width: clamp(224px, 68vw, 258px);
  }

  .qiaopi-letter-view {
    gap: 7px;
    padding-top: calc(14px + env(safe-area-inset-top));
  }

  .letter-paper {
    --paper-height: clamp(390px, calc(100dvh - 350px), 472px);
  }

  .qiaopi-letter-actions p {
    display: none;
  }

  .reward-card {
    gap: 6px;
    padding-top: 12px;
  }

  .reward-item {
    padding: 6px 5px;
  }

  .reward-item-placeholder {
    min-height: 0;
  }

  .reward-summary {
    min-height: 0;
    font-size: 13px;
  }

  .home-stage-placeholder {
    min-height: 0;
  }

  .home-highlight-message {
    min-height: 20px;
    margin-top: 4px;
    font-size: 13px;
  }

  .home-stage-summary {
    margin-top: 2px;
    font-size: 12px;
  }
}

@media (max-width: 340px) {
  .dev-panel-root {
    right: calc(6px + env(safe-area-inset-right));
    width: min(188px, calc(100vw - 12px));
  }

  .dev-panel {
    gap: 5px;
    max-height: min(70dvh, 500px);
    padding: 8px;
  }

  .dev-panel button {
    min-height: 28px;
    font-size: 11px;
  }
}

@media (max-width: 360px) and (max-height: 640px) {
  .qiaopi-view {
    padding:
      calc(10px + env(safe-area-inset-top))
      12px
      calc(10px + env(safe-area-inset-bottom));
  }

  .qiaopi-envelope-view {
    grid-template-rows: auto minmax(196px, 1fr) auto auto;
    gap: 4px;
  }

  .qiaopi-envelope-stage {
    width: 258px;
    height: clamp(206px, 36dvh, 244px);
  }

  .qiaopi-envelope-art {
    width: clamp(204px, 63vw, 232px);
  }

  .qiaopi-paper-peek {
    bottom: 82px;
    width: 112px;
    height: 182px;
  }

  .qiaopi-header h1,
  .qiaopi-letter-header h1 {
    font-size: 21px;
    letter-spacing: 0.08em;
  }

  .qiaopi-kicker,
  .qiaopi-letter-header .qiaopi-kicker {
    margin-bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }

  .qiaopi-letter-view {
    gap: 3px;
    grid-template-rows: auto auto auto auto;
    padding-top: calc(6px + env(safe-area-inset-top));
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }

  .letter-paper {
    --paper-height: clamp(300px, calc(100dvh - 250px), 330px);
    width: min(220px, 70vw, calc(var(--paper-height) * 0.607));
    margin-block: 0;
  }

  .qiaopi-settlement {
    width: min(292px, 100%);
    padding: 5px 8px;
  }

  .qiaopi-settlement h2 {
    display: none;
  }

  .qiaopi-settlement-primary {
    gap: 5px;
  }

  .qiaopi-settlement .qiaopi-amount,
  .qiaopi-settlement .qiaopi-reward,
  .qiaopi-settlement-summary {
    font-size: 11px;
    line-height: 1.32;
  }

  .qiaopi-emotional-line {
    display: none;
  }

  .qiaopi-button,
  .qiaopi-letter-actions .qiaopi-button,
  .reward-card .qiaopi-button,
  .home-stage-card .qiaopi-button {
    min-height: 42px;
    padding-block: 7px;
    font-size: 16px;
  }

  .reward-overlay,
  .home-stage-overlay {
    padding:
      calc(10px + env(safe-area-inset-top))
      10px
      calc(10px + env(safe-area-inset-bottom));
  }

  .reward-card,
  .home-stage-card {
    max-height: calc(100dvh - 16px);
    padding: 10px;
  }

  .reward-header h1,
  .home-stage-header h1 {
    font-size: 22px;
  }

  .reward-level,
  .home-stage-level,
  .reward-header .qiaopi-kicker,
  .home-stage-header .qiaopi-kicker {
    margin-top: 2px;
    font-size: 10px;
  }

  .reward-items {
    gap: 6px;
  }

  .reward-item {
    padding: 5px 4px;
    border-radius: 13px;
  }

  .reward-item-label,
  .reward-summary,
  .reward-transition-hint,
  .home-stage-progress,
  .home-stage-summary {
    min-height: 0;
    font-size: 11px;
    line-height: 1.38;
  }

  .home-stage-progress {
    margin-top: 4px;
    padding: 5px 8px;
  }

  .home-stage-media {
    border-radius: 13px;
  }

  .home-stage-overlay.is-final-reunion .home-stage-card {
    gap: 5px;
    padding: 9px;
  }

  .home-stage-overlay.is-final-reunion .home-stage-header h1 {
    font-size: 25px;
  }

  .home-stage-overlay.is-final-reunion .home-stage-media {
    --final-reunion-media-height: min(42dvh, 360px);
    width: min(calc(var(--final-reunion-media-height) * 600 / 1066), 70vw);
    border-radius: 14px;
  }

  .home-stage-overlay.is-final-reunion .home-stage-culture-actions {
    padding: 7px 8px;
  }

  .home-stage-overlay.is-final-reunion .home-stage-card > .qiaopi-button {
    min-height: 44px;
    font-size: 16px;
  }

  .home-stage-overlay.is-level-9-portrait .home-stage-media {
    --level-9-media-height: min(56dvh, 470px);
    width: min(calc(var(--level-9-media-height) * 600 / 1066), 74vw);
    border-radius: 14px;
  }

  .home-highlight-message {
    min-height: 18px;
    margin-top: 3px;
    font-size: 12px;
  }

  .ending-card {
    width: min(328px, calc(100vw - 28px));
    padding: 28px 26px 30px;
  }

  .ending-card h1 {
    font-size: 30px;
  }

  .ending-body {
    font-size: 16px;
    line-height: 1.75;
  }
}

@media (max-width: 360px) {
  .audio-controls {
    top: calc(8px + env(safe-area-inset-top));
    right: calc(8px + env(safe-area-inset-right));
  }

  #game-shell.is-dev-mode .audio-controls {
    right: calc(64px + env(safe-area-inset-right));
  }

  .audio-toggle {
    min-width: 70px;
    min-height: 32px;
    padding-inline: 10px;
    font-size: 11px;
  }

  .qiaopi-view {
    padding-inline: 16px;
  }

  .asheng-growth-overlay {
    padding:
      calc(10px + env(safe-area-inset-top))
      10px
      calc(10px + env(safe-area-inset-bottom));
  }

  .asheng-growth-card {
    width: min(318px, 100%);
    gap: 8px;
    padding: 13px 13px 15px;
    border-radius: 20px;
  }

  .asheng-growth-header h1 {
    font-size: 21px;
  }

  .asheng-growth-kicker {
    font-size: 12px;
  }

  .asheng-growth-photo-frame {
    padding: 7px;
    border-radius: 15px;
  }

  .asheng-growth-photo {
    max-height: min(56dvh, 360px);
    border-radius: 11px;
  }

  .asheng-growth-button {
    width: min(214px, 86%);
    min-height: 48px;
    font-size: 17px;
  }

  .qiaopi-header h1 {
    font-size: 25px;
  }

  .qiaopi-kicker {
    font-size: 11px;
  }

  .qiaopi-receipt {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 9px 12px;
    text-align: center;
  }

  .qiaopi-button {
    min-height: 52px;
    font-size: 18px;
  }

  .reward-overlay,
  .home-stage-overlay {
    padding-inline: 12px;
  }

  .reward-card,
  .home-stage-card {
    border-radius: 20px;
  }

  .reward-items {
    gap: 8px;
  }

  .reward-item-label,
  .reward-summary,
  .home-stage-summary {
    font-size: 12px;
  }

  .home-coordinate-debug {
    max-width: min(172px, calc(100% - 14px));
    font-size: 9px;
  }
}

@media (max-width: 360px) and (max-height: 640px) {
  .qiaopi-view {
    padding-inline: 12px;
  }

  .asheng-growth-card {
    gap: 6px;
    padding-block: 11px 13px;
  }

  .asheng-growth-photo {
    max-height: min(52dvh, 300px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .orientation-hint {
    transition: none;
  }

  .qiaopi-overlay,
  .asheng-growth-overlay,
  .reward-overlay,
  .home-stage-overlay,
  .ending-overlay,
  .asheng-growth-card,
  .qiaopi-envelope-art,
  .qiaopi-paper-peek,
  .letter-column {
    transition: none;
    animation-duration: 1ms;
    animation-delay: 0ms;
  }

  .home-highlight-layer,
  .home-highlight-dim,
  .home-highlight-message,
  .home-highlight-spot {
    transition: none;
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}