* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: "Microsoft YaHei", "宋体", serif;
    background: #0a0a12;
    color: #e0d8c8;
    min-height: 100vh;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(120,80,160,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(80,120,180,0.15) 0%, transparent 50%);
}
.container {
    max-width: 1280px; margin: 0 auto; padding: 18px;
    display: grid; grid-template-columns: 1fr 320px; gap: 18px;
}
.main-panel {
    background: linear-gradient(180deg,#1a1826 0%,#12111c 100%);
    border: 1px solid #3a3550; border-radius: 8px;
    overflow: hidden; display: flex; flex-direction: column; position: relative;
}
.scene-image { height: 320px; position: relative; overflow: hidden; transition: all 1s; }
.scene-village { background: linear-gradient(180deg,#87ceeb 0%,#f0e68c 30%,#228b22 60%,#1a1826 100%); }
.scene-town    { background: linear-gradient(180deg,#4a3c5a 0%,#2d2640 40%,#1a1628 100%); }
.scene-guild   { background: linear-gradient(180deg,#5c4a3a 0%,#3d2e22 50%,#1a1410 100%); }
.scene-battle  { background: linear-gradient(180deg,#8b0000 0%,#4a0000 50%,#1a0000 100%); animation: battleShake .5s infinite alternate; }
.scene-night   { background: linear-gradient(180deg,#0a0a2e 0%,#1a1a4e 40%,#0d0d2b 100%); }
.scene-disaster{ background: linear-gradient(180deg,#4a2020 0%,#2a1010 50%,#0a0505 100%); animation: disasterFlash 2s infinite; }
.scene-university{ background: linear-gradient(180deg,#2a4a6a 0%,#1a3050 50%,#0d1a2e 100%); }
.scene-swordholy { background: linear-gradient(180deg,#6a6a5a 0%,#3a3a2a 50%,#1a1a14 100%); }
.scene-magiccontinent { background: linear-gradient(180deg,#4a2a4a 0%,#2a1a3a 50%,#1a0a1a 100%); }
.scene-temple  { background: linear-gradient(180deg,#c9a84c 0%,#8a6a2a 50%,#3a2a10 100%); }
.scene-labyrinth { background: linear-gradient(180deg,#1a1a2a 0%,#0a0a1a 50%,#050510 100%); }
.scene-dragon  { background: linear-gradient(180deg,#2a4a3a 0%,#1a3a2a 50%,#0a1a14 100%); }
@keyframes battleShake { 0%{filter:brightness(1)} 100%{filter:brightness(1.15)} }
@keyframes disasterFlash { 0%,90%,100%{filter:brightness(1)} 95%{filter:brightness(1.6)} }
.deco-sun { position:absolute; top:40px; right:60px; width:50px; height:50px; background:#ffd700; border-radius:50%; box-shadow:0 0 40px #ffd700; }
.deco-moon { position:absolute; top:40px; right:60px; width:40px; height:40px; background:#f5f5dc; border-radius:50%; box-shadow:0 0 30px rgba(245,245,220,.5); }
.deco-stars { position:absolute; width:100%; height:100%; }
.deco-stars::before {
    content:""; position:absolute; top:20px; left:80px; width:3px; height:3px; background:#fff;
    box-shadow:50px 30px 0 #fff,120px 10px 0 #fff,200px 25px 0 #fff,300px 15px 0 #fff,400px 35px 0 #fff,500px 20px 0 #fff,80px 60px 0 #fff,180px 50px 0 #fff,350px 55px 0 #fff;
    animation: twinkle 3s infinite;
}
@keyframes twinkle { 0%,100%{opacity:1} 50%{opacity:.4} }
.scene-title { position:absolute; bottom:44px; left:28px; font-size:26px; color:#f0e6d0; text-shadow:0 2px 15px #000; letter-spacing:3px; z-index:10; }
.scene-goal { position:absolute; bottom:0; left:0; right:0; padding:9px 28px; font-size:13px; color:#b8c8e0; background:linear-gradient(180deg,transparent,rgba(0,0,0,.8)); z-index:10; letter-spacing:.5px; }
.scene-goal b { color:#ffd700; font-weight:500; }
.choice-divider { font-size:12.5px; color:#9370db; border-bottom:1px dashed #4a4060; padding:10px 2px 4px; margin-top:6px; letter-spacing:2px; }
.choice-divider:first-child { margin-top:0; }
.effect-fb { position:fixed; right:22px; top:86px; background:rgba(20,15,30,.93); border:1px solid #6a5acd; border-radius:8px; padding:10px 16px; z-index:900; font-size:13px; color:#d8c8ff; transition:opacity .4s; opacity:0; pointer-events:none; max-width:280px; line-height:1.8; }
.effect-fb.show { opacity:1; }
.effect-fb b { color:#ffd700; font-weight:500; }
.scene-time  { position:absolute; top:18px; left:28px; font-size:13px; color:#c0b8d0; background:rgba(0,0,0,.55); padding:5px 12px; border-radius:4px; z-index:10; }
.scene-chapter{ position:absolute; top:18px; right:28px; font-size:13px; color:#9370db; background:rgba(0,0,0,.55); padding:5px 12px; border-radius:4px; z-index:10; }
.story-text { padding:26px 30px; line-height:1.9; font-size:15.5px; color:#d0c8b8; min-height:160px; border-bottom:1px solid #2a2638; }
.choices { padding:18px 30px 26px; display:flex; flex-direction:column; gap:10px; }
.choice-btn {
    padding:13px 18px; background:linear-gradient(90deg,#252036,#1e1a2e);
    border:1px solid #403a58; border-radius:6px; color:#d0c8b8; font-size:14.5px;
    cursor:pointer; text-align:left; transition:all .2s; font-family:inherit;
}
.choice-btn:hover { background:linear-gradient(90deg,#352d50,#2a2440); border-color:#7060a0; transform:translateX(4px); }
.choice-btn.danger { border-color:#8b3a3a; }
.choice-btn.danger:hover { background:linear-gradient(90deg,#502020,#3a1515); border-color:#b05050; }
.choice-btn.god { border-color:#6a4a8a; color:#d8b8ff; }
.choice-btn.god:hover { background:linear-gradient(90deg,#3a2050,#2a1540); border-color:#9370db; }

.battle-panel { display:none; padding:18px 30px; border-bottom:1px solid #2a2638; background:rgba(139,0,0,.1); }
.battle-panel.active { display:block; }
.battle-enemy { text-align:center; margin-bottom:12px; }
.enemy-name { font-size:18px; color:#ff6b6b; margin-bottom:6px; }
.enemy-title { font-size:12px; color:#aa8888; margin-bottom:8px; }
.enemy-hp-bar { height:10px; background:#2a1010; border-radius:5px; margin:0 auto; max-width:340px; overflow:hidden; }
.enemy-hp-fill { height:100%; background:linear-gradient(90deg,#ff4444,#cc0000); transition:width .3s; }
.battle-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.battle-btn { padding:10px; background:#2a2030; border:1px solid #504060; border-radius:4px; color:#e0d8c8; cursor:pointer; font-family:inherit; font-size:13px; }
.battle-btn:hover { background:#3a2d40; }
.battle-btn:disabled { opacity:.4; cursor:not-allowed; }
.battle-log { margin-top:10px; padding:10px; background:rgba(0,0,0,.35); border-radius:4px; font-size:13px; max-height:100px; overflow-y:auto; color:#b0a8b0; }

.status-panel {
    background:linear-gradient(180deg,#1a1826,#12111c); border:1px solid #3a3550;
    border-radius:8px; padding:18px; position:sticky; top:18px; height:fit-content; max-height:calc(100vh - 36px); overflow-y:auto;
}
.status-title { font-size:17px; color:#c8b8e0; margin-bottom:12px; padding-bottom:6px; border-bottom:1px solid #3a3550; letter-spacing:1px; }
.status-row { display:flex; justify-content:space-between; margin-bottom:6px; font-size:13.5px; }
.status-label { color:#8880a0; }
.status-value { color:#e0d8c8; font-weight:500; }
.status-section { margin-top:12px; padding-top:12px; border-top:1px dashed #2a2638; }
.bar-container { height:7px; background:#1a1826; border-radius:4px; margin-top:4px; overflow:hidden; }
.bar-fill { height:100%; background:linear-gradient(90deg,#6a5acd,#9370db); border-radius:4px; transition:width .5s; }
.bar-fill.hp { background:linear-gradient(90deg,#44bb44,#228822); }
.bar-fill.mp { background:linear-gradient(90deg,#4488bb,#2266aa); }
.bar-fill.rep { background:linear-gradient(90deg,#bb9944,#aa8822); }
.npc-item { margin-bottom:8px; }
.npc-name { font-size:12.5px; color:#c0b8d0; display:flex; justify-content:space-between; }
.favor-bar { height:5px; background:#1a1826; border-radius:3px; margin-top:3px; overflow:hidden; }
.favor-fill { height:100%; background:linear-gradient(90deg,#ff6b9d,#c44569); transition:width .5s; }

.inv-item { font-size:12px; padding:4px 6px; background:#1e1a2e; border:1px solid #332e48; border-radius:3px; margin:3px 0; display:flex; justify-content:space-between; cursor:pointer; }
.inv-item:hover { background:#2a2440; }
.equip-slot { font-size:12px; color:#a098b8; padding:3px 0; }
.equip-slot b { color:#e0d8c8; }

.ach-item { font-size:12px; padding:5px 6px; margin:3px 0; background:#1a1826; border-left:3px solid #444; border-radius:0 3px 3px 0; }
.ach-item.unlocked { border-left-color:#ffd700; background:#2a2410; color:#ffd980; }

.start-screen { grid-column:1/-1; text-align:center; padding:70px 40px; }
.game-logo { font-size:40px; color:#e0d0f0; letter-spacing:6px; margin-bottom:12px; text-shadow:0 0 40px rgba(150,120,200,.6); animation:logoGlow 3s infinite alternate; }
@keyframes logoGlow { 0%{text-shadow:0 0 20px rgba(150,120,200,.4)} 100%{text-shadow:0 0 50px rgba(150,120,200,.8)} }
.game-subtitle { font-size:17px; color:#8880a0; margin-bottom:50px; letter-spacing:8px; }
.start-btn { padding:16px 65px; font-size:19px; background:linear-gradient(90deg,#4a3a70,#6a50a0); border:none; border-radius:6px; color:#f0e6ff; cursor:pointer; letter-spacing:3px; transition:all .3s; font-family:inherit; }
.start-btn:hover { transform:scale(1.05); box-shadow:0 0 40px rgba(130,100,200,.5); }

.creation-step { display:none; }
.creation-step.active { display:block; }
.step-title { font-size:21px; color:#d0c0e8; margin-bottom:22px; text-align:center; letter-spacing:2px; }
.option-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:18px; }
.option-item { padding:13px 10px; background:#1e1a2e; border:1px solid #3a3550; border-radius:5px; cursor:pointer; transition:all .2s; font-size:13.5px; text-align:center; }
.option-item:hover { border-color:#7060a0; background:#2a2440; }
.option-item.selected { border-color:#9370db; background:#352d50; box-shadow:0 0 15px rgba(147,112,219,.3); }
.option-item small { color:#8880a0; font-size:11px; }
.step-nav { display:flex; justify-content:space-between; margin-top:22px; }
.nav-btn { padding:11px 28px; background:#2a2638; border:1px solid #403a58; border-radius:5px; color:#d0c8b8; cursor:pointer; font-family:inherit; font-size:14px; }
.nav-btn:hover { background:#3a3550; }
.nav-btn:disabled { opacity:.4; cursor:not-allowed; }

.game-footer { padding:12px 20px; border-top:1px solid #2a2638; display:flex; gap:8px; flex-wrap:wrap; }
.footer-btn { padding:7px 14px; background:#1e1a2e; border:1px solid #3a3550; border-radius:4px; color:#a098b8; font-size:12.5px; cursor:pointer; font-family:inherit; }
.footer-btn:hover { background:#2a2638; }

.toast { position:fixed; top:25px; left:50%; transform:translateX(-50%); background:rgba(20,15,30,.95); border:1px solid #6a5acd; padding:11px 24px; border-radius:6px; color:#e0d8ff; z-index:1000; opacity:0; transition:opacity .3s; pointer-events:none; font-size:14px; }
.toast.show { opacity:1; }
.toast.ach { border-color:#ffd700; color:#ffd980; }

.god-whisper {
    display:none; position:fixed; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.85); z-index:2000; justify-content:center; align-items:center;
}
.god-whisper.active { display:flex; }
.whisper-box {
    background:linear-gradient(180deg,#1a0a2a,#0a0515); border:1px solid #6a3a9a;
    border-radius:10px; padding:35px; max-width:520px; text-align:center;
    box-shadow:0 0 60px rgba(120,60,180,.4);
}
.whisper-title { font-size:20px; color:#c89aff; margin-bottom:18px; letter-spacing:3px; }
.whisper-text { font-size:15px; color:#d8c8e8; line-height:1.9; margin-bottom:25px; font-style:italic; }
.whisper-btns { display:flex; gap:12px; justify-content:center; }

.end-screen { grid-column:1/-1; padding:50px; text-align:center; }
.end-title { font-size:32px; color:#ffd700; margin-bottom:20px; letter-spacing:4px; }
.end-text { font-size:15px; color:#c0b8d0; line-height:2; max-width:700px; margin:0 auto 30px; }

@media (max-width:900px) {
    .container { grid-template-columns:1fr; }
    .status-panel { position:static; max-height:none; }
    .option-grid { grid-template-columns:repeat(2,1fr); }
    .battle-actions { grid-template-columns:repeat(2,1fr); }
}
/* ===== 场景背景图 ===== */
.scene-image {
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: overlay;
}
.scene-village { background-image: linear-gradient(rgba(20,15,30,.35), rgba(10,8,20,.75)), url('images/village.jpg'); }
.scene-town    { background-image: linear-gradient(rgba(20,15,30,.35), rgba(10,8,20,.75)), url('images/town.jpg'); }
.scene-university { background-image: linear-gradient(rgba(20,15,40,.3), rgba(10,8,25,.75)), url('images/university.jpg'); }
.scene-magiccontinent { background-image: linear-gradient(rgba(30,10,40,.3), rgba(15,5,20,.75)), url('images/magiccontinent.jpg'); }
.scene-labyrinth  { background-image: linear-gradient(rgba(10,10,20,.4), rgba(5,5,15,.8)), url('images/labyrinth.jpg'); }
.scene-dragon     { background-image: linear-gradient(rgba(15,25,30,.3), rgba(5,15,20,.75)), url('images/skycity.jpg'); }
.scene-battle     { background-image: linear-gradient(rgba(40,10,10,.3), rgba(20,5,5,.7)), url('images/battle.jpg') !important; animation: battleShake .5s infinite alternate; }
.scene-night      { background-image: linear-gradient(rgba(10,10,30,.5), rgba(5,5,15,.85)), url('images/magiccontinent.jpg'); }
.scene-disaster   { background-image: linear-gradient(rgba(60,10,10,.4), rgba(30,5,5,.8)), url('images/battle.jpg'); animation: disasterFlash 2s infinite; }
.scene-guild      { background-image: linear-gradient(rgba(30,20,15,.4), rgba(15,10,8,.8)), url('images/town.jpg'); }
.scene-swordholy  { background-image: linear-gradient(rgba(40,40,30,.4), rgba(20,20,15,.8)), url('images/town.jpg'); }
.scene-temple     { background-image: linear-gradient(rgba(80,60,20,.3), rgba(40,30,10,.75)), url('images/town.jpg'); }

/* BOSS战专属背景 */
.scene-boss-ninedragon { background-image: linear-gradient(rgba(10,10,20,.2), rgba(5,5,10,.5)), url('images/boss_nine_dragon.jpg') !important; }
.scene-boss-laplace    { background-image: linear-gradient(rgba(40,5,5,.2), rgba(20,2,2,.5)), url('images/boss_laplace.jpg') !important; }
.scene-bossa-humangod  { background-image: linear-gradient(rgba(20,20,40,.2), rgba(10,10,25,.5)), url('images/boss_human_god.jpg') !important; }
.scene-boss-orsted     { background-image: linear-gradient(rgba(10,20,30,.2), rgba(5,15,20,.5)), url('images/orsted.jpg') !important; }

/* 开始界面 */
.start-screen {
    background: linear-gradient(rgba(10,8,20,.55), rgba(10,8,20,.85)), url('images/main_banner.jpg') center/cover no-repeat;
    border-radius: 8px;
    padding: 120px 40px !important;
}

/* ===== 手机端适配 ===== */
@media (max-width: 768px){
    .container { grid-template-columns: 1fr !important; padding: 5px !important; }
    .scene-image { height: 200px !important; min-height: 200px !important; }
    .main-panel, .status-panel { padding: 10px !important; }
    .choice-btn { font-size: 13px !important; padding: 10px 8px !important; }
    .battle-btn { font-size: 12px !important; padding: 8px 6px !important; margin: 2px !important; }
    #npcPortrait { width: 150px !important; height: 225px !important; right: 5px !important; }
    .game-footer { flex-wrap: wrap; }
    .footer-btn { font-size: 12px !important; padding: 6px 8px !important; }
    .option-item { font-size: 13px !important; padding: 10px !important; }
}

/* ===== 战斗动画 ===== */
@keyframes screenShake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-5px,3px); }
    40% { transform: translate(5px,-3px); }
    60% { transform: translate(-3px,5px); }
    80% { transform: translate(3px,-5px); }
}
.shake { animation: screenShake 0.3s; }

@keyframes floatDamage {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-60px) scale(1.5); }
}
.damage-float {
    position: absolute; font-size: 28px; font-weight: bold;
    color: #ff6666; text-shadow: 0 0 8px #f00;
    animation: floatDamage 1s forwards; pointer-events: none; z-index: 999;
}
.damage-float.crit { color: #ffdd00; text-shadow: 0 0 12px #ff0; font-size: 36px; }
.damage-float.heal { color: #66ff66; text-shadow: 0 0 8px #0f0; }

/* 敌人小头像 */
#enemyAvatar {
    position: absolute; top: 10px; right: 10px; width: 90px; height: 90px;
    background-size: cover; background-position: center; border-radius: 50%;
    border: 2px solid #ff4444; box-shadow: 0 0 15px rgba(255,50,50,0.6);
    z-index: 5; display: none;
}