:root{
  --bg:#07070b;
  --panel:#12111a;
  --panel-soft:#1c1924;
  --line:rgba(255,255,255,.12);
  --text:#f7eef1;
  --muted:#cbbdc5;
  --accent:#d25b74;
  --accent-2:#f0c8d0;
  --gold:#c9b39b;
  --danger:#8e223c;
  --shadow:0 18px 50px rgba(0,0,0,.42);
  --radius:24px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:radial-gradient(circle at top,#1a1218 0,#09090d 48%,#050507 100%);color:var(--text);font-family:"PingFang SC","Microsoft YaHei",sans-serif}
body{min-height:100vh}
button,input{font:inherit}
img{max-width:100%;display:block}
.hidden{display:none !important}
.shell{width:min(1320px,calc(100% - 28px));margin:0 auto}
.view{min-height:100vh}
.glass,.glass-dark{background:rgba(10,10,16,.72);backdrop-filter:blur(14px);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--radius)}
.glass-dark{background:rgba(8,8,12,.8)}
.eyebrow{display:inline-block;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--accent-2);letter-spacing:.04em;font-size:.92rem}
.hero-view{position:relative;overflow:hidden}
.hero-bg,.hero-overlay{position:absolute;inset:0}
.hero-bg{background:url('assets/cover-q-chibi-trio.png') center/cover no-repeat;filter:blur(2px) saturate(.96) brightness(.5);transform:scale(1.04)}
.hero-overlay{background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(8,8,12,.5) 40%,rgba(8,8,12,.94) 100%)}
.hero-content{position:relative;z-index:1;display:grid;grid-template-columns:minmax(340px,0.84fr) minmax(380px,0.96fr);align-items:center;gap:28px;min-height:100vh;padding:42px 0}
.hero-art{display:flex;justify-content:center;align-items:center}
.hero-visual{width:min(100%,560px);padding:18px;display:grid;gap:14px}
.hero-visual img{width:100%;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero-visual-caption{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:4px 4px 0;color:var(--muted);font-size:.94rem}
.hero-visual-caption strong{color:var(--accent-2);font-size:1rem}
.hero-copy{max-width:none;padding:28px}
.hero-copy h1{font-size:clamp(2.5rem,5vw,5rem);line-height:1.06;margin:18px 0 14px}
.hero-copy h1 .protagonist-text{display:block;background:linear-gradient(90deg,#fff3f4 0%,#f0c8d0 45%,#c9b39b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{color:#eadfe5;line-height:1.85}
.name-form,.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.name-form input{flex:1;min-width:220px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#0e0e13;color:#fff}
.primary-btn,.secondary-btn,.ghost-btn,.mini-btn{border:none;border-radius:999px;padding:12px 18px;cursor:pointer;transition:.24s}
.primary-btn{background:linear-gradient(135deg,#d25b74,#932a45);color:#fff}
.secondary-btn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.18)}
.ghost-btn{background:rgba(255,255,255,.06);color:var(--text);border:1px solid var(--line)}
.mini-btn{background:rgba(255,255,255,.08);color:var(--text);padding:8px 12px;border:1px solid var(--line)}
.primary-btn:hover,.secondary-btn:hover,.ghost-btn:hover,.mini-btn:hover{transform:translateY(-1px);filter:brightness(1.04)}
.big{padding:14px 22px;font-weight:700}
.minor-actions{margin-top:10px}
.hero-status{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.status-card{padding:14px;border-radius:18px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.status-card strong{display:block;margin-bottom:6px;color:var(--accent-2)}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 0}
.topbar-title{font-size:1.15rem;font-weight:700;color:var(--accent-2)}
.topbar-side{color:var(--muted)}
.story-shell,.phone-shell{display:grid;grid-template-columns:320px 1fr;gap:18px;padding-bottom:28px}
.story-sidebar,.phone-sidebar,.gift-panel{padding:18px}
.story-sidebar h2,.phone-sidebar h2,.gift-panel h3{margin:0 0 14px}
.route-tabs,.contact-list{display:grid;gap:10px}
.route-tab,.contact-item,.scene-tab{padding:14px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04);cursor:pointer;transition:.2s}
.route-tab.active,.contact-item.active,.scene-tab.active{background:linear-gradient(135deg,rgba(210,91,116,.2),rgba(201,179,155,.1));border-color:rgba(210,91,116,.5)}
.contact-item.locked{opacity:.56;cursor:not-allowed}
.contact-item .line2{display:block;font-size:.9rem;color:var(--muted);margin-top:4px}
.chapter-panel,.reward-panel{margin-top:16px;padding:16px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.chapter-panel h3,.reward-panel h3{margin:0 0 8px;color:var(--accent-2)}
.chapter-panel p{margin:0;color:var(--muted)}
.story-stage{position:relative;min-height:calc(100vh - 120px);border-radius:30px;overflow:hidden;background:#090910;border:1px solid var(--line);box-shadow:var(--shadow)}
.story-bg,.story-fade{position:absolute;inset:0}
.story-bg{background-size:cover;background-position:center;filter:blur(0px)}
.story-fade{background:linear-gradient(180deg,rgba(4,4,7,.15) 0%,rgba(4,4,7,.5) 58%,rgba(4,4,7,.96) 100%)}
.story-sprite{position:absolute;right:2%;bottom:128px;height:min(72vh,760px);max-width:46%;object-fit:contain;filter:drop-shadow(0 24px 32px rgba(0,0,0,.45));z-index:2}
.story-cg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.story-cg:not(.hidden)+.story-sprite{display:none}
.story-badges,.story-hud{position:absolute;left:24px;z-index:3;display:flex;gap:10px;flex-wrap:wrap}
.story-badges{top:24px}
.story-hud{top:72px;flex-direction:column;gap:6px}
.badge,.story-route-name,.story-node-name,.affection-chip{padding:8px 12px;border-radius:999px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.12)}
.story-route-name{font-weight:700;color:var(--accent-2)}
.story-node-name{color:var(--muted)}
.dialog-box{position:absolute;left:18px;right:18px;bottom:18px;z-index:4;padding:18px}
.speaker-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.speaker-name{font-size:1.15rem;font-weight:700;color:var(--accent-2)}
.gift-notice{font-size:.92rem;color:var(--gold)}
.story-text{white-space:pre-line;line-height:1.85;min-height:132px;color:#f5eaef}
.choice-list{display:grid;gap:10px;margin-top:14px}
.choice-item{padding:14px 16px;border-radius:16px;border:1px solid rgba(210,91,116,.26);background:linear-gradient(180deg,rgba(88,24,42,.55),rgba(30,12,19,.78));color:#fff;cursor:pointer;text-align:left}
.choice-item:hover{border-color:rgba(240,200,208,.4);background:linear-gradient(180deg,rgba(108,34,53,.64),rgba(36,14,22,.9))}
.phone-layout{display:grid;grid-template-columns:minmax(320px,720px) 320px;gap:18px}
.phone-frame{position:relative;min-height:calc(100vh - 120px);border-radius:34px;border:1px solid var(--line);overflow:hidden;background:#090910;box-shadow:var(--shadow)}
.phone-topbar{position:relative;z-index:3;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:16px;background:rgba(8,8,12,.72);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.contact-summary{display:flex;align-items:center;gap:12px}
.avatar-img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.15);background:#0e0e13}
.contact-name{font-weight:700;color:var(--accent-2)}
.contact-status{font-size:.92rem;color:var(--muted)}
.contact-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.phone-background,.phone-overlay{position:absolute;inset:0}
.phone-background{background-size:cover;background-position:center;filter:blur(4px) brightness(.45)}
.phone-overlay{background:linear-gradient(180deg,rgba(8,8,12,.24) 0%,rgba(8,8,12,.55) 44%,rgba(8,8,12,.92) 100%)}
.phone-chat-feed{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;max-height:calc(100vh - 330px);overflow:auto;padding:18px}
.chat-row{display:flex;gap:10px;align-items:flex-end}
.chat-row.me{justify-content:flex-end}
.chat-row.system{justify-content:center}
.chat-row .avatar-mini{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.12)}
.chat-bubble{max-width:min(80%,560px);padding:12px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.12);background:rgba(18,17,26,.82);white-space:pre-line;line-height:1.7}
.chat-row.me .chat-bubble{background:linear-gradient(180deg,rgba(196,111,131,.42),rgba(76,28,40,.76));border-color:rgba(240,200,208,.28)}
.chat-row.system .chat-bubble{background:rgba(255,255,255,.08);color:var(--gold);text-align:center}
.phone-bottom{position:relative;z-index:3;padding:14px 16px 18px;border-top:1px solid var(--line);background:rgba(8,8,12,.82);backdrop-filter:blur(12px)}
.system-note{font-size:.92rem;color:var(--gold);margin-bottom:10px;min-height:20px}
.phone-choices .choice-item{padding:12px 14px}
.group-scene-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gift-panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.affection-board{display:grid;gap:12px;margin:14px 0}
.aff-row{padding:12px;border-radius:18px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.aff-head{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.aff-bar{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.aff-fill{height:100%;background:linear-gradient(90deg,#d25b74,#f0c8d0,#c9b39b)}
.reward-list{display:grid;gap:10px}
.reward-item{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px;border-radius:16px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.reward-item .gift-desc{font-size:.88rem;color:var(--muted)}
.reward-item.compact-mode{padding:10px}
.reward-item button:disabled{opacity:.42;cursor:not-allowed}
.unlock-note{margin-top:14px;font-size:.92rem;color:var(--muted);line-height:1.7}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:20px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.72)}
.modal-card{position:relative;z-index:1;max-width:min(900px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:18px}
.modal-close{position:absolute;top:12px;right:12px}
.modal-image{width:100%;border-radius:20px;border:1px solid var(--line);margin-bottom:14px}
.modal-title{font-size:1.3rem;font-weight:700;color:var(--accent-2);margin-bottom:8px;padding-right:48px}
.modal-text{white-space:pre-line;line-height:1.8;color:#f3e8ee}
.blackened{filter:brightness(.38) saturate(1.22) hue-rotate(-18deg) drop-shadow(0 0 24px rgba(180,20,50,.45))}
@media (max-width:1100px){
  .story-shell,.phone-shell,.phone-layout{grid-template-columns:1fr}
  .story-sidebar,.phone-sidebar,.gift-panel{order:2}
  .story-stage,.phone-frame{min-height:78vh}
}
@media (max-width:980px){
  .hero-content{grid-template-columns:1fr;gap:18px}
  .hero-art{order:-1}
  .hero-visual{max-width:680px;padding:14px}
}
@media (max-width:760px){
  .hero-status{grid-template-columns:1fr}
  .hero-copy{padding:22px}
  .hero-visual{padding:12px}
  .hero-visual-caption{flex-direction:column;align-items:flex-start}
  .story-sprite{max-width:60%;height:50vh;right:-4%}
  .story-badges,.story-hud{left:14px}
  .dialog-box{left:10px;right:10px;bottom:10px;padding:14px}
  .story-text{min-height:160px}
  .phone-topbar{align-items:flex-start;flex-direction:column}
  .contact-side{align-items:flex-start}
  .phone-chat-feed{max-height:calc(100vh - 390px)}
  .shell{width:min(100% - 20px,1320px)}
}

.chat-event-image{width:100%;max-width:420px;border-radius:16px;border:1px solid rgba(255,255,255,.16);display:block;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.chat-event-caption{margin-top:8px;color:var(--gold);font-size:.9rem;text-align:center}
.chat-row.system .chat-bubble:has(.chat-event-image){max-width:min(92%,560px);background:rgba(8,8,12,.62);padding:10px}


/* ===================== v9 FIX BASE OVERRIDES ===================== */
.route-tab,.contact-item,.scene-tab,.choice-item,.mini-btn,.ghost-btn,.secondary-btn{color:#fff3f6!important;}
.route-tab strong,.contact-item strong,.scene-tab strong{color:#ffe5eb!important;}
.route-tab .line2,.contact-item .line2{color:#d8c6cd!important;}
.route-tab.active,.scene-tab.active,.contact-item.active{color:#fff!important;background:linear-gradient(135deg,rgba(210,91,116,.35),rgba(201,179,155,.18))!important;border-color:rgba(244,204,214,.72)!important;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 10px 28px rgba(0,0,0,.28);}
.story-bg{filter:blur(2px) brightness(.58) saturate(.92);transform:scale(1.025);}
.story-fade{background:radial-gradient(circle at 72% 38%,rgba(255,255,255,.09),rgba(0,0,0,0) 34%),linear-gradient(180deg,rgba(4,4,8,.10) 0%,rgba(4,4,8,.45) 52%,rgba(4,4,8,.98) 100%)!important;}
.story-sprite{right:6%!important;bottom:124px!important;height:min(64vh,650px)!important;max-width:38%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 26px 32px rgba(0,0,0,.55)) drop-shadow(0 0 1px rgba(8,8,12,.65));z-index:3!important;}
.story-stage::after{content:"";position:absolute;right:3%;bottom:110px;width:44%;height:46%;z-index:2;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.34),rgba(0,0,0,0) 70%);}
.story-cg{object-fit:contain!important;object-position:center center!important;background:rgba(0,0,0,.84)!important;padding:18px;z-index:2!important;}
.story-stage.cg-mode .story-bg{filter:blur(18px) brightness(.34) saturate(.85);transform:scale(1.12);}
.story-stage.cg-mode .story-fade{background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.86))!important;}
.dialog-box{cursor:pointer;z-index:5!important;}
.dialog-box::after{content:"点击对话框可继续";position:absolute;right:18px;bottom:10px;font-size:.78rem;color:rgba(255,230,238,.58);pointer-events:none;}
.story-text{font-size:1.02rem;line-height:1.9;}
.phone-frame{max-width:760px;margin:0 auto;}
.phone-chat-feed{gap:14px!important;}
.chat-row{align-items:flex-start!important;}
.chat-row.them,.chat-row.group-speaker{justify-content:flex-start;}
.chat-row.me{justify-content:flex-end;}
.chat-meta{display:block;font-size:.78rem;color:#f0c8d0;margin-bottom:4px;font-weight:700;letter-spacing:.02em;}
.chat-content-wrap{max-width:min(78%,560px);display:grid;gap:4px;}
.chat-content-wrap .chat-bubble{max-width:100%!important;}
.chat-bubble{text-align:left!important;color:#fff5f8;}
.chat-row.system .chat-bubble{color:#ead7c4;}
.chat-event-image{width:100%;max-height:320px;object-fit:contain;border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.32);}
.chat-event-caption{margin-top:8px;color:#f0c8d0;font-size:.9rem;}
.group-scene-tabs .scene-tab{background:rgba(255,255,255,.10)!important;color:#fff3f6!important;text-shadow:0 1px 2px rgba(0,0,0,.4);}
@media (max-width:760px){.story-sprite{right:-4%!important;height:46vh!important;max-width:64%!important;bottom:178px!important}.story-stage::after{right:-8%;width:70%;bottom:160px}.story-cg{padding:8px}.dialog-box::after{display:none}.chat-content-wrap{max-width:82%}}

/* ===================== V10 PREVIEW CHECK PATCH ===================== */
/* Real CGs reserve lower space for VN dialogue box on desktop. */
.story-stage.cg-mode .story-cg{
  top:14px!important;
  left:14px!important;
  width:calc(100% - 28px)!important;
  height:calc(100% - 260px)!important;
  object-fit:contain!important;
  object-position:center center!important;
  padding:10px!important;
  border-radius:20px;
}
/* Dialogue images are already composed as blurred background + half-body foreground. */
.story-stage.dialogue-image-mode .story-cg{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  padding:0!important;
  background:transparent!important;
  filter:saturate(.96) brightness(.88);
}
.story-stage.dialogue-image-mode .story-fade{
  background:linear-gradient(180deg,rgba(4,4,8,.04) 0%,rgba(4,4,8,.30) 52%,rgba(4,4,8,.96) 100%)!important;
}
@media (max-width:760px){
  .story-stage.cg-mode .story-cg{
    top:8px!important;
    left:8px!important;
    width:calc(100% - 16px)!important;
    height:calc(100% - 330px)!important;
    padding:6px!important;
  }
}


/* V10 VISUAL LAYER PATCH */
.route-card{position:relative;overflow:hidden;min-height:92px;background-image:var(--route-img)!important;background-size:cover!important;background-position:center!important;text-shadow:0 2px 10px rgba(0,0,0,.75)}
.route-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,4,7,.88),rgba(20,8,16,.52));z-index:0}
.route-card>*{position:relative;z-index:1}.route-card-shade{display:none}.route-card strong{font-size:1.05rem}.route-card .line2{margin-top:4px}
.gift-with-icon{display:grid;grid-template-columns:54px 1fr auto;align-items:center}.gift-icon{width:48px;height:48px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(0,0,0,.35)}.gift-count{color:var(--gold);white-space:nowrap}
.status-toast{position:fixed;top:22px;left:50%;transform:translate(-50%,-20px);z-index:80;display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:999px;background:rgba(8,7,12,.88);border:1px solid rgba(240,200,208,.28);box-shadow:0 18px 40px rgba(0,0,0,.45);opacity:0;transition:.32s;color:#fff3f6;backdrop-filter:blur(12px)}.status-toast.show{opacity:1;transform:translate(-50%,0)}.status-toast img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.story-transition-card{position:absolute;right:24px;top:24px;z-index:3;width:min(270px,38vw);height:132px;border-radius:22px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px rgba(0,0,0,.45);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:14px;pointer-events:none}.story-transition-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.82));z-index:0}.story-transition-card span,.story-transition-card strong{position:relative;z-index:1}.story-transition-card span{font-size:.78rem;color:var(--gold);text-transform:uppercase;letter-spacing:.08em}.story-transition-card strong{color:#fff;font-size:.98rem}.story-transition-card.pulse{animation:transitionPulse 1.1s ease}@keyframes transitionPulse{0%{opacity:.2;transform:translateY(-8px) scale(.98)}100%{opacity:1;transform:none}}
.chat-sticker-sheet,.chat-photo-card,.chat-event-image{display:block;width:min(100%,420px);max-height:260px;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.14);box-shadow:0 12px 26px rgba(0,0,0,.28)}.chat-sticker-sheet{object-fit:contain;background:rgba(0,0,0,.28)}.chat-event-caption{font-size:.86rem;color:var(--muted);margin-top:8px}.voice-message{display:flex;align-items:center;gap:10px}.voice-message img{width:42px;height:42px;border-radius:14px;object-fit:cover}.chat-content-wrap{max-width:min(82%,620px)}.chat-meta{display:block;font-size:.78rem;color:var(--gold);margin:0 0 4px 6px}.group-speaker .chat-meta{color:#ffe5eb}
@media (max-width:760px){.story-transition-card{right:12px;top:116px;width:44vw;height:92px;padding:10px}.gift-with-icon{grid-template-columns:44px 1fr;}.gift-with-icon .mini-btn,.gift-with-icon .gift-count{grid-column:2}.gift-icon{width:40px;height:40px}.status-toast{top:12px;max-width:92vw}.chat-sticker-sheet,.chat-photo-card,.chat-event-image{max-height:190px}.route-card{min-height:76px}}


/* V11.1 VN dialogue rebuild patch */
.dialog-box.side-heroine .speaker-row { justify-content: flex-end; }
.dialog-box.side-heroine .speaker-name { background: rgba(255,236,220,.18); border-color: rgba(255,220,190,.45); }
.dialog-box.side-left .speaker-name { background: rgba(166,39,52,.28); border-color: rgba(255,115,125,.45); }
.dialog-box.side-npc .speaker-name { background: rgba(180,170,130,.18); border-color: rgba(220,205,150,.38); }
.dialog-box.side-narrator .speaker-name { background: rgba(255,255,255,.08); }
.story-stage.dialogue-image-mode .story-cg { width: 100%; height: 100%; object-fit: cover; opacity: .92; filter: saturate(1.05) contrast(1.03); }
.story-stage.cg-mode .story-cg { max-height: calc(100% - 230px); object-fit: contain; margin-bottom: 220px; }
.route-tab { position: relative; overflow: hidden; min-height: 76px; color: #fff !important; text-shadow: 0 1px 4px #000; background-image: linear-gradient(90deg, rgba(10,10,16,.86), rgba(10,10,16,.44)), var(--route-img); background-size: cover; background-position: center; }
.route-tab span { color: rgba(255,235,220,.88) !important; }
.reward-item.with-icon { display:flex; align-items:center; gap:8px; cursor:pointer; }
.reward-item.with-icon img { width:34px; height:34px; object-fit:cover; border-radius:10px; border:1px solid rgba(255,255,255,.18); }
.status-toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-20px); opacity:0; pointer-events:none; z-index:9999; display:flex; align-items:center; gap:10px; padding:10px 14px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(20,12,18,.86); color:#fff; box-shadow:0 12px 30px rgba(0,0,0,.32); transition:.25s ease; }
.status-toast.show { opacity:1; transform: translateX(-50%) translateY(0); }
.status-toast img { width:28px; height:28px; border-radius:50%; object-fit:cover; }
.chat-row.system { justify-content:center; opacity:.9; }
.chat-row.system .chat-bubble { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); font-size:12px; }
.chat-row .chat-name { font-size:12px; opacity:.8; margin:2px 8px; }
.chat-row.me .chat-name { text-align:right; }
.sticker-bubble { display:flex; flex-direction:column; align-items:center; gap:6px; max-width:170px !important; }
.sticker-crop { width:92px; height:92px; background-size:210%; background-position: 8% 8%; border-radius:18px; border:1px solid rgba(255,255,255,.18); box-shadow:inset 0 0 18px rgba(0,0,0,.25); }
.chat-image { width:160px; max-width:100%; border-radius:14px; display:block; margin-bottom:6px; border:1px solid rgba(255,255,255,.16); }
.affection-line { display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08); }
.empty-mini { opacity:.7; font-size:12px; padding:6px; }
@media (max-width: 720px){ .story-stage.cg-mode .story-cg { max-height: calc(100% - 260px); margin-bottom:240px; } }


/* V11.1 immersion patch: hide empty labels and reduce meta text */
.badge:empty,
.gift-notice:empty { display: none !important; }
.story-text { white-space: pre-line; }


/* V11 label clean-up patch: speaker names live at the upper-right of the dialogue box. */
.speaker-row{justify-content:flex-end!important;min-height:28px;margin-bottom:8px;}
.speaker-name{margin-left:auto;padding:6px 14px;border-radius:999px;background:rgba(0,0,0,.48);border:1px solid rgba(255,255,255,.16);box-shadow:0 8px 18px rgba(0,0,0,.22);}
.speaker-name:empty{display:none;}
.badge:empty{display:none!important;}
.gift-notice:empty{display:none!important;}
.dialog-box.side-heroine .speaker-row,.dialog-box.side-left .speaker-row,.dialog-box.side-npc .speaker-row,.dialog-box.side-narrator .speaker-row{justify-content:flex-end!important;}
.dialog-box.side-narrator .speaker-name{display:none;}




/* V11 high-density dialogue label rules */
.dialog-box { position: absolute; }
.speaker-row { position: absolute; top: -14px; left: 18px; right: 18px; pointer-events: none; display: block !important; }
.speaker-name { position: absolute; top: 0; min-width: 82px; padding: 6px 14px; border: 1px solid rgba(231,190,137,.55); border-radius: 999px; background: rgba(23, 6, 14, .82); color: #f8dfbe; font-weight: 700; letter-spacing: .08em; box-shadow: 0 8px 24px rgba(0,0,0,.3); text-align: center; }
.speaker-name.speaker-left { left: 0; right: auto; }
.speaker-name.speaker-right { right: 0; left: auto; }
.speaker-name.hidden, .speaker-name:empty { display: none !important; }
.gift-notice { display: none !important; }
.story-node-name { display:none !important; }
.story-text { padding-top: 8px; }
.game-toast { position: fixed; left: 50%; top: 22px; transform: translateX(-50%) translateY(-16px); padding: 10px 16px; border-radius: 999px; background: rgba(32, 9, 18, .92); border: 1px solid rgba(233,190,137,.5); color: #ffe5c2; z-index: 9999; opacity: 0; transition: .25s ease; pointer-events:none; }
.game-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.reward-chip, .muted { color: rgba(255,238,218,.75); font-size: 12px; }
.phone-system { margin: 10px auto; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); text-align:center; width: fit-content; max-width: 86%; font-size: 12px; }
.phone-msg { max-width: 78%; margin: 10px 0; }
.phone-msg.me { margin-left: auto; text-align: right; }
.phone-speaker { font-size: 12px; opacity: .75; margin-bottom: 3px; }
.bubble { display:inline-block; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.12); color: #fff; text-align:left; }
.phone-msg.me .bubble { background: rgba(159,44,68,.45); }
.affection-board div { display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.08); }

/* V11 new HTML shell clean-up */
.v11-app .topbar-title{letter-spacing:.08em;}
.v11-home .hero-copy h1{margin:16px 0 14px;}
.v11-home .lead{font-size:1rem;}
.story-sprite.hidden{display:none!important;}
#storyGiftNotice:empty{display:none!important;}
#storyNodeHint:empty{display:none!important;}


/* V11 integrity UI reward fix */
.story-stage{cursor:pointer;}
.story-stage:focus{outline:2px solid rgba(231,190,137,.45);outline-offset:4px;}
.choice-list.hidden{display:none!important;}
.choice-btn{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;border-radius:18px;border:1px solid rgba(231,190,137,.38);background:linear-gradient(135deg,rgba(88,22,38,.82),rgba(18,8,14,.92));color:#fff8f3;cursor:pointer;text-align:left;box-shadow:0 14px 28px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);transition:transform .18s ease,border-color .18s ease,background .18s ease;}
.choice-btn:hover{transform:translateY(-1px);border-color:rgba(255,216,162,.72);background:linear-gradient(135deg,rgba(118,31,52,.9),rgba(31,12,22,.96));}
.choice-label{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:999px;background:rgba(231,190,137,.16);border:1px solid rgba(231,190,137,.45);color:#f7d59e;font-family:Georgia,serif;font-weight:700;}
.choice-text{line-height:1.55;}
.reward-chip{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(231,190,137,.22);color:#ffe7d2;margin:4px 0;font-size:.9rem;}
.reward-chip img{width:28px;height:28px;border-radius:9px;object-fit:cover;box-shadow:0 4px 10px rgba(0,0,0,.24);}
.gift-card{border-radius:16px;padding:10px 12px;}
.phone-topic-btn{margin-bottom:8px;}
.dialog-box:after{content:'点击对话框继续';position:absolute;right:18px;bottom:10px;font-size:.72rem;color:rgba(255,230,218,.42);letter-spacing:.08em;pointer-events:none;}
.dialog-box:has(.choice-list:not(.hidden)):after{content:'';display:none;}


/* V11 phone import + contact UI polish */
.contact-side.hidden,.affection-chip.hidden{display:none!important;}
.phone-sidebar h2{font-size:1.15rem;letter-spacing:.12em;color:#ffe6d0;}
.contact-list{gap:12px!important;}
.contact-card.enhanced-contact{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:22px;border:1px solid rgba(231,190,137,.24);background:linear-gradient(135deg,rgba(35,10,20,.78),rgba(8,8,14,.82));color:#fff;cursor:pointer;text-align:left;box-shadow:0 12px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);transition:.2s ease;}
.contact-card.enhanced-contact:hover,.contact-card.enhanced-contact.active{transform:translateY(-1px);border-color:rgba(255,213,157,.62);background:linear-gradient(135deg,rgba(92,24,42,.86),rgba(15,8,17,.9));}
.contact-avatar-wrap{width:48px;height:48px;border-radius:18px;padding:2px;background:linear-gradient(135deg,rgba(231,190,137,.55),rgba(138,31,54,.7));flex:0 0 auto;box-shadow:0 8px 18px rgba(0,0,0,.28);}
.contact-avatar-wrap .avatar-img{width:100%;height:100%;border-radius:16px;object-fit:cover;display:block;}
.contact-copy{display:flex;flex-direction:column;gap:3px;min-width:0;}
.contact-copy strong{font-size:1rem;color:#fff2dd;letter-spacing:.04em;}
.contact-copy span{font-size:.82rem;color:rgba(255,226,213,.72);}
.contact-copy em{font-style:normal;font-size:.75rem;color:#e5b97e;}
.phone-topic-btn.locked{opacity:.45;filter:grayscale(.35);cursor:not-allowed;}
.phone-topic-btn small{display:inline-block;margin-left:8px;color:rgba(255,220,210,.52);font-size:.75rem;}
.gift-card.gift-open{width:100%;border:none;text-align:left;cursor:pointer;border-radius:18px;}
.gift-card.gift-open span{display:flex;flex-direction:column;gap:2px;}
.gift-card.gift-open small{font-size:.72rem;color:rgba(255,230,210,.55);font-weight:400;}
.ending-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08);color:#ffe9d6;}
.ending-line span{color:#e4b989;letter-spacing:.16em;}
.phone-system{border:1px solid rgba(231,190,137,.18);background:rgba(21,9,15,.66)!important;color:rgba(255,239,226,.78)!important;}
.phone-msg .bubble{font-size:.95rem;line-height:1.68;border:1px solid rgba(255,255,255,.1);}
.phone-msg.me .bubble{border-color:rgba(231,190,137,.22);}


/* ===================== V11.2.2 RESOURCE BUGFIX ===================== */
.chat-event-caption.image-missing::before{
  content:"图片资源未找到：";
  color:#ff9aae;
}
.reward-chip img{
  object-fit:cover;
  background:rgba(0,0,0,.35);
}
.story-stage.dialogue-image-mode .story-cg{
  object-position:center center!important;
}


/* ===================== V11.2.3 LAYOUT & PHONE SEQ PATCH ===================== */
.story-stage .story-cg{ width:100%; height:100%; }
.story-stage.dialogue-image-mode .story-cg{ object-fit:contain !important; object-position:center top !important; background: radial-gradient(circle at center, rgba(20,20,28,.32), rgba(5,6,12,.72)); }
.story-stage.cg-mode .story-cg{ object-fit:cover; object-position:center center; }
@media (max-width: 900px){ .story-stage.dialogue-image-mode .story-cg{ object-fit:cover !important; object-position:center top !important; } }
.phone-feed{ cursor:pointer; }
.phone-feed::after{ content:'点击继续'; display:block; text-align:right; font-size:12px; color:rgba(255,255,255,.45); padding:6px 2px 0 2px; }
.phone-choice-btn{ display:flex; align-items:flex-start; gap:10px; }
.phone-choice-label{ min-width:22px; height:22px; line-height:22px; border-radius:999px; text-align:center; font-size:12px; background:rgba(255,255,255,.08); color:#f6d9df; flex:0 0 auto; }


/* ===================== V11.2.4 ROUTE/CG/SKIP SYSTEM PATCH ===================== */
.choice-btn{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
}
.choice-hint{
  display:block;
  color:rgba(255,220,230,.62);
  font-size:12px;
  line-height:1.35;
}
.story-control-bar{
  position:absolute;
  top:18px;
  right:18px;
  z-index:45;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.story-control-bar button{
  border:1px solid rgba(255,255,255,.16);
  background:rgba(8,8,14,.62);
  color:#f8e9ee;
  border-radius:999px;
  padding:7px 12px;
  font-size:12px;
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.story-control-bar button:hover{
  background:rgba(255,210,225,.16);
}
.story-auto-on #btnAutoStory,
.story-auto-2x-on #btnAutoStory2x{
  border-color:rgba(255,170,205,.8);
  box-shadow:0 0 12px rgba(255,80,150,.22);
}
.story-log-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  background:rgba(0,0,0,.68);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.story-log-modal.hidden{ display:none; }
.story-log-panel{
  width:min(760px, 94vw);
  max-height:80vh;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:rgba(14,14,22,.96);
  box-shadow:0 20px 80px rgba(0,0,0,.55);
}
.story-log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.story-log-head button{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  padding:6px 12px;
}
.story-log-body{
  max-height:65vh;
  overflow:auto;
  padding:14px 18px;
}
.story-log-item{
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.story-log-item b{
  color:#ffd9e2;
}
.story-log-item p{
  margin:6px 0 0;
  color:rgba(255,255,255,.82);
  line-height:1.65;
}
@media (max-width: 760px){
  .story-control-bar{
    top:10px;
    right:10px;
    left:10px;
    justify-content:flex-end;
  }
  .story-control-bar button{
    padding:6px 9px;
    font-size:11px;
  }
}


/* ===================== V11.2.5 ENDING RESOLVER / CONTROL REPOSITION ===================== */
.story-control-bar{
  top:auto!important;
  right:28px!important;
  bottom:calc(22px + 170px)!important;
  left:auto!important;
  z-index:80!important;
}
@media (max-width: 760px){
  .story-control-bar{
    right:14px!important;
    bottom:calc(18px + 150px)!important;
    left:14px!important;
    justify-content:flex-end!important;
  }
}
.gift-receive-popup{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.55);
}
.gift-receive-popup.hidden{display:none;}
.gift-receive-card{
  position:relative;
  width:min(360px,86vw);
  padding:22px;
  border-radius:22px;
  background:rgba(14,12,20,.96);
  border:1px solid rgba(255,220,230,.2);
  box-shadow:0 24px 80px rgba(0,0,0,.65);
  text-align:center;
}
.gift-receive-card button{
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:24px;
}
.gift-receive-card img{
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:20px;
  background:#080810;
}
#giftReceiveText{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
  color:#f8e5eb;
}
#giftReceiveText span{ color:rgba(255,255,255,.75); }


/* ===================== V11.2.6 STORY CONTROLLER FINAL ===================== */
.story-control-bar{position:absolute!important;top:auto!important;right:28px!important;bottom:calc(22px + 170px)!important;left:auto!important;z-index:90!important;display:flex!important;gap:8px!important;flex-wrap:wrap!important;justify-content:flex-end!important;pointer-events:auto!important;}
.story-control-bar button{border:1px solid rgba(255,255,255,.18)!important;background:rgba(8,8,14,.72)!important;color:#f8e9ee!important;border-radius:999px!important;padding:7px 12px!important;font-size:12px!important;backdrop-filter:blur(8px)!important;cursor:pointer!important;}
.story-control-bar button:hover{background:rgba(255,210,225,.18)!important;}
.story-auto-on #btnAutoStory,.story-auto-2x-on #btnAutoStory2x{border-color:rgba(255,170,205,.86)!important;box-shadow:0 0 12px rgba(255,80,150,.25)!important;}
@media (max-width:760px){.story-control-bar{right:12px!important;left:12px!important;bottom:calc(16px + 146px)!important}.story-control-bar button{padding:6px 9px!important;font-size:11px!important}}
.story-log-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.68);display:flex;align-items:center;justify-content:center;padding:24px;}
.story-log-modal.hidden{display:none}.story-log-panel{width:min(760px,94vw);max-height:80vh;overflow:hidden;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(14,14,22,.96);box-shadow:0 20px 80px rgba(0,0,0,.55)}.story-log-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.1)}.story-log-head button{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;border-radius:999px;padding:6px 12px}.story-log-body{max-height:65vh;overflow:auto;padding:14px 18px}.story-log-item{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}.story-log-item b{color:#ffd9e2}.story-log-item p{margin:6px 0 0;color:rgba(255,255,255,.82);line-height:1.65}.story-log-item small{display:block;margin-top:4px;color:rgba(255,255,255,.35)}


/* ===================== V11.2.7 STORY CONTROLLER BUTTON FIX ===================== */
.story-control-bar{
  position:absolute!important;
  top:auto!important;
  right:28px!important;
  bottom:calc(22px + 170px)!important;
  left:auto!important;
  z-index:999!important;
  display:flex!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  pointer-events:auto!important;
}
.story-control-bar button{
  pointer-events:auto!important;
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(8,8,14,.76)!important;
  color:#f8e9ee!important;
  border-radius:999px!important;
  padding:7px 12px!important;
  font-size:12px!important;
  backdrop-filter:blur(8px)!important;
  cursor:pointer!important;
}
.story-control-bar button:hover{
  background:rgba(255,210,225,.2)!important;
}
.story-auto-on #btnAutoStory,
.story-auto-2x-on #btnAutoStory2x{
  border-color:rgba(255,170,205,.9)!important;
  box-shadow:0 0 12px rgba(255,80,150,.28)!important;
}
@media (max-width:760px){
  .story-control-bar{
    right:12px!important;
    left:12px!important;
    bottom:calc(16px + 146px)!important;
  }
  .story-control-bar button{
    padding:6px 9px!important;
    font-size:11px!important;
  }
}
.story-log-modal{
  position:fixed!important;
  inset:0!important;
  z-index:10000!important;
  background:rgba(0,0,0,.68)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:24px!important;
}
.story-log-modal.hidden{display:none!important;}
.story-log-panel{
  width:min(760px,94vw)!important;
  max-height:80vh!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:18px!important;
  background:rgba(14,14,22,.96)!important;
  box-shadow:0 20px 80px rgba(0,0,0,.55)!important;
}
.story-log-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  padding:14px 18px!important;
  border-bottom:1px solid rgba(255,255,255,.1)!important;
}
.story-log-head button{
  border:1px solid rgba(255,255,255,.18)!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  border-radius:999px!important;
  padding:6px 12px!important;
}
.story-log-body{
  max-height:65vh!important;
  overflow:auto!important;
  padding:14px 18px!important;
}
.story-log-item{
  padding:10px 0!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
.story-log-item b{color:#ffd9e2!important;}
.story-log-item p{
  margin:6px 0 0!important;
  color:rgba(255,255,255,.82)!important;
  line-height:1.65!important;
}
.story-log-item small{
  display:block!important;
  margin-top:4px!important;
  color:rgba(255,255,255,.35)!important;
}


/* ===================== V11.2.10 SAFE PHONE LAYOUT PATCH ===================== */
#phoneChatFeed.phone-seq-feed,
#phoneChatFeed{
  min-height:420px;
  max-height:620px;
  height:min(62vh,620px);
  overflow-y:auto;
  scroll-behavior:smooth;
  cursor:pointer;
  box-sizing:border-box;
}
#phoneChatFeed.phone-seq-feed::after{
  content:'点击聊天区域继续';
  display:block;
  text-align:center;
  font-size:12px;
  color:rgba(255,255,255,.38);
  padding:10px 0 0;
}
#phoneChoices.hidden{
  display:none!important;
}
#phoneChoices{
  max-height:220px;
  overflow-y:auto;
}
.phone-choice-btn,
.phone-topic-btn{
  width:100%;
}
.chat-event-image{
  max-width:100%;
  max-height:360px;
  object-fit:contain;
}
@media (max-width:760px){
  #phoneChatFeed.phone-seq-feed,
  #phoneChatFeed{
    min-height:360px;
    height:58vh;
    max-height:58vh;
  }
  .chat-event-image{
    max-height:280px;
  }
}


/* ===================== V11.2.13 AURORA PORTRAIT CENTER PATCH ===================== */
.story-stage.aurora-portrait-mode .story-cg{
  object-fit:contain!important;
  object-position:center center!important;
  transform:scale(1.08);
  filter:saturate(.98) brightness(.94);
  padding:0 2vw 0 2vw!important;
}
.story-stage.aurora-portrait-mode .story-fade{
  background:linear-gradient(180deg,rgba(4,4,8,.03) 0%,rgba(4,4,8,.18) 46%,rgba(4,4,8,.95) 100%)!important;
}
@media (max-width:760px){
  .story-stage.aurora-portrait-mode .story-cg{
    transform:scale(1.02);
    padding:0 1vw!important;
  }
}



/* ===================== V11.2.14 CG CENTER / STORY CONTROL / PHONE WIDTH PATCH ===================== */
.story-stage{
  overflow:hidden;
}
.story-stage.cg-mode{
  background:#090910!important;
}
.story-stage.cg-mode .story-cg{
  object-fit:contain!important;
  object-position:center center!important;
  width:100%!important;
  height:100%!important;
  background:#090910!important;
}
.story-stage.dialogue-image-mode .story-cg{
  object-position:center center!important;
}
.story-stage .story-fade{
  background:linear-gradient(180deg, rgba(4,4,8,.03) 0%, rgba(4,4,8,.14) 48%, rgba(4,4,8,.90) 100%)!important;
}
.story-stage #storyControlBar.story-control-bar{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  bottom:auto!important;
  left:auto!important;
  z-index:40!important;
  display:flex!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  justify-content:flex-end!important;
  max-width:min(62%, 520px)!important;
}
.story-stage #storyControlBar.story-control-bar button{
  min-width:52px!important;
  padding:7px 10px!important;
  font-size:12px!important;
}
.phone-main{
  min-width:0;
}
.phone-layout{
  width:100%;
  max-width:460px;
  margin:0 auto;
}
.phone-frame{
  width:100%;
  max-width:460px;
  margin:0 auto;
}
#phoneChatFeed.phone-feed,
#phoneChoices.phone-choices{
  width:100%;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
}
.phone-feed{
  min-height:420px;
}
.phone-msg,
.phone-system{
  max-width:100%;
}
.phone-msg .bubble{
  max-width:min(85%, 320px);
}
.phone-topic-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:14px 0 8px 0;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px;
  background:rgba(255,255,255,.04);
}
.phone-topic-picker-head strong{
  color:#ffe4ec;
  font-size:.95rem;
}
.phone-topic-picker-head span{
  color:rgba(255,255,255,.6);
  font-size:.78rem;
}
.phone-topic-btn{
  gap:8px;
}
.phone-topic-btn.read{
  border-color:rgba(140,210,170,.35)!important;
  background:linear-gradient(180deg, rgba(80,120,100,.14), rgba(255,255,255,.03))!important;
}
.phone-topic-btn.active-topic{
  border-color:rgba(255,180,210,.55)!important;
  box-shadow:0 0 0 1px rgba(255,180,210,.15) inset;
}
.phone-topic-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  gap:8px;
}
.phone-topic-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.phone-topic-kind,
.phone-topic-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  font-size:.72rem;
  line-height:1.4;
  border:1px solid rgba(255,255,255,.12);
}
.phone-topic-kind{ color:#ffe1ea; background:rgba(255,255,255,.05); }
.phone-topic-status.new{ color:#ffd4df; background:rgba(210,91,116,.16); }
.phone-topic-status.read{ color:#d7ffea; background:rgba(80,160,120,.16); }
.phone-topic-status.lock{ color:#d9d3c8; background:rgba(160,140,100,.16); }
.kind-true{ border-color:rgba(235,150,180,.35); }
.kind-normal{ border-color:rgba(180,180,200,.28); }
.kind-bad{ border-color:rgba(220,110,130,.35); }
.kind-if{ border-color:rgba(150,130,220,.35); }
.kind-base{ border-color:rgba(180,160,120,.35); }

@media (max-width:900px){
  .story-stage #storyControlBar.story-control-bar{
    top:10px!important;
    right:10px!important;
    max-width:calc(100% - 20px)!important;
    gap:6px!important;
  }
  .story-stage #storyControlBar.story-control-bar button{
    padding:6px 8px!important;
    font-size:11px!important;
  }
}
@media (max-width:760px){
  .story-stage.cg-mode .story-cg{
    object-fit:contain!important;
    object-position:center center!important;
  }
  .phone-shell{
    grid-template-columns:1fr!important;
  }
  .phone-sidebar{
    order:2;
  }
  .phone-main{
    order:1;
  }
  .phone-layout,
  .phone-frame,
  #phoneChatFeed.phone-feed,
  #phoneChoices.phone-choices{
    max-width:100%;
  }
  .phone-feed{
    min-height:360px;
  }
  .phone-msg .bubble{
    max-width:min(86vw, 320px);
  }
}


/* ===================== V11.2.16 PHONE WIDTH / RESPONSIVE POLISH ===================== */
.phone-shell{
  grid-template-columns: 280px minmax(0, 1fr)!important;
  align-items:start;
}
.phone-layout{
  grid-template-columns:minmax(520px, 900px) minmax(260px, 360px)!important;
  gap:22px!important;
  width:100%!important;
}
.phone-main{
  width:100%!important;
  min-width:0!important;
}
.phone-frame{
  width:100%!important;
  max-width:none!important;
  min-height:calc(100vh - 120px)!important;
}
#phoneChatFeed.phone-feed,
#phoneChoices.phone-choices{
  width:min(100%, 760px)!important;
  max-width:760px!important;
}
.phone-feed{
  min-height:460px!important;
}
.phone-msg .bubble{
  max-width:min(72%, 520px)!important;
}
.phone-topic-picker-head,
.phone-topic-btn{
  width:min(100%, 760px)!important;
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
.phone-chat-feed{
  max-height:calc(100vh - 330px)!important;
  padding:20px 22px 18px!important;
}
.phone-choices{
  padding:0 22px 20px!important;
}
@media (max-width: 1100px){
  .phone-shell{
    grid-template-columns: 1fr!important;
  }
  .phone-layout{
    grid-template-columns:minmax(0, 1fr)!important;
    max-width:900px!important;
    margin:0 auto!important;
  }
  .phone-sidebar{
    order:2!important;
  }
  .phone-main{
    order:1!important;
  }
}
@media (max-width: 760px){
  .phone-layout,
  .phone-frame,
  #phoneChatFeed.phone-feed,
  #phoneChoices.phone-choices,
  .phone-topic-picker-head,
  .phone-topic-btn{
    max-width:100%!important;
    width:100%!important;
  }
  .phone-chat-feed{
    max-height:calc(100vh - 300px)!important;
    padding:16px 14px 12px!important;
  }
  .phone-choices{
    padding:0 14px 16px!important;
  }
  .phone-feed{
    min-height:380px!important;
  }
  .phone-msg .bubble{
    max-width:min(84vw, 320px)!important;
  }
  .phone-topbar{
    padding:14px!important;
  }
}



/* ===================== V11.3.6 FIXED CG VIEWPORT / RESPONSIVE FIT ===================== */
/* Goal: stop CG from jumping vertically on PC, while keeping mobile readable. */

:root{
  --story-viewport-h-pc: min(72vh, 760px);
  --story-viewport-h-mobile: min(64vh, 560px);
}

/* Stable story viewport */
#storyStage,
.story-stage{
  position:relative!important;
  width:100%!important;
  height:var(--story-viewport-h-pc)!important;
  min-height:560px!important;
  max-height:760px!important;
  overflow:hidden!important;
  background:#07070c!important;
  isolation:isolate!important;
}

/* All visual layers occupy the same fixed box */
#storyBg,
#storyCG,
#storySprite,
.story-bg,
.story-cg,
.story-sprite{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
}

/* Backgrounds may cover; CG should not move */
#storyBg,
.story-bg{
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
}

/* Horizontal/event CG: fixed center, no top/bottom drift */
#storyCG,
.story-cg{
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  background:#07070c!important;
  display:block!important;
}

/* CG mode: cinematic image is the main visual */
.story-stage.cg-mode #storyCG,
.story-stage.cg-mode .story-cg{
  object-fit:contain!important;
  object-position:center center!important;
}

/* BG mode: if a bg is promoted to visual, keep it centered */
.story-stage.bg-mode #storyCG,
.story-stage.bg-mode .story-cg{
  object-fit:cover!important;
  object-position:center center!important;
}

/* Dialogue portrait mode: keep portrait centered and stable */
.story-stage.dialogue-image-mode #storyCG,
.story-stage.dialogue-image-mode .story-cg{
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  padding:0!important;
}

/* Aurora / tall portrait special mode: no top sticking */
.story-stage.aurora-portrait-mode #storyCG,
.story-stage.aurora-portrait-mode .story-cg{
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  padding:0!important;
}

/* Sprite layer also stable */
#storySprite,
.story-sprite{
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:none!important;
  pointer-events:none!important;
}

/* Fade should never affect layout or image position */
.story-fade{
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:4!important;
}

/* Dialogue box stays in a fixed lower overlay area */
.dialogue-box,
.story-dialogue,
#dialogueBox{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:22px!important;
  transform:translateX(-50%)!important;
  width:min(92%, 1120px)!important;
  z-index:30!important;
  margin:0!important;
}

/* Controls remain fixed in top-right visual area */
#storyControlBar.story-control-bar,
.story-stage #storyControlBar.story-control-bar{
  position:absolute!important;
  top:14px!important;
  right:14px!important;
  bottom:auto!important;
  left:auto!important;
  z-index:45!important;
  transform:none!important;
}

/* Avoid older patches adding scaling to CGs */
.story-stage *{
  box-sizing:border-box;
}

/* Mobile: still fixed, but shorter viewport to avoid pushing dialogue off-screen */
@media (max-width: 760px){
  #storyStage,
  .story-stage{
    height:var(--story-viewport-h-mobile)!important;
    min-height:430px!important;
    max-height:560px!important;
  }

  #storyCG,
  .story-cg{
    object-fit:contain!important;
    object-position:center center!important;
  }

  .story-stage.bg-mode #storyCG,
  .story-stage.bg-mode .story-cg{
    object-fit:cover!important;
    object-position:center center!important;
  }

  .dialogue-box,
  .story-dialogue,
  #dialogueBox{
    bottom:12px!important;
    width:calc(100% - 24px)!important;
  }

  #storyControlBar.story-control-bar,
  .story-stage #storyControlBar.story-control-bar{
    top:10px!important;
    right:10px!important;
    max-width:calc(100% - 20px)!important;
  }
}

/* Very small phones */
@media (max-width: 430px){
  #storyStage,
  .story-stage{
    height:58vh!important;
    min-height:390px!important;
  }

  #storyControlBar.story-control-bar button{
    padding:5px 7px!important;
    font-size:10px!important;
  }
}



/* ===================== V11.3.9 EMERGENCY STORY VISUAL STABILIZER ===================== */
/* Reset story visual layers after stacked patches caused CG/BG/dialogue image drifting. */

.story-stage,
#storyStage,
.vn-stage,
#vnStage,
.main-visual,
.story-visual{
  position:relative!important;
  overflow:hidden!important;
  background:#06060b!important;
  isolation:isolate!important;
}

/* Keep the story visual window stable on desktop and mobile. */
.story-stage,
#storyStage{
  min-height:520px!important;
  height:min(72vh, 760px)!important;
}

/* Background layer: always full cover, bottom layer. */
#storyBg,
.story-bg,
.bg-layer,
.story-background{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center center!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  z-index:1!important;
  opacity:1;
}

/* CG layer: fixed center, never top aligned. */
#storyCG,
.story-cg,
.cg-layer,
.event-cg{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  margin:0!important;
  padding:0!important;
  z-index:5!important;
  background:transparent!important;
}

/* Dialogue portrait layer: stable bottom/center, no floating. */
#storySprite,
.story-sprite,
#storyDialogueImage,
.story-dialogue-image,
.dialogue-image,
.portrait-layer{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  bottom:0!important;
  top:auto!important;
  width:auto!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  padding:0!important;
  z-index:10!important;
}

/* In full CG mode, any dialogue portrait that exists should not force layout shift. */
.story-stage.cg-mode #storySprite,
.story-stage.cg-mode .story-sprite,
.story-stage.cg-mode #storyDialogueImage,
.story-stage.cg-mode .story-dialogue-image,
.story-stage.cg-mode .dialogue-image{
  pointer-events:none!important;
}

/* Dialogue box remains anchored over the lower part of the visual window. */
#dialogueBox,
.dialogue-box,
.story-dialogue{
  position:absolute!important;
  left:50%!important;
  bottom:18px!important;
  right:auto!important;
  top:auto!important;
  transform:translateX(-50%)!important;
  width:min(92%, 1120px)!important;
  z-index:30!important;
  margin:0!important;
}

/* Control buttons stay pinned to visual window, not page flow. */
#storyControlBar,
.story-control-bar{
  position:absolute!important;
  top:12px!important;
  right:12px!important;
  left:auto!important;
  bottom:auto!important;
  transform:none!important;
  z-index:50!important;
}

/* Mobile adaptation */
@media (max-width: 760px){
  .story-stage,
  #storyStage{
    height:min(64vh, 560px)!important;
    min-height:420px!important;
  }
  #dialogueBox,
  .dialogue-box,
  .story-dialogue{
    bottom:10px!important;
    width:calc(100% - 22px)!important;
  }
  #storySprite,
  .story-sprite,
  #storyDialogueImage,
  .story-dialogue-image,
  .dialogue-image,
  .portrait-layer{
    height:100%!important;
    max-width:110%!important;
    object-position:center bottom!important;
  }
}



/* ===================== V11.4.0 GLOBAL HEROINE NO-PORTRAIT / HIDDEN FIX ===================== */
/* Critical: hidden must beat previous storyCG display:block rules, otherwise stale portrait remains visible. */
.hidden,
#storyCG.hidden,
.story-cg.hidden,
#storySprite.hidden,
.story-sprite.hidden,
#storyDialogueImage.hidden,
.story-dialogue-image.hidden,
.dialogue-image.hidden,
.portrait-layer.hidden{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* When only background is shown, CG layer must truly disappear. */
.story-stage.bg-mode #storyCG.hidden,
.story-stage.bg-mode .story-cg.hidden{
  display:none!important;
}

/* Heroine/player line visual state: no portrait layer. */
.story-stage.heroine-line-mode #storySprite,
.story-stage.heroine-line-mode .story-sprite,
.story-stage.heroine-line-mode #storyDialogueImage,
.story-stage.heroine-line-mode .story-dialogue-image,
.story-stage.heroine-line-mode .dialogue-image,
.story-stage.heroine-line-mode .portrait-layer{
  display:none!important;
}