/* ============================================================
   魔法少女的魔女审判 · ARG 引擎样式
   调查牢屋敷 → 收集线索 → 密钥解锁档案 → 推进周目
   ============================================================ */

:root{
    --bg:#06060c;
    --panel:rgba(16,15,28,.94);
    --panel2:rgba(24,22,40,.96);
    --line:rgba(160,130,230,.32);
    --acc:#b98cf0;
    --acc2:#7ec8e3;
    --warn:#e98aa8;
    --text:#e9e6f7;
    --dim:#9a94b8;
    --ok:#8ee0b0;
    --font:"Noto Serif SC","Songti SC","SimSun",serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
    margin:0;height:100%;overflow:hidden;
    background:var(--bg);color:var(--text);
    font-family:var(--font);
    user-select:none;
}

/* ---------- 通用背景层：星尘 + 极光 ---------- */
.sky{position:fixed;inset:0;pointer-events:none;z-index:0;}
.sky::before{
    content:"";position:absolute;inset:0;
    background:
        radial-gradient(ellipse 70% 50% at 22% 12%, rgba(140,110,220,.20), transparent 60%),
        radial-gradient(ellipse 60% 45% at 82% 78%, rgba(80,150,200,.16), transparent 62%),
        radial-gradient(ellipse 90% 70% at 50% 50%, rgba(30,26,60,.5), transparent 70%);
    animation:aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora{
    0%{transform:scale(1) translate(0,0);filter:hue-rotate(0deg);}
    50%{transform:scale(1.08) translate(-2%,1%);filter:hue-rotate(22deg);}
    100%{transform:scale(1.03) translate(2%,-1%);filter:hue-rotate(-14deg);}
}
.sky::after{
    content:"";position:absolute;inset:-10%;
    background-image:
        radial-gradient(1.6px 1.6px at 20% 30%, rgba(255,255,255,.85), transparent),
        radial-gradient(1.4px 1.4px at 70% 20%, rgba(200,220,255,.7), transparent),
        radial-gradient(1.2px 1.2px at 40% 70%, rgba(255,240,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 85% 60%, rgba(220,200,255,.7), transparent),
        radial-gradient(1.1px 1.1px at 12% 82%, rgba(255,255,255,.55), transparent),
        radial-gradient(1.3px 1.3px at 60% 88%, rgba(200,230,255,.5), transparent);
    background-size:340px 340px,420px 420px,300px 300px,380px 380px,260px 260px,460px 460px;
    animation:drift 90s linear infinite;
    opacity:.75;
}
@keyframes drift{to{background-position:340px 340px,-420px 420px,300px -300px,-380px -380px,260px 260px,-460px -460px;}}

/* ---------- 开始界面 ---------- */
#title{
    position:fixed;inset:0;z-index:30;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:24px;
    transition:opacity .9s, transform .9s;
}
#title.hide{opacity:0;transform:scale(1.06);pointer-events:none;}
#title .tlogo{
    font-size:clamp(30px,6.4vw,64px);letter-spacing:.14em;
    background:linear-gradient(100deg,#fff 8%,#e3c0ff 30%,#b98cf0 48%,#7ec8e3 70%,#fff 92%);
    background-size:260% 100%;
    -webkit-background-clip:text;background-clip:text;color:transparent;
    animation:flow 7s linear infinite;
    text-shadow:0 0 40px rgba(160,110,240,.35);
}
@keyframes flow{to{background-position:260% 0;}}
#title .tlogo2{
    margin-top:6px;font-size:clamp(16px,3.2vw,30px);letter-spacing:.5em;
    color:#cbb8ea;text-indent:.5em;
    animation:fadein 1.4s .3s both;
}
#title .tsub{
    margin-top:20px;max-width:640px;font-size:14px;line-height:2;color:var(--dim);
    animation:fadein 1.4s .8s both;
}
#title .tbtn{
    margin-top:34px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
    animation:fadein 1.4s 1.2s both;
}
@keyframes fadein{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}

.btn{
    padding:11px 26px;border:1px solid var(--line);border-radius:2px;
    background:rgba(30,26,52,.7);color:var(--text);
    font-family:var(--font);font-size:15px;letter-spacing:.12em;cursor:pointer;
    transition:.32s cubic-bezier(.2,.8,.3,1);position:relative;overflow:hidden;
}
.btn::before{
    content:"";position:absolute;inset:0;left:-120%;
    background:linear-gradient(100deg,transparent,rgba(185,140,240,.35),transparent);
    transition:left .6s;
}
.btn:hover::before{left:120%;}
.btn:hover{
    border-color:var(--acc);color:#fff;
    box-shadow:0 0 22px rgba(160,110,240,.35),inset 0 0 18px rgba(160,110,240,.12);
    transform:translateY(-2px);
}
.btn.ghost{opacity:.72;font-size:13px;padding:9px 18px;}

/* ---------- 主舞台（剧情模式） ---------- */
#stage{position:fixed;inset:0;z-index:10;display:none;}
#stage.on{display:block;}

#bg{
    position:absolute;inset:0;background-size:cover;background-position:center;
    transition:opacity .8s, transform 12s linear, filter .8s;
    filter:brightness(.62) saturate(.9);
}
#bg::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(4,4,10,.55) 0%,rgba(4,4,10,.15) 38%,rgba(4,4,10,.86) 100%);
}
#bg.chg{animation:bgfade .9s ease;}
@keyframes bgfade{from{opacity:0;}to{opacity:1;}}

/* 立绘层 */
#chars{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:0;}
#chars .ch{
    height:82%;max-height:82vh;object-fit:contain;
    filter:drop-shadow(0 10px 40px rgba(0,0,0,.7));
    opacity:0;transform:translateY(26px) scale(.98);
    transition:opacity .7s, transform .7s, filter .5s;
}
#chars .ch.in{opacity:1;transform:none;}
#chars .ch.dim{filter:brightness(.42) blur(1.6px);transform:scale(.97);}

/* 顶部 HUD */
#hud{
    position:absolute;top:0;left:0;right:0;z-index:14;
    display:flex;align-items:center;gap:8px;padding:12px 16px;
    background:linear-gradient(180deg,rgba(4,4,10,.82),transparent);
}
#hud .sp{flex:1;}
#hud .hb{
    padding:7px 14px;font-size:13px;letter-spacing:.06em;
    border:1px solid var(--line);border-radius:2px;
    background:rgba(18,16,32,.78);color:var(--dim);
    cursor:pointer;transition:.28s;font-family:var(--font);
}
#hud .hb:hover{color:#fff;border-color:var(--acc);box-shadow:0 0 14px rgba(160,110,240,.3);}
#hud .hb.act{color:#fff;border-color:var(--acc);background:rgba(90,60,150,.55);box-shadow:0 0 16px rgba(160,110,240,.4);}
#hud .cnt{font-size:12px;color:var(--dim);letter-spacing:.08em;padding-right:6px;}
#hud .cnt b{color:var(--acc2);}

/* 对话框 */
#dialog{
    position:absolute;left:0;right:0;bottom:0;z-index:15;
    padding:0 clamp(14px,5vw,90px) clamp(18px,4vh,44px);
}
#dbox{
    position:relative;max-width:1000px;margin:0 auto;
    background:linear-gradient(180deg,rgba(14,13,26,.93),rgba(20,18,38,.96));
    border:1px solid var(--line);border-radius:3px;
    padding:20px 26px 22px 116px;
    box-shadow:0 12px 50px rgba(0,0,0,.66),inset 0 0 40px rgba(120,80,190,.07);
    backdrop-filter:blur(6px);
    min-height:144px;
}
#dbox::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(200,160,255,.75),transparent);
}
#speaker{
    position:absolute;top:-15px;left:116px;
    padding:5px 18px;font-size:15px;letter-spacing:.14em;
    background:linear-gradient(100deg,#2a2148,#3a2c5e);
    border:1px solid var(--line);border-radius:2px;color:#f0e6ff;
    box-shadow:0 4px 18px rgba(0,0,0,.5);
    opacity:0;transition:.4s;
}
#speaker.on{opacity:1;}
/* 对话头像：把说话人立绘的头部裁一块贴在对话框左侧 */
#dface{
    position:absolute;left:18px;top:20px;
    width:82px;height:100px;overflow:hidden;
    border:1px solid var(--line);border-radius:2px;
    background:linear-gradient(180deg,rgba(44,34,74,.95),rgba(16,14,30,.98));
    box-shadow:0 6px 20px rgba(0,0,0,.5);
    opacity:0;transition:.35s;pointer-events:none;
}
#dface.on{opacity:1;}
/* 立绘先整体缩小到 310px 高，再按框裁切：发顶留 2px 余量，不会被顶边切掉 */
#dface img{
    position:absolute;left:50%;top:-2px;
    height:310px;width:auto;transform:translateX(-50%);
}
#dtext{
    font-size:clamp(15px,2.2vw,17.5px);line-height:2.05;letter-spacing:.03em;
    min-height:76px;white-space:pre-wrap;
}
#dtext .cur{
    display:inline-block;width:2px;height:1em;vertical-align:-2px;margin-left:2px;
    background:var(--acc);animation:blink .8s steps(1) infinite;
}
@keyframes blink{50%{opacity:0;}}
#dnext{
    position:absolute;right:22px;bottom:14px;font-size:13px;color:var(--acc);
    opacity:0;transition:.3s;animation:bob 1.4s ease-in-out infinite;
}
#dnext.on{opacity:.9;}
@keyframes bob{50%{transform:translateY(3px);}}

/* 选项 */
#choices{
    display:flex;flex-direction:column;gap:10px;
    max-width:940px;margin:0 auto 16px;
}
#choices .cc{
    padding:14px 22px;text-align:left;cursor:pointer;
    background:linear-gradient(100deg,rgba(26,22,46,.94),rgba(34,28,58,.94));
    border:1px solid var(--line);border-left:3px solid rgba(185,140,240,.5);
    border-radius:2px;color:var(--text);font-family:var(--font);
    font-size:15.5px;letter-spacing:.04em;
    transition:.3s cubic-bezier(.2,.8,.3,1);
    opacity:0;animation:ccin .5s both;
}
#choices .cc:nth-child(1){animation-delay:.05s;}
#choices .cc:nth-child(2){animation-delay:.16s;}
#choices .cc:nth-child(3){animation-delay:.27s;}
#choices .cc:nth-child(4){animation-delay:.38s;}
@keyframes ccin{from{opacity:0;transform:translateX(-18px);}to{opacity:1;transform:none;}}
#choices .cc:hover{
    border-left-color:var(--acc2);color:#fff;
    background:linear-gradient(100deg,rgba(52,40,88,.96),rgba(40,60,96,.96));
    box-shadow:0 0 26px rgba(140,110,230,.28);
    transform:translateX(8px);
}
/* 会直接通向 Bad End 的选项：标红并挂上警示条 */
#choices .cc.bad{
    border-color:rgba(220,60,70,.6);border-left-color:#e0434f;color:#ffd9dc;
    background:linear-gradient(100deg,rgba(58,14,22,.95),rgba(38,12,26,.95));
}
#choices .cc.bad:hover{
    border-left-color:#ff6a76;color:#fff;
    background:linear-gradient(100deg,rgba(110,20,32,.96),rgba(60,14,34,.96));
    box-shadow:0 0 30px rgba(230,50,70,.42);
}
#choices .cc .ccwarn{
    display:block;margin-bottom:7px;
    font-size:11.5px;letter-spacing:.24em;color:#ff6a76;
}

/* ---------- 调查界面 ---------- */
#invest{
    position:fixed;inset:0;z-index:20;display:none;
    padding:clamp(14px,4vh,40px) clamp(14px,5vw,70px);
    overflow-y:auto;
}
#invest.on{display:block;animation:fadein .6s both;}
#invest h2{
    font-size:22px;letter-spacing:.16em;margin:6px 0 4px;color:#fff;
    text-shadow:0 0 22px rgba(160,110,240,.4);
}
#invest .tip{color:var(--dim);font-size:13.5px;line-height:1.9;margin:0 0 18px;}
.floor{
    border:1px solid var(--line);border-radius:3px;
    background:var(--panel);margin-bottom:20px;overflow:hidden;
}
.floor > h3{
    margin:0;padding:11px 18px;font-size:15px;letter-spacing:.14em;
    background:linear-gradient(100deg,rgba(44,34,74,.9),rgba(24,20,44,.9));
    border-bottom:1px solid var(--line);color:#e6dcff;
}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;padding:16px;}
.room{
    border:1px solid rgba(160,130,230,.22);border-radius:2px;
    background:linear-gradient(160deg,rgba(24,21,42,.9),rgba(15,14,28,.9));
    padding:13px 15px;cursor:pointer;transition:.32s cubic-bezier(.2,.8,.3,1);
    position:relative;overflow:hidden;
}
.room::after{
    content:"";position:absolute;inset:0;opacity:0;transition:.4s;
    background:radial-gradient(circle at 50% 120%,rgba(160,110,240,.28),transparent 66%);
}
.room:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.5);}
.room:hover::after{opacity:1;}
.room .rn{font-size:15.5px;letter-spacing:.08em;color:#fff;position:relative;}
.room .rd{font-size:12.5px;color:var(--dim);margin-top:6px;line-height:1.75;position:relative;}
.room .rg{
    position:absolute;top:11px;right:13px;font-size:11.5px;letter-spacing:.06em;
    color:var(--ok);border:1px solid rgba(142,224,176,.4);border-radius:2px;
    padding:1px 7px;background:rgba(142,224,176,.1);
}
.room.clear .rn{color:#cfc4f0;}
.room.done{border-color:rgba(142,224,176,.4);}
.room.done::after{background:radial-gradient(circle at 50% 120%,rgba(110,220,160,.2),transparent 66%);opacity:1;}

/* 热点弹窗 */
#spot{
    position:fixed;inset:0;z-index:26;display:none;
    align-items:center;justify-content:center;padding:20px;
    background:rgba(3,3,8,.86);backdrop-filter:blur(7px);
}
#spot.on{display:flex;animation:fadein .4s both;}
#spot .sc{
    max-width:720px;width:100%;max-height:86vh;overflow-y:auto;
    background:var(--panel2);border:1px solid var(--line);border-radius:3px;
    padding:26px 30px;box-shadow:0 24px 80px rgba(0,0,0,.7);
    position:relative;
}
#spot .sc::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(200,160,255,.8),transparent);
}
#spot h3{margin:0 0 14px;font-size:19px;letter-spacing:.1em;color:#fff;}
#spot .sx{font-size:15px;line-height:2.05;color:#dcd6f0;white-space:pre-wrap;}
#spot .sx em{color:var(--acc2);font-style:normal;}
#spot .sf{margin-top:22px;display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}

/* ---------- 线索库 / 档案终端 ---------- */
#panel{
    position:fixed;inset:0;z-index:24;display:none;
    padding:clamp(14px,4vh,40px) clamp(14px,5vw,70px);overflow-y:auto;
}
#panel.on{display:block;animation:fadein .5s both;}
#panel h2{font-size:21px;letter-spacing:.16em;margin:6px 0 4px;color:#fff;}
#panel .tip{color:var(--dim);font-size:13.5px;line-height:1.9;margin:0 0 18px;}

.tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.tab{
    padding:8px 20px;font-size:14px;letter-spacing:.1em;cursor:pointer;
    border:1px solid var(--line);border-radius:2px;background:rgba(20,18,36,.8);
    color:var(--dim);font-family:var(--font);transition:.28s;
}
.tab:hover{color:#fff;border-color:var(--acc);}
.tab.act{color:#fff;background:linear-gradient(100deg,rgba(70,50,120,.8),rgba(40,50,90,.8));border-color:var(--acc);box-shadow:0 0 18px rgba(160,110,240,.3);}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.card{
    border:1px solid rgba(160,130,230,.24);border-radius:2px;
    background:linear-gradient(160deg,rgba(24,21,42,.92),rgba(14,13,26,.92));
    padding:12px;text-align:center;transition:.34s cubic-bezier(.2,.8,.3,1);
    position:relative;
}
.card:not(.lock):hover{border-color:var(--acc);transform:translateY(-4px);box-shadow:0 10px 30px rgba(0,0,0,.55);}
.card img{
    width:100%;height:172px;object-fit:cover;object-position:top center;
    border-radius:2px;display:block;margin-bottom:9px;
}
.card .cn{font-size:14.5px;letter-spacing:.08em;color:#fff;}
.card .cno{font-size:11.5px;color:var(--dim);letter-spacing:.1em;margin-top:4px;}
.card.lock{cursor:pointer;}
.card.lock img{filter:grayscale(1) brightness(.24) blur(3px);}
.card.lock .cn{color:#7e7899;}
.card.lock::after{
    content:"?";position:absolute;top:64px;left:0;right:0;
    font-size:40px;color:rgba(185,140,240,.55);text-shadow:0 0 20px rgba(160,110,240,.5);
    pointer-events:none;
}
.card.lock:hover{border-color:rgba(185,140,240,.6);box-shadow:0 0 24px rgba(160,110,240,.25);}
.card .yt{
    position:absolute;top:8px;right:8px;font-size:10.5px;letter-spacing:.06em;
    padding:1px 6px;border-radius:2px;background:rgba(126,200,227,.16);
    border:1px solid rgba(126,200,227,.4);color:var(--acc2);
}

.clue{
    border:1px solid rgba(160,130,230,.24);border-left:3px solid var(--acc2);
    border-radius:2px;background:rgba(20,18,36,.9);
    padding:14px 18px;margin-bottom:12px;
    animation:fadein .5s both;
}
.clue b{color:#fff;font-size:15.5px;letter-spacing:.06em;}
.clue p{margin:8px 0 0;font-size:14px;line-height:1.95;color:#cfc9e6;}
.clue .from{font-size:12px;color:var(--dim);margin-top:7px;letter-spacing:.06em;}

/* ---------- 密钥输入 ---------- */
#code{
    position:fixed;inset:0;z-index:28;display:none;
    align-items:center;justify-content:center;padding:20px;
    background:rgba(3,3,8,.9);backdrop-filter:blur(8px);
}
#code.on{display:flex;animation:fadein .4s both;}
#code .cc{
    max-width:560px;width:100%;
    background:var(--panel2);border:1px solid var(--line);border-radius:3px;
    padding:30px 34px;box-shadow:0 24px 80px rgba(0,0,0,.75);position:relative;
}
#code .cc::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(200,160,255,.8),transparent);
}
#code h3{margin:0 0 8px;font-size:19px;letter-spacing:.1em;color:#fff;}
#code .cq{font-size:14px;line-height:1.95;color:var(--dim);margin-bottom:18px;}
#code input{
    width:100%;padding:13px 16px;font-size:17px;letter-spacing:.16em;text-align:center;
    background:rgba(8,8,16,.9);border:1px solid var(--line);border-radius:2px;
    color:#fff;font-family:var(--font);outline:none;transition:.3s;
    user-select:text;
}
#code input:focus{border-color:var(--acc);box-shadow:0 0 22px rgba(160,110,240,.3);}
#code .cf{margin-top:18px;display:flex;gap:10px;justify-content:flex-end;}
#code .msg{margin-top:12px;font-size:13.5px;letter-spacing:.06em;min-height:20px;}
#code .msg.err{color:var(--warn);animation:shake .4s;}
#code .msg.ok{color:var(--ok);}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);}}

/* ---------- 通用 ---------- */
#toast{
    position:fixed;left:50%;bottom:11%;transform:translateX(-50%) translateY(20px);
    z-index:40;padding:12px 26px;border-radius:2px;
    background:linear-gradient(100deg,rgba(50,36,86,.96),rgba(28,40,70,.96));
    border:1px solid var(--acc);color:#fff;font-size:14.5px;letter-spacing:.08em;
    box-shadow:0 10px 40px rgba(0,0,0,.6),0 0 26px rgba(160,110,240,.3);
    opacity:0;pointer-events:none;transition:.45s cubic-bezier(.2,.8,.3,1);
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

#fade{
    position:fixed;inset:0;z-index:50;background:#04040a;
    opacity:0;pointer-events:none;transition:opacity 1s;
}
#fade.on{opacity:1;pointer-events:all;}

::-webkit-scrollbar{width:9px;}
::-webkit-scrollbar-track{background:rgba(10,10,20,.6);}
::-webkit-scrollbar-thumb{background:rgba(150,110,220,.36);border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:rgba(170,130,240,.6);}

/* ============================================================
   新增：身份卡 / 推理台 / 结局卡 / 立绘呼吸
   ============================================================ */

/* ---------- 开始界面 · 玩家身份卡 ---------- */
#title .tcard{
    margin-top:26px;max-width:560px;width:100%;
    border:1px solid var(--line);border-radius:3px;
    background:linear-gradient(160deg,rgba(26,22,46,.88),rgba(14,13,26,.92));
    padding:18px 22px;text-align:left;
    box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 0 34px rgba(120,80,190,.08);
    animation:fadein 1.4s 1s both;position:relative;overflow:hidden;
}
#title .tcard::before{
    content:"";position:absolute;inset:0;left:-140%;
    background:linear-gradient(100deg,transparent,rgba(242,217,138,.13),transparent);
    animation:cardscan 6.5s ease-in-out infinite;
}
@keyframes cardscan{0%{left:-140%;}55%{left:140%;}100%{left:140%;}}
#title .tcard .trow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
#title .tcard .tn{
    font-size:22px;letter-spacing:.3em;color:#f2d98a;
    text-shadow:0 0 22px rgba(242,217,138,.4);
}
#title .tcard .tedit{
    padding:4px 12px;font-size:11.5px;letter-spacing:.08em;cursor:pointer;
    border:1px solid rgba(242,217,138,.35);border-radius:2px;
    background:rgba(242,217,138,.08);color:#f2d98a;font-family:var(--font);
    transition:.28s;
}
#title .tcard .tedit:hover{border-color:#f2d98a;background:rgba(242,217,138,.18);color:#fff;}
#title .tcard .tedit-box{display:none;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap;}
#title .tcard .tedit-box.on{display:flex;}
#title .tcard .tedit-box input{
    flex:1;min-width:190px;padding:9px 14px;font-size:15px;letter-spacing:.12em;
    background:rgba(8,8,16,.9);border:1px solid var(--line);border-radius:2px;
    color:#fff;font-family:var(--font);outline:none;transition:.3s;
    user-select:text;
}
#title .tcard .tedit-box input:focus{border-color:#f2d98a;box-shadow:0 0 20px rgba(242,217,138,.25);}
#title .tcard .tt{font-size:13px;color:#cfc4f0;letter-spacing:.08em;margin-top:8px;}
#title .tcard .td{font-size:12.5px;color:var(--dim);margin-top:5px;line-height:1.7;}
#title .tcard .tgoal{
    margin-top:12px;padding-top:11px;border-top:1px dashed rgba(160,130,230,.28);
    font-size:13px;color:#8ee0b0;letter-spacing:.05em;
}

/* ---------- HUD 身份 ---------- */
#hud .cnt i{
    font-style:normal;color:#f2d98a;letter-spacing:.1em;
    padding-right:12px;margin-right:4px;
    border-right:1px solid rgba(160,130,230,.28);
}
#hud .cnt b.rk{color:#b98cf0;}

/* ---------- 立绘：呼吸 + 说话时的微光 ---------- */
#chars .ch.in{animation:breathe 4.8s ease-in-out infinite;}
@keyframes breathe{
    0%,100%{transform:translateY(0) scale(1);filter:drop-shadow(0 10px 40px rgba(0,0,0,.7));}
    50%{transform:translateY(-9px) scale(1.012);filter:drop-shadow(0 14px 46px rgba(120,80,190,.42));}
}

/* ---------- 推理台 ---------- */
#lab{
    position:fixed;inset:0;z-index:22;display:none;
    padding:clamp(14px,4vh,40px) clamp(14px,5vw,70px);overflow-y:auto;
}
#lab.on{display:block;animation:fadein .5s both;}
#lab h2{font-size:22px;letter-spacing:.16em;margin:6px 0 4px;color:#fff;text-shadow:0 0 22px rgba(160,110,240,.4);}
#lab .tip{color:var(--dim);font-size:13.5px;line-height:1.9;margin:0 0 18px;}

.slots{
    display:flex;align-items:center;gap:14px;flex-wrap:wrap;
    padding:18px;border:1px solid var(--line);border-radius:3px;
    background:var(--panel);margin-bottom:16px;
}
.slot{
    flex:1;min-width:190px;min-height:92px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:5px;padding:12px;
    border:1px dashed rgba(160,130,230,.4);border-radius:2px;
    background:rgba(10,9,20,.6);color:#6e688a;font-size:13px;
    transition:.3s cubic-bezier(.2,.8,.3,1);
}
.slot b{color:#fff;font-size:14.5px;letter-spacing:.05em;text-align:center;}
.slot span{font-size:11.5px;color:var(--dim);}
.slot.fill{border-style:solid;border-color:var(--acc);background:rgba(40,30,70,.7);box-shadow:0 0 20px rgba(160,110,240,.25);}
.slot.bad{border-color:var(--warn);animation:shake .42s;box-shadow:0 0 22px rgba(233,138,168,.35);}
.slot.good{border-color:var(--ok);box-shadow:0 0 26px rgba(142,224,176,.45);}
.slots .plus{font-size:20px;color:rgba(185,140,240,.6);}

.labout{
    border:1px solid rgba(160,130,230,.24);border-left:3px solid var(--acc2);
    border-radius:2px;background:rgba(20,18,36,.9);
    padding:16px 20px;margin-bottom:20px;min-height:70px;
}
.labout .ph{margin:0;color:#6e688a;font-size:14px;}
.labout .bad{margin:0;color:var(--warn);font-size:14.5px;letter-spacing:.05em;animation:fadein .4s both;}
.labout .ded{animation:fadein .5s both;}
.labout .ded .dt{
    font-size:13px;letter-spacing:.14em;color:var(--acc2);margin-bottom:10px;
}
.labout .ded .db{font-size:14.5px;line-height:2;color:#dcd6f0;}
.labout .ded .dk{
    margin-top:13px;padding-top:11px;border-top:1px dashed rgba(160,130,230,.28);
    font-size:14px;color:var(--ok);letter-spacing:.06em;
}
.labout .ded .dk b{color:#fff;font-size:17px;letter-spacing:.18em;}

.pool{display:grid;grid-template-columns:repeat(auto-fill,minmax(206px,1fr));gap:10px;}
.ccard{
    border:1px solid rgba(160,130,230,.22);border-radius:2px;
    background:linear-gradient(160deg,rgba(24,21,42,.9),rgba(15,14,28,.9));
    padding:11px 13px;cursor:pointer;position:relative;
    transition:.3s cubic-bezier(.2,.8,.3,1);
}
.ccard b{display:block;font-size:14px;color:#fff;letter-spacing:.04em;font-weight:400;}
.ccard span{display:block;font-size:11.5px;color:var(--dim);margin-top:5px;}
.ccard i{
    position:absolute;top:9px;right:10px;font-style:normal;
    font-size:10.5px;color:var(--ok);letter-spacing:.05em;
}
.ccard:hover{border-color:var(--acc);transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.5);}
.ccard.sel{
    border-color:var(--acc2);border-left:3px solid var(--acc2);
    background:linear-gradient(160deg,rgba(34,46,70,.95),rgba(24,28,48,.95));
    box-shadow:0 0 24px rgba(126,200,227,.28);
}
.ccard.used{opacity:.5;}
.ccard.used b{color:#8ee0b0;}

/* ---------- 档案：遗憾块 / 无立绘占位 / 密钥已知标记 ---------- */
#spot .rg-w{
    margin-top:18px;padding:13px 16px;border-radius:2px;
    border:1px solid rgba(233,138,168,.28);border-left:3px solid var(--warn);
    background:rgba(60,26,44,.34);
}
#spot .rg-w b{font-size:12.5px;letter-spacing:.14em;color:var(--warn);}
#spot .rg-w p{margin:8px 0 0;font-size:14px;line-height:1.95;color:#e6d6de;}
.card .noart{
    width:100%;height:172px;display:flex;align-items:center;justify-content:center;
    border-radius:2px;margin-bottom:9px;font-size:26px;letter-spacing:.2em;
    background:linear-gradient(160deg,rgba(40,34,66,.9),rgba(18,16,32,.9));
    color:#b98cf0;
}
.card .yt.key{
    background:rgba(242,217,138,.14);border-color:rgba(242,217,138,.45);color:#f2d98a;
}

/* ---------- 结局卡 ---------- */
#endcard{
    position:fixed;inset:0;z-index:34;display:none;
    align-items:center;justify-content:center;padding:24px;
    background:rgba(3,3,8,.88);backdrop-filter:blur(8px);
}
#endcard.on{display:flex;animation:fadein .8s both;}
#endcard .ecin{
    max-width:660px;width:100%;text-align:center;
    border:1px solid var(--line);border-radius:3px;
    background:linear-gradient(180deg,rgba(16,15,30,.96),rgba(10,9,20,.98));
    padding:44px 40px 36px;position:relative;
    box-shadow:0 30px 90px rgba(0,0,0,.8),inset 0 0 60px rgba(120,80,190,.1);
}
#endcard .ecin::before{
    content:"";position:absolute;top:0;left:0;right:0;height:1px;
    background:linear-gradient(90deg,transparent,rgba(220,190,255,.9),transparent);
}
#endcard h2{
    margin:0 0 22px;font-size:clamp(19px,3.4vw,27px);letter-spacing:.2em;
    background:linear-gradient(100deg,#fff,#e3c0ff,#b98cf0,#7ec8e3,#fff);
    background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:flow 8s linear infinite;
}
#endcard p{margin:0 0 12px;font-size:15px;line-height:2.05;color:#d5cfe8;}
#endcard .ecst{
    margin-top:24px;padding-top:16px;border-top:1px dashed rgba(160,130,230,.28);
    font-size:12.5px;color:var(--dim);letter-spacing:.06em;
}
#endcard .ef{margin-top:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
#endcard .ef a{text-decoration:none;display:inline-block;}

@media (max-width:760px){
    #chars .ch{height:62%;}
    #dbox{padding:17px 18px 20px;min-height:120px;}
    #dface{display:none;}
    #speaker{left:18px;}
    #dtext{font-size:15px;min-height:64px;}
    .card img{height:132px;}
    .card .noart{height:132px;font-size:20px;}
    #hud .hb{padding:6px 10px;font-size:12px;}
    .slot{min-width:100%;}
    .slots .plus{display:none;}
    #endcard .ecin{padding:30px 22px 26px;}
}

/* ============================================================
   移动端适配（index.html 与 arg.html 都加载本文件）
   ============================================================ */

/* ---------- 移动浏览器地址栏伸缩：用 dvh 替代 100% ---------- */
@supports (height:100dvh){
    html,body{height:100dvh;}
}

/* ---------- 刘海 / 底部横条安全区 ---------- */
@supports (padding:env(safe-area-inset-top)){
    #hud{padding-top:calc(12px + env(safe-area-inset-top,0px));}
    #dialog{padding-bottom:calc(clamp(18px,4vh,44px) + env(safe-area-inset-bottom,0px));}
    #toast{bottom:calc(30px + env(safe-area-inset-bottom,0px));}
}

/* ---------- 触屏：加大点击热区，去掉长按弹出菜单 ---------- */
@media (hover:none) and (pointer:coarse){
    .btn{padding:13px 24px;min-height:44px;}
    .btn.ghost{padding:11px 20px;}
    #hud .hb{min-height:40px;padding:9px 15px;}
    #title .tcard .tedit{padding:8px 14px;font-size:12.5px;}
    #invest,#lab,#panel,#spot,#code,#stage{-webkit-touch-callout:none;}
}

/* ---------- 矮屏（手机横屏）：标题页可滚动，按钮不被裁 ---------- */
@media (max-height:640px){
    #title{justify-content:flex-start;overflow-y:auto;padding:18px 16px 26px;}
    #title .tsub{margin-top:14px;line-height:1.85;}
    #title .tcard{margin-top:18px;}
    #title .tbtn{margin-top:22px;}
}

/* ---------- 窄屏：栅格收敛为更小单元 ---------- */
@media (max-width:480px){
    .rooms{grid-template-columns:repeat(auto-fill,minmax(142px,1fr));gap:10px;padding:12px;}
    .grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:11px;}
    .pool{grid-template-columns:1fr;}
    #title{padding:18px 14px 24px;}
    #title .tsub{font-size:13px;line-height:1.9;}
    #title .tcard{padding:16px 15px;margin-top:18px;}
    #title .tcard .tn{font-size:19px;letter-spacing:.2em;}
    #title .tcard .tedit-box input{min-width:110px;font-size:14px;}
    #spot{padding:20px 16px;}
    #spot .sc{padding:22px 18px;}
    #code{padding:20px 16px;}
    #code .cc{padding:24px 18px;}
    #endcard{padding:16px;}
    #endcard .ecin{padding:30px 20px 26px;}
}