* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #10111a; color: #f4f1ff; font-family: "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif; overscroll-behavior: none; }
#app { position: relative; height: 100dvh; max-width: 560px; margin: 0 auto; overflow: hidden; user-select: none; }
#stage { position: absolute; inset: 0; cursor: pointer; }
#bgs { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; background: #2a2d45; }
.bg { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; opacity: 0; transition: opacity .6s ease; will-change: opacity, transform; }
.bg.on { opacity: 1; }
.bg { translate: var(--px, 0%) 0; transition: opacity .6s ease, translate 1.2s cubic-bezier(.3,.7,.3,1), filter .9s ease; }
.tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: background-color .9s ease; }
.ambient { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.bgm-pan-left { animation: bg-pan-left 14s ease-out forwards; }
.bgm-pan-right { animation: bg-pan-right 14s ease-out forwards; }
.bgm-zoom-in { animation: bg-zoom-in 14s ease-out forwards; }
.bgm-zoom-out { animation: bg-zoom-out 14s ease-out forwards; }
@keyframes bg-pan-left { from { transform: translateX(2.5%); } to { transform: translateX(-2.5%); } }
@keyframes bg-pan-right { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }
@keyframes bg-zoom-in { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes bg-zoom-out { from { transform: scale(1.07); } to { transform: scale(1); } }

#chars { position: absolute; inset: 0; pointer-events: none; }
.chr { position: absolute; bottom: 6%; height: 76%; left: 50%; transform: translateX(-50%); transition: left .55s cubic-bezier(.2,.8,.2,1), filter .3s ease; will-change: transform, opacity; }
.chr.pos-left { left: 28%; }
.chr.pos-right { left: 72%; }
#chars[data-n="2"] .chr, #chars[data-n="3"] .chr { height: 67%; }
#chars[data-n="3"] .chr.pos-left { left: 20%; }
#chars[data-n="3"] .chr.pos-right { left: 80%; }
.chr.dim { filter: brightness(.72) saturate(.85); z-index: 1; }
.chr.speaking { z-index: 3; }
.chr.missing img { visibility: hidden; }
.chr.missing .breath { width: 30vw; max-width: 200px; border-radius: 48% 48% 14% 14% / 30% 30% 10% 10%; background: radial-gradient(circle at 50% 22%, rgba(20,22,36,.78) 0 17%, transparent 17.5%), linear-gradient(180deg, transparent 0 36%, rgba(20,22,36,.72) 36%); }
.chr.missing::after { content: attr(data-name); position: absolute; left: 50%; top: 40%; transform: translateX(-50%); padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.12); font-size: 13px; white-space: nowrap; }
.chr .breath { height: 100%; transform-origin: 50% 100%; animation: breathe 4.2s ease-in-out infinite; }
.chr .body { height: 100%; position: relative; transform-origin: 50% 100%; }
.chr img { height: 100%; display: block; transform-origin: 50% 100%; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
/* The art is cut flat at its bottom row; fading the last rows means a zoom-out never shows a hard edge across the legs. */
.chr img, .chr canvas.bounce { -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
.chr canvas.bounce { transform-origin: 50% 100%; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 6px 14px rgba(0,0,0,.35)); }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.006, 1.014); } }

.chr.in-fade { animation: in-fade .4s ease both; }
.chr.in-rise { animation: in-rise .5s cubic-bezier(.2,.8,.2,1) both; }
.chr.in-slide-left { animation: in-slide-left .55s cubic-bezier(.2,.8,.2,1) both; }
.chr.in-slide-right { animation: in-slide-right .55s cubic-bezier(.2,.8,.2,1) both; }
.chr.out-fade { animation: out-fade .4s ease forwards; }
.chr.out-left { animation: out-left .45s ease-in forwards; }
.chr.out-right { animation: out-right .45s ease-in forwards; }
@keyframes in-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes in-rise { from { opacity: 0; translate: 0 6%; } to { opacity: 1; translate: 0 0; } }
@keyframes in-slide-left { from { opacity: 0; translate: -55vw 0; } to { opacity: 1; translate: 0 0; } }
@keyframes in-slide-right { from { opacity: 0; translate: 55vw 0; } to { opacity: 1; translate: 0 0; } }
@keyframes out-fade { to { opacity: 0; } }
@keyframes out-left { to { opacity: 0; translate: -55vw 0; } }
@keyframes out-right { to { opacity: 0; translate: 55vw 0; } }

.act-hop { animation: act-hop .55s cubic-bezier(.3,.7,.4,1); }
.act-bob { animation: act-bob .5s ease-in-out; }
.act-shake { animation: act-shake .45s ease-in-out; }
.act-startle { animation: act-startle .5s ease-out; }
.act-droop { animation: act-droop 1.4s ease-in-out; }
.act-lean { animation: act-lean 1.4s ease-in-out; }
.act-tilt { animation: act-tilt 1.4s ease-in-out; }
.act-sway { animation: act-sway 2.4s ease-in-out; }
.act-huff { animation: act-huff .45s ease-out; }
@keyframes act-hop { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-6%); } 60% { transform: translateY(0); } 78% { transform: translateY(-2%); } }
@keyframes act-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5%); } }
@keyframes act-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-3%); } 40% { transform: translateX(3%); } 60% { transform: translateX(-2%); } 80% { transform: translateX(2%); } }
@keyframes act-startle { 0% { transform: translateY(0); } 25% { transform: translateY(-4%) scale(1.02); } 50% { transform: translateX(-1.5%); } 75% { transform: translateX(1.5%); } 100% { transform: none; } }
@keyframes act-droop { 0%, 100% { transform: none; } 35%, 75% { transform: translateY(3%) scale(.985); } }
@keyframes act-lean { 0%, 100% { transform: none; } 30%, 75% { transform: rotate(-3deg) translateX(-2%); } }
@keyframes act-tilt { 0%, 100% { transform: none; } 30%, 75% { transform: rotate(3.5deg); } }
@keyframes act-sway { 0%, 100% { transform: none; } 25% { transform: rotate(-2deg); } 75% { transform: rotate(2deg); } }
@keyframes act-huff { 0%, 100% { transform: none; } 40% { transform: scale(1.04, .98); } }

.act-nod { animation: act-nod .7s ease-in-out; }
.act-headshake { animation: act-headshake .7s ease-in-out; }
.act-sigh { animation: act-sigh 1.6s ease-in-out; }
.act-bow { animation: act-bow 1.3s cubic-bezier(.4,0,.3,1); }
.act-jump { animation: act-jump .6s cubic-bezier(.2,.9,.3,1); }
.act-tremble { animation: act-tremble 1.1s linear; }
.act-giggle { animation: act-giggle .8s ease-in-out; }
.act-joy { animation: act-joy .9s cubic-bezier(.3,.7,.4,1); }
.act-approach { animation: act-approach 1.6s ease-out; }
.act-look-down { animation: act-look-down 1.8s ease-in-out; }
.act-glance { animation: act-glance 1.5s ease-in-out; }
@keyframes act-nod { 0%, 100% { transform: none; } 20% { transform: translateY(1.4%) scale(1, .99); } 40% { transform: none; } 60% { transform: translateY(1%) scale(1, .993); } }
@keyframes act-headshake { 0%, 100% { transform: none; } 15% { transform: translateX(-1.2%) rotate(-1.2deg); } 35% { transform: translateX(1.2%) rotate(1.2deg); } 55% { transform: translateX(-.9%) rotate(-.8deg); } 75% { transform: translateX(.6%) rotate(.5deg); } }
@keyframes act-sigh { 0% { transform: none; } 25% { transform: translateY(-.6%) scale(1.005, 1.01); } 55%, 75% { transform: translateY(1.8%) scale(1.01, .975); } 100% { transform: none; } }
@keyframes act-bow { 0%, 100% { transform: none; } 35%, 60% { transform: translateY(6%) scale(1, .93); } }
@keyframes act-jump { 0% { transform: none; } 30% { transform: translateY(-9%) scale(.98, 1.03); } 62% { transform: translateY(0) scale(1.03, .97); } 80% { transform: translateY(-1.5%); } 100% { transform: none; } }
@keyframes act-tremble { 0%, 100% { transform: none; } 10%, 30%, 50%, 70%, 90% { transform: translateX(-.5%); } 20%, 40%, 60%, 80% { transform: translateX(.5%); } }
@keyframes act-giggle { 0%, 100% { transform: none; } 15%, 45%, 75% { transform: translateY(-1.2%) rotate(-.6deg); } 30%, 60%, 90% { transform: translateY(0) rotate(.6deg); } }
@keyframes act-joy { 0%, 50%, 100% { transform: translateY(0); } 22% { transform: translateY(-5%); } 72% { transform: translateY(-3.5%); } }
@keyframes act-approach { 0% { transform: translateY(-2%) scale(.9); opacity: .6; } 100% { transform: none; opacity: 1; } }
@keyframes act-look-down { 0%, 100% { transform: none; } 30%, 75% { transform: translateY(2%) rotate(calc(var(--dir, 1) * -1.2deg)) scale(.99); } }
@keyframes act-glance { 0%, 100% { transform: none; } 30%, 70% { transform: translateX(calc(var(--dir, 1) * 2%)) rotate(calc(var(--dir, 1) * 2.5deg)); } }

.chr .breath { scale: calc(var(--flip, 1) * var(--near, 1)) var(--near, 1); translate: 0 var(--near-y, 0%); transition: scale .45s cubic-bezier(.3,.7,.3,1), translate .6s cubic-bezier(.3,.7,.3,1); }
.chr.turned .breath { --flip: -1; }
.chr.near .breath { --near: 1.08; --near-y: 5%; }
.chr img.prev { position: absolute; left: 0; top: 0; z-index: 1; transition: opacity .3s ease; }
.chr img.prev.gone { opacity: 0; }
.chr.in-run-left { animation: in-run-left .7s cubic-bezier(.2,.8,.3,1) both; }
.chr.in-run-right { animation: in-run-right .7s cubic-bezier(.2,.8,.3,1) both; }
.chr.in-approach { animation: in-approach 1.6s ease-out both; }
.chr.out-run-left { animation: out-run-left .45s cubic-bezier(.5,0,.8,.4) forwards; }
.chr.out-run-right { animation: out-run-right .45s cubic-bezier(.5,0,.8,.4) forwards; }
@keyframes in-run-left { 0% { opacity: 0; translate: -70vw 0; } 25% { translate: -50vw -3%; } 50% { opacity: 1; translate: -25vw 0; } 75% { translate: -8vw -2%; } 100% { translate: 0 0; } }
@keyframes in-run-right { 0% { opacity: 0; translate: 70vw 0; } 25% { translate: 50vw -3%; } 50% { opacity: 1; translate: 25vw 0; } 75% { translate: 8vw -2%; } 100% { translate: 0 0; } }
@keyframes in-approach { from { opacity: 0; scale: .82; translate: 0 -4%; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes out-run-left { 0% { translate: 0 0; } 30% { translate: -15vw -3%; } 60% { translate: -40vw 0; } 100% { opacity: 0; translate: -75vw -2%; } }
@keyframes out-run-right { 0% { translate: 0 0; } 30% { translate: 15vw -3%; } 60% { translate: 40vw 0; } 100% { opacity: 0; translate: 75vw -2%; } }

#bgs, #chars { transform: translateX(var(--cam-x, 0%)) scale(var(--cam-s, 1)); transform-origin: var(--cam-ox, 50%) 34%; transition: transform 1.1s cubic-bezier(.3,.6,.25,1); }

.scr-shake { animation: scr-shake .45s ease-in-out; }
@keyframes scr-shake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(4px, 0); } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#flash.on { animation: flash .6s ease-out; }
@keyframes flash { 0% { opacity: .9; } 100% { opacity: 0; } }

#cg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; pointer-events: none; }
#cg.show { opacity: 1; animation: cg-in .9s ease-out; }
@keyframes cg-in { from { opacity: 0; transform: scale(1.05); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
}
#day { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 12px; padding: 4px 12px; border-radius: 999px; background: rgba(16,17,26,.65); font-size: 13px; letter-spacing: .05em; }
#menu-btn { position: absolute; top: max(8px, env(safe-area-inset-top)); right: 10px; width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(16,17,26,.65); color: #fff; font-size: 20px; }
#textbox { position: absolute; left: 10px; right: 10px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 24%; padding: 26px 18px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(27,29,43,.88), rgba(16,17,26,.94)); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); }
#name { position: absolute; top: -16px; left: 16px; padding: 5px 16px; border-radius: 10px; font-weight: 700; font-size: 15px; background: #6b5bd2; }
#name:empty { display: none; }
#text { font-size: 17px; line-height: 1.65; white-space: pre-wrap; word-break: keep-all; }
#next-mark { position: absolute; right: 16px; bottom: 10px; font-size: 12px; opacity: .7; animation: bob 1s infinite; }
@keyframes bob { 50% { transform: translateY(3px); } }
#choices { position: absolute; left: 0; right: 0; top: auto; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 24% + 14px); max-height: 50%; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; display: none; flex-direction: column; gap: 10px; padding: 18px 22px; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%); }
#choices > :first-child { margin-top: auto; }
#choices-more { position: absolute; left: 50%; bottom: calc(max(12px, env(safe-area-inset-bottom)) + 24% + 8px); translate: -50% 0; z-index: 6; padding: 3px 14px; border-radius: 999px; background: rgba(107,91,210,.92); color: #fff; font-size: 12px; font-weight: 700; pointer-events: none; animation: more-bob 1.4s ease-in-out infinite; }
#choices-more[hidden] { display: none; }
@keyframes more-bob { 50% { translate: -50% 3px; } }
#choices button { flex-shrink: 0; }
#choices.show { display: flex; }
#choices button, .menu button { padding: 12px 16px; border: 1px solid rgba(255,255,255,.25); border-radius: 14px; background: rgba(36,38,62,.92); color: #fff; font-size: 16px; text-align: center; }
#choices button:active, .menu button:active { background: #6b5bd2; }
#overlay { position: absolute; inset: 0; z-index: 10; overflow-y: auto; background: radial-gradient(circle at 50% 20%, #3b3466, #10111a 75%); padding: max(24px, env(safe-area-inset-top)) 20px 24px; }
.menu { display: flex; flex-direction: column; gap: 12px; max-width: 360px; margin: 0 auto; }
.menu h1 { margin: 12vh 0 6px; text-align: center; font-size: 28px; letter-spacing: .04em; }
.menu h2 { margin: 8px 0; text-align: center; }
.menu p { margin: 0 0 18px; text-align: center; opacity: .75; font-size: 14px; }
.menu button[disabled] { opacity: .35; }
.slot small { display: block; opacity: .7; font-size: 12px; margin-top: 4px; }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 16px; }
.gallery div { aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden; background: #24263e; display: grid; place-items: center; font-size: 22px; opacity: .8; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
.viewer { position: fixed; inset: 0; z-index: 20; background: #000; display: grid; place-items: center; }
.viewer img { max-width: 100%; max-height: 100%; }
.toast { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 30; padding: 8px 16px; border-radius: 999px; background: #6b5bd2; font-size: 14px; }

#overlay { background-size: cover; background-position: center; }
#ghost { position: absolute; left: 50%; bottom: 17%; width: 46%; height: 58%; transform: translateX(-50%); pointer-events: none; border-radius: 48% 48% 14% 14% / 30% 30% 10% 10%; background: radial-gradient(circle at 50% 22%, rgba(20,22,36,.78) 0 17%, transparent 17.5%), linear-gradient(180deg, transparent 0 36%, rgba(20,22,36,.72) 36%); animation: in-fade .4s ease both; }
#ghost::after { content: attr(data-name); position: absolute; left: 50%; top: 40%; transform: translateX(-50%); padding: 3px 10px; border-radius: 8px; background: rgba(255,255,255,.12); font-size: 13px; white-space: nowrap; }
#ghost[hidden] { display: none; }
.mini-card { margin-top: 14vh; padding: 28px 18px; border-radius: 18px; text-align: center; background: linear-gradient(160deg, #2e2950, #1b1d2b); border: 1px solid rgba(255,255,255,.18); }
.mini-card small { letter-spacing: .2em; opacity: .6; font-size: 11px; }
.menu h3 { margin: 6px 0 0; font-size: 15px; opacity: .85; }
.records { margin: 0; padding: 0 0 0 18px; font-size: 14px; line-height: 1.7; }
.records .locked { opacity: .4; }
.record { opacity: .6; }
.rel-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 10px 14px; border-radius: 12px; background: rgba(36,38,62,.85); }
.rel-row .hearts { color: #ff7a9a; letter-spacing: 2px; }
.rel-row .rel-label { grid-column: 1 / -1; font-size: 13px; opacity: .75; }
.rel-row.rel-dating { border: 1px solid #ff7a9a; }
.rel-row.rel-broken { opacity: .7; }

#phone { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); width: min(340px, 86%); height: 62%; display: flex; flex-direction: column; border-radius: 26px; background: #f4f1ea; border: 6px solid #22232f; box-shadow: 0 18px 40px rgba(0,0,0,.45); overflow: hidden; color: #1b1d2b; }
#phone[hidden] { display: none; }
#phone-portrait { position: absolute; right: -8%; bottom: -14%; height: 64%; max-width: 78%; object-fit: contain; object-position: bottom right; opacity: .22; pointer-events: none; }
#phone-portrait[hidden] { display: none; }
#phone-title { padding: 10px 14px; background: #2a2c40; color: #fff; font-size: 14px; font-weight: 700; text-align: center; }
#phone-log { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.bubble { max-width: 80%; padding: 8px 12px; border-radius: 16px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.bubble small { display: block; font-size: 11px; font-weight: 700; margin-bottom: 2px; }
.bubble.theirs { align-self: flex-start; background: #fff; border-bottom-left-radius: 4px; }
.bubble.mine { align-self: flex-end; background: #ffe36e; border-bottom-right-radius: 4px; }
.bubble.note { align-self: center; background: none; color: #77788a; font-size: 12px; }
#stage.phone-mode #textbox { min-height: 0; opacity: .0; pointer-events: none; }
#stage.phone-mode #chars { opacity: .35; }
#stage.phone-mode #choices { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }

/* Locale fonts: Latin text uses the system UI face; Simplified Chinese needs SC glyph forms, and Chinese has no spaces so keep-all would never wrap a line. */
html:lang(en) body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Pretendard", sans-serif; }
html:lang(zh) body { font-family: "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Source Han Sans SC", system-ui, sans-serif; }
html:lang(zh) #text { word-break: normal; line-break: strict; }
html:lang(en) #text { word-break: normal; overflow-wrap: break-word; }
html:lang(en) .ms-page { font-family: Georgia, "Times New Roman", serif; }
html:lang(zh) .ms-page { font-family: "Songti SC", "Noto Serif SC", "Noto Serif CJK SC", "SimSun", serif; }
#stage:has(#choices.show) #textbox { min-height: 0; }