:root {
    --void: #0a0918;
    --abyss: #141031;
    --abyss-2: #1b1445;
    --panel: #17123a;
    --rift: #8b5cf6;
    --rift-glow: #b79bff;
    --pulse: #22d3ee;
    --ember: #f6b93b;
    --ember-bright: #ffd873;
    --blood: #f43f5e;
    --vital: #34d399;
    --mist: #9a93cf;
    --frost: #eceaff;
    --line: rgba(139, 92, 246, .20);
    --line-strong: rgba(139, 92, 246, .45);
    --display: 'Cinzel', Georgia, serif;
    --hud: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
}

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

/* Nur html bekommt die feste Höhe – body wächst mit dem Inhalt mit
   (min-height:100% s. u.). Hätte body ebenfalls height:100%, wäre die
   body-Box immer nur fensterhoch und die Hintergrund-Verläufe (die an
   ihr verankert sind, z. B. "at 10% 110%") würden auf langen Seiten
   mitten im Inhalt enden – sichtbare Kante beim Runterscrollen. */
html {
    height: 100%
}

body {
    font-family: var(--hud);
    background: var(--void);
    color: var(--frost);
    min-height: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Atmosphären-Verläufe als FIXIERTE Ebene hinter allem Inhalt.
   Warum nicht direkt als body-Hintergrund? Hat html keinen eigenen
   Hintergrund, übernimmt die Seiten-Leinwand den body-Hintergrund,
   richtet die Verläufe aber am html-Element aus – und das ist nur
   fensterhoch. Auf langen Seiten entsteht so beim Scrollen eine
   sichtbare Kante. Diese fixe Ebene füllt dagegen immer exakt den
   sichtbaren Bildschirm: oberer Glow am oberen, untere Glows am
   unteren Bildschirmrand – kantenfrei, egal wie lang die Seite wird. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 700px at 50% -10%, #241a52 0%, transparent 60%),
        radial-gradient(900px 600px at 10% 110%, #1a1140 0%, transparent 55%),
        radial-gradient(900px 600px at 90% 110%, #2a123f 0%, transparent 55%);
}

#game {
    max-width: 1180px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 14px clamp(10px, 2.4vw, 26px) 26px;
    gap: 14px;
}

/* ---------- TOP BAR ---------- */
.topbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .10), rgba(10, 9, 24, .4));
    position: relative;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: .14em;
    font-size: clamp(15px, 2.1vw, 22px);
}

.brand em {
    font-family: var(--hud);
    font-style: normal;
    font-weight: 500;
    letter-spacing: .32em;
    font-size: .5em;
    color: var(--mist);
    text-transform: uppercase;
    padding-top: 4px;
}

.brand-mark {
    color: var(--rift-glow);
    font-size: 1.1em;
    filter: drop-shadow(0 0 8px var(--rift));
    animation: spin 9s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.stage-readout {
    text-align: center;
    line-height: 1
}

.stage-num {
    font-family: var(--display);
    font-weight: 800;
    font-size: clamp(16px, 2.6vw, 24px);
    letter-spacing: .16em;
    color: var(--frost);
}

.stage-num b {
    color: var(--pulse);
    text-shadow: 0 0 14px rgba(34, 211, 238, .55)
}

.stage-sub {
    margin-top: 5px;
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mist);
}

.stage-sub.boss {
    color: var(--blood);
    font-weight: 700;
    text-shadow: 0 0 10px rgba(244, 63, 94, .5)
}

/* Gold + Essenz oben rechts als vertikaler Stapel (untereinander) */
.currency-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    flex: none;
}

.gold {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 700;
    font-size: clamp(14px, 1.9vw, 17px);
    padding: 5px 13px;
    border-radius: 10px;
    border: 1px solid rgba(246, 185, 59, .35);
    background: rgba(246, 185, 59, .08);
    color: var(--ember-bright);
    white-space: nowrap;
}

.gold .coin {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--ember) 65%, #b47f19);
    box-shadow: 0 0 12px rgba(246, 185, 59, .5);
    display: inline-block;
    flex: none;
}

.essence {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: clamp(14px, 1.9vw, 17px);
    padding: 5px 13px;
    border-radius: 10px;
    border: 1px solid rgba(139, 92, 246, .40);
    background: rgba(139, 92, 246, .10);
    color: var(--rift-glow);
    white-space: nowrap;
}

.ess-gem {
    font-size: 15px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, .6));
    flex: none;
}

.topbar-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    min-width: 0;
}

.reset-btn {
    background: none;
    border: 1px solid var(--line);
    color: var(--mist);
    font-family: var(--hud);
    font-size: 11px;
    letter-spacing: .14em;
    padding: 6px 12px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    white-space: nowrap;
    flex: none;
}

.reset-btn:hover {
    color: var(--frost);
    border-color: var(--line-strong)
}

/* ---------- ARENA ---------- */
.arena {
    position: relative;
    flex: 1;
    min-height: 300px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: clamp(8px, 2vw, 30px);
    padding: clamp(16px, 3vw, 34px) clamp(12px, 2.4vw, 30px);
    border: 1px solid var(--line);
    border-radius: 20px;
    background:
        radial-gradient(600px 300px at 50% 50%, rgba(139, 92, 246, .10), transparent 70%),
        linear-gradient(180deg, rgba(20, 16, 49, .7), rgba(10, 9, 24, .75));
    overflow: hidden;
}

.arena-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .5
}

.arena-bg::before,
.arena-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.arena-bg::before {
    width: 280px;
    height: 280px;
    left: -60px;
    bottom: -60px;
    background: rgba(34, 211, 238, .16)
}

.arena-bg::after {
    width: 320px;
    height: 320px;
    right: -80px;
    top: -80px;
    background: rgba(244, 63, 94, .12)
}

.fighter {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.sprite-wrap {
    width: clamp(120px, 18vw, 190px);
    height: clamp(120px, 18vw, 190px);
    display: grid;
    place-items: center;
    position: relative;
}

.sprite-wrap::after {
    content: "";
    position: absolute;
    inset: auto 0 -6px 0;
    height: 16px;
    margin: 0 14%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent);
}

.sprite {
    font-size: clamp(78px, 12vw, 130px);
    line-height: 1;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5));
    animation: bob 3.2s ease-in-out infinite;
    transition: transform .14s cubic-bezier(.3, 1.6, .5, 1);
    user-select: none;
}

.champion .sprite {
    animation-delay: -1.1s
}

@keyframes bob {

    0%,
    100% {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-9px)
    }
}

.champion .sprite.attacking {
    transform: translateX(26px) rotate(4deg) scale(1.05)
}

.monster .sprite.attacking {
    transform: translateX(-26px) rotate(-4deg) scale(1.05)
}

.sprite.hurt {
    animation: hurt .28s linear
}

@keyframes hurt {

    0%,
    100% {
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5))
    }

    30% {
        filter: drop-shadow(0 0 12px var(--blood)) brightness(1.5)
    }
}

.sprite.dead {
    filter: grayscale(1) brightness(.5);
    opacity: .35;
    transform: rotate(-14deg) translateY(6px)
}

.sprite-img {
    width: clamp(90px, 14vw, 150px);
    height: clamp(90px, 14vw, 150px);
    object-fit: contain;
    display: block;
    pointer-events: none;
}

.nameplate {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: .05em;
    font-size: clamp(14px, 1.9vw, 19px);
    text-align: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nameplate .stars {
    color: var(--ember);
    font-size: .7em;
    letter-spacing: .1em
}

.nameplate .lvl {
    font-family: var(--hud);
    font-weight: 600;
    font-size: .72em;
    color: var(--mist);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 7px;
    letter-spacing: .06em;
}

.nameplate .lvl b {
    color: var(--pulse)
}

.monster .nameplate {
    color: #ffd1d9
}

.hpbar {
    position: relative;
    width: clamp(150px, 20vw, 220px);
    height: 22px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: rgba(0, 0, 0, .45);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6);
}

.hpfill {
    height: 100%;
    width: 100%;
    transition: width .18s ease-out;
    border-radius: 7px 0 0 7px
}

.champ-hp .hpfill {
    background: linear-gradient(180deg, #54f0ad, var(--vital) 60%, #159c68)
}

.mon-hp .hpfill {
    background: linear-gradient(180deg, #ff738a, var(--blood) 60%, #b31a35)
}

.hptext {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .03em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.xpbar {
    width: clamp(150px, 20vw, 220px);
    height: 5px;
    border-radius: 4px;
    overflow: hidden;
    background: rgba(255, 255, 255, .07);
    margin-top: -4px;
}

.xpfill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--rift), var(--pulse));
    transition: width .2s ease
}

/* ---------- KAMPF-TIMER ---------- */
.fight-timer {
    position: relative;
    width: clamp(150px, 20vw, 220px);
    height: 16px;
    margin-top: -4px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(0, 0, 0, .42);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6);
}

.fight-timer[hidden] {
    display: none
}

.fight-timer-fill {
    height: 100%;
    width: 100%;
    border-radius: 5px 0 0 5px;
    background: linear-gradient(90deg, var(--pulse), var(--rift-glow));
    transition: width .12s linear, background .3s ease;
}

.fight-timer.low .fight-timer-fill {
    background: linear-gradient(90deg, var(--ember), var(--ember-bright))
}

.fight-timer.crit .fight-timer-fill {
    background: linear-gradient(90deg, var(--blood), #ff738a)
}

.fight-timer.crit {
    animation: timerpulse .7s ease-in-out infinite
}

@keyframes timerpulse {

    0%,
    100% {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6)
    }

    50% {
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 0 12px rgba(244, 63, 94, .6)
    }
}

.fight-timer-text {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--frost);
    text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.mon-tag {
    min-height: 16px;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase
}

.mon-tag.boss {
    color: var(--blood);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(244, 63, 94, .6)
}

/* ---------- THE RIFT (signature) ---------- */
.rift {
    position: relative;
    z-index: 1;
    width: clamp(58px, 7vw, 96px);
    height: clamp(190px, 34vh, 300px);
    display: grid;
    place-items: center;
    align-self: center;
}

.rift-core {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side, rgba(236, 233, 255, .9), rgba(139, 92, 246, .55) 30%, transparent 72%),
        conic-gradient(from 0deg, var(--rift), var(--pulse), var(--blood), var(--rift));
    clip-path: polygon(50% 0, 64% 22%, 58% 50%, 66% 78%, 50% 100%, 34% 78%, 42% 50%, 36% 22%);
    filter: blur(.5px) saturate(1.2);
    opacity: .9;
    animation: riftpulse 3.6s ease-in-out infinite, riftspin 14s linear infinite;
    box-shadow: 0 0 40px rgba(139, 92, 246, .5), 0 0 90px rgba(34, 211, 238, .25);
}

@keyframes riftpulse {

    0%,
    100% {
        transform: scaleY(1) scaleX(1)
    }

    50% {
        transform: scaleY(1.06) scaleX(.92)
    }
}

@keyframes riftspin {
    to {
        filter: blur(.5px) saturate(1.2) hue-rotate(360deg)
    }
}

.rift.hit .rift-core {
    animation: riftpulse 3.6s ease-in-out infinite, riftspin 14s linear infinite, flash .18s ease
}

.rift.crit .rift-core {
    animation: riftpulse 3.6s ease-in-out infinite, riftspin 14s linear infinite, flashcrit .3s ease
}

.rift.hurt .rift-core {
    animation: riftpulse 3.6s ease-in-out infinite, riftspin 14s linear infinite, flashhurt .3s ease
}

.rift.kill .rift-core {
    animation: riftpulse 3.6s ease-in-out infinite, riftspin 14s linear infinite, flashkill .5s ease
}

@keyframes flash {
    50% {
        filter: brightness(1.7)
    }
}

@keyframes flashcrit {
    40% {
        transform: scale(1.35);
        box-shadow: 0 0 70px var(--pulse)
    }
}

@keyframes flashhurt {
    40% {
        box-shadow: 0 0 60px var(--blood);
        filter: brightness(1.5) hue-rotate(-40deg)
    }
}

@keyframes flashkill {
    30% {
        transform: scale(1.5);
        box-shadow: 0 0 100px var(--ember)
    }
}

.clash {
    position: absolute;
    inset: -40px -80px;
    pointer-events: none;
    overflow: visible
}

.dmg {
    position: absolute;
    left: 50%;
    top: 44%;
    transform: translateX(-50%);
    font-family: var(--hud);
    font-weight: 700;
    white-space: nowrap;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .9);
    animation: floatUp 1s ease-out forwards;
}

.dmg.hit {
    color: #fff;
    font-size: 19px
}

.dmg.crit {
    color: var(--pulse);
    font-size: 27px;
    text-shadow: 0 0 12px rgba(34, 211, 238, .8)
}

.dmg.hurt {
    color: var(--blood);
    font-size: 18px;
    top: 56%
}

.dmg.gold {
    color: var(--ember-bright);
    font-size: 18px;
    top: 30%
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translate(-50%, 8px) scale(.55) rotate(var(--tilt, 0deg))
    }

    16% {
        opacity: 1;
        transform: translate(calc(-50% + var(--drift, 0px)*.3), -8px) scale(1.12) rotate(var(--tilt, 0deg))
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--drift, 0px)), -74px) scale(.92) rotate(var(--tilt, 0deg))
    }
}

.death-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
    place-items: center;
    text-align: center;
    background: rgba(8, 6, 20, .72);
    backdrop-filter: blur(3px);
    padding: 16px;
    overflow-y: auto;
}

.death-modal.show {
    display: grid;
    animation: fadein .22s ease
}

@keyframes fadein {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.death-card {
    width: min(440px, 94%);
    border: 1px solid rgba(244, 63, 94, .35);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(244, 63, 94, .10), rgba(10, 9, 24, .85));
    box-shadow: 0 20px 60px rgba(0, 0, 0, .55), 0 0 40px rgba(244, 63, 94, .15);
    padding: 24px 22px 20px;
}

.death-title {
    font-family: var(--display);
    font-weight: 800;
    letter-spacing: .10em;
    font-size: clamp(19px, 3vw, 26px);
    color: #ffd1d9;
    text-shadow: 0 0 18px rgba(244, 63, 94, .4);
}

.death-sub {
    margin-top: 7px;
    font-size: 12.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mist);
}

.death-opts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px
}

.death-opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
    font-family: var(--hud);
    text-align: left;
    color: var(--frost);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .10), rgba(10, 9, 24, .3));
    padding: 13px 16px;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.death-opt:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: 0 6px 18px rgba(139, 92, 246, .2)
}

.death-opt:focus-visible {
    outline: 2px solid var(--pulse);
    outline-offset: 2px
}

/* Zerstörerische Aktion (kompletter Reset) rot hervorheben */
.death-opt.danger {
    border-color: rgba(244, 63, 94, .40);
    background: linear-gradient(180deg, rgba(244, 63, 94, .10), rgba(10, 9, 24, .3))
}

.death-opt.danger:hover {
    border-color: var(--blood);
    box-shadow: 0 6px 18px rgba(244, 63, 94, .22)
}

.death-opt.danger .death-opt-k {
    color: #ffd1d9
}

.death-opt.danger .death-opt-v {
    color: var(--blood)
}

.death-opt-k {
    font-weight: 600;
    font-size: 14.5px;
    letter-spacing: .02em
}

.death-opt-d {
    display: block;
    font-size: 11.5px;
    color: var(--mist);
    letter-spacing: .02em;
    margin-top: 2px
}

.death-opt-v {
    font-size: 13px;
    color: var(--mist);
    white-space: nowrap;
    flex: none
}

.death-opt-v b {
    color: var(--pulse);
    font-size: 17px;
    font-weight: 700
}

/* ---------- LOWER: STATS + SHOP ---------- */
.lower {
    display: grid;
    grid-template-columns: minmax(230px, 300px) 1fr;
    gap: 14px;
}

.card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .06), rgba(10, 9, 24, .35));
    padding: 16px 18px;
}

.card h2 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--frost);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 9px;
}

.card h2::before {
    content: "";
    width: 22px;
    height: 1px;
    background: var(--line-strong)
}

/* ---------- SHOP-TABS (Verbesserungen / Shop) ---------- */
.shop-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.shop-tab {
    flex: 1;
    padding: 9px 12px;
    cursor: pointer;
    font-family: var(--display);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--mist);
    background: linear-gradient(180deg, rgba(139, 92, 246, .05), rgba(10, 9, 24, .2));
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: .15s;
}

.shop-tab:hover {
    color: var(--frost);
    border-color: var(--line-strong)
}

.shop-tab.active {
    color: var(--frost);
    border-color: var(--line-strong);
    background: linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(34, 211, 238, .05));
}

/* ---------- KAUFMENGE (×1 / ×10) ---------- */
.buy-amount {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -4px 0 14px;
}

.buy-amount[hidden] {
    display: none
}

.buy-amount-label {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mist);
    margin-right: 2px;
}

.buy-amt {
    cursor: pointer;
    font-family: var(--hud);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .06em;
    color: var(--mist);
    padding: 6px 14px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .05), rgba(10, 9, 24, .2));
    transition: .15s;
}

.buy-amt:hover {
    color: var(--frost);
    border-color: var(--line-strong)
}

.buy-amt.active {
    color: var(--frost);
    border-color: var(--line-strong);
    background: linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(34, 211, 238, .05));
}

.buy-amt:focus-visible {
    outline: 2px solid var(--pulse);
    outline-offset: 2px
}

/* Anzeige "×10" hinter dem Gesamtpreis eines Mehrfachkaufs */
.upg-bulk {
    font-size: 11px;
    font-weight: 600;
    color: var(--mist);
}

.upg-cost.ess {
    color: var(--rift-glow)
}

.upg-cost.ess .ess-gem {
    font-size: 13px
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px dashed var(--line);
    font-size: 14px;
}

.stat-row:last-of-type {
    border-bottom: none
}

.stat-row .k {
    color: var(--mist);
    letter-spacing: .03em
}

.stat-row .v {
    font-weight: 700;
    font-size: 15px
}

.v.dmg-c {
    color: #ff9b6b
}

.v.def-c {
    color: #7fb6ff
}

.v.crit-c {
    color: var(--pulse)
}

.v.critd-c {
    color: var(--rift-glow)
}

.v.spd-c {
    color: #7ef0c6
}

.v.hp-c {
    color: var(--vital)
}

.v.best-c {
    color: var(--ember-bright)
}

.v.ess-c {
    color: var(--rift-glow)
}

.hold-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    cursor: pointer;
    font-size: 13px;
    color: var(--mist);
    user-select: none;
    padding: 9px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    transition: .15s;
}

.hold-toggle:hover {
    border-color: var(--line-strong);
    color: var(--frost)
}

.hold-toggle input {
    accent-color: var(--rift);
    width: 16px;
    height: 16px
}

.hold-toggle.active {
    background: rgba(139, 92, 246, .12);
    color: var(--frost);
    border-color: var(--line-strong)
}

.hold-toggle.disabled {
    opacity: .5;
    cursor: not-allowed;
    background: rgba(244, 63, 94, .05);
    border-color: rgba(244, 63, 94, .2)
}

.hold-toggle.disabled input {
    cursor: not-allowed
}

/* ---------- PRESTIGE-BUTTON ---------- */
.prestige-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 10px;
    padding: 11px 13px;
    cursor: pointer;
    font-family: var(--hud);
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--frost);
    border: 1px solid rgba(139, 92, 246, .45);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .18), rgba(34, 211, 238, .06));
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.prestige-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--rift-glow);
    box-shadow: 0 6px 20px rgba(139, 92, 246, .28)
}

.prestige-btn:active:not(:disabled) {
    transform: translateY(0)
}

.prestige-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(139, 92, 246, .06), rgba(10, 9, 24, .3))
}

.prestige-btn:focus-visible {
    outline: 2px solid var(--pulse);
    outline-offset: 2px
}

.prestige-ico {
    font-size: 17px;
    line-height: 1;
    color: var(--rift-glow);
    filter: drop-shadow(0 0 6px rgba(139, 92, 246, .6))
}

.prestige-txt {
    font-size: 14px
}

.prestige-gain {
    margin-left: auto;
    font-size: 13px;
    color: var(--rift-glow);
    white-space: nowrap
}

.prestige-btn:disabled .prestige-gain {
    color: var(--mist)
}

/* Violetter Akzent für Prestige-/Offline-Dialog (statt rotem Todes-Look) */
.prestige-card {
    border-color: rgba(139, 92, 246, .40);
    background: linear-gradient(180deg, rgba(139, 92, 246, .12), rgba(10, 9, 24, .85))
}

.prestige-card .death-title {
    color: var(--frost);
    text-shadow: 0 0 18px rgba(139, 92, 246, .45)
}

.death-opt.prestige {
    border-color: rgba(139, 92, 246, .40);
    background: linear-gradient(180deg, rgba(139, 92, 246, .14), rgba(10, 9, 24, .3))
}

.death-opt.prestige:hover {
    border-color: var(--rift-glow);
    box-shadow: 0 6px 18px rgba(139, 92, 246, .22)
}

.death-opt.prestige .death-opt-v {
    color: var(--rift-glow)
}

.upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 11px;
}

/* Nur der aktive Tab-Inhalt ist sichtbar (hidden muss display:grid schlagen) */
.upgrade-grid[hidden] {
    display: none;
}

.upg {
    text-align: left;
    cursor: pointer;
    color: var(--frost);
    border: 1px solid var(--line);
    border-radius: 13px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .08), rgba(10, 9, 24, .3));
    padding: 13px 13px 11px;
    font-family: var(--hud);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.upg:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: 0 6px 18px rgba(139, 92, 246, .18)
}

.upg:active:not(:disabled) {
    transform: translateY(0)
}

.upg:disabled {
    opacity: .45;
    cursor: not-allowed
}

.upg:focus-visible {
    outline: 2px solid var(--pulse);
    outline-offset: 2px
}

.upg-top {
    display: flex;
    align-items: center;
    gap: 9px
}

.upg-ico {
    font-size: 20px;
    line-height: 1;
    flex: none
}

.upg-name {
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em
}

.upg-lvl {
    margin-left: auto;
    font-size: 11px;
    color: var(--mist);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 1px 7px
}

.upg-eff {
    font-size: 12.5px;
    color: var(--mist)
}

.upg-eff b {
    color: var(--frost);
    font-weight: 600
}

.upg-cost {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px;
    font-weight: 700;
    font-size: 14px;
    color: var(--ember-bright);
}

.upg-cost .coin {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--ember) 65%, #b47f19);
    flex: none
}

.upg.maxed .upg-cost {
    color: var(--mist)
}

.upg.affordable {
    border-color: rgba(246, 185, 59, .35)
}

.upg.affordable .upg-name {
    color: var(--ember-bright)
}

.hint {
    font-size: 11.5px;
    color: var(--mist);
    margin-top: 12px;
    line-height: 1.5;
    letter-spacing: .02em
}

@media (max-width:820px) {
    .lower {
        grid-template-columns: 1fr
    }

    .topbar {
        grid-template-columns: auto 1fr auto;
        gap: 10px
    }

    .brand em {
        display: none
    }

    .topbar {
        padding-top: 10px
    }
}

@media (max-width:480px) {
    .arena {
        gap: 2px;
        padding: 14px 6px
    }

    .rift {
        width: 44px
    }

    .hpbar,
    .xpbar,
    .fight-timer {
        width: min(40vw, 150px)
    }

    .topbar-right {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .reset-btn {
        font-size: 10px;
        letter-spacing: .08em;
        padding: 5px 9px
    }

    .essence,
    .gold {
        padding: 6px 10px;
        font-size: 14px
    }

    .shop-tab {
        font-size: 12px;
        letter-spacing: .08em;
        padding: 8px 8px
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important
    }

    .sprite,
    .hpfill,
    .upg {
        transition: none !important
    }
}

/* ============================================================
   KAMPF-EFFEKTE (Slashes, Partikel, Schockwellen, Beben …)
   ============================================================ */

/* --- Arena-Beben bei harten Treffern / Krits / Boss-Kills --- */
.arena.shake {
    animation: ashake .26s linear
}

.arena.shake-big {
    animation: ashakebig .45s linear
}

@keyframes ashake {

    0%,
    100% {
        transform: translate(0, 0)
    }

    25% {
        transform: translate(-4px, 2px)
    }

    50% {
        transform: translate(4px, -2px)
    }

    75% {
        transform: translate(-2px, 1px)
    }
}

@keyframes ashakebig {

    0%,
    100% {
        transform: translate(0, 0)
    }

    15% {
        transform: translate(-8px, 4px) rotate(-.3deg)
    }

    35% {
        transform: translate(7px, -4px) rotate(.3deg)
    }

    55% {
        transform: translate(-5px, 2px)
    }

    75% {
        transform: translate(3px, -1px)
    }
}

/* --- Schlag-Streifen über dem getroffenen Sprite --- */
.fx-slash {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 112%;
    height: 112%;
    transform: translate(-50%, -50%) rotate(var(--rot, -22deg));
    pointer-events: none;
    z-index: 3;
}

.fx-slash::before {
    content: "";
    position: absolute;
    left: -8%;
    top: 50%;
    width: 116%;
    height: 3px;
    border-radius: 3px;
    transform-origin: left center;
    background: linear-gradient(90deg, transparent, #fff 45%, transparent);
    box-shadow: 0 0 14px var(--pulse), 0 0 4px #fff;
    animation: slashsweep .22s ease-out forwards;
}

.fx-slash.crit::before {
    height: 5px;
    background: linear-gradient(90deg, transparent, var(--pulse) 30%, #fff 50%, var(--pulse) 70%, transparent);
    box-shadow: 0 0 22px var(--pulse), 0 0 6px #fff;
}

.fx-slash.hurt::before {
    background: linear-gradient(90deg, transparent, #ff9aae 45%, transparent);
    box-shadow: 0 0 14px var(--blood);
}

@keyframes slashsweep {
    0% {
        transform: scaleX(0);
        opacity: 0
    }

    25% {
        opacity: 1
    }

    100% {
        transform: scaleX(1);
        opacity: 0
    }
}

/* --- Funken / Splitter / Münzen (kleine, kurzlebige Partikel) --- */
.fx-p {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    background: #fff;
    box-shadow: 0 0 8px var(--pulse);
    animation: pfly .55s ease-out forwards;
}

.fx-p.crit {
    width: 8px;
    height: 8px;
    background: var(--pulse);
    box-shadow: 0 0 12px var(--pulse);
}

.fx-p.hurt {
    background: #ff8fa3;
    box-shadow: 0 0 10px var(--blood);
}

.fx-p.kill {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    transform: translate(-50%, -50%) rotate(45deg);
    background: var(--rift-glow);
    box-shadow: 0 0 12px var(--rift);
    animation: pshard .6s ease-out forwards;
}

.fx-p.gold {
    width: 9px;
    height: 9px;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--ember) 65%, #b47f19);
    box-shadow: 0 0 10px rgba(246, 185, 59, .7);
    animation: pcoin .7s cubic-bezier(.2, .7, .4, 1) forwards;
}

@keyframes pfly {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1
    }

    to {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(.25);
        opacity: 0
    }
}

@keyframes pshard {
    from {
        transform: translate(-50%, -50%) rotate(45deg) scale(1);
        opacity: 1
    }

    to {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) rotate(240deg) scale(.35);
        opacity: 0
    }
}

@keyframes pcoin {
    0% {
        transform: translate(-50%, -50%) scale(.6);
        opacity: 0
    }

    18% {
        opacity: 1;
        transform: translate(calc(-50% + var(--dx, 0px)*.4), calc(-50% + var(--dy, 0px)));
    }

    100% {
        transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px)*.15)) scale(.8);
        opacity: 0
    }
}

/* --- Schockwellen-Ring bei Krit & Kill --- */
.fx-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 130px;
    height: 130px;
    border: 3px solid var(--pulse);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(.12);
    pointer-events: none;
    z-index: 3;
    animation: ringout .4s ease-out forwards;
}

.fx-ring.kill {
    border-color: var(--ember-bright);
    animation-duration: .5s;
}

@keyframes ringout {
    0% {
        transform: translate(-50%, -50%) scale(.12);
        opacity: 1
    }

    100% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 0;
        border-width: 1px
    }
}

/* --- Zurückzucken beim Getroffen-Werden (ersetzt reines Aufblitzen) --- */
.champion .sprite {
    --kb: -11px
}

.monster .sprite {
    --kb: 12px
}

@keyframes hurt {

    0%,
    100% {
        transform: translateX(0);
        filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5))
    }

    30% {
        transform: translateX(var(--kb, -10px));
        filter: drop-shadow(0 0 14px var(--blood)) brightness(1.6)
    }

    62% {
        transform: translateX(calc(var(--kb, -10px) * -.35))
    }
}

/* --- Monster materialisiert aus dem Rift --- */
.monster .sprite-wrap.spawn {
    animation: spawnin .42s cubic-bezier(.22, 1.45, .42, 1)
}

@keyframes spawnin {
    0% {
        transform: translateX(-48px) scale(.15);
        opacity: 0;
        filter: brightness(2.6) saturate(2) hue-rotate(40deg)
    }

    55% {
        opacity: 1
    }

    100% {
        transform: none;
        opacity: 1;
        filter: none
    }
}

/* --- Boss-Aura: pulsierender Bedrohungs-Schein hinter dem Sprite --- */
.monster .sprite-wrap.boss-aura::before {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(244, 63, 94, .38), rgba(244, 63, 94, .10) 55%, transparent 72%);
    animation: bossaura 1.7s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes bossaura {

    0%,
    100% {
        transform: scale(.92);
        opacity: .75
    }

    50% {
        transform: scale(1.1);
        opacity: 1
    }
}

/* --- Warnung bei niedrigem Champion-Leben (≤ 25 %) --- */
.champ-hp.low {
    border-color: rgba(244, 63, 94, .55);
    animation: hplow .9s ease-in-out infinite;
}

.champ-hp.low .hpfill {
    background: linear-gradient(180deg, #ff9d5c, #f6743b 60%, #c2481a)
}

@keyframes hplow {

    0%,
    100% {
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6)
    }

    50% {
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6), 0 0 16px rgba(244, 63, 94, .6)
    }
}

/* ============================================================
   LEADERBOARD-FENSTER
   ============================================================ */
.lb-card {
    width: min(680px, 96%);
    padding: 22px 22px 16px;
}

.lb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.lb-close {
    flex: none;
    width: 32px;
    height: 32px;
    cursor: pointer;
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--mist);
    font-size: 15px;
    font-family: var(--hud);
    line-height: 1;
}

.lb-close:hover {
    color: var(--frost);
    border-color: var(--line-strong);
}

.lb-filter {
    width: 100%;
    padding: 10px 13px;
    margin-bottom: 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(10, 9, 24, .5);
    color: var(--frost);
    font-family: var(--hud);
    font-size: 14px;
    letter-spacing: .03em;
    outline: none;
}

.lb-filter:focus {
    border-color: var(--line-strong);
}

.lb-table-wrap {
    max-height: min(56vh, 460px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.lb-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--abyss-2);
    color: var(--mist);
    font-family: var(--hud);
    font-weight: 600;
    letter-spacing: .04em;
    padding: 11px 12px;
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
}

.lb-rank-h {
    text-align: center;
    width: 46px;
}

.lb-name-h {
    text-align: left;
}

.lb-table th.lb-sort {
    text-align: right;
    cursor: pointer;
    user-select: none;
    transition: color .12s;
}

.lb-table th.lb-sort:hover {
    color: var(--frost);
}

.lb-arrow {
    display: inline-block;
    min-width: 10px;
    color: var(--pulse);
    font-size: 11px;
}

.lb-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
}

.lb-table tbody tr:last-child td {
    border-bottom: none;
}

.lb-rank {
    text-align: center;
    color: var(--mist);
}

.lb-name {
    color: var(--frost);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lb-num {
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lb-table tbody tr.lb-me {
    background: rgba(139, 92, 246, .16);
}

.lb-table tbody tr.lb-me .lb-name {
    color: var(--rift-glow);
    font-weight: 700;
}

.lb-empty {
    text-align: center;
    color: var(--mist);
    padding: 22px 12px;
}

.lb-foot {
    margin-top: 10px;
    font-size: 11.5px;
    color: var(--mist);
    letter-spacing: .04em;
    text-align: right;
    min-height: 14px;
}

/* ============================================================
   AKTIVE FÄHIGKEITEN — Skill-Leiste unter dem Champion
   ============================================================ */
.skillbar {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px;
    position: relative;
    z-index: 5;
}

.skill {
    position: relative;
    min-width: 96px;
    padding: 8px 12px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--frost);
    font-family: var(--hud);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(139, 92, 246, .10), rgba(10, 9, 24, .35));
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease, opacity .12s ease;
}

.skill:hover:not(.locked):not(.oncd):not(.active) {
    transform: translateY(-2px);
    border-color: var(--line-strong);
    box-shadow: 0 6px 18px rgba(139, 92, 246, .18);
}

.skill:focus-visible {
    outline: 2px solid var(--pulse);
    outline-offset: 2px;
}

/* Gesperrt (Freischalt-Stage noch nicht erreicht): ausgegraut.
   Kein disabled-Attribut, damit der Tooltip (title) sicher erscheint. */
.skill.locked {
    opacity: .45;
    filter: grayscale(.85);
    cursor: not-allowed;
}

/* Auf Abklingzeit: gedimmt, Countdown läuft im Untertitel */
.skill.oncd {
    opacity: .55;
    cursor: not-allowed;
}

/* Aktiv: glüht in Ember-Orange und pulsiert */
.skill.active {
    cursor: default;
    border-color: var(--ember);
    background: linear-gradient(180deg, rgba(246, 185, 59, .16), rgba(10, 9, 24, .35));
    animation: skillpulse 1s ease-in-out infinite;
}

@keyframes skillpulse {

    0%,
    100% {
        box-shadow: 0 0 8px rgba(246, 185, 59, .30);
    }

    50% {
        box-shadow: 0 0 20px rgba(246, 185, 59, .60);
    }
}

.skill-ico {
    font-size: 20px;
    line-height: 1;
}

.skill-name {
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .03em;
}

.skill-sub {
    font-size: 10.5px;
    color: var(--mist);
    white-space: nowrap;
}

.skill.active .skill-sub {
    color: var(--ember-bright);
    font-weight: 700;
}

/* --- Feuer-Aura am Champion, solange ein Schaden-Skill aktiv ist ---
   (gleiches Muster wie die Boss-Aura des Monsters, nur in Ember-Orange) */
.champion .sprite-wrap.rage-aura::before {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(246, 185, 59, .38), rgba(246, 116, 59, .12) 55%, transparent 72%);
    animation: rageaura .9s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes rageaura {

    0%,
    100% {
        transform: scale(.92);
        opacity: .75;
    }

    50% {
        transform: scale(1.08);
        opacity: 1;
    }
}
/* ============================================================
   ASZENSION (zweite Prestige-Ebene, ascension.js)
   Ember-Gold als Akzent, damit sie sich klar vom violetten
   Prestige unterscheidet.
   ============================================================ */

/* Kern-Anzeige in der Topbar (Aufbau wie .essence) */
.cores {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: clamp(14px, 1.9vw, 17px);
    padding: 5px 13px;
    border-radius: 10px;
    border: 1px solid rgba(246, 185, 59, .40);
    background: rgba(246, 185, 59, .10);
    color: var(--ember);
    white-space: nowrap;
}

.cores[hidden] {
    display: none;
}

.core-gem {
    font-size: 15px;
    line-height: 1;
    filter: drop-shadow(0 0 6px rgba(246, 185, 59, .6));
    flex: none;
}

/* Aszension-Button unter dem Prestige-Button */
.ascend-btn {
    border-color: rgba(246, 185, 59, .45);
    background: linear-gradient(180deg, rgba(246, 185, 59, .16), rgba(246, 116, 59, .05));
}

.ascend-btn .prestige-ico {
    color: var(--ember);
    filter: drop-shadow(0 0 6px rgba(246, 185, 59, .6));
}

.ascend-btn .prestige-gain {
    color: var(--ember);
}

.ascend-btn:hover:not(:disabled) {
    border-color: var(--ember);
    box-shadow: 0 6px 20px rgba(246, 185, 59, .28);
}

.ascend-btn:disabled {
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(246, 185, 59, .06), rgba(10, 9, 24, .3));
}

/* Aszension-Bestätigungsdialog (Ember-Variante der Prestige-Karte) */
.asc-card {
    border-color: rgba(246, 185, 59, .40);
    background: linear-gradient(180deg, rgba(246, 185, 59, .12), rgba(10, 9, 24, .85));
}

.asc-card .death-title {
    text-shadow: 0 0 18px rgba(246, 185, 59, .45);
}

.death-opt.ascend {
    border-color: rgba(246, 185, 59, .40);
    background: linear-gradient(180deg, rgba(246, 185, 59, .14), rgba(10, 9, 24, .3));
}

.death-opt.ascend:hover {
    border-color: var(--ember);
    box-shadow: 0 6px 18px rgba(246, 185, 59, .22);
}

/* Kern-Preis im Aszension-Shop */
.upg-cost.core {
    color: var(--ember);
}

.upg-cost.core .core-gem {
    font-size: 13px;
}

/* Schmale Bildschirme: Kern-Anzeige wie Gold/Essenz verkleinern */
@media (max-width: 760px) {
    .cores {
        padding: 6px 10px;
        font-size: 14px;
    }
}

/* ============================================================
   RIFT-DUNGEON (dungeon.js + items.js)
   Cyan als Akzent – dritte Farbwelt neben Prestige (violett)
   und Aszension (ember-gold).
   ============================================================ */

.dungeon-btn {
    border-color: rgba(34, 211, 238, .40);
    background: linear-gradient(180deg, rgba(34, 211, 238, .14), rgba(10, 9, 24, .3));
}

.dungeon-btn .prestige-ico {
    color: #22d3ee;
    filter: drop-shadow(0 0 6px rgba(34, 211, 238, .6));
}

.dungeon-btn .prestige-gain {
    color: #22d3ee;
}

.dungeon-btn:hover:not(:disabled) {
    border-color: #22d3ee;
    box-shadow: 0 6px 20px rgba(34, 211, 238, .28);
}

.dungeon-btn:disabled {
    border-color: var(--line);
    background: linear-gradient(180deg, rgba(34, 211, 238, .05), rgba(10, 9, 24, .3));
}

/* Dungeon-Karte (Overlay) */
.dgn-card {
    width: min(560px, 94vw);
    border-color: rgba(34, 211, 238, .35);
    background: linear-gradient(180deg, rgba(34, 211, 238, .10), rgba(10, 9, 24, .88));
}

.dgn-card .death-title {
    color: var(--frost);
    text-shadow: 0 0 18px rgba(34, 211, 238, .45);
}

/* Boss-Vorschau (Lobby) + Kampf-Kopf */
.dgn-boss-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 10px 0;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(10, 9, 24, .4);
}

.dgn-boss-sprite {
    font-size: 44px;
    line-height: 1;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.dgn-boss-sprite .sprite-img {
    max-width: 64px;
    max-height: 64px;
    object-fit: contain;
}

.dgn-boss-sprite.hurt {
    animation: dgnHurt .18s ease;
}

@keyframes dgnHurt {
    30% { transform: translateX(-4px) scale(.97); filter: brightness(1.6); }
}

.dgn-boss-meta {
    flex: 1;
    min-width: 0;
}

.dgn-boss-name {
    font-family: var(--display);
    font-size: 15px;
    letter-spacing: .06em;
    color: var(--frost);
    margin-bottom: 4px;
}

.dgn-boss-stats {
    font-size: 12.5px;
    color: var(--mist);
    letter-spacing: .03em;
}

/* Lebensbalken im Dungeon etwas höher */
.dgn-bar {
    height: 20px;
}

.dgn-vs {
    text-align: center;
    font-size: 17px;
    margin: 4px 0;
    color: #22d3ee;
    filter: drop-shadow(0 0 8px rgba(34, 211, 238, .5));
}

.dgn-champ-row {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(10, 9, 24, .4);
}

.dgn-hint {
    margin: 10px 2px 4px;
}

/* Schlüssel-Anzeige */
.dgn-keys {
    margin: 4px 0 12px;
    font-family: var(--hud);
    font-weight: 700;
    font-size: 13.5px;
    letter-spacing: .04em;
    color: #22d3ee;
}

/* Ausrüstungs-Übersicht + Drop-Vergleich */
.dgn-equip-title {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 8px;
}

.dgn-equip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px;
}

.dgn-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 12px 0 14px;
}

.dgn-cmp-label {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--mist);
    margin-bottom: 6px;
}

.dgn-item {
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: 10px 11px;
    background: rgba(10, 9, 24, .45);
    font-size: 12.5px;
    letter-spacing: .02em;
    text-align: left;
}

.dgn-item.empty {
    color: var(--mist);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 66px;
    font-size: 12px;
}

.dgn-item-head {
    font-weight: 700;
    color: var(--frost);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.dgn-item-floor {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--mist);
}

.dgn-item-rar {
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.dgn-affix {
    color: var(--frost);
    font-size: 12px;
    padding: 1px 0;
}

/* Seltenheits-Farben (Rahmen + Label) */
.dgn-item.rar-common { border-color: rgba(184, 192, 216, .35); }
.dgn-item.rar-common .dgn-item-rar { color: #b8c0d8; }

.dgn-item.rar-rare { border-color: rgba(34, 211, 238, .55); }
.dgn-item.rar-rare .dgn-item-rar { color: #22d3ee; }

.dgn-item.rar-epic {
    border-color: rgba(139, 92, 246, .65);
    box-shadow: 0 0 14px rgba(139, 92, 246, .18) inset;
}
.dgn-item.rar-epic .dgn-item-rar { color: var(--rift-glow); }

/* Start-/Aufgeben-Buttons im Dungeon-Look */
.death-opt.dgn-start {
    border-color: rgba(34, 211, 238, .40);
    background: linear-gradient(180deg, rgba(34, 211, 238, .14), rgba(10, 9, 24, .3));
}

.death-opt.dgn-start:hover {
    border-color: #22d3ee;
    box-shadow: 0 6px 18px rgba(34, 211, 238, .22);
}

.death-opt.dgn-start:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.death-opt.dgn-retreat {
    margin-top: 12px;
}

@media (max-width: 560px) {
    .dgn-equip { grid-template-columns: 1fr; }
    .dgn-compare { grid-template-columns: 1fr; }
}