/* =====================================================================================
   Diablo-style HUD & UI theme (loaded after style.css; overrides it)
   ===================================================================================== */
:root { --serif: 'EB Garamond', 'Cormorant Garamond', Georgia, serif; --panel: rgba(14, 11, 11, 0.94); }
body { font-family: var(--serif); font-size: 16px; }
.card-sub, .class-desc, .adesc { font-family: var(--serif); font-size: 15px; }

#d-cluster { position: absolute; left: 14px; bottom: 10px; display: flex; align-items: flex-end; pointer-events: auto; }
.d-orb { position: relative; width: 150px; height: 150px; flex: none; }
.d-orb.ult { width: 112px; height: 112px; margin-left: -14px; margin-bottom: -4px; }
.d-orb canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb-frame { position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 64%, #0c0908 65%, #3a2e22 67%, #b08850 69%, #6a4c2c 72%, #241a12 75%, #8a6a40 77%, #1a1410 80%, transparent 81%);
  filter: drop-shadow(0 4px 10px #000); }
.d-orb.hp .orb-frame::before, .d-orb.hp .orb-frame::after { content: ''; position: absolute; width: 26px; height: 26px; background: radial-gradient(circle, #c8a060 0 30%, #5a4028 34% 60%, transparent 64%); border-radius: 50%; }
.d-orb.hp .orb-frame::before { left: -4px; top: 50%; transform: translateY(-50%); }
.d-orb.hp .orb-frame::after { left: 50%; top: -6px; transform: translateX(-50%); }
.d-orb.hp.low .orb-frame { animation: lowhp 0.9s infinite; }
@keyframes lowhp { 50% { filter: drop-shadow(0 0 18px #ff2010); } }
.d-orb.ult.ready .orb-frame { filter: drop-shadow(0 0 16px #b060ff); }
.orb-text { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 18px; color: #f0e0d0; text-shadow: 0 2px 4px #000, 0 0 2px #000; }
.orb-text.small { font-size: 16px; bottom: 38%; }

.d-bar { position: relative; margin-left: 14px; margin-bottom: 4px; padding: 8px 10px 24px; background: linear-gradient(#1c1715, #0c0a09); border: 1px solid #000; box-shadow: inset 0 0 0 1px #4a3a28, inset 0 0 0 3px #120e0c, inset 0 0 0 4px #3a2e22, 0 6px 20px #000c; }
.d-bar::before, .d-bar::after { content: ''; position: absolute; top: 50%; width: 14px; height: 40px; transform: translateY(-50%); background: linear-gradient(90deg, #2a2018, #8a6a40, #2a2018); clip-path: polygon(0 50%, 100% 0, 100% 100%); }
.d-bar::before { left: -13px; } .d-bar::after { right: -13px; transform: translateY(-50%) scaleX(-1); }
.d-bar-top { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; padding-right: 70px; }
.d-level { min-width: 24px; font-family: var(--serif); font-weight: 700; font-size: 17px; color: #e8d0a8; text-shadow: 0 1px 3px #000; text-align: center; }
.d-xp { flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.d-xp .seg { height: 6px; background: #1a1210; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #3a2e22; }
.d-xp .seg i { display: block; height: 100%; width: 0; background: linear-gradient(#e8a040, #a0601a); box-shadow: 0 0 6px #e8903088; }
.d-skills { display: flex; gap: 6px; }
.d-slot { position: relative; width: 58px; height: 58px; background: #0a0808; box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #4a3a28, 0 0 0 2px #0a0808, 0 0 0 3px #2a2018; }
.d-slot img { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); object-fit: cover; filter: brightness(0.9) contrast(1.05); }
.d-slot .fallback { position: absolute; inset: 2px; align-items: center; justify-content: center; font-family: var(--serif); color: #a89878; font-size: 18px; background: radial-gradient(#2a2420, #0c0a0a); }
.d-slot.ult { box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #6a4a2a, 0 0 0 2px #0a0808, 0 0 0 3px #8a5a2a; }
.d-slot.ready img { filter: brightness(1.1) contrast(1.1); }
.d-slot.ready { box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #a08050, 0 0 0 2px #0a0808, 0 0 0 3px #3a2e22; }
.d-slot.locked img, .d-slot.empty img { filter: grayscale(1) brightness(0.3); }
.d-slot.active, .d-slot.charging { box-shadow: inset 0 0 0 1px #000, 0 0 0 2px #e8c070, 0 0 14px #e8a04088; }
.d-slot .cd { position: absolute; left: 2px; right: 2px; bottom: 2px; background: rgba(0,0,0,0.72); }
.d-slot .cdnum { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 20px; color: #f0e0c0; text-shadow: 0 2px 3px #000; }
.d-slot .key { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); min-width: 22px; padding: 0 4px; height: 17px; line-height: 16px; text-align: center; font-family: var(--body); font-size: 10px; font-weight: 800; color: #d8c8a8; background: linear-gradient(#3a3028, #1a1410); border: 1px solid #5a4a36; }
.d-dodges { position: absolute; right: 10px; top: 9px; display: flex; gap: 3px; }
.d-dodges .pip { width: 18px; height: 6px; background: #12100e; box-shadow: 0 0 0 1px #3a2e22; position: relative; }
.d-dodges .pip i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(#cfe8ff, #6aa0d0); }

#d-map { position: absolute; right: 16px; top: 14px; width: 270px; pointer-events: none; }
.map-title { text-align: right; font-family: var(--serif); font-size: 20px; color: #e8dcc8; text-shadow: 0 2px 4px #000; margin-bottom: 6px; }
.map-frame { padding: 5px; background: linear-gradient(#2a2420, #12100e); box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #5a4a36, 0 6px 18px #000a; }
.map-frame canvas { display: block; width: 260px; height: 190px; }
.objective { margin-top: 10px; text-align: right; font-family: var(--serif); text-shadow: 0 2px 4px #000; }
.objective b { display: block; font-size: 19px; color: #f0e2c8; font-weight: 600; }
.objective span { display: block; font-size: 15px; color: #b8a890; }
#d-log { position: absolute; right: 18px; bottom: 110px; width: 460px; text-align: left; font-family: var(--serif); font-size: 16px; color: #e8d8b8; text-shadow: 0 1px 3px #000, 0 0 2px #000; pointer-events: none; }
.log-line { transition: opacity 1.4s; } .log-line.fade { opacity: 0; }

#resources { right: 18px; bottom: 16px; font-family: var(--serif); font-weight: 700; font-size: 19px; }
#relic-strip { right: 18px; bottom: 50px; max-width: 40vw; }
.relic { background: #0c0a0a; border: 1px solid #5a4a36; border-radius: 0; width: 34px; height: 34px; box-shadow: 0 2px 6px #000; overflow: hidden; }
.relic img { width: 100%; height: 100%; object-fit: cover; }
#party-frames { top: 14px; left: 14px; }
.pf { background: linear-gradient(#1c1715e8, #0c0a09e8); border-radius: 0; border-left-width: 2px; box-shadow: inset 0 0 0 1px #3a2e22; font-family: var(--serif); }
#lvl-badge { bottom: 176px; left: 330px; transform: none; border-radius: 0; background: linear-gradient(#5a3a1a, #2a1a0c); border: 1px solid #c8a060; font-family: var(--serif); font-size: 15px; }

.boss-name { font-family: var(--serif); font-weight: 700; font-size: 28px; letter-spacing: 1px; color: #f0e2c8; }
.boss-title { font-family: var(--serif); text-transform: none; letter-spacing: 1px; font-size: 15px; font-style: italic; color: #a89878; }
.boss-track { height: 12px; border-radius: 0; background: #120808; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4a36, 0 0 0 3px #000; }
.boss-fill { background: linear-gradient(#c02a1a, #6a0a0a); }
#prompt { font-family: var(--serif); font-size: 17px; border-radius: 0; background: #0c0a09e8; box-shadow: inset 0 0 0 1px #5a4a36; border: 1px solid #000; bottom: 200px; }
.toast { font-family: var(--serif); font-size: 16px; border-radius: 0; background: #0c0a09ee; box-shadow: inset 0 0 0 1px #4a3a28; border: 1px solid #000; border-left: 3px solid #c8a060; }
#toasts { top: auto; bottom: 230px; right: 22px; }
.b-title { font-family: var(--serif); font-weight: 600; letter-spacing: 2px; }
.b-world { font-family: var(--serif); letter-spacing: 8px; text-transform: uppercase; font-size: 14px; color: #c8a060; }
.b-sub { font-family: var(--serif); font-style: italic; }

.panel { background: var(--panel); border-radius: 0; border: 1px solid #000; box-shadow: inset 0 0 0 1px #5a4a36, inset 0 0 0 4px #0c0a09, inset 0 0 0 5px #2a2018, 0 20px 80px #000; }
.panel-head { border-bottom: 1px solid #3a2e22; background: linear-gradient(#1e1816, #12100e); }
.panel-head h2 { font-family: var(--serif); font-weight: 600; letter-spacing: 1px; color: #e8d8b8; font-size: 26px; }
.card { border-radius: 0; background: linear-gradient(#1a1614, #0e0c0b); border: 1px solid #3a2e22; box-shadow: inset 0 0 0 1px #000; }
.card-title { font-family: var(--serif); font-size: 18px; font-weight: 600; color: #ecdcc0; }
.btn { border-radius: 0; font-family: var(--serif); font-size: 16px; font-weight: 600; background: linear-gradient(#2a2420, #141110); border: 1px solid #5a4a36; box-shadow: inset 0 0 0 1px #000; }
.btn.gold { background: linear-gradient(#6a4a22, #3a2610); border-color: #c8a060; color: #f8e8c8; }
.tnode, .attr, .upg, .kin, .class-row, .tree, .stat { border-radius: 0; }
.choice h1, .choice h2 { font-family: var(--serif); font-weight: 600; letter-spacing: 2px; color: #ecdcc0; text-shadow: 0 2px 10px #000; }
.title-card { border-radius: 0; box-shadow: inset 0 0 0 1px #5a4a36, inset 0 0 0 4px #0c0a09, inset 0 0 0 5px #2a2018, 0 0 80px #000; background: rgba(10, 8, 8, 0.86); }
.logo { font-family: var(--serif); font-weight: 600; letter-spacing: 6px; font-size: 46px; color: #e8d8c0; text-shadow: 0 2px 12px #000; }
.logo .ember { color: #d85a28; text-shadow: 0 0 18px #ff4a1088; }
.tagline { font-family: var(--serif); font-size: 17px; }
.big-icon img { width: 96px; height: 96px; box-shadow: 0 0 0 1px #000, 0 0 0 2px #5a4a36; }

/* gold purse (under the minimap) */
#d-map .purse { position: relative; margin-top: 12px; display: flex; justify-content: flex-end; pointer-events: auto; cursor: help; }
.purse-main { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 10px; background: linear-gradient(90deg, #0000, #120c08cc 30%); border-right: 2px solid #8a6420; }
.purse .coin { position: relative; width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff6c8 0, #ffd04a 30%, #c08a18 62%, #5e3c08 100%);
  box-shadow: 0 0 14px #ffb02066, inset 0 -3px 5px #0007, 0 2px 4px #000c; border: 1px solid #2e1c02; }
.purse .coin::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px solid #7a520899; box-shadow: inset 0 1px 1px #fff4; }
.purse .coin.bump { animation: coinBump .35s ease-out; }
@keyframes coinBump { 40% { transform: scale(1.3) rotate(-12deg); box-shadow: 0 0 26px #ffc040cc; } }
.purse-col { display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.purse-num { font-family: var(--display, serif); font-size: 30px; font-weight: 700; letter-spacing: .5px;
  background: linear-gradient(#fff4c8, #ffcd3c 55%, #b07a14); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 8px #ffb02033); }
.purse-sub { font-family: var(--serif, serif); font-size: 12px; color: #b8a078; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 3px; }
.purse-pop { position: absolute; right: 150px; top: 10px; font-family: var(--display, serif); font-weight: 800; font-size: 20px; color: #ffd860; text-shadow: 0 2px 3px #000, 0 0 10px #ffa020; animation: pursePop 1.1s ease-out forwards; pointer-events: none; }
@keyframes pursePop { from { transform: translateY(6px); opacity: 0; } 15% { opacity: 1; } to { transform: translateY(-30px); opacity: 0; } }

/* minimap progress track */
.map-track { margin-top: 8px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.realm-row { display: flex; gap: 5px; }
.realm-row .realm { position: relative; width: 22px; height: 22px; display: grid; place-items: center; font: 600 11px var(--serif, serif); font-style: normal; color: #8a7a68; z-index: 0; }
.realm-row .realm::before { content: ''; position: absolute; inset: 3px; transform: rotate(45deg); background: #120c08d8; border: 1px solid #4a3a28; z-index: -1; }
.realm-row .realm.done { color: #1a0e04; }
.realm-row .realm.done::before { background: linear-gradient(135deg, #ffe08a, #c08420); border-color: #ffd070; box-shadow: 0 0 8px #ffb02088; }
.realm-row .realm.cur { color: #ffe0a0; }
.realm-row .realm.cur::before { border-color: #ff9a30; box-shadow: 0 0 10px #ff7a1088, inset 0 0 6px #ff7a1066; }
.room-row { display: flex; gap: 4px; align-items: center; }
.room-row .pip { width: 8px; height: 8px; border-radius: 50%; background: #1a120c; border: 1px solid #5a4630; }
.room-row .pip.done { background: #c8a060; border-color: #e8c888; }
.room-row .pip.cur { background: #ffd060; border-color: #fff0c0; box-shadow: 0 0 8px #ffb030; }
.room-row .pip.mini { width: 11px; height: 11px; border-radius: 2px; transform: rotate(45deg); border-color: #b06030; }
.room-row .pip.boss { width: 13px; height: 13px; border-radius: 2px; transform: rotate(45deg); border-color: #e04020; box-shadow: 0 0 6px #ff302066; }
.room-count { font: 12px var(--serif, serif); color: #a89878; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px 2px #000; }
.objective .realms { color: #e0b860; font-size: 13px; margin-top: 2px; }