:root {
  --bone: #d8cfb8;
  --bone-dim: #8a8272;
  --gold: #c9a45c;
  --blood: #8e1616;
  --blood-bright: #c42a1f;
  --stamina: #4f8a3c;
  --ink: #050406;
  --font-title: 'Cinzel', 'Times New Roman', serif;
  --font-body: 'IM Fell English', Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  user-select: none;
  -webkit-user-select: none;
}

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

.hidden { display: none !important; }

/* ---------- Retro overlay: scanlines + vignette on top of the shader dither ---------- */
#crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background:
    repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.12) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  mix-blend-mode: multiply;
}

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

#floor-label {
  position: absolute;
  top: 22px;
  left: 28px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-title);
  text-shadow: 0 0 8px #000, 0 2px 2px #000;
}
#floor-num { font-size: 26px; color: var(--gold); }
#floor-name { font-size: 15px; letter-spacing: 0.12em; color: var(--bone-dim); text-transform: uppercase; }

#minimap {
  position: absolute;
  top: 18px;
  right: 22px;
  image-rendering: pixelated;
  opacity: 0.9;
}

#vitals {
  position: absolute;
  left: 28px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.bar {
  position: relative;
  height: 10px;
  background: rgba(10, 8, 8, 0.85);
  border: 1px solid #3b342c;
  box-shadow: 0 0 0 1px #000, inset 0 0 4px #000;
  transition: width 0.4s ease;
}
.bar .fill, .bar .trail {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 100%;
  transform-origin: left center;
}
.bar.hp .fill { background: linear-gradient(to bottom, #b52a22, #6d1010); }
.bar.hp .trail { background: #d8b36a; opacity: 0.8; }
.boss-bar .fill { background: linear-gradient(to bottom, #9a1f18, #561010); }
.boss-bar .trail { background: #d8b36a; opacity: 0.7; }
.bar.st { height: 7px; }
.bar.st .fill { background: linear-gradient(to bottom, #6fae52, #33612a); }
.bar.st.drained { animation: drained 0.35s ease; }
@keyframes drained {
  0%, 100% { border-color: #3b342c; }
  30% { border-color: #e04a3a; box-shadow: 0 0 10px #e04a3a; }
}

#relics {
  position: absolute;
  right: 26px;
  bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
  font-size: 14px;
  color: var(--bone-dim);
  text-shadow: 0 1px 2px #000;
}
.relic { display: flex; align-items: center; gap: 8px; }
.relic .gem {
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  box-shadow: 0 0 6px currentColor;
  background: currentColor;
}
.relic .count { color: var(--gold); font-family: var(--font-title); font-size: 12px; }

#boss {
  position: absolute;
  left: 50%;
  bottom: 64px;
  width: min(640px, 70vw);
  transform: translateX(-50%);
}
#boss .boss-name {
  font-size: 18px;
  margin-bottom: 5px;
  text-shadow: 0 1px 3px #000;
}
#boss .bar { width: 100%; height: 9px; }

#crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  background: rgba(216, 207, 184, 0.7);
  box-shadow: 0 0 3px #000;
  transition: transform 0.1s, background 0.1s;
}
#crosshair.guard { transform: scale(1.8) rotate(45deg); background: rgba(216, 207, 184, 0.45); }
#crosshair.parried { animation: parried 0.35s ease-out; }
@keyframes parried {
  0% { transform: scale(6) rotate(45deg); background: #fff2c8; box-shadow: 0 0 18px #ffd890; }
  100% { transform: scale(1.8) rotate(45deg); }
}

#perilous {
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
}
#perilous .rune {
  width: 34px;
  height: 34px;
  transform: rotate(45deg);
  border: 3px solid #ff3a24;
  background: rgba(120, 10, 5, 0.6);
  box-shadow: 0 0 22px #ff2a14, inset 0 0 10px #ff2a14;
}
#perilous .label {
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: #ff5a44;
  text-shadow: 0 0 8px #000;
}
#perilous.show { animation: perilous 0.9s ease-out; }
@keyframes perilous {
  0% { opacity: 0; transform: translateX(-50%) scale(1.6); }
  12% { opacity: 1; transform: translateX(-50%) scale(1); }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

#boss .posture {
  position: relative;
  height: 5px;
  margin: 5px auto 0;
  width: 60%;
  background: rgba(10, 8, 8, 0.7);
  border: 1px solid #3b342c;
}
#boss .posture-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #c9a45c, #ffdf8a, #c9a45c);
  transform-origin: center;
  transform: scaleX(0);
}
#boss .posture-fill.broken { background: #ff4a2a; box-shadow: 0 0 10px #ff4a2a; }

/* ---------- Banners ---------- */
#banner {
  position: fixed;
  left: 0; right: 0;
  top: 42%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  transition: opacity 0.6s ease;
}
#banner.show { opacity: 1; }
#banner .banner-text {
  width: 100%;
  text-align: center;
  padding: 18px 0;
  font-family: var(--font-title);
  font-size: clamp(28px, 5vw, 56px);
  letter-spacing: 0.08em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(201, 164, 92, 0.5), 0 2px 4px #000;
  background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.75) 25%, rgba(0, 0, 0, 0.75) 75%, transparent);
}
#banner.floor .banner-text { color: var(--bone); font-size: clamp(22px, 3.6vw, 40px); }
#banner.warn .banner-text { color: var(--blood-bright); text-shadow: 0 0 18px rgba(196, 42, 31, 0.5), 0 2px 4px #000; }

#item-banner {
  position: fixed;
  top: 16%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  z-index: 20;
  transition: opacity 0.4s ease;
  min-width: 320px;
}
#item-banner.show { opacity: 1; }
#item-banner .item-name {
  font-family: var(--font-title);
  font-size: clamp(24px, 3.5vw, 40px);
  text-shadow: 0 0 14px currentColor, 0 2px 3px #000;
}
#item-banner .item-desc { font-size: 20px; margin-top: 4px; color: var(--bone); text-shadow: 0 1px 3px #000; }
#item-banner .item-lore { font-style: italic; margin-top: 6px; color: var(--bone-dim); text-shadow: 0 1px 3px #000; }

/* ---------- Overlays ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#title-screen {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.9) 75%);
}
.title-inner { text-align: center; padding: 16px; }
#title-screen h1 {
  font-family: var(--font-title);
  font-weight: 400;
  font-size: clamp(40px, 9vw, 96px);
  letter-spacing: 0.14em;
  margin: 0;
  color: var(--bone);
  text-shadow: 0 0 30px rgba(255, 140, 60, 0.25), 0 4px 6px #000;
}
.tagline { font-style: italic; color: var(--bone-dim); font-size: 20px; margin: 8px 0 28px; }
.gleam { color: #fff2c8; text-shadow: 0 0 8px #ffd890; }
.red { color: #ff5a44; text-shadow: 0 0 8px #ff2a14; }
.controls {
  list-style: none;
  padding: 0;
  margin: 0 auto 32px;
  display: grid;
  gap: 6px;
  color: var(--bone-dim);
  font-size: 17px;
}
kbd {
  font-family: var(--font-title);
  font-size: 12px;
  color: var(--bone);
  border: 1px solid #4a4238;
  background: rgba(20, 16, 14, 0.8);
  padding: 2px 7px;
  margin-right: 6px;
}
#start-btn {
  font-family: var(--font-title);
  font-size: 22px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #5a4a2e;
  padding: 12px 38px 12px 44px;
  cursor: pointer;
  transition: color 0.2s, box-shadow 0.2s, border-color 0.2s;
}
#start-btn:hover, #start-btn:focus-visible {
  color: #f0d59a;
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(201, 164, 92, 0.35);
  outline: none;
}

#pause-screen { background: rgba(0, 0, 0, 0.72); cursor: pointer; }
#pause-screen h2 { font-family: var(--font-title); font-weight: 400; font-size: 44px; letter-spacing: 0.2em; margin: 0 0 18px; }
#pause-stats { display: grid; grid-template-columns: auto auto; gap: 4px 28px; text-align: left; color: var(--bone-dim); font-size: 17px; }
#pause-stats b { color: var(--bone); font-weight: 400; text-align: right; }
.hint { color: var(--bone-dim); font-style: italic; margin-top: 22px; }

#death-screen {
  background: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, 0.85) 45%, rgba(0, 0, 0, 0.85) 55%, transparent 70%);
  animation: fade-in 1.6s ease both;
}
#death-screen .died {
  font-family: var(--font-title);
  font-size: clamp(48px, 10vw, 110px);
  letter-spacing: 0.08em;
  color: var(--blood-bright);
  text-shadow: 0 0 30px rgba(170, 20, 20, 0.6);
  animation: died-grow 4s ease-out both;
}
#death-screen .died-sub {
  margin-top: 8px;
  color: var(--bone-dim);
  font-style: italic;
  font-size: 18px;
  animation: fade-in 1s ease 2s both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes died-grow { from { transform: scale(0.94); } to { transform: scale(1.04); } }

@media (max-width: 640px) {
  #floor-label { left: 16px; top: 14px; }
  #floor-name { display: none; }
  #minimap { right: 12px; top: 12px; width: 132px; height: 90px; }
  #vitals { left: 16px; bottom: 18px; }
  #relics { right: 16px; bottom: 18px; font-size: 12px; }
}

/* ---------- Loadout HUD ---------- */
.bar.mp { height: 6px; }
.bar.mp .fill { background: linear-gradient(to bottom, #5a8ae0, #2a4a90); }
.bar.mp.drained, .bar.st.drained { animation: drained 0.35s ease; }

#actions {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.slot {
  position: relative;
  width: 64px;
  height: 64px;
  border: 1px solid #4a4238;
  background: rgba(8, 7, 6, 0.72);
  box-shadow: 0 0 0 1px #000, inset 0 0 10px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.slot .cd { position: absolute; inset: 0; }
.slot-key {
  position: absolute;
  top: 3px;
  left: 5px;
  font-family: var(--font-title);
  font-size: 11px;
  color: var(--gold);
}
.slot-name {
  font-family: var(--font-title);
  font-size: 9px;
  text-align: center;
  line-height: 1.15;
  color: var(--bone);
  padding: 12px 4px 0;
  letter-spacing: 0.04em;
}
#skill-slot.ready { border-color: #8a7446; box-shadow: 0 0 0 1px #000, inset 0 0 14px rgba(201, 164, 92, 0.25); }
#skill-slot.denied { animation: drained 0.35s ease; }
.flask-icon {
  width: 16px;
  height: 22px;
  margin-top: 6px;
  border-radius: 3px 3px 8px 8px;
  background: linear-gradient(to bottom, #e04040, #7a1010);
  box-shadow: 0 0 8px rgba(224, 60, 60, 0.6);
}
#flask-slot .count {
  position: absolute;
  right: 6px;
  bottom: 4px;
  font-family: var(--font-title);
  font-size: 15px;
  color: var(--bone);
}
#flask-slot.empty .flask-icon { background: #3a2a2a; box-shadow: none; }

#loadout {
  position: absolute;
  right: 26px;
  bottom: 26px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}
#relics { position: static; }
#weapons { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.wslot {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 200px;
  justify-content: flex-end;
  padding: 4px 10px;
  background: rgba(8, 7, 6, 0.55);
  border: 1px solid transparent;
  font-size: 15px;
  opacity: 0.6;
}
.wslot.active { opacity: 1; border-color: #5a4a2e; background: rgba(12, 10, 8, 0.8); }
.wslot.empty { opacity: 0.3; }
.wkey { font-family: var(--font-title); font-size: 11px; color: var(--gold); order: 2; }

#prompt {
  position: absolute;
  left: 50%;
  top: 62%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-shadow: 0 1px 3px #000, 0 0 10px #000;
}
#prompt kbd { font-size: 13px; }
#prompt .ptext { font-family: var(--font-title); font-size: 18px; color: var(--bone); }
#prompt .psub { font-style: italic; font-size: 14px; color: var(--bone-dim); }

#toast {
  position: absolute;
  right: 26px;
  bottom: 50%;
  text-align: right;
  opacity: 0;
  text-shadow: 0 1px 3px #000;
}
#toast.show { animation: toast 2.4s ease both; }
#toast .ttitle { font-family: var(--font-title); font-size: 18px; }
#toast .tsub { font-style: italic; color: var(--bone-dim); }
@keyframes toast {
  0% { opacity: 0; transform: translateX(20px); }
  10%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

#dmg-layer { position: absolute; inset: 0; overflow: hidden; }
.dmg {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-title);
  font-size: 16px;
  color: #e8dcc0;
  text-shadow: 0 0 3px #000, 0 1px 2px #000;
  white-space: nowrap;
}
.dmg.crit { color: #ff6a3a; font-size: 24px; }
.dmg.blocked { color: #9aa0b0; font-size: 14px; font-style: italic; }

#inventory {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(760px, 92vw);
  padding: 22px 26px;
  background: rgba(6, 5, 5, 0.9);
  border: 1px solid #4a4238;
  box-shadow: 0 0 0 1px #000, 0 20px 60px rgba(0, 0, 0, 0.7);
}
#inventory h2 { font-family: var(--font-title); font-weight: 400; letter-spacing: 0.15em; margin: 0 0 14px; color: var(--gold); }
.inv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.inv-weapon { padding: 12px; border: 1px solid #2e2a24; background: rgba(20, 17, 14, 0.8); min-height: 120px; }
.inv-weapon.active { border-color: #8a7446; }
.inv-weapon.empty { color: var(--bone-dim); font-style: italic; }
.inv-name { font-family: var(--font-title); font-size: 15px; margin-bottom: 8px; }
.inv-stats { display: grid; grid-template-columns: auto auto; gap: 2px 12px; font-size: 14px; color: var(--bone-dim); }
.inv-stats b { font-weight: 400; color: var(--bone); text-align: right; }
.inv-affix { margin-top: 8px; font-style: italic; color: #b0c8e0; font-size: 14px; }
.inv-foot { margin-top: 16px; font-size: 13px; color: var(--bone-dim); }

/* ---------- Menus ---------- */
#menu { background: radial-gradient(ellipse at center, rgba(10, 8, 6, 0.75), rgba(0, 0, 0, 0.92)); z-index: 40; }
.menu-panel { text-align: center; padding: 16px; max-width: 1100px; width: 100%; }
.menu-title { font-family: var(--font-title); font-weight: 400; font-size: clamp(28px, 4vw, 46px); letter-spacing: 0.14em; margin: 0; color: var(--bone); }
.menu-sub { font-style: italic; color: var(--bone-dim); margin: 6px 0 24px; font-size: 18px; }
.class-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px; text-align: left; }
#menu { overflow-y: auto; align-items: flex-start; padding-top: 3vh; }
#menu .menu-panel { max-width: 1400px; }
.class-card .kit-row { font-size: 13px; }
.kit-bond { color: #d8c8a0; border-top: 1px solid rgba(201, 164, 92, 0.25); padding-top: 5px; margin-top: 3px; }
.class-card {
  position: relative;
  font: inherit;
  color: var(--bone);
  text-align: left;
  cursor: pointer;
  padding: 20px 18px;
  background: linear-gradient(to bottom, rgba(24, 20, 16, 0.92), rgba(10, 8, 7, 0.92));
  border: 1px solid #3e362c;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.class-card:hover, .class-card:focus-visible { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 0 24px rgba(0, 0, 0, 0.6), 0 0 14px color-mix(in srgb, var(--accent) 30%, transparent); outline: none; }
.class-card.current { border-color: var(--accent); }
.class-card.current::after { content: 'Current'; position: absolute; top: 10px; right: 12px; font-size: 12px; font-style: italic; color: var(--accent); }
.card-key { position: absolute; top: 10px; left: 12px; font-family: var(--font-title); font-size: 11px; color: var(--gold); }
.card-name { font-family: var(--font-title); font-weight: 400; font-size: 24px; margin: 10px 0 2px; color: var(--accent); }
.card-tag { font-style: italic; color: var(--bone-dim); margin: 0 0 14px; }
.card-bars { display: grid; gap: 4px; margin-bottom: 14px; }
.card-bar { display: flex; justify-content: space-between; align-items: center; font-size: 13px; text-transform: capitalize; color: var(--bone-dim); }
.pips { display: flex; gap: 3px; }
.pips i { width: 14px; height: 6px; background: #2a241e; }
.pips i.on { background: var(--accent); }
.card-kit { display: grid; gap: 8px; font-size: 14px; color: var(--bone-dim); line-height: 1.35; }
.card-kit b { color: var(--bone); font-weight: 400; }
.menu-leave, .spawn-btn, .spawn-banish {
  font-family: var(--font-title);
  letter-spacing: 0.12em;
  color: var(--bone);
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #4a4238;
  cursor: pointer;
  padding: 8px 16px;
}
.menu-leave { margin-top: 24px; }
.menu-leave:hover, .spawn-btn:hover, .spawn-banish:hover { border-color: var(--gold); color: #f0d59a; }
.spawn-list { display: grid; gap: 8px; max-width: 460px; margin: 0 auto 16px; }
.spawn-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(20, 17, 14, 0.8); border: 1px solid #2e2a24; }
.spawn-key { font-family: var(--font-title); font-size: 11px; color: var(--gold); width: 14px; }
.spawn-name { flex: 1; text-align: left; font-size: 17px; }
.spawn-banish { color: #d88; }

/* ---------- Banners for special moments ---------- */
#banner.ult .banner-text { color: #fff0c0; letter-spacing: 0.3em; font-size: clamp(22px, 3.4vw, 38px); text-shadow: 0 0 24px rgba(255, 220, 140, 0.8), 0 2px 4px #000; }
#banner.devil .banner-text { color: #ff4a2a; text-shadow: 0 0 26px rgba(255, 40, 10, 0.8), 0 2px 4px #000; }
#banner.angel .banner-text { color: #fff4d0; text-shadow: 0 0 26px rgba(255, 240, 180, 0.9), 0 2px 4px #000; }
#banner.shop .banner-text { color: #d8b0ff; text-shadow: 0 0 20px rgba(176, 128, 255, 0.7), 0 2px 4px #000; font-size: clamp(22px, 3.4vw, 38px); }
#banner.treasure .banner-text { color: #f0c040; font-size: clamp(22px, 3.4vw, 38px); }

/* ---------- Wallet ---------- */
#wallet {
  position: absolute;
  top: 176px;
  right: 22px;
  display: flex;
  gap: 16px;
  font-family: var(--font-title);
  font-size: 17px;
  color: var(--bone);
  text-shadow: 0 1px 3px #000;
}
#wallet span { display: flex; align-items: center; gap: 6px; }
#wallet .coins::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe79a, #c9951c 70%);
  box-shadow: 0 0 6px rgba(240, 192, 64, 0.6);
}
#wallet .keys::before {
  content: '';
  width: 6px; height: 13px;
  border: 2px solid #d0d8e8;
  border-radius: 6px 6px 1px 1px;
  box-shadow: 0 0 5px rgba(208, 216, 232, 0.5);
}
#wallet .bump { animation: bump 0.3s ease; }
@keyframes bump { 40% { transform: scale(1.35); color: #fff4c0; } }

/* ---------- Ultimate ---------- */
#ult-slot { border-color: #3a3448; }
#ult-slot .ult-fill {
  position: absolute; inset: 0;
  transform-origin: bottom;
  transform: scaleY(0);
  background: linear-gradient(to top, rgba(255, 170, 60, 0.55), rgba(255, 230, 150, 0.12));
}
#ult-slot .ult-rune {
  position: absolute;
  width: 18px; height: 18px;
  top: 12px;
  border: 2px solid #8a7a5a;
  transform: rotate(45deg);
}
#ult-slot .slot-name { padding-top: 26px; position: relative; }
#ult-slot.ready {
  border-color: #ffd070;
  box-shadow: 0 0 0 1px #000, 0 0 16px rgba(255, 200, 100, 0.6), inset 0 0 18px rgba(255, 210, 120, 0.5);
  animation: ultpulse 1.2s ease-in-out infinite;
}
#ult-slot.ready .ult-rune { border-color: #fff0c0; box-shadow: 0 0 10px #ffd070; }
#ult-slot.denied { animation: drained 0.35s ease; }
#ult-slot.burst { animation: ultburst 0.6s ease; }
@keyframes ultpulse { 50% { box-shadow: 0 0 0 1px #000, 0 0 26px rgba(255, 200, 100, 0.9), inset 0 0 22px rgba(255, 210, 120, 0.7); } }
@keyframes ultburst { 0% { transform: scale(1); } 30% { transform: scale(1.25); filter: brightness(2); } 100% { transform: scale(1); } }

/* ---------- Settings ---------- */
.settings {
  display: grid;
  gap: 8px;
  margin: 18px auto 0;
  width: min(420px, 90vw);
  padding: 12px 16px;
  border: 1px solid #3a342c;
  background: rgba(8, 7, 6, 0.6);
  cursor: default;
}
.set-row { display: grid; grid-template-columns: 1fr 150px 52px; align-items: center; gap: 10px; font-size: 15px; color: var(--bone-dim); text-align: left; }
.set-row input[type=checkbox] { justify-self: start; accent-color: var(--gold); width: 16px; height: 16px; }
.set-row input[type=range] { accent-color: var(--gold); width: 100%; }
.set-value { color: var(--bone); font-family: var(--font-title); font-size: 13px; text-align: right; }

/* ---------- The merchant's shop ---------- */
#shop { position: fixed; inset: 0; z-index: 25; pointer-events: none; }
#shop .shop-panel {
  pointer-events: auto;
  position: absolute;
  right: 3vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(380px, 38vw);
  padding: 18px 20px 14px;
  background: linear-gradient(to bottom, rgba(24, 14, 36, 0.9), rgba(8, 6, 12, 0.92));
  border: 1px solid #5a4078;
  box-shadow: 0 0 0 1px #000, 0 0 40px rgba(120, 70, 200, 0.25), inset 0 0 30px rgba(0, 0, 0, 0.6);
  animation: shopin 0.5s ease both;
}
@keyframes shopin { from { opacity: 0; transform: translate(30px, -50%); } }
#shop header h2 { margin: 0; font-family: var(--font-title); font-weight: 400; letter-spacing: 0.12em; color: #e0c8ff; font-size: 26px; text-shadow: 0 0 12px rgba(176, 128, 255, 0.6); }
#shop .shop-sub { font-style: italic; color: #9a88b0; margin-top: 2px; }
.shop-wallet { display: flex; gap: 18px; margin: 12px 0 8px; font-family: var(--font-title); font-size: 18px; }
.shop-wallet.denied { animation: drained 0.4s ease; }
.shop-wallet span { display: flex; align-items: center; gap: 7px; }
.wallet-coins::before { content: ''; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe79a, #c9951c 70%); box-shadow: 0 0 6px rgba(240, 192, 64, 0.6); }
.wallet-keys::before { content: ''; width: 6px; height: 13px; border: 2px solid #d0d8e8; border-radius: 6px 6px 1px 1px; }
.shop-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3a2a50; }
.shop-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-bottom: 1px solid #241a34;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.15s;
}
.shop-row .row-price { font-family: var(--font-title); color: #f0d070; display: flex; align-items: center; gap: 5px; }
.shop-row .row-price::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #e0b040; }
.shop-row.sel { background: linear-gradient(to right, rgba(176, 128, 255, 0.22), transparent); box-shadow: inset 2px 0 0 #c8a0ff; }
.shop-row.poor .row-price { color: #a04040; }
.shop-row.sold { opacity: 0.35; }
.shop-row.sold .row-price::before { display: none; }
.shop-detail { min-height: 70px; padding: 10px 4px 4px; }
.detail-name { font-family: var(--font-title); font-size: 18px; }
.detail-desc { color: var(--bone); margin-top: 3px; }
.detail-mech { color: #c8a0ff; font-size: 13px; margin-top: 5px; letter-spacing: 0.08em; text-transform: uppercase; }
#shop footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; color: #8a7a9a; }
#shop footer kbd { font-size: 11px; }
.shop-leave { font-family: var(--font-title); background: transparent; color: var(--bone); border: 1px solid #5a4078; padding: 5px 10px; cursor: pointer; }
.shop-leave:hover { border-color: #c8a0ff; }
.shop-tag {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-title);
  font-size: 12px;
  padding: 2px 8px;
  color: #d8c8f0;
  background: rgba(10, 6, 16, 0.7);
  border: 1px solid #3a2a50;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.shop-tag.sel { color: #fff0c0; border-color: #c8a0ff; box-shadow: 0 0 10px rgba(176, 128, 255, 0.5); }
.shop-tag.sold { opacity: 0.4; text-decoration: line-through; }
.shop-bracket { position: absolute; left: 0; top: 0; }
.shop-bracket i { position: absolute; width: 14px; height: 14px; border: 2px solid #e8d0ff; filter: drop-shadow(0 0 4px #b080ff); }
.shop-bracket i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.shop-bracket i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.shop-bracket i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.shop-bracket i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.shop-bracket.sold i { border-color: #6a5a7a; filter: none; }

#npc-bubble {
  position: fixed; left: 0; top: 0;
  z-index: 24;
  max-width: 300px;
  padding: 8px 12px 10px;
  background: rgba(14, 8, 22, 0.88);
  border: 1px solid #6a4a90;
  box-shadow: 0 0 18px rgba(140, 90, 220, 0.35);
  pointer-events: none;
  margin-top: -14px;
}
#npc-bubble::after {
  content: '';
  position: absolute; left: 50%; bottom: -8px;
  border: 8px solid transparent; border-bottom: 0; border-top-color: #6a4a90;
  transform: translateX(-50%);
}
#npc-bubble .npc-name { font-family: var(--font-title); font-size: 11px; letter-spacing: 0.12em; color: #c8a0ff; text-transform: uppercase; }
#npc-bubble .npc-text { font-size: 16px; color: #efe6d6; line-height: 1.25; min-height: 1.25em; }

#hud.shopping #actions, #hud.shopping #loadout, #hud.shopping #minimap, #hud.shopping #wallet, #hud.shopping #crosshair, #hud.shopping #vitals { opacity: 0; transition: opacity 0.4s; }
/* During a devil's bargain the health bar stays up, so the price can be seen on it. */
#hud.shopping.show-vitals #vitals { opacity: 1; }

/* ---------- The price of a pact, flashing on the health bar ---------- */
#hp-bar .cost {
  position: absolute; top: -2px; bottom: -2px; right: 0;
  background: repeating-linear-gradient(135deg, rgba(255, 60, 40, 0.9) 0 4px, rgba(40, 0, 0, 0.9) 4px 8px);
  box-shadow: 0 0 10px #ff2a10;
  animation: costflash 0.7s ease-in-out infinite;
}
@keyframes costflash { 50% { opacity: 0.25; } }
#hp-cost-label {
  font-family: var(--font-title); font-size: 13px; letter-spacing: 0.08em;
  color: #ff5a3a; text-shadow: 0 0 8px #ff2a10, 0 1px 2px #000;
  animation: costflash 0.7s ease-in-out infinite;
}

/* ---------- Shop themes: the devil and the angel ---------- */
#shop[data-theme="devil"] .shop-panel { background: linear-gradient(to bottom, rgba(40, 6, 8, 0.92), rgba(10, 2, 2, 0.94)); border-color: #7a1a14; box-shadow: 0 0 0 1px #000, 0 0 40px rgba(220, 30, 10, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.6); }
#shop[data-theme="devil"] header h2 { color: #ff6a4a; text-shadow: 0 0 14px rgba(255, 40, 10, 0.7); }
#shop[data-theme="devil"] .shop-sub { color: #b07060; }
#shop[data-theme="devil"] .shop-row.sel { background: linear-gradient(to right, rgba(255, 40, 20, 0.22), transparent); box-shadow: inset 2px 0 0 #ff4a2a; }
#shop[data-theme="devil"] .shop-bracket i { border-color: #ff6a4a; filter: drop-shadow(0 0 4px #ff2a10); }
#shop[data-theme="angel"] .shop-panel { background: linear-gradient(to bottom, rgba(60, 52, 40, 0.88), rgba(24, 20, 16, 0.92)); border-color: #c8a860; box-shadow: 0 0 0 1px #000, 0 0 40px rgba(255, 230, 160, 0.3), inset 0 0 30px rgba(0, 0, 0, 0.4); }
#shop[data-theme="angel"] header h2 { color: #fff0c0; text-shadow: 0 0 14px rgba(255, 240, 180, 0.8); }
#shop[data-theme="angel"] .shop-sub { color: #c8b890; }
#shop[data-theme="angel"] .shop-row.sel { background: linear-gradient(to right, rgba(255, 240, 180, 0.2), transparent); box-shadow: inset 2px 0 0 #fff0c0; }
#shop[data-theme="angel"] .shop-bracket i { border-color: #fff0c0; filter: drop-shadow(0 0 5px #ffe080); }
.shop-row .row-price.vigor { color: #ff5a3a; }
.shop-row .row-price.vigor::before { background: #e02030; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.shop-row .row-price.gift { color: #fff0c0; }
.shop-row .row-price.gift::before { background: #fff0c0; border-radius: 0; transform: rotate(45deg); }
.wallet-vigor { color: #ff7a5a; }
.wallet-grace { color: #fff0c0; font-style: italic; }
#npc-bubble[data-theme="devil"] { border-color: #8a1a14; background: rgba(24, 4, 4, 0.9); box-shadow: 0 0 18px rgba(220, 30, 10, 0.4); }
#npc-bubble[data-theme="devil"] .npc-name { color: #ff6a4a; }
#npc-bubble[data-theme="devil"]::after { border-top-color: #8a1a14; }
#npc-bubble[data-theme="angel"] { border-color: #c8a860; background: rgba(40, 34, 24, 0.88); box-shadow: 0 0 18px rgba(255, 230, 160, 0.4); }
#npc-bubble[data-theme="angel"] .npc-name { color: #fff0c0; }
#npc-bubble[data-theme="angel"]::after { border-top-color: #c8a860; }

/* ---------- Cutscenes ---------- */
#letterbox { position: fixed; inset: 0; pointer-events: none; z-index: 22; }
#letterbox .lb-top, #letterbox .lb-bottom { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height 0.5s ease; }
#letterbox .lb-top { top: 0; }
#letterbox .lb-bottom { bottom: 0; display: flex; justify-content: flex-end; align-items: center; }
#letterbox.on .lb-top, #letterbox.on .lb-bottom { height: 11vh; }
.lb-skip { font-family: var(--font-title); font-size: 12px; letter-spacing: 0.12em; color: #5a5448; padding-right: 28px; opacity: 0; transition: opacity 0.5s 1s; }
#letterbox.on .lb-skip { opacity: 1; }
#hud.cinematic { opacity: 0; transition: opacity 0.3s; }
#cine-caption {
  position: fixed; left: 0; right: 0; bottom: 15vh; z-index: 23; text-align: center; pointer-events: none;
  opacity: 0; transform: translateY(8px); transition: opacity 0.8s ease, transform 0.8s ease;
}
#cine-caption.on { opacity: 1; transform: none; }
#cine-caption .cc-title { font-family: var(--font-title); font-size: clamp(22px, 3.4vw, 40px); letter-spacing: 0.22em; color: var(--bone); text-shadow: 0 2px 6px #000; }
#cine-caption .cc-sub { font-style: italic; font-size: 18px; color: var(--bone-dim); margin-top: 4px; }
#cine-caption[data-theme="devil"] .cc-title { color: #ff5a3a; text-shadow: 0 0 22px rgba(255, 30, 10, 0.8), 0 2px 4px #000; }
#cine-caption[data-theme="angel"] .cc-title { color: #fff4d0; text-shadow: 0 0 22px rgba(255, 240, 180, 0.9), 0 2px 4px #000; }

/* ---------- The Duchess's veil ---------- */
#veil {
  position: fixed; inset: 0; pointer-events: none; z-index: 9; opacity: 0; transition: opacity 0.6s;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(90, 40, 130, 0.55) 100%);
  mix-blend-mode: screen;
}
#veil.on { opacity: 1; animation: veil 2.4s ease-in-out infinite; }
@keyframes veil { 50% { filter: brightness(1.4); } }

/* ---------- Duelist's Bloodrush ---------- */
#streak {
  position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; justify-content: center; width: 180px;
  font-family: var(--font-title); color: #ff6a4a; text-shadow: 0 0 10px rgba(255, 60, 30, 0.7), 0 1px 2px #000;
}
#streak .sk-name { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
#streak .sk-count { font-size: 20px; }
#streak .sk-track { width: 100%; height: 3px; background: rgba(0, 0, 0, 0.6); }
#streak .sk-bar { height: 100%; background: #ff5a3a; transform-origin: left; }
#streak.bump { animation: bump 0.3s ease; }

/* ---------- Staff Arts ---------- */
#arts { display: flex; gap: 10px; margin-left: 12px; }
.slot.art { border-color: color-mix(in srgb, var(--art, #888) 45%, #3a342c); }
.slot.art .art-gem { position: absolute; top: 12px; width: 12px; height: 12px; transform: rotate(45deg); background: var(--art, #888); box-shadow: 0 0 8px var(--art, #888); opacity: 0.5; }
.slot.art.ready .art-gem { opacity: 1; }
.slot.art .slot-name { padding-top: 24px; position: relative; }
.slot.art.denied { animation: drained 0.35s ease; }

/* Callouts: executions, perfect dodges, deflect chains. */
#callout {
  position: absolute; left: 50%; top: 58%; transform: translate(-50%, 0); pointer-events: none;
  font-family: var(--font-title); letter-spacing: 0.35em; text-transform: uppercase; font-size: 15px;
  color: var(--bone); text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 1px 2px #000; opacity: 0; white-space: nowrap;
}
#callout.gold { color: var(--gold); text-shadow: 0 0 14px rgba(201, 164, 92, 0.6), 0 1px 2px #000; }
#callout.blood { color: var(--blood-bright); font-size: 20px; text-shadow: 0 0 16px rgba(196, 42, 31, 0.6), 0 1px 3px #000; }
#callout.blue { color: #b8ccff; text-shadow: 0 0 16px rgba(120, 150, 255, 0.6), 0 1px 3px #000; }
#callout.show { animation: callout 1.3s ease-out forwards; }
@keyframes callout {
  0% { opacity: 0; transform: translate(-50%, 6px) scale(1.25); letter-spacing: 0.6em; }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1); letter-spacing: 0.35em; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -8px); }
}
/* Executions: quick letterbox bars close in. */
#exec-bars::before, #exec-bars::after {
  content: ''; position: fixed; left: 0; right: 0; height: 0; background: #000; transition: height 0.15s ease-out; pointer-events: none; z-index: 1;
}
#exec-bars::before { top: 0; }
#exec-bars::after { bottom: 0; }
#hud.executing #exec-bars::before, #hud.executing #exec-bars::after { height: 8vh; }

/* The Ashen Shrine */
.menu-panel.shrine { max-width: 760px; }
.shrine-head { font-family: var(--font-title); font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: #ff8a40; margin: 16px 0 6px; font-weight: normal; }
.shrine-list { display: flex; flex-direction: column; gap: 4px; }
.shrine-row { display: flex; align-items: center; gap: 12px; padding: 6px 10px; background: rgba(20, 14, 12, 0.6); border: 1px solid rgba(255, 138, 64, 0.12); }
.shrine-row.oath.sworn { border-color: rgba(196, 42, 31, 0.8); background: rgba(60, 10, 8, 0.55); }
.shrine-text { flex: 1; display: flex; flex-direction: column; }
.shrine-text b { color: var(--bone); font-weight: normal; font-family: var(--font-title); font-size: 14px; }
.shrine-desc { color: var(--bone-dim); font-size: 14px; }
.shrine-row .pips i { display: inline-block; width: 9px; height: 9px; margin-left: 3px; border: 1px solid #ff8a40; transform: rotate(45deg); }
.shrine-row .pips i.on { background: #ff8a40; }
.shrine-buy { min-width: 98px; padding: 6px 10px; background: rgba(40, 20, 12, 0.9); color: #ffb070; border: 1px solid rgba(255, 138, 64, 0.5); font-family: var(--font-title); cursor: pointer; }
.shrine-buy:disabled { opacity: 0.4; cursor: default; }
.shrine-row.oath.sworn .shrine-buy { color: #ff6050; border-color: rgba(196, 42, 31, 0.8); }
.shrine-stats { color: var(--bone-dim); font-size: 13px; margin-top: 14px; text-align: center; }
.died-ashes { color: #ff8a40; font-family: var(--font-title); letter-spacing: 0.15em; margin-top: 18px; font-size: 16px; text-shadow: 0 0 12px rgba(255, 120, 40, 0.4); }
.set-select { background: rgba(20, 16, 14, 0.9); color: var(--bone); border: 1px solid rgba(216, 207, 184, 0.3); padding: 3px 6px; font-family: var(--font-body); }
.menu-panel.shrine { max-height: 94vh; overflow-y: auto; padding-top: 14px; padding-bottom: 14px; }
.menu-panel.shrine .menu-title { margin: 0; }
.menu-panel.shrine .menu-sub { margin: 2px 0 0; }
.shrine-head { margin: 10px 0 4px; }
.shrine-row { padding: 3px 10px; }
.shrine-text { text-align: left; }
.shrine-buy { padding: 4px 10px; }