/* Solo zindanlar: haritadaki portal, ekranı kaplayan açılış, arena, yaratıklar, alan skili, sonuç kartı */
.dg-portal { position: absolute; width: 74px; height: 80px; margin: -76px 0 0 -37px; padding: 0; background: none; border: 0; display: grid; justify-items: center; }
.dgp-art { width: 74px; height: 80px; overflow: visible; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--pg) 60%, transparent)); }
.dgp-spin { transform-box: fill-box; transform-origin: center; animation: spin 2.6s linear infinite; }
.dgp-core { animation: dgpCore 1.6s ease-in-out infinite; }
.dgp-glow { animation: dgpGlow 2.2s ease-in-out infinite; }
.dgp-runes circle { animation: nzRune 1.8s ease-in-out infinite; }
.dgp-runes circle:nth-child(2n) { animation-delay: .6s; }
.dgp-lbl { position: absolute; top: 100%; margin-top: 2px; display: grid; justify-items: center; white-space: nowrap; pointer-events: none; }
.dgp-lbl b { font: 700 11px/1.1 var(--fs); letter-spacing: .04em; color: #f6ecd2; text-shadow: 0 1px 2px #000, 0 0 6px #000; }
.dgp-lbl small { font: 700 9px/1.2 var(--fb); color: var(--pg); text-shadow: 0 1px 2px #000; }
.dg-portal.closed .dgp-art { filter: grayscale(.8) brightness(.6); }
.dg-portal.closed .dgp-spin, .dg-portal.closed .dgp-core { animation: none; opacity: .3; }
@keyframes dgpCore { 50% { opacity: .95; transform: scale(1.25); } }
@keyframes dgpGlow { 50% { opacity: .32; } }
/* açılış: portalın girdabı ekranı kaplar */
.dg-warp { position: fixed; inset: 0; z-index: 600; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff 0 2%, color-mix(in srgb, var(--pg) 70%, #fff) 6%, transparent 30%),
    repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--pg) 55%, #120e18) 0 12deg, #120e18 12deg 30deg), #120e18;
  animation: dgWarpSpin 1.4s linear infinite; }
@keyframes dgWarpSpin { to { background-position: 0 0, 0 0, 0 0; filter: hue-rotate(20deg); } }
/* zindan görünümü */
.dg-view { position: fixed; inset: 0; z-index: 450; display: flex; flex-direction: column; gap: 10px; padding: calc(var(--safe-t, 0px) + 12px) 12px calc(var(--safe-b, 0px) + 12px);
  background: radial-gradient(120% 80% at 50% 45%, color-mix(in srgb, var(--dc) 45%, #14110f), #0b0a0a 75%); animation: itcFade .4s ease both; }
.dg-view.out { animation: itcFade .4s ease reverse both; }
.dg-top { flex: none; display: flex; align-items: center; gap: 10px; }
.dg-t { flex: 1; display: grid; gap: 2px; min-width: 0; }
.dg-t b { font: 700 20px/1.05 var(--fs); color: #f6ecd2; letter-spacing: .02em; }
.dg-t small { font: 700 10.5px var(--fb); }
.dg-cnt { flex: none; padding: 6px 12px; border-radius: 14px; font: 600 12px var(--fn); color: #cfc8c2; background: #161311; box-shadow: inset 0 0 0 1px #3a332b; }
.dg-cnt b { font-size: 16px; color: var(--gold); }
.dg-arena { position: relative; flex: none; align-self: center; width: min(100%, calc(100dvh - 300px)); aspect-ratio: 1; border-radius: 50%; overflow: visible;
  background: radial-gradient(circle, color-mix(in srgb, var(--dc) 55%, #2a2622) 0 42%, color-mix(in srgb, var(--dc) 30%, #1a1714) 62%, #0e0c0b 72%, transparent 73%);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dg) 30%, #2a2622), 0 0 40px -10px var(--dg); }
.dg-ring { position: absolute; inset: 14%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--dg) 35%, transparent); pointer-events: none; animation: spin 40s linear infinite; }
.dg-ring.r2 { inset: 30%; border-style: solid; border-color: color-mix(in srgb, var(--dg) 20%, transparent); animation-duration: 60s; animation-direction: reverse; }
.dg-reach { position: absolute; inset: 25%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(231, 194, 106, .18), inset 0 0 30px rgba(231, 194, 106, .06); pointer-events: none; }
.dg-hero { position: absolute !important; left: 50%; top: 50%; width: 0; height: 0; z-index: 500; scale: 1.7; pointer-events: none; }
.dg-hero.hurt .wv-hero { animation: nzHurt .3s ease; }
.dg-whirl { position: absolute; left: 50%; top: 50%; width: 50%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0; z-index: 499;
  background: repeating-conic-gradient(from 0deg, rgba(243, 214, 142, .5) 0 10deg, transparent 10deg 40deg); -webkit-mask: radial-gradient(circle, transparent 30%, #000 45%, #000 68%, transparent 72%); mask: radial-gradient(circle, transparent 30%, #000 45%, #000 68%, transparent 72%); }
.dg-whirl.on { animation: dgWhirl .55s ease-out; }
@keyframes dgWhirl { 0% { opacity: .9; transform: scale(.5) rotate(0deg); } 100% { opacity: 0; transform: scale(1.05) rotate(220deg); } }
.dg-mob { position: absolute; left: 0; top: 0; width: 44px; height: 38px; margin: -34px 0 0 -22px; pointer-events: none; }
.dg-mob svg { width: 100%; height: 100%; overflow: visible; animation: dgBob .5s ease-in-out infinite alternate; }
.dg-mob.flip svg { scale: -1 1; }
.dgm-eye { fill: var(--dg); filter: drop-shadow(0 0 3px var(--dg)); }
.dgm-hp { position: absolute; left: 6px; right: 6px; top: -6px; height: 3px; border-radius: 2px; background: rgba(0, 0, 0, .7); overflow: hidden; }
.dgm-hp > i { display: block; height: 100%; background: #e5533f; }
.dg-mob.hit svg { animation: dgHit .25s ease; }
.dg-mob.dead { transition: opacity .5s, scale .5s; opacity: 0; scale: .5; }
@keyframes dgBob { to { transform: translateY(-2px); } }
@keyframes dgHit { 40% { filter: brightness(2.4) saturate(0); transform: scale(1.1); } }
.nz-dmg.crit { color: #ffb84a; font-size: 15px; } .nz-dmg.xp { color: #c4a8f0; font-size: 11px; }
.dg-hud { flex: none; display: grid; gap: 8px; margin-top: auto; padding: 8px 10px 9px; border-radius: 16px; background: linear-gradient(180deg, #221e1a, #16131a); box-shadow: 0 0 0 1.5px #0b0a0a, inset 0 0 0 1px #3a332b; }
.dg-skb { justify-content: space-between; }
.dg-sk { color: #f3d68e; box-shadow: inset 0 0 0 1.5px #c9a24e; }
.dg-sk.ready { box-shadow: inset 0 0 0 1.5px #f3d68e, 0 0 12px -2px rgba(231, 194, 106, .7); }
.dg-sk .sk-cd { background: conic-gradient(rgba(0, 0, 0, .55) calc(var(--p) * 1turn), transparent 0); }
.dg-auto { font-size: 13px; } .dg-auto.on { color: #8fe07f; box-shadow: inset 0 0 0 1.5px rgba(143, 224, 127, .6); }
.dg-auto .sk-n { right: auto; left: 0; right: 0; top: auto; bottom: 2px; text-align: center; font: 700 7px/1 var(--fn); color: inherit; }
/* sonuç kartı */
.dg-end { position: absolute; inset: 0; z-index: 900; display: grid; place-items: center; padding: 20px; background: rgba(8, 7, 6, .55); animation: itcFade .3s ease both; }
.dge { width: min(290px, 100%); display: grid; justify-items: center; gap: 6px; padding: 18px 14px 12px; border-radius: 18px; text-align: center;
  background: linear-gradient(180deg, #383126, #1d1a17); box-shadow: 0 0 0 2px #0b0a0a, inset 0 0 0 1px #564a33, 0 20px 40px -10px #000; animation: itcPop .35s var(--spring) both; }
.dge-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 20px; color: #1a1410; background: radial-gradient(circle at 38% 28%, #fff3cc, #f0d07c 40%, #c9a24e 80%); box-shadow: 0 0 0 2px #0b0a0a, 0 0 20px rgba(231, 194, 106, .6); }
.dg-end.lose .dge-ic { color: #fff; background: radial-gradient(circle at 38% 28%, #ff9a86, #c8402e 70%); box-shadow: 0 0 0 2px #0b0a0a, 0 0 20px rgba(229, 83, 63, .5); }
.dge > b { font: 700 20px/1 var(--fs); color: #f6ecd2; } .dge > small { font: 400 11.5px var(--fb); color: var(--muted); }
.dge-r { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; margin-top: 4px; }
.dge-r span { display: grid; gap: 2px; padding: 7px; border-radius: 10px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px #3a332b; }
.dge-r small { font: 600 9px var(--fb); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); } .dge-r b { font: 700 16px var(--fn); color: #f3d68e; }
.dge-l { display: grid; gap: 3px; width: 100%; } .dge-l span { font: 500 11.5px var(--fb); color: #cfc8c2; } .dge-l em { font-style: normal; font-weight: 700; color: #c4a8f0; }
.dge-n { font: 400 11px var(--fb); color: #f0a08c; }
.dg-arena { margin: auto 0; } .dg-hud { margin-top: 0; }