@font-face{font-family:StorySerif;src:local('Noto Serif KR'),local('Nanum Myeongjo'),local('Batang');font-display:swap}
:root{color-scheme:dark;--ink:#17131e;--cream:#fff6e8;--rose:#dfb0a5;--muted:#bbadb7;--frame-height:100dvh;--ease:cubic-bezier(.2,.65,.25,1)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#110e16}
body{display:flex;align-items:center;justify-content:center;font-family:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;color:var(--cream);overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;touch-action:manipulation}
button:focus-visible{outline:2px solid #f8cabc;outline-offset:5px}
button:disabled{cursor:default}
[hidden]{display:none!important}
.ambient{position:fixed;inset:-50px;background:linear-gradient(90deg,rgba(12,10,18,.92),rgba(24,14,28,.82),rgba(12,10,18,.92)),url('assets/title.png') center 36%/cover;filter:blur(30px);transform:scale(1.06);pointer-events:none}
.ambient:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent,#100c16 78%)}
.stage{position:relative;isolation:isolate;overflow:hidden;width:min(100vw,calc(var(--frame-height)*.5625));height:min(var(--frame-height),calc(100vw*1.77777778));background:#100e16;box-shadow:0 0 0 1px #dcc7dc18,0 30px 110px #0009;container-type:inline-size;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.media-layer,.scene-poster,.scene-video,.scene-shade,.scene-ui,.qte-mount{position:absolute;inset:0;width:100%;height:100%}
.media-layer{z-index:0;background:#0b0910}
.scene-poster,.scene-video{object-fit:cover;object-position:center}
.scene-poster{transition:opacity .28s}
.scene-video{opacity:0;transition:opacity .17s linear;pointer-events:none;background:transparent}
.scene-video.is-active{opacity:1}
.scene-shade{opacity:0;transition:opacity .4s;background:linear-gradient(180deg,rgba(14,8,20,.25),transparent 28%,transparent 40%,rgba(17,10,24,.08) 54%,rgba(17,10,24,.66));pointer-events:none;z-index:3}
.stage[data-scene=conversation] .scene-shade,.stage[data-scene=thoughts] .scene-shade,.stage[data-scene=choice] .scene-shade{opacity:1}
.game-header{position:absolute;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:calc(18px + env(safe-area-inset-top,0px)) 20px 18px;z-index:30;background:linear-gradient(#110d1d70,transparent);pointer-events:none}
.chapter-mark{display:flex;align-items:center;gap:7px;font-size:9px;letter-spacing:.16em;font-weight:650;text-shadow:0 1px 8px #100818;white-space:nowrap}
.chapter-mark i{width:4px;height:4px;background:var(--rose);border-radius:50%;box-shadow:0 0 10px #ffbfbf66;flex:none}
.header-actions{display:flex;gap:7px;align-items:center;pointer-events:auto}
.icon-button{height:36px;min-width:36px;padding:8px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid #ffefed30;background:#20172545;border-radius:50px;backdrop-filter:blur(15px);transition:background .2s}
.icon-button:hover{background:#3a2a43a0}
.icon-button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block}
.sound-label{font-size:10px;padding-right:3px;white-space:nowrap}
.sound-button.is-on .sound-label{display:none}
.scene-ui{z-index:10;pointer-events:none}
.scene-ui button{pointer-events:auto}
.skip-button{position:absolute;right:22px;bottom:22px;z-index:28;background:#160f2199;border:1px solid #e7d9e02b;border-radius:30px;padding:9px 13px;font-size:10px;letter-spacing:.04em;backdrop-filter:blur(12px);color:#ece2e5cc}
.skip-button span{font-size:18px;vertical-align:-1px;margin-left:6px;line-height:10px}
.title-screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 8.2% 8%;background:linear-gradient(180deg,#100b1905 22%,#120e1700 42%,#130c1d55 58%,#170f20e8 82%,#170f20 100%);animation:slow-appear 1.1s both}
.title-screen:before{content:'';position:absolute;left:8.2%;bottom:49%;height:37px;width:1px;background:linear-gradient(transparent,#e8bcb2aa);opacity:.8}
.title-kicker{color:#e6c8c0;font-size:9px;letter-spacing:.29em;margin:0 0 16px;line-height:1.6}
.title-screen h1{font-family:StorySerif,'Noto Serif KR','Batang',serif;font-weight:500;font-size:clamp(40px,12.5cqw,78px);letter-spacing:-.07em;line-height:1.12;margin:0;color:#fff5e8;text-shadow:0 2px 22px #24101d99}
.title-screen h1 span{color:#e1b4a6;font-weight:400}
.title-subtitle{font-family:StorySerif,'Batang',serif;font-size:clamp(14px,4.3cqw,26px);font-weight:400;letter-spacing:.075em;color:#f4e5df;margin:15px 0 31px;line-height:1.55}
.primary-button{background:var(--cream);color:#32202f;border-radius:3px;min-height:53px;padding:16px 20px;display:flex;width:100%;align-items:center;justify-content:space-between;gap:20px;font-size:14px;font-weight:700;letter-spacing:.05em;box-shadow:0 6px 30px #0002;transition:background .2s,transform .2s}
.primary-button:hover{background:#f0c8b9;transform:translateY(-1px)}
.primary-button:active{transform:translateY(1px)}
.primary-button span{font-size:23px;font-weight:400;line-height:1}
.title-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:16px;font-size:8px;letter-spacing:.16em;color:#e2cdd080}
.title-bottom .tiny-heart{color:#ddb0b0;font-size:10px;letter-spacing:0}
/* Cinematic dialogue: rounded DM bubbles over the original video. */
.dialogue-screen {
  position:absolute; inset:0; pointer-events:auto; cursor:pointer; outline:0;
}
.dialogue-screen:focus-visible { box-shadow:inset 0 0 0 2px #e8dcff99; }
.dialogue-topline {
  position:absolute; top:11.8%; left:6%; right:6%; display:flex; gap:5px;
}
.dialogue-topline span {
  flex:1; height:2px; border-radius:4px; background:#ffffff30;
  transition:background .25s;
}
.dialogue-topline span.filled { background:#fff9; }
.bubble-wrap {
  position:absolute; bottom:13.8%; width:max-content; min-width:53%; max-width:84%;
  animation:bubble-in .3s var(--ease) both;
}
.bubble-wrap.left { left:6%; }
.bubble-wrap.right { right:6%; }
.speaker-profile {
  display:flex; align-items:center; gap:8px; margin:0 3px 10px;
  min-height:32px; pointer-events:none;
}
.bubble-wrap.right .speaker-profile { flex-direction:row-reverse; }
.speaker-avatar {
  flex:none; width:32px; height:32px; border-radius:50%; padding:2px;
  background:linear-gradient(145deg,#f4c8b3 8%,#c78cb7 53%,#9b8fda);
  box-shadow:0 2px 10px #12091b33;
}
.avatar-portrait {
  display:block; width:100%; height:100%; border-radius:50%;
  border:1.5px solid #27202f; background-repeat:no-repeat; background-color:#342a3d;
}
.avatar-yoon {
  background-image:url('assets/poster-07.jpg');
  background-size:100% auto; background-position:50% 23%;
}
.avatar-jaehoo {
  background-image:url('assets/poster-09.jpg');
  background-size:230% auto; background-position:83% 32%;
}
.speaker-label {
  color:#fff9fb; font-size:12px; font-weight:650; letter-spacing:-.01em;
  text-shadow:0 1px 8px #100818bb;
}
.thought-label {
  padding:3px 7px; border:1px solid #e5d8ff30; border-radius:20px;
  font-size:9px; font-weight:500; color:#e5dcf8;
  background:#2921369c; backdrop-filter:blur(12px);
}
.speech-bubble {
  position:relative; padding:18px 20px; border:1px solid #ffffffb3;
  border-radius:22px 22px 22px 7px;
  background:#faf9fd; color:#282330;
  box-shadow:0 8px 30px #10071724,0 1px 3px #10071712;
}
.bubble-wrap.right .speech-bubble {
  border-radius:22px 22px 7px 22px; border-color:#d4b7ff38;
  background:linear-gradient(130deg,#7860b5 0%,#8553a6 100%); color:#fff;
  box-shadow:0 8px 30px #1d0f3233,inset 0 1px 0 #ffffff15;
}
.bubble-text {
  position:relative; font-size:clamp(16px,4.2cqw,23px); font-weight:500;
  line-height:1.65; letter-spacing:-.025em; text-align:left;
  white-space:pre-line; word-break:keep-all; overflow-wrap:anywhere; margin:0;
}
.bubble-wrap.thought { min-width:66%; max-width:86%; bottom:14.5%; }
.thought-bubble {
  position:relative; padding:20px 22px; border:1px solid #e7ddff42;
  border-radius:22px; color:#f6f0ff; background:#30263fd9;
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 30px #0b041e33,inset 0 1px 0 #ffffff0a;
}
.thought-bubble:before,.thought-bubble:after {
  content:''; position:absolute; border-radius:50%; background:#51425e;
  border:1px solid #e7ddff42; width:8px; height:8px; right:20px; bottom:-13px;
}
.thought-bubble:after { width:4px; height:4px; right:12px; bottom:-22px; }
.thought-bubble .bubble-text { font-weight:400; }
.dialogue-footer {
  position:absolute; left:6%; right:6%; bottom:5.4%;
  display:flex; align-items:center; justify-content:center; min-height:32px;
  pointer-events:none;
}
.dialogue-hint {
  display:flex; justify-content:center; align-items:center; gap:8px;
  padding:8px 12px; border:1px solid #ffffff1c; border-radius:30px;
  color:#f2eaf5bf; background:#160e2438; backdrop-filter:blur(12px);
  font-size:10px; font-weight:450; letter-spacing:.015em;
}
.dialogue-hint svg {
  width:11px; height:11px; stroke:currentColor; fill:none; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; animation:hint-breathe 2s infinite;
}
.dialogue-count {
  position:absolute; right:0; font-size:10px; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; color:#f8eff6b3;
}
.dialogue-count span { color:#e9e0ef66; }
.choice-screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:0 7% 10%;background:linear-gradient(transparent 30%,#190e2266 49%,#1c132be8 79%,#1a1026);animation:slow-appear .45s both}
.choice-kicker{font-size:9px;color:#d5b4c4;letter-spacing:.24em;margin:0 0 11px;display:flex;align-items:center;gap:10px}
.choice-kicker:before{content:'';width:19px;height:1px;background:#caa6b5}
.choice-title{font-family:StorySerif,'Batang',serif;font-size:clamp(23px,7cqw,39px);font-weight:400;line-height:1.4;letter-spacing:-.035em;margin:0 0 25px;color:#fff4e5}
.choice-button{position:relative;display:flex;align-items:center;width:100%;gap:16px;text-align:left;margin-top:10px;min-height:64px;padding:17px 18px;border:1px solid #ebced93b;border-radius:3px;background:#281c35a8;backdrop-filter:blur(16px);color:#eee2e6;transition:transform .2s,background .2s,border-color .2s}
.choice-button .choice-index{color:#b59daf;font-size:10px;letter-spacing:.06em;font-family:monospace}
.choice-button .choice-text{font-size:14px;letter-spacing:-.01em;font-weight:500;flex:1}
.choice-button .choice-arrow{font-size:19px;opacity:.7}
.choice-button:hover{transform:translateX(3px);background:#52364e;border-color:#e2bbcc80}
.choice-button.choice-stay{background:#ead3c4;color:#382332;border-color:#eddbc9}.choice-stay .choice-index{color:#896774}.choice-stay:hover{background:#f5dfcf;border-color:#fff}
.choice-footer{margin:19px 0 0;color:#d2bdcc80;font-size:9px;text-align:center;letter-spacing:.08em}
.continue-screen{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:30px;background:linear-gradient(#160b2099,#180d22df 56%,#180d22f5);animation:slow-appear .5s both;text-align:center;pointer-events:auto}
.continue-ornament{width:37px;height:37px;fill:none;stroke:#dcb1b9;stroke-width:1.1;margin-bottom:30px}
.continue-eyebrow{font-size:9px;letter-spacing:.32em;color:#d5b6c2;margin:0 0 15px}
.continue-screen h2{font-family:StorySerif,'Batang',serif;font-size:clamp(28px,9cqw,49px);font-weight:400;letter-spacing:-.055em;line-height:1.4;margin:0 0 16px}
.continue-screen .result-copy{font-size:12px;color:#d6c5d3;line-height:1.8;margin:0 0 32px;letter-spacing:-.025em}
.continue-screen .result-score{color:#d0b1bd;font:11px/1.6 monospace;margin:0 0 9px;letter-spacing:.16em}
.continue-action{position:relative;overflow:hidden;width:100%;max-width:310px;min-height:57px;border:1px solid #e5beb7a6;background:#e4c2b9;color:#32212f;border-radius:3px;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;font-size:12px;font-weight:750;letter-spacing:.13em}
.continue-action:before{content:'';position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--remaining,1));background:#fff1db38;transition:transform .1s linear}
.continue-action span{position:relative}.continue-action .timer{font-family:monospace;font-size:18px;font-weight:500;letter-spacing:0;min-width:28px;text-align:center}
.continue-note{font-size:9px;letter-spacing:.06em;color:#c1aebf8c;margin-top:14px}
.text-button{background:none;color:#c9b9c9;text-decoration:underline;text-underline-offset:4px;font-size:11px;padding:16px 10px}
.overlay-panel{position:absolute;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:28px;background:#120a1ce8;backdrop-filter:blur(14px)}
.panel-card{width:100%;text-align:center}.eyebrow{font-size:9px;color:#bd9eb5;letter-spacing:.25em}.panel-card h2{font-family:StorySerif,'Batang',serif;font-weight:400;font-size:27px;letter-spacing:-.045em;margin:18px 0 12px}.panel-card p{font-size:12px;color:#bfaec1;line-height:1.9;margin:0 0 28px}.panel-card .primary-button{margin-top:12px}
.media-loading{position:absolute;left:50%;top:48%;z-index:45;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;background:#180f25cc;padding:13px 16px;border:1px solid #e3cbe12b;border-radius:40px;font-size:10px;letter-spacing:.02em;backdrop-filter:blur(12px)}
.loading-ring{width:14px;height:14px;border:1px solid #ebcfda40;border-top-color:#e8c7cd;border-radius:50%;animation:spin .8s linear infinite}
.qte-mount{z-index:20}.stage[data-scene=qte] .game-header{background:none;padding-top:12px}.stage[data-scene=qte] .chapter-mark{visibility:hidden}.stage[data-scene=qte] .icon-button{height:29px;min-width:29px;padding:6px;background:#15102ad9;border-radius:0;border-color:#8d688455}.stage[data-scene=qte] .icon-button svg{width:14px;height:14px}.stage[data-scene=qte] .sound-label{display:none}
.desktop-caption{position:absolute;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:20px;color:#d3becb70;pointer-events:none}.left-caption{right:calc(50% + 38dvh);align-items:flex-end;text-align:right}.left-caption>span:not(.caption-line){font-family:StorySerif,'Batang',serif;font-size:22px;line-height:1.8;letter-spacing:.02em}.caption-line{height:40px;width:1px;background:linear-gradient(transparent,#dec0d050)}.desktop-caption small{font-size:8px;letter-spacing:.19em;color:#a993aa50}.right-caption{left:calc(50% + 38dvh);writing-mode:vertical-rl;align-items:flex-start;gap:24px}.right-caption>span{font-size:10px;letter-spacing:.4em;color:#d8c2ce70}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@keyframes bubble-in{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes slow-appear{from{opacity:0}to{opacity:1}}
@keyframes hint-breathe{0%,100%{opacity:.4;transform:translateY(0)}50%{opacity:1;transform:translateY(3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1000px){.desktop-caption{display:none}}
@media(min-width:1000px) and (min-height:740px){:root{--frame-height:calc(100dvh - 40px)}.stage{border-radius:5px}.game-header{padding-top:20px}}
@media(max-width:360px){.game-header{padding-left:15px;padding-right:15px}.chapter-mark{font-size:8px;letter-spacing:.09em}.sound-label{display:none}.title-subtitle{margin-bottom:22px}.bubble-text{font-size:15px}.speech-bubble{padding:16px 18px}.thought-bubble{padding:18px 20px}.speaker-avatar{width:29px;height:29px}.speaker-profile{min-height:29px;gap:7px;margin-bottom:8px}.title-screen{padding-bottom:7%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}