* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --gold: #d4af37;
  --gold-dim: #9a7f2a;
  --blood: #a02c2c;
  --ink: #10120f;
  --paper: #e8dfc8;
}

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #000;
  font-family: "KaiTi", "STKaiti", "SimSun", "Noto Serif SC", serif;
  color: var(--paper);
  user-select: none;
}

#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ---------- vignette & flash ---------- */
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,0.55) 100%);
}
#flash-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 6;
  background: transparent; transition: background 0.08s linear;
}
#flash-layer.hurt { background: radial-gradient(ellipse at center, transparent 40%, rgba(160,20,20,0.45) 100%); }
#flash-layer.heal { background: radial-gradient(ellipse at center, transparent 45%, rgba(60,160,70,0.30) 100%); }
#flash-layer.ult { background: radial-gradient(ellipse at center, rgba(255,235,160,0.6) 0%, rgba(212,175,55,0.28) 45%, transparent 78%); }
#flash-layer.quake { background: radial-gradient(ellipse at center, rgba(150,90,255,0.42) 0%, rgba(90,40,160,0.22) 50%, transparent 80%); }
#flash-layer.boom { background: radial-gradient(ellipse at center, rgba(255,190,110,0.55) 0%, rgba(160,85,255,0.25) 50%, transparent 80%); }
#flash-layer.hole { background: radial-gradient(ellipse at center, rgba(20,0,40,0.55) 0%, rgba(90,40,180,0.30) 45%, transparent 78%); }

/* ---------- loading ---------- */
#loading-screen {
  position: fixed; inset: 0; z-index: 100;
  background: radial-gradient(ellipse at 50% 35%, #1c211c 0%, #0a0c0a 70%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease;
}
#loading-screen.fade { opacity: 0; pointer-events: none; }
.loading-inner { text-align: center; width: min(520px, 80vw); }
.loading-title {
  font-size: 52px; letter-spacing: 0.35em; color: var(--paper);
  text-shadow: 0 0 24px rgba(212,175,55,0.35);
}
.loading-sub { margin-top: 10px; font-size: 16px; letter-spacing: 0.5em; color: #8d8871; }
.loading-bar-wrap {
  margin: 38px auto 12px; height: 4px; width: 100%;
  background: #2a2d26; border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(212,175,55,0.15);
}
#loading-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.2s ease;
}
#loading-text { font-size: 14px; color: #7d7a68; letter-spacing: 0.2em; }
.loading-tip { margin-top: 46px; font-size: 15px; color: #6a675a; }

/* ---------- title ---------- */
#title-screen {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(46,52,44,0.9) 0%, rgba(8,10,8,0.96) 75%);
}
.title-bg-ink {
  position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
  background:
    radial-gradient(circle at 20% 80%, rgba(20,24,20,0.8) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(30,34,28,0.8) 0%, transparent 45%);
}
.title-inner { position: relative; text-align: center; z-index: 2; }
.title-icon img {
  width: 92px; height: 92px; filter: invert(0.82) sepia(0.6) saturate(3) hue-rotate(10deg);
  opacity: 0.9;
}
.game-title {
  font-size: 88px; font-weight: normal; letter-spacing: 0.18em;
  color: var(--paper); text-shadow: 0 2px 30px rgba(212,175,55,0.4);
  margin-top: 6px;
}
.title-dot { color: var(--gold); }
.game-subtitle { margin-top: 8px; font-size: 19px; letter-spacing: 0.42em; color: #97927c; }
.title-menu { margin-top: 54px; display: flex; flex-direction: column; gap: 16px; align-items: center; }

.title-btn {
  font-family: inherit; cursor: pointer;
  font-size: 22px; letter-spacing: 0.4em; text-indent: 0.4em;
  color: var(--paper); background: linear-gradient(180deg, rgba(60,56,40,0.6), rgba(30,28,20,0.6));
  border: 1px solid rgba(212,175,55,0.45); border-radius: 3px;
  padding: 12px 64px; transition: all 0.2s ease;
}
.title-btn:hover {
  background: linear-gradient(180deg, rgba(212,175,55,0.25), rgba(120,95,30,0.25));
  border-color: var(--gold); text-shadow: 0 0 12px rgba(212,175,55,0.8);
}
.title-btn.secondary { font-size: 17px; padding: 9px 48px; border-color: rgba(160,160,140,0.3); color: #b9b4a0; }
.title-btn.secondary:hover { border-color: var(--gold); color: var(--paper); }
.title-footer {
  position: fixed; bottom: 18px; left: 0; right: 0; text-align: center;
  font-size: 12px; color: #59564a; letter-spacing: 0.15em;
}

.panel {
  position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 88vw); max-height: 82vh; overflow: auto;
  background: rgba(14,16,13,0.96); border: 1px solid rgba(212,175,55,0.35);
  border-radius: 4px; padding: 30px 36px; text-align: center;
  box-shadow: 0 8px 60px rgba(0,0,0,0.8);
}
.panel h2 { font-weight: normal; letter-spacing: 0.5em; color: var(--gold); margin-bottom: 20px; }
.keys-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.keys-table td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.keys-table td:first-child { color: var(--gold); width: 42%; text-align: right; padding-right: 24px; }
.keys-table td:last-child { text-align: left; color: #cfc9b4; }
.credits-body { font-size: 14px; line-height: 1.9; color: #b6b09b; text-align: left; }
.credits-body b { color: var(--gold); }
.panel-close { margin-top: 22px; }

/* ---------- chapter banner ---------- */
#chapter-banner {
  position: fixed; z-index: 40; top: 26%; left: 0; right: 0;
  text-align: center; pointer-events: none;
  animation: chapterFade 4.6s ease forwards;
}
.chapter-small { font-size: 18px; letter-spacing: 0.7em; color: #b0aa8f; }
.chapter-big {
  margin-top: 12px; font-size: 92px; letter-spacing: 0.5em; text-indent: 0.5em;
  color: var(--paper); text-shadow: 0 0 40px rgba(212,175,55,0.45), 0 4px 18px rgba(0,0,0,0.8);
}
@keyframes chapterFade {
  0% { opacity: 0; transform: translateY(18px); }
  12% { opacity: 1; transform: translateY(0); }
  78% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; z-index: 20; pointer-events: none; }

#status-block { position: absolute; left: 34px; bottom: 34px; width: min(330px, 34vw); }
.bar-row { margin-top: 7px; }
.bar {
  position: relative; height: 13px; border-radius: 2px; overflow: hidden;
  background: rgba(8,8,6,0.75);
  border: 1px solid rgba(212,175,55,0.4);
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.9);
}
#stamina-bar { height: 8px; width: 82%; }
#hp-fill, #hp-ghost, #stamina-fill, #boss-fill, #boss-ghost { position: absolute; inset: 0; transform-origin: left; }
#hp-fill { background: linear-gradient(180deg, #c8473f, #7e1f1c); }
#hp-ghost { background: rgba(240,220,160,0.55); z-index: -1; }
#stamina-fill { background: linear-gradient(180deg, #9fbf58, #5c7a2c); }
#focus-row { display: flex; gap: 9px; margin-top: 10px; }
.focus-pip {
  width: 15px; height: 15px; transform: rotate(45deg); border-radius: 2px;
  background: rgba(20,18,10,0.8); border: 1px solid rgba(212,175,55,0.5);
  transition: all 0.2s ease;
}
.focus-pip.full {
  background: radial-gradient(circle, #ffe9a0 0%, var(--gold) 70%);
  box-shadow: 0 0 10px rgba(212,175,55,0.9);
}

#skill-block { position: absolute; right: 38px; bottom: 34px; display: flex; gap: 14px; }
.skill-slot {
  position: relative; width: 64px; height: 64px; border-radius: 50%;
  background: radial-gradient(circle, rgba(40,38,26,0.9) 0%, rgba(12,12,8,0.9) 100%);
  border: 1px solid rgba(212,175,55,0.55);
  box-shadow: 0 2px 14px rgba(0,0,0,0.7);
}
.skill-slot img {
  position: absolute; inset: 10px; width: 44px; height: 44px;
  filter: invert(0.9) sepia(0.35) saturate(2.4) hue-rotate(5deg); opacity: 0.92;
}
.skill-cd {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(rgba(0,0,0,0.82) var(--cd, 0%), transparent 0%);
}
.skill-key {
  position: absolute; bottom: -7px; right: -3px; font-size: 13px;
  background: #1d1b12; border: 1px solid rgba(212,175,55,0.6); border-radius: 3px;
  color: var(--gold); padding: 0 5px; letter-spacing: 0;
}
.skill-count {
  position: absolute; top: -7px; right: -3px; font-size: 14px;
  color: var(--paper); background: #43230f; border: 1px solid rgba(212,175,55,0.6);
  border-radius: 9px; padding: 0 6px;
}
.skill-slot.disabled { filter: grayscale(0.9) brightness(0.55); }
.skill-slot.active {
  border-color: var(--gold);
  box-shadow: 0 0 18px rgba(212,175,55,0.85), inset 0 0 10px rgba(212,175,55,0.35);
}
.skill-slot.ult { border-width: 2px; border-color: rgba(212,175,55,0.75); }
.skill-slot.ult.ready { animation: ultPulse 1.6s ease-in-out infinite; }
@keyframes ultPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(212,175,55,0.5), 0 2px 14px rgba(0,0,0,0.7); }
  50% { box-shadow: 0 0 26px rgba(255,220,120,0.95), 0 2px 14px rgba(0,0,0,0.7); }
}

#soul-counter {
  position: absolute; top: 26px; right: 38px; display: flex; align-items: center; gap: 8px;
  font-size: 22px; color: var(--paper); text-shadow: 0 1px 6px #000;
}
#soul-counter img { width: 26px; height: 26px; filter: invert(0.85) sepia(0.5) saturate(2.6) hue-rotate(6deg); }

#boss-bar-wrap { position: absolute; bottom: 108px; left: 50%; transform: translateX(-50%); width: min(640px, 62vw); text-align: center; }
#boss-name { font-size: 22px; letter-spacing: 0.5em; text-indent: 0.5em; color: var(--paper); text-shadow: 0 2px 8px #000; margin-bottom: 6px; }
#boss-bar {
  position: relative; height: 10px; border-radius: 2px; overflow: hidden;
  background: rgba(8,8,6,0.8); border: 1px solid rgba(190,150,80,0.55);
}
#boss-fill { background: linear-gradient(180deg, #d9b23c, #8f6a17); }
#boss-ghost { background: rgba(240,240,230,0.5); z-index: -1; }

#lockon-marker {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; pointer-events: none;
  border: 2px solid rgba(212,175,55,0.9); transform: rotate(45deg); border-radius: 4px;
  box-shadow: 0 0 14px rgba(212,175,55,0.7), inset 0 0 8px rgba(212,175,55,0.4);
  animation: lockPulse 1.2s ease-in-out infinite;
}
@keyframes lockPulse { 0%,100% { scale: 1; opacity: 0.95; } 50% { scale: 0.86; opacity: 0.75; } }

#interact-tip {
  position: absolute; bottom: 26%; left: 50%; transform: translateX(-50%);
  font-size: 18px; letter-spacing: 0.2em; color: var(--paper);
  background: rgba(10,10,8,0.72); border: 1px solid rgba(212,175,55,0.4);
  padding: 8px 22px; border-radius: 3px;
}

/* ---------- floating text ---------- */
#float-layer { position: fixed; inset: 0; z-index: 22; pointer-events: none; overflow: hidden; }
.dmg-num {
  position: absolute; font-size: 22px; color: #ffe9b0; text-shadow: 0 0 6px #000, 0 2px 2px #000;
  animation: dmgFloat 0.9s ease-out forwards; font-family: Georgia, "KaiTi", serif;
}
.dmg-num.crit { font-size: 30px; color: #ffb347; }
.dmg-num.player { color: #ff7a6b; }
@keyframes dmgFloat {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  12% { opacity: 1; transform: translate(-50%, -14px) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -64px) scale(0.92); }
}

/* ---------- overlays ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: rgba(4,4,3,0.82);
  animation: overlayIn 1.2s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.death-char {
  font-size: 180px; color: #b03a30; letter-spacing: 0;
  text-shadow: 0 0 60px rgba(176,58,48,0.55), 0 6px 30px #000;
  animation: charDrop 1.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.victory-char {
  font-size: 180px; color: var(--gold);
  text-shadow: 0 0 70px rgba(212,175,55,0.6), 0 6px 30px #000;
  animation: charDrop 1.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes charDrop {
  0% { opacity: 0; transform: scale(2.6); }
  55% { opacity: 1; transform: scale(0.96); }
  75% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.death-sub, .victory-sub { font-size: 20px; letter-spacing: 0.4em; color: #9d9784; }
#victory-stats { font-size: 16px; color: #8f8a76; letter-spacing: 0.2em; }
#pause-menu h2 { font-weight: normal; font-size: 44px; letter-spacing: 0.6em; text-indent: 0.6em; color: var(--paper); }
.pause-hint { font-size: 13px; color: #6d6a5c; margin-top: 8px; }

/* ---------- error log (debug) ---------- */
#err-log {
  display: none; position: fixed; z-index: 999; bottom: 0; left: 0; right: 0;
  max-height: 30vh; overflow: auto; white-space: pre-wrap;
  background: rgba(60,0,0,0.88); color: #ffd7d7;
  font: 12px/1.5 Consolas, monospace; padding: 8px 12px;
}