: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.webp') 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;
}


/* ===================== V11.4.1 Loading Gate ===================== */
.loading-gate{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 35%, rgba(119,18,42,.34), transparent 32%),
    linear-gradient(135deg, #09050a 0%, #160812 48%, #050407 100%);
  color:#fff;
  transition:opacity .55s ease, visibility .55s ease;
}
.loading-gate-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loading-card{
  width:min(92vw, 520px);
  padding:34px 30px 30px;
  text-align:center;
  border:1px solid rgba(255,214,222,.22);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.loading-card h1{margin:6px 0 10px;font-size:clamp(42px,8vw,72px);letter-spacing:.18em;text-indent:.18em}
.loading-rose{font-size:34px;color:#f4bcc8;text-shadow:0 0 24px rgba(214,55,96,.75);animation:loadingRosePulse 1.6s ease-in-out infinite}
.loading-status{margin:8px 0 18px;color:rgba(255,235,240,.82);line-height:1.7}
.loading-track{height:10px;border-radius:999px;background:rgba(255,255,255,.11);overflow:hidden;border:1px solid rgba(255,255,255,.12)}
.loading-bar{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#7d1028,#d75b78,#f4bec8);transition:width .22s ease}
.loading-count{margin:12px 0 18px;color:rgba(255,235,240,.68);font-size:13px;letter-spacing:.08em}
#loadingEnterBtn:disabled{opacity:.55;cursor:not-allowed}
@keyframes loadingRosePulse{0%,100%{transform:scale(1);opacity:.72}50%{transform:scale(1.18);opacity:1}}

/* ===================== V11.4.2 CORE UX PATCH: NO SELECT + MOBILE PHONE COMPACT ===================== */
/* Prevent accidental full-screen text selection when the VN stage is clicked repeatedly. */
html,
body,
#app,
.view,
.story-stage,
.story-stage *:not(input):not(textarea),
.dialog-box,
.dialog-box *:not(input):not(textarea),
.phone-frame,
.phone-frame *:not(input):not(textarea),
button {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent;
}
input,
textarea,
[contenteditable="true"] {
  -webkit-user-select: text !important;
  user-select: text !important;
}
.story-stage,
.dialog-box,
.phone-feed,
.phone-chat-feed {
  touch-action: manipulation;
}

@media (max-width: 760px) {
  html,
  body {
    overflow-x: hidden !important;
  }
  .shell {
    width: calc(100% - 12px) !important;
  }
  .topbar.shell {
    min-height: 42px !important;
    padding: 6px 8px !important;
    gap: 8px !important;
  }
  .topbar-title {
    font-size: .92rem !important;
  }
  .topbar-side {
    display: none !important;
  }
  .topbar .ghost-btn {
    padding: 7px 10px !important;
    font-size: .82rem !important;
    border-radius: 999px !important;
  }

  /* Phone view: prioritize the chat frame and compress secondary panels. */
  .phone-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
  }
  .phone-sidebar {
    order: 1 !important;
    padding: 9px !important;
    border-radius: 16px !important;
    max-height: 118px !important;
    overflow: auto !important;
  }
  .phone-sidebar h2 {
    font-size: .82rem !important;
    margin: 0 0 6px !important;
    letter-spacing: .08em !important;
  }
  .contact-list {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }
  .contact-item {
    min-height: 0 !important;
    padding: 7px 5px !important;
    border-radius: 13px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .contact-item .avatar-img,
  .contact-item img {
    width: 32px !important;
    height: 32px !important;
    margin: 0 auto 3px !important;
  }
  .contact-copy {
    display: block !important;
    min-width: 0 !important;
  }
  .contact-copy strong {
    display: block !important;
    font-size: .72rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .contact-copy span,
  .contact-copy em,
  .unlock-note {
    display: none !important;
  }

  .phone-main {
    order: 2 !important;
    min-width: 0 !important;
  }
  .phone-layout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .phone-frame {
    min-height: calc(100dvh - 190px) !important;
    max-height: calc(100dvh - 74px) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }
  .phone-topbar {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    gap: 8px !important;
  }
  .contact-summary {
    min-width: 0 !important;
    gap: 8px !important;
  }
  #phoneAvatar.avatar-img {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
  }
  #phoneName.contact-name {
    font-size: .92rem !important;
    line-height: 1.2 !important;
  }
  #phoneStatus.contact-status {
    font-size: .72rem !important;
  }
  #phoneChatFeed.phone-chat-feed,
  #phoneChatFeed.phone-feed {
    min-height: calc(100dvh - 345px) !important;
    max-height: calc(100dvh - 300px) !important;
    padding: 12px 10px 10px !important;
    gap: 8px !important;
    overflow-y: auto !important;
  }
  .phone-bottom {
    padding: 0 !important;
    max-height: 34dvh !important;
    overflow: auto !important;
  }
  #phoneChoices.phone-choices,
  #phoneChoices.choice-list {
    padding: 0 10px 10px !important;
    gap: 7px !important;
  }
  .phone-msg,
  .phone-system {
    margin-top: 6px !important;
    margin-bottom: 6px !important;
  }
  .phone-msg {
    max-width: 90% !important;
  }
  .phone-msg .bubble,
  .chat-bubble {
    max-width: min(78vw, 310px) !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    font-size: .86rem !important;
    line-height: 1.52 !important;
  }
  .phone-speaker,
  .chat-meta {
    font-size: .68rem !important;
    margin-bottom: 2px !important;
  }
  .phone-system {
    max-width: 92% !important;
    padding: 6px 9px !important;
    font-size: .74rem !important;
    line-height: 1.45 !important;
  }
  .phone-topic-picker-head,
  .phone-topic-btn,
  .phone-choice-btn,
  .choice-btn.phone-topic-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px 10px !important;
    border-radius: 13px !important;
    font-size: .84rem !important;
    line-height: 1.42 !important;
  }
  .choice-label,
  .phone-choice-label {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    font-size: 11px !important;
  }
  .choice-text {
    line-height: 1.45 !important;
  }
  .group-scene-tabs {
    display: flex !important;
    gap: 7px !important;
    overflow-x: auto !important;
    padding: 0 10px 10px !important;
  }
  .group-scene-tabs.hidden {
    display: none !important;
  }
  .group-scene-tabs .scene-tab {
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    font-size: .78rem !important;
    border-radius: 12px !important;
  }
  .chat-event-image,
  .chat-photo-card,
  .chat-sticker-sheet {
    max-height: 150px !important;
    border-radius: 12px !important;
  }

  /* Gift panel remains available but stops competing with the phone screen. */
  .gift-panel {
    margin-top: 8px !important;
    padding: 10px !important;
    border-radius: 16px !important;
    max-height: 34dvh !important;
    overflow: auto !important;
  }
  .gift-panel h3,
  .gift-panel-head h3 {
    font-size: .86rem !important;
    margin: 0 0 6px !important;
  }
  .affection-board,
  .reward-list {
    gap: 7px !important;
  }
  .reward-item,
  .aff-row {
    padding: 8px !important;
    border-radius: 12px !important;
    font-size: .8rem !important;
  }
}

@media (max-width: 420px) {
  .contact-list {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .contact-copy strong {
    font-size: .66rem !important;
  }
  #phoneChatFeed.phone-chat-feed,
  #phoneChatFeed.phone-feed {
    min-height: calc(100dvh - 330px) !important;
    max-height: calc(100dvh - 286px) !important;
  }
  .phone-msg .bubble,
  .chat-bubble {
    max-width: min(80vw, 292px) !important;
    font-size: .84rem !important;
  }
}

/* ===================== V11.5.1 BUGFIX PATCH: PHONE PC/MOBILE LAYOUT + CHOICE HINTS ===================== */
.story-log-item small{display:none!important;}
.second-run-choice-guide{
  width:100%;box-sizing:border-box;margin:0 0 10px;padding:10px 12px;border-radius:14px;
  border:1px solid rgba(231,190,137,.28);background:rgba(18,14,18,.72);color:rgba(255,238,226,.86);
  font-size:.86rem;line-height:1.55;text-align:left;
}
.second-run-choice-guide strong{color:#ffe1a8;font-weight:700;}
.second-run-choice-guide p{margin:4px 0 0;color:rgba(255,238,226,.68);}
.choice-btn.selected-before{border-color:rgba(246,210,139,.72)!important;box-shadow:0 0 0 1px rgba(246,210,139,.18),0 10px 24px rgba(0,0,0,.22)!important;}
.choice-seen-mark,.choice-ending-hint{display:block;margin-top:5px;font-size:.76rem;line-height:1.45;color:rgba(255,222,173,.78);font-style:normal;font-weight:500;}
.choice-seen-mark{color:#ffe0a5;}
.choice-ending-hint{color:rgba(225,236,255,.72);}
body.story-auto-on #btnAutoStory,body.story-auto-2x-on #btnAutoStory2x{border-color:rgba(255,221,167,.78)!important;background:rgba(138,73,38,.48)!important;color:#fff2d8!important;}

@media (min-width: 1101px){
  #phoneView .phone-shell{display:grid!important;grid-template-columns:320px minmax(560px,720px) 300px!important;gap:18px!important;align-items:start!important;max-width:1460px!important;margin:0 auto!important;padding:0 16px 24px!important;}
  #phoneView .phone-sidebar{grid-column:1!important;width:auto!important;max-height:calc(100vh - 118px)!important;overflow:auto!important;}
  #phoneView .phone-main{grid-column:2!important;min-width:0!important;width:100%!important;}
  #phoneView .gift-panel{grid-column:3!important;width:auto!important;max-height:calc(100vh - 118px)!important;overflow:auto!important;position:sticky!important;top:74px!important;}
  #phoneView .phone-layout{display:block!important;width:100%!important;max-width:720px!important;margin:0 auto!important;}
  #phoneView .phone-frame{width:100%!important;min-height:calc(100vh - 118px)!important;max-height:calc(100vh - 96px)!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;}
  #phoneView #phoneChatFeed.phone-chat-feed,#phoneView #phoneChatFeed.phone-feed{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;padding:18px 22px!important;}
  #phoneView .phone-bottom{flex:0 0 auto!important;max-height:34vh!important;overflow:auto!important;}
  #phoneView #phoneChoices.phone-choices{display:flex!important;flex-direction:column!important;gap:9px!important;}
  #phoneView #phoneChoices.phone-choices.hidden{display:none!important;}
  #phoneView .phone-topic-btn,#phoneView .phone-choice-btn{width:100%!important;box-sizing:border-box!important;}
  #phoneView .phone-msg .bubble{max-width:420px!important;}
}

@media (max-width: 1100px){
  #phoneView .phone-shell{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:0 10px 16px!important;}
  #phoneView .phone-sidebar{order:1!important;padding:10px!important;max-height:none!important;}
  #phoneView .phone-main{order:2!important;min-width:0!important;width:100%!important;}
  #phoneView .gift-panel{order:3!important;position:static!important;margin-top:0!important;max-height:30dvh!important;overflow:auto!important;}
  #phoneView .contact-list{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;}
  #phoneView .contact-card.enhanced-contact{min-width:0!important;display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:5px!important;padding:8px 5px!important;border-radius:15px!important;}
  #phoneView .contact-avatar-wrap{width:38px!important;height:38px!important;border-radius:14px!important;}
  #phoneView .contact-avatar-wrap .avatar-img{border-radius:12px!important;}
  #phoneView .contact-copy{align-items:center!important;gap:1px!important;}
  #phoneView .contact-copy strong{font-size:.72rem!important;line-height:1.1!important;}
  #phoneView .contact-copy span{display:none!important;}
  #phoneView .contact-copy em{font-size:.65rem!important;line-height:1.2!important;}
  #phoneView .phone-layout{display:block!important;width:100%!important;}
  #phoneView .phone-frame{width:100%!important;min-height:calc(100dvh - 210px)!important;max-height:calc(100dvh - 160px)!important;display:flex!important;flex-direction:column!important;border-radius:22px!important;}
  #phoneView .phone-topbar{padding:9px 10px!important;flex-direction:row!important;align-items:center!important;}
  #phoneView #phoneAvatar.avatar-img{width:34px!important;height:34px!important;}
  #phoneView #phoneChatFeed.phone-chat-feed,#phoneView #phoneChatFeed.phone-feed{flex:1 1 auto!important;min-height:0!important;max-height:none!important;overflow:auto!important;padding:10px!important;}
  #phoneView .phone-bottom{flex:0 0 auto!important;padding:8px!important;max-height:34dvh!important;overflow:auto!important;}
  #phoneView .phone-msg{max-width:92%!important;}
  #phoneView .phone-msg .bubble{max-width:min(78vw,330px)!important;font-size:.86rem!important;line-height:1.5!important;padding:8px 10px!important;}
  #phoneView .phone-topic-picker-head,#phoneView .phone-topic-btn,#phoneView .phone-choice-btn{padding:8px 10px!important;border-radius:13px!important;font-size:.82rem!important;}
}

@media (max-width: 430px){
  #phoneView .phone-shell{padding:0 6px 12px!important;gap:7px!important;}
  #phoneView .contact-list{gap:6px!important;}
  #phoneView .contact-card.enhanced-contact{padding:7px 3px!important;}
  #phoneView .contact-avatar-wrap{width:32px!important;height:32px!important;}
  #phoneView .contact-copy strong{font-size:.66rem!important;}
  #phoneView .contact-copy em{font-size:.6rem!important;}
  #phoneView .phone-frame{min-height:calc(100dvh - 196px)!important;max-height:calc(100dvh - 140px)!important;border-radius:18px!important;}
  #phoneView .phone-topbar{padding:8px!important;}
  #phoneView #phoneChatFeed.phone-chat-feed,#phoneView #phoneChatFeed.phone-feed{padding:8px!important;}
  #phoneView .phone-bottom{padding:7px!important;}
  #phoneView .phone-msg .bubble{max-width:min(80vw,292px)!important;font-size:.82rem!important;}
}

/* V11.5.2 ending tendency markers */
.choice-ending-mark,
.choice-read-mark,
.choice-inline-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.1em;
  height: 1.55em;
  margin-left: .55em;
  padding: 0 .55em;
  border-radius: 999px;
  font-size: .76em;
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.9);
  white-space: nowrap;
}
.choice-ending-mark.true,
.choice-inline-mark.true { color: #ffe9b0; background: rgba(212,160,76,.16); border-color: rgba(234,188,104,.42); }
.choice-ending-mark.normal,
.choice-inline-mark.normal { color: #dce9ff; background: rgba(120,150,190,.14); border-color: rgba(162,190,230,.35); }
.choice-ending-mark.bad,
.choice-inline-mark.bad { color: #ffb3bd; background: rgba(165,38,60,.22); border-color: rgba(236,95,116,.42); }
.choice-read-mark { color: #bdebd4; background: rgba(65,150,105,.18); border-color: rgba(126,220,170,.38); }
.story-choice-btn-v1152.selected-before { box-shadow: 0 0 0 1px rgba(126,220,170,.42), 0 0 24px rgba(126,220,170,.08); }

/* ===================== V11.5.3 MOBILE VN DIALOGUE + LOG BACKDROP PATCH ===================== */
/* Short VN lines should not create an oversized dialogue panel on phones. */
@media (max-width: 760px){
  #storyStage .dialog-box,
  #storyStage #dialogueBox,
  #storyStage .story-dialogue{
    width:calc(100% - 22px)!important;
    bottom:10px!important;
    padding:12px 14px 18px!important;
    min-height:0!important;
    height:auto!important;
    max-height:36dvh!important;
    overflow-y:auto!important;
    border-radius:22px!important;
  }
  #storyStage .dialog-box.mobile-short-line{
    max-height:30dvh!important;
    padding-bottom:16px!important;
  }
  #storyStage .speaker-row{
    margin-bottom:6px!important;
    min-height:0!important;
  }
  #storyStage .speaker-name{
    font-size:1rem!important;
    padding:5px 12px!important;
  }
  #storyStage .story-text{
    min-height:0!important;
    height:auto!important;
    max-height:18dvh!important;
    overflow-y:auto!important;
    padding-top:2px!important;
    line-height:1.62!important;
    font-size:1rem!important;
  }
  #storyStage .dialog-box.mobile-short-line .story-text{
    max-height:14dvh!important;
  }
  #storyStage .choice-list:not(.hidden){
    margin-top:10px!important;
  }
  #storyStage .choice-list:not(.hidden) + *{
    display:none!important;
  }
}

@media (max-width: 430px){
  #storyStage .dialog-box,
  #storyStage #dialogueBox,
  #storyStage .story-dialogue{
    padding:10px 12px 16px!important;
    max-height:34dvh!important;
    border-radius:20px!important;
  }
  #storyStage .story-text{
    font-size:.95rem!important;
    line-height:1.58!important;
  }
}

/* The story log overlay can be dismissed by tapping/clicking outside the panel. */
.story-log-modal{ cursor:pointer; }
.story-log-panel{ cursor:auto; }


/* ===================== V11.5.3 HOTFIX: MOBILE PHONE HEADER / CHAT / CHOICES SEPARATION ===================== */
/* Fix: on small screens the avatar/name header, chat feed and bottom choice box could visually merge. */
#phoneView .phone-frame{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
}
#phoneView .phone-background{z-index:0!important;}
#phoneView .phone-overlay{z-index:1!important;pointer-events:none!important;}
#phoneView .phone-topbar{
  position:relative!important;
  z-index:30!important;
  flex:0 0 auto!important;
  background:linear-gradient(180deg,rgba(14,12,20,.96),rgba(9,8,14,.88))!important;
  border-bottom:1px solid rgba(255,220,230,.18)!important;
  box-shadow:0 10px 26px rgba(0,0,0,.34)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
#phoneView .contact-summary{
  width:100%!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
}
#phoneView #phoneAvatar.avatar-img{
  flex:0 0 auto!important;
  border:1px solid rgba(255,225,234,.32)!important;
  box-shadow:0 0 0 2px rgba(0,0,0,.22),0 8px 18px rgba(0,0,0,.32)!important;
}
#phoneView #phoneName.contact-name,
#phoneView #phoneStatus.contact-status{
  display:block!important;
  max-width:100%!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  text-shadow:0 2px 8px rgba(0,0,0,.72)!important;
}
#phoneView #phoneName.contact-name{color:#ffe7ee!important;}
#phoneView #phoneStatus.contact-status{color:rgba(255,231,238,.72)!important;}
#phoneView #phoneChatFeed.phone-chat-feed,
#phoneView #phoneChatFeed.phone-feed{
  position:relative!important;
  z-index:10!important;
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  height:auto!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18))!important;
  border-top:1px solid rgba(255,255,255,.04)!important;
  border-bottom:1px solid rgba(255,255,255,.06)!important;
}
#phoneView .phone-bottom{
  position:relative!important;
  z-index:30!important;
  flex:0 0 auto!important;
  background:linear-gradient(180deg,rgba(13,11,18,.94),rgba(7,7,11,.98))!important;
  border-top:1px solid rgba(255,220,230,.18)!important;
  box-shadow:0 -12px 28px rgba(0,0,0,.38)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
}
#phoneView #phoneChoices.phone-choices,
#phoneView #phoneChoices.choice-list{
  position:relative!important;
  z-index:31!important;
  box-sizing:border-box!important;
}
#phoneView .phone-msg .bubble,
#phoneView .chat-bubble,
#phoneView .phone-system{
  box-shadow:0 8px 22px rgba(0,0,0,.24)!important;
}
#phoneView .phone-speaker,
#phoneView .chat-meta{
  color:#ffdbe5!important;
  text-shadow:0 2px 8px rgba(0,0,0,.7)!important;
}

@media (max-width: 1100px){
  #phoneView .phone-frame{
    display:flex!important;
    flex-direction:column!important;
  }
  #phoneView .phone-topbar{
    min-height:58px!important;
    padding:10px 12px!important;
    margin:0!important;
  }
  #phoneView .phone-bottom{
    padding:10px 10px calc(10px + env(safe-area-inset-bottom,0px))!important;
    max-height:36dvh!important;
    overflow:auto!important;
  }
  #phoneView #phoneChoices.phone-choices,
  #phoneView #phoneChoices.choice-list{
    padding:0!important;
    gap:8px!important;
  }
}

@media (max-width: 760px){
  #phoneView .phone-shell{
    gap:8px!important;
  }
  #phoneView .phone-main{
    min-height:0!important;
  }
  #phoneView .phone-frame{
    min-height:calc(100dvh - 206px)!important;
    max-height:calc(100dvh - 128px)!important;
    border-radius:20px!important;
    display:flex!important;
    flex-direction:column!important;
  }
  #phoneView .phone-topbar{
    min-height:56px!important;
    padding:9px 11px!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:flex-start!important;
  }
  #phoneView .contact-summary{gap:9px!important;}
  #phoneView #phoneAvatar.avatar-img{
    width:38px!important;
    height:38px!important;
  }
  #phoneView #phoneName.contact-name{
    font-size:.95rem!important;
    line-height:1.18!important;
  }
  #phoneView #phoneStatus.contact-status{
    margin-top:2px!important;
    font-size:.72rem!important;
    line-height:1.2!important;
  }
  #phoneView #phoneChatFeed.phone-chat-feed,
  #phoneView #phoneChatFeed.phone-feed{
    flex:1 1 0!important;
    min-height:0!important;
    max-height:none!important;
    padding:12px 10px!important;
    gap:9px!important;
  }
  #phoneView #phoneChatFeed.phone-seq-feed::after{
    padding:8px 0 2px!important;
    font-size:11px!important;
  }
  #phoneView .phone-bottom{
    padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px))!important;
    max-height:34dvh!important;
  }
  #phoneView .phone-topic-picker-head,
  #phoneView .phone-topic-btn,
  #phoneView .phone-choice-btn,
  #phoneView .choice-btn.phone-topic-btn{
    margin-left:0!important;
    margin-right:0!important;
  }
}

@media (max-width: 430px){
  #phoneView .phone-frame{
    min-height:calc(100dvh - 198px)!important;
    max-height:calc(100dvh - 118px)!important;
    border-radius:18px!important;
  }
  #phoneView .phone-topbar{
    min-height:52px!important;
    padding:8px 10px!important;
  }
  #phoneView #phoneAvatar.avatar-img{
    width:34px!important;
    height:34px!important;
  }
  #phoneView #phoneName.contact-name{
    font-size:.9rem!important;
  }
  #phoneView #phoneChatFeed.phone-chat-feed,
  #phoneView #phoneChatFeed.phone-feed{
    padding:10px 8px!important;
  }
  #phoneView .phone-bottom{
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* ===================== V11.8 MOBILE VN TEXTBOX / NAME TAG EMERGENCY FIX ===================== */
/*
  Fixes mobile clipping caused by older compact-dialogue rules: the dialogue box had overflow:auto,
  while the speaker name tag is positioned partly outside the box. On phones this clipped the name tag.
*/
@media (max-width: 760px){
  #storyStage,
  .story-stage{
    height: min(68svh, 560px) !important;
    min-height: 430px !important;
    max-height: 600px !important;
  }

  #storyStage .dialog-box,
  #storyStage #dialogueBox,
  #storyStage .story-dialogue{
    overflow: visible !important;
    width: calc(100% - 22px) !important;
    bottom: 12px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    padding: 18px 16px 16px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 22px !important;
  }

  #storyStage .dialog-box.mobile-short-line,
  #storyStage #dialogueBox.mobile-short-line,
  #storyStage .story-dialogue.mobile-short-line{
    padding-top: 18px !important;
    padding-bottom: 14px !important;
  }

  #storyStage .speaker-row{
    position: absolute !important;
    top: -19px !important;
    left: 16px !important;
    right: auto !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    display: block !important;
    overflow: visible !important;
    z-index: 80 !important;
    pointer-events: none !important;
  }

  #storyStage .speaker-name,
  #storyStage .speaker-name.speaker-left,
  #storyStage .speaker-name.speaker-right{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: calc(100vw - 78px) !important;
    min-width: 64px !important;
    padding: 5px 14px !important;
    font-size: .92rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: none !important;
  }

  #storyStage .speaker-name.hidden,
  #storyStage .speaker-name:empty{
    display: none !important;
  }

  #storyStage .story-text{
    min-height: 0 !important;
    height: auto !important;
    max-height: 15.5svh !important;
    overflow-y: auto !important;
    padding-top: 0 !important;
    font-size: clamp(.95rem, 4vw, 1.06rem) !important;
    line-height: 1.62 !important;
    -webkit-overflow-scrolling: touch;
  }

  #storyStage .dialog-box.mobile-short-line .story-text,
  #storyStage #dialogueBox.mobile-short-line .story-text,
  #storyStage .story-dialogue.mobile-short-line .story-text{
    max-height: 12svh !important;
  }

  #storyStage .choice-list:not(.hidden){
    max-height: 23svh !important;
    overflow-y: auto !important;
    margin-top: 10px !important;
    padding-right: 2px !important;
    -webkit-overflow-scrolling: touch;
  }

  #storyStage .choice-btn{
    padding: 11px 12px !important;
    border-radius: 18px !important;
  }

  #storyStage #storyControlBar.story-control-bar,
  #storyStage .story-control-bar{
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
    max-width: calc(100% - 20px) !important;
    justify-content: flex-end !important;
    gap: 7px !important;
  }

  #storyStage #storyControlBar.story-control-bar button,
  #storyStage .story-control-bar button{
    padding: 6px 9px !important;
    font-size: 11px !important;
  }
}

@media (max-width: 430px){
  #storyStage,
  .story-stage{
    height: min(66svh, 535px) !important;
    min-height: 410px !important;
  }
  #storyStage .story-text{
    font-size: .94rem !important;
    line-height: 1.56 !important;
    max-height: 14svh !important;
  }
  #storyStage .dialog-box,
  #storyStage #dialogueBox,
  #storyStage .story-dialogue{
    bottom: 10px !important;
    width: calc(100% - 20px) !important;
    padding: 17px 14px 14px !important;
    border-radius: 20px !important;
  }
}