* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; color: #f2e9d8; user-select: none; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 20; background: #0b0a08; }
.ink-bg { position: absolute; inset: 0; background:
  radial-gradient(ellipse at 20% 30%, rgba(120,110,90,0.25), transparent 50%),
  radial-gradient(ellipse at 80% 70%, rgba(90,40,30,0.35), transparent 45%),
  radial-gradient(ellipse at 50% 100%, rgba(30,30,30,0.9), transparent 60%),
  #0b0a08; }
.title-box { position: relative; text-align: center; padding: 40px 60px; border: 1px solid rgba(220,200,160,0.25); background: rgba(10,8,6,0.6); max-width: 760px; }
.title-sub { letter-spacing: 6px; font-size: 14px; opacity: 0.7; }
.title-main { font-size: 84px; margin: 10px 0; letter-spacing: 12px; font-weight: 900; color: #f0dcb4; text-shadow: 0 0 30px rgba(200,60,30,0.6), 0 4px 0 #3a1508; }
.title-main .dot { color: #c8331e; }
.title-quote { font-size: 18px; opacity: 0.8; margin-bottom: 30px; letter-spacing: 2px; }
.ink-btn { font-family: inherit; font-size: 26px; letter-spacing: 10px; padding: 14px 44px; background: #7a1d10; color: #f6e7c8; border: 2px solid #d9a45c; cursor: pointer; transition: all .2s; }
.ink-btn:hover { background: #a32a15; box-shadow: 0 0 24px rgba(220,80,40,0.7); transform: translateY(-2px); }
.title-controls { margin-top: 28px; font-size: 13px; line-height: 1.9; opacity: 0.85; }
.title-controls b { color: #e8b86d; }
.title-tip { margin-top: 8px; color: #d9a45c; }

#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.stats { position: absolute; left: 28px; top: 24px; width: 380px; }
.bar { position: relative; height: 14px; background: rgba(0,0,0,0.6); border: 1px solid rgba(240,220,180,0.5); margin-bottom: 6px; }
.bar .fill { height: 100%; width: 100%; transition: width .12s linear; }
.bar .lbl { position: absolute; left: 6px; top: -2px; font-size: 11px; letter-spacing: 3px; color: #fff; text-shadow: 0 0 4px #000; line-height: 16px; }
.bar.hp .fill { background: linear-gradient(#e0473a, #8f1a10); }
.bar.mp { width: 300px; height: 10px; } .bar.mp .fill { background: linear-gradient(#5fb0e0, #1c4f80); }
.bar.sp { width: 260px; height: 10px; } .bar.sp .fill { background: linear-gradient(#e9d580, #8a7a2a); }
.focus { display: flex; gap: 8px; margin-top: 8px; }
.focus i { width: 22px; height: 22px; border: 2px solid #d9a45c; transform: rotate(45deg); background: rgba(0,0,0,0.5); transition: all .2s; }
.focus i.on { background: #ffd66b; box-shadow: 0 0 14px #ffb02a; }
.focus i.half { background: linear-gradient(135deg, #ffd66b 50%, transparent 50%); }
.stance { margin-top: 10px; font-size: 20px; letter-spacing: 6px; color: #f0dcb4; text-shadow: 0 0 8px #000; }

.spells { position: absolute; right: 28px; bottom: 28px; display: flex; gap: 10px; }
.spell { position: relative; width: 64px; height: 64px; border: 2px solid rgba(240,220,180,0.6); background: rgba(20,10,5,0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.spell span { font-size: 16px; letter-spacing: 2px; z-index: 2; }
.spell em { position: absolute; right: 4px; bottom: 2px; font-size: 11px; font-style: normal; color: #d9a45c; z-index: 2; }
.spell .cd { position: absolute; left: 0; bottom: 0; width: 100%; height: 0%; background: rgba(200,60,30,0.5); z-index: 1; }
.spell.active { border-color: #ffd66b; box-shadow: 0 0 14px #ffb02a; }

.boss { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); width: 60%; text-align: center; }
.boss-name { font-size: 22px; letter-spacing: 8px; margin-bottom: 6px; text-shadow: 0 0 10px #000; }
.bar.boss-hp { height: 10px; } .bar.boss-hp .fill { background: linear-gradient(#f0b040, #8a2a10); }

.area-title { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-size: 56px; letter-spacing: 18px; color: #f0dcb4; text-shadow: 0 0 20px #000, 0 0 40px rgba(200,60,30,0.8); animation: areaFade 3.2s ease forwards; }
@keyframes areaFade { 0% { opacity: 0; transform: translateY(20px);} 15% { opacity: 1; transform: translateY(0);} 80% { opacity: 1;} 100% { opacity: 0;} }
.msg { position: absolute; left: 0; right: 0; bottom: 130px; text-align: center; font-size: 20px; letter-spacing: 4px; color: #fff; text-shadow: 0 0 8px #000; opacity: 0; transition: opacity .3s; }
.msg.show { opacity: 1; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255,255,255,0.7); }
.charge { position: absolute; left: 50%; top: 56%; width: 160px; height: 6px; margin-left: -80px; background: rgba(0,0,0,0.6); border: 1px solid #d9a45c; }
.charge .fill { height: 100%; width: 0; background: #ffd66b; }
.pointer-hint { position: absolute; left: 0; right: 0; top: 12px; text-align: center; font-size: 13px; opacity: 0.8; }

.dmg { position: absolute; font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 0 6px #000, 0 0 12px #c8331e; pointer-events: none; animation: dmgUp 0.8s ease-out forwards; }
.dmg.crit { color: #ffd66b; font-size: 32px; }
.dmg.player { color: #ff6a5a; }
@keyframes dmgUp { 0% { opacity: 1; transform: translate(-50%,0) scale(1.3);} 100% { opacity: 0; transform: translate(-50%,-60px) scale(1);} }
#vignette { position: fixed; inset: 0; pointer-events: none; z-index: 9; box-shadow: inset 0 0 200px rgba(120,0,0,0); transition: box-shadow .2s; }