/* The next two chapters keep the same paper and ink palette, with distinct compositions. */
.scene-three {
  background: radial-gradient(ellipse at 48% 37%, #fffdf4 0%, #fff8e7 58%, #f3e9d5 100%);
}
.scene-three-halo { position: absolute; left: 28%; top: 19%; width: 44vw; height: 40vh; border-radius: 50%; background: radial-gradient(ellipse,#ffe8aa7c,transparent 70%); filter: blur(22px); }
.scene-three-orbit { position: absolute; border: 1px solid #beab8252; border-radius: 50%; pointer-events: none; }
.orbit-one { left: -9vw; top: 31vh; width: 32vw; height: 28vw; transform: rotate(-27deg); }
.orbit-two { right: -12vw; top: 37vh; width: 29vw; height: 22vw; transform: rotate(23deg); }
.text-area-three { top: 24%; width: min(870px,74vw); }
.text-area-three .phrase { font-size: clamp(36px,3.7vw,57px); }
.text-area-three .text-spark { margin-bottom: 15px; }
.text-area-three .text-underline { margin-top: 18px; }
.choice-scroll-hint { display: none; }

.choice-gallery { position: absolute; z-index: 6; left: 50%; top: 40%; width: min(1190px,94vw); height: min(45vh,410px); display: flex; justify-content: space-between; align-items: stretch; transform: translateX(-50%); transition: opacity .8s ease, transform .8s var(--ease); }
.choice { position: relative; display: block; width: 31%; height: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); opacity: .45; transition: opacity .8s ease, transform .8s var(--ease); }
.choice:disabled { cursor: default; }
.scene-three.has-second .choice { opacity: .74; }
.scene-three.has-third .choice { opacity: 1; }
.choice:not(:disabled):hover { transform: translateY(-4px); }
.choice-art { position: absolute; display: block; left: 0; right: 0; top: 0; height: calc(100% - 56px); transform: translateZ(0); transition: opacity .22s ease; }
.choice.is-resetting .choice-art { opacity: 0; }
.choice-art img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.choice-caption { position: absolute; display: inline-flex; align-items: center; justify-content: center; gap: 9px; left: 50%; bottom: 7px; width: max-content; max-width: 100%; min-height: 36px; padding: 3px 0; transform: translateX(-50%); color: #594735; font-size: clamp(16px,1.55vw,20px); line-height: 1.15; white-space: nowrap; opacity: 0; transition: opacity .45s ease, color .3s ease; }
.scene-three.has-fourth .choice-caption, .scene-three.has-fifth .choice-caption { opacity: 1; }
.choice[aria-pressed="true"] .choice-caption { color: #9d655b; }
.choice-mark, .find-mark { display: inline-grid; flex: none; width: 19px; height: 19px; place-items: center; border: 1px solid #b69854; border-radius: 50%; background: #fff2d5; color: #846947; }
.choice-mark svg, .find-mark svg { display: block; width: 10px; height: 10px; fill: currentColor; }
.choice[aria-pressed="true"] .choice-mark { opacity: .52; }
.choice-ground { position: absolute; left: 12%; right: 7%; bottom: 8%; height: 8%; border-radius: 50%; background: #9d856529; filter: blur(8px); }

.choice-badminton .racket-art { z-index: 2; left: 9%; top: -7%; height: 108%; width: auto; transform: rotate(-3deg); transform-origin: 83% 94%; filter: drop-shadow(7px 8px 7px #66574624); }
.choice-badminton .shuttle-art { z-index: 3; width: 35%; left: 60%; top: 12%; transform: rotate(7deg); filter: drop-shadow(4px 5px 5px #695a4d27); }
.shuttle-trail { position: absolute; left: 66%; top: 17%; width: 26%; height: 21%; border-top: 1.5px solid #cfac6e; border-radius: 50%; transform: rotate(-20deg); opacity: 0; }
.choice-badminton.is-reacting .racket-art { animation: racket-swing 1.55s var(--ease) both; }
.choice-badminton.is-reacting .shuttle-art { animation: shuttle-flight 1.55s var(--ease) both; }
.choice-badminton.is-reacting .shuttle-trail { animation: trail-appear 1.55s ease both; }
@keyframes racket-swing { 0%,100% { transform: rotate(-3deg); } 22% { transform: rotate(-13deg); } 43% { transform: rotate(11deg); } 65% { transform: rotate(-5deg); } }
@keyframes shuttle-flight { 0%,30%,100% { transform: translate(0,0) rotate(7deg); } 53% { transform: translate(22%,-43%) rotate(-11deg); } 76% { transform: translate(46%,-65%) rotate(-24deg); } }
@keyframes trail-appear { 0%,32%,86%,100% { opacity: 0; } 49%,68% { opacity: .8; } }

.choice-bowling .lane-art { z-index: 0; left: 0; bottom: 3%; width: 100%; filter: drop-shadow(5px 8px 6px #5e4e4022); }
.choice-bowling .pin-art { z-index: 2; width: 18%; top: 15%; filter: drop-shadow(3px 5px 4px #55483825); transform-origin: 50% 94%; }
.choice-bowling .pin-one { left: 58%; top: 19%; }
.choice-bowling .pin-two { left: 66%; top: 15%; }
.choice-bowling .pin-three { left: 75%; top: 20%; }
.choice-bowling .pin-four { left: 67%; top: 25%; z-index: 3; }
.choice-bowling .ball-art { z-index: 4; left: 12%; bottom: 12%; width: 32%; transform-origin: 50% 50%; filter: drop-shadow(4px 6px 5px #56473936); }
.choice-bowling.is-reacting .ball-art { animation: ball-roll 1.8s cubic-bezier(.37,.05,.3,1) forwards; }
.choice-bowling.is-reacting .pin-one { animation: pin-fall-left 1.8s ease forwards; }
.choice-bowling.is-reacting .pin-two { animation: pin-fall-right 1.8s ease forwards; }
.choice-bowling.is-reacting .pin-three { animation: pin-fall-right 1.8s ease forwards; animation-delay: .09s; }
.choice-bowling.is-reacting .pin-four { animation: pin-fall-left 1.8s ease forwards; animation-delay: .19s; }
@keyframes ball-roll { 0% { transform: translate(0,0) rotate(0); } 45% { transform: translate(120%,-32%) rotate(160deg); } 68%,100% { transform: translate(147%,-44%) rotate(215deg); } }
@keyframes pin-fall-left { 0%,43% { transform: translate(0,0) rotate(0); } 69%,100% { transform: translate(-38%,12%) rotate(-72deg); } }
@keyframes pin-fall-right { 0%,43% { transform: translate(0,0) rotate(0); } 69%,100% { transform: translate(38%,13%) rotate(75deg); } }

.choice-friends { transform: translateY(9px); }
.choice-friends:not(:disabled):hover { transform: translateY(4px); }
.choice-friends .table-art { z-index: 0; left: 0; top: 5%; width: 100%; filter: drop-shadow(7px 10px 7px #5c4d4026); }
.choice-friends .cup-art { z-index: 2; width: 25%; filter: drop-shadow(3px 5px 4px #5a483825); }
.choice-friends .cup-one { left: 23%; top: 24%; transform: rotate(-18deg); }
.choice-friends .cup-two { left: 54%; top: 27%; transform: rotate(21deg); }
.choice-friends .cup-three { left: 40%; top: 57%; transform: rotate(103deg); }
.toast-ray { position: absolute; z-index: 3; left: 51%; top: 47%; width: 17px; height: 1.5px; border-radius: 2px; background: #EAB84D; box-shadow: 0 0 8px #F4DA88; opacity: 0; }
.ray-one { transform: translate(-50%,-50%) rotate(17deg); }.ray-two { transform: translate(-50%,-50%) rotate(90deg); }.ray-three { transform: translate(-50%,-50%) rotate(150deg); }
.choice-friends.is-reacting .cup-one { animation: cup-meet-one 1.45s var(--ease) both; }
.choice-friends.is-reacting .cup-two { animation: cup-meet-two 1.45s var(--ease) both; }
.choice-friends.is-reacting .cup-three { animation: cup-meet-three 1.45s var(--ease) both; }
.choice-friends.is-reacting .toast-ray { animation: toast-flash 1.45s ease both; }
@keyframes cup-meet-one { 0%,100% { transform: translate(0,0) rotate(-18deg); } 43%,62% { transform: translate(10px,5px) rotate(-11deg); } }
@keyframes cup-meet-two { 0%,100% { transform: translate(0,0) rotate(21deg); } 43%,62% { transform: translate(-10px,4px) rotate(14deg); } }
@keyframes cup-meet-three { 0%,100% { transform: translate(0,0) rotate(103deg); } 43%,62% { transform: translate(0,-9px) rotate(95deg); } }
@keyframes toast-flash { 0%,35%,72%,100% { opacity: 0; } 47%,60% { opacity: 1; } }
.scene-three.is-leaving .choice-badminton { transform: translate(-90vw,4vh) scale(.72); opacity: 0; }
.scene-three.is-leaving .choice-friends { transform: translateY(46vh) scale(.72); opacity: 0; }
.scene-three.is-leaving .choice-bowling { transform: translate(90vw,4vh) scale(.72); opacity: 0; }

.scene-four { background: radial-gradient(ellipse at 42% 55%,#fffaf0 0%,#f8efdf 62%,#e8deca 100%); }
.scene-four-wash { position: absolute; left: -9vw; bottom: -20vw; width: 47vw; height: 47vw; border-radius: 50%; background: radial-gradient(circle,#f0d5ae65,transparent 68%); filter: blur(17px); }
.memory-line { position: absolute; width: 23vw; height: 12vw; border: 1px solid #c5b4916b; border-bottom: 0; border-left: 0; border-radius: 50%; }
.memory-line-one { top: 31%; left: 12%; transform: rotate(-14deg); }.memory-line-two { right: 9%; bottom: 8%; transform: rotate(148deg); }
.text-area-four { top: 22%; width: min(860px,75vw); }
.text-area-four .phrase { font-size: clamp(35px,3.55vw,54px); }
.text-area-four .text-spark { margin-bottom: 15px; }.text-area-four .text-underline { margin-top: 19px; }
.memory-spread { position: absolute; z-index: 5; left: 50%; top: 38%; width: min(1000px,85vw); height: min(47vh,425px); transform: translateX(-50%); }
.paper-slip { position: absolute; display: grid; gap: 10px; align-content: center; padding: 18px; background: #fff8e8; border: 1px solid #cdbb99; box-shadow: 5px 9px 20px #5949361c; }
.paper-slip span { display: block; height: 1px; background: #b9a7898c; }
.slip-one { width: 25%; height: 66%; left: 36%; top: 6%; transform: rotate(-14deg); }
.slip-two { width: 25%; height: 41%; right: 2%; bottom: 1%; transform: rotate(13deg); background: #f4e6d0; }
.photo-sheet { position: absolute; z-index: 2; left: 14%; top: 0; width: min(29%,290px); margin: 0; padding: 10px 10px 17px; background: #fffdf5; border: 1px solid #c8b99b; box-shadow: 11px 18px 27px #51442e3d, inset 0 0 0 3px #fff6e8; transform: rotate(-5deg); transition: transform .75s var(--ease), opacity .65s ease; }
.photo-mask { width: 100%; overflow: hidden; clip-path: inset(0 47% 0 47%); transition: clip-path 1.05s var(--ease); }
.scene-four.is-revealed .photo-mask { clip-path: inset(0 0 0 0); }
.photo-mask img { display: block; width: 100%; height: auto; }
.china-card, .horse-card { position: absolute; z-index: 3; display: block; padding: 0; border: 0; background: transparent; color: var(--ink); opacity: .65; transition: transform .6s var(--ease), opacity .6s ease, filter .6s ease; }
.china-card { left: 57%; top: 5%; width: 20%; height: 55%; min-height: 180px; transform: rotate(7deg); perspective: 1000px; }
.china-card:disabled, .horse-card:disabled { cursor: default; }
.scene-four.has-second .china-card { opacity: 1; }
.scene-four.has-fourth .china-card { filter: drop-shadow(0 0 17px #edc46b8c); }
.china-card-inner { position: absolute; inset: 0; display: block; transform-style: preserve-3d; transition: transform .67s var(--ease); }
.china-card.is-flipped .china-card-inner { transform: rotateY(180deg); }
.china-face { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 15px; background: linear-gradient(140deg,#fffaf0,#f4e9d5); border: 1px solid #ad9674; box-shadow: 7px 11px 18px #5d4a3433, inset 0 0 0 7px #fff8eaa6; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.china-face::before { content: ""; position: absolute; inset: 11px; border: 1px solid #c9b692; pointer-events: none; }
.china-front { font-family: "Noto Serif CJK SC","Noto Sans CJK SC","Microsoft YaHei","PingFang SC","SimSun",sans-serif; font-size: clamp(27px,3vw,41px); font-weight: 400; letter-spacing: .05em; white-space: nowrap; }
.china-back { transform: rotateY(180deg); text-align: center; font-size: clamp(17px,1.6vw,23px); line-height: 1.35; text-wrap: balance; }
.find-mark { position: absolute; z-index: 5; top: -9px; right: -9px; width: 23px; height: 23px; opacity: 0; box-shadow: 0 3px 8px #70583b30; transition: opacity .4s ease; }
.scene-four.has-second .china-card .find-mark, .scene-four.has-third .china-card .find-mark, .scene-four.has-fourth .china-card .find-mark, .scene-four.has-fifth .china-card .find-mark,
.scene-four.has-third .horse-card .find-mark, .scene-four.has-fourth .horse-card .find-mark, .scene-four.has-fifth .horse-card .find-mark { opacity: 1; }
.china-card.is-flipped .find-mark { opacity: .48 !important; }
.horse-card { left: 69%; top: 57%; width: 21%; height: 38%; min-height: 120px; transform: translate(15px,9px) rotate(11deg); opacity: 0; }
.scene-four.has-third .horse-card, .scene-four.has-fourth .horse-card, .scene-four.has-fifth .horse-card { opacity: 1; transform: translate(0,0) rotate(11deg); }
.horse-card.is-tilting { animation: horse-tilt .65s var(--ease); }
@keyframes horse-tilt { 0%,100% { transform: rotate(11deg); } 50% { transform: rotate(2deg) translateY(-3px); } }
.horse-paper { position: absolute; inset: 0; display: block; padding: 9px; background: #fffaf0; border: 1px solid #bba485; box-shadow: 8px 12px 17px #50442f2d, inset 0 0 0 3px #fff4df; }
.horse-portrait { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(#f8ecd8,#e7dbc2); }
.horse-portrait img { position: absolute; width: 190%; max-width: none; height: auto; left: -46%; top: -15%; }
.scene-four.has-third .slip-one, .scene-four.has-fourth .slip-one, .scene-four.has-fifth .slip-one { transform: translate(-8px,-6px) rotate(-17deg); transition: transform .8s var(--ease); }
.scene-four.has-third .slip-two, .scene-four.has-fourth .slip-two, .scene-four.has-fifth .slip-two { transform: translate(7px,4px) rotate(17deg); transition: transform .8s var(--ease); }
.scene-four.is-leaving .photo-sheet { transform: translateX(-80vw) rotate(-18deg) scale(.8); opacity: 0; }
.scene-four.is-leaving .china-card { transform: translateX(80vw) rotate(18deg) scale(.8); opacity: 0; }
.scene-four.is-leaving .horse-card { transform: translate(75vw,25vh) rotate(20deg) scale(.7); opacity: 0; }
.scene-four.is-leaving .paper-slip { opacity: 0; transition: opacity .5s ease; }

.paper-transition { position: absolute; z-index: 45; inset: 0; background: #f8efdf; opacity: 0; pointer-events: none; transition: opacity .65s ease; }
.paper-transition.is-covering { opacity: 1; }
.paper-transition.is-opening { opacity: 0; }
.transition-slip { position: absolute; background: #fffaf0; border: 1px solid #d2c1a4; box-shadow: 10px 16px 26px #6d584029; }
.transition-slip-one { left: 22%; top: 20%; width: 22%; height: 55%; transform: rotate(-7deg); }
.transition-slip-two { left: 48%; top: 18%; width: 21%; height: 54%; transform: rotate(9deg); }
.transition-slip-three { left: 62%; top: 43%; width: 16%; height: 32%; transform: rotate(-10deg); }
.ending-lines { position: absolute; inset: 0; pointer-events: none; }
.ending-lines i { position: absolute; display: block; height: 1px; background: linear-gradient(to right,transparent,#d9cba6,transparent); transform: rotate(-12deg); }
.ending-lines i:nth-child(1) { width: 38vw; left: 4%; top: 28%; }.ending-lines i:nth-child(2) { width: 31vw; right: 4%; top: 67%; transform: rotate(15deg); }.ending-lines i:nth-child(3) { width: 16vw; left: 48%; bottom: 15%; transform: rotate(28deg); }

body[data-stage="three"] .bee { left: 88%; top: 23%; transform: translate(-50%,-50%) rotate(-5deg) scale(.64); }
body[data-stage="four"] .bee { left: 86%; top: 22%; transform: translate(-50%,-50%) rotate(3deg) scale(.62); }
body[data-stage="four"] .bee.is-shifted { left: 81%; top: 17%; transform: translate(-50%,-50%) rotate(-3deg) scale(.62); }

@media (max-width: 700px) {
  .scene-three-halo { left: -20%; top: 13%; width: 140vw; height: 56vh; }
  .orbit-one { width: 80vw; height: 65vw; left: -31vw; top: 40%; }.orbit-two { width: 83vw; height: 57vw; right: -40vw; top: 47%; }
  .text-area-three { top: 27%; width: calc(100% - 34px); }
  .text-area-three .phrase { font-size: clamp(28px,7.7vw,36px); line-height: 1.16; }
  .text-area-three .text-spark { margin-bottom: 10px; }.text-area-three .text-underline { margin-top: 12px; }
  .choice-scroll-hint { position: absolute; z-index: 7; display: block; top: calc(44% - 24px); left: 0; width: 100%; color: #8c7358; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .04em; text-align: center; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
  .scene-three.has-fourth .choice-scroll-hint { opacity: 1; }
  .choice-gallery { left: 0; top: 44%; width: 100%; height: 43%; min-height: 250px; justify-content: flex-start; gap: 16px; padding: 0 calc((100vw - min(76vw,290px))/2); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; transform: none; scrollbar-width: none; touch-action: pan-x; }
  .choice-gallery::-webkit-scrollbar { display: none; }
  .choice { flex: 0 0 min(76vw,290px); width: min(76vw,290px); scroll-snap-align: center; }
  .choice-art { height: calc(100% - 43px); }
  .choice-caption { bottom: 1px; font-size: 17px; }
  .choice-badminton .racket-art { left: 8%; top: -13%; height: 115%; }
  .choice-badminton .shuttle-art { left: 63%; width: 37%; top: 11%; }
  .choice-bowling .pin-art { width: 18%; top: 12%; }
  .choice-bowling .pin-one { top: 17%; }.choice-bowling .pin-two { top: 13%; }.choice-bowling .pin-three { top: 18%; }.choice-bowling .pin-four { top: 23%; }
  .choice-friends .table-art { top: 0; }.choice-friends .cup-one { top: 20%; }.choice-friends .cup-two { top: 23%; }.choice-friends .cup-three { top: 53%; }
  .scene-three.is-leaving .choice-gallery { opacity: 0; transform: scale(.75); }
  body[data-stage="three"] .bee { left: 18%; top: 9%; transform: translate(-50%,-50%) rotate(-5deg) scale(.43); }

  .scene-four-wash { width: 110vw; height: 110vw; left: -44vw; bottom: -22vw; }
  .memory-line-one { top: 37%; left: -12%; width: 60vw; height: 35vw; }.memory-line-two { right: -25%; bottom: 4%; width: 60vw; height: 32vw; }
  .text-area-four { top: 27%; width: calc(100% - 36px); }
  .text-area-four .phrase { font-size: clamp(28px,7.7vw,35px); line-height: 1.16; }
  .text-area-four .text-spark { margin-bottom: 10px; }.text-area-four .text-underline { margin-top: 12px; }
  .memory-spread { top: 45%; width: calc(100% - 12px); height: 41%; min-height: 246px; }
  .photo-sheet { left: 3%; top: 0; width: 48%; padding: 6px 6px 11px; }
  .china-card { left: 55%; top: 2%; width: 37%; height: 52%; min-height: 138px; }
  .china-front { font-size: clamp(23px,6.9vw,30px); }
  .china-back { font-size: clamp(15px,4vw,19px); padding: 11px; }
  .china-face::before { inset: 7px; }
  .horse-card { left: 54%; top: 60%; width: 39%; height: 36%; min-height: 98px; }
  .horse-paper { padding: 6px; }.horse-portrait img { top: -14%; }
  .slip-one { left: 43%; top: 9%; width: 34%; height: 56%; }.slip-two { right: 1%; bottom: 5%; width: 42%; height: 40%; }
  body[data-stage="four"] .bee { left: 17%; top: 9%; transform: translate(-50%,-50%) rotate(2deg) scale(.41); }
  body[data-stage="four"] .bee.is-shifted { left: 13%; top: 8%; transform: translate(-50%,-50%) rotate(-3deg) scale(.41); }
  .transition-slip-one { left: 5%; top: 31%; width: 45%; height: 40%; }.transition-slip-two { left: 52%; top: 29%; width: 40%; height: 37%; }.transition-slip-three { left: 56%; top: 53%; width: 38%; height: 24%; }
  .ending-lines i:nth-child(1) { width: 77vw; left: -20%; top: 23%; }.ending-lines i:nth-child(2) { width: 75vw; right: -19%; top: 73%; }.ending-lines i:nth-child(3) { width: 45vw; left: 48%; bottom: 12%; }
}

@media (max-width: 375px) and (max-height: 640px) {
  .text-area-three { top: 25%; }
  .text-area-three .phrase, .text-area-four .phrase { font-size: 27px; }
  .choice-gallery { top: 42%; height: 45%; min-height: 238px; }
  .choice-scroll-hint { top: calc(42% - 24px); }
  .text-area-four { top: 25%; }
  .memory-spread { top: 44%; height: 43%; min-height: 230px; }
}