@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600;700;900&family=Ma+Shan+Zheng&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{--gold:#FFD700;--gold-dim:#B8860B;--cyan:#00D4FF;--purple:#9D4EDD;--red:#FF2A2A;--dark:#0a0a0f;--text:#E8E6E3}
html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:'Noto Serif SC',serif}
#game-container{position:relative;width:100vw;height:100vh}
#gameCanvas{display:block;width:100%;height:100%}
.cinematic-bars{position:absolute;left:0;width:100%;height:12vh;background:#000;transition:transform 0.8s cubic-bezier(0.4,0,0.2,1);z-index:20}
.cinematic-bars.top{top:0;transform:translateY(-100%)}
.cinematic-bars.bottom{bottom:0;transform:translateY(100%)}
.cinematic-bars.active{transform:translateY(0)}
#dialogue-container{position:absolute;bottom:15vh;left:50%;transform:translateX(-50%);width:80%;max-width:1200px;z-index:30;opacity:0;transition:opacity 0.5s}
#dialogue-container.active{opacity:1}
.speaker-name{font-size:1.2vw;color:var(--gold);text-shadow:0 0 20px rgba(255,215,0,0.5);margin-bottom:1vh;letter-spacing:0.3em;font-weight:600}
.dialogue-text{font-size:1.8vw;color:var(--text);line-height:1.8;text-shadow:2px 2px 4px rgba(0,0,0,0.8);min-height:6vh}
.type-cursor{display:inline-block;width:3px;height:1.2em;background:var(--gold);margin-left:4px;animation:blink 0.8s infinite;vertical-align:middle}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}
.continue-hint{position:absolute;right:0;bottom:-3vh;font-size:0.9vw;color:rgba(255,255,255,0.5);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:0.3}50%{opacity:0.8}}
#chapter-title{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:25;opacity:0;transition:opacity 1s}
#chapter-title.active{opacity:1}
.chapter-label{font-size:1.2vw;color:var(--gold-dim);letter-spacing:1em;margin-bottom:2vh}
.chapter-name{font-family:'Ma Shan Zheng',cursive;font-size:5vw;color:var(--gold);text-shadow:0 0 30px rgba(255,215,0,0.6),0 0 60px rgba(255,215,0,0.3);letter-spacing:0.5em}
#main-menu{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(5,5,15,0.95),rgba(15,5,30,0.9));z-index:100;transition:opacity 0.8s}
#main-menu.hidden{opacity:0;pointer-events:none;visibility:hidden}
.game-title{font-family:'Ma Shan Zheng',cursive;font-size:8vw;color:var(--gold);text-shadow:0 0 40px rgba(255,215,0,0.8),0 0 80px rgba(255,215,0,0.4);letter-spacing:0.8em;margin-bottom:2vh;animation:titleBreath 4s ease-in-out infinite}
@keyframes titleBreath{0%,100%{text-shadow:0 0 40px rgba(255,215,0,0.8),0 0 80px rgba(255,215,0,0.4);transform:scale(1)}50%{text-shadow:0 0 60px rgba(255,215,0,1),0 0 120px rgba(255,215,0,0.6);transform:scale(1.02)}}
.subtitle{font-size:1.2vw;color:rgba(255,255,255,0.6);letter-spacing:0.8em;margin-bottom:8vh}
.menu-buttons{display:flex;flex-direction:column;gap:2vh;align-items:center}
.menu-btn{padding:2vh 4vw;background:transparent;border:1px solid rgba(255,215,0,0.4);color:var(--gold);font-size:1.2vw;font-family:'Noto Serif SC',serif;letter-spacing:0.5em;cursor:pointer;transition:all 0.4s;position:relative;overflow:hidden}
.menu-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,0,0.2),transparent);transition:left 0.6s}
.menu-btn:hover{background:rgba(255,215,0,0.1);border-color:var(--gold);text-shadow:0 0 20px var(--gold);transform:translateX(10px)}
.menu-btn:hover::before{left:100%}
#game-hud{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15;opacity:0;transition:opacity 0.5s}
#game-hud.active{opacity:1}
.health-bar{position:absolute;top:3vh;left:3vw;width:18vw}
.emotion-bar{position:absolute;top:3vh;left:23vw;width:18vw}
.bar-label{font-size:0.8vw;color:rgba(255,255,255,0.6);letter-spacing:0.2em;margin-bottom:0.5vh}
.bar-bg{width:100%;height:1.2vh;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.1)}
.bar-fill{height:100%;background:linear-gradient(90deg,#8B0000,#FF4444);transition:width 0.3s;box-shadow:0 0 10px rgba(255,68,68,0.5)}
.emotion-fill{height:100%;background:linear-gradient(90deg,#FF6B6B,#FFD700);transition:width 0.3s;box-shadow:0 0 15px rgba(255,215,0,0.4)}
.skill-hints{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);display:flex;gap:3vw}
.skill-item{text-align:center;opacity:0.7;transition:opacity 0.3s}
.skill-item.ready{opacity:1}
.skill-key{font-size:1vw;color:var(--gold);border:1px solid var(--gold);padding:0.3vh 0.8vw;margin-bottom:0.5vh;display:inline-block}
.skill-name{font-size:0.8vw;color:rgba(255,255,255,0.8)}
#pause-menu{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:110;opacity:0;pointer-events:none;transition:opacity 0.3s}
#pause-menu.active{opacity:1;pointer-events:all}
.pause-title{font-size:3vw;color:var(--gold);letter-spacing:0.5em;margin-bottom:5vh}
#checkpoint-notify{position:absolute;top:20%;left:50%;transform:translateX(-50%);font-size:1.5vw;color:var(--cyan);letter-spacing:0.5em;opacity:0;transition:opacity 0.5s;z-index:40}
#checkpoint-notify.active{opacity:1}
#loading-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:200;transition:opacity 0.5s}
#loading-screen.hidden{opacity:0;pointer-events:none}
.loading-text{font-size:1.5vw;color:var(--gold);letter-spacing:1em;margin-bottom:3vh}
.loading-bar{width:30vw;height:2px;background:rgba(255,255,255,0.1);overflow:hidden}
.loading-progress{width:0%;height:100%;background:var(--gold);box-shadow:0 0 10px var(--gold);transition:width 0.3s}
.choice-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:2vh;z-index:35;opacity:0;pointer-events:none;transition:opacity 0.5s}
.choice-container.active{opacity:1;pointer-events:all}
.choice-btn{padding:2vh 4vw;background:rgba(0,0,0,0.8);border:1px solid rgba(255,215,0,0.3);color:var(--text);font-size:1.1vw;font-family:'Noto Serif SC',serif;cursor:pointer;transition:all 0.3s;text-align:left;min-width:30vw}
.choice-btn:hover{border-color:var(--gold);background:rgba(255,215,0,0.1);transform:translateX(10px)}
.choice-btn .choice-key{color:var(--gold);margin-right:1vw}

/* 技能冷却遮罩 */
.skill-item{position:relative;overflow:hidden}
.skill-item::after{content:'';position:absolute;top:0;left:0;width:100%;height:var(--cd-percent,100%);background:rgba(0,0,0,0.7);transition:height 0.1s}
.skill-item.ready::after{height:0%}

/* 连击显示 */
#combo-display{font-family:'Ma Shan Zheng',cursive;font-size:2.5vw;color:#FFD700;text-shadow:0 0 20px #FFD700,0 0 40px rgba(255,215,0,0.5);transition:opacity 0.3s}

/* 新技能提示 */
.skill-unlock-notify{position:absolute;top:30%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.9);border:2px solid var(--gold);padding:3vh 4vw;border-radius:8px;z-index:100;animation:skillUnlockPop 0.5s ease-out}
@keyframes skillUnlockPop{0%{transform:translateX(-50%) scale(0)}70%{transform:translateX(-50%) scale(1.1)}100%{transform:translateX(-50%) scale(1)}}
.skill-unlock-notify h3{color:var(--gold);font-size:1.5vw;margin-bottom:1vh}
.skill-unlock-notify p{color:#fff;font-size:1vw}

/* 商店样式 */
.shop-container{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.95);z-index:110;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5vh 5vw}
.shop-title{font-size:3vw;color:var(--gold);margin-bottom:3vh;font-family:'Ma Shan Zheng',cursive}
.shop-gold{font-size:1.5vw;color:#FFD700;margin-bottom:2vh}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2vw;max-width:1200px}
.shop-item{background:rgba(255,255,255,0.05);border:1px solid rgba(255,215,0,0.3);padding:2vh 1vw;text-align:center;cursor:pointer;transition:all 0.3s}
.shop-item:hover{border-color:var(--gold);background:rgba(255,215,0,0.1);transform:translateY(-5px)}
.shop-item .item-icon{font-size:2vw;margin-bottom:1vh}
.shop-item .item-name{color:#fff;font-size:1vw;margin-bottom:0.5vh}
.shop-item .item-desc{color:rgba(255,255,255,0.6);font-size:0.8vw;margin-bottom:1vh}
.shop-item .item-price{color:#FFD700;font-size:1vw}
.shop-item.locked{opacity:0.5;pointer-events:none}
.shop-close{position:absolute;top:2vh;right:2vw;background:none;border:1px solid var(--gold);color:var(--gold);padding:1vh 2vw;cursor:pointer;font-size:1vw;transition:all 0.3s}
.shop-close:hover{background:var(--gold);color:#000}

/* 成就系统 */
.achievement-container{position:absolute;top:10%;right:2vw;width:20vw;background:rgba(0,0,0,0.9);border:1px solid var(--gold);border-radius:8px;padding:2vh 1vw;z-index:80}
.achievement-title{color:var(--gold);font-size:1.2vw;margin-bottom:2vh;text-align:center;border-bottom:1px solid rgba(255,215,0,0.3);padding-bottom:1vh}
.achievement-item{display:flex;align-items:center;padding:1vh 0;opacity:0.5;border-bottom:1px solid rgba(255,255,255,0.1)}
.achievement-item.unlocked{opacity:1}
.achievement-icon{width:2vw;height:2vw;margin-right:1vw;font-size:1.5vw;text-align:center}
.achievement-info{flex:1}
.achievement-name{color:#fff;font-size:0.9vw}
.achievement-desc{color:rgba(255,255,255,0.6);font-size:0.7vw}

/* 统计数据 */
.stats-display{position:absolute;bottom:15%;left:50%;transform:translateX(-50%);background:rgba(0,0,0,0.85);border:1px solid var(--cyan);padding:3vh 4vw;border-radius:8px;z-index:110;min-width:30vw}
.stats-title{color:var(--cyan);font-size:1.5vw;margin-bottom:2vh;text-align:center}
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1vh 3vw}
.stat-item{display:flex;justify-content:space-between;color:#fff;font-size:0.9vw}
.stat-label{color:rgba(255,255,255,0.7)}
.stat-value{color:var(--gold)}

/* 增强的血条 */
.health-bar .bar-fill{position:relative;overflow:hidden}
.health-bar .bar-fill::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);animation:barShine 2s infinite}
@keyframes barShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* 情绪条溢出效果 */
.emotion-bar .emotion-fill{position:relative}
.emotion-bar .emotion-fill.overflow{background:linear-gradient(90deg,#FF6B6B,#FFD700,#FF4444);animation:emotionPulse 0.5s ease-in-out infinite}
@keyframes emotionPulse{0%,100%{box-shadow:0 0 15px rgba(255,215,0,0.4)}50%{box-shadow:0 0 30px rgba(255,68,68,0.8)}}