:root {
  --wine: #8f2638;
  --wine-deep: #5b1f29;
  --pink-top: #f49aa4;
  --pink-bottom: #df6176;
  --pink-deep-top: #d85f7d;
  --pink-deep-bottom: #a52f53;
  --cream: #fff9ed;
  --gold: #c58b32;
  --shadow: 0 20px 55px rgba(112, 44, 53, .28);
  --display: "STSong", "Songti SC", "SimSun", serif;
  --body: "FangSong", "STFangsong", "Songti SC", serif;
}

/* v3：无字渲染底图。人物、花饰和构图来自渲染图；所有文字保持可编辑。 */
@media (min-width: 0px) {
  .question-screen.answer-open .topbar { visibility: hidden; }
  .question-screen { background-image: url("./assets/images/网页预览-题目-无文字模板.png"); background-size: 100% 100%; }
  .question-screen .game-title-lockup { display: block; position: absolute; left: 28%; top: 0; width: 44%; height: 100%; }
  .question-screen .game-title-lockup img, .question-screen .question-character { display: none; }
  .question-screen .game-title-lockup h1 { color: #8f2f43; font: 700 clamp(28px,2.65vw,50px)/1.05 var(--display); text-shadow: 0 2px 0 #fff9ed,0 4px 10px rgba(107,36,51,.16); }
  .question-screen .back-button { left: 3%; top: 4.4%; width: 15.5%; height: 8.5%; padding: 0; border: 0; color: #873d47 !important; background: transparent !important; font: 700 clamp(16px,1.35vw,25px)/1 var(--display); }
  .question-screen .counter { right: 3%; top: 4.4%; width: 15.8%; height: 8.5%; padding: 0; border: 0; background: transparent; font: 700 clamp(16px,1.35vw,25px)/1 var(--display); }
  .question-screen .question-region { inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
  .question-screen .question-card { left: 10.3%; top: 32.2%; width: 55.1%; height: 35.6%; min-height: 0; padding: 3.2% 5.2%; display: flex; flex-direction: column; justify-content: center; border-radius: 0; background: transparent; box-shadow: none; }
  .question-screen .question-card::before { display: none; }
  .question-screen .question-card .ornament-frame { display: none; }
  .question-screen .question-card p { z-index: 2; color: #482528; font: 700 clamp(25px,2.18vw,41px)/1.32 var(--display); }
  .question-screen .question-options { z-index: 2; margin-top: .72em; grid-template-columns: 1fr 1fr; }
  .question-screen .answer-button { left: 34.7%; top: 76.3%; width: 28.9%; height: 10.1%; min-height: 0; margin: 0; padding: 0; color: #fff !important; background: transparent !important; box-shadow: none; pointer-events: auto; font: 700 clamp(20px,1.72vw,32px)/1 var(--display); text-shadow: 0 2px 4px rgba(112,38,55,.35); }
  .question-screen .answer-button::before { display: none; }
  .question-history, .music-toggle { color: #87404a; border: 0; background: url("./assets/images/按钮底板-奶油花边.png") center/100% 100% no-repeat; box-shadow: none; }

  .overlay { display: block; padding: 0; background: url("./assets/images/网页预览-答案-无文字模板.png") center/100% 100% no-repeat; backdrop-filter: none; }
  .answer-modal { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; padding: 0; display: block; border-radius: 0; background: transparent; box-shadow: none; }
  .answer-modal::before { display: none; }
  .answer-modal > .ornament-frame, .answer-modal .answer-doll { display: none; }
  .answer-top-home, .answer-top-remaining, .answer-page-title { display: grid; place-items: center; position: absolute; z-index: 8; color: #873d47; font-family: var(--display); font-weight: 700; }
  .answer-top-home { left: 3%; top: 4.5%; width: 15.5%; height: 8.4%; padding: 0; border: 0; background: transparent; cursor: pointer; font-size: clamp(16px,1.35vw,25px); }
  .answer-top-remaining { right: 3%; top: 4.5%; width: 15.5%; height: 8.4%; font-size: clamp(16px,1.35vw,25px); }
  .answer-page-title { left: 31%; top: 7%; width: 38%; height: 9%; color: #8f2f43; font-size: clamp(28px,2.65vw,50px); text-shadow: 0 2px 0 #fff9ed; }
  .answer-modal > h2 { display: grid; place-items: center; position: absolute; z-index: 7; left: 37.3%; top: 19.1%; width: 25.5%; height: 11.2%; margin: 0; color: #8f2f43; font: 700 clamp(27px,2.15vw,40px)/1 var(--display); }
  .answer-modal > #answer-text, .answer-modal:not(.has-media) > #answer-text { display: grid; place-items: center; position: absolute; z-index: 7; left: 29.5%; top: 34%; width: 24.7%; height: 33%; max-width: none; margin: 0; padding: 1.7%; color: #4b2929; text-align: center; font: 700 clamp(19px,1.55vw,29px)/1.45 var(--display); }
  .answer-modal:not(.has-media) > #answer-text { left: 29.5%; top: 33.5%; width: 40.8%; height: 34%; font-size: clamp(27px,2.35vw,44px); }
  .media-preview { position: absolute; z-index: 7; left: 57.1%; top: 33.8%; width: 12.5%; height: 35.4%; aspect-ratio: 9/16; margin: 0; border: 0; border-radius: 8px; background: transparent; box-shadow: none; }
  .video-placeholder-note { display: block; position: absolute !important; z-index: 8; left: 57.1%; top: 65.8%; width: 12.5%; margin: 0 !important; color: #78434a; text-align: center; font: 500 clamp(10px,.72vw,14px)/1.2 var(--display) !important; }
  .answer-actions, .answer-modal:not(.has-media) .answer-actions { position: absolute; z-index: 8; left: 31.2%; top: 72.2%; width: 37.5%; height: 9.3%; display: flex; gap: 3.8%; margin: 0; }
  .answer-modal:not(.has-media) .answer-actions { top: 72.2%; }
  .return-question, .answer-actions .next-button { width: 48%; min-height: 0; height: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; color: #873d47; background: url("./assets/images/按钮底板-返回.png") center/100% 100% no-repeat; font: 700 clamp(17px,1.35vw,25px)/1 var(--display); }
  .answer-actions .next-button { color: #fff; background-image: url("./assets/images/按钮底板-粉色.png"); text-shadow: 0 2px 4px rgba(112,38,55,.35); }
  .answer-top-home:hover, .return-question:hover, .answer-actions .next-button:hover, .question-screen .back-button:hover, .question-screen .answer-button:hover, .question-history:hover, .music-toggle:hover { transform: scale(1.07); filter: brightness(1.1) drop-shadow(0 0 10px rgba(255,219,141,.95)); }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--body); color: var(--wine-deep); background: #efbfc2; }
button { font: inherit; cursor: pointer; }
button:focus-visible { outline: 4px solid rgba(255,255,255,.92); outline-offset: 4px; }
.app-shell { position: relative; width: 100vw; height: 100dvh; min-width: 320px; min-height: 520px; overflow: hidden; }
.screen { position: absolute; inset: 0; overflow: hidden; background: url("./assets/images/樱花道路背景.png") center center / cover no-repeat; }
.screen::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(circle at 48% 41%, rgba(255,255,255,.12), transparent 44%); }

.title-lockup { position: relative; display: grid; place-items: center; }
.title-lockup img { position: absolute; inset: -26% -6% -31%; width: 112%; height: 160%; object-fit: fill; pointer-events: none; }
.title-lockup h1 { position: relative; z-index: 1; margin: 0; color: var(--wine); font-family: var(--display); font-weight: 800; line-height: 1.08; letter-spacing: .035em; text-shadow: 0 2px 0 rgba(255,255,255,.9), 0 7px 18px rgba(128,43,54,.18); }

.primary-button { position: relative; isolation: isolate; border: 0; border-radius: 999px; padding: .58em 1.6em; background: linear-gradient(180deg,var(--pink-top),var(--pink-bottom)); color: #fff; font-family: var(--display); font-weight: 800; letter-spacing: .06em; text-shadow: 0 2px 2px rgba(115,29,42,.24); box-shadow: 0 13px 28px rgba(145,48,65,.29), inset 0 2px rgba(255,255,255,.52); transition: transform .18s ease, filter .18s ease; }
.primary-button::before { content: ""; position: absolute; z-index: -1; inset: -31% -9%; background: url("./assets/images/金色樱花按钮边框.png") center / 100% 100% no-repeat; pointer-events: none; }
.primary-button:hover { transform: translateY(-3px) scale(1.025); filter: brightness(1.04); }
.primary-button.deep { background: linear-gradient(180deg,var(--pink-deep-top),var(--pink-deep-bottom)); }
.soft-button, .counter { border: 2px solid rgba(195,139,56,.78); border-radius: 999px; background: rgba(255,250,241,.94); color: var(--wine); font-family: var(--display); box-shadow: 0 8px 22px rgba(111,48,54,.16), inset 0 1px #fff; font-weight: 700; }

.home-copy { position: absolute; z-index: 4; left: 4.5%; top: 20%; width: 58%; text-align: center; }
.home-title-lockup h1 { font-size: clamp(58px,6.6vw,116px); }
.home-title-lockup img { inset: -27% -4% -34%; width: 108%; height: 165%; }
.mode-actions { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(35px,4vw,72px); margin-top: clamp(55px,8vh,96px); padding-inline: 5%; }
.mode-actions button { min-height: clamp(76px,9vh,104px); font-size: clamp(28px,2.7vw,50px); }
.home-character { position: absolute; z-index: 3; right: -1.5%; bottom: -7%; width: min(49vw,850px); max-height: 112%; object-fit: contain; filter: drop-shadow(0 24px 30px rgba(118,53,59,.2)); }

.topbar { position: absolute; z-index: 7; left: 3%; right: 3%; top: 3.8%; height: 15%; display: flex; justify-content: center; align-items: flex-start; }
.game-title-lockup { width: min(49vw,860px); }
.game-title-lockup h1 { font-size: clamp(52px,5.1vw,96px); }
.game-title-lockup img { inset: -31% -5% -41%; width: 110%; height: 180%; }
.back-button { position: absolute; left: 0; top: .3vh; padding: .55em 1.12em; font-size: clamp(21px,1.75vw,34px); }
.counter { position: absolute; right: 0; top: .3vh; padding: .55em 1.18em; font-size: clamp(21px,1.75vw,34px); }
.question-region { position: absolute; z-index: 5; left: 10.2%; top: 29.2%; width: 55.5%; display: flex; flex-direction: column; align-items: center; }
.question-card { position: relative; width: 100%; min-height: clamp(310px,38vh,500px); padding: clamp(54px,6vw,104px); display: grid; align-content: center; text-align: center; border-radius: clamp(24px,2.3vw,44px); background: linear-gradient(145deg,rgba(255,252,244,.98),rgba(255,247,234,.97)); box-shadow: var(--shadow), inset 0 0 42px rgba(215,170,92,.08); }
.ornament-frame { position: absolute; z-index: 4; inset: -2.6% -2.1%; width: 104.2%; height: 105.2%; object-fit: fill; pointer-events: none; }
.question-card p { position: relative; z-index: 5; margin: 0; font-family: var(--display); font-size: clamp(38px,3.2vw,62px); font-weight: 700; line-height: 1.45; letter-spacing: .035em; }
.card-divider { position: relative; z-index: 5; width: 55%; height: 2px; margin: clamp(28px,4vh,50px) auto 0; background: linear-gradient(90deg,transparent,var(--gold),transparent); }
.answer-button { width: min(54%,520px); min-height: clamp(84px,10.5vh,112px); margin-top: clamp(60px,9vh,92px); font-size: clamp(31px,2.7vw,50px); }
.question-character { position: absolute; z-index: 4; right: -4%; bottom: -3%; width: min(50vw,840px); max-height: 110%; object-fit: contain; object-position: bottom right; filter: drop-shadow(0 20px 28px rgba(118,53,59,.17)); }
.page-enter { animation: pageFade .32s ease-out; }

.overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; padding: 3vh 4vw; background: rgba(98,38,46,.66); backdrop-filter: blur(2px); }
.answer-modal { position: relative; width: min(49vw,900px); min-height: min(68vh,700px); max-height: 91vh; padding: clamp(55px,6vh,80px) clamp(55px,4.5vw,82px) clamp(32px,4vh,52px); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: clamp(28px,2.7vw,52px); background: linear-gradient(145deg,rgba(255,252,244,.995),rgba(255,247,234,.99)); box-shadow: 0 30px 80px rgba(62,24,30,.45); text-align: center; }
.answer-modal h2 { position: relative; z-index: 5; margin: 0 0 clamp(15px,2vh,26px); color: var(--wine); font-family: var(--display); font-size: clamp(46px,4.1vw,76px); letter-spacing: .06em; }
.answer-modal > p { position: relative; z-index: 5; margin: 0 auto clamp(18px,2.4vh,30px); max-width: 92%; font-family: var(--display); font-size: clamp(24px,2vw,38px); font-weight: 700; line-height: 1.5; }
.media-preview { position: relative; z-index: 5; display: block; width: min(82%,650px); aspect-ratio: 16/6.2; margin: 0 auto clamp(18px,2.4vh,30px); padding: 0; overflow: hidden; border: 3px solid var(--gold); border-radius: 15px; background: #f7ddd8; box-shadow: 0 8px 22px rgba(103,42,49,.16); }
.media-preview img, .media-preview video { width: 100%; height: 100%; object-fit: cover; }
.play-badge, .expand-badge { position: absolute; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(159,53,72,.84); }
.play-badge { left: 50%; top: 50%; width: clamp(52px,5vw,84px); aspect-ratio: 1; transform: translate(-50%,-50%); font-family: sans-serif; font-size: clamp(22px,2.2vw,36px); padding-left: .12em; }
.expand-badge { right: 10px; bottom: 10px; width: clamp(36px,3vw,50px); aspect-ratio: 1; font-family: sans-serif; font-size: clamp(18px,1.7vw,28px); }
.next-button { z-index: 5; width: min(59%,470px); min-height: clamp(70px,8vh,94px); font-size: clamp(29px,2.5vw,46px); }
.answer-doll { position: absolute; z-index: 6; left: -24%; bottom: -16%; width: 36%; max-height: 76%; object-fit: contain; filter: drop-shadow(0 17px 22px rgba(79,34,38,.26)); pointer-events: none; }

.complete-panel { position: absolute; z-index: 5; left: 14.5%; top: 25%; width: 45%; min-height: 45%; padding: clamp(58px,5vw,90px); display: grid; place-content: center; text-align: center; border-radius: 40px; background: linear-gradient(145deg,rgba(255,252,244,.98),rgba(255,247,234,.97)); box-shadow: var(--shadow); }
.complete-panel h1, .complete-panel p, .complete-panel button { position: relative; z-index: 5; }
.complete-panel h1 { margin: 0; color: #794313; font-family: var(--display); font-size: clamp(48px,4.7vw,88px); line-height: 1.2; }
.complete-panel p { margin: .75em 0 1.1em; font-family: var(--display); font-size: clamp(27px,2.4vw,44px); }
.complete-panel button { min-width: min(67%,470px); justify-self: center; font-size: clamp(25px,2.2vw,41px); }
.complete-character { position: absolute; z-index: 4; right: 4%; bottom: -18%; width: min(41vw,720px); max-height: 112%; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(118,53,59,.2)); }

.media-overlay { position: absolute; z-index: 40; inset: 0; display: grid; place-items: center; padding: 6%; background: rgba(39,22,25,.92); }
.media-overlay img, .media-overlay video { max-width: 92%; max-height: 88%; border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.media-close { position: absolute; right: 3%; top: 3%; width: 52px; aspect-ratio: 1; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font: 300 38px/1 sans-serif; }

.question-options { position: relative; z-index: 5; width: 100%; margin: 1.05em 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55em 1em; list-style: none; text-align: left; }
.question-options li { display: grid; grid-template-columns: 2em 1fr; align-items: start; gap: .3em; font-family: var(--display); font-size: clamp(18px,1.5vw,28px); line-height: 1.35; }
.question-options strong { color: var(--wine); }
.utility-button { z-index: 15; border: 2px solid rgba(197,139,50,.8); border-radius: 999px; padding: .55em 1em; background: rgba(255,249,237,.94); color: var(--wine); font-weight: 700; box-shadow: 0 7px 20px rgba(91,31,41,.18); }
.home-history, .home-reset { position: absolute; z-index: 15; bottom: 4%; width: clamp(132px,13vw,210px); min-height: clamp(46px,5.4vh,62px); padding: 0; display: grid; place-items: center; font-family: "Songti SC","STSong",serif; font-weight: 900; font-size: clamp(15px,1.15vw,21px); }
.home-history { left: 4%; }
.home-reset { left: calc(4% + clamp(132px,13vw,210px) + 14px); }
.question-history { position: absolute; right: 0; top: 5.2em; pointer-events: auto; }
.music-toggle { position: absolute; right: 0; top: 8.8em; pointer-events: auto; }
.music-volume-control { position: absolute; z-index: 15; right: 0; top: 12.2em; width: 150px; min-height: 34px; padding: 5px 9px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid rgba(204,151,65,.72); border-radius: 999px; background: rgba(255,250,240,.9); color: #742d3d; box-shadow: 0 5px 14px rgba(92,39,47,.14); pointer-events: auto; font: 800 12px/1 "Songti SC","STSong",serif; }
.music-volume-control input { width: 92px; height: 10px; margin: 0; accent-color: #d96f83; cursor: pointer; }
.music-volume-control output { min-width: 2.7em; text-align: right; }
.answer-actions { position: relative; z-index: 7; width: min(82%,650px); display: flex; justify-content: center; gap: 18px; }
.answer-actions .next-button, .return-question { flex: 1; min-height: 64px; font-size: clamp(22px,2vw,34px); }
.return-question { padding: .55em 1em; }
.video-placeholder-note { color: #986d52; font-size: 14px !important; font-weight: 500 !important; }

.history-overlay { position: absolute; z-index: 60; inset: 0; display: grid; place-items: center; padding: 4vh 4vw; background: rgba(74,28,36,.72); backdrop-filter: blur(5px); }
.history-modal { position: relative; width: min(900px,92vw); max-height: 88vh; overflow: hidden; padding: 42px 34px 30px; border: 3px solid rgba(197,139,50,.9); border-radius: 30px; background: linear-gradient(145deg,#fffdf5,#fff5e7); box-shadow: 0 28px 80px rgba(55,18,25,.46); }
.history-modal h2 { margin: 0 0 20px; text-align: center; color: var(--wine); font: 800 clamp(31px,3.4vw,52px)/1.2 var(--display); }
.history-close { position: absolute; z-index: 2; right: 18px; top: 14px; width: 44px; aspect-ratio: 1; border: 0; border-radius: 50%; background: #f1a1ae; color: #fff; font: 32px/1 sans-serif; }
.history-list { max-height: calc(88vh - 125px); overflow: auto; padding: 0 8px 12px; }
.history-list h3 { margin: 18px 0 10px; color: #7c4218; font: 800 28px/1.2 var(--display); }
.history-item { margin: 0 0 14px; padding: 18px 20px; border: 1px solid rgba(197,139,50,.42); border-radius: 18px; background: rgba(255,255,255,.76); }
.history-item h4 { margin: 0 0 10px; font-size: 20px; line-height: 1.45; }
.history-item ul { margin: 14px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 24px; list-style: none; }
.history-item ul.history-options-compact { grid-template-columns: repeat(var(--history-option-count),max-content); justify-content: start; }
.history-item ul.history-options-stacked { grid-template-columns: max-content; justify-content: start; }
.history-item ul.history-options-stacked li { white-space: nowrap; }
.history-item li { min-width: 0; display: flex; justify-content: flex-start; align-items: baseline; gap: .45em; text-align: left; font: 800 18px/1.45 "Songti SC","STSong",serif; }
.history-item li strong { color: var(--wine); }
.history-item p { margin: 8px 0 0; color: var(--wine); font-size: 19px; font-weight: 700; }
.history-item p span { margin-right: .7em; color: #9a6a24; }
.history-item small { display: block; margin-top: 8px; color: #986d52; }
.history-empty { padding: 60px 0; text-align: center; font-size: 22px; }

@keyframes pageFade { from { opacity: .2; } to { opacity: 1; } }

@media (max-width: 900px) {
  .home-copy { left: 3.5%; width: 61%; }
  .home-character { width: 47vw; right: -6%; }
  .question-region { left: 5%; width: 65%; }
  .question-character { width: 46vw; right: -6%; }
  .answer-modal { width: 72vw; }
  .complete-panel { left: 6%; width: 57%; }
  .complete-character { right: -4%; width: 49vw; }
}

@media (max-width: 640px) {
  .app-shell { min-height: 560px; }
  .home-copy { left: 4%; right: 4%; top: 8%; width: auto; }
  .home-title-lockup h1 { font-size: clamp(38px,10.5vw,58px); }
  .mode-actions { margin-top: 48px; gap: 16px; padding-inline: 2%; }
  .mode-actions button { min-height: 58px; font-size: clamp(20px,5.4vw,29px); }
  .home-character { width: 82vw; max-height: 66%; right: 1%; bottom: -12%; }
  .topbar { top: 1.3%; left: 2%; right: 2%; }
  .game-title-lockup { width: 76vw; margin-top: 52px; }
  .game-title-lockup h1 { font-size: clamp(31px,8.7vw,47px); }
  .back-button span { display: none; }
  .back-button, .counter { font-size: 16px; }
  .question-region { left: 4%; top: 23%; width: 78%; }
  .question-card { min-height: 36vh; padding: 38px 23px; border-radius: 20px; }
  .question-card p { font-size: clamp(27px,7vw,39px); }
  .question-options { grid-template-columns: 1fr; gap: .35em; }
  .question-options li { font-size: 18px; }
  .answer-button { width: 67%; min-height: 56px; margin-top: 32px; font-size: 24px; }
  .question-character { width: 60vw; right: -18%; bottom: -7%; max-height: 55%; }
  .answer-modal { width: 90vw; min-height: 67vh; padding: 44px 22px 28px; }
  .answer-modal h2 { font-size: 38px; }
  .answer-modal > p { font-size: 20px; }
  .answer-actions { width: 92%; gap: 10px; }
  .answer-actions .next-button, .return-question { min-height: 54px; font-size: 19px; }
  .media-preview { width: 82%; aspect-ratio: 16/7; }
  .answer-doll { left: -8%; bottom: -6%; width: 24%; }
  .complete-panel { left: 5%; right: 5%; top: 8%; width: auto; min-height: 38%; padding: 42px 23px; }
  .complete-panel h1 { font-size: clamp(38px,10vw,54px); }
  .complete-character { width: 76vw; right: 2%; bottom: -17%; max-height: 72%; }
  .home-history,
  .home-reset { bottom: 2%; width: 43%; min-height: 48px; font-size: 15px; white-space: nowrap; }
  .home-history { left: 4%; transform: none; }
  .home-reset { left: auto; right: 4%; }
  .question-history, .music-toggle { right: 2%; font-size: 13px; }
  .question-history { top: 48px; }
  .music-toggle { top: 86px; }
  .music-volume-control { right: 2%; top: 124px; width: 118px; min-height: 30px; padding: 4px 7px; }
  .music-volume-control input { width: 68px; }
  .history-modal { padding: 48px 16px 20px; }
  .history-item ul, .history-item ul.history-options-compact { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* 桌面端直接使用已确认的预览图作为视觉外壳，确保人物、字体和构图完全一致。 */
@media (min-width: 0px) {
  .app-shell {
    background:
      linear-gradient(rgba(244,205,207,.22), rgba(244,205,207,.22)),
      #edc9c9 url("./assets/images/樱花道路背景.png") center / cover no-repeat;
  }
  .screen,
  .overlay {
    inset: auto;
    left: 50%;
    top: 50%;
    width: min(100vw, calc(100dvh * 1.7787234));
    height: min(100dvh, calc(100vw / 1.7787234));
    transform: translate(-50%, -50%);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .screen,
  .overlay {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .screen::after { display: none; }

  /* 不拉伸人物与文字；当浏览器不是 16:9 时，用柔和渐隐消除上下硬接缝。 */
  .screen::before,
  .overlay::before {
    content: "";
    position: absolute;
    z-index: 12;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(244,205,207,.5) 0,
      rgba(244,205,207,0) 5.5%,
      rgba(244,205,207,0) 94.5%,
      rgba(244,205,207,.5) 100%
    );
  }

  .home-screen { background-image: url("./assets/images/网页预览-首页.png"); }
  .home-character,
  .home-title-lockup { display: none; }
  .home-copy { inset: 0; width: 100%; height: 100%; }
  .mode-actions { position: absolute; left: 7.4%; top: 50.8%; width: 52.7%; height: 13.6%; margin: 0; padding: 0; gap: 3.2%; }
  .mode-actions button { min-width: 0; min-height: 0; height: 100%; padding: 0; }
  .mode-actions button::before { display: none; }

  .question-screen { background-image: url("./assets/images/网页预览-题目.png"); }
  .game-title-lockup,
  .question-character { display: none; }
  .topbar { inset: 0; height: 100%; pointer-events: none; }
  .back-button { left: 3%; top: 4.4%; width: 15.5%; height: 8.5%; padding: 0; border: 0; pointer-events: auto; }
  .counter { display: block; right: 3%; top: 4.4%; z-index: 14; padding: .55em 1.18em; font-size: clamp(18px,1.55vw,29px); pointer-events: none; }
  .question-history { right: 3%; top: 14%; font-size: clamp(14px,1.05vw,19px); }
  .music-toggle { right: 3%; top: 20.5%; font-size: clamp(14px,1.05vw,19px); }
  .question-region { inset: 0; width: 100%; height: 100%; display: block; z-index: 13; pointer-events: none; }
  .question-card { position: absolute; display: flex; flex-direction: column; justify-content: center; left: 10.4%; top: 32.2%; width: 55.4%; height: 35.6%; min-height: 0; padding: 3.6% 5.2%; border-radius: 24px; background: #fff9ed; pointer-events: none; }
  .question-card p { font-size: clamp(24px,2.15vw,40px); line-height: 1.28; }
  .question-options { margin-top: .65em; gap: .35em 1em; }
  .question-options li { font-size: clamp(16px,1.25vw,24px); }
  .card-divider { display: none; }
  .answer-button { position: absolute; left: 34%; top: 75.1%; width: 31%; height: 12.8%; min-height: 0; margin: 0; padding: 0; pointer-events: auto; }
  .answer-button::before { display: none; }

  .overlay { display: block; padding: 0; background: url("./assets/images/网页预览-答案.png") center / 100% 100% no-repeat; backdrop-filter: none; }
  .answer-modal { position: absolute; inset: 0; width: 100%; min-height: 0; height: 100%; max-height: none; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
  .answer-modal::before {
    content: "";
    position: absolute;
    z-index: 4;
    left: 30.4%;
    top: 31.5%;
    width: 39.2%;
    height: 54.5%;
    border-radius: 18px;
    background: #fff9ed;
    box-shadow: inset 0 0 24px rgba(197,139,50,.06);
  }
  .answer-modal > .ornament-frame,
  .answer-modal > h2,
  .answer-doll { display: none; }
  .answer-modal > #answer-text { display: block; position: absolute; left: 32.5%; top: 34%; width: 35%; max-width: none; margin: 0; color: #4f2525; font-size: clamp(21px,1.85vw,34px); line-height: 1.35; }
  .answer-modal:not(.has-media) > #answer-text { top: 45%; font-size: clamp(28px,2.5vw,46px); }
  .answer-modal:not(.has-media) .answer-actions { top: 66%; }
  .video-placeholder-note { display: block; position: absolute !important; left: 39%; top: 68.5%; width: 22%; margin: 0 !important; font-size: clamp(11px,.85vw,15px) !important; }
  .media-preview { position: absolute; left: 45.55%; top: 43.5%; width: 8.9%; height: 25%; aspect-ratio: 9 / 16; margin: 0; border: 2px solid rgba(197,139,50,.9); border-radius: 12px; opacity: 1; }
  .media-preview img, .media-preview video { object-fit: cover; }
  .answer-actions { position: absolute; left: 34.5%; top: 73.5%; width: 31%; height: 10%; gap: 3%; }
  .return-question, .next-button { width: 48.5%; min-height: 0; height: 100%; margin: 0; padding: 0; font-size: clamp(17px,1.45vw,27px); }
  .return-question { color: var(--wine); background: rgba(255,250,241,.98); }
  .next-button { color: #fff; background: linear-gradient(180deg,var(--pink-top),var(--pink-bottom)); }
  .next-button::before { display: none; }

  .complete-screen { background-image: url("./assets/images/网页预览-完成-完整裙摆版.png"); }
  .complete-character,
  .complete-panel > .ornament-frame,
  .complete-panel > h1,
  .complete-panel > p { display: none; }
  .complete-panel { inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; background: transparent; border-radius: 0; box-shadow: none; }
  .complete-panel button { position: absolute; left: 22.5%; top: 56.4%; width: 28.3%; height: 11.8%; min-width: 0; padding: 0; opacity: 0; }
  .complete-panel button::before { display: none; }

  /* 预览图上的透明热区：悬停时以提亮、放大和粉金光晕明确提示可点击。 */
  .mode-actions button,
  .back-button,
  .answer-button,
  .complete-panel button {
    color: transparent !important;
    background: rgba(255,235,239,0) !important;
    box-shadow: none;
    text-shadow: none;
    border-radius: 999px;
    opacity: 1;
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, backdrop-filter .18s ease;
  }
  .mode-actions button:hover,
  .back-button:hover,
  .answer-button:hover,
  .complete-panel button:hover {
    transform: scale(1.065);
    background: rgba(255,230,237,.2) !important;
    box-shadow: 0 0 13px 5px rgba(255,255,255,.9), 0 0 34px 14px rgba(236,91,127,.68);
    backdrop-filter: brightness(1.18) saturate(1.12);
  }
  .media-preview:hover {
    transform: scale(1.035);
    filter: brightness(1.08) saturate(1.08);
    box-shadow: 0 0 13px 5px rgba(255,255,255,.88), 0 0 34px 14px rgba(236,91,127,.62);
  }
  .next-button:hover {
    transform: scale(1.02);
    filter: brightness(1.06);
    box-shadow: 0 0 7px 2px rgba(255,255,255,.72), 0 0 13px 4px rgba(236,91,127,.42);
  }
  .home-history { left: 3%; bottom: 4%; font-size: clamp(14px,1.15vw,20px); }
}

/* 最终桌面方案：保留预览图原始构图，只遮盖示例文字并叠加真实题库文字。 */
@media (min-width: 0px) {
  .question-screen {
    background-image: url("./assets/images/网页预览-题目.png");
    background-size: 100% 100%;
  }
  .question-screen .game-title-lockup,
  .question-screen .question-character { display: none; }
  .question-screen .topbar { inset: 0; height: 100%; pointer-events: none; }
  .question-screen .back-button {
    left: 3%; top: 4.4%; width: 15.5%; height: 8.5%; padding: 0;
    border: 0; color: transparent !important; background: transparent !important;
  }
  .question-screen .counter {
    right: 3%; top: 4.25%; width: 15.8%; height: 8.7%; padding: 0;
    display: grid; place-items: center; border: 2px solid rgba(195,139,56,.84);
    background: #fff9ed; font: 700 clamp(18px,1.55vw,29px)/1 var(--display);
  }
  .question-history { right: 3%; top: 14%; }
  .music-toggle { right: 3%; top: 20.5%; }
  .question-history, .music-toggle { right: 2.2%; width: 17%; min-height: 6.2%; padding: 0; display: grid; place-items: center; color: #6f2435; border: 3px solid rgba(195,132,44,.98); background: #fffaf0; box-shadow: 0 7px 18px rgba(92,39,47,.24),inset 0 2px #fff; font: 900 clamp(16px,1.25vw,23px)/1 var(--display); text-shadow: 0 1px #fff; }
  .question-history, .music-toggle { width: 15.5%; min-height: 5.8%; padding: 0; display: grid; place-items: center; color: #742d3d; border: 2px solid rgba(204,151,65,.92); background: rgba(255,250,240,.97); box-shadow: 0 6px 16px rgba(92,39,47,.17),inset 0 1px #fff; font: 800 clamp(14px,1.08vw,20px)/1 var(--display); text-shadow: 0 1px #fff; }
  .question-screen .question-region {
    inset: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  }
  .question-screen .question-card {
    position: absolute; left: 10.2%; top: 30.2%; width: 56%; height: 39%; min-height: 0;
    padding: 5.3% 6.2% 4.2%; display: flex; flex-direction: column; justify-content: center;
    border-radius: 0; background: transparent; box-shadow: none;
  }
  .question-screen .question-card::before {
    content: ""; position: absolute; z-index: 4; inset: 12% 5.2% 11%;
    border-radius: 16px; background: #fff9ed; box-shadow: inset 0 0 32px rgba(197,139,50,.055);
  }
  .question-screen .question-card .ornament-frame { display: none; }
  .question-screen .question-card p {
    position: relative; z-index: 5; font-family: var(--display);
    font-size: clamp(25px,2.25vw,42px); line-height: 1.28;
  }
  .question-screen .question-options {
    position: relative; z-index: 5; margin-top: .72em; grid-template-columns: 1fr 1fr;
  }
  .question-screen .question-options li {
    font-family: var(--display); font-size: clamp(16px,1.28vw,24px);
  }
  .question-screen .answer-button {
    position: absolute; left: 34%; top: 75.1%; width: 31%; height: 12.8%;
    min-height: 0; margin: 0; padding: 0; color: transparent !important;
    background: transparent !important; box-shadow: none; pointer-events: auto;
  }
  .question-screen .answer-button::before { display: none; }

  .overlay {
    display: block; padding: 0;
    background: url("./assets/images/网页预览-答案.png") center / 100% 100% no-repeat;
    backdrop-filter: none;
  }
  .answer-modal {
    position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none;
    padding: 0; display: block; border-radius: 0; background: transparent; box-shadow: none;
  }
  .answer-modal::before {
    content: ""; display: block; position: absolute; z-index: 4;
    left: 30.3%; top: 31.2%; width: 39.5%; height: 55%;
    border-radius: 18px; background: #fff9ed; box-shadow: inset 0 0 26px rgba(197,139,50,.06);
  }
  .answer-modal > .ornament-frame,
  .answer-modal > h2,
  .answer-modal .answer-doll { display: none; }
  .answer-modal > #answer-text,
  .answer-modal:not(.has-media) > #answer-text {
    display: block; position: absolute; z-index: 6; left: 33%; top: 34%; width: 34%;
    max-width: none; margin: 0; color: #4f2525; text-align: center;
    font: 700 clamp(22px,1.95vw,36px)/1.35 var(--display);
  }
  .answer-modal:not(.has-media) > #answer-text { top: 46%; font-size: clamp(29px,2.6vw,48px); }
  .media-preview {
    position: absolute; z-index: 6; left: 45.55%; top: 43.5%; width: 8.9%; height: 25%;
    aspect-ratio: 9 / 16; margin: 0; border: 2px solid rgba(197,139,50,.9);
  }
  .video-placeholder-note {
    display: block; position: absolute !important; z-index: 6; left: 38%; top: 69.2%; width: 24%;
    margin: 0 !important; text-align: center; font: 500 clamp(11px,.86vw,15px)/1.2 var(--display) !important;
  }
  .answer-actions,
  .answer-modal:not(.has-media) .answer-actions {
    position: absolute; z-index: 7; left: 34.5%; top: 74.5%; width: 31%; height: 9.5%;
    display: flex; gap: 3%; margin: 0;
  }
  .answer-modal:not(.has-media) .answer-actions { top: 65%; }
  .return-question,
  .answer-actions .next-button {
    width: 48.5%; min-height: 0; height: 100%; margin: 0; padding: 0;
    font: 700 clamp(17px,1.4vw,26px)/1 var(--display);
  }
  .return-question { color: var(--wine); background: #fffaf1; }
  .answer-actions .next-button { color: #fff; background: linear-gradient(180deg,var(--pink-top),var(--pink-bottom)); }
}

/* v3 必须位于全部旧预览规则之后，防止旧的带字截图与遮罩重新覆盖。 */
@media (min-width: 0px) {
  .question-screen { background-image: url("./assets/images/网页预览-题目-无文字模板.png?v=3"); }
  .question-screen .game-title-lockup { display: block; left: 31%; top: 7.1%; width: 38%; height: 12%; }
  .question-screen .game-title-lockup img, .question-screen .question-character { display: none; }
  .question-screen .game-title-lockup h1 { color: #8f2f43; font: 700 clamp(28px,2.65vw,50px)/1.05 var(--display); }
  .question-screen .back-button { color: #873d47 !important; background: transparent !important; }
  .question-screen .counter { border: 0; background: transparent; }
  .question-screen .question-card { left: 10.3%; top: 32.2%; width: 55.1%; height: 35.6%; padding: 3.2% 5.2%; }
  .question-screen .question-card::before { display: none; }
  .question-screen .question-card p { z-index: 2; color: #482528; }
  .question-screen .question-options { z-index: 2; }
  .question-screen .answer-button { left: 34.7%; top: 76.3%; width: 28.9%; height: 10.1%; color: #fff !important; font: 700 clamp(20px,1.72vw,32px)/1 var(--display); }
  .question-history, .music-toggle { color: #87404a; border: 0; background: url("./assets/images/按钮底板-奶油花边.png") center/100% 100% no-repeat; }

  .overlay { background-image: url("./assets/images/网页预览-答案-无文字模板.png?v=3"); }
  .answer-modal::before { display: none; }
  .answer-modal > .ornament-frame, .answer-modal .answer-doll { display: none; }
  .answer-top-home, .answer-top-remaining, .answer-page-title { display: grid; place-items: center; position: absolute; z-index: 9; color: #873d47; font-family: var(--display); font-weight: 700; }
  .answer-top-home { left: 3%; top: 4.5%; width: 15.5%; height: 8.4%; border: 0; background: transparent; font-size: clamp(16px,1.35vw,25px); }
  .answer-top-remaining { right: 3%; top: 4.5%; width: 15.5%; height: 8.4%; font-size: clamp(16px,1.35vw,25px); }
  .answer-page-title { left: 31%; top: 7%; width: 38%; height: 9%; color: #8f2f43; font-size: clamp(28px,2.65vw,50px); }
  .answer-modal > h2 { display: grid; place-items: center; position: absolute; z-index: 8; left: 37.3%; top: 19.1%; width: 25.5%; height: 11.2%; margin: 0; color: #8f2f43; font: 700 clamp(27px,2.15vw,40px)/1 var(--display); }
  .answer-modal > #answer-text, .answer-modal:not(.has-media) > #answer-text { display: grid; place-items: center; z-index: 8; left: 29.5%; top: 34%; width: 24.7%; height: 33%; padding: 1.7%; font: 700 clamp(19px,1.55vw,29px)/1.45 var(--display); }
  .answer-modal:not(.has-media) > #answer-text { left: 29.5%; top: 33.5%; width: 40.8%; height: 34%; font-size: clamp(27px,2.35vw,44px); }
  .media-preview { z-index: 8; left: 57.3%; top: 33.1%; width: 13.5%; height: 38.8%; border: 0; border-radius: 10px; }
  .video-placeholder-note { z-index: 9; left: 57.3%; top: 67.2%; width: 13.5%; }
  .answer-actions, .answer-modal:not(.has-media) .answer-actions { z-index: 9; left: 31.2%; top: 73.4%; width: 37.5%; height: 9.3%; gap: 3.8%; }
  .answer-modal:not(.has-media) .answer-actions { top: 73.4%; }
  .return-question, .answer-actions .next-button { color: #873d47; border: 0; background: url("./assets/images/按钮底板-返回.png") center/100% 100% no-repeat; box-shadow: none; }
  .answer-actions .next-button { color: #fff; background-image: url("./assets/images/按钮底板-粉色.png"); }
  .answer-top-home:hover, .return-question:hover, .answer-actions .next-button:hover, .question-screen .back-button:hover, .question-screen .answer-button:hover, .question-history:hover, .music-toggle:hover { transform: scale(1.07); filter: brightness(1.1) drop-shadow(0 0 10px rgba(255,219,141,.95)); }
}

/* 动态题目与答案不能使用带示例文字的整张预览图，否则会产生双层内容。 */
@media (min-width: 0px) {
  .question-screen {
    background-image: url("./assets/images/樱花道路背景.png");
    background-size: cover;
  }
  .question-screen .game-title-lockup,
  .question-screen .counter,
  .question-screen .question-character { display: block; }
  .question-screen .topbar {
    z-index: 16;
    left: 3%;
    right: 3%;
    top: 3.8%;
    height: 15%;
    pointer-events: none;
  }
  .question-screen .game-title-lockup { width: min(49vw,860px); }
  .question-screen .back-button {
    left: 0;
    top: .3vh;
    width: auto;
    height: auto;
    padding: .55em 1.12em;
    border: 2px solid rgba(195,139,56,.78);
    color: var(--wine) !important;
    background: rgba(255,250,241,.94) !important;
    opacity: 1;
  }
  .question-screen .counter {
    right: 0;
    top: .3vh;
    width: auto;
    height: auto;
    padding: .55em 1.18em;
  }
  .question-history { right: 0; top: 4.4em; }
  .music-toggle { right: 0; top: 7.7em; }
  .question-screen .question-region {
    left: 8.5%;
    top: 25%;
    width: 59%;
    height: auto;
    display: flex;
    pointer-events: none;
  }
  .question-screen .question-card {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
    min-height: min(43vh,430px);
    padding: clamp(46px,4.5vw,82px);
    border-radius: 32px;
    background: linear-gradient(145deg,#fffdf5,#fff8ea);
    box-shadow: var(--shadow), inset 0 0 42px rgba(215,170,92,.08);
  }
  .question-screen .question-card p { font-size: clamp(27px,2.35vw,44px); }
  .question-screen .question-options li { font-size: clamp(17px,1.35vw,25px); }
  .question-screen .answer-button {
    position: relative;
    left: auto;
    top: auto;
    width: min(46%,470px);
    height: auto;
    min-height: clamp(72px,8.5vh,96px);
    margin-top: clamp(32px,4.2vh,48px);
    padding: .58em 1.6em;
    color: #fff !important;
    background: linear-gradient(180deg,var(--pink-top),var(--pink-bottom)) !important;
    opacity: 1;
    pointer-events: auto;
  }
  .question-screen .answer-button::before { display: block; }
  .question-screen .question-character {
    z-index: 4;
    right: 0;
    bottom: 0;
    width: min(43vw,720px);
    max-height: 92%;
    object-fit: contain;
    object-position: bottom right;
  }

  .overlay {
    display: grid;
    place-items: center;
    padding: 3vh 4vw;
    background: rgba(98,38,46,.66);
    backdrop-filter: blur(3px);
  }
  .overlay::before { display: none; }
  .answer-modal {
    position: relative;
    inset: auto;
    width: min(54vw,900px);
    min-height: min(78vh,760px);
    height: auto;
    max-height: 91vh;
    padding: clamp(58px,6vh,78px) clamp(52px,4.5vw,80px) clamp(30px,4vh,48px);
    display: flex;
    border-radius: 42px;
    background: linear-gradient(145deg,#fffdf5,#fff7e9);
    box-shadow: 0 30px 80px rgba(62,24,30,.45);
  }
  .answer-modal::before { display: none; }
  .answer-modal > .ornament-frame { display: block; }
  .answer-modal > h2 {
    display: block;
    position: relative;
    margin: 0 0 18px;
    font-size: clamp(38px,3.5vw,64px);
  }
  .answer-modal > #answer-text,
  .answer-modal:not(.has-media) > #answer-text {
    display: block;
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 92%;
    margin: 0 auto 18px;
    font-size: clamp(24px,2.05vw,38px);
  }
  .video-placeholder-note {
    display: block;
    position: relative !important;
    left: auto;
    top: auto;
    width: auto;
    margin: -8px 0 12px !important;
    font-size: 14px !important;
  }
  .media-preview {
    position: relative;
    left: auto;
    top: auto;
    width: min(25%,220px);
    height: auto;
    aspect-ratio: 9 / 16;
    margin: 0 auto 18px;
  }
  .answer-actions,
  .answer-modal:not(.has-media) .answer-actions {
    position: relative;
    left: auto;
    top: auto;
    width: min(82%,650px);
    height: auto;
    margin-top: 6px;
  }
  .return-question,
  .answer-actions .next-button {
    width: auto;
    min-height: 64px;
    height: auto;
    padding: .55em 1em;
  }
  .answer-modal .answer-doll {
    display: block;
    left: -19%;
    bottom: -10%;
    width: 31%;
    max-height: 70%;
  }
}

/* 层级最终覆盖：预览图只保留装饰与人物，所有可变文字由网页单独渲染。 */
@media (min-width: 0px) {
  .question-screen { background-image: url("./assets/images/网页预览-题目-原版标题模板.png?v=1"); background-size: 100% 100%; }
  .question-screen .question-character { display: none; }
  .question-screen .game-title-lockup { display: none; }
  .question-screen .game-title-lockup img { display: none; }
  .question-screen .game-title-lockup h1 { color: #8f2f43; font: 700 clamp(28px,2.65vw,50px)/1.05 var(--display); }
  .question-screen .topbar { inset: 0; height: 100%; pointer-events: none; }
  .question-screen .back-button { left: 3%; top: 4.4%; width: 15.5%; height: 8.5%; padding: 0; border: 0; color: #873d47 !important; background: transparent !important; font: 900 clamp(16px,1.35vw,25px)/1 "Songti SC","STSong",serif; -webkit-text-stroke: .2px currentColor; }
  .question-screen .counter { right: 3%; top: 4.25%; width: 15.8%; height: 8.7%; padding: 0; display: grid; place-items: center; border: 0; color: #873d47; background: transparent; font: 900 clamp(16px,1.35vw,25px)/1 "Songti SC","STSong",serif; -webkit-text-stroke: .2px currentColor; }
  .question-history { right: 2.2%; top: 14%; }
  .reset-progress { position: absolute; right: 2.2%; top: 14%; pointer-events: auto; }
  .music-toggle { right: 2.2%; top: 21%; }
  .music-volume-control { right: 2.2%; top: 27.1%; width: 14.8%; min-height: 3.8%; padding: .35% .7%; gap: .45em; border: 1.5px solid rgba(204,151,65,.78); background: rgba(255,250,240,.94); box-shadow: 0 5px 14px rgba(92,39,47,.13); font: 900 clamp(11px,.78vw,15px)/1 "Songti SC","STSong",serif; }
  .music-volume-control input { width: 68%; height: 10px; }
  .question-history, .reset-progress, .music-toggle { width: 14.8%; min-height: 5.8%; padding: 0; display: grid; place-items: center; color: #742d3d; border: 2px solid rgba(204,151,65,.92); background: rgba(255,250,240,.98); box-shadow: 0 6px 16px rgba(92,39,47,.17),inset 0 1px #fff; font: 900 clamp(15px,1.12vw,21px)/1 "Songti SC","STSong",serif; text-shadow: 0 1px #fff; }
  .question-screen .question-region { inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
  .question-screen .question-card { position: absolute; isolation: isolate; left: 10.77%; top: 33.5%; width: 55.02%; height: 28%; min-height: 0; padding: 1.8% 5.2% 8%; display: flex; flex-direction: column; justify-content: center; border-radius: 0; background: transparent; box-shadow: none; }
  .question-screen .question-card::before { display: none; }
  .question-screen .question-card .ornament-frame { display: none; }
  .question-screen .question-card p { position: relative; z-index: 21; width: 94%; max-width: 94%; margin-inline: auto; color: #4b2929; text-align: center; font-family: "Songti SC","STSong",serif; font-size: clamp(30px,2.55vw,48px); font-weight: 900; line-height: 1.23; -webkit-text-stroke: .32px currentColor; }
  .question-screen .question-card.long-question { padding-left: 3.7%; padding-right: 3.7%; }
  .question-screen .question-card.long-question p { width: 100%; max-width: 100%; font-size: clamp(26px,2.15vw,40px); }
  .question-screen .question-card.has-options { justify-content: flex-start; padding-top: 1.4%; padding-bottom: 8%; }
  .question-screen .question-card.has-options p { font-size: clamp(27px,2.18vw,41px); line-height: 1.2; }
  .question-screen .question-options { position: relative; z-index: 21; width: 92%; margin: 1.05em auto 0; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55em 1.2em; }
  .question-screen .compact-options .question-options { grid-template-columns: repeat(var(--option-count),minmax(0,1fr)); }
  .question-screen .compact-options.options-2 .question-options { width: auto; max-width: 92%; grid-template-columns: repeat(2,max-content); justify-content: center; column-gap: clamp(44px,4vw,78px); }
  .question-screen .question-card.stacked-options .question-options { width: max-content; max-width: 92%; margin-top: .72em; grid-template-columns: max-content; justify-content: center; gap: .34em; }
  .question-screen .question-card.stacked-options .question-options li { display: flex; align-items: baseline; gap: .42em; white-space: nowrap; }
  .question-screen .question-options li { min-width: 0; grid-template-columns: 1.35em minmax(0,1fr); gap: .18em; color: #482528; font-family: "Songti SC","STSong",serif; font-size: clamp(20px,1.48vw,28px); font-weight: 900; line-height: 1.23; -webkit-text-stroke: .3px currentColor; }
  .question-screen .compact-options .question-options li { display: flex; justify-content: center; align-items: baseline; gap: .42em; text-align: left; white-space: nowrap; }
  .question-screen .answer-button { position: absolute; left: 34.7%; top: 76.3%; width: 28.9%; height: 10.1%; min-height: 0; margin: 0; padding: 0; color: #fffaf4 !important; background: transparent !important; box-shadow: none; pointer-events: auto; }
  .question-screen .answer-button::before { display: none; }
  .overlay { display: block; padding: 0; background: url("./assets/images/网页预览-答案-纯文字模板.png?v=2") center / 100% 100% no-repeat; backdrop-filter: none; }
  .overlay.has-media { background-image: url("./assets/images/网页预览-答案-视频模板.png?v=2"); }
  .answer-modal { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; max-height: none; padding: 0; display: block; border-radius: 0; background: transparent; box-shadow: none; }
  .answer-modal::before { display: none; }
  .answer-modal > .ornament-frame, .answer-modal .answer-doll { display: none; }
  .answer-page-title, .answer-modal > h2 { display: none; }
  .answer-top-home, .answer-top-remaining { color: #873d47; font: 900 clamp(16px,1.35vw,25px)/1 "Songti SC","STSong",serif; -webkit-text-stroke: .2px currentColor; }
  .answer-modal > #answer-text, .answer-modal:not(.has-media) > #answer-text { display: grid; place-items: center; position: absolute; z-index: 8; left: 26.9%; top: 31.2%; width: 46.5%; height: 39%; max-width: none; margin: 0; padding: 3%; color: #4f2525; text-align: center; text-wrap: balance; word-break: normal; overflow-wrap: break-word; font: 900 clamp(42px,3.45vw,64px)/1.48 "Songti SC","STSong",serif; -webkit-text-stroke: .55px currentColor; }
  .answer-modal.has-media > #answer-text { left: 28.05%; top: 32.8%; width: 28.1%; height: 35%; padding: 2.25%; font-size: clamp(33px,2.65vw,49px); }
  .answer-modal.long-answer > #answer-text { font-size: clamp(31px,2.55vw,47px); }
  .answer-modal.has-media.long-answer > #answer-text { font-size: clamp(27px,2.15vw,40px); }
  .media-preview { position: absolute; z-index: 8; left: 57.48%; top: 34.2%; width: 12.86%; height: 36.55%; aspect-ratio: 9 / 16; margin: 0; border: 0; border-radius: 12px; overflow: hidden; }
  .media-preview img, .media-preview video { width: 100%; height: 100%; object-fit: cover; }
  .video-placeholder-note { display: block; position: absolute !important; z-index: 9; left: 57.48%; top: 66.6%; width: 12.86%; margin: 0 !important; text-align: center; font: 600 clamp(10px,.72vw,14px)/1.2 var(--display) !important; }
  .answer-actions, .answer-modal:not(.has-media) .answer-actions { position: absolute; z-index: 9; left: 31.2%; top: 73.4%; width: 37.5%; height: 9.3%; display: flex; gap: 3.8%; margin: 0; }
  .answer-modal:not(.has-media) .answer-actions { top: 73.4%; }
  .return-question, .answer-actions .next-button { width: 48.5%; min-height: 0; height: 100%; margin: 0; padding: 0; display: grid; place-items: center; color: #873d47; border: 0; background: transparent; box-shadow: none; font: 900 clamp(17px,1.4vw,26px)/1 "Songti SC","STSong",serif; -webkit-text-stroke: .2px currentColor; }
  .return-question span, .answer-actions .next-button span { position: relative; top: 1px; line-height: 1; }
  .question-screen .answer-button { font: 900 clamp(20px,1.72vw,32px)/1 "Songti SC","STSong",serif; -webkit-text-stroke: .2px currentColor; text-shadow: 0 2px 4px rgba(112,38,55,.42); }
  .question-screen button, .answer-modal button, .history-modal, .complete-panel { font-family: "Songti SC","STSong",serif; font-weight: 900; }
  .question-screen .answer-button:hover, .question-screen .back-button:hover, .answer-top-home:hover, .return-question:hover, .answer-actions .next-button:hover, .question-history:hover, .reset-progress:hover, .music-toggle:hover { transform: none; filter: none; box-shadow: none; }
  .question-screen .answer-button span, .question-screen .back-button span, .answer-top-home span, .return-question span, .answer-actions .next-button span, .question-history span, .reset-progress span, .music-toggle span { display: inline-block; transition: transform .18s ease,text-shadow .18s ease,color .18s ease; }
  .question-screen .answer-button:hover span, .question-screen .back-button:hover span, .answer-top-home:hover span, .return-question:hover span, .answer-actions .next-button:hover span, .question-history:hover span, .reset-progress:hover span, .music-toggle:hover span { transform: scale(1.1); text-shadow: 0 0 5px #fff,0 0 12px #ffd985,0 2px 3px rgba(92,39,47,.35); }
}

/* 仅在真正放大的桌面窗口中柔化无人物背景；普通窗口保持原版显示。 */
@media (min-width: 1280px), (min-height: 1000px) {
  .app-shell {
    --large-stage-width: min(100vw, calc(100dvh * 1.7787234));
    --large-stage-height: min(100dvh, calc(100vw / 1.7787234));
    isolation: isolate;
  }
  .app-shell::before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    width: var(--large-stage-width);
    height: var(--large-stage-height);
    pointer-events: none;
    background: url("./assets/images/樱花道路背景.png") center / 100% 100% no-repeat;
    filter: blur(24px) saturate(.9) brightness(1.03);
    transform: translate(-50%,-50%) scale(1.24);
    box-shadow: 0 0 90px 55px rgba(245,207,211,.78);
  }
  .screen { z-index: 1; }
}

/* 超宽全屏时只柔化左右接缝；普通窗口与 16:9 全屏保持原样。 */
@media (min-width: 1280px) and (min-aspect-ratio: 18/10) {
  .screen,
  .overlay {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 4.5%, #000 95.5%, transparent 100%);
  }
}

.orientation-hint { display: none; }

@media (max-width: 900px) and (orientation: landscape) {
  .app-shell {
    min-height: 0;
    isolation: isolate;
    background: #efc5c7;
  }
  .app-shell::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -32px;
    pointer-events: none;
    background: url("./assets/images/樱花道路背景.png") center / cover no-repeat;
    filter: blur(22px) saturate(.92) brightness(1.04);
    transform: scale(1.1);
  }
  .screen,
  .overlay {
    -webkit-mask-image: linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
    mask-image: linear-gradient(to right,transparent 0,#000 5%,#000 95%,transparent 100%);
  }
}

/* 手机竖屏时提示旋转；横屏后直接使用网页版的完整构图与坐标。 */
@media (max-width: 900px) and (orientation: portrait) {
  .orientation-hint {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    color: #762f3d;
    text-align: center;
    background:
      linear-gradient(rgba(255,246,242,.72),rgba(250,214,218,.76)),
      url("./assets/images/樱花道路背景.png") center / cover no-repeat;
    backdrop-filter: blur(10px);
  }
  .orientation-hint > div {
    width: min(86vw,420px);
    padding: 34px 24px 30px;
    border: 2px solid rgba(198,143,54,.82);
    border-radius: 28px;
    background: rgba(255,250,240,.94);
    box-shadow: 0 18px 48px rgba(94,42,49,.24), inset 0 1px #fff;
  }
  .orientation-hint span { display: block; margin-bottom: 10px; font-size: 58px; line-height: 1; }
  .orientation-hint strong { display: block; font: 900 28px/1.3 "Songti SC","STSong",serif; }
  .orientation-hint p { margin: 12px 0 0; font: 800 17px/1.55 "Songti SC","STSong",serif; }
}