* { margin:0; padding:0; box-sizing:border-box; font-family:"PingFang SC","Microsoft YaHei",sans-serif; user-select:none; }
body { background:#05070d; display:flex; justify-content:center; align-items:center; min-height:100vh; padding:20px; }
.phone { width:360px; height:760px; background:#000; border-radius:44px; padding:10px; box-shadow:0 30px 80px rgba(0,0,0,.6); position:relative; }
.screen { width:100%; height:100%; border-radius:36px; overflow:hidden; position:relative; background:linear-gradient(165deg,#1b2340 0%, #141a30 45%, #0b0f1e 100%); }
.notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:120px; height:26px; background:#000; border-radius:0 0 16px 16px; z-index:60; }
.statusbar { position:absolute; top:14px; left:0; right:0; display:flex; justify-content:space-between; padding:0 26px; color:#fff; font-size:12px; font-weight:600; z-index:55; text-shadow:0 1px 3px rgba(0,0,0,.5); }

.page { position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .4s; z-index:10; }
.page.active { opacity:1; pointer-events:auto; z-index:11; }

.nav { position:absolute; bottom:0; left:0; right:0; height:70px; z-index:50; display:flex; background:rgba(10,14,28,.85); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.08); }
.nav div { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:rgba(255,255,255,.45); font-size:11px; cursor:pointer; transition:.2s; }
.nav div.on { color:#ffd98a; }
.nav div .ico { font-size:20px; }

/* ===== P1 主页 ===== */
.scene-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; cursor:pointer; animation:breathe 8s ease-in-out infinite; }
@keyframes breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.03)} }
.scene-video.poke { animation:poke .5s ease; }
@keyframes poke { 0%{transform:scale(1)} 30%{transform:scale(1.05) rotate(-1deg)} 60%{transform:scale(.99)} 100%{transform:scale(1)} }
.vignette { position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(180deg, rgba(0,0,0,.4) 0%, transparent 22%, transparent 55%, rgba(0,0,0,.55) 100%); }
.tip { position:absolute; inset:0; z-index:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.6); font-size:12px; text-align:center; padding:40px; line-height:1.9; }
.tip b { color:#ffd98a; }
.info { position:absolute; top:56px; left:22px; z-index:5; }
.info .name { color:#fff; font-size:24px; font-weight:700; letter-spacing:3px; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.info .doing { margin-top:6px; color:#ffe6c2; font-size:13px; text-shadow:0 1px 4px rgba(0,0,0,.7); display:flex; align-items:center; gap:6px; }
.info .doing .live { width:6px; height:6px; background:#5eff9b; border-radius:50%; box-shadow:0 0 6px #5eff9b; animation:blink 1.5s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.profile-btn { position:absolute; top:58px; right:18px; z-index:6; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.35); border:1px solid rgba(255,217,138,.4); backdrop-filter:blur(4px); color:#ffe6c2; font-size:12px; padding:7px 13px; border-radius:20px; cursor:pointer; }
.profile-btn:active{transform:scale(.95);}
.msg-pop { position:absolute; top:130px; right:16px; z-index:6; background:rgba(255,255,255,.96); color:#3a2a1a; padding:10px 14px; border-radius:16px 16px 4px 16px; font-size:12.5px; max-width:210px; box-shadow:0 6px 20px rgba(0,0,0,.35); cursor:pointer; animation:popIn .5s ease; }
@keyframes popIn { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }
.msg-pop .from { color:#e0892f; font-weight:700; font-size:11px; margin-bottom:3px; }
.msg-pop .dot { position:absolute; top:-4px; right:-4px; width:12px; height:12px; background:#ff4d5e; border-radius:50%; border:2px solid #fff; }
.speech { position:absolute; top:235px; left:50%; transform:translateX(-50%) scale(.8); z-index:6; background:rgba(255,255,255,.95); color:#3a2a1a; font-size:13px; font-weight:600; padding:10px 18px; border-radius:20px; box-shadow:0 6px 20px rgba(0,0,0,.3); opacity:0; pointer-events:none; transition:all .3s; white-space:nowrap; }
.speech.show { opacity:1; transform:translateX(-50%) scale(1); }
.power-btn { position:absolute; bottom:92px; left:50%; transform:translateX(-50%); z-index:6; display:flex; align-items:center; gap:8px; padding:14px 28px; border:none; border-radius:40px; cursor:pointer; background:linear-gradient(135deg, rgba(255,217,138,.95), rgba(255,154,86,.95)); color:#5a2e00; font-size:14px; font-weight:700; box-shadow:0 8px 30px rgba(255,150,80,.5); animation:pulse 2.5s ease-in-out infinite; }
@keyframes pulse { 0%,100%{box-shadow:0 8px 30px rgba(255,150,80,.45)} 50%{box-shadow:0 8px 40px rgba(255,180,100,.8)} }
.power-btn:active { transform:translateX(-50%) scale(.96); }

/* ===== P2 聊天 ===== */
.chat-head { position:absolute; top:44px; left:0; right:0; height:52px; z-index:5; display:flex; align-items:center; justify-content:center; flex-direction:column; background:rgba(10,14,28,.6); backdrop-filter:blur(8px); border-bottom:1px solid rgba(255,255,255,.06); }
.chat-head .t { color:#fff; font-size:16px; font-weight:700; letter-spacing:2px; }
.chat-head .s { color:#ffd98a; font-size:11px; margin-top:2px; }
.chat-body { position:absolute; top:96px; bottom:178px; left:0; right:0; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:12px; }
.chat-body::-webkit-scrollbar{display:none;}
.bubble { max-width:75%; padding:10px 14px; font-size:13.5px; line-height:1.55; border-radius:16px; }
.b-ai { align-self:flex-start; background:rgba(255,255,255,.94); color:#33261a; border-bottom-left-radius:4px; }
.b-me { align-self:flex-end; background:linear-gradient(135deg,#ffd98a,#ff9a56); color:#5a2e00; border-bottom-right-radius:4px; }
.bubble.typing { color:rgba(51,38,26,.6); font-style:italic; }
.receive-btn { align-self:flex-start; background:rgba(120,200,255,.15); border:1px solid rgba(120,200,255,.45); color:#bfe4ff; font-size:12px; padding:8px 15px; border-radius:20px; cursor:pointer; animation:popIn .4s ease; }
.receive-btn:active{transform:scale(.95);}
.receive-done { align-self:flex-start; color:rgba(120,200,255,.7); font-size:11.5px; }

.chat-dock { position:absolute; bottom:70px; left:0; right:0; z-index:5; background:rgba(10,14,28,.92); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.06); padding:10px 12px 12px; }
.chat-dock .qs { display:flex; gap:6px; overflow-x:auto; margin-bottom:10px; }
.chat-dock .qs::-webkit-scrollbar{display:none;}
.chat-dock .qs button { white-space:nowrap; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#ddd; font-size:11.5px; padding:7px 12px; border-radius:16px; cursor:pointer; }
.input-row { display:flex; align-items:center; gap:8px; }
.input-row input { flex:1; height:42px; border-radius:21px; border:1px solid rgba(255,255,255,.15); background:rgba(255,255,255,.06); color:#fff; padding:0 16px; font-size:13px; outline:none; }
.input-row input::placeholder{color:rgba(255,255,255,.35);}
.input-row .send-btn { width:42px; height:42px; border-radius:50%; border:none; background:rgba(255,255,255,.14); color:#ffd98a; font-size:16px; cursor:pointer; flex-shrink:0; }
.input-row .charge { width:42px; height:42px; border-radius:50%; border:none; background:linear-gradient(135deg,#ffd98a,#ff9a56); color:#5a2e00; font-size:18px; cursor:pointer; flex-shrink:0; box-shadow:0 4px 14px rgba(255,150,80,.5); }
.input-row .charge:active{transform:scale(.9);}

/* ===== P3 平行世界 ===== */
.story-wrap { position:absolute; inset:0; bottom:70px; overflow-y:auto; padding:60px 18px 20px; }
.story-wrap::-webkit-scrollbar{display:none;}
.story-head { color:#fff; font-size:20px; font-weight:700; letter-spacing:2px; margin-bottom:4px; }
.story-sub { color:rgba(255,255,255,.5); font-size:12px; margin-bottom:20px; line-height:1.6; }
.story-card { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:20px; overflow:hidden; margin-bottom:16px; }
.story-card .cover { height:160px; background:linear-gradient(135deg,#3a4a7a,#232a4a); position:relative; overflow:hidden; }
.story-card .cover .cover-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.story-card .cover .cover-ph { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.4); font-size:13px; }
.cover .wl-badge { position:absolute; top:14px; left:14px; z-index:3; display:flex; align-items:center; gap:6px; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); border:1px solid rgba(255,217,138,.5); color:#ffd98a; font-size:11px; padding:5px 12px; border-radius:14px; letter-spacing:.5px; }
.cover .wl-badge .pulse { width:6px; height:6px; background:#ffd98a; border-radius:50%; box-shadow:0 0 6px #ffd98a; animation:blink 1.5s infinite; }
.cover .cover-fade { position:absolute; inset:0; z-index:2; background:linear-gradient(180deg, transparent 45%, rgba(20,26,48,.9) 100%); }
.story-card .card-title { padding:16px 18px 4px; }
.story-card .card-title .ch { display:inline-block; background:rgba(255,217,138,.14); color:#ffd98a; font-size:10.5px; letter-spacing:1px; padding:3px 10px; border-radius:10px; margin-bottom:8px; }
.story-card .card-title .ti { color:#fff; font-size:18px; font-weight:700; }
.story-card .body { padding:6px 18px 18px; }
.story-card .tx { color:rgba(255,255,255,.72); font-size:13px; line-height:1.75; }
.story-card .divider { height:1px; background:rgba(255,255,255,.08); margin:14px 0; }
.story-card .pick-hint { color:rgba(255,255,255,.4); font-size:11px; margin-bottom:10px; }
.story-card .choices { display:flex; flex-direction:column; gap:8px; }
.story-card .choices button { text-align:left; background:rgba(255,217,138,.1); border:1px solid rgba(255,217,138,.3); color:#ffe6c2; font-size:12.5px; padding:12px 14px; border-radius:12px; cursor:pointer; transition:.2s; }
.story-card .choices button:active { background:rgba(255,217,138,.25); }
.story-locked { background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.12); border-radius:20px; padding:24px; text-align:center; color:rgba(255,255,255,.4); font-size:12.5px; line-height:1.8; }

/* ===== P4 超能力 ===== */
.freeze { position:absolute; inset:0; z-index:70; background:rgba(10,15,30,.95); backdrop-filter:blur(10px); display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-align:center; opacity:0; pointer-events:none; transition:opacity .5s; overflow:hidden; }
.freeze.show { opacity:1; pointer-events:auto; }
.freeze-top { margin-top:60px; display:flex; flex-direction:column; align-items:center; z-index:2; }
.freeze-top .ring { width:58px; height:58px; border-radius:50%; border:3px solid rgba(255,217,138,.25); border-top-color:#ffd98a; margin-bottom:12px; animation:spin 3s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }
.freeze-top h2 { color:#ffd98a; font-size:17px; letter-spacing:4px; }
.freeze-top .sub { color:rgba(255,255,255,.5); font-size:11px; margin-top:8px; }

.voice-call { position:absolute; top:41%; left:50%; transform:translate(-50%,-50%); z-index:2; display:flex; flex-direction:column; align-items:center; gap:16px; }
.voice-wave { display:flex; align-items:center; gap:4px; height:64px; }
.voice-wave span { width:4px; height:8px; background:linear-gradient(180deg,#ffd98a,#ff9a56); border-radius:3px; animation:wave 1s ease-in-out infinite; box-shadow:0 0 8px rgba(255,180,100,.5); }
@keyframes wave { 0%,100%{height:8px;} 50%{height:52px;} }
.voice-label { display:flex; align-items:center; gap:7px; color:#ffe6c2; font-size:12.5px; }
.voice-label .rec { width:8px; height:8px; background:#5eff9b; border-radius:50%; box-shadow:0 0 8px #5eff9b; animation:blink 1.2s infinite; }
.call-timer { color:rgba(255,255,255,.45); font-size:11px; letter-spacing:1px; }

.hero { position:relative; margin-top:auto; z-index:2; display:flex; flex-direction:column; align-items:center; }
.hero-speech { margin-bottom:14px; max-width:280px; background:rgba(255,255,255,.95); color:#3a2a1a; font-size:13.5px; font-weight:600; line-height:1.6; padding:12px 18px; border-radius:18px; box-shadow:0 6px 20px rgba(0,0,0,.3); position:relative; transition:opacity .2s; }
.hero-speech::after { content:''; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%); border:8px solid transparent; border-top-color:rgba(255,255,255,.95); border-bottom:0; }
.hero-img { width:270px; max-height:360px; object-fit:contain; filter:drop-shadow(0 10px 30px rgba(255,200,120,.25)); animation:heroFloat 5s ease-in-out infinite; }
@keyframes heroFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
.hero-tip { display:none; width:230px; height:200px; align-items:center; justify-content:center; text-align:center; color:rgba(255,255,255,.55); font-size:12px; line-height:1.9; border:1px dashed rgba(255,255,255,.25); border-radius:16px; }
.hero-tip b { color:#ffd98a; }
.freeze .close { margin-top:22px; margin-bottom:34px; color:rgba(255,255,255,.6); font-size:12px; border:1px solid rgba(255,255,255,.3); padding:10px 24px; border-radius:22px; cursor:pointer; z-index:2; }
.dust { position:absolute; width:4px; height:4px; background:rgba(255,217,138,.7); border-radius:50%; z-index:1; box-shadow:0 0 8px rgba(255,217,138,.6); }
.dust:nth-child(1){ left:20%; top:30%; animation:drift 12s linear infinite; }
.dust:nth-child(2){ left:75%; top:25%; animation:drift 15s linear infinite 2s; }
.dust:nth-child(3){ left:85%; top:55%; animation:drift 14s linear infinite 1s; }
.dust:nth-child(4){ left:15%; top:70%; animation:drift 20s linear infinite 3s; }
@keyframes drift { 0%{transform:translate(0,0);opacity:0} 20%{opacity:.8} 80%{opacity:.6} 100%{transform:translate(20px,-60px);opacity:0} }

/* ===== P5 关系 ===== */
.rel-wrap { position:absolute; inset:0; bottom:70px; overflow-y:auto; padding:56px 18px 20px; }
.rel-wrap::-webkit-scrollbar{display:none;}
.sec-title { color:#ffd98a; font-size:13px; font-weight:700; letter-spacing:2px; margin:18px 4px 12px; }
.energy-box { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:16px; }
.energy-row { margin-bottom:14px; }
.energy-row .lab { display:flex; justify-content:space-between; color:#fff; font-size:12.5px; margin-bottom:7px; }
.energy-row .lab span:last-child { color:#ffd98a; }
.bar { height:9px; background:rgba(255,255,255,.1); border-radius:6px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:6px; }
.bar .me { width:72%; background:linear-gradient(90deg,#7ad0ff,#4a9fff); }
.bar .him { width:58%; background:linear-gradient(90deg,#ffd98a,#ff9a56); }
.stat-row { display:flex; gap:10px; margin-top:14px; }
.stat-row .st { flex:1; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:12px; text-align:center; }
.stat-row .st .n { color:#ffd98a; font-size:19px; font-weight:700; }
.stat-row .st .l { color:rgba(255,255,255,.5); font-size:11px; margin-top:2px; }
.log { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:18px; padding:6px 16px; }
.log .item { display:flex; align-items:center; gap:10px; padding:12px 0; border-bottom:1px solid rgba(255,255,255,.06); font-size:12.5px; color:#eee; }
.log .item:last-child{border-bottom:0;}
.log .item .tm { color:rgba(255,255,255,.4); font-size:11px; width:56px; flex-shrink:0; }
.log .item .val { margin-left:auto; font-weight:700; }
.log .item .val.blue{color:#7ad0ff;} .log .item .val.gold{color:#ffd98a;}

/* ===== 档案覆盖层 ===== */
.profile-overlay { position:absolute; inset:0; z-index:70; background:rgba(8,11,22,.92); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:.4s; display:flex; align-items:center; justify-content:center; padding:20px; }
.profile-overlay.show { opacity:1; pointer-events:auto; }
.profile-sheet { width:100%; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:20px; position:relative; }
.ph-close { position:absolute; top:14px; right:16px; color:rgba(255,255,255,.6); font-size:16px; cursor:pointer; }
.profile .p-head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.profile .p-ava { width:52px; height:52px; border-radius:50%; background:linear-gradient(135deg,#ffd98a,#ff9a56); display:flex; align-items:center; justify-content:center; font-size:24px; }
.profile .p-name { color:#fff; font-size:18px; font-weight:700; }
.profile .p-tag { color:#ffd98a; font-size:11.5px; margin-top:3px; }
.profile .p-line { display:flex; padding:9px 0; border-top:1px solid rgba(255,255,255,.07); font-size:12.5px; }
.profile .p-line .k { color:rgba(255,255,255,.5); width:72px; flex-shrink:0; }
.profile .p-line .v { color:#eee; }
.chapters { margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.chapters .cp { display:flex; align-items:center; gap:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:12px 14px; font-size:12.5px; color:#eee; cursor:pointer; }
.chapters .cp.lock { color:rgba(255,255,255,.4); border-style:dashed; }

.toast { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.8); z-index:90; background:rgba(0,0,0,.82); color:#fff; padding:14px 24px; border-radius:16px; font-size:13.5px; opacity:0; pointer-events:none; transition:.3s; text-align:center; max-width:260px; line-height:1.5; }
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }