:root{--bg:#0b0709;--panel:#140c10;--panel2:#1c1116;--line:#2a1a21;--wine:#7a1730;--wine2:#a3203f;--rose:#e7a3b4;--text:#efe6e9;--muted:#9a8890;--in:#1f1419;--out:linear-gradient(135deg,#8e1a37,#5e0f24)}
*{box-sizing:border-box;margin:0}
html,body{height:100%;background:#050304;color:var(--text);font:15px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body{display:flex;justify-content:center;align-items:center;background:radial-gradient(1200px 700px at 50% 0%,#2a0d18 0%,#050304 60%)}
#phone{position:relative;width:100%;max-width:430px;height:100%;max-height:932px;background:var(--bg);overflow:hidden}
@media(min-width:700px){#phone{height:min(900px,94vh);border-radius:44px;border:10px solid #151012;box-shadow:0 0 0 1px #2d1c22,0 40px 120px rgba(122,23,48,.35)}}
.screen{position:absolute;inset:0;display:none;flex-direction:column}.screen.active{display:flex}
.muted{color:var(--muted)}.small{font-size:12px}.err{color:#ff6b86;min-height:20px;margin-top:8px;font-size:13px}
.btn{display:block;width:100%;padding:14px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:15px;font-weight:600;margin-top:10px;cursor:pointer}
.btn.primary{background:var(--out);border-color:#a3203f}.btn.ghost{background:transparent}.btn.danger{color:#ff8aa0;border-color:#4a1c27;background:transparent}
.icon-btn{background:none;border:0;color:var(--rose);font-size:24px;width:40px;height:40px;cursor:pointer}
/* gate */
#gate{background:radial-gradient(600px 400px at 50% 20%,#2b0c17,transparent 70%),var(--bg);justify-content:center}
.gate-inner{padding:32px;text-align:center}.sigil{font-size:38px;color:var(--wine2);margin-bottom:8px}
#gate h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:.04em;font-size:30px}
#gate p{margin:10px 0}.dots{display:flex;gap:14px;justify-content:center;margin:22px 0}
.dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--rose);transition:.15s}.dots i.on{background:var(--rose)}
.shake{animation:sh .4s}@keyframes sh{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,72px);gap:16px;justify-content:center}
.key{height:72px;border-radius:50%;border:1px solid var(--line);background:var(--panel2);color:var(--text);font-size:26px;cursor:pointer}.key:active{background:var(--wine)}
.remember{display:block;margin-top:16px;color:var(--muted);font-size:13px}
/* home */
#home{padding:20px 18px;overflow-y:auto;background:linear-gradient(180deg,#1d0a12 0,var(--bg) 260px)}
.home-head{display:flex;justify-content:space-between;align-items:flex-start;padding-top:max(14px,env(safe-area-inset-top))}
.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;color:var(--rose);opacity:.8}
.story-title{font-family:Georgia,serif;font-weight:400;font-size:34px;line-height:1.1;margin-top:6px;background:linear-gradient(90deg,#f4dfe5,#c2425f);-webkit-background-clip:text;background-clip:text;color:transparent}
.meters{margin:18px 0 8px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}
.meter{display:grid;grid-template-columns:110px 1fr 26px;align-items:center;gap:10px;margin:6px 0;font-size:13px}
.bar{height:6px;background:#2a1a21;border-radius:9px;overflow:hidden}.bar b{display:block;height:100%;background:linear-gradient(90deg,#5e0f24,#e04a6e);border-radius:9px}
.mv{text-align:right;color:var(--muted)}.clues{font-size:12px;color:var(--muted);margin-top:8px}
.chapters{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.chap{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;text-align:left;padding:14px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;font-size:15px}
.chap .num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--panel2);color:var(--rose);font-family:Georgia,serif;font-size:17px}
.chap.current{border-color:var(--wine2);box-shadow:0 0 0 1px var(--wine) inset}.chap .cs{font-size:12px;color:var(--rose)}
.chap.locked{opacity:.4;cursor:default}.endings{margin:18px 0 30px}.pill{display:inline-block;margin:6px 6px 0 0;padding:5px 10px;border-radius:20px;background:var(--panel2);font-size:12px;border:1px solid var(--line)}
/* chat */
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 8px;padding-top:max(10px,env(safe-area-inset-top));background:rgba(20,12,16,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);z-index:2}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:13px;background:#3a2430;color:#fff;flex:none}
.a-cass.avatar{background:linear-gradient(135deg,#1a1a1f,#5e0f24)}.a-eli.avatar{background:linear-gradient(135deg,#2c3a48,#4a2a33)}.a-margot.avatar,.a-unknown.avatar{background:#3b3339}.a-silas.avatar{background:linear-gradient(135deg,#4b4b4b,#2a0d18)}.a-rook.avatar{background:#2e2a24}
.who{flex:1;min-width:0}#who-name{font-weight:600}
.log{flex:1;overflow-y:auto;padding:14px 12px 20px;display:flex;flex-direction:column;gap:4px;background:radial-gradient(500px 300px at 80% 0%,rgba(122,23,48,.12),transparent),var(--bg)}
.msg{max-width:78%;padding:8px 12px 6px;border-radius:18px;position:relative;word-wrap:break-word;margin-top:2px}
.msg.in{align-self:flex-start;background:var(--in);border-bottom-left-radius:6px;border:1px solid #2a1b22}
.msg.out{align-self:flex-end;background:var(--out);border-bottom-right-radius:6px}
.msg .nm{display:block;font-size:11px;font-weight:700;color:var(--rose);margin-bottom:1px}.msg.a-eli .nm{color:#9fc3e0}.msg.a-silas .nm{color:#c9c9c9}.msg.a-unknown .nm,.msg.a-margot .nm{color:#d8c08a}.msg.a-rook .nm{color:#c9a27a}
.msg .ts{display:block;text-align:right;font-size:10px;color:rgba(255,255,255,.45);margin-top:2px}
.typing{display:flex;gap:4px;padding:12px 14px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:bl 1.2s infinite}.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.time{align-self:center;font-size:11px;color:var(--muted);margin:12px 0 6px;letter-spacing:.05em}
.sys{align-self:center;font-size:12px;color:var(--muted);font-style:italic;margin:6px 0}
.scene{align-self:stretch;margin:12px 6px;padding:14px 16px;border-radius:14px;background:linear-gradient(180deg,#1a0f14,#130a0e);border:1px solid var(--line);border-left:3px solid var(--wine2);font-family:Georgia,serif;font-size:14.5px;line-height:1.55;color:#dccfd3}
.scene.fade{text-align:center;color:var(--rose);border-left-width:1px;letter-spacing:.1em}.scene.fade small{display:block;letter-spacing:0;color:var(--muted);margin-top:4px;font-size:12px}
.pick{align-self:flex-end;font-size:12px;color:var(--rose);font-style:italic;margin:4px 4px 6px;opacity:.85}.pick:before{content:"↳ "}
.pop{animation:pop .22s ease-out}@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:none}}
.choices{padding:10px 12px;padding-bottom:max(14px,env(safe-area-inset-bottom));background:rgba(20,12,16,.95);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.choices:empty{display:none}
.choice{padding:12px 14px;border-radius:16px;border:1px solid #4a1c2a;background:#1d1116;color:var(--text);text-align:left;font-size:14.5px;cursor:pointer;transition:.15s}
.choice:hover,.choice:active{background:#2b131c;border-color:var(--wine2)}.choice.primary{background:var(--out);text-align:center;font-weight:600}
.urgent{animation:pulse 1.4s infinite}.urgent .choice{border-color:#a3203f}.urgent-l{font-size:11px;text-transform:uppercase;letter-spacing:.2em;color:#ff6b86;text-align:center}
@keyframes pulse{50%{box-shadow:0 -8px 30px rgba(163,32,63,.35) inset}}
.cliff{text-align:center;font-family:Georgia,serif;font-style:italic;color:var(--rose);padding:4px}
.ending{text-align:center;padding:8px}.ending h2{font-family:Georgia,serif;font-weight:400;font-size:24px;margin-top:4px}
/* sheet */
.sheet{position:absolute;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;z-index:9}.sheet[hidden]{display:none}
.sheet-card{width:100%;background:var(--panel);border-top:1px solid var(--line);border-radius:22px 22px 0 0;padding:20px 18px 28px;animation:up .2s}
@keyframes up{from{transform:translateY(40px);opacity:0}}
.sheet h2{font-family:Georgia,serif;font-weight:400;margin-bottom:10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.row.tog .small{flex-basis:100%;order:3;margin-top:-6px}
.row input[type=text],.row input:not([type]),.row select{background:var(--panel2);border:1px solid var(--line);color:var(--text);padding:8px 10px;border-radius:10px;font-size:15px;width:160px}
.row input[type=checkbox]{width:22px;height:22px;accent-color:var(--wine2)}
/* ===== v2: portraits, photos, motion ===== */
.avatar{overflow:hidden}.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar.sm{width:26px;height:26px;font-size:10px}.avatar.big{width:84px;height:84px;font-size:34px}
.avatar.mono{background:radial-gradient(circle at 30% 30%,#a3203f,#3a0b18);font-family:Georgia,serif;color:#f6dfe6}
.meter{grid-template-columns:26px 100px 1fr 26px}
.cast-wrap{margin:14px 0 4px}.cast-row{display:flex;gap:12px;overflow-x:auto;padding:8px 2px 4px;scrollbar-width:none}
.cast{background:none;border:0;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;font-size:11px;flex:none}
.cast .avatar{width:56px;height:56px;box-shadow:0 0 0 2px #0b0709,0 0 0 3.5px var(--wine2);transition:transform .2s}.cast:active .avatar{transform:scale(.94)}
.chap{animation:rise .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.chat-head{transition:box-shadow .4s}.chat-head .who{cursor:pointer}
.chat-head.glow{animation:hglow 1.1s ease-out}@keyframes hglow{0%{box-shadow:0 6px 30px rgba(224,74,110,.55)}100%{box-shadow:0 0 0 rgba(0,0,0,0)}}
.who.swap{animation:swap .35s ease-out}@keyframes swap{from{opacity:0;transform:translateX(8px)}}
#av{transition:transform .3s}.chat-head.glow #av{animation:avp .6s}@keyframes avp{40%{transform:scale(1.12)}}
.icon-btn.sm{font-size:17px;width:34px}
/* bubbles: spring */
.msg.in.pop{animation:springL .55s cubic-bezier(.2,1.4,.4,1) both;transform-origin:0 100%}
.msg.out.pop{animation:springR .55s cubic-bezier(.2,1.4,.4,1) both;transform-origin:100% 100%}
@keyframes springL{from{opacity:0;transform:translate3d(-18px,10px,0) scale(.82)}}
@keyframes springR{from{opacity:0;transform:translate3d(18px,10px,0) scale(.82)}}
.msg .ts{animation:fadein .5s .25s both}.pop .ts{animation-delay:.35s}@keyframes fadein{from{opacity:0}}
.rcpt{font-weight:500;transition:color .4s}.rcpt.read{color:#f0a6b8;animation:fadein .4s}
.typing.msg{animation:springL .35s cubic-bezier(.2,1.4,.4,1) both;transform-origin:0 100%}
.typing i{animation:bl 1s infinite ease-in-out}
/* photo messages */
.msg.photo{padding:4px 4px 6px;max-width:74%}.msg.photo .nm{padding:2px 8px 4px}.msg.photo .tx{display:block;padding:6px 8px 0}.msg.photo .ts{padding-right:8px}
.phwrap{display:block;border-radius:14px;overflow:hidden;cursor:zoom-in;background:#1a0f14;aspect-ratio:4/3}
.ph{width:100%;height:100%;object-fit:cover;display:block;filter:blur(18px) saturate(.6);transform:scale(1.08);opacity:.6;transition:filter 1.1s ease,transform 1.1s ease,opacity .6s}
.ph.loaded{filter:none;transform:none;opacity:1}
.scene.has-img{padding:0;overflow:hidden}.scene.has-img .phwrap{border-radius:0}.scene.has-img p{padding:12px 16px 14px}
.lightbox{position:absolute;inset:0;z-index:20;background:rgba(0,0,0,0);display:flex;align-items:center;justify-content:center;transition:background .25s;cursor:zoom-out}
.lightbox[hidden]{display:none}.lightbox img{max-width:100%;max-height:100%;transform:scale(.86);opacity:0;transition:transform .3s cubic-bezier(.2,1.2,.4,1),opacity .25s}
.lightbox.open{background:rgba(0,0,0,.94)}.lightbox.open img{transform:none;opacity:1}
/* cinematic scene cards: letterbox */
.scene.pop{animation:cine .9s ease-out both;position:relative}
.scene.pop:before,.scene.pop:after{content:"";position:absolute;left:0;right:0;height:50%;background:#050304;z-index:2;animation:bars .9s cubic-bezier(.6,0,.2,1) forwards;pointer-events:none}
.scene.pop:before{top:0;transform-origin:top}.scene.pop:after{bottom:0;transform-origin:bottom}
@keyframes bars{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}@keyframes cine{from{opacity:0;letter-spacing:.02em}}
.time.pop,.sys.pop,.pick.pop{animation:fadein .5s both}
/* choices */
.choices .choice{animation:chIn .45s cubic-bezier(.2,1.3,.4,1) both,breathe 2.8s ease-in-out infinite}
@keyframes chIn{from{opacity:0;transform:translate3d(0,16px,0) scale(.96)}}
@keyframes breathe{50%{box-shadow:0 0 0 1px rgba(163,32,63,.45),0 0 18px rgba(163,32,63,.18)}}
.choices.urgent .choice{animation:chIn .4s cubic-bezier(.2,1.3,.4,1) both,heart 1.6s ease-in-out infinite;border-color:#c2284c}
@keyframes heart{0%,100%{box-shadow:0 0 0 rgba(255,60,90,0)}10%{box-shadow:0 0 22px rgba(255,60,90,.55)}20%{box-shadow:0 0 4px rgba(255,60,90,.15)}30%{box-shadow:0 0 26px rgba(255,60,90,.6)}}
.choices.urgent{animation:none}
#vignette{position:absolute;inset:0;pointer-events:none;z-index:5;opacity:0;transition:opacity .5s;box-shadow:inset 0 0 90px 30px rgba(160,10,35,.85)}
.urgent-on #vignette{opacity:1;animation:vig 1.6s ease-in-out infinite}
@keyframes vig{0%,100%{opacity:.35}10%{opacity:.9}20%{opacity:.45}30%{opacity:1}}
.tap-hint{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);padding:8px;animation:breatheT 1.6s infinite;cursor:pointer;background:rgba(20,12,16,.9);border-top:1px solid var(--line)}
.tap-hint[hidden]{display:none}@keyframes breatheT{50%{opacity:.4}}
/* cliffhanger */
.cliff{animation:zoom 1.2s cubic-bezier(.2,.8,.2,1) both;padding:10px 4px}
@keyframes zoom{0%{opacity:0;transform:scale(1.6);filter:blur(6px)}60%{opacity:1;filter:none}100%{transform:none}}
.cliff-t{font-size:26px;margin-top:4px;text-shadow:0 0 24px rgba(224,74,110,.6)}.cliff-n{font-size:13px;color:var(--muted);font-style:normal;margin-top:4px}
#next-ch,#to-home{animation:chIn .5s .9s both}
/* profile + gallery */
.profile{text-align:center}.profile img{width:100%;max-width:300px;aspect-ratio:1;object-fit:cover;border-radius:20px;box-shadow:0 20px 60px rgba(122,23,48,.45);animation:chIn .5s both}
.pmeta{color:var(--muted);font-size:12px;margin-top:10px;letter-spacing:.15em}.teaser{font-family:Georgia,serif;font-style:italic;margin:6px 8px 4px;color:#e9d7dc}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:60vh;overflow-y:auto}
.gcard{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:16px;padding:8px;color:var(--text);cursor:pointer;animation:chIn .45s both}
.gcard img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}.gcard small{color:var(--muted);font-size:11px;line-height:1.3}
.gcard.you{align-items:center;justify-content:center;text-align:center;cursor:default}
.sheet-card{max-height:92%;overflow-y:auto}
@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}.ph{filter:none;transform:none;opacity:1}.scene.pop:before,.scene.pop:after{display:none}}