.dp-tower { position:relative; width:100%; isolation:isolate; }
.dp-band { position:absolute; left:0; display:block; width:100%; margin:0; padding:0; overflow:hidden; border:0; border-radius:0; background:transparent; }
.dp-band img { position:absolute; left:0; display:block; width:100%; max-width:none; image-rendering:pixelated; pointer-events:none; transition:filter 180ms ease-out; }
.dp-band--lock img { filter:grayscale(.85) brightness(.42) contrast(.9); }
.dp-band--next img { filter:brightness(.82) saturate(.85); }
.dp-tower--interactive .dp-band { cursor:pointer; }
.dp-tower--interactive .dp-band--next { outline:1px solid #ffd76a99; outline-offset:-1px; }
.dp-tower--interactive .dp-band:hover img,.dp-tower--interactive .dp-band:focus-visible img { filter:brightness(1.12); }
.dp-tower--interactive .dp-band--lock:hover img,.dp-tower--interactive .dp-band--lock:focus-visible img { filter:grayscale(.6) brightness(.62); }
.dp-tower--interactive .dp-band:focus-visible { outline:2px solid #f7e9b9; outline-offset:-2px; z-index:2; }
.dp-tower--interactive .dp-band--selected { outline:2px solid #d7bd71; outline-offset:-2px; z-index:1; }
.inner-realm-point--pagoda .dp-tower { transform-origin:center bottom; transition:transform 180ms ease-out; pointer-events:none; }
.inner-realm-point--pagoda:hover .dp-tower,.inner-realm-point--pagoda:focus-visible .dp-tower { transform:scale(1.08); }
.dp-room { position:relative; width:100%; aspect-ratio:3/2; isolation:isolate; overflow:hidden; background:#142744; color:#f7e9b9; font-family:Georgia,serif; }
.dp-room__background { position:absolute; inset:0; width:100%; height:100%; image-rendering:pixelated; pointer-events:none; }
.dp-room__tower { position:absolute; left:33.5%; top:78%; height:70%; aspect-ratio:123/243; transform:translate(-50%,-100%); }
.dp-room__side { position:absolute; right:4%; top:13%; width:40%; display:flex; flex-direction:column; align-items:center; gap:10px; }
.dp-room__essence { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border:1px solid #3aa6b8; border-radius:16px; background:#0e1f1bf2; color:#9fe6f0; font-weight:bold; }
.dp-room__progress { padding:3px 8px; border:1px solid #97825299; background:#102822e0; color:#c9c2a6; font-size:12px; }
#dp-card-host { width:100%; }
.dp-card { padding:16px 18px; border:1px solid #978252; border-radius:10px; background:#0e1f1bf2; box-shadow:0 6px 20px #0008; text-align:center; }
.dp-card--lock { border-color:#5b5440; }
.dp-card__name { color:#ffd76a; font-size:1.1em; font-weight:bold; }
.dp-card--lock .dp-card__name { color:#a49d84; }
.dp-card__buff { margin:4px 0 12px; color:#c9c2a6; font-size:.88em; }
.dp-card__cost { margin-bottom:8px; font-size:.88em; }
.dp-card__cost strong { color:#ffd76a; }
.dp-card__bar { height:8px; margin:0 auto 12px; overflow:hidden; border:1px solid #97825266; border-radius:5px; background:#ffffff14; }
.dp-card__fill { height:100%; transform:scaleX(0); transform-origin:left center; background:linear-gradient(90deg,#3aa6b8,#ffd76a); transition:transform 350ms cubic-bezier(.22,1,.36,1); }
.dp-card__ascend { padding:8px 28px; border:1px solid #5b5440; border-radius:8px; background:transparent; color:#8d8670; font:bold 1em Georgia,serif; cursor:not-allowed; }
.dp-card__ascend--ready { border-color:#d7bd71; background:#d7bd71; color:#1a1405; cursor:pointer; }
.dp-card__done { color:#7ddc85; font-weight:bold; }
.dp-card__locked { color:#8d8670; font-size:.88em; }
.dp-entry { display:flex; justify-content:center; padding:24px 12px; text-align:center; }
html[data-fx="off"] .dp-band img,html[data-fx="reduced"] .dp-band img,html[data-fx="off"] .inner-realm-point--pagoda .dp-tower,html[data-fx="reduced"] .inner-realm-point--pagoda .dp-tower { transition:none; }
html[data-fx="off"] .inner-realm-point--pagoda .dp-tower,html[data-fx="reduced"] .inner-realm-point--pagoda .dp-tower { transform:none !important; }
@media(prefers-reduced-motion:reduce) { .dp-band img,.inner-realm-point--pagoda .dp-tower,.dp-card__fill { transition:none; } .inner-realm-point--pagoda .dp-tower { transform:none !important; } }
@media(max-width:700px) { .dp-room__side { top:11%; gap:6px; } .dp-card { padding:10px 12px; } }