/*
 * 赛博朋克：回声之影 - UI V3.0
 * 设计原则：克制美学、内容优先、流畅动效、多端鲁棒
 */

/* ===== 设计令牌 ===== */
:root {
    --bg-void:    #050508;
    --bg-deep:    #0a0a12;
    --bg-surface: #101020;
    --bg-card:    #161628;
    --bg-elevated:#1c1c34;
    --bg-hover:   #222240;

    --cyan:       #00e5ff;
    --cyan-soft:  #00b8d4;
    --cyan-glow:  rgba(0,229,255,0.10);
    --cyan-glow-h:rgba(0,229,255,0.20);

    --magenta:    #e040fb;
    --magenta-soft:#ab47bc;
    --magenta-glow:rgba(224,64,251,0.10);

    --gold:       #ffd740;
    --gold-soft:  #ffab00;

    --green:      #00e676;
    --red:        #ff5252;
    --orange:     #ffab40;

    --txt:        #d0d0e0;
    --txt-2:      #9090a8;
    --txt-3:      #606078;
    --txt-4:      #3a3a50;

    --font-display:'Orbitron',sans-serif;
    --font-body:   'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
    --font-mono:   'Consolas','Courier New',monospace;

    --sp-xs:4px; --sp-sm:8px; --sp-md:16px; --sp-lg:24px; --sp-xl:32px;
    --r-sm:4px; --r-md:8px; --r-lg:12px; --r-xl:16px;
    --ease: cubic-bezier(.4,0,.2,1);
    --fast: .15s var(--ease);
    --norm: .3s var(--ease);
    --slow: .5s var(--ease);
}

/* ===== Reset ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
    background:var(--bg-void);
    color:var(--txt);
    font-family:var(--font-body);
    font-size:15px;
    line-height:1.7;
    display:flex;
    -webkit-font-smoothing:antialiased;
}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--txt-4);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--txt-3)}
::selection{background:rgba(0,229,255,0.25);color:#fff}
img,button{display:block}

/* ===== 开场动画 ===== */
#entry-overlay{
    position:fixed;inset:0;z-index:10000;
    background:var(--bg-void);
    display:flex;justify-content:center;align-items:center;
    cursor:pointer;
    transition:opacity .8s var(--ease),visibility .8s;
}
#entry-overlay.hide{opacity:0;visibility:hidden;pointer-events:none}
.entry-content{text-align:center}
.entry-title{
    font-family:var(--font-display);
    font-size:clamp(28px,6vw,48px);
    font-weight:700;
    color:var(--cyan);
    letter-spacing:8px;
    text-shadow:0 0 40px var(--cyan-glow-h),0 0 80px rgba(0,229,255,0.05);
    opacity:0;transform:translateY(20px);
    animation:entryFadeIn 1s .3s var(--ease) forwards;
}
.entry-sub{
    font-family:var(--font-display);
    font-size:clamp(10px,2vw,13px);
    color:var(--txt-4);
    letter-spacing:6px;
    margin-top:var(--sp-sm);
    opacity:0;animation:entryFadeIn .8s .8s var(--ease) forwards;
}
.entry-line{
    width:60px;height:1px;
    background:linear-gradient(90deg,transparent,var(--cyan-soft),transparent);
    margin:var(--sp-lg) auto;
    opacity:0;animation:entryFadeIn .6s 1.2s var(--ease) forwards;
}
.entry-hint{
    font-size:12px;color:var(--txt-4);
    letter-spacing:3px;
    opacity:0;animation:entryFadeIn .6s 1.6s var(--ease) forwards,hintPulse 2s 2.5s ease-in-out infinite;
}
@keyframes entryFadeIn{to{opacity:1;transform:translateY(0)}}
@keyframes hintPulse{0%,100%{opacity:.4}50%{opacity:.8}}

/* ===== 日志面板 ===== */
#log-container{
    position:relative;
    width:30%;min-width:0;max-width:400px;
    height:100%;
    background:var(--bg-deep);
    border-right:1px solid rgba(255,255,255,0.06);
    display:flex;flex-direction:column;
    transition:width .4s var(--ease),min-width .4s var(--ease),opacity .3s;
    flex-shrink:0;overflow:hidden;
}
#log-container.log-closed{width:0;min-width:0;opacity:0;border-right-width:0}

#log-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:var(--sp-sm) var(--sp-md);
    border-bottom:1px solid rgba(255,255,255,0.04);
    flex-shrink:0;
}
.log-header-title{
    font-family:var(--font-display);
    font-size:11px;
    color:var(--txt-3);
    letter-spacing:2px;
    text-transform:uppercase;
}
.log-header-btn{
    background:none;border:none;
    color:var(--txt-4);cursor:pointer;
    font-size:14px;padding:2px 6px;
    border-radius:var(--r-sm);
    transition:var(--fast);
}
.log-header-btn:hover{color:var(--txt);background:rgba(255,255,255,0.05)}

#log-content{
    flex:1;overflow-y:auto;
    padding:var(--sp-sm) var(--sp-md);
}
#log-content p{
    margin:0 0 10px 0;
    font-size:12px;line-height:1.6;
    word-wrap:break-word;
    color:var(--txt-3);
    opacity:0;transform:translateY(4px);
    animation:logEntryIn .25s var(--ease) forwards;
}
@keyframes logEntryIn{to{opacity:1;transform:translateY(0)}}
#log-content .log-story{color:var(--txt-3)}
#log-content .log-choice{color:var(--magenta-soft);font-style:italic;padding-left:var(--sp-md);opacity:.7}
#log-content .log-action{color:var(--cyan-soft);font-size:11px}

#log-scroll-bottom{
    position:absolute;bottom:var(--sp-md);left:50%;
    transform:translateX(-50%);
    background:var(--cyan);color:var(--bg-deep);
    border:none;padding:5px 16px;
    border-radius:16px;cursor:pointer;
    font-family:var(--font-display);font-size:11px;font-weight:600;
    transition:var(--norm);z-index:10;
    box-shadow:0 2px 12px var(--cyan-glow);
}
#log-scroll-bottom.hidden{opacity:0;transform:translateX(-50%) translateY(12px);pointer-events:none}
#log-scroll-bottom:hover{box-shadow:0 2px 20px var(--cyan-glow-h)}

/* ===== 主容器 ===== */
#main-container{
    flex:1;height:100%;
    display:flex;flex-direction:column;
    overflow-y:auto;overflow-x:hidden;
    scroll-behavior:smooth;
}

/* ===== 控制栏 ===== */
#game-controls{
    position:sticky;top:0;z-index:50;
    display:flex;align-items:center;gap:var(--sp-sm);
    padding:var(--sp-sm) var(--sp-md);
    background:rgba(10,10,18,0.85);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255,255,255,0.04);
}
.control-btn{
    display:flex;align-items:center;gap:5px;
    background:rgba(255,255,255,0.04);
    color:var(--txt-3);
    border:1px solid rgba(255,255,255,0.06);
    padding:5px 12px;
    font-family:var(--font-display);font-size:11px;
    letter-spacing:1px;cursor:pointer;
    border-radius:var(--r-sm);
    transition:var(--fast);
    white-space:nowrap;
}
.control-btn:hover{background:rgba(0,229,255,0.08);color:var(--cyan);border-color:rgba(0,229,255,0.2)}
.ctrl-icon{font-size:12px}
.ctrl-label{font-size:10px}

#hud-indicators{margin-left:auto;display:flex;gap:var(--sp-sm)}
.hud-chip{
    display:none;align-items:center;gap:5px;
    padding:4px 10px;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--r-sm);
    font-family:var(--font-display);font-size:10px;
    white-space:nowrap;
}
.hud-chip.visible{display:flex}
.alarm-chip{border-color:rgba(255,82,82,0.3);animation:alarmPulse 2s ease-in-out infinite}
@keyframes alarmPulse{0%,100%{box-shadow:0 0 4px rgba(255,82,82,0.1)}50%{box-shadow:0 0 12px rgba(255,82,82,0.3)}}

/* ===== 游戏内容 ===== */
#game-content{
    width:100%;max-width:660px;
    margin:0 auto;
    padding:var(--sp-xl) var(--sp-lg) var(--sp-lg);
    display:flex;flex-direction:column;
}

/* 标题 */
#game-title{
    font-family:var(--font-display);
    font-size:clamp(22px,4vw,30px);
    font-weight:700;
    color:var(--cyan);
    text-align:center;
    letter-spacing:5px;
    margin-bottom:2px;
    position:relative;
}
#game-title::after{
    content:'';position:absolute;
    bottom:-6px;left:25%;right:25%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--cyan-soft),transparent);
}
#game-subtitle{
    text-align:center;
    color:var(--txt-4);
    font-family:var(--font-display);
    font-size:10px;
    letter-spacing:3px;
    margin-bottom:var(--sp-xl);
    margin-top:var(--sp-sm);
}

/* 位置指示 */
#location-display{
    display:none;
    align-items:center;gap:var(--sp-sm);
    padding:var(--sp-xs) var(--sp-md);
    margin-bottom:var(--sp-md);
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.03);
    border-radius:var(--r-sm);
    font-family:var(--font-display);font-size:11px;
}
#location-display.visible{display:flex}
.location-region{color:var(--txt-4)}
.location-sep{color:var(--txt-4);margin:0 2px}
.location-current{color:var(--cyan-soft)}

/* 属性 */
#player-stats{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
    gap:var(--sp-xs) var(--sp-md);
    padding:var(--sp-sm) var(--sp-md);
    margin-bottom:var(--sp-lg);
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.03);
    border-radius:var(--r-md);
}
.stat-item{display:flex;justify-content:space-between;align-items:center;padding:2px 0}
.stat-label{color:var(--txt-4);font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-family:var(--font-display)}
.stat-value{color:var(--cyan);font-weight:700;font-family:var(--font-display);font-size:15px;letter-spacing:1px}
.hp-bar{display:inline-block;width:48px;height:4px;background:var(--bg-deep);border-radius:2px;margin-right:6px;vertical-align:middle;overflow:hidden}
.hp-fill{display:block;height:100%;border-radius:2px;transition:width .5s var(--ease),background .5s}

@keyframes statFlash{0%{transform:scale(1)}25%{transform:scale(1.2);filter:brightness(1.8)}100%{transform:scale(1)}}
@keyframes statFlashRed{0%{transform:scale(1)}25%{transform:scale(1.25);filter:brightness(2) hue-rotate(-30deg)}100%{transform:scale(1)}}
.stat-value.flash-green{animation:statFlash .5s ease;color:var(--green)!important}
.stat-value.flash-red{animation:statFlashRed .5s ease;color:var(--red)!important}

/* ===== 故事文本 ===== */
#story-text{
    margin-bottom:var(--sp-lg);
    line-height:1.9;font-size:16px;
    min-height:2em;cursor:pointer;
    color:var(--txt);
    overflow-wrap:break-word;word-break:break-word;
}
#story-text p{margin:0 0 .85em 0}
#story-text p:last-child{margin-bottom:0}
#story-text strong,.speaker{color:var(--magenta);font-weight:600}

/* 打字机 */
#story-text .tw-char{opacity:0;transition:opacity .08s}
#story-text .tw-char.visible{opacity:1}
#story-text.typing-done .tw-char{opacity:1}
#story-text.typing::after{content:'▎';color:var(--cyan);animation:blink .7s step-end infinite;font-weight:300}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.story-animate{animation:fadeSlideUp .3s var(--ease)}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ===== 选项 ===== */
#choices{
    display:flex;flex-direction:column;
    gap:6px;margin-bottom:var(--sp-xl);
}
#choices button{
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.06);
    color:var(--txt);
    padding:12px var(--sp-md);
    cursor:pointer;font-size:15px;
    font-family:var(--font-body);
    text-align:left;
    border-radius:var(--r-md);
    transition:all var(--fast);
    position:relative;overflow:hidden;
    line-height:1.6;
}
#choices button::before{
    content:'';position:absolute;
    left:0;top:0;bottom:0;width:3px;
    background:var(--magenta);
    opacity:0;transition:opacity var(--fast);
}
#choices button:hover{
    background:var(--bg-elevated);
    border-color:rgba(224,64,251,0.25);
    transform:translateX(3px);
}
#choices button:hover::before{opacity:1}
#choices button:active{transform:translateX(1px);background:var(--bg-hover)}
#choices button.disabled{
    border-color:rgba(255,255,255,0.03);
    color:var(--txt-4);cursor:not-allowed;
    background:transparent;
}
#choices button.disabled:hover{transform:none;background:transparent}
#choices button.disabled[data-tooltip]::after{
    content:attr(data-tooltip);
    display:block;margin-top:3px;
    color:var(--txt-4);font-size:12px;font-style:italic;
}

.choice-tag{
    display:inline-block;font-size:9px;
    padding:1px 5px;border-radius:3px;
    margin-left:5px;font-weight:600;
    vertical-align:middle;letter-spacing:.5px;text-transform:uppercase;
}
.choice-tag-time{background:rgba(255,171,64,0.12);color:var(--orange)}
.choice-tag-check{background:var(--cyan-glow);color:var(--cyan)}
.choice-tag-once{background:var(--magenta-glow);color:var(--magenta);font-size:8px}
.check-hint{display:block;font-size:12px;margin-top:2px;font-style:italic;font-weight:400}
.hint-easy{color:var(--green)}.hint-medium{color:var(--orange)}.hint-hard{color:var(--red);opacity:.8}.hint-desperate{color:var(--red)}

/* ===== 环境交互 ===== */
#interactables{margin-bottom:var(--sp-lg)}
#interactables h4{color:var(--txt-4);font-size:11px;font-family:var(--font-display);letter-spacing:1px;text-transform:uppercase;margin-bottom:var(--sp-sm)}
.interactable-item{
    cursor:pointer;color:var(--cyan);
    background:transparent;border:1px solid rgba(0,229,255,0.3);
    padding:8px var(--sp-md);border-radius:var(--r-sm);
    margin-bottom:var(--sp-xs);
    transition:all var(--fast);text-align:center;
    font-family:var(--font-display);font-size:12px;letter-spacing:1px;
    position:relative;
}
.interactable-item:hover{background:var(--cyan);color:var(--bg-deep);box-shadow:0 0 16px var(--cyan-glow)}

/* ===== 面板系统 ===== */
.panel{
    padding-top:var(--sp-md);
    border-top:1px solid rgba(255,255,255,0.04);
    margin-top:var(--sp-lg);
}
.panel-grid{
    display:grid;grid-template-columns:1fr 1fr;
    gap:var(--sp-md);margin-top:var(--sp-md);
}
.panel-grid>.panel{margin-top:0}

/* 可折叠面板 */
.panel.collapsible .panel-header{
    cursor:pointer;user-select:none;
    display:flex;align-items:center;gap:var(--sp-sm);
    color:var(--cyan);font-family:var(--font-display);
    font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
    margin:0;padding:var(--sp-xs) 0;
    transition:color var(--fast);
}
.panel.collapsible .panel-header:hover{color:var(--cyan-soft)}
.panel-toggle{
    display:inline-block;
    font-size:10px;transition:transform var(--norm);
    color:var(--txt-4);
}
.panel.collapsible.open .panel-toggle{transform:rotate(90deg)}
.panel-body{
    max-height:0;overflow:hidden;
    transition:max-height .35s var(--ease),opacity .25s,margin .25s;
    opacity:0;margin-top:0;
}
.panel.collapsible.open .panel-body{
    max-height:600px;opacity:1;margin-top:var(--sp-sm);
}

/* 状态效果 */
#status-effects{display:flex;flex-wrap:wrap;gap:var(--sp-sm)}
.status-effect{
    position:relative;cursor:help;
    padding:3px 8px;border-radius:var(--r-sm);
    border:1px solid;font-size:12px;
    transition:var(--fast);
}
.status-effect.positive{background:rgba(0,230,118,0.08);border-color:rgba(0,230,118,0.3);color:var(--green)}
.status-effect.negative{background:rgba(255,82,82,0.08);border-color:rgba(255,82,82,0.3);color:var(--red)}

/* 物品 */
#inventory-items,#reputation-items{display:flex;flex-wrap:wrap;gap:6px}
.inventory-item{
    position:relative;cursor:help;
    font-size:12px;padding:3px 8px;
    border-radius:var(--r-sm);
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.05);
    transition:var(--fast);
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.inventory-item:hover{border-color:var(--cyan-soft)}
.inventory-item.usable{cursor:pointer;border-color:rgba(0,229,255,0.3)}
.inventory-item.usable:hover{background:var(--cyan);color:var(--bg-deep);box-shadow:0 0 10px var(--cyan-glow)}

/* 声望 */
.reputation-item{font-size:12px;background:var(--bg-card);padding:3px 8px;border-radius:var(--r-sm)}
.reputation-faction{color:var(--txt-2);font-weight:600}
.reputation-value{font-family:var(--font-display);color:var(--cyan);margin-left:6px;font-size:12px}

/* 任务 */
.quest-item{font-size:12px;color:var(--txt-2);margin-bottom:var(--sp-xs)}
.quest-title{color:var(--magenta);font-weight:600}
.quest-objective{font-style:italic;color:var(--txt-3)}

/* Tooltip */
.tooltip{
    visibility:hidden;width:200px;
    background:var(--bg-elevated);color:var(--txt);
    text-align:left;border-radius:var(--r-md);
    padding:var(--sp-sm) var(--sp-md);
    position:absolute;z-index:100;
    bottom:calc(100% + 8px);left:50%;margin-left:-100px;
    opacity:0;transition:opacity var(--fast);
    border:1px solid rgba(255,255,255,0.08);
    font-style:normal;font-weight:normal;
    font-size:12px;line-height:1.5;
    box-shadow:0 8px 24px rgba(0,0,0,0.5);
    pointer-events:none;
    overflow-wrap:break-word;
}
.inventory-item:hover .tooltip,.status-effect:hover .tooltip,.interactable-item:hover .tooltip{visibility:visible;opacity:1}

/* ===== 时间/警报指示条 ===== */
.time-display,.alarm-display{
    display:flex;align-items:center;gap:5px;
    padding:3px 8px;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:var(--r-sm);font-size:10px;font-family:var(--font-display);
}
.time-label,.alarm-label{color:var(--txt-4);text-transform:uppercase;letter-spacing:1px}
.time-bar,.alarm-bar{display:inline-block;width:52px;height:3px;background:var(--bg-deep);border-radius:2px;overflow:hidden}
.time-fill,.alarm-fill{display:block;height:100%;border-radius:2px;transition:width .5s var(--ease),background .5s}
.time-value{color:var(--cyan);font-size:10px}
.alarm-value{font-size:9px}
.alarm-chip{animation:alarmPulse 2s ease-in-out infinite}
.time-display.warning{border-color:rgba(255,171,64,0.4);animation:timeWarn 1.2s ease-in-out infinite}
.time-display.critical{border-color:rgba(255,82,82,0.5);animation:timeWarn .6s ease-in-out infinite}
@keyframes timeWarn{0%,100%{opacity:1}50%{opacity:.6}}

/* ===== 覆盖层 ===== */
.hidden{display:none!important}

/* 结局 */
#game-over-overlay{
    position:fixed;inset:0;
    background:rgba(5,5,8,0.93);
    display:flex;justify-content:center;align-items:center;
    z-index:1000;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    opacity:0;transition:opacity .5s var(--ease);
}
#game-over-overlay:not(.hidden){opacity:1}
#game-over-box{
    background:var(--bg-surface);
    padding:var(--sp-xl);border-radius:var(--r-xl);
    border:1px solid rgba(255,255,255,0.06);
    text-align:center;max-width:520px;width:90%;
    box-shadow:0 0 80px rgba(0,0,0,0.5);
    transform:translateY(12px);
    transition:transform .5s var(--ease);
    max-height:85vh;overflow-y:auto;
}
#game-over-overlay:not(.hidden) #game-over-box{transform:translateY(0)}
.ending-badge{
    display:inline-block;
    padding:4px 16px;border-radius:20px;
    font-family:var(--font-display);font-size:11px;
    letter-spacing:2px;text-transform:uppercase;
    margin-bottom:var(--sp-md);
}
#game-over-title{
    color:var(--magenta);font-family:var(--font-display);
    font-size:22px;letter-spacing:3px;margin-bottom:var(--sp-sm);
}
#game-over-divider{
    width:40px;height:1px;margin:var(--sp-md) auto;
    background:linear-gradient(90deg,transparent,var(--txt-4),transparent);
}
#game-over-message{
    color:var(--txt-2);line-height:1.8;
    margin-bottom:var(--sp-lg);font-size:14px;
    text-align:left;white-space:pre-line;
}
#game-over-stats{
    font-size:12px;color:var(--txt-3);
    text-align:left;
    padding:var(--sp-sm) var(--sp-md);
    background:var(--bg-card);
    border-radius:var(--r-md);
    margin-bottom:var(--sp-lg);
    line-height:1.8;
}
#restart-button{
    background:var(--cyan);border:none;
    color:var(--bg-deep);
    padding:10px 28px;border-radius:var(--r-sm);
    cursor:pointer;font-size:14px;
    font-family:var(--font-display);font-weight:700;
    letter-spacing:2px;
    transition:all var(--fast);
}
#restart-button:hover{box-shadow:0 0 20px var(--cyan-glow);transform:translateY(-1px)}

/* 物品详情 / 存档面板 */
.item-detail-panel{
    position:fixed;inset:0;
    background:rgba(5,5,8,0.9);
    z-index:500;display:flex;
    justify-content:center;align-items:center;
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
    opacity:0;transition:opacity .2s;
}
.item-detail-panel.show{opacity:1}
.item-detail-header{
    background:var(--bg-surface);
    padding:var(--sp-lg);
    border-top:3px solid;
    border-radius:var(--r-lg) var(--r-lg) 0 0;
    position:relative;
    min-width:280px;max-width:400px;width:90vw;
}
.item-detail-header h3{margin:0 0 var(--sp-sm);font-family:var(--font-display);font-size:15px;letter-spacing:1px}
.item-detail-meta{display:flex;gap:var(--sp-sm);font-size:10px}
.item-detail-category{color:var(--txt-4);background:var(--bg-card);padding:2px 7px;border-radius:3px;text-transform:uppercase;font-family:var(--font-display)}
.item-detail-rarity{font-family:var(--font-display);text-transform:uppercase}
.item-detail-close{position:absolute;top:10px;right:12px;font-size:20px;color:var(--txt-4);cursor:pointer;transition:color var(--fast);background:none;border:none;line-height:1}
.item-detail-close:hover{color:var(--txt)}
.item-detail-body{
    background:var(--bg-deep);
    padding:var(--sp-lg);
    border-radius:0 0 var(--r-lg) var(--r-lg);
    border:1px solid rgba(255,255,255,0.05);border-top:none;
    min-width:280px;max-width:400px;width:90vw;
}
.item-detail-body p{margin:0 0 var(--sp-sm);line-height:1.7;font-size:14px}
.item-detail-usable{color:var(--green);font-style:italic}
.item-detail-passive{color:var(--cyan);font-style:italic}

/* 存档槽 */
.save-slot{
    display:flex;justify-content:space-between;align-items:center;
    padding:var(--sp-sm) var(--sp-md);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:var(--r-sm);
    margin-bottom:var(--sp-sm);
    transition:var(--fast);
}
.save-slot:hover{border-color:var(--cyan-soft);background:var(--bg-card)}
.save-slot-num{color:var(--cyan);font-family:var(--font-display);font-size:12px;min-width:60px}
.save-slot-info{color:var(--txt-4);font-size:11px;flex:1;margin:0 var(--sp-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.save-slot-btn{
    background:transparent;border:1px solid var(--magenta-soft);
    color:var(--magenta);padding:4px 12px;cursor:pointer;
    font-family:var(--font-display);font-size:10px;
    border-radius:var(--r-sm);transition:var(--fast);letter-spacing:.5px;flex-shrink:0;
}
.save-slot-btn:hover{background:var(--magenta);color:var(--bg-deep)}

/* ===== 回忆/真相/线索 ===== */
.memory-panel{border-top-color:rgba(224,64,251,0.15)}
.memory-panel h3{color:var(--magenta)}
.memory-count{color:var(--magenta);font-family:var(--font-display);font-size:13px;margin-bottom:3px}
.memory-bar{width:100%;height:3px;background:var(--bg-deep);border-radius:2px;overflow:hidden}
.memory-fill{display:block;height:100%;background:linear-gradient(90deg,var(--magenta),var(--cyan));border-radius:2px;transition:width .5s var(--ease)}

.truth-panel{border-top-color:rgba(0,229,255,0.15)}
.truth-panel h3{color:var(--cyan)}
.shard-count{color:var(--cyan);font-family:var(--font-display);font-size:13px;margin-bottom:3px}
.shard-dots{display:flex;gap:5px}
.shard-dot{width:9px;height:9px;border-radius:50%;background:var(--bg-deep);border:1px solid var(--cyan-soft);transition:all .3s}
.shard-dot.active{background:var(--cyan);box-shadow:0 0 6px var(--cyan-glow)}

.clue-panel{border-top-color:rgba(255,215,64,0.15)}
.clue-panel h3{color:var(--gold)}
.clue-count{color:var(--gold);font-family:var(--font-display);font-size:11px;margin-bottom:var(--sp-sm)}
.clue-category{margin-bottom:var(--sp-sm)}
.clue-cat-label{display:inline-block;background:rgba(255,215,64,0.08);color:var(--gold);padding:2px 7px;border-radius:3px;font-size:10px;font-family:var(--font-display);margin-bottom:var(--sp-xs)}
.clue-item{padding:var(--sp-sm);margin:2px 0;border-left:2px solid var(--gold-soft);background:rgba(255,215,64,0.02);cursor:help;transition:background var(--fast)}
.clue-item:hover{background:rgba(255,215,64,0.05)}
.clue-title{display:block;color:var(--gold);font-weight:600;font-size:12px}
.clue-desc{display:block;color:var(--txt-3);font-size:11px;line-height:1.5;margin-top:1px}
.clue-combos{margin-top:var(--sp-md);padding-top:var(--sp-sm);border-top:1px dashed rgba(0,230,118,0.2)}
.combo-label{display:inline-block;background:rgba(0,230,118,0.08);color:var(--green);padding:2px 7px;border-radius:3px;font-size:10px;font-family:var(--font-display);margin-bottom:var(--sp-sm)}
.combo-item{padding:var(--sp-sm);margin:2px 0;border-left:2px solid var(--green);background:rgba(0,230,118,0.02);color:var(--txt-2);font-size:12px;line-height:1.6}
.combo-item strong{color:var(--green)}

/* ===== 成就 ===== */
.achievement-item{
    display:inline-block;
    background:rgba(255,215,64,0.06);
    border:1px solid rgba(255,215,64,0.25);
    color:var(--gold);padding:2px 8px;margin:2px;
    border-radius:var(--r-sm);font-size:11px;cursor:help;
}
.achievement-popup{
    position:fixed;top:-60px;left:50%;
    transform:translateX(-50%);
    background:var(--bg-surface);
    border:1px solid var(--gold-soft);
    color:var(--gold);padding:10px 20px;
    border-radius:var(--r-md);
    font-family:var(--font-display);font-size:12px;
    z-index:9999;letter-spacing:1px;
    transition:top .5s var(--ease);
    box-shadow:0 4px 24px rgba(255,215,64,0.15);
}
.achievement-popup.show{top:16px}

@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
.shake{animation:shake .35s ease}

/* ===== 检定小游戏 ===== */
.mg-overlay{
    position:fixed;inset:0;z-index:9000;
    background:rgba(5,5,8,0.95);
    display:flex;justify-content:center;align-items:center;
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    opacity:0;transition:opacity .3s var(--ease);
}
.mg-overlay.show{opacity:1}
.mg-overlay.mg-hide{opacity:0;pointer-events:none}
.mg-container{
    background:var(--bg-surface);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--r-xl);
    padding:var(--sp-xl);
    text-align:center;
    max-width:340px;width:90vw;
    box-shadow:0 0 60px rgba(0,0,0,0.5);
    transform:scale(0.95);
    transition:transform .3s var(--ease);
}
.mg-overlay.show .mg-container{transform:scale(1)}
.mg-header{margin-bottom:var(--sp-md)}
.mg-skill-icon{font-size:28px;margin-right:6px}
.mg-skill-name{font-family:var(--font-display);font-size:16px;color:var(--txt);letter-spacing:2px}
.mg-info{margin-bottom:var(--sp-md);display:flex;justify-content:center;gap:var(--sp-md);font-size:12px}
.mg-difficulty{font-family:var(--font-display);font-weight:700;letter-spacing:1px}
.mg-detail{color:var(--txt-3)}
.mg-status{
    font-family:var(--font-display);font-size:13px;
    margin-bottom:var(--sp-md);letter-spacing:1px;
    min-height:1.5em;transition:color .3s;
}
.mg-status.mg-watching{color:var(--cyan)}
.mg-status.mg-input{color:var(--orange)}
.mg-status.mg-success{color:var(--green);font-weight:700}
.mg-status.mg-fail{color:var(--red);font-weight:700}

.mg-grid{
    display:grid;gap:8px;
    margin:0 auto var(--sp-md);
    max-width:240px;
}
.mg-cell{
    aspect-ratio:1;
    background:var(--bg-card);
    border:2px solid rgba(255,255,255,0.06);
    border-radius:var(--r-md);
    cursor:pointer;
    transition:all .15s var(--ease);
    display:flex;justify-content:center;align-items:center;
}
.mg-cell:hover{border-color:rgba(255,255,255,0.15);background:var(--bg-elevated)}
.mg-cell.mg-glow{
    background:var(--cyan);
    border-color:var(--cyan);
    box-shadow:0 0 20px var(--cyan-glow-h),inset 0 0 10px rgba(255,255,255,0.2);
    transform:scale(1.05);
}
.mg-cell.mg-correct{
    background:var(--green);
    border-color:var(--green);
    box-shadow:0 0 12px rgba(0,230,118,0.3);
}
.mg-cell.mg-wrong{
    background:var(--red);
    border-color:var(--red);
    box-shadow:0 0 12px rgba(255,82,82,0.3);
    animation:shake .3s ease;
}
.mg-cell.mg-answer{
    background:var(--cyan-soft);
    border-color:var(--cyan);
    box-shadow:0 0 10px var(--cyan-glow);
    opacity:.6;
}
.mg-progress{
    font-family:var(--font-display);font-size:12px;
    color:var(--txt-3);margin-bottom:var(--sp-md);letter-spacing:1px;
}
.mg-actions{display:flex;justify-content:center}
.mg-btn{
    background:transparent;border:1px solid rgba(255,255,255,0.1);
    color:var(--txt-3);padding:6px 16px;
    cursor:pointer;font-size:12px;
    border-radius:var(--r-sm);
    transition:var(--fast);font-family:var(--font-body);
}
.mg-btn:hover{border-color:var(--txt-3);color:var(--txt)}

/* ===== 响应式 ===== */
@media(max-width:900px){
    #log-container{width:26%}
    #game-content{padding:var(--sp-lg) var(--sp-md) var(--sp-md)}
}
@media(max-width:768px){
    html,body{height:auto;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch}
    body{display:block}
    #log-container{
        position:fixed;top:0;left:0;
        width:82%;max-width:300px;height:100vh;
        z-index:200;
        transform:translateX(-100%);
        transition:transform .4s var(--ease);
    }
    #log-container:not(.log-closed){transform:translateX(0);box-shadow:4px 0 24px rgba(0,0,0,0.6)}
    #main-container{width:100%;height:auto;min-height:100vh;display:block;overflow:visible}
    #game-content{max-width:none;padding:56px var(--sp-md) 100px;min-height:auto}
    #game-controls{
        position:fixed;z-index:210;
        top:0;left:0;right:0;
        padding:var(--sp-sm) var(--sp-md);
        background:rgba(10,10,18,0.92);
        transition:transform .4s var(--ease);
    }
    body.log-is-open #game-controls{transform:translateX(82vw)}
    .ctrl-label{display:none}
    #story-text{font-size:15px;line-height:1.85}
    #choices button{padding:14px var(--sp-md);font-size:14px}
    #choices button:hover{transform:none}
    .panel-grid{grid-template-columns:1fr}
    #player-stats{gap:var(--sp-xs) var(--sp-sm);grid-template-columns:repeat(3,1fr)}
    .stat-value{font-size:14px}
    #game-title{font-size:22px;letter-spacing:4px}
    #game-over-box{width:94%;padding:var(--sp-lg);max-height:90vh}
    #restart-button{padding:10px 24px;font-size:13px}
    .interactable-item{text-align:left;padding:10px var(--sp-md);font-family:var(--font-body)}
    .item-detail-header,.item-detail-body{min-width:auto;width:92vw}
}
@media(max-width:420px){
    #game-content{padding:52px var(--sp-sm) var(--sp-sm)}
    #choices button{padding:12px var(--sp-sm);font-size:13px}
    #player-stats{grid-template-columns:repeat(2,1fr);font-size:13px}
    .stat-value{font-size:13px}
    .panel-grid{gap:var(--sp-sm)}
}