/* ============================================================
   story.css — AVG 演出层样式（在 game.css 之后加载）
   ============================================================ */

/* ---------- 立绘：绝对定位 + 站位 ---------- */
#chars .ch{
    position:absolute;bottom:0;
    height:88%;max-height:88vh;width:auto;object-fit:contain;
    left:50%;
    transform:translateX(-50%) translateY(28px) scale(.98);
    opacity:0;
    filter:drop-shadow(0 10px 40px rgba(0,0,0,.7));
    transition:opacity .22s,transform .22s,filter .2s,left .3s;
    will-change:transform,opacity;
}
#chars .ch.in{opacity:1;transform:translateX(-50%) translateY(0) scale(1);animation:none;}
#chars .ch.dim{opacity:.82;filter:brightness(.44) blur(1.4px) drop-shadow(0 10px 30px rgba(0,0,0,.7));transform:translateX(-50%) scale(.97);}
#chars .ch[data-pos="left"]{left:26%;}
#chars .ch[data-pos="center"]{left:50%;}
#chars .ch[data-pos="right"]{left:74%;}

/* ---------- 文本样式 ---------- */
#dtext.nar{color:#cfc9e6;font-style:italic;letter-spacing:.05em;}
#dtext.th{color:#f2d98a;}
#dtext.th::before{content:"——";opacity:.6;}

/* ---------- 章节标题卡 ---------- */
#overlay{
    position:fixed;inset:0;z-index:60;display:none;
    align-items:center;justify-content:center;
    background:radial-gradient(ellipse at center,rgba(10,8,20,.72),rgba(3,3,8,.92));
    backdrop-filter:blur(3px);
    opacity:0;transition:opacity .38s;
}
#overlay.on{display:flex;opacity:1;}

.ovbox{
    max-width:760px;padding:34px 46px;text-align:center;
    background:linear-gradient(180deg,rgba(18,16,32,.96),rgba(26,22,46,.97));
    border:1px solid var(--line);border-radius:3px;
    box-shadow:0 20px 70px rgba(0,0,0,.7),inset 0 0 60px rgba(120,80,190,.08);
    animation:ovin .45s cubic-bezier(.2,.8,.3,1);
}
.ovbox.wide{max-width:660px;width:min(88vw,660px);max-height:76vh;overflow:auto;text-align:left;}
@keyframes ovin{from{opacity:0;transform:translateY(14px) scale(.97);}to{opacity:1;transform:none;}}

/* ---------- Bad End ---------- */
#overlay .badend{
    position:relative;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    animation:bein .8s ease both;
}
#overlay .badend .becg{
    position:absolute;inset:0;overflow:hidden;
}
#overlay .badend .becg img{
    width:100%;height:100%;object-fit:cover;
    filter:contrast(1.05);
}
#overlay .badend::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(circle at 50% 45%,rgba(120,10,26,.12),rgba(6,2,10,.9) 78%);
}
#overlay .bebox{
    position:relative;z-index:2;max-width:620px;padding:0 30px;text-align:center;
}
#overlay .betag{
    font-size:13px;letter-spacing:.62em;color:#ff6a6a;
    text-shadow:0 0 24px rgba(255,60,60,.7);
}
#overlay .beti{
    margin-top:16px;font-size:clamp(22px,3.4vw,34px);letter-spacing:.14em;color:#f4eaf2;
    text-shadow:0 0 34px rgba(120,0,20,.85);
}
#overlay .betx{
    margin:22px 0 30px;font-size:14.5px;line-height:2.05;color:#c9bfd6;letter-spacing:.05em;
}
@keyframes bein{from{opacity:0;}to{opacity:1;}}

.tcard2{padding:40px 60px;border:none;background:none;box-shadow:none;}
.tcard2 .tch{
    font-size:clamp(26px,4.4vw,44px);letter-spacing:.2em;color:#f0e6ff;
    text-shadow:0 0 30px rgba(185,140,240,.55);
}
.tcard2 .tcs{
    margin-top:14px;font-size:clamp(13px,1.8vw,17px);letter-spacing:.3em;color:var(--acc);
}
.tcard2 .tcnote{
    margin-top:26px;padding-top:16px;border-top:1px solid rgba(185,140,240,.28);
    font-size:clamp(11px,1.35vw,13px);letter-spacing:.06em;color:var(--dim);line-height:1.9;
}

/* ---------- 遗憾卡 ---------- */
.cruxbox{border-color:rgba(185,140,240,.55);box-shadow:0 20px 70px rgba(0,0,0,.75),inset 0 0 70px rgba(150,100,240,.16);}
.cxtag{
    font-size:12px;letter-spacing:.44em;color:var(--acc);margin-bottom:18px;
    padding-bottom:14px;border-bottom:1px solid var(--line);
}
.cxwho{font-size:22px;letter-spacing:.14em;color:#fff;}
.cxwho span{font-size:13px;color:var(--acc2);margin-left:10px;letter-spacing:.1em;}
.cxreg{margin-top:16px;font-size:16.5px;line-height:1.9;color:#f2d98a;}
.cxline{margin-top:12px;font-size:14.5px;line-height:2;color:#cfc9e6;}
.cxhint{margin-top:22px;font-size:12.5px;letter-spacing:.16em;color:var(--dim);}
.endbox .cxwho{font-size:24px;letter-spacing:.3em;}

/* ---------- 画面效果 ---------- */
@keyframes shakeK{0%,100%{transform:translate(0,0);}12%{transform:translate(-11px,5px);}26%{transform:translate(9px,-6px);}41%{transform:translate(-7px,-4px);}58%{transform:translate(6px,5px);}74%{transform:translate(-4px,2px);}88%{transform:translate(2px,-2px);}}
#stage.fx-shake{animation:shakeK .62s cubic-bezier(.36,.07,.19,.97);}
@keyframes flashK{0%{filter:brightness(1);}8%{filter:brightness(3.4) saturate(.4);}100%{filter:brightness(1);}}
#stage.fx-flash{animation:flashK .55s ease-out;}
#stage.fx-white::after{
    content:"";position:absolute;inset:0;background:#fff;z-index:40;
    animation:wfade .85s ease-out forwards;pointer-events:none;
}
@keyframes wfade{from{opacity:1;}to{opacity:0;}}

/* ---------- 回想标签 ---------- */
.recallTag{
    font-size:clamp(20px,3vw,30px);letter-spacing:.6em;color:#e8e2ff;
    text-shadow:0 0 40px rgba(185,140,240,.7);
    animation:ovin .6s ease-out;
}

/* ---------- 章节选择 / 回想 / 设定 面板 ---------- */
#hub{
    position:fixed;inset:0;z-index:50;display:none;
    align-items:center;justify-content:center;
    background:rgba(4,4,10,.86);backdrop-filter:blur(5px);
}
#hub.on{display:flex;}
#hub .hubbox{
    width:min(90vw,800px);max-height:80vh;overflow:auto;
    padding:28px 34px;
    background:linear-gradient(180deg,rgba(16,15,28,.97),rgba(24,22,40,.98));
    border:1px solid var(--line);border-radius:3px;
    box-shadow:0 20px 70px rgba(0,0,0,.7);
}
#hub .hubh{font-size:18px;letter-spacing:.3em;color:#f0e6ff;margin-bottom:18px;}
.chItem{
    display:flex;align-items:center;gap:14px;
    padding:13px 18px;margin-bottom:8px;cursor:pointer;
    background:rgba(30,26,52,.7);border:1px solid var(--line);border-left:3px solid rgba(185,140,240,.5);
    border-radius:2px;transition:.26s;
}
.chItem:hover{background:rgba(52,42,86,.9);border-left-color:var(--acc2);transform:translateX(6px);}
.chItem .n{font-size:12.5px;color:var(--acc);letter-spacing:.1em;min-width:64px;}
.chItem .t{flex:1;font-size:15px;color:var(--text);}
.chItem .s{font-size:12px;color:var(--dim);letter-spacing:.1em;}
.chItem.done{border-left-color:var(--ok);}
.chItem.done .s{color:var(--ok);}
.chItem.lock{opacity:.42;cursor:not-allowed;}
.chItem.lock:hover{transform:none;background:rgba(30,26,52,.7);border-left-color:rgba(185,140,240,.5);}

.ovh{font-size:18px;letter-spacing:.3em;color:#f0e6ff;margin-bottom:18px;}
.ovp{font-size:13.5px;color:var(--dim);line-height:1.9;margin-top:14px;}
.rlItem{
    padding:12px 16px;margin-bottom:8px;cursor:pointer;font-size:14.5px;
    background:rgba(30,26,52,.7);border:1px solid var(--line);border-radius:2px;transition:.24s;
}
.rlItem:hover{background:rgba(52,42,86,.9);color:#fff;}
.rlItem.lock{opacity:.4;cursor:not-allowed;}
.rlItem.lock:hover{background:rgba(30,26,52,.7);color:var(--text);}
.cfgRow{
    display:flex;align-items:center;gap:16px;
    padding:12px 0;border-bottom:1px solid rgba(160,130,230,.14);
    font-size:14.5px;color:var(--text);
}
.cfgRow input[type=range]{flex:1;accent-color:#b98cf0;}

/* ---------- 对话记录 ---------- */
.logbox{display:flex;flex-direction:column;max-height:78vh;}
.ovh .ovsub{font-size:12px;color:var(--dim);letter-spacing:.1em;margin-left:14px;}
.logList{
    flex:1;overflow-y:auto;max-height:58vh;margin-top:6px;padding-right:8px;
    scrollbar-width:thin;scrollbar-color:rgba(185,140,240,.5) transparent;
}
.logList::-webkit-scrollbar{width:8px;}
.logList::-webkit-scrollbar-thumb{background:rgba(185,140,240,.45);border-radius:4px;}
.logLine{
    display:flex;gap:10px;align-items:flex-start;
    padding:9px 4px;border-bottom:1px solid rgba(160,130,230,.1);
    font-size:14px;line-height:1.95;
}
.logLine .lw{flex:0 0 auto;min-width:96px;letter-spacing:.06em;}
.logLine .lt{flex:1;color:var(--text);white-space:pre-wrap;}
.logLine.nar .lt{color:#a9a3c4;font-style:italic;}
.logLine.th .lt{color:#f2d98a;}

/* ---------- 游戏内菜单 ---------- */
.menubox{min-width:min(80vw,340px);}
.menubox .mbtn{display:block;width:100%;margin-bottom:10px;}
.menubox .ovh{text-align:center;}

/* 设定面板盖在浮层之上 */
#recall{
    position:fixed;inset:0;z-index:70;display:none;
    align-items:center;justify-content:center;
    background:rgba(4,4,10,.86);backdrop-filter:blur(5px);
}
#recall.on{display:flex;}

/* ---------- HUD 微调 ---------- */
#hud .cnt i{font-style:normal;color:#f2d98a;letter-spacing:.12em;}
#hud .cnt b.rk{color:#b98cf0;}

/* ---------- 标题界面补充 ---------- */
#title .tProg{margin-top:14px;font-size:12.5px;color:var(--dim);letter-spacing:.08em;}
#title .tProg b{color:var(--acc2);}

/* ---------- 操作说明（序章前） ---------- */
.tipsbox{max-width:620px;text-align:left;}
.tipsbox .ovh{text-align:center;}
.tiprow{
    display:flex;gap:14px;align-items:baseline;
    padding:11px 2px;font-size:14.5px;line-height:1.9;color:var(--text);
    border-bottom:1px solid rgba(160,130,230,.12);
}
.tiprow b{flex:0 0 44px;color:var(--acc);letter-spacing:.1em;}
.tipnote{
    margin:14px 0 2px;padding:9px 12px;font-size:13px;line-height:1.8;
    color:var(--dim);
    border-left:2px solid rgba(160,130,230,.4);
    background:rgba(160,130,230,.06);
}
kbd{
    display:inline-block;padding:1px 7px;margin:0 2px;
    border:1px solid var(--line);border-radius:3px;
    background:rgba(18,16,32,.9);color:#f0e6ff;
    font-family:var(--font);font-size:13px;
}
.tipsbox .btn{display:block;width:100%;margin-top:22px;}
#hud .sp{color:#f2d98a;font-size:12.5px;letter-spacing:.12em;}

/* ============================================================
   移动端适配（story.css 在 game.css 之后加载，AVG 专属规则写这里）
   ============================================================ */

/* ---------- 竖屏引导：仅在手机竖屏时出现 ---------- */
#rotate{display:none;}
.roticon{
    width:46px;height:78px;margin:0 auto;border:2px solid rgba(185,140,240,.7);border-radius:9px;
    position:relative;box-shadow:0 0 26px rgba(160,110,240,.35);
    animation:rotRock 2.4s ease-in-out infinite;
}
.roticon::before{
    content:"";position:absolute;top:7px;left:50%;transform:translateX(-50%);
    width:16px;height:3px;border-radius:2px;background:rgba(185,140,240,.75);
}
.roticon::after{
    content:"";position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
    width:12px;height:12px;border-radius:50%;border:2px solid rgba(126,200,227,.7);
}
@keyframes rotRock{
    0%{transform:rotate(0);}35%{transform:rotate(-90deg);}
    68%{transform:rotate(-90deg);}100%{transform:rotate(0);}
}
#rotate .rotbox{
    max-width:420px;padding:32px 26px;text-align:center;
    background:linear-gradient(180deg,rgba(18,16,32,.96),rgba(26,22,46,.97));
    border:1px solid var(--line);border-radius:3px;
    box-shadow:0 20px 70px rgba(0,0,0,.7),inset 0 0 60px rgba(120,80,190,.08);
    animation:ovin .45s cubic-bezier(.2,.8,.3,1);
}
#rotate h2{margin:24px 0 0;font-size:19px;letter-spacing:.22em;color:#f0e6ff;}
#rotate p{margin:14px 0 0;font-size:13.5px;line-height:2;color:var(--dim);}
#rotate .btn{display:block;width:100%;margin-top:26px;}

@media (orientation:portrait) and (max-width:920px) and (pointer:coarse){
    #rotate:not(.off){
        display:flex;position:fixed;inset:0;z-index:200;
        align-items:center;justify-content:center;
        padding:calc(26px + env(safe-area-inset-top,0px)) 20px calc(26px + env(safe-area-inset-bottom,0px));
        background:radial-gradient(ellipse at 50% 40%,rgba(26,20,48,.97),rgba(6,6,12,.99));
    }
}

/* ---------- 窄屏：AVG 浮层 / 面板 ---------- */
@media (max-width:480px){
    #overlay .ovbox{padding:26px 18px;}
    #overlay .bebox{padding:0 18px;}
    #overlay .betx{font-size:13.5px;margin:18px 0 24px;}
    #overlay .beti{font-size:clamp(19px,5.6vw,26px);}
    .tcard2{padding:30px 22px;}
    .tcard2 .tch{font-size:clamp(22px,7vw,32px);}
    #hub .hubbox{padding:24px 18px;width:94vw;}
    .menubox{min-width:0;}
    .tiprow{gap:10px;font-size:13.5px;}
    .tiprow b{flex:0 0 38px;}
    .logLine{font-size:13.5px;gap:8px;}
    .logLine .lw{min-width:56px;}
    .chItem{padding:12px 13px;gap:10px;}
    .chItem .n{min-width:46px;font-size:11.5px;}
    .chItem .t{font-size:14px;}
    .rlItem{padding:12px 13px;font-size:14px;}
    .cfgRow{gap:10px;font-size:14px;}
}

/* ---------- 矮屏（手机横屏）：浮层可滚动，不被裁掉 ---------- */
@media (max-height:480px){
    #overlay .ovbox{padding:22px 26px;}
    .logList{max-height:54vh;}
    #hub .hubbox{max-height:88vh;}
}