@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== Einzeln abschaltbare Kampf-/Sieg-Animationen (Einstellungen > Performance) =====
   Jede Animation wird ueber eine CSS-Variable eingebunden statt direkt benannt, damit
   JavaScript sie per Checkbox komplett deaktivieren kann (echtes "animation: none",
   nicht nur unsichtbar). */
:root {
    /* Bug-Fix: bisher wurde die Header-Hoehe ueberall als fest "96px" geraten -
       auf einem echten Geraet mit anderer Schriftdarstellung/Safe-Area war das
       leicht daneben, wodurch die fixierte Unterreiter-Leiste vom Header
       ueberdeckt ("halb abgeschnitten") wurde. Wird jetzt zur Laufzeit exakt
       vermessen (siehe src/26-main-init.js) und hier nur als Startwert/
       Rueckfallwert gesetzt, falls JS aus irgendeinem Grund noch nicht
       gelaufen ist. */
    --header-height: 96px;
    /* Rueckfallwerte, falls JS aus irgendeinem Grund noch nicht gelaufen ist -
       werden beim Laden sofort durch die tatsaechlich gemessene Hoehe der
       jeweiligen Leiste ersetzt (siehe src/26-main-init.js). */
    --skill-tab-switch-height: 62px;
    --prestige-tab-switch-height: 62px;
    --bestiary-tab-switch-height: 62px;
    --stats-tab-switch-height: 62px;
    --anim-vc-embers: vc-ember-rise 2.6s ease-out;
    --anim-vc-idle-bob: vc-idle-bob 2.6s ease-in-out;
    --anim-vc-screen-shake: vc-screen-shake 0.35s ease-in-out;
    --anim-vc-screen-shake-big: vc-screen-shake-big 0.45s ease-in-out;
    --anim-vc-dungeon-emblem: dungeon-emblem-throb 2.6s ease-in-out;
    --anim-vc-combo-blazing: vc-combo-blazing 2.6s ease-in-out;
    --anim-vc-combo-pop: vc-combo-pop 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    --anim-vc-victory-appear: victory-popup-appear 0.4s cubic-bezier(0.25, 1.4, 0.4, 1) forwards;
    --anim-vc-victory-rays: vc-victory-rays-spin 3s ease-in-out;
    --anim-vc-victory-particles: vc-victory-particle-rise 1.4s ease-out forwards;
    --anim-vc-loot-appear: vc-loot-slot-appear 0.35s ease-out backwards;
    --anim-vc-combat-icon: combat-icon-pulse 0.8s ease-in-out forwards;
    --anim-vc-lunge: transform 0.25s ease-out;
}

html, body {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-x pan-y;
    overscroll-behavior: none;
    overscroll-behavior-y: none;
}
input, textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

@property --xp-percent {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

.map-cloud {
    position: absolute;
    background-image: url('clouds.png');
    background-size: cover;
    pointer-events: none;
    z-index: 10;
    animation-name: fly-across;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
body.combat-view-active .map-cloud {
    display: none;
}

@keyframes fly-across {
    0% {
        transform: translateX(-500px);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateX(1200px);
        opacity: 0;
    }
}

.map-tile.pulsing-dungeon {
    box-shadow: 0 0 10px rgba(220, 50, 50, 0.5);
}
@keyframes pulse-dungeon {
    0%, 100% {
        box-shadow: 0 0 10px rgba(220, 50, 50, 0.5);
    }
    50% {
        box-shadow: 0 0 35px 8px rgba(220, 50, 50, 0.9);
    }
}

#map-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    transition: background-color 2s ease-in-out;
}
/* Dasselbe Tag/Nacht-Farbueberlagerung wie auf der Hauptkarte, nur fuer die
   Stadt/das Dorf - siehe updateHud() in ui.js, das beide zusammen aktualisiert. */
#city-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    transition: background-color 2s ease-in-out;
}
/* Dieselbe Tag/Nacht-Faerbung auch waehrend des Kampfes - liegt ueber dem
   Kampf-Hintergrund (z-index 0), aber HINTER den Kaempfer-Sprites (z-index 2),
   damit sie nicht mit eingefaerbt/verdunkelt werden, nur die Szenerie dahinter. */
#combat-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 150px;
    pointer-events: none;
    z-index: 1;
    transition: background-color 2s ease-in-out;
}
#zone-tint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    background-color: transparent;
    transition: background-color 5s ease-in-out;
}

#tab-menu .popup-button {

    flex-grow: 0;


    padding: 0 5px;
    margin-left: 0px;


    min-height: 48px;


    background-color: transparent;
    border: none;


    color: #999;
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease;
}

#tab-menu .popup-button:hover {
    color: #fff;
}

#tab-menu .popup-button svg {
    width: 22px;
    height: 22px;
}

.shop-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
}
.shop-header {
    text-align: center;
    border-bottom: 1px solid var(--gold-color);
    margin-bottom: 20px;
    padding-bottom: 15px;
}
.shop-header h3 {
    margin: 0;
    color: var(--gold-color);
    letter-spacing: 1px;
}
.shop-header p {
    margin: 5px 0 0 0;
    font-style: italic;
    color: #aaa;
    font-size: 14px;
}

#shop-view.content-panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: var(--header-height) 12px 92px;
    height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
    background: #14100c;
    border: none;
    margin: 0;
}
#shop-view.active {
    display: flex;
}

#shop-frame {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at 50% 0%, #241a10 0%, #140f0a 60%, #0c0906 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(242, 215, 138, 0.1), inset 0 0 50px rgba(0,0,0,0.5);
    padding: 14px;
    overflow: hidden;
}

#shop-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(242, 215, 138, 0.25);
    flex-shrink: 0;
}
#shop-merchant-portrait {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--gold-bright);
    box-shadow: 0 0 10px rgba(242, 215, 138, 0.5);
    flex-shrink: 0;
    background: #000;
}
#shop-merchant-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#shop-header-text {
    flex: 1;
    min-width: 0;
}
#shop-header-text h3 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--gold-bright);
    text-shadow: 0 0 6px rgba(242, 215, 138, 0.4);
    font-size: 16px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#shop-header-text p {
    margin: 2px 0 0;
    font-size: 11px;
    font-style: italic;
    color: #a89a7a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#shop-header-currency {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--gold-dim);
    border-radius: 20px;
    padding: 6px 12px;
}
#shop-header-gold-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6d6 0%, #ffd75e 35%, #d4a017 75%, #8a6205 100%);
    color: #5c3d0a;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
#shop-header-gold {
    font-weight: 700;
    color: var(--gold-bright);
    font-size: 14px;
}

#shop-inventory-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: min-content;
    align-content: start;
    justify-items: stretch;
    gap: 10px;
}

.shop-item-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(160deg, #2a2015 0%, #17120b 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5px 3px 4px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    overflow: hidden;
}
.shop-item-slot:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.shop-item-slot.empty {
    cursor: default;
    background: repeating-linear-gradient(45deg, rgba(0,0,0,0.25) 0 8px, rgba(0,0,0,0.1) 8px 16px);
    border-style: dashed;
    opacity: 0.4;
}
.shop-item-slot.empty:hover {
    transform: none;
    box-shadow: none;
}
.shop-item-slot img {
    width: 100%;
    height: 58%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
    flex-shrink: 0;
}
.shop-item-name {
    font-size: 9.5px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-top: 2px;
    line-height: 1.15;
    max-height: 2.3em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding: 0 2px;
}
.shop-item-price {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 2px;
    font-weight: 700;
}
.shop-item-price .log-currency-item {
    display: inline-flex;
    align-items: center;
    gap: 1.5px;
}
.shop-item-price .currency-icon {
    width: 8px;
    height: 8px;
}
.shop-item-price .gold-icon { fill: var(--gold-color); }
.shop-item-price .silver-icon { fill: var(--silver-color); }
.shop-item-price .bronze-icon { fill: var(--bronze-color); }
.shop-item-price span span {
    font-size: 9px;
    color: #ddd;
}

#shopkeeper-image {

    width: 160px;
    height: 160px;


    border-radius: 50%;


    border: 3px solid var(--gold-color);


    margin-bottom: 15px;


    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);


    object-fit: cover;
}

#action-bar-grid.scrollable::-webkit-scrollbar {
    display: none;
}
#action-bar-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

#game-header {
    display: grid;
    grid-template-columns: 58px 1fr;
    grid-template-rows: auto auto auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 3px;
    padding: 8px 12px;
    min-height: 0;
    background-color: var(--parchment-shadow);
    background-image: url('https://www.transparenttextures.com/patterns/dark-leather.png');
    border-bottom: 3px double var(--gold);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(242, 215, 138, 0.25);
    position: relative;
    overflow: hidden;
}

#game-header::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(201, 165, 68, 0.35);
    pointer-events: none;
    z-index: 3;
}

#game-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 15% 90%, rgba(122, 31, 31, 0.35) 0%, transparent 65%),
                radial-gradient(ellipse at 85% 10%, rgba(28, 90, 122, 0.3) 0%, transparent 65%);
    z-index: 0;
}

#header-centerpiece {
    position: relative;
    width: 95px;
    height: 112px;
    z-index: 2;
    flex-shrink: 0;
}

.timebank-text {
    position: absolute;
    top: 111px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 8.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold-bright);
    text-shadow: 0 0 4px rgba(0,0,0,0.8);
    white-space: nowrap;
    letter-spacing: 0.3px;
}

#header-centerpiece.boost-2x #xp-arc-container {
    box-shadow: 0 0 10px 2px rgba(205, 127, 50, 0.7);
}
#header-centerpiece.boost-2x #xp-arc-ring-border {
    border-color: var(--bronze-color);
}
#header-centerpiece.boost-3x #xp-arc-container {
    box-shadow: 0 0 14px 3px rgba(242, 215, 138, 0.8);
    animation: boost-3x-pulse 1.2s infinite ease-in-out;
}
#header-centerpiece.boost-3x #xp-arc-ring-border {
    border-color: var(--gold-bright);
}
@keyframes boost-3x-pulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
#header-centerpiece.boost-2x .timebank-text,
#header-centerpiece.boost-3x .timebank-text {
    color: #fff;
}

/* Aeusserer Zier-Ring: gibt dem Ganzen einen geschmiedeten, hochwertigen Rahmen-Look,
   unabhaengig von der XP-Anzeige selbst - rein dekorativ, nicht animiert. */
/* Duenner dekorativer Ring (frueher der XP-Ring) - jetzt nur noch 1/3 so dick, rein
   schmueckend, traegt keine XP-Anzeige mehr. */
#xp-arc-ring-border {
    position: absolute;
    top: 12.87px;
    left: 12.87px;
    width: 69.26px;
    height: 69.26px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1.98px solid rgba(201, 165, 68, 0.45);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), inset 0 0 4px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 3;
}

/* Der eigentliche XP-Ring - jetzt der aeussere, groessere Ring. Der Farbverlauf selbst
   wird direkt von JavaScript gesetzt (kein CSS-Custom-Property im Farbverlauf mehr -
   das wird nicht von jedem Browser/WebView zuverlaessig unterstuetzt). Das "Loch" in
   der Mitte kommt separat ueber ein Pseudo-Element, damit es weiterhin per Media Query
   responsiv bleibt. */
#xp-progress-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 95px;
    height: 95px;
    transform: rotate(120deg);
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 0 5px rgba(163, 53, 238, 0.6));
}
.xp-progress-track {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 9;
    stroke-dasharray: 225.15 45.03;
}
#xp-progress-fill {
    fill: none;
    stroke: var(--color-epic);
    stroke-width: 9;
    transition: stroke-dasharray 0.5s ease-out;
}

#header-level-badge {
    position: absolute;
    top: 14.69px;
    left: 14.69px;
    width: 65.6px;
    height: 65.6px;
    box-sizing: border-box;
    border-radius: 50%;
    overflow: hidden;
    background: radial-gradient(circle at 35% 30%, #3a2c14 0%, #171208 78%);
    border: 2px solid var(--gold-dim);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.12), 0 2px 3px rgba(0,0,0,0.6);
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 4;
}
#header-level-badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

/* Level-Kapsel, die unten leicht auf den Ring uebergreift - wie im Referenzbild */
#level-badge-label {
    position: absolute;
    top: 85px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: rgba(10, 8, 6, 0.92);
    border: 1.5px solid rgba(201, 165, 68, 0.6);
    border-radius: 9px;
    padding: 2px 9px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.65);
    z-index: 5;
    white-space: nowrap;
}
#level-badge-label span:first-child {
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 600;
    color: #b8a878;
}
#level-badge-label #level-text-header {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    color: #f5e5c1;
    text-shadow: 0 0 4px var(--gold);
}

#xp-arc-container::after {
    content: '';
    position: absolute;
    top: -20%; left: -20%;
    width: 140%;
    height: 140%;
    border-radius: 50%;


    background: conic-gradient(
        from 0deg,
        rgba(255, 255, 255, 0.3),
        rgba(255, 255, 255, 0) 15%,
        rgba(255, 255, 255, 0) 85%,
        rgba(255, 255, 255, 0.3) 100%
    );
    animation: xp-shimmer-fade 4s infinite ease-in-out;

}

#header-xp-fill {
    transition: background 0.4s ease;
}

.xp-arc-text {
    color: #a89a8a;
    font-size: 12px;
    font-weight: bold;
    margin-top: 5px;
    text-shadow: 1px 1px 2px #000;
}

.stat-orb {
    width: 100%;
    height: 26px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}

#hp-orb { justify-self: stretch; }
#mp-orb { justify-self: stretch; }

.orb-background {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 6px;
    background: radial-gradient(ellipse at center, #1a1310 0%, #0a0704 80%);
    box-shadow: inset 0 0 8px #000, 0 0 0 2px var(--gold-dim);
}
#hp-orb .orb-background {
    box-shadow: inset 0 0 8px #000, 0 0 0 2px var(--gold-dim), 0 0 8px rgba(212, 55, 55, 0.6);
}
#mp-orb .orb-background {
    box-shadow: inset 0 0 8px #000, 0 0 0 2px var(--gold-dim), 0 0 8px rgba(61, 159, 212, 0.6);
}

.orb-fill {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    transition: clip-path 0.5s ease-out;
    clip-path: inset(0 100% 0 0);
    overflow: hidden;
}
#header-hp-fill { background: linear-gradient(to right, #7a1f1f, var(--blood-bright)); }
#header-mp-fill { background: linear-gradient(to right, #1c5a7a, var(--arcane-bright)); }

.orb-fill::before {
    content: '';
    position: absolute;
    width: 100%; height: 50%;
    top: 0; left: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 0.25), transparent);
}

.orb-glass {
    display: none;
}

.orb-text-container {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    z-index: 2;
}
.orb-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-bright);
    letter-spacing: 0.5px;
}
.orb-value {
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

#hud-row {
    position: absolute;
    top: 8px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: flex-start;
    z-index: 3;
}

#hud-gold-display {
    position: absolute;
    top: 4px;
    right: 58px;
    left: auto;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 4px;
    z-index: 3;
    pointer-events: none;
}
#hud-gold-display .currency-item[data-currency="gold"],
#hud-gold-display .currency-item[data-currency="bronze"] {
    transform: translateX(8px);
}
#hud-gold-display .currency-item {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px 2px 3px;
    border-radius: 10px;
    background: rgba(8, 6, 4, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
#hud-gold-display .currency-coin {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
}
#hud-gold-display .currency-item span {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    font-variant-numeric: tabular-nums;
    min-width: 34px;
}
#hud-gold-display .currency-item[data-currency="gold"] {
    border-color: rgba(255, 215, 94, 0.3);
}
#hud-gold-display .currency-item[data-currency="gold"] span { color: var(--gold-bright); }
#hud-gold-display .currency-item[data-currency="silver"] {
    border-color: rgba(226, 230, 234, 0.25);
}
#hud-gold-display .currency-item[data-currency="silver"] span { color: #e2e6ea; }
#hud-gold-display .currency-item[data-currency="bronze"] {
    border-color: rgba(205, 127, 50, 0.3);
}
#hud-gold-display .currency-item[data-currency="bronze"] span { color: #d99456; }

#hud-time-display {
    position: absolute;
    top: 20px;
    left: 139.5px;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    z-index: 3;
}
#hud-time-large {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: 0 1px 3px rgba(0,0,0,0.8);
    line-height: 1;
}
#hud-date-small {
    position: relative;
    width: 139px;
    margin: 4px auto 0;
    padding: 2px 0;
    background: rgba(0, 0, 0, 0.28);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #b8a878;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
    box-sizing: border-box;
    z-index: 0;
}

.vital-bar-extend {
    position: absolute;
    width: 139px;
    height: 8px;
    z-index: 1;
}
.vital-bar-extend[data-vital="hp"] {
    top: 74px;
    left: 70px;
}
.vital-bar-extend[data-vital="mp"] {
    top: 84px;
    left: 60px;
}
.vital-bar-extend-track {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
}
.vital-bar-extend-fill {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    transition: clip-path 0.5s ease-out;
    clip-path: inset(0 0% 0 0);
}
.vital-bar-extend[data-vital="hp"] .vital-bar-extend-fill {
    background: #ff3b3b;
    box-shadow: 0 0 6px 1px rgba(255, 59, 59, 0.8), 0 0 2px rgba(255,255,255,0.6);
}
.vital-bar-extend[data-vital="mp"] .vital-bar-extend-fill {
    background: #2b9cff;
    box-shadow: 0 0 6px 1px rgba(43, 156, 255, 0.8), 0 0 2px rgba(255,255,255,0.6);
}
.vital-bar-extend-value {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9);
    pointer-events: none;
    white-space: nowrap;
}

#hud-currency-pill {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 3;
    display: flex;
    gap: 10px;
    background: rgba(10, 8, 6, 0.7);
    border: 1px solid rgba(201, 165, 68, 0.4);
    border-radius: 9px;
    padding: 6px 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}
#hud-time-pill {
    position: absolute;
    top: 48px;
    right: 10px;
    z-index: 3;
    background: rgba(10, 8, 6, 0.7);
    border: 1px solid rgba(201, 165, 68, 0.4);
    border-radius: 9px;
    padding: 4px 10px;
    font-size: 10px;
    color: #a89a8a;
    box-shadow: 0 2px 6px rgba(0,0,0,0.55);
}

#ingame-time-display { font-size: 11px; color: #a89a8a; }

#hud-currency-pill .currency-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: bold;
    color: #c0c0c0;
}
#hud-currency-pill .currency-icon {
    width: 13px;
    height: 13px;
}
.header-info-box {

    background-color: rgba(45, 45, 55, 0.22);


    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;


    padding: 4px 10px;


    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
}

@keyframes floating-nebula {
    0% { transform: scale(1) translate(0, 0); opacity: 0.6; }
    50% { transform: scale(1.1) translate(5px, -5px); opacity: 0.8; }
    100% { transform: scale(1) translate(0, 0); opacity: 0.6; }
}

@keyframes level-glow {
    0% { text-shadow: 0 0 5px #ffd700, 0 0 15px #ff8c00, 0 0 25px rgba(255, 140, 0, 0.7); }
    50% { text-shadow: 0 0 8px #fff5e0, 0 0 20px #ffae42, 0 0 35px rgba(255, 160, 40, 0.9); }
    100% { text-shadow: 0 0 5px #ffd700, 0 0 15px #ff8c00, 0 0 25px rgba(255, 140, 0, 0.7); }
}

@keyframes liquid-sway {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes epic-xp-glow {
    0% {
        box-shadow: 0 0 8px rgba(163, 53, 238, 0.5), inset 0 0 4px rgba(163, 53, 238, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(163, 53, 238, 0.8), inset 0 0 8px rgba(163, 53, 238, 0.5);
    }
    100% {
        box-shadow: 0 0 8px rgba(163, 53, 238, 0.5), inset 0 0 4px rgba(163, 53, 238, 0.3);
    }
}

@keyframes xp-shimmer-fade {
    0%, 100% {
        opacity: 0.4;
    }
    50% {
        opacity: 1;
    }
}

@keyframes float-orb {
  0% {
    transform: translateY(0px) rotate(-2deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
  100% {
    transform: translateY(0px) rotate(-2deg);
  }
}

@keyframes pulse-hp-glow {
  0%, 100% {
    box-shadow: inset 0 0 15px #000, 0 0 10px rgba(255, 80, 80, 0.9), 0 0 25px rgba(200, 40, 40, 0.6);
  }
  50% {

    box-shadow: inset 0 0 15px #000, 0 0 18px rgba(255, 120, 120, 1), 0 0 40px rgba(220, 20, 20, 0.7);
  }
}

@keyframes pulse-mp-glow {
  0%, 100% {
    box-shadow: inset 0 0 15px #000, 0 0 10px rgba(80, 150, 255, 0.9), 0 0 25px rgba(40, 100, 200, 0.6);
  }
  50% {

    box-shadow: inset 0 0 15px #000, 0 0 18px rgba(120, 180, 255, 1), 0 0 40px rgba(20, 80, 220, 0.7);
  }
}

@media (max-width: 600px) {
    #game-header {
        grid-template-columns: 52px 1fr;
        grid-template-rows: auto auto auto;
        height: auto;
        padding: 6px 10px;
        gap: 3px 10px;
    }

    #header-centerpiece {
        width: 80px;
        height: 100px;
    }

    .vital-bar-extend[data-vital="hp"] {
        top: 62.32px;
        left: 62px;
    }
    .vital-bar-extend[data-vital="mp"] {
        top: 70.74px;
        left: 62px;
    }

    #hud-time-display {
        left: 131.5px;
    }

    #xp-arc-ring-border {
        width: 58.13px;
        height: 58.13px;
        top: 10.94px;
        left: 10.94px;
        border-width: 1.72px;
    }

    #xp-progress-svg {
        width: 80px;
        height: 80px;
        top: 0;
        left: 0;
    }

    #header-level-badge {
        width: 54.69px;
        height: 54.69px;
        top: 12.66px;
        left: 12.66px;
        font-size: 14px;
    }

    .xp-arc-text {
        display: none;
    }

    #level-badge-label {
        top: 57px;
    }

    .timebank-text {
        top: 87px;
        font-size: 8px;
    }

    .stat-orb {
        height: 20px;
    }

    .orb-label { font-size: 9px; }
    .orb-value { font-size: 10px; }

    #hp-orb {
        grid-column: 2;
        grid-row: 1;
    }

    #mp-orb {
        grid-column: 2;
        grid-row: 2;
    }

    #ingame-time-display {
        font-size: 10px;
    }

    #hud-currency-pill {
        gap: 8px;
        padding: 5px 8px;
    }
    #hud-currency-pill .currency-item {
        font-size: 11px;
        gap: 2px;
    }
    #hud-currency-pill .currency-icon {
        width: 11px;
        height: 11px;
    }
}

#player-marker {
    width: 32px;
    height: 32px;
    background-color: rgba(0, 150, 255, 0.7);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 0 15px 5px rgba(0, 150, 255, 0.7);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    pointer-events: none;
}
@keyframes pulse-marker {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

/* ============================================================================
   PRESTIGE-SEQUENZ (neu): Kacheln der Hauptkarte erstrahlen 3s in Prestige-Lila
   bis der Bildschirm komplett gefuellt ist, blitzschnelles Blackout, dann
   Partikel + Buchstabe-fuer-Buchstabe-Text auf schwarzem Grund. Kein Button -
   Klick irgendwo auf dem Bildschirm setzt fort.
   ============================================================================ */

#prestige-tile-glow-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: var(--color-epic);
    opacity: 0;
    pointer-events: none;
    display: none;
}
#prestige-tile-glow-overlay.active {
    display: block;
}
#prestige-tile-glow-overlay.igniting {
    animation: prestige-tile-ignite 6s ease-in forwards;
}
@keyframes prestige-tile-ignite {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
#prestige-tile-glow-overlay.blackout {
    transition: background-color 0.2s linear;
    background-color: #000000;
}
#prestige-tile-glow-overlay.white-flash {
    background-color: #ffffff;
    opacity: 1;
    transition: none;
}
#prestige-tile-glow-overlay.white-flash.fade-out {
    transition: opacity 1s ease;
    opacity: 0;
}

.prestige-map-igniting {
    animation: prestige-map-brighten 6s ease-in forwards;
}
@keyframes prestige-map-brighten {
    0% { filter: brightness(1) saturate(1); }
    100% { filter: brightness(2.4) saturate(1.8); }
}

#prestige-sequence-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #000000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: hidden;
    cursor: default;
}
#prestige-sequence-overlay.visible {
    display: flex;
    opacity: 1;
    pointer-events: all;
}
#prestige-sequence-overlay.awaiting-click {
    cursor: pointer;
}

#prestige-seq-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
#prestige-seq-particles .prestige-particle {
    position: absolute;
    bottom: -20px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-epic);
    box-shadow: 0 0 6px 2px rgba(163, 53, 238, 0.8);
    animation: prestige-particle-rise linear forwards;
}
@keyframes prestige-particle-rise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 0.8; }
    100% { transform: translateY(-100vh) translateX(var(--drift, 0px)); opacity: 0; }
}

#prestige-seq-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 20px;
    width: 92%;
    max-width: 480px;
}

#prestige-seq-story-text {
    min-height: 100px;
    font-size: 32px;
    color: #e8dcc0;
    font-style: italic;
    margin: 0 0 20px;
    line-height: 1.5;
}
#prestige-seq-story-text.blessing {
    color: var(--gold-color);
    text-shadow: 0 0 8px var(--gold-color);
}
#prestige-seq-story-text.pity {
    color: var(--color-uncommon);
    text-shadow: 0 0 8px var(--color-uncommon);
}
#prestige-seq-story-text.fading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#prestige-seq-percent-display {
    font-family: var(--font-display);
    font-size: 56px;
    font-weight: 700;
    color: var(--color-uncommon);
    text-shadow: 0 0 16px var(--color-uncommon);
    min-height: 68px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#prestige-seq-percent-display.visible {
    opacity: 1;
}

#prestige-seq-total-display {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
#prestige-seq-total-display.visible {
    display: flex;
}
#prestige-seq-total-label {
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b8aecb;
}
#prestige-seq-total-value {
    font-family: var(--font-display);
    font-size: 48px;
    font-weight: 700;
    color: var(--gold-color);
    text-shadow: 0 0 8px var(--gold-color);
    display: inline-block;
}
#prestige-seq-total-value.reveal {
    animation: prestige-total-reveal 0.8s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes prestige-total-reveal {
    0% { transform: scale(0.3); text-shadow: 0 0 0px var(--gold-color); }
    50% { transform: scale(1.35); text-shadow: 0 0 30px var(--gold-color), 0 0 50px var(--gold-bright); }
    100% { transform: scale(1); text-shadow: 0 0 8px var(--gold-color); }
}

#prestige-seq-continue-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 2;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
    color: #b8aecb;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    animation: prestige-continue-hint-pulse 1.8s ease-in-out infinite;
}
#prestige-seq-continue-hint.visible {
    opacity: 0.85;
}
@keyframes prestige-continue-hint-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}



.vc-ability-icon {
    width: 16px;
    height: 16px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 91px;
    box-shadow: 0 0 7px 2px rgba(255, 255, 0, 0.7);
    border-radius: 2px;
    background-color: black;
    display: none;
    transition: opacity 0.2s;
    opacity: 0;
    z-index: 11;
}

.vc-ability-icon.visible {
    display: block;
    opacity: 2;
}

.vc-ability-icon img {
    width: 100%;
    height: 100%;
    border-radius: 4px;
}

html, body {
    height: 100%;
    overflow: hidden;
}

#game-container {
    position: relative;
    height: 100vh;
    height: 100dvh;
    background-color: #201c29;
    overscroll-behavior-y: none;
    overflow: hidden;
}
/* Bug-Fix: EIN einziger, fest im Viewport verankerter Farbverlauf fuer Skills/
   Prestige/Bestiarium/Stats (background-attachment:fixed - bewegt sich nie,
   unabhaengig von Scroll-Position oder Inhaltslaenge). Vorher hatten
   .content-panel, die Unterreiter-Leiste und die Header-Zone JEWEILS ihren
   EIGENEN, leicht unterschiedlichen Verlauf - das erzeugte sichtbare Kanten/
   Kaesten. Jetzt gibt es nur noch DIESE eine Quelle; alle anderen Elemente
   (siehe weiter unten) sind komplett durchsichtig und zeigen einfach diesen
   einen Hintergrund durch - garantiert nahtlos, exakt wie bei Equipment. */
body:has(#skill-view.content-panel.active) #game-container,
body:has(#prestige-view.content-panel.active) #game-container,
body:has(#bestiary-view.content-panel.active) #game-container,
body:has(#stats-view.content-panel.active) #game-container {
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    background-attachment: fixed;
}

#top-section {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 20;
    padding-top: env(safe-area-inset-top, 0px);
    pointer-events: none;
    background: none;
    box-shadow: none;
}
#top-section > * {
    pointer-events: auto;
}

#bottom-section {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    z-index: 20;
    padding: 0 8px calc(10px + env(safe-area-inset-bottom, 0px)) 8px;
    box-sizing: border-box;
    pointer-events: none;
    background: none;
    border-top: none;
    box-shadow: none;
}
#bottom-section::before {
    display: none;
}
#bottom-section > * {
    pointer-events: auto;
}

#central-content {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
#central-content::-webkit-scrollbar {
    display: none;
}
/* Equipment-Screen soll sich nie scrollen lassen - alles muss auf den
   Bildschirm passen (siehe #gear-view.content-panel.active). */
#central-content.no-scroll-lock {
    overflow: hidden;
}

/* Sanftes Ein-/Ausblenden beim Scrollen hinter Header/Menue - gilt nur fuer normale
   (scrollbare) Inhalts-Ansichten, nicht fuer die randlose Kartenansicht. Klasse wird
   von JS gesetzt/entfernt statt eines :has()-Selektors (bessere Kompatibilitaet). */
#central-content.scroll-fade-active {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 130px, black calc(100% - 125px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 130px, black calc(100% - 125px), transparent 100%);
}

.content-panel {
    position: relative;
    z-index: 1;
    display: none;
    /* Bug-Fix: kein eigener Hintergrund mehr hier - der kommt jetzt komplett
       einheitlich von #game-container (siehe dort), damit garantiert nur EIN
       Farbverlauf existiert, ohne sichtbare Kanten zwischen einzelnen
       Elementen. */
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 15px 15px 80px 15px;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    min-height: 400px;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.4);
    margin-top: var(--header-height);
    margin-bottom: 92px;
}

/* Die Kartenansicht (und der Dungeon/Turm, wo ja auch gekaempft wird) liegt voll bis
   zum Rand - Header und Menue schweben transparent darueber. */
#map-view.content-panel, #dungeon-view.content-panel, #city-view.content-panel {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    min-height: 100%;
    box-shadow: none;
    background: #14100c;
    opacity: 1;
    transition: opacity 0.25s ease;
}
#map-view.content-panel::before, #dungeon-view.content-panel::before, #gear-view.content-panel::before,
#skill-view.content-panel::before, #prestige-view.content-panel::before, #bestiary-view.content-panel::before, #stats-view.content-panel::before {
    display: none;
}
/* Vignette: die Hauptkarte verdunkelt sich zum oberen und unteren Rand hin, damit
   Header (Level etc.) und Bottom-Menue trotz transparent darueber schwebendem UI
   immer gut lesbar bleiben. Beginnt bereits ein Stueck vor dem Header/Menue. */
#map-view.content-panel.active::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 15;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.4) 10%,
        rgba(0, 0, 0, 0) 24%,
        rgba(0, 0, 0, 0) 76%,
        rgba(0, 0, 0, 0.4) 90%,
        rgba(0, 0, 0, 0.75) 100%
    );
}
.content-panel::before {
    content: '';
    position: absolute;
    inset: 5px;
    pointer-events: none;
    border: 1px solid rgba(201, 165, 68, 0.22);
    background-image:
        radial-gradient(circle, var(--gold-bright) 0%, transparent 70%),
        radial-gradient(circle, var(--gold-bright) 0%, transparent 70%),
        radial-gradient(circle, var(--gold-bright) 0%, transparent 70%),
        radial-gradient(circle, var(--gold-bright) 0%, transparent 70%);
    background-size: 5px 5px;
    background-position: top left, top right, bottom left, bottom right;
    background-repeat: no-repeat;
    opacity: 0.65;
    z-index: 5;
}

.content-panel.active {

    visibility: visible;
    opacity: 1;
    display: block;


    z-index: 11;
}

#main-content {
    position: static;
    height: 100%;
}

#dungeon-view.active {
    display: flex;
}

#map-view.content-panel.active {
    border-top: 1px solid var(--border-color);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 0;
}

#action-bar-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed;
    bottom: calc(130px + env(safe-area-inset-bottom, 0px));
    right: 10px;
    max-height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: none;
    align-items: center;
    z-index: 22;
    padding: 4px 2px;
}
#action-bar-grid.scrollable {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, black 16px, black calc(100% - 16px), transparent 100%);
}

.action-btn {
    flex-shrink: 0;
    width: auto;
    aspect-ratio: unset;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: transform 0.15s ease;
}
.action-btn:active {
    transform: scale(0.93);
}

.boost-slot img {
    border-radius: 6px;
    border: 2px solid transparent;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.boost-slot.active img {
    box-shadow: 0 0 8px 1px currentColor;
}
.boost-slot[data-boost="shieldWall"].active img { border-color: #3d9fd4; color: #3d9fd4; }
.boost-slot[data-boost="berserkerRage"].active img { border-color: #d43d3d; color: #d43d3d; }
.boost-slot[data-boost="auraOfRegen"].active img { border-color: #4caf50; color: #4caf50; }
.boost-slot[data-boost="scholarFocus"].active img { border-color: #3d9fd4; color: #3d9fd4; }
.boost-slot[data-boost="mightyStrike"].active img { border-color: #e6a23c; color: #e6a23c; }
.boost-slot[data-boost="defenseShatter"].active img { border-color: #a335ee; color: #a335ee; }
.boost-slot[data-boost="healingLight"].active img { border-color: #f2d78a; color: #f2d78a; }

.action-icon-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(10, 8, 6, 0.65);
    border: 1.5px solid rgba(201, 165, 68, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(0,0,0,0.6);
}
.action-icon-circle img {
    width: 62%;
    height: 62%;
    object-fit: contain;
}

.action-label {
    font-family: var(--font-display);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: #d8cba8;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    background: rgba(0,0,0,0.45);
    padding: 1px 6px;
    border-radius: 7px;
    white-space: nowrap;
}

.action-btn:hover .action-icon-circle {
    background-color: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

.action-btn.subview-active .action-icon-circle {
    border-color: var(--color-uncommon);
    box-shadow: 0 0 8px var(--color-uncommon);
}

#city-view.content-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    padding-top: calc(110px + env(safe-area-inset-top, 0px));
    padding-bottom: 92px;
    text-align: center;
    height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 1;
    transition: opacity 0.25s ease;
}
#city-view.active {
    display: flex;
}
#city-view.fade-out, #map-view.fade-out {
    opacity: 0;
}

#combat-log {
    display: none;
}

.gold-icon {
    color: var(--gold-color);
}
.silver-icon {
    color: var(--silver-color);
}
.bronze-icon {
    color: var(--bronze-color);
}

@media (max-width: 600px) {
    #vc-victory-popup {
        padding: 10px;
    }
    #vc-victory-popup h4 {
        font-size: 20px;
        margin-bottom: 10px;
    }
    .vc-victory-gains, .vc-timer-container {
        font-size: 14px;
    }
    #vc-player-area {
        left: 8%;
    }
    #vc-enemy-area {
        right: 8%;
    }
    #tab-menu {
        width: 100%;
        justify-content: center;
    }
}

.tab-button svg {
    width: 22px;
    height: 22px;
}

#combat-boost-bar {
    display: none;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    position: fixed;
    bottom: 78px;
    left: 0;
    right: 0;
    z-index: 24;
    pointer-events: none;
}
#combat-boost-bar > * {
    pointer-events: auto;
}

#combat-boost-bar.visible {
    display: flex;
}

.boost-slot {
    width: 46px;
    height: 46px;
}

.action-btn {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    border: 2px solid #888;
    position: relative;
    cursor: pointer;
    overflow: hidden;
}
.action-btn img {
    width: 100%;
    height: 100%;
}
.action-btn.locked {
    filter: grayscale(100%);
    cursor: not-allowed;
}
.action-btn.locked img {
    opacity: 0.4;
}
/* Faehigkeiten sind gesperrt, solange der Gegner noch nicht auf seiner Position
   ist (waehrend der Eintritts-Sequenz) - gleicher grauer Look wie "locked". */
.boost-slot.awaiting-enemy {
    filter: grayscale(100%);
    cursor: not-allowed;
    pointer-events: none;
    opacity: 0.55;
}
.boost-unlock-level {
    position: absolute;
    bottom: 2px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    background-color: rgba(0,0,0,0.7);
    padding: 1px 4px;
    border-radius: 3px;
}
.boost-mp-cost {
    position: absolute;
    bottom: 1px;
    left: 50%;
    transform: translateX(-50%);
    color: #7fd6ff;
    font-size: 8px;
    font-weight: 700;
    text-shadow: 0 1px 2px black;
    background-color: rgba(0,0,0,0.65);
    padding: 0 3px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 2;
    white-space: nowrap;
}
.boost-cooldown {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: bold;
    display: none;
}
.action-btn.on-cooldown {
    border-color: var(--diff-hard);
}
.action-btn.passive.active {
    border-color: var(--color-mythic);
    box-shadow: 0 0 10px var(--color-mythic);
}
#boost-upgrade-section {
    padding: 15px;
}
.boost-upgrade-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: bold;
    color: var(--gold-color);
}
.boost-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    background: linear-gradient(160deg, rgba(90, 160, 220, 0.1) 0%, rgba(15, 22, 30, 0.5) 100%);
    border: 1px solid rgba(90, 160, 220, 0.2);
    padding: 12px;
    border-radius: 10px;
    margin-bottom: 10px;
    transition: all 0.15s ease;
}
.boost-card:hover {
    border-color: rgba(90, 160, 220, 0.5);
    box-shadow: 0 0 12px rgba(90, 160, 220, 0.25);
}
.boost-card .boost-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid rgba(90, 160, 220, 0.5);
    box-shadow: 0 0 8px rgba(90, 160, 220, 0.3);
    background: radial-gradient(ellipse at 35% 30%, #1a2a38 0%, #0a1218 80%);
    padding: 6px;
    box-sizing: border-box;
}
.boost-details {
    flex-grow: 1;
}
.boost-details h4, .boost-details p {
    margin: 0;
    padding: 1px 0;
}
.boost-name {
    color: var(--gold-bright);
    font-family: var(--font-display);
    text-shadow: 0 0 6px rgba(242, 215, 138, 0.3);
}
.boost-level {
    color: #8ec4f0;
    font-size: 14px;
}
.boost-desc, .boost-next {
    font-size: 13px;
    color: #b8c8d8;
}
.boost-next-val {
    color: var(--color-uncommon);
}
.boost-upgrade-action {
    text-align: right;
}
.upgrade-cost {
    font-size: 14px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    color: var(--gold-bright);
}
.upgrade-boost-btn {
    padding: 7px 14px;
    background: linear-gradient(180deg, #8ec4f0 0%, #5aa0dc 55%, #3a7ab8 100%);
    border: 1px solid #5aa0dc;
    color: #0a1218;
    font-weight: 700;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 2px 0 #3a7ab8, 0 0 8px rgba(90, 160, 220, 0.35);
    transition: filter 0.15s ease;
}
.upgrade-boost-btn:hover:not(:disabled) {
    filter: brightness(1.1);
}
.upgrade-boost-btn:disabled {
    background: #3a3a3a;
    border-color: #555;
    color: #888;
    box-shadow: none;
    cursor: not-allowed;
}

.no-animations #top-section *,
.no-animations #top-section *::before,
.no-animations #top-section *::after,
.no-animations #bottom-section *,
.no-animations #bottom-section *::before,
.no-animations #bottom-section *::after,
.no-animations .content-panel:not(#map-view) *,
.no-animations .content-panel:not(#map-view) *::before,
.no-animations .content-panel:not(#map-view) *::after,
.no-animations #item-context-modal *,
.no-animations #settings-modal-overlay *,
.no-animations #prestige-sequence-overlay *,
.no-animations #ascension-sequence-overlay *,
.no-animations #mythic-drop-toast * {
    animation: none !important;
    transition: none !important;
}

.no-animations .map-cloud,
.no-animations #weather-overlay {
    display: none !important;
}

#main-content {
    position: static;
    height: 100%;
}

.armory-divider {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loot-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0,0,0,0.3);
    padding: 4px 10px;
    border-radius: 15px;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
    margin-left: auto;
}
.loot-filter:hover {
    background-color: rgba(255, 255, 215, 0.1);
}
.filter-label {
    font-size: 12px;
    color: #aaa;
}
.filter-setting {
    font-size: 12px;
    font-weight: bold;
}

#gear-view.content-panel.active {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: none;
    display: flex;
    justify-content: center;
}

.armory-container.panel {
    background-image: none;
    background-color: transparent;
    box-shadow: none;
    border: none;
    padding: var(--header-height) 12px calc(92px + env(safe-area-inset-bottom, 0px));
}
.armory-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    padding: var(--header-height) 12px calc(92px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}
.armory-container::before {
    display: none;
}
.armory-title {
    position: relative;
    text-align: center;
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: 2px;
    margin: 2px 0 14px;
    background: linear-gradient(180deg, #fff 0%, var(--gold-bright) 45%, var(--color-epic) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 8px rgba(242, 215, 138, 0.4));
}

#armory-power-display {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto 16px;
    padding: 3px 22px;
    line-height: 1;
    background: linear-gradient(160deg, rgba(163, 53, 238, 0.18) 0%, rgba(15, 10, 6, 0.7) 100%);
    border: 1px solid var(--color-epic);
    border-radius: 20px;
    box-shadow: 0 0 16px rgba(163, 53, 238, 0.4), inset 0 0 12px rgba(163, 53, 238, 0.15);
}
#armory-power-display svg {
    width: 18px;
    height: 18px;
    fill: var(--gold-bright);
    filter: drop-shadow(0 0 4px rgba(242, 215, 138, 0.6));
}
#armory-power-value {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 8px rgba(163, 53, 238, 0.7);
}
.armory-power-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    color: #c988ff;
    font-weight: 700;
}

.armory-stat-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 9px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(242, 215, 138, 0.25);
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    color: #eaf2fa;
}
.armory-stat-chip svg {
    width: 12px;
    height: 12px;
}
.armory-stat-chip[data-stat="strength"] svg { fill: #ff6b5a; }
.armory-stat-chip[data-stat="defense"] svg { fill: #5aa0dc; }
.armory-stat-chip[data-stat="stamina"] svg { fill: #5ade8a; }

/* ===== Drei-Spalten-Schaufenster: Ruestung links, Charakter mittig, Accessoires
   rechts - so wie es Top-RPGs (Raid Shadow Legends, AFK Arena) aufbauen, statt
   alles simpel untereinander zu stapeln. ===== */
.armory-showcase {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 4px;
}
.armory-slot-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    position: relative;
    top: -43px;
}
.armory-center-col {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    flex: 1;
    padding: 2px 6px 0;
    margin-top: 5px;
}

/* Traenke spannen die volle Mittelbreite auf - HP sitzt ganz links (auf Hoehe der
   linken Ruestungs-Spalte), MP ganz rechts (auf Hoehe der rechten Spalte). */
.armory-potion-row {
    display: contents;
}
.armory-potion-slot.placeholder-slot {
    position: absolute;
    top: calc(95px + env(safe-area-inset-top, 0px));
    width: 37px;
    height: 37px;
}
.armory-potion-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    pointer-events: none;
}
#armory-hp-potion-slot { left: 12px; border-color: rgba(220, 60, 60, 0.55); color: rgba(220, 90, 90, 0.6); }
#armory-mp-potion-slot { right: 12px; border-color: rgba(70, 130, 220, 0.55); color: rgba(90, 150, 220, 0.6); }
.armory-bottom-group {
    display: flex;
    justify-content: center;
    gap: 18px;
}
.armory-pet-stat-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    top: -12px;
}
.armory-pet-slot {
    width: 46px;
    height: 46px;
    cursor: pointer;
}
.armory-pet-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
    pointer-events: none;
}
.armory-pet-slot.slot-filled {
    border-style: solid;
    border-color: var(--color-legendary);
    box-shadow: 0 0 8px rgba(255, 128, 0, 0.4);
}
.armory-pet-bonus-badge {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    line-height: 1;
    font-weight: bold;
    white-space: nowrap;
    color: #8fffa0;
    background: rgba(10, 8, 5, 0.9);
    border: 1px solid rgba(242, 215, 138, 0.5);
    border-radius: 4px;
    padding: 1px 3px;
    pointer-events: none;
    z-index: 2;
}
.item-power-badge {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    line-height: 1;
    font-weight: bold;
    white-space: nowrap;
    color: #ffd76a;
    background: rgba(10, 8, 5, 0.9);
    border: 1px solid rgba(242, 215, 138, 0.5);
    border-radius: 4px;
    padding: 1px 3px;
    pointer-events: none;
    z-index: 2;
}

.char-equip-slot {
    position: relative;
    width: 46px;
    height: 46px;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 2px solid var(--gold-dim);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(0,0,0,0.5);
    color: rgba(242, 215, 138, 0.25);
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.char-equip-slot.drag-source-active {
    opacity: 0.35;
}
.char-equip-slot:hover {
    border-color: var(--gold-bright);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 0 12px rgba(242, 215, 138, 0.55);
    transform: scale(1.06);
}
.char-equip-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.char-equip-slot svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
    pointer-events: none;
}

.armory-consumable-row {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin: 10px 0 16px;
}
.pet-slot-wrapper, .potion-slot-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.consumable-label {
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: bold;
    color: var(--gold-bright);
    text-shadow: 0 0 6px rgba(242, 215, 138, 0.3);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}
.placeholder-slot {
    width: 48px;
    height: 48px;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 2px dashed rgba(242, 215, 138, 0.35);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(242, 215, 138, 0.4);
    margin: 0 auto;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
}
.stack-count {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-shadow: 1px 1px 2px black;
}

.armory-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-epic), var(--gold-bright), var(--color-epic), transparent);
    margin: 5px 10px 16px 10px;
    text-align: center;
    position: relative;
}

.armory-divider span {
    background: #1a130a;
    color: var(--gold-bright);
    padding: 0 15px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
#inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px;
    padding: 4px 0;
    min-height: 100px;
}
.inventory-slot.locked {
    background: repeating-linear-gradient(45deg, rgba(0,0,0,0.3) 0 6px, rgba(0,0,0,0.15) 6px 12px);
    border-color: rgba(242, 215, 138, 0.12) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6) !important;
    cursor: default;
    opacity: 0.5;
}

#inventory-pager {
    display: flex;
    justify-content: center;
    gap: 8px;
}
.inventory-page-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 4px;
    border-radius: 8px;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 2px solid var(--gold-dim);
    color: #d8cba8;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
}
.inventory-page-btn.active {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    box-shadow: 0 0 8px rgba(242, 215, 138, 0.5);
}
.inventory-page-btn.drag-drop-page-hover {
    border-color: var(--color-uncommon) !important;
    color: var(--color-uncommon) !important;
    animation: page-hover-fill 0.55s linear forwards;
}
@keyframes page-hover-fill {
    0% { box-shadow: 0 0 4px rgba(30, 255, 0, 0.4); transform: scale(1); }
    100% { box-shadow: 0 0 16px 4px rgba(30, 255, 0, 0.85); transform: scale(1.12); }
}
.inventory-slot {
    width: 100%;
    aspect-ratio: 1/1;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 2px solid var(--gold-dim);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.inventory-slot img {
    -webkit-user-drag: none;
    user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: none;
}
.inventory-slot:not(.empty):hover {
    border-color: var(--gold-bright);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 0 8px rgba(242, 215, 138, 0.45);
}
.inventory-slot.drag-source-active {
    opacity: 0.35;
}
.drag-drop-target-valid {
    border-color: var(--color-uncommon) !important;
    box-shadow: 0 0 12px 2px rgba(30, 255, 0, 0.65) !important;
}
.drag-drop-target-invalid {
    border-color: #ff3b3b !important;
    box-shadow: 0 0 12px 2px rgba(255, 59, 59, 0.65) !important;
}
#drag-ghost {
    position: fixed;
    z-index: 10000;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border-radius: 8px;
    border: 2px solid var(--gold-bright);
    box-shadow: 0 6px 16px rgba(0,0,0,0.6), 0 0 14px rgba(242, 215, 138, 0.5);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1.12);
    opacity: 0.95;
}
#drag-ghost img {
    width: 88%;
    height: 88%;
    object-fit: contain;
    pointer-events: none;
}
.inventory-slot img {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    object-fit: contain;
}

.potion-slot img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#mythic-drop-title {
    font-size: 48px;
    font-weight: bold;
    color: ffffff;
    padding: 10px;
    letter-spacing: 4px;
}

#mythic-drop-title span {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: scale(3);
    animation: wave-effect 0.8s forwards ease-out;

    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000,
         0 0 8px var(--color-mythic),
         0 0 12px var(--color-mythic);
}

@keyframes wave-effect {
    0% {
        transform: scale(3);
        opacity: 0;
    }
    60% {
        transform: scale(0.9);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

#mythic-drop-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(25, 25, 25, 0.3);
    backdrop-filter: blur(4px) grayscale(50%);
    -webkit-backdrop-filter: blur(4px) grayscale(50%);
    z-index: 9998;
}

#mythic-drop-toast {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    cursor: pointer;
    text-align: center;
}

#mythic-drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    filter: drop-shadow(0 0 15px rgba(0,0,0,0.7));
}

.vc-loot-slot img[data-type="soulstone"] {
    color: var(--color-mythic);
}

#mythic-drop-image {
    width: 150px;
    height: 150px;
    object-fit: contain;
    border-radius: 8px;
    animation: pulse-scale 3s infinite ease-in-out, pulse-glow 3s infinite ease-in-out;
}

#mythic-drop-name {
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-shadow: 0 0 5px black, 0 0 10px var(--color-mythic), 0 0 15px var(--color-mythic);
}

@keyframes pulse-scale {
    0% {
        transform: scale(1.0);
    }
    50% {
        transform: scale(1.25);
    }
    100% {
        transform: scale(1.0);
    }
}

@keyframes pulse-glow {
    0% {
        box-shadow: 0 0 5px var(--color-mythic), 0 0 10px var(--color-mythic), inset 0 0 5px rgba(255,255,255,0.3);
    }
    50% {
        box-shadow: 0 0 25px var(--color-mythic), 0 0 50px var(--color-mythic), inset 0 0 10px rgba(255,255,255,0.5);
    }
    100% {
        box-shadow: 0 0 5px var(--color-mythic), 0 0 10px var(--color-mythic), inset 0 0 5px rgba(255,255,255,0.3);
    }
}

#stats-view h3 {
    margin-top: 25px;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
    color: var(--gold-color);
    letter-spacing: 1px;
}
#stats-view h3:first-child {
    margin-top: 0;
}

.stat-comparison {
    margin-left: 8px;
    font-size: 13px;
    font-style: italic;
}

.stat-increase {
    color: var(--color-uncommon);
}

.stat-decrease {
    color: var(--diff-hardcore);
}

.stat-no-change {
    color: #888;
}

.stats-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
}

.stat-card {
    background-color: #2a2a2a;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--border-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.stat-icon-wrapper {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.stat-icon {
    width: 28px;
    height: 28px;
    color: #fff;
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
}

.stat-label {
    font-size: 14px;
    color: #aaa;
}

#stats-view h3:nth-of-type(2) + .stats-dashboard-grid .stat-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 12px;
}
#stats-view h3:nth-of-type(2) + .stats-dashboard-grid .stat-value {
    font-size: 20px;
}
#stats-view h3:nth-of-type(2) + .stats-dashboard-grid .stat-label {
    font-size: 13px;
}

.loot-grid {
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.loot-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    border-left: 5px solid;
}

#settings-modal-overlay {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}
#settings-modal-content {
    /* Design-Aenderung: dieselbe dunkle Grundflaeche wie alle anderen Fenster
       jetzt (siehe .content-panel weiter oben), statt der alten
       Pergament-Optik. Sanfter Rahmen wie bei den anderen Popups. */
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: 1px solid rgba(242, 215, 138, 0.25);
    border-radius: 8px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 0 5px 25px rgba(0,0,0,0.7), inset 0 0 30px rgba(0,0,0,0.3);
}
.settings-header {
    /* Bleibt beim Scrollen im Fenster oben stehen - Inhalt, der darunter
       hochgescrollt wird, verschwindet an der unteren Rahmenlinie. */
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 100%);
    border-bottom: 2px solid var(--gold-dim);
}
.settings-header h2 {
    margin: 0;
    color: var(--gold-color);
}
.close-btn {
    background: transparent;
    border: none;
    color: var(--text-color);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    padding: 0 10px;
    min-width: 44px;
    min-height: 44px;
}
.settings-container {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.settings-btn, .buy-button {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #2a1d0a;
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-dim) 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    padding: 10px 16px;
    min-height: 44px;
    cursor: pointer;
    box-shadow: 0 2px 0 var(--gold-dim), inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 6px rgba(0,0,0,0.5);
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.settings-btn:active, .buy-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--gold-dim), inset 0 1px 0 rgba(255,255,255,0.4), 0 1px 3px rgba(0,0,0,0.5);
}
.settings-btn:disabled, .buy-button:disabled {
    background: linear-gradient(180deg, #6b6250 0%, #4a4436 100%);
    color: #8a8272;
    border-color: #4a4436;
    cursor: not-allowed;
    box-shadow: none;
}

        :root {
            --color-common: #ffffff;
            --color-uncommon: #1eff00;
            --color-rare: #0070dd;
            --color-epic: #a335ee;
            --color-legendary: #ff8000;
            --color-mythic: #00e5ff;
            --color-cxp: #ffc400;
            --border-color: #6b5427;
            --background-color: #241a10;
            --text-color: #e8dfc8;
            --active-tab-color: #3a2a18;
            --diff-hardcore: #d43737;
            --diff-hard: #ff9d4d;
            --diff-medium: #ffff4d;
            --diff-easy: #90ee90;
            --diff-trivial: #008000;
            --gold-color: #c9a544;
            --silver-color: #c0c0c0;
            --bronze-color: #cd7f32;


            --void: #0b0906;
            --parchment: #241a10;
            --parchment-light: #3a2a18;
            --parchment-shadow: #150f09;
            --gold: #c9a544;
            --gold-bright: #f2d78a;
            --gold-dim: #7a6229;
            --blood: #7a1f1f;
            --blood-bright: #d43737;
            --arcane: #1c5a7a;
            --arcane-bright: #3d9fd4;
            --font-display: 'Cinzel', 'Georgia', serif;
            --font-body: 'Inter', 'Segoe UI', sans-serif;
        }

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--void);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

button, .tab-button, .action-btn, .settings-btn, .popup-button, .skill-controls button,
.item-slot, .map-tile, [onclick], [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

button:active, .tab-button:active, .action-btn:active, .settings-btn:active, .popup-button:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.skill-controls button {
    position: relative;
}
.skill-controls button::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-image:
        radial-gradient(ellipse at 50% -10%, rgba(122, 90, 30, 0.35) 0%, transparent 55%),
        linear-gradient(to bottom, #100c07, #1a130c, #241a10, #150f09);
    background-size: 100% 100%, 100% 300%;
    background-position: 0% 0%, 0% 50%;
}

@keyframes slow-sunset {
    0% {
        background-position: 0% 0%, 0% 0%;
    }
    50% {
        background-position: 0% 0%, 0% 100%;
    }
    100% {
        background-position: 0% 0%, 0% 0%;
    }
}

        .stat-bar {
            width: 100%;
            height: 16px;
            background-color: #555;
            border-radius: 10px;
            position: relative;
            text-align: center;
            font-size: 12px;
            line-height: 20px;
            overflow: hidden;
            border: 1px solid #111;
            box-sizing: border-box;
        }

.stat-bar > span {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    color: white;
    z-index: 2;
    font-size: 12px;
    line-height: 16px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}

        .stat-bar-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            border-radius: 8px;
            transition: width 0.3s ease-in-out;
            z-index: 1;
        }
        #cxp-bar .stat-bar-fill { background-color: var(--color-cxp); }
        #hp-bar .stat-bar-fill, #enemy-hp-bar .stat-bar-fill { background: linear-gradient(to right, #a00000, #d43737); }
        #mp-bar .stat-bar-fill { background: linear-gradient(to right, #004899, #0070dd); }
		#vc-player-hp-fill, #vc-enemy-hp-fill {
             background: linear-gradient(to right, #a00000, #d43737);
        }

        #currency-display { display: flex; align-items: center; justify-content: center; gap: 25px; font-size: 16px; font-weight: bold; padding: 5px 0;}
        .currency-item { display: flex; align-items: center; gap: 5px; }
        .currency-icon { width: 18px; height: 18px; }
        .gold-icon { fill: var(--gold-color); }
        .silver-icon { fill: var(--silver-color); }
        .bronze-icon { fill: var(--bronze-color); }

#tab-menu {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    box-sizing: border-box;
    gap: 2px;
    background: none;
    border: none;
    padding: 0 4px calc(8px + env(safe-area-inset-bottom, 0px)) 4px;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 25;
}

.tab-button {
    flex: 1 1 0;
    max-width: 68px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    background: none;
    border: none;
    padding: 0;
    color: #d8cba8;
    font-family: var(--font-display);
    cursor: pointer;
    overflow: visible;
}

.tab-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.65);
    border: 1.5px solid rgba(201, 165, 68, 0.4);
    box-shadow: 0 3px 8px rgba(0,0,0,0.6);
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.tab-icon-circle svg {
    width: 21px;
    height: 21px;
    color: #cbb98a;
    transition: color 0.25s ease;
}

.tab-label {
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    color: #9c8a63;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    white-space: nowrap;
    transition: color 0.25s ease;
}

.tab-button:hover:not(.active) .tab-icon-circle {
    border-color: rgba(201, 165, 68, 0.75);
}

.tab-button.active .tab-icon-circle {
    border-color: var(--gold);
    background: rgba(45, 33, 12, 0.8);
    box-shadow: 0 0 12px rgba(242, 215, 138, 0.55), 0 3px 8px rgba(0,0,0,0.6);
}
.tab-button.active .tab-icon-circle svg {
    color: var(--gold-bright);
}
.tab-button.active .tab-label {
    color: var(--gold-bright);
    text-shadow: 0 0 6px rgba(242, 215, 138, 0.5);
}

.tab-button.skill-points-available:not(.active) .tab-icon-circle,
.tab-button.tab-notify-glow:not(.active) .tab-icon-circle {
    border-color: var(--color-uncommon);
    animation: tab-notify-pulse 1.6s ease-in-out infinite;
}
.tab-button.skill-points-available:not(.active) .tab-icon-circle svg,
.tab-button.tab-notify-glow:not(.active) .tab-icon-circle svg {
    color: var(--color-uncommon);
}
.tab-button.skill-points-available:not(.active):hover .tab-icon-circle,
.tab-button.tab-notify-glow:not(.active):hover .tab-icon-circle {
    border-color: #a1ff9c;
}
@keyframes tab-notify-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(30, 255, 0, 0.5); }
    50% { box-shadow: 0 0 10px rgba(30, 255, 0, 0.9); }
}

        .map-container {
			width: 100%;
			max-width: 700px;
			margin: 0 auto;
			text-align: center;
		}
        .placeholder-panel {
            min-height: 300px;
            font-size: 20px;
            color: #777;
        }
        .placeholder-panel.active {
            display: flex;
            justify-content: center;
            align-items: center;
        }

.panel {
    /* Bug-Fix/Design-Aenderung: entspricht jetzt genau der Equipment-Ansicht
       (siehe .armory-container.panel weiter unten, die das bisher schon so
       ueberschrieben hatte) - alle Karten/Abschnitte schweben jetzt frei auf der
       dunklen Grundflaeche des jeweiligen Fensters, statt in einem eigenen
       Pergament-Kasten mit Rahmen zu stecken.
       Vorher: border: 1px solid var(--border-color); border-radius: 8px;
       padding: 15px; background-image: radial-gradient(...), url(...);
       background-color: #181a1f; box-shadow: inset 0 0 80px #000; */
    border: none;
    padding: 15px;
    background-image: none;
    background-color: transparent;
    box-shadow: none;
}

.panel-theme {
    position: relative;
    background: radial-gradient(ellipse at 50% 0%, #16222e 0%, #0c141c 60%, #060a0e 100%);
    border: 1px solid rgba(90, 160, 220, 0.3);
    border-radius: 14px;
    padding: 16px 12px;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(242, 215, 138, 0.12),
        0 0 30px rgba(90, 160, 220, 0.12),
        inset 0 0 40px rgba(90, 160, 220, 0.08);
}
.panel-theme::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(135deg, #5aa0dc, var(--gold-bright), #5aa0dc);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
.panel-theme > * {
    position: relative;
    z-index: 1;
}
        .panel h3 { margin-top: 0; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }

.skills-container-reborn {
    /* Design-Aenderung: floats jetzt frei wie das Equipment-Fenster, kein
       eigener Hintergrund/Rahmen mehr. Der dekorative Farbverlauf-Rand
       (::before direkt darunter) ist deshalb ebenfalls deaktiviert. */
    position: relative;
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 16px 12px 16px;
    overflow: hidden;
    box-shadow: none;
}
.skills-container-reborn::before {
    display: none;
}

.skills-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--gold-dim);
    padding-bottom: 10px;
}

.skills-header h3 {
    margin: 0;
    font-family: var(--font-display);
    color: var(--gold-bright);
    letter-spacing: 1px;
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.3);
}

.skill-points-display {
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dim) 100%);
    color: #2a1d0a;
    padding: 5px 14px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
}

.skill-points-display span {
    color: #14300f;
    font-size: 15px;
}

.skill-row {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 10px;
    border-radius: 8px;
    margin-bottom: 6px;
    background: linear-gradient(160deg, rgba(90, 160, 220, 0.08) 0%, rgba(20, 30, 40, 0.3) 100%);
    border: 1px solid rgba(90, 160, 220, 0.15);
    transition: all 0.15s ease-in-out;
}

.skill-row:last-child {
    margin-bottom: 0;
}

.skill-row:hover {
    background: linear-gradient(160deg, rgba(90, 160, 220, 0.16) 0%, rgba(20, 30, 40, 0.4) 100%);
    border-color: rgba(90, 160, 220, 0.4);
    box-shadow: 0 0 10px rgba(90, 160, 220, 0.2);
}

.skill-info {
    display: flex;
    align-items: center;
    gap: 14px;
}

.skill-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px;
    box-sizing: border-box;
    color: #8ec4f0;
    background: radial-gradient(ellipse at 35% 30%, #1a2a38 0%, #0a1218 80%);
    border: 1px solid rgba(90, 160, 220, 0.5);
    border-radius: 50%;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(90, 160, 220, 0.3);
}

.skill-name {
    font-size: 14px;
    font-weight: 700;
    font-family: var(--font-body);
    color: #eaf2fa;
}

.skill-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skill-value {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold-bright);
    text-shadow: 0 0 6px rgba(242, 215, 138, 0.4);
    width: 60px;
    text-align: right;
    padding-right: 6px;
}

.skill-controls button {
    width: 30px;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    color: #0a1218;
    background: linear-gradient(180deg, #8ec4f0 0%, #5aa0dc 55%, #3a7ab8 100%);
    border: 1px solid #5aa0dc;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 0 #3a7ab8, inset 0 1px 0 rgba(255,255,255,0.4), 0 0 8px rgba(90, 160, 220, 0.4);
    transition: all 0.1s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.skill-controls button:hover:not(:disabled) {
    filter: brightness(1.1);
}

.skill-controls button:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--gold-dim), inset 0 1px 0 rgba(255,255,255,0.4);
}

.skill-controls button:disabled {
    background: linear-gradient(180deg, #6b6250 0%, #4a4436 100%);
    cursor: not-allowed;
    box-shadow: none;
    color: #8a8272;
    border-color: #4a4436;
}

/* +1/+10/+100/MAX Button-Gruppe fuer Skills (ersetzt den einzelnen "+"-Knopf) -
   2x2-Raster, damit es kompakt neben dem Wert Platz findet. MAX bekommt
   bewusst eine andere Farbe (Gold statt Blau) und einen Tick groesseren,
   fetteren Text, damit er als "die grosse Aktion" auf den ersten Blick
   auffaellt, ohne die Zeile insgesamt zu sprengen. */
.skill-buy-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3px;
}
.skill-controls .skill-buy-btn {
    width: 38px;
    height: 19px;
    font-size: 9px;
    font-weight: 700;
    color: #0a1218;
    background: linear-gradient(180deg, #8ec4f0 0%, #5aa0dc 55%, #3a7ab8 100%);
    border: 1px solid #5aa0dc;
    border-radius: 4px;
    cursor: pointer;
    box-shadow: 0 1px 0 #3a7ab8, inset 0 1px 0 rgba(255,255,255,0.4);
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    letter-spacing: 0.2px;
}
.skill-controls .skill-buy-btn.skill-buy-max {
    background: linear-gradient(180deg, #f2d78a 0%, #c9a544 55%, #a3843a 100%);
    border-color: #f2d78a;
    color: #2a1f08;
    font-size: 10.5px;
    font-weight: 800;
    box-shadow: 0 1px 0 #a3843a, inset 0 1px 0 rgba(255,255,255,0.55), 0 0 6px rgba(242, 215, 138, 0.5);
}
.skill-controls .skill-buy-btn:hover:not(:disabled) {
    filter: brightness(1.12);
}
.skill-controls .skill-buy-btn:active:not(:disabled) {
    transform: translateY(1px);
}
.skill-controls .skill-buy-btn:disabled {
    background: linear-gradient(180deg, #6b6250 0%, #4a4436 100%);
    cursor: not-allowed;
    box-shadow: none;
    color: #8a8272;
    border-color: #4a4436;
}

.skill-row[data-stat="goldBoost"] .skill-controls,
.skill-row[data-stat="xpBoost"] .skill-controls {
    min-width: 100px;
    justify-content: flex-end;
}

.skill-separator {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(90, 160, 220, 0.5), transparent);
    margin: 12px 5px;
    opacity: 0.8;
}

.stats-tab-switch {
    /* Liegt jetzt als Kind von #top-section im HTML, ausserhalb der
       CSS-Maske von #central-content - siehe .upgrade-tab-switch fuer die
       ausfuehrliche Erklaerung. Standardmaessig unsichtbar, nur eingeblendet
       wenn Stats aktiv ist (Regel weiter unten).
       Bug-Fix: solider eigener Hintergrund statt dem unzuverlaessigen
       "background-attachment: fixed"-Trick (auf echten Mobilgeraeten oft
       gar nicht/unzuverlaessig gerendert - siehe .bestiary-tab-switch fuer
       die ausfuehrliche Erklaerung). */
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 20;
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 100%);
    padding: 4px 15px 12px 15px;
    gap: 8px;
}
body:has(#stats-view.content-panel.active) .stats-tab-switch {
    display: flex;
}
.stats-tab-switch::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 22px;
    background: linear-gradient(180deg, #16110a 0%, rgba(22, 17, 10, 0) 100%);
    pointer-events: none;
}
.stats-subtab {
    flex: 1;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px;
    min-height: 44px;
    color: #9c8a63;
    background: var(--parchment-shadow);
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    cursor: pointer;
}
.stats-subtab.active {
    color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(201, 165, 68, 0.25), rgba(201, 165, 68, 0.08));
    border-color: var(--gold);
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.4);
}
.stats-subview {
    display: none;
}
.stats-subview.active {
    display: block;
}

.bestiary-tab-switch {
    /* Liegt jetzt als Kind von #top-section im HTML, ausserhalb der
       CSS-Maske von #central-content - siehe .upgrade-tab-switch fuer die
       ausfuehrliche Erklaerung. Standardmaessig unsichtbar, nur eingeblendet
       wenn Bestiarium aktiv ist (Regel weiter unten).
       Bug-Fix: EIGENER, solider Hintergrund statt "transparent" + dem
       gemeinsamen "background-attachment: fixed"-Verlauf von
       #game-container. Dieser Trick war der eigentliche Fehler: auf echten
       Mobilgeraeten/WebViews wird "background-attachment: fixed" oft gar
       nicht oder nur unzuverlaessig gerendert (bekannte Einschraenkung) -
       dadurch blieb die Leiste tatsaechlich durchsichtig, gescrollter Inhalt
       schien direkt "durch" sie hindurch. Jetzt ein normaler, eigener
       Hintergrund, garantiert auf jedem Geraet solide. */
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 20;
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 100%);
    padding: 4px 15px 12px 15px;
    align-items: center;
    gap: 8px;
}
body:has(#bestiary-view.content-panel.active) .bestiary-tab-switch {
    display: flex;
}
.bestiary-tab-switch::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 22px;
    background: linear-gradient(180deg, #16110a 0%, rgba(22, 17, 10, 0) 100%);
    pointer-events: none;
}
.bestiary-subtab {
    flex: 1;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 10px;
    min-height: 44px;
    color: #9c8a63;
    background: var(--parchment-shadow);
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    cursor: pointer;
}
.bestiary-subtab.active {
    color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(201, 165, 68, 0.25), rgba(201, 165, 68, 0.08));
    border-color: var(--gold);
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.4);
}
.bestiary-subview {
    display: none;
}
.bestiary-subview.active {
    display: block;
}

.item-quantity {
    position: absolute;
    bottom: 2px;
    right: 4px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 1px 5px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
}

#map-grid {
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(20, 60px);
    gap: 5px;
    transition: transform 0.5s ease-in-out, filter 5s ease;
}

        .map-tile {
            width: 100%;
            aspect-ratio: 1 / 1;
            border: none;
            border-radius: 4px;
            color: white;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s, background-color 0.5s;
            position: relative;
            padding: 0;
            overflow: hidden;
        }
        .map-tile img {
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            transition: opacity 0.5s, filter 0.5s;
        }
        .map-tile.fogged { background-color: #282828 !important; }
        .map-tile.fogged img { opacity: 0; }
        .map-tile.inaccessible.tile-is-ocean img {

    opacity: 1;


    filter: brightness(65%) contrast(110%) saturate(130%);
}
        .map-tile.inaccessible::after {
            content: '';
            position: absolute;
            width: 45%;
            height: 45%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='rgba(255,255,255,0.9)' d='M336 224H112c-26.5 0-48 21.5-48 48v144c0 26.5 21.5 48 48 48h224c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zM248 368c0 8.8-7.2 16-16 16s-16-7.2-16-16v-64c0-8.8 7.2-16 16-16s16 7.2 16 16v64zm40-144H160v-48c0-44.1 35.9-80 80-80s80 35.9 80 80v48z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            z-index: 3;
        }
        .map-tile:hover:not(:disabled) { transform: scale(1.1); box-shadow: 0 0 10px #fff; z-index: 10; }
        .map-tile:disabled { cursor: not-allowed; }
        .map-tile.current-location { border: 3px solid #ffd700; box-shadow: 0 0 10px #ffd700; }
        .map-tile::before { content: "Lvl " attr(data-level); position: absolute; bottom: 110%; left: 50%; transform: translateX(-50%); background-color: #111; color: white; padding: 3px 6px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s; z-index: 20; }
        .map-tile:not(.fogged):hover::before { opacity: 1; visibility: visible; }

.map-tile.revealed-inaccessible {
    cursor: not-allowed;
}

.map-tile.revealed-inaccessible,
.map-tile.revealed-inaccessible img {
    background-color: transparent !important;
    opacity: 1;
    filter: none;
}

.map-tile.revealed-inaccessible::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.0),
            rgba(0, 0, 0, 0.0) 1px,
            transparent 1px,
            transparent 15px
        ),
        repeating-linear-gradient(
            140deg,
            rgba(0, 0, 0, 0.85),
            rgba(0, 0, 0, 0.85) 1.5px,
            transparent 1px,
            transparent 20px
        );

    pointer-events: none;
    z-index: 2;
}

#item-context-modal {
    --item-rarity-color: var(--gold-bright);
    display: none;
    position: fixed;
    z-index: 100;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 340px;
    background: radial-gradient(ellipse at 50% 0%, #1c1410 0%, #100c08 60%, #0a0806 100%);
    border: 1px solid var(--item-rarity-color);
    border-radius: 14px;
    box-shadow:
        0 0 0 1px rgba(0,0,0,0.6),
        0 10px 40px rgba(0,0,0,0.85),
        0 0 30px -4px var(--item-rarity-color),
        inset 0 0 30px rgba(0,0,0,0.4);
    padding: 22px 20px 20px;
    padding-top: 48px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow-y: auto;
}
#item-context-modal.active {
    display: block;
}

.modal-close-x {
    position: absolute;
    top: 0px;
    right: 0px;
    background: transparent;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #888;
    cursor: pointer;
    line-height: 1;
    padding: 10px 14px;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-close-x:active, .modal-close-x:hover {
    color: #fff;
}

#generic-info-modal {
    display: none;
    position: fixed;
    z-index: 200;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 340px;
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: 1px solid rgba(242, 215, 138, 0.25);
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0,0,0,0.85), inset 0 0 25px rgba(0,0,0,0.3);
    padding: 22px 20px 20px;
    padding-top: 48px;
    max-height: 80vh;
    max-height: 80dvh;
    overflow-y: auto;
}
#generic-info-modal.active {
    display: block;
}
#generic-info-modal::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: -1;
}
#generic-info-title {
    font-family: var(--font-display);
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.5);
    font-size: 19px;
    margin: 0 0 14px;
    text-align: center;
}
#generic-info-body {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.6;
}
#generic-info-body p {
    margin: 0 0 10px;
}
#generic-info-body p:last-child {
    margin-bottom: 0;
}

.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 229, 255, 0.12);
    border: 1px solid var(--color-mythic);
    color: var(--color-mythic);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 13px;
    font-style: italic;
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.35);
    transition: transform 0.15s ease;
}
.info-btn:hover, .info-btn:active {
    transform: scale(1.1);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}

#item-context-header {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 15px;
}

#item-context-image-wrapper {
    width: 46px;
    height: 46px;
    border-radius: 8px;
    background: radial-gradient(ellipse at 35% 30%, color-mix(in srgb, var(--item-rarity-color) 20%, #2a2015) 0%, color-mix(in srgb, var(--item-rarity-color) 8%, #0d0906) 80%);
    flex-shrink: 0;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8), 0 0 12px var(--item-rarity-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
#item-context-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#item-context-title {
    text-align: left;
}
#item-context-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    text-shadow: 0 0 10px var(--item-rarity-color);
}
#item-context-level {
    font-size: 13px;
    color: #b8c8d8;
}
#item-context-stats {
    text-align: left;
    margin-bottom: 20px;
    border-top: 1px solid rgba(242, 215, 138, 0.2);
    padding-top: 15px;
}
#item-context-stats p {
    margin: 5px 0;
    font-size: 14px;
    color: #eaf2fa;
}
#item-context-footer {
    border-top: 1px solid rgba(242, 215, 138, 0.2);
    padding-top: 15px;
}

#item-dice-section {
    margin-top: 4px;
    border-top: 1px solid var(--border-color);
    padding-top: 12px;
}
.dice-button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.dice-use-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: radial-gradient(ellipse at 35% 30%, rgba(90, 160, 220, 0.2) 0%, rgba(15, 22, 30, 0.6) 100%);
    border: 1px solid rgba(90, 160, 220, 0.4);
    border-radius: 50%;
    cursor: pointer;
}
.dice-use-btn:hover {
    border-color: #8ec4f0;
    box-shadow: 0 0 8px rgba(90, 160, 220, 0.35);
}
.dice-use-btn img {
    width: 26px;
    height: 26px;
}
.dice-count {
    position: absolute;
    bottom: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
    border: 1px solid #2a1d0a;
    border-radius: 8px;
    color: #2a1d0a;
    font-size: 10px;
    font-weight: 700;
}
.dice-picker-label {
    font-size: 12px;
    color: var(--text-color);
    margin: 10px 0 6px;
}
.dice-stat-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
    max-height: 160px;
    overflow-y: auto;
}
.dice-stat-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 6px 8px;
    background: rgba(0,0,0,0.25);
    border-radius: 6px;
    cursor: pointer;
}
.dice-stat-option input {
    accent-color: var(--gold-bright);
}

#item-interaction-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 15px;
}

.interaction-btn {
    padding: 10px 12px;
    border-radius: 4px;
    border: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
    transition: opacity 0.2s;
}
.interaction-btn:hover {
    opacity: 0.85;
}

.btn-equip { background-color: var(--color-rare); }
.btn-unequip { background-color: var(--color-rare); }
.btn-sell { background-color: var(--diff-trivial); }
.btn-destroy { background-color: var(--diff-hardcore); }

#item-price-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(0,0,0,0.2);
    padding: 8px;
    border-radius: 4px;
}
#item-price-container span:first-child {
    font-size: 14px;
    color: #aaa;
}
.price-value {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 18px;
    font-weight: bold;
}

        #crafting-recipes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
        .crafting-recipe { background-color: #4a4a4a; border: 1px solid #666; color: white; padding: 8px; border-radius: 4px; text-align: center; cursor: pointer; }
        .crafting-recipe:hover { background-color: #5a5a5a; }
        .crafting-recipe:disabled { background-color: #333; color: #777; cursor: not-allowed; border-color: #444;}
        .recipe-cost { font-size: 12px; display: flex; justify-content: center; align-items: center; gap: 5px; margin-top: 4px;}

        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 15px;
        }
        .stats-container .panel p {
            display: flex;
            justify-content: space-between;
            margin: 8px 0;
            font-size: 14px;
        }
        .stats-container .panel p span {
            font-weight: bold;
            color: var(--gold-color);
        }
        .stats-container .panel p .log-currency-item span {
             color: var(--text-color);
        }
        .stats-container .panel p[style*="--color-"] span {
           font-weight: normal;
        }

        .prestige-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 15px;
            margin-bottom: 20px;
            background-color: #2a2a2a;
            padding: 15px;
            border-radius: 8px;
            border: 1px solid var(--border-color);
        }
        .prestige-header h3 {
            margin-top: 0;
        }
        .prestige-header p {
            margin: 5px 0;
            max-width: 600px;
            font-size: 14px;
        }
        .prestige-currency {
            text-align: center;
            flex-shrink: 0;
        }
        .prestige-currency p {
            font-weight: bold;
            font-size: 16px;
        }
        #prestige-button {
            padding: 10px 15px;
            font-size: 16px;
            font-weight: bold;
            background-color: var(--color-mythic);
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
            transition: background-color 0.2s;
        }
        #prestige-button:hover:not(:disabled) {
            background-color: #00c5dd;
        }
        #prestige-button:disabled {
            background-color: #555;
            cursor: not-allowed;
        }

        #prestige-shop {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
        }
        .prestige-upgrade {
            background-color: #444;
            border: 1px solid var(--border-color);
            padding: 10px;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .prestige-upgrade h4 {
            margin: 0 0 10px 0;
            color: var(--gold-color);
        }
        .upgrade-info {
            font-size: 14px;
            margin-bottom: 10px;
            flex-grow: 1;
        }
        .upgrade-info p {
            margin: 4px 0;
        }
        .upgrade-info .current-bonus {
            color: var(--color-uncommon);
            font-weight: bold;
        }
        .upgrade-buy {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }
        .upgrade-buy .cost {
            font-size: 14px;
            font-weight: bold;
        }
        .upgrade-buy button {
            padding: 5px 10px;
            background-color: var(--color-rare);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .upgrade-buy button:hover:not(:disabled) {
            background-color: #0050aa;
        }
        .upgrade-buy button:disabled {
            background-color: #555;
            cursor: not-allowed;
        }

#prestige-view.content-panel {
    /* Design-Aenderung: dieselbe dunkle Grundflaeche wie alle anderen Fenster
       jetzt (siehe .content-panel Basis-Regel), statt der alten
       Pergament-Optik. Der violette Glanz-Akzent bleibt als Detail erhalten. */
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: none;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.4), inset 0 0 40px rgba(163, 53, 238, 0.08);
}

.prestige-header {
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--gold-dim);
    padding-bottom: 20px;
    margin-bottom: 25px;
}
.prestige-header h3 {
    font-family: var(--font-display);
    color: var(--color-epic);
    text-shadow: 0 0 8px rgba(163, 53, 238, 0.5);
    font-size: 22px;
    letter-spacing: 1.5px;
}
.prestige-header p {
    font-size: 14px;
    color: var(--text-color);
}
.prestige-currency {
    display: flex;
    justify-content: center;
    gap: 25px;
    font-size: 18px;
}
.prestige-currency p {
    color: var(--color-mythic);
    text-shadow: 0 0 8px var(--color-mythic);
}

#prestige-shop {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.prestige-card {
    background: linear-gradient(145deg, var(--parchment) 0%, var(--parchment-shadow) 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s ease-out;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
}
.prestige-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3), 0 5px 15px rgba(0,0,0,0.4);
    border-color: var(--gold);
}
.prestige-card.maxed {
    background: linear-gradient(145deg, #2a2a2a, #202020);
    opacity: 0.7;
}
.prestige-card.maxed:hover {
    transform: none;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.3);
    border-color: var(--gold-dim);
}

.card-icon-container {
    flex-shrink: 0;
}
.card-icon {
    width: 40px;
    height: 40px;
    color: var(--gold-bright);
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    box-sizing: border-box;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}

.card-content {
    flex-grow: 1;
}

.card-title {
    margin: 0 0 5px 0;
    font-family: var(--font-display);
    color: var(--gold-bright);
    font-size: 15px;
}

.card-desc {
    margin: 0 0 8px 0;
    font-size: 13px;
    color: var(--text-color);
}
.current-bonus {
    color: var(--color-uncommon);
    font-weight: bold;
}

.card-progress-container {
    display: flex;
    align-items: center;
    gap: 8px;
}
.progress-bar {
    flex-grow: 1;
    height: 8px;
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
    border-radius: 4px;
    transition: width 0.3s ease;
}
.progress-level {
    font-size: 12px;
    font-weight: bold;
    color: var(--gold-bright);
}

.card-buy-action {
    flex-shrink: 0;
}

.buy-button {
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-dim) 100%);
    border: 1px solid var(--gold-dim);
    color: #2a1d0a;
    border-radius: 6px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.1s ease;
    box-shadow: 0 2px 0 var(--gold-dim), inset 0 1px 0 rgba(255,255,255,0.4);
}
.buy-button:hover:not(:disabled) {
    filter: brightness(1.1);
}
.buy-button:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--gold-dim), inset 0 1px 0 rgba(255,255,255,0.4);
}
.buy-button:disabled {
    background: linear-gradient(180deg, #6b6250 0%, #4a4436 100%);
    cursor: not-allowed;
    color: #8a8272;
    box-shadow: none;
    border-color: #4a4436;
}
.buy-button .cost {
    font-size: 14px;
}
.buy-button .cost-icon {
    width: 16px;
    height: 16px;
    color: #2a1d0a;
}
.prestige-card.maxed .buy-button {
    background: #3a3a3a;
}

/* +1/+10/+100/MAX Button-Gruppe fuer Prestige-Upgrades (ersetzt den
   einzelnen Kauf-Knopf). 2x2-Raster im goldenen Prestige-Farbschema, MAX
   wieder farblich abgesetzt wie bei den Skills. Nur der +1-Knopf zeigt die
   Kosten (bei +10/+100/MAX wuerde die Summe stark schwanken/springen und
   den Knopf unruhig wirken lassen) - stattdessen zeigt die Karte selbst
   ("Aktuell: ...") ja bereits, was der naechste Kauf effektiv bringt. */
.prestige-buy-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
}
.prestige-buy-btn {
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 55%, var(--gold-dim) 100%);
    border: 1px solid var(--gold-dim);
    color: #2a1d0a;
    border-radius: 5px;
    padding: 3px 8px;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    transition: all 0.1s ease;
    box-shadow: 0 2px 0 var(--gold-dim), inset 0 1px 0 rgba(255,255,255,0.4);
    min-width: 54px;
}
.prestige-buy-label {
    font-size: 11px;
    line-height: 1.2;
}
.prestige-buy-cost {
    font-size: 9px;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0.85;
    line-height: 1;
}
.prestige-buy-cost svg {
    width: 9px;
    height: 9px;
}
.prestige-buy-btn:hover:not(:disabled) {
    filter: brightness(1.1);
}
.prestige-buy-btn:active:not(:disabled) {
    transform: translateY(1px);
    box-shadow: 0 1px 0 var(--gold-dim), inset 0 1px 0 rgba(255,255,255,0.4);
}
.prestige-buy-btn:disabled {
    background: linear-gradient(180deg, #6b6250 0%, #4a4436 100%);
    cursor: not-allowed;
    color: #8a8272;
    box-shadow: none;
    border-color: #4a4436;
}
.prestige-buy-btn.prestige-buy-max {
    background: linear-gradient(180deg, #f2d78a 0%, #c9a544 55%, #a3843a 100%);
    border-color: #f2d78a;
    box-shadow: 0 2px 0 #a3843a, inset 0 1px 0 rgba(255,255,255,0.5), 0 0 6px rgba(242, 215, 138, 0.5);
}
.prestige-buy-btn.prestige-buy-max .prestige-buy-label {
    font-size: 11.5px;
    font-weight: 800;
}
.prestige-card.maxed .prestige-buy-btn {
    background: #3a3a3a;
}

/* ===== Prestige: Premium-Gestaltung (warmes Gold/Lila/Bernstein-Thema, damit es
   sich von Ascensions kuehlem Cyan-Kosmos-Thema unterscheidet, aber gleichwertig
   hochwertig wirkt) ===== */
#prestige-frame {
    /* Design-Aenderung: floats jetzt frei wie das Equipment-Fenster, kein
       eigener Hintergrund/Rahmen mehr. Der dekorative Farbverlauf-Rand
       (::before direkt darunter) ist deshalb ebenfalls deaktiviert. */
    position: relative;
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 28px 20px 24px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: none;
}
#prestige-frame::before {
    display: none;
}
#prestige-starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,255,0.85), transparent),
        radial-gradient(1.5px 1.5px at 75% 15%, rgba(242,215,138,0.8), transparent),
        radial-gradient(1px 1px at 40% 60%, rgba(163,53,238,0.7), transparent),
        radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 25% 80%, rgba(255,128,0,0.7), transparent),
        radial-gradient(1.5px 1.5px at 60% 85%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 85% 90%, rgba(242,215,138,0.6), transparent);
    animation: ascension-twinkle 3.5s ease-in-out infinite;
}

#prestige-title-block {
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}
#prestige-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 4px;
    margin: 0;
    background: linear-gradient(180deg, #fff 0%, var(--gold-bright) 45%, var(--color-epic) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 12px rgba(242, 215, 138, 0.55)) drop-shadow(0 0 22px rgba(163, 53, 238, 0.45));
}
#prestige-subtitle {
    position: relative;
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-epic);
    opacity: 0.9;
}

#prestige-medallions {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 18px;
    margin: 22px 0 24px;
    flex-wrap: wrap;
}
.medallion-ring.prestige-ring {
    border-color: var(--gold-bright);
    box-shadow: 0 0 14px rgba(242, 215, 138, 0.55), inset 0 0 10px rgba(242, 215, 138, 0.25);
    color: var(--gold-bright);
}
#prestige-medallions .medallion-ring.bonus-ring {
    border-color: var(--color-epic);
    box-shadow: 0 0 14px rgba(163, 53, 238, 0.55), inset 0 0 10px rgba(163, 53, 238, 0.25);
    color: var(--color-epic);
    animation-delay: 1.2s;
}
#prestige-medallions .medallion-ring {
    width: 54px;
    height: 54px;
    padding: 12px;
}

#prestige-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    padding: 14px 42px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(160deg, var(--gold) 0%, #7a3d10 100%);
    border: 1px solid rgba(163, 53, 238, 0.6);
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(242, 215, 138, 0.5), 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.25);
    transition: transform 0.15s ease;
}
#prestige-button:hover:not(:disabled) {
    transform: scale(1.04);
}
#prestige-button:disabled {
    background: #3a3540;
    border-color: #5a5560;
    box-shadow: none;
    animation: none;
    color: #8a8492;
    cursor: not-allowed;
}
#prestige-button::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 32px rgba(163, 53, 238, 0.6);
    opacity: 0;
    pointer-events: none;
}

#prestige-debug-tools {
    position: relative;
    margin-top: 18px;
    text-align: center;
}
#prestige-debug-tools summary {
    display: inline-block;
    font-size: 10px;
    color: #6a6478;
    cursor: pointer;
    letter-spacing: 1px;
}
#debug-soul-buttons {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

#prestige-shop .prestige-card {
    background: linear-gradient(145deg, #241a10 0%, #150e08 100%);
    border: 1px solid rgba(242, 215, 138, 0.25);
    box-shadow: inset 0 0 15px rgba(163, 53, 238, 0.12);
}
#prestige-shop .prestige-card:hover {
    border-color: var(--gold-bright);
    box-shadow: inset 0 0 15px rgba(163, 53, 238, 0.12), 0 5px 18px rgba(242, 215, 138, 0.2);
}
#prestige-shop .prestige-card.maxed {
    background: linear-gradient(145deg, #1a130c, #100b07);
}
#prestige-shop .card-icon {
    background: radial-gradient(ellipse at 35% 30%, #382410 0%, #0d0912 80%);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(242, 215, 138, 0.3);
}
#prestige-shop .card-title {
    color: #fff;
    text-shadow: 0 0 6px rgba(242, 215, 138, 0.4);
}

/* ===== Ascension: Premium-Gestaltung ===== */
#ascension-frame {
    /* Design-Aenderung: floats jetzt frei wie das Equipment-Fenster, kein
       eigener Hintergrund/Rahmen mehr. Der dekorative Farbverlauf-Rand
       (::before direkt darunter) ist deshalb ebenfalls deaktiviert. */
    position: relative;
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 28px 20px 24px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: none;
}
#ascension-frame::before {
    display: none;
}
#ascension-starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 40% 60%, rgba(0,229,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1px 1px at 25% 80%, rgba(163,53,238,0.8), transparent),
        radial-gradient(1.5px 1.5px at 60% 85%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 85% 90%, rgba(0,229,255,0.6), transparent);
    animation: ascension-twinkle 3.5s ease-in-out infinite;
}
@keyframes ascension-twinkle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

#ascension-title-block {
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}
#ascension-title {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 4px;
    margin: 0;
    background: linear-gradient(180deg, #fff 0%, var(--color-mythic) 45%, var(--color-epic) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.6)) drop-shadow(0 0 22px rgba(163, 53, 238, 0.5));
}
#ascension-subtitle {
    position: relative;
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-bright);
    opacity: 0.85;
}
#ascension-title-block #ascension-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#ascension-progress-container {
    position: relative;
    max-width: 360px;
    margin: 0 auto 18px;
}
#ascension-shards-ready {
    margin: 0 0 6px;
    font-size: 12px;
    color: #b8aecb;
    text-align: center;
}
#ascension-shards-ready.has-shards {
    color: var(--gold-bright);
    font-weight: 700;
    animation: ascension-ready-pulse 2s ease-in-out infinite;
}
@keyframes ascension-ready-pulse {
    0%, 100% { text-shadow: 0 0 6px rgba(242, 215, 138, 0.5); }
    50% { text-shadow: 0 0 14px rgba(242, 215, 138, 0.9); }
}
#ascension-progress-bar {
    position: relative;
    width: 100%;
    height: 26px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(0, 229, 255, 0.4);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}
#ascension-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-epic), var(--color-mythic));
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
    transition: width 0.4s ease;
}
#ascension-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    letter-spacing: 0.3px;
}

#ascension-medallions {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.ascension-medallion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.medallion-ring {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, #2a1840 0%, #100816 75%);
    border: 2px solid var(--color-mythic);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.55), inset 0 0 10px rgba(0, 229, 255, 0.25);
    color: var(--color-mythic);
    padding: 14px;
    box-sizing: border-box;
    animation: medallion-pulse 2.4s ease-in-out infinite;
}
.medallion-ring.bonus-ring {
    border-color: var(--gold-bright);
    box-shadow: 0 0 14px rgba(242, 215, 138, 0.55), inset 0 0 10px rgba(242, 215, 138, 0.25);
    color: var(--gold-bright);
    animation-delay: 1.2s;
}
@keyframes medallion-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.medallion-value {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}
.medallion-label {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #b8aecb;
}

#convert-ascension-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    padding: 14px 42px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(160deg, var(--color-epic) 0%, #5a1a92 100%);
    border: 1px solid rgba(0, 229, 255, 0.6);
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(163, 53, 238, 0.55), 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.25);
    transition: transform 0.15s ease;
}
#convert-ascension-btn::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 32px rgba(0, 229, 255, 0.65);
    opacity: 0;
    pointer-events: none;
}
#convert-ascension-btn:hover:not(:disabled) {
    transform: scale(1.04);
}
#convert-ascension-btn:disabled {
    background: #3a3540;
    border-color: #5a5560;
    box-shadow: none;
    animation: none;
    color: #8a8492;
    cursor: not-allowed;
}
#convert-ascension-btn:disabled::after {
    display: none;
}

/* ============================================================================
   NEUES FEATURE: Transcendence - derselbe Aufbau wie Ascension, aber mit
   eigenem, noch kraeftigerem Glanz (Magenta/Gold statt Cyan/Lila, groessere
   Weichzeichner-Radien, hoehere Deckkraft), damit es sich wie eine echte
   Steigerung anfuehlt, nicht wie eine Kopie.
   ============================================================================ */
#transcendence-frame {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 14px;
    padding: 28px 20px 24px;
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: none;
}
#transcendence-starfield {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 15% 20%, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.5px 1.5px at 75% 15%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.2px 1.2px at 40% 60%, rgba(255,46,196,0.9), transparent),
        radial-gradient(1.5px 1.5px at 90% 55%, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.2px 1.2px at 25% 80%, rgba(255,215,0,0.9), transparent),
        radial-gradient(1.5px 1.5px at 60% 85%, rgba(255,255,255,0.7), transparent),
        radial-gradient(1.2px 1.2px at 85% 90%, rgba(255,46,196,0.7), transparent);
    animation: ascension-twinkle 3s ease-in-out infinite;
}
#transcendence-title-block {
    position: relative;
    text-align: center;
    margin-bottom: 10px;
}
#transcendence-title {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 4px;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(180deg, #fff 0%, #ff2ec4 40%, #ffd700 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 16px rgba(255, 46, 196, 0.75)) drop-shadow(0 0 30px rgba(255, 215, 0, 0.65));
}
#transcendence-subtitle {
    position: relative;
    margin: 4px 0 0;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-bright);
    opacity: 0.85;
}
#transcendence-progress-container {
    position: relative;
    max-width: 360px;
    margin: 0 auto 18px;
}
#transcendence-shards-ready {
    margin: 0 0 6px;
    font-size: 12px;
    color: #d8aecb;
    text-align: center;
}
#transcendence-shards-ready.has-shards {
    color: var(--gold-bright);
    font-weight: 700;
    animation: ascension-ready-pulse 2s ease-in-out infinite;
}
#transcendence-progress-bar {
    position: relative;
    width: 100%;
    height: 26px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255, 46, 196, 0.5);
    border-radius: 13px;
    overflow: hidden;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
}
#transcendence-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff2ec4, #ffd700);
    box-shadow: 0 0 14px rgba(255, 46, 196, 0.75);
    transition: width 0.4s ease;
}
#transcendence-progress-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.9);
    letter-spacing: 0.3px;
}
#transcendence-medallions {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
/* Ring-Farbe fuer die Transcendence-Medaillons ueberschreiben (die Basis-Klasse
   .medallion-ring wird von .ascension-medallion mitbenutzt und ist bereits
   generisch aufgebaut - hier nur die Farbe/den Glanz austauschen). */
.transcendence-medallion .medallion-ring {
    background: radial-gradient(circle at 35% 30%, #401830 0%, #160810 75%);
    border-color: #ff2ec4;
    box-shadow: 0 0 18px rgba(255, 46, 196, 0.65), inset 0 0 12px rgba(255, 46, 196, 0.3);
    color: #ff2ec4;
}
.transcendence-medallion .medallion-ring.bonus-ring {
    border-color: #ffd700;
    box-shadow: 0 0 18px rgba(255, 215, 0, 0.65), inset 0 0 12px rgba(255, 215, 0, 0.3);
    color: #ffd700;
}
.transcendence-medallion .medallion-value {
    text-shadow: 0 0 12px rgba(255, 46, 196, 0.7);
}
#convert-transcendence-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    padding: 14px 42px;
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(160deg, #ff2ec4 0%, #8a1a68 100%);
    border: 1px solid rgba(255, 215, 0, 0.7);
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 0 26px rgba(255, 46, 196, 0.65), 0 4px 12px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.25);
    transition: transform 0.15s ease;
}
#convert-transcendence-btn:hover:not(:disabled) {
    transform: scale(1.04);
}
#convert-transcendence-btn:disabled {
    background: #3a3540;
    border-color: #5a5560;
    box-shadow: none;
    color: #8a8492;
    cursor: not-allowed;
}
#convert-transcendence-btn .ascend-btn-icon {
    color: #ffd700;
    text-shadow: 0 0 8px #ffd700;
}
.ascend-btn-icon {
    color: var(--color-mythic);
    text-shadow: 0 0 8px var(--color-mythic);
    font-size: 16px;
}

#ascension-debug-tools {
    position: relative;
    margin-top: 18px;
    text-align: center;
}
#ascension-debug-tools summary {
    display: inline-block;
    font-size: 10px;
    color: #6a6478;
    cursor: pointer;
    letter-spacing: 1px;
}
#debug-shard-buttons {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

#ascension-keep-container .prestige-card {
    background: linear-gradient(145deg, #1c1428 0%, #120c1c 100%);
    border: 1px solid rgba(0, 229, 255, 0.25);
    box-shadow: inset 0 0 15px rgba(163, 53, 238, 0.15);
}
#ascension-keep-container .prestige-card:hover {
    border-color: var(--color-mythic);
    box-shadow: inset 0 0 15px rgba(163, 53, 238, 0.15), 0 5px 18px rgba(0, 229, 255, 0.25);
}
#ascension-keep-container .prestige-card.maxed {
    background: linear-gradient(145deg, #17121f, #100b17);
}
#ascension-keep-container .card-icon {
    background: radial-gradient(ellipse at 35% 30%, #241738 0%, #0d0912 80%);
    border-color: var(--color-mythic);
    color: var(--color-mythic);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8), 0 0 8px rgba(0, 229, 255, 0.35);
}
#ascension-keep-container .card-title {
    color: #fff;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}
#ascension-keep-container .buy-button {
    background: linear-gradient(180deg, var(--color-mythic) 0%, #0090a8 55%, #006678 100%);
    border-color: rgba(0, 229, 255, 0.5);
    color: #04222a;
    box-shadow: 0 2px 0 #006678, inset 0 1px 0 rgba(255,255,255,0.35);
}

/* ===== Ascension: die epische Aufstiegs-Sequenz ===== */
/* ============================================================================
   ASCENSION-SEQUENZ: gleiches Grundprinzip wie Prestige (Kacheln erstrahlen in
   Ascend-Farben bis der Bildschirm gefuellt ist, Blackout, Partikel + Text auf
   Schwarz, kein Button - Klick irgendwo setzt fort), in Cyan/Lila/Gold statt
   Prestige-Lila. Zusaetzlich episch: Bildschirm-Rumble waehrend des Aufbaus,
   ein rotierendes Runen-Siegel, umlaufende Lichtstrahlen im Hintergrund und
   eine Schockwelle, die im Moment des Blackouts nach aussen peitscht.
   ============================================================================ */

#ascension-tile-glow-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background-color: var(--color-mythic);
    opacity: 0;
    pointer-events: none;
    display: none;
}
#ascension-tile-glow-overlay.active {
    display: block;
}
#ascension-tile-glow-overlay.igniting {
    animation: ascension-tile-ignite 6s ease-in forwards;
}
@keyframes ascension-tile-ignite {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
#ascension-tile-glow-overlay.blackout {
    transition: background-color 0.2s linear;
    background-color: #000000;
}
#ascension-tile-glow-overlay.white-flash {
    background-color: #ffffff;
    opacity: 1;
    transition: none;
}
#ascension-tile-glow-overlay.white-flash.fade-out {
    transition: opacity 1s ease;
    opacity: 0;
}

.ascension-map-igniting {
    animation: ascension-map-brighten 6s ease-in forwards;
}
@keyframes ascension-map-brighten {
    0% { filter: brightness(1) saturate(1); }
    100% { filter: brightness(2.6) saturate(2); }
}
.ascension-map-shaking {
    animation: ascension-map-shake 0.35s ease-in-out infinite;
}
@keyframes ascension-map-shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-3px, 2px); }
    50% { transform: translate(3px, -2px); }
    75% { transform: translate(-2px, -3px); }
}

#ascension-sequence-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background-color: #000000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    overflow: hidden;
    cursor: default;
}
#ascension-sequence-overlay.visible {
    display: flex;
    opacity: 1;
    pointer-events: all;
}
#ascension-sequence-overlay.awaiting-click {
    cursor: pointer;
}

/* Schockwelle: peitscht einmal im Moment des Blackouts (und ein zweites Mal
   bei der finalen Summen-Enthuellung) ringfoermig nach aussen. */
#ascension-seq-shockwave {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    border: 3px solid var(--color-mythic);
    box-shadow: 0 0 20px 4px var(--color-mythic), inset 0 0 20px 4px rgba(0, 229, 255, 0.6);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
}
#ascension-seq-shockwave.burst {
    animation: ascension-shockwave-burst 0.9s ease-out;
}
@keyframes ascension-shockwave-burst {
    0% { width: 40px; height: 40px; margin: -20px 0 0 -20px; opacity: 1; border-width: 6px; }
    100% { width: 1400px; height: 1400px; margin: -700px 0 0 -700px; opacity: 0; border-width: 1px; }
}

#ascension-seq-rays-outer, #ascension-seq-rays-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1100px;
    height: 1100px;
    transform: translate(-50%, -50%);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}
#ascension-seq-rays-outer {
    background: repeating-conic-gradient(from 0deg, rgba(0, 229, 255, 0.22) 0deg 3deg, transparent 3deg 14deg);
    animation: ascension-rays-rotate 50s linear infinite;
}
#ascension-seq-rays-inner {
    width: 800px;
    height: 800px;
    background: repeating-conic-gradient(from 0deg, rgba(163, 53, 238, 0.28) 0deg 5deg, transparent 5deg 20deg);
    animation: ascension-rays-rotate-rev 34s linear infinite;
}
#ascension-sequence-overlay.visible #ascension-seq-rays-outer,
#ascension-sequence-overlay.visible #ascension-seq-rays-inner {
    animation: ascension-rays-rotate 50s linear infinite, ascension-rays-fadein 1.6s ease-out forwards;
}
#ascension-sequence-overlay.visible #ascension-seq-rays-inner {
    animation-name: ascension-rays-rotate-rev, ascension-rays-fadein;
    animation-duration: 34s, 1.6s;
    animation-timing-function: linear, ease-out;
    animation-iteration-count: infinite, 1;
}
@keyframes ascension-rays-fadein {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes ascension-rays-rotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes ascension-rays-rotate-rev {
    from { transform: translate(-50%, -50%) rotate(360deg); }
    to { transform: translate(-50%, -50%) rotate(0deg); }
}

#ascension-seq-starfield {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 80% 10%, rgba(0,229,255,0.9), transparent),
        radial-gradient(1px 1px at 30% 40%, #fff, transparent),
        radial-gradient(1.5px 1.5px at 90% 45%, rgba(163,53,238,0.9), transparent),
        radial-gradient(1px 1px at 20% 70%, rgba(242,215,138,0.9), transparent),
        radial-gradient(1.5px 1.5px at 65% 80%, #fff, transparent),
        radial-gradient(1px 1px at 50% 90%, rgba(0,229,255,0.8), transparent),
        radial-gradient(1.5px 1.5px at 5% 55%, rgba(163,53,238,0.7), transparent);
    animation: ascension-twinkle 3s ease-in-out infinite;
}

#ascension-seq-particles {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    overflow: hidden;
}
.ascension-seq-particle {
    position: absolute;
    bottom: -20px;
    border-radius: 50%;
    animation: ascension-particle-rise linear forwards;
}
@keyframes ascension-particle-rise {
    0% { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
    12% { opacity: 1; }
    88% { opacity: 0.9; }
    100% { transform: translateY(-105vh) translateX(var(--drift, 0px)) scale(1); opacity: 0; }
}

#ascension-seq-content {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 20px;
    width: 92%;
    max-width: 480px;
}

/* Rotierendes Runen-Siegel - erscheint kurz zu Beginn der Schwarzphase, bevor
   der Text zu tippen beginnt. */
#ascension-seq-sigil {
    font-size: 54px;
    color: var(--color-mythic);
    text-shadow: 0 0 20px var(--color-mythic), 0 0 40px var(--color-epic);
    opacity: 0;
    margin-bottom: 10px;
}
#ascension-seq-sigil.spin-in {
    animation: ascension-sigil-spin-in 1.6s ease-in-out forwards;
}
@keyframes ascension-sigil-spin-in {
    0% { opacity: 0; transform: rotate(0deg) scale(0.4); }
    60% { opacity: 1; transform: rotate(420deg) scale(1.3); }
    100% { opacity: 1; transform: rotate(540deg) scale(1); }
}
#ascension-seq-sigil.idle-spin {
    animation: ascension-sigil-idle-spin 6s linear infinite;
}
@keyframes ascension-sigil-idle-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

#ascension-seq-story-text {
    min-height: 100px;
    font-size: 32px;
    color: #e8f6ff;
    font-style: italic;
    margin: 0 0 16px;
    line-height: 1.5;
}
#ascension-seq-story-text.fading {
    opacity: 0;
    transition: opacity 0.3s ease;
}

#ascension-seq-shard-count {
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: 700;
    color: var(--gold-bright);
    line-height: 1;
    min-height: 68px;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#ascension-seq-shard-count.visible {
    opacity: 1;
}
#ascension-seq-shard-label {
    margin: 4px 0 22px;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b8aecb;
    opacity: 0;
    transition: opacity 0.4s ease;
}
#ascension-seq-shard-label.visible {
    opacity: 1;
}
#ascension-seq-total-row {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid rgba(0, 229, 255, 0.25);
    border-bottom: 1px solid rgba(0, 229, 255, 0.25);
}
#ascension-seq-total-row.visible {
    display: flex;
}
#ascension-seq-total-label {
    font-size: 14px;
    color: #b8aecb;
    letter-spacing: 2px;
    text-transform: uppercase;
}
#ascension-seq-total-value {
    font-family: var(--font-display);
    font-size: 72px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-mythic);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.6);
}
#ascension-seq-total-value.reveal {
    animation: ascension-total-reveal 0.8s cubic-bezier(0.2, 1.6, 0.4, 1);
}
@keyframes ascension-total-reveal {
    0% { transform: scale(0.3); text-shadow: 0 0 0px var(--color-mythic); }
    50% { transform: scale(1.5); text-shadow: 0 0 50px var(--color-mythic), 0 0 90px var(--color-epic); }
    100% { transform: scale(1); text-shadow: 0 0 10px rgba(0, 229, 255, 0.6); }
}

#ascension-seq-continue-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 30px;
    z-index: 5;
    text-align: center;
    font-size: 13px;
    letter-spacing: 1px;
    color: #b8aecb;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
    animation: prestige-continue-hint-pulse 1.8s ease-in-out infinite;
}
#ascension-seq-continue-hint.visible {
    opacity: 0.85;
}



        #offline-progress-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0,0,0,0.6);
            align-items: center;
            justify-content: center;
        }
        #offline-progress-modal .modal-content {
            background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
            margin: auto;
            padding: 20px;
            border: 1px solid rgba(242, 215, 138, 0.25);
            border-radius: 8px;
            width: 90%;
            max-width: 400px;
            text-align: center;
            box-shadow: 0 5px 25px rgba(0,0,0,0.7);
        }
        #offline-progress-modal .modal-content h3 {
            margin-top: 0;
            color: var(--gold-color);
        }
        .offline-gains {
            text-align: left;
            margin: 20px 0;
            padding: 15px;
            background-color: #2a2a2a;
            border-radius: 4px;
        }
        .offline-gains p {
            margin: 8px 0;
        }
         #offline-loot h4 {
            margin-top: 15px;
            border-top: 1px solid var(--border-color);
            padding-top: 10px;
        }
        #offline-loot-list {
            list-style: none;
            padding: 0;
            font-size: 14px;
        }
        #close-offline-modal {
            background-color: var(--color-rare);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }

#visual-combat-overlay {
    display: none;
    position: absolute;
    inset: -15px;
    z-index: 5000;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: var(--parchment-shadow);
}

/* Schlachtfeld-Hintergrund: zwei Parallax-Ebenen. Beginnt oben ganz am
   Bildschirmrand (der Header schwebt wie ueberall sonst transparent darueber),
   endet unten kurz oberhalb der Faehigkeits-Buttons-Leiste (#combat-boost-bar
   sitzt bei bottom:78px + ~46px Slot-Hoehe). 40% Himmel+Wald oben, 60% Boden
   unten, wie festgelegt. */
#vc-battlefield-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 150px;
    z-index: 0;
    overflow: hidden;
}
#vc-bg-far {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75%;
    /* background-image wird jetzt per JS gesetzt (visualCombat.setBattlefieldTheme) -
       je nach Feldertyp des aktuellen Kampfes (Wald, Wiese, Wueste, Sumpf, ...). */
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 bottom;
}
#vc-bg-ground {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65%;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: 0 top;
}

#visual-combat-overlay.vc-shake { animation: var(--anim-vc-screen-shake); will-change: transform; }
#visual-combat-overlay.vc-shake-big { animation: var(--anim-vc-screen-shake-big); will-change: transform; }
@keyframes vc-screen-shake {
    0%, 100% { transform: translate(0, 0); }
    20% { transform: translate(-4px, 2px); }
    40% { transform: translate(4px, -2px); }
    60% { transform: translate(-3px, -2px); }
    80% { transform: translate(3px, 2px); }
}
@keyframes vc-screen-shake-big {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    15% { transform: translate(-8px, 4px) rotate(-0.5deg); }
    30% { transform: translate(8px, -4px) rotate(0.5deg); }
    45% { transform: translate(-7px, -3px) rotate(-0.4deg); }
    60% { transform: translate(7px, 3px) rotate(0.4deg); }
    75% { transform: translate(-4px, 2px) rotate(-0.2deg); }
    90% { transform: translate(4px, -2px) rotate(0.2deg); }
}

#visual-combat-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse at 15% 15%, rgba(255,140,50,0.20) 0%, transparent 30%),
        radial-gradient(ellipse at 85% 15%, rgba(255,140,50,0.20) 0%, transparent 30%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.7) 0%, transparent 60%),
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}


#visual-combat-overlay.dungeon-combat {
    background-color: #0a0505;
}
#visual-combat-overlay.dungeon-combat::before {
    background:
        radial-gradient(ellipse at 15% 10%, rgba(212,55,55,0.30) 0%, transparent 32%),
        radial-gradient(ellipse at 85% 10%, rgba(212,55,55,0.30) 0%, transparent 32%),
        radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.85) 0%, transparent 65%),
        radial-gradient(ellipse at center, transparent 32%, rgba(0,0,0,0.75) 100%);
}
#visual-combat-overlay.dungeon-combat .vc-ember {
    background: radial-gradient(circle, #ff6a4a 0%, rgba(200, 30, 30, 0.7) 60%, transparent 100%);
    box-shadow: 0 0 8px 3px rgba(212, 55, 55, 0.8);
}

#vc-combo-counter {
    display: none;
    position: absolute;
    top: calc(145px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translate(-50%, 0) scale(1);
    text-align: center;
    z-index: 4;
    pointer-events: none;
    transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}
#vc-combo-counter.visible { display: block; }
#vc-combo-counter.pop { animation: var(--anim-vc-combo-pop); }
@keyframes vc-combo-pop {
    0% { transform: translate(-50%, 0) scale(1); }
    40% { transform: translate(-50%, 0) scale(1.35); }
    100% { transform: translate(-50%, 0) scale(1); }
}
#vc-combo-number {
    display: block;
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    color: var(--gold-bright);
    text-shadow: 0 0 12px rgba(242, 215, 138, 0.6);
}
#vc-combo-label {
    display: block;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--gold-dim);
    margin-top: 2px;
}
#vc-combo-counter.tier-hot #vc-combo-number {
    color: var(--color-legendary);
    text-shadow: 0 0 16px var(--color-legendary), 0 0 30px rgba(255, 128, 0, 0.5);
}
#vc-combo-counter.tier-hot #vc-combo-label { color: var(--color-legendary); }
#vc-combo-counter.tier-blazing #vc-combo-number {
    font-size: 52px;
    color: #ff4444;
    text-shadow: 0 0 20px #ff4444, 0 0 40px rgba(255, 68, 68, 0.6), 0 0 60px var(--color-legendary);
}
#vc-combo-counter.tier-blazing #vc-combo-label {
    color: #ff4444;
}
body.gpu-burst-active #vc-combo-counter.tier-blazing #vc-combo-number,
body.gpu-burst-active #vc-combo-counter.tier-blazing #vc-combo-label {
    animation: var(--anim-vc-combo-blazing);
}
@keyframes vc-combo-blazing {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}


.vc-ember {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffcf7a 0%, rgba(255, 140, 50, 0.6) 60%, transparent 100%);
    box-shadow: 0 0 6px 2px rgba(255, 160, 60, 0.7);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}
body.gpu-burst-active .vc-ember {
    animation: var(--anim-vc-embers);
}
@keyframes vc-ember-rise {
    0% { transform: translateY(0) translateX(0); opacity: 0; }
    12% { opacity: 0.9; }
    100% { transform: translateY(-90vh) translateX(var(--drift, 20px)); opacity: 0; }
}

#visual-combat-background {
    display: none;
}

#visual-combat-exit-btn {
    position: absolute;
    bottom: calc(26% - 40px);
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.55);
    color: var(--gold-bright);
    border: 2px solid var(--gold);
    border-radius: 50%;
    cursor: pointer;
    z-index: 5010;
    transition: background-color 0.2s, transform 0.2s;
}
#visual-combat-exit-btn:hover {
    background-color: rgba(200, 0, 0, 0.8);
    transform: translateX(-50%) scale(1.1);
}

/* Grundpositionierung der Kampf-Kreise. Alle Bewegungen/Animationen (Eintritt,
   Angriffs-Stoss, Faehigkeit, Niederlage) laufen komplett per JavaScript ueber
   die Web Animations API (element.animate()) - keine CSS-Transitions/Keyframes
   mehr dafuer, da die sich als unzuverlaessig erwiesen haben (transitionend
   feuerte nicht immer zuverlaessig). Das macht das Timing hier exakt und
   verlaesslich steuerbar.
   Start-Zustand: unsichtbar (opacity 0), Position wird beim ersten Aufruf von
   JS gesetzt. */
.vc-character {
    position: absolute;
    bottom: calc(53% - 200px);
    width: 20%;
    max-width: 140px;
    text-align: center;
    opacity: 0;
    z-index: 2;
}

#vc-player-area { left: calc(6% + 5px); }
#vc-enemy-area { right: calc(6% + 5px); }

#vc-player-area.active-turn { z-index: 10; }
#vc-enemy-area.active-turn { z-index: 10; }

.vc-character.active-turn img {
    box-shadow: 0 0 10px 3px rgba(242, 215, 138, 0.35), 0 0 22px 6px rgba(242, 215, 138, 0.5);
}

.vc-character img {
    max-width: 100%;
    height: auto;
    max-height: 31vh;
    object-fit: contain;
    filter: drop-shadow(0 5px 15px rgba(0,0,0,0.6));
    border: 2px solid var(--gold-dim);
    border-radius: 8px;
    box-sizing: border-box;
    box-shadow: 0 0 10px 3px rgba(242, 215, 138, 0.35);
}

/* HP-Ring um den Kreis (ersetzt die alten separaten Balken + Namensschilder -
   spart UI-Flaeche, wirkt aufgeraeumter). Fuellstand wird per JS ueber
   stroke-dasharray gesteuert (gleiche Technik wie der XP-Ring am Portrait). */
.vc-hp-ring-svg {
    position: absolute;
    inset: -9px;
    width: calc(100% + 18px);
    height: calc(100% + 18px);
    transform: rotate(-90deg);
    pointer-events: none;
    z-index: 4;
}
.vc-hp-ring-track {
    fill: none;
    stroke: rgba(0,0,0,0.55);
    stroke-width: 5;
}
.vc-hp-ring-fill {
    fill: none;
    stroke: #4caf50;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.35s linear, stroke 0.3s linear;
}
.vc-hp-ring-text {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,0.9);
    white-space: nowrap;
    z-index: 4;
}

.hit-animation {
    /* Nicht mehr aktiv genutzt - Treffer-Feedback laeuft jetzt ueber den roten
       Flash (.hit-flash-overlay/.crit-flash-overlay), Bildschirm-Wackeln nur
       noch bei kritischen Treffern. Regel bleibt harmlos stehen, falls die
       Klasse irgendwo noch gesetzt wird. */
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-10px); }
    40%, 80% { transform: translateX(10px); }
}

.damage-number {
    position: absolute;
    top: 40%;
    left: 50%;
    font-size: 28px;
    font-weight: bold;
    color: white;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
    animation: float-up 1s forwards ease-out;
    z-index: 5020;
}
.damage-number.crit {
    color: var(--gold-color);
    font-size: 64px;
    transform: scale(1.2);
    text-shadow:
        -2px -2px 0 #000,
         2px -2px 0 #000,
        -2px  2px 0 #000,
         2px  2px 0 #000,
         0 0 10px var(--gold-color);
}
@keyframes float-up {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -200%) scale(1.5);
    }
}

#vc-loot-float {
    position: absolute;
    top: calc(14% + 100px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 20;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}
#vc-loot-float.visible {
    opacity: 1;
}
.vc-loot-float-slot {
    width: 51px;
    height: 51px;
    background: linear-gradient(160deg, #241a10 0%, #140d08 100%);
    border: 1.5px solid #4a3424;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.vc-loot-float-slot img {
    width: 80%;
    height: 80%;
    position: absolute;
    top: 10%;
    left: 10%;
    object-fit: contain;
    pointer-events: none;
    border-radius: 50%;
}
.vc-loot-float-slot .item-quantity {
    position: absolute;
    bottom: -4px;
    right: -4px;
    font-size: 11px;
    background: #000;
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    padding: 0 3px;
    color: var(--gold-bright);
}

#vc-victory-popup {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: radial-gradient(ellipse at 50% 0%, #2e1a10 0%, #1a0f0a 60%, #0e0806 100%);
    border: 1px solid rgba(242, 215, 138, 0.4);
    border-radius: 14px;
    padding: 22px 20px 18px;
    text-align: center;
    width: 88%;
    max-width: 340px;
    z-index: 5030;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(163, 53, 238, 0.15),
        0 10px 40px rgba(0,0,0,0.8),
        inset 0 0 40px rgba(163, 53, 238, 0.1);
    animation: var(--anim-vc-victory-appear);
}
@keyframes victory-popup-appear {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#vc-victory-popup::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 15px;
    padding: 1px;
    background: linear-gradient(135deg, var(--gold-bright), var(--color-epic), var(--gold-bright));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

#vc-victory-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translate(-50%, -50%) rotate(0deg);
    background: repeating-conic-gradient(from 0deg, rgba(242, 215, 138, 0.12) 0deg 4deg, transparent 4deg 16deg);
    pointer-events: none;
    z-index: 0;
}
#vc-victory-popup.rays-spin #vc-victory-rays {
    animation: var(--anim-vc-victory-rays);
}
@keyframes vc-victory-rays-spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(70deg); }
}

#vc-victory-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}
.vc-victory-particle {
    position: absolute;
    bottom: -10px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold-bright);
    box-shadow: 0 0 6px 2px rgba(242, 215, 138, 0.8);
    animation: var(--anim-vc-victory-particles);
}
@keyframes vc-victory-particle-rise {
    0% { transform: translateY(0) scale(0.5); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(-140px) scale(1); opacity: 0; }
}

#vc-victory-popup h4 {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0 0 14px;
    background: linear-gradient(180deg, #fff 0%, var(--gold-bright) 45%, var(--color-epic) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(242, 215, 138, 0.6));
}

.vc-victory-gains {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 12px;
}
.vc-victory-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vc-victory-stat-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold-dim);
}
.vc-victory-stat-value {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.5);
}

#vc-victory-items-container {
    position: relative;
    z-index: 1;
}

.vc-timer-container {
    position: relative;
    z-index: 1;
    margin-top: 8px;
}
.vc-timer-container p {
    margin: 6px 0 0;
    font-size: 12px;
    color: #c9b98a;
}
#vc-victory-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0,0,0,0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid rgba(242, 215, 138, 0.3);
}
#vc-victory-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--color-epic), var(--gold-bright));
    transition: width 1s linear;
}

.vc-enemy-elite #vc-enemy-rank-badge {
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5), 0 0 8px 2px var(--color-epic);
}
.vc-enemy-boss #vc-enemy-rank-badge {
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5), 0 0 8px 2px var(--color-legendary);
}

/* Elite-Gegner sind 20% groesser als der Spieler-Kreis. */
.vc-enemy-elite .vc-sprite-wrapper {
    transform: scale(1.2);
}
/* Boss-Gegner sind 75% groesser als der Spieler-Kreis. */
.vc-enemy-boss .vc-sprite-wrapper {
    transform: scale(1.75);
}


#vc-victory-popup h4 {
    margin: 0 0 15px 0;
    font-family: var(--font-display);
    color: var(--gold-bright);
    font-size: 26px;
    letter-spacing: 2px;
    text-shadow: 0 0 12px rgba(242, 215, 138, 0.6);
}
.vc-victory-gains {
    display: flex;
    justify-content: space-around;
    font-size: 16px;
    margin-bottom: 15px;
}
#vc-victory-items-container {
    margin-bottom: 15px;
}
#vc-victory-items-container h5 {
    margin: 0 0 5px 0;
    color: #ccc;
}
#vc-victory-items-list {
    min-height: 20px;
    font-size: 14px;
}
.vc-timer-container {
    font-size: 18px;
    font-weight: bold;
    color: #ddd;
}

#map-view.content-panel.active {
    display: block !important;
    height: 100%;
    padding: 0;
    border: none;
    position: relative;
    overflow: hidden;
}

@keyframes epicWave {
    0% {
        background-position: 150% 150%, 160% 160%;
    }
    50% {
        background-position: -50% -50%, -60% -60%;
    }
    100% {
        background-position: -50% -50%, -60% -60%;
    }
}

#vc-victory-loot-grid {
    display: flex;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    margin-top: 10px;
    padding-bottom: 10px;
}

.vc-loot-slot {
    width: 50px;
    height: 50px;
    background: linear-gradient(160deg, #241a10 0%, #140d08 100%);
    border: 1px solid #4a3424;
    border-radius: 6px;
    position: relative;
    flex-shrink: 0;
    animation: var(--anim-vc-loot-appear);
}
.vc-loot-slot:nth-child(1) { animation-delay: 0.05s; }
.vc-loot-slot:nth-child(2) { animation-delay: 0.1s; }
.vc-loot-slot:nth-child(3) { animation-delay: 0.15s; }
.vc-loot-slot:nth-child(4) { animation-delay: 0.2s; }
.vc-loot-slot:nth-child(5) { animation-delay: 0.25s; }
@keyframes vc-loot-slot-appear {
    0% { transform: scale(0.4); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.vc-loot-slot img {
    width: 90%;
    height: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
    object-fit: contain;
    pointer-events: none;
}

.vc-loot-slot.empty {
    border: 1px dashed #555;
    background-color: rgba(0, 0, 0, 0.2);
}

#item-sell-price-value .log-currency-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

#item-sell-price-value .gold-icon + span {
    color: var(--gold-color);
}
#item-sell-price-value .silver-icon + span {
    color: var(--silver-color);
}
#item-sell-price-value .bronze-icon + span {
    color: var(--bronze-color);
}

#item-quantity-slider {
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: #444;
    border-radius: 5px;
    outline: none;
    opacity: 0.7;
    transition: opacity .2s;
}

#item-quantity-slider:hover {
    opacity: 1;
}

#item-quantity-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--gold-color);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #2a2a2a;
}

#item-quantity-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--gold-color);
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #2a2a2a;
}

        @media (max-width: 1024px) {
            #map-view.active {
                flex-direction: column;
                align-items: center;
            }
            .map-container { width: 100%; max-width: 460px; }
            .enemy-container { width: 100%; max-width: 460px; }
        }

.vc-sprite-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 79px;
    height: 79px;
}
.vc-portrait-ring {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid var(--gold-dim);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 16px 2px rgba(242, 215, 138, 0.35), inset 0 0 12px rgba(0,0,0,0.6);
    pointer-events: none;
    z-index: 3;
}

/* Gefangennahme-Sequenz: ein KOMPLETT EIGENES, dediziertes leuchtendes Ring-
   Element (nicht der wiederverwendete Kampf-Ring) - pulsiert kraeftig lila,
   sitzt als eigene Ebene ueber allem anderen im Klon. */
.vc-capture-ring {
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 4px solid var(--color-epic);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.5), 0 0 26px 8px rgba(163, 53, 238, 0.95), 0 0 50px 16px rgba(163, 53, 238, 0.6), inset 0 0 16px rgba(163, 53, 238, 0.5);
    pointer-events: none;
    z-index: 20;
    animation: vc-capture-glow-pulse 1s ease-in-out infinite;
}
@keyframes vc-capture-glow-pulse {
    0%, 100% { filter: brightness(1); transform: scale(1); }
    50% { filter: brightness(1.4); transform: scale(1.04); }
}
.vc-capture-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, calc(-50% + 60px));
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--color-epic);
    text-shadow: 0 0 10px rgba(163, 53, 238, 0.9), 0 0 22px rgba(163, 53, 238, 0.6), 0 2px 3px #000;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 4600;
    pointer-events: none;
    white-space: nowrap;
}
.vc-capture-label.visible {
    opacity: 1;
}

#vc-player-sprite, #vc-enemy-sprite {
    width: 79px;
    height: 79px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    background: radial-gradient(circle at 35% 30%, #3a2c14 0%, #171208 78%);
    box-shadow: inset 0 0 14px rgba(0,0,0,0.7);
    position: relative;
    z-index: 1;
}
.vc-enemy-tough .vc-portrait-ring {
    border-color: #5b9bd5;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 16px 3px rgba(91, 155, 213, 0.6), inset 0 0 12px rgba(0,0,0,0.6);
}
.vc-enemy-brutal .vc-portrait-ring {
    border-color: #e0483e;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 16px 3px rgba(224, 72, 62, 0.6), inset 0 0 12px rgba(0,0,0,0.6);
}
.vc-enemy-elite .vc-portrait-ring {
    border-color: var(--color-epic);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 18px 3px rgba(163, 53, 238, 0.55), inset 0 0 12px rgba(0,0,0,0.6);
}
.vc-enemy-boss .vc-portrait-ring {
    border-color: var(--color-legendary);
    box-shadow: 0 0 0 2px rgba(0,0,0,0.6), 0 0 20px 4px rgba(255, 128, 0, 0.6), inset 0 0 12px rgba(0,0,0,0.6);
}

#vc-enemy-level-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 1.5px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-bright);
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    text-shadow: 0 0 4px rgba(242, 215, 138, 0.6);
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.7), inset 0 1px 3px rgba(0,0,0,0.7);
}
/* Archetyp-Anzeige direkt am Level-Kreis des Gegners: rot leuchtend fuer
   "brutal" (hoher Schaden), blau leuchtend fuer "tough"/Ausdauernd (hohe HP) -
   rein visuell, ohne zusaetzlichen Text, dieselben Farben wie beim Bilderrahmen
   (.vc-portrait-ring) fuer Konsistenz. */
.vc-enemy-brutal #vc-enemy-level-badge {
    border-color: #e0483e;
    box-shadow: 0 0 4px 1px #e0483e, 0 0 10px 3px rgba(224, 72, 62, 0.8), 0 2px 4px rgba(0,0,0,0.7), inset 0 1px 3px rgba(0,0,0,0.7);
}
.vc-enemy-tough #vc-enemy-level-badge {
    border-color: #5b9bd5;
    box-shadow: 0 0 4px 1px #5b9bd5, 0 0 10px 3px rgba(91, 155, 213, 0.8), 0 2px 4px rgba(0,0,0,0.7), inset 0 1px 3px rgba(0,0,0,0.7);
}

#vc-enemy-rank-badge {
    background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-shadow) 100%);
    width: 45px;
    border: 1px solid var(--gold-dim);
    box-shadow: inset 0 0 4px rgba(0,0,0,0.6), 0 0 6px 1px rgba(201, 165, 68, 0.4);
    padding: 2px 1px;
    font-family: var(--font-display);
    font-size: 7px;
    font-weight: 700;
    letter-spacing: 0.5px;
    position: absolute;
    bottom: -6px;
    left: 50%;
    overflow: hidden;
    transform: translateX(-50%);
    border-radius: 4px;
    color: var(--gold-bright);
    text-transform: uppercase;
    white-space: nowrap;
    z-index: 10;
}

#vc-enemy-cast-bar {
    background: linear-gradient(to right, var(--arcane), var(--arcane-bright));
    border-radius: 4px;
    transition: width 0.5s linear;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    opacity: 0.85;
    box-shadow: 0 0 6px rgba(61, 159, 212, 0.8);
    transition: width 1s linear;
}

#vc-enemy-buff-container {
    position: absolute;
    bottom: calc(100% + 13px);
    top: auto;
    left: -6px;
    right: -6px;
    display: flex;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
}

#vc-player-buff-container {
    position: absolute;
    bottom: calc(100% + 13px);
    top: auto;
    left: -6px;
    right: -6px;
    display: flex;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
    z-index: 4;
}
.vc-player-buff-icon {
    width: 26px;
    height: 26px;
    background-color: rgba(0,0,0,0.7);
    border-radius: 5px;
    border: 1px solid var(--gold-dim);
    box-shadow: 0 0 6px 2px rgba(212, 175, 55, 0.6);
    display: none;
    justify-content: center;
    align-items: center;
    position: relative;
}
.vc-player-buff-icon.visible {
    display: flex;
}
.vc-player-buff-icon img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    border-radius: 3px;
}
.vc-player-buff-icon .vc-buff-duration {
    position: absolute;
    bottom: -5px;
    right: -5px;
    background: rgba(0,0,0,0.85);
    color: var(--gold-bright);
    font-size: 9px;
    font-weight: 900;
    padding: 0 3px;
    border-radius: 5px;
    border: 1px solid var(--gold-dim);
    line-height: 1.3;
}

.vc-enemy-buff-icon {
    width: 25px;
    height: 25px;
    background-color: rgba(0,0,0,0.6);
    border-radius: 4px;
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    justify-content: center;
    align-items: center;
    border: none;
}

#vc-enemy-buff-hp {
    background-image: url('buff_reg.png');
    box-shadow: 0 0 7px 2px rgba(10, 255, 80, 0.7);
}

#vc-enemy-buff-def {
    background-image: url('buff_def.png');
    box-shadow: 0 0 7px 2px rgba(50, 150, 255, 0.8);
}

.vc-enemy-buff-icon span {
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0 4px;
    border-radius: 4px;
}

#vc-enemy-cast-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: var(--gold-color);
    opacity: 0.8;
    transition: width 1s linear;
}

.vc-enemy-buff-icon {
    background-size: 80%;
    background-position: center;
    background-repeat: no-repeat;
}

#vc-enemy-buff-hp {
    background-image: url('buff_reg.png');
}

#vc-enemy-buff-def {
    background-image: url('buff_def.png');
}

.vc-debuff-icon {
    box-shadow: 0 0 7px 2px rgba(163, 53, 238, 0.8);
    position: relative;
}
.vc-debuff-icon img {
    width: 80%;
    height: 80%;
    object-fit: contain;
    border-radius: 3px;
}
.vc-stack-count {
    position: absolute;
    top: -4px;
    right: -2px;
    background: rgba(0,0,0,0.85);
    color: var(--color-epic);
    font-size: 7px;
    font-weight: 900;
    padding: 0 2px;
    border-radius: 4px;
    border: 1px solid var(--color-epic);
    line-height: 1.3;
    z-index: 1;
}

.vc-enemy-buff-icon span {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 4px;
    border-radius: 4px;
    font-size: 11px;
}

#visual-combat-overlay {
    transition: box-shadow 0.4s ease-in-out;
}

#visual-combat-overlay.active-combat-border {
    box-shadow: 0 0 12px 4px var(--color-legendary);
}

#dungeon-view.content-panel {
    display: none;
    flex-direction: column;
    align-items: center;
    padding-top: calc(110px + env(safe-area-inset-top, 0px));
    padding-bottom: 92px;
    height: 100dvh;
    box-sizing: border-box;
    overflow: hidden;
}

#dungeon-view.active {
    display: flex;
}

#dungeon-view.content-panel {
    background: radial-gradient(ellipse at 50% 0%, #241512 0%, #120a08 55%, #060403 100%);
}
#dungeon-embers {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
#dungeon-embers::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    background-image:
        radial-gradient(2px 2px at 15% 85%, rgba(255,120,40,0.8), transparent),
        radial-gradient(1.5px 1.5px at 45% 92%, rgba(255,160,60,0.7), transparent),
        radial-gradient(2px 2px at 75% 88%, rgba(255,90,30,0.75), transparent);
    opacity: 0;
}
body.gpu-burst-active #dungeon-embers::before {
    animation: dungeon-ember-rise 2.6s ease-out;
}
@keyframes dungeon-ember-rise {
    0% { transform: translateY(0); opacity: 0; }
    12% { opacity: 1; }
    100% { transform: translateY(-160%); opacity: 0; }
}

#dungeon-header {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    margin-bottom: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
#dungeon-title {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 3px;
    margin: 0;
    color: #ff9a5a;
    text-shadow: 0 0 10px rgba(255, 100, 30, 0.7), 0 0 24px rgba(255, 60, 20, 0.5);
}

#dungeon-grid-container {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#dungeon-grid-frame {
    position: relative;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(160deg, #2a1d16 0%, #16100b 100%);
    border: 2px solid #5a3a24;
    box-shadow:
        0 0 0 1px rgba(255, 100, 30, 0.25),
        0 0 30px rgba(0, 0, 0, 0.8),
        inset 0 0 40px rgba(0, 0, 0, 0.6);
}
#dungeon-grid-frame::before {
    content: '';
    position: absolute;
    top: 6px; left: 6px; right: 6px; bottom: 6px;
    border: 1px solid rgba(255, 120, 40, 0.2);
    border-radius: 8px;
    pointer-events: none;
}

#dungeon-grid {
    display: grid;
    grid-template-columns: repeat(5, 60px);
    grid-template-rows: repeat(5, 60px);
    gap: 8px;
    box-sizing: content-box;
    flex-shrink: 0;
    position: relative;
}

#dungeon-exit-btn {
    padding: 9px 20px;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #ffd8b0;
    background: linear-gradient(160deg, #7a2810 0%, #4a1608 100%);
    border: 1px solid rgba(255, 120, 40, 0.5);
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 0 12px rgba(255, 90, 30, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

#dungeon-exit-btn:hover {
    transform: scale(1.04);
    box-shadow: 0 0 18px rgba(255, 90, 30, 0.6);
}

.dungeon-tile {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #3a2a1e 0%, #1c140e 100%);
    border: 1px solid #4a3424;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6);
}

.dungeon-tile.hidden {
    background:
        radial-gradient(circle at 30% 30%, rgba(90, 60, 30, 0.25) 0%, transparent 55%),
        linear-gradient(160deg, #221812 0%, #100b08 100%);
    border-color: #3a2a1e;
    cursor: not-allowed;
}

.dungeon-tile.revealed {
    border-color: #6a4a30;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 0 8px rgba(255, 100, 30, 0.25);
}
.dungeon-tile.revealed:hover {
    transform: scale(1.08);
    box-shadow: 0 0 16px rgba(255, 140, 50, 0.7);
    border-color: #ff9a5a;
}

.dungeon-tile-normal.revealed { border-color: #8a6a4a; color: #d8c4a8; }
.dungeon-tile-normal.revealed .enemy-icon { color: #d8c4a8; }

.dungeon-tile-elite.revealed {
    border-color: var(--color-epic);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 0 12px rgba(163, 53, 238, 0.5);
}
.dungeon-tile-elite.revealed .enemy-icon { color: #c988ff; }
.dungeon-tile-elite.revealed::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 20px 4px rgba(163, 53, 238, 0.8);
    opacity: 0;
    pointer-events: none;
}

.dungeon-tile-boss.revealed {
    border-color: var(--color-legendary);
    box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 0 16px rgba(255, 128, 0, 0.6);
}
.dungeon-tile-boss.revealed .enemy-icon { color: #ffb84d; }
.dungeon-tile-boss.revealed::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 26px 6px rgba(255, 128, 0, 0.9);
    opacity: 0;
    pointer-events: none;
}

.dungeon-tile.cleared {
    background: linear-gradient(160deg, #1a1410 0%, #0d0a08 100%);
    border-color: #2a2018;
    opacity: 0.45;
    cursor: not-allowed;
    animation: none;
    box-shadow: none;
}

.dungeon-tile .enemy-icon {
    width: 60%;
    height: 60%;
    display: flex;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}
.dungeon-tile .enemy-icon svg { width: 100%; height: 100%; }

#city-header {
    width: 100%;
    max-width: 420px;
    margin-bottom: 16px;
    text-align: center;
}
#city-name-header {
    font-family: var(--font-display);
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.5);
    font-size: 22px;
    margin: 0;
}

#city-grid-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    flex: 1;
    min-height: 0;
}

#city-grid {
    display: grid;
    grid-template-columns: repeat(15, 60px);
    grid-template-rows: repeat(15, 60px);
    gap: 5px;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease-in-out;
}

.city-tile {
    position: relative;
}
.city-tile.map-tile {
    background-color: #333;
}

.city-tile.road {
    /* Hintergrund (Fussspuren + Rand-Steine) wird jetzt individuell PRO
       KACHEL in JS berechnet (siehe buildRoadTileBackground() in city.js) -
       Fussspuren zeigen nur, wo der Weg wirklich weitergeht, Steine nur da,
       wo tatsaechlich Gras angrenzt. Hier nur noch die Grundfarbe. */
    background-color: #c9a876;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.city-tile.building img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.city-tile-name {
    bottom: 0 !important;
    top: auto !important;
    background-color: rgba(0,0,0,0.75) !important;
    width: 100%;
    box-sizing: border-box;
    border-radius: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: normal !important;
    line-height: 1.1;
    padding: 2px 3px !important;
    font-size: 9px !important;
}

.city-tile.exit-tile {
    background: linear-gradient(160deg, #3a1414 0%, #1a0808 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.city-tile.exit-tile:hover {
    box-shadow: 0 0 10px #ff6b6b;
}
.city-tile.exit-tile svg {
    width: 45%;
    height: 45%;
    color: #ff8080;
}

.city-tile.grass {
    /* Bug-Fix: hatte bisher eine zusaetzliche 35%-Abdunklung (dunkelgruener
       Verlauf ueber dem Bild), die die Hauptkarte fuer dieselbe Grasflaeche
       nicht hat - das liess das Dorf/die Stadt insgesamt dunkler wirken.
       Jetzt dieselbe Helligkeit wie auf der Hauptkarte. */
    background-image: url('wiese.jpg');
    background-size: cover;
    background-position: center;
    cursor: default;
}
.city-tile.grass:hover {
    transform: none;
    box-shadow: none;
}

.city-tile.road.fountain {
    display: flex;
    align-items: center;
    justify-content: center;
}
.city-fountain {
    width: 70%;
    height: 70%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #cdeeff 0%, #6fb8d8 55%, #3a7a9a 100%);
    box-shadow: 0 0 10px 2px rgba(140, 210, 240, 0.6), inset 0 0 6px rgba(0,0,0,0.4);
    position: relative;
    animation: city-fountain-shimmer 2.4s ease-in-out infinite;
}
@keyframes city-fountain-shimmer {
    0%, 100% { box-shadow: 0 0 10px 2px rgba(140, 210, 240, 0.6), inset 0 0 6px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 16px 4px rgba(140, 210, 240, 0.85), inset 0 0 6px rgba(0,0,0,0.4); }
}

.city-player-marker {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 8;
}
.city-player-marker::after {
    content: '';
    width: 60%;
    height: 60%;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.8);
}
@keyframes city-player-vibrate {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.25); opacity: 0.6; }
}

#city-return-btn {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 50;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(160deg, #4a3a24 0%, #2a2014 100%);
    border: 2px solid var(--gold-dim);
    border-radius: 20px;
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    transition: all 0.2s ease;
}
#city-return-btn.visible {
    display: flex;
}
#city-return-btn:hover {
    border-color: var(--gold-bright);
    box-shadow: 0 0 12px rgba(242, 215, 138, 0.5);
}
#city-return-btn svg {
    width: 16px;
    height: 16px;
}

#central-content.map-active {
    padding: 0;
}

.map-tile-level {
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 9px;
    font-weight: bold;
    text-shadow:
        -1px -1px 0 #000,
         1px -1px 0 #000,
        -1px  1px 0 #000,
         1px  1px 0 #000;
    z-index: 5;
    pointer-events: none;
}

.map-tile.fogged .map-tile-level {
    display: none;
}

.map-tile-level {
    width: 22px;
    height: 12px;
    border-radius: 40%;
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 1px 1px 1px #000;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.8);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 5;
    pointer-events: none;
    transition: background-color 0.3s ease;
}

.map-tile.fogged .map-tile-level {
    display: none;
}

.map-tile.diff-trivial .map-tile-level   { background-color: var(--diff-trivial); }
.map-tile.diff-easy .map-tile-level      { background-color: var(--diff-easy); }
.map-tile.diff-medium .map-tile-level    { background-color: var(--diff-medium); }
.map-tile.diff-hard .map-tile-level      { background-color: var(--diff-hard); }
.map-tile.diff-hardcore .map-tile-level  { background-color: var(--diff-hardcore); }

#ingame-time-display {
    font-size: 12px;
    color: #ccc;
    text-shadow: 1px 1px 2px #000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    letter-spacing: 0.5px;
}


#weather-overlay {
    position: fixed;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 150;
}

body.dungeon-active #bottom-section {
    display: none;
}

.map-tile.on-cooldown {
    cursor: not-allowed !important;
}

.map-tile.on-cooldown img {
    filter: brightness(0.3) grayscale(60%);
}

.dungeon-cooldown-timer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 0 5px black, 0 0 10px #ff4d4d;
    pointer-events: none;
    z-index: 15;
}

#ad-simulation-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 6000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ad-simulation-box {
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: 1px solid rgba(242, 215, 138, 0.25);
    border-radius: 8px;
    padding: 30px 25px;
    text-align: center;
    width: 85%;
    max-width: 320px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
#ad-simulation-box h3 {
    font-family: var(--font-display);
    color: var(--gold-bright);
    margin-top: 0;
}
#ad-simulation-box p {
    color: var(--text-color);
    font-size: 14px;
}
#ad-simulation-bar-track {
    width: 100%;
    height: 10px;
    background: #0a0704;
    border: 1px solid var(--gold-dim);
    border-radius: 5px;
    overflow: hidden;
    margin-top: 15px;
}
#ad-simulation-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
    transition: width 1s linear;
}
#auto-battle-status {
    font-size: 13px;
    font-weight: 700;
    color: var(--gold-bright);
}
#auto-battle-status.active {
    color: var(--color-uncommon);
}

#auto-battle-map-icon {
    position: absolute;
    top: 130px;
    left: 14px;
    right: auto;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 2px solid var(--gold);
    color: var(--gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(242, 215, 138, 0.5), inset 0 1px 3px rgba(0,0,0,0.8);
    transition: opacity 0.3s ease, filter 0.3s ease;
}
#auto-battle-map-icon::after, #vip-map-icon::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    box-shadow: 0 0 18px rgba(242, 215, 138, 0.8);
    pointer-events: none;
}
@keyframes map-icon-scale-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes map-icon-glow-pulse {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
#auto-battle-map-icon svg {
    width: 24px;
    height: 24px;
}
#auto-battle-map-icon.on-cooldown {
    filter: grayscale(1);
    opacity: 0.55;
    box-shadow: none;
    animation: none;
}
#auto-battle-map-icon.on-cooldown.paused {
    filter: grayscale(0.4);
    opacity: 0.8;
    border-color: var(--color-mythic);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}
#auto-battle-map-timer {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gold-bright);
    text-shadow: 0 1px 2px #000, 0 0 4px rgba(0,0,0,0.9);
    white-space: nowrap;
}

/* ---- Auto-Verkauf-Filter-Overlay (Inventar) ---- */
#loot-filter-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 6000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#loot-filter-box {
    position: relative;
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: 1px solid rgba(242, 215, 138, 0.25);
    border-radius: 10px;
    padding: 22px 20px 20px;
    text-align: left;
    width: 88%;
    max-width: 360px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
#loot-filter-box h3 {
    font-family: var(--font-display);
    color: var(--gold-bright);
    text-align: center;
    margin: 0 0 8px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
#loot-filter-desc {
    color: var(--text-color);
    font-size: 12.5px;
    line-height: 1.4;
    text-align: center;
    margin: 0 0 18px;
    opacity: 0.85;
}
.loot-filter-row {
    margin-bottom: 16px;
}
.loot-filter-row-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--text-color);
}
.loot-filter-row-value {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--gold-bright);
    font-size: 13px;
}
.loot-filter-rarity-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.loot-filter-rarity-pill {
    flex: 1 1 0;
    min-width: 44px;
    padding: 6px 2px;
    border-radius: 6px;
    border: 1.5px solid var(--gold-dim);
    background: rgba(0,0,0,0.35);
    color: #cfc4a8;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.15s ease;
}
.loot-filter-rarity-pill.active {
    color: #16110a;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    transform: scale(1.05);
}
.loot-filter-stepper {
    display: flex;
    align-items: stretch;
    gap: 6px;
}
.loot-filter-step-btn {
    width: 40px;
    border-radius: 6px;
    border: 1.5px solid var(--gold-dim);
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
}
.loot-filter-step-btn:active {
    transform: scale(0.94);
}
.loot-filter-stepper input[type="number"] {
    flex: 1;
    min-width: 0;
    text-align: center;
    background: rgba(0,0,0,0.35);
    border: 1.5px solid var(--gold-dim);
    border-radius: 6px;
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    -moz-appearance: textfield;
}
.loot-filter-stepper input[type="number"]::-webkit-outer-spin-button,
.loot-filter-stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#loot-filter-done-btn {
    width: 100%;
    margin-top: 4px;
}

#ad-confirm-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 6000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#ad-confirm-box {
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: 1px solid rgba(242, 215, 138, 0.25);
    border-radius: 8px;
    padding: 25px 20px;
    text-align: center;
    width: 85%;
    max-width: 320px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
#ad-confirm-box p {
    color: var(--text-color);
    font-size: 15px;
    margin: 0 0 18px 0;
}
#ad-confirm-box strong {
    color: var(--gold-bright);
}
#ad-confirm-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crit-flash-overlay {
    position: absolute;
    background: rgba(220, 30, 30, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    animation: crit-flash-overlay-anim 0.4s ease-out;
    will-change: opacity;
}
.hit-flash-overlay {
    position: absolute;
    background: rgba(220, 30, 30, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    animation: hit-flash-overlay-anim 0.28s ease-out;
    will-change: opacity;
}
@keyframes hit-flash-overlay-anim {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes crit-flash-overlay-anim {
    0% { opacity: 0; }
    25% { opacity: 1; }
    100% { opacity: 0; }
}

.crit-label {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--blood-bright);
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000, 0 0 10px rgba(212,55,55,0.8);
    pointer-events: none;
    animation: float-up 1s forwards ease-out;
    z-index: 5021;
}

.combat-feedback-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 42px;
    height: 42px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5015;
    opacity: 0.6;
    animation: var(--anim-vc-combat-icon);
}
.combat-feedback-icon svg {
    width: 100%;
    height: 100%;
}
.combat-feedback-dodge {
    color: var(--color-mythic);
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.7));
}
.combat-feedback-block {
    color: var(--arcane-bright);
    filter: drop-shadow(0 0 6px rgba(61, 159, 212, 0.7));
}
@keyframes combat-icon-pulse {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.75); }
    15% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    35% { transform: translate(-50%, -50%) scale(0.85); }
    55% { transform: translate(-50%, -50%) scale(1); }
    75% { transform: translate(-50%, -50%) scale(0.88); opacity: 0.6; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

.balance-slider-row {
    margin-bottom: 16px;
}
.balance-slider-row label {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--text-color);
    margin-bottom: 6px;
}
.balance-slider-val {
    color: var(--gold-bright);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.balance-slider-input {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
    border-radius: 3px;
    outline: none;
    margin: 0;
}
.balance-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, var(--gold-bright) 0%, var(--gold-dim) 80%);
    border: 2px solid var(--parchment-shadow);
    box-shadow: 0 0 6px rgba(242, 215, 138, 0.7);
    cursor: pointer;
}
.balance-slider-input::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, var(--gold-bright) 0%, var(--gold-dim) 80%);
    border: 2px solid var(--parchment-shadow);
    box-shadow: 0 0 6px rgba(242, 215, 138, 0.7);
    cursor: pointer;
}

.auto-battle-locked-tile {
    box-shadow: inset 0 0 0 3px var(--color-mythic), 0 0 10px rgba(0, 229, 255, 0.6) !important;
    position: relative;
}
.auto-battle-locked-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.85);
    opacity: 0;
    pointer-events: none;
}

#vip-map-icon {
    position: absolute;
    top: 26px;
    right: 10px;
    z-index: 50;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 2px solid var(--gold);
    color: var(--gold-bright);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(242, 215, 138, 0.5), inset 0 1px 3px rgba(0,0,0,0.8);
}
#vip-map-icon svg {
    width: 22px;
    height: 22px;
}
#vip-map-icon.is-vip {
    border-color: var(--color-legendary);
    color: var(--color-legendary);
    animation: none;
    box-shadow: 0 0 12px rgba(255, 128, 0, 0.7);
}

#vip-shop-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 6000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#vip-shop-box {
    position: relative;
    background: radial-gradient(ellipse at 50% 0%, #16222e 0%, #0c141c 60%, #060a0e 100%);
    border: 1px solid rgba(90, 160, 220, 0.35);
    border-radius: 14px;
    width: 88%;
    max-width: 400px;
    max-height: 85vh;
    max-height: 85dvh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow:
        0 0 0 1px rgba(242, 215, 138, 0.12),
        0 10px 40px rgba(0,0,0,0.8),
        inset 0 0 40px rgba(90, 160, 220, 0.08);
}
#epic-shop-rays {
    position: absolute;
    top: -80px;
    left: 50%;
    width: 500px;
    height: 500px;
    transform: translateX(-50%) rotate(0deg);
    background: repeating-conic-gradient(from 0deg, rgba(242, 215, 138, 0.1) 0deg 4deg, transparent 4deg 16deg);
    pointer-events: none;
    z-index: 0;
}
body.gpu-burst-active #epic-shop-rays {
    animation: vc-victory-rays-spin 3s ease-in-out;
}
#vip-shop-box .settings-header {
    position: relative;
    z-index: 1;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(90, 160, 220, 0.25);
}
#vip-shop-box .settings-header h2 {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 2px;
    background: linear-gradient(180deg, #fff 0%, var(--gold-bright) 45%, var(--color-epic) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 10px rgba(242, 215, 138, 0.5));
}
#epic-currency-display {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 18px 0;
    padding: 10px;
    background: rgba(0,0,0,0.35);
    border: 1px solid var(--gold-dim);
    border-radius: 20px;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--gold-bright);
    box-shadow: 0 0 14px rgba(242, 215, 138, 0.25);
}
#epic-currency-display svg {
    width: 22px;
    height: 22px;
    fill: var(--gold-bright);
    filter: drop-shadow(0 0 4px rgba(242, 215, 138, 0.5));
}
#vip-shop-content {
    position: relative;
    z-index: 1;
    padding: 4px 18px 18px;
}
.epic-shop-section {
    padding: 16px 0;
}
.epic-shop-section h3 {
    font-family: var(--font-display);
    color: var(--gold-bright);
    text-shadow: 0 0 6px rgba(242, 215, 138, 0.3);
    margin: 0 0 10px 0;
    font-size: 16px;
}
.epic-shop-section p {
    font-size: 13px;
    color: var(--text-color);
    margin: 0 0 14px 0;
    line-height: 1.5;
}
.epic-shop-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(90, 160, 220, 0.4), transparent);
}
#vip-status-line {
    font-size: 13px;
    margin-bottom: 14px;
    color: var(--text-color);
}
#vip-status-text {
    font-weight: 700;
    color: #8ec4f0;
}
#vip-status-text.active {
    color: var(--color-legendary);
}

.vip-membership-card {
    position: relative;
    background: linear-gradient(160deg, rgba(242, 215, 138, 0.12) 0%, rgba(20, 15, 8, 0.6) 100%);
    border: 1px solid rgba(242, 215, 138, 0.5);
    border-radius: 12px;
    padding: 16px !important;
    box-shadow: 0 0 18px rgba(242, 215, 138, 0.18), inset 0 0 20px rgba(242, 215, 138, 0.06);
}
.vip-crown-badge {
    position: absolute;
    top: -12px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
    border-radius: 12px;
    color: #2a1d0a;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.vip-crown-badge svg {
    width: 14px;
    height: 14px;
    fill: #2a1d0a;
}

.epic-pack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.epic-pack-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 8px 12px;
    background: linear-gradient(160deg, rgba(90, 160, 220, 0.15) 0%, rgba(15, 22, 30, 0.6) 100%);
    border: 1px solid rgba(90, 160, 220, 0.4);
    border-radius: 12px;
    cursor: pointer;
    overflow: visible;
}
.epic-pack-btn:hover {
    border-color: #8ec4f0;
    box-shadow: 0 0 10px rgba(90, 160, 220, 0.35);
}
.epic-pack-btn.best-value {
    border: 1px solid var(--gold-bright);
    background: linear-gradient(160deg, rgba(242, 215, 138, 0.18) 0%, rgba(15, 22, 30, 0.6) 100%);
    box-shadow: 0 0 16px rgba(242, 215, 138, 0.3);
    transform: scale(1.03);
}
.epic-pack-badge {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 3px 8px;
    background: linear-gradient(180deg, #ff8a5a 0%, #d4571a 100%);
    color: #fff;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.5px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}
.epic-pack-badge.best {
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
    color: #2a1d0a;
}
.epic-pack-amount {
    font-family: var(--font-display);
    color: var(--gold-bright);
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    margin-top: 4px;
}
.epic-pack-label {
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #b8c8d8;
    margin-bottom: 4px;
}
.epic-pack-price {
    font-size: 13px;
    font-weight: 700;
    color: #eaf2fa;
    background: rgba(0,0,0,0.35);
    padding: 3px 10px;
    border-radius: 10px;
}

.epic-item-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.epic-item-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 4px;
    background: linear-gradient(160deg, rgba(30, 20, 15, 0.7) 0%, rgba(10, 8, 6, 0.8) 100%);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.1s ease;
}
.epic-item-card:hover {
    transform: translateY(-2px);
}
.epic-item-card.rarity-rare { border-color: var(--color-rare); box-shadow: 0 0 18px rgba(0, 112, 221, 0.65), inset 0 0 10px rgba(0, 112, 221, 0.15); }
.epic-item-card.rarity-epic { border-color: var(--color-epic); box-shadow: 0 0 18px rgba(163, 53, 238, 0.65), inset 0 0 10px rgba(163, 53, 238, 0.15); }
.epic-item-card.rarity-legendary { border-color: var(--color-legendary); box-shadow: 0 0 18px rgba(255, 128, 0, 0.65), inset 0 0 10px rgba(255, 128, 0, 0.15); }
.epic-item-card.rarity-mythic { border-color: var(--color-mythic); box-shadow: 0 0 22px rgba(0, 229, 255, 0.75), inset 0 0 10px rgba(0, 229, 255, 0.2); }

.epic-item-preview-stack {
    position: relative;
    width: 44px;
    height: 38px;
    margin-bottom: 2px;
}
.stack-img {
    position: absolute;
    width: 26px;
    height: 26px;
    object-fit: cover;
    border-radius: 6px;
    background: #0a0a0a;
    border: 1.5px solid currentColor;
    box-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.stack-1 { top: 0; left: 0; transform: rotate(-8deg); z-index: 1; }
.stack-2 { top: 2px; left: 9px; transform: rotate(4deg); z-index: 2; }
.stack-3 { top: 0; left: 18px; transform: rotate(12deg); z-index: 3; }
.rarity-rare .stack-img { color: var(--color-rare); }
.rarity-epic .stack-img { color: var(--color-epic); }
.rarity-legendary .stack-img { color: var(--color-legendary); }
.rarity-mythic .stack-img { color: var(--color-mythic); }

.dice-card-bronze { border-color: #cd7f32 !important; box-shadow: 0 0 8px rgba(205, 127, 50, 0.45) !important; color: #cd7f32; }
.dice-card-silver { border-color: #c8ced6 !important; box-shadow: 0 0 8px rgba(200, 206, 214, 0.45) !important; color: #c8ced6; }
.dice-card-gold { border-color: var(--gold-bright) !important; box-shadow: 0 0 8px rgba(242, 215, 138, 0.45) !important; color: var(--gold-bright); }
.dice-card-epic { border-color: var(--color-epic) !important; box-shadow: 0 0 8px rgba(163, 53, 238, 0.45) !important; color: var(--color-epic); }

.epic-item-name {
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    color: #eaf2fa;
}
.epic-item-dice-img {
    width: 34px;
    height: 34px;
    padding: 3px;
    box-sizing: border-box;
    border-radius: 8px;
    border: 1.5px solid currentColor;
    background: rgba(0,0,0,0.4);
}
.epic-item-cost {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-bright);
    background: rgba(0,0,0,0.4);
    padding: 3px 8px;
    border-radius: 10px;
}
.epic-item-cost svg {
    width: 11px;
    height: 11px;
    fill: var(--gold-bright);
}


#pet-assign-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 6200;
    display: flex;
    justify-content: center;
    align-items: center;
}
#pet-assign-box {
    position: relative;
    width: 85%;
    max-width: 320px;
    background: radial-gradient(ellipse at 50% 0%, #1c1410 0%, #100c08 60%, #0a0806 100%);
    border: 1px solid var(--gold-bright);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.85), 0 0 24px -4px rgba(242, 215, 138, 0.4);
    padding: 20px 18px;
}
#pet-assign-title {
    font-family: var(--font-display);
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.4);
    font-size: 16px;
    margin: 0 0 14px;
    padding-right: 24px;
}
#pet-assign-slots {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pet-assign-slot-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: linear-gradient(160deg, rgba(90, 160, 220, 0.15) 0%, rgba(15, 22, 30, 0.6) 100%);
    border: 1px solid rgba(90, 160, 220, 0.4);
    border-radius: 10px;
    color: #eaf2fa;
    font-size: 14px;
    cursor: pointer;
}
.pet-assign-slot-btn:hover:not(.locked) {
    border-color: #8ec4f0;
    box-shadow: 0 0 8px rgba(90, 160, 220, 0.35);
}
.pet-assign-slot-btn.current {
    border-color: var(--color-legendary);
    box-shadow: 0 0 8px rgba(255, 128, 0, 0.35);
}
.pet-assign-slot-btn.locked {
    background: rgba(50, 50, 50, 0.3);
    border-color: #444;
    color: #777;
    cursor: not-allowed;
}
.pet-assign-slot-num {
    font-weight: 700;
    font-family: var(--font-display);
}
.pet-assign-slot-status {
    font-size: 12px;
    color: #b8c8d8;
}
.pet-assign-slot-btn.locked .pet-assign-slot-status {
    color: #777;
}
.pet-assign-arena-btn {
    background: linear-gradient(160deg, rgba(255, 215, 100, 0.2) 0%, rgba(30, 22, 12, 0.6) 100%);
    border: 1px solid rgba(255, 215, 100, 0.55);
}
.pet-assign-arena-btn:hover {
    border-color: #ffe9a8;
    box-shadow: 0 0 8px rgba(255, 215, 100, 0.45);
}
.pet-assign-arena-btn .pet-assign-slot-status {
    color: #ffe9a8;
}

/* Reihe, die Seiten-Nummerierung + Wiederherstellungs-Button nebeneinander haelt -
   der Button bleibt so IMMER sichtbar, auch wenn die Seiten-Nummerierung selbst
   (nur bei mehr als einer Inventar-Seite) ausgeblendet ist. Sieht exakt wie ein
   Seiten-Button aus (.inventory-page-btn), nur mit dem Kreislauf-Symbol drauf. */
#inventory-pager-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}
#item-recovery-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 4px;
    border-radius: 8px;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 2px solid var(--gold-dim);
    color: #d8cba8;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
#item-recovery-btn:hover {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
}

#item-recovery-empty-msg {
    color: #b8b0a0;
    font-size: 13px;
    text-align: center;
    margin: 20px 0;
}
/* Exakt dieselbe Grid-Optik wie das normale Inventar (#inventory-grid) - die
   einzelnen Kacheln nutzen ".inventory-slot" direkt mit, keine eigene Optik.
   Erscheint an genau derselben Stelle im Ausruestungs-Bildschirm wie das
   Inventar selbst (kein Overlay/Popup) - Umschalten per Button ersetzt einfach
   den Inhalt an Ort und Stelle. */
#item-recovery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px;
    padding: 4px 0;
    min-height: 100px;
}
#item-recovery-btn.active {
    border-color: var(--gold-bright);
    color: var(--gold-bright);
    box-shadow: 0 0 8px rgba(242, 215, 138, 0.4);
}

#idle-progress-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.8);
    z-index: 6500;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
}
#idle-progress-box {
    position: relative;
    width: 88%;
    max-width: 380px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: radial-gradient(ellipse at 50% 0%, #1c1410 0%, #100c08 60%, #0a0806 100%);
    border: 1px solid var(--gold-bright);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.85), 0 0 24px -4px rgba(242, 215, 138, 0.4);
    padding: 20px 18px;
    overflow-y: auto;
}
#idle-progress-box h3 {
    font-family: var(--font-display);
    color: var(--gold-bright);
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.4);
    font-size: 20px;
    margin: 0 0 14px;
    text-align: center;
}
#idle-progress-stats {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.idle-progress-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(201, 165, 68, 0.15);
}
.idle-progress-stat-row span:first-child {
    color: #b8b0a0;
}
.idle-progress-stat-row span:last-child {
    color: var(--gold-bright);
    font-weight: 700;
    text-align: right;
}
#idle-progress-level-up {
    text-align: center;
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--color-epic);
    text-shadow: 0 0 10px rgba(163, 53, 238, 0.6);
    margin-bottom: 14px;
    padding: 8px;
    background: rgba(163, 53, 238, 0.1);
    border: 1px solid rgba(163, 53, 238, 0.4);
    border-radius: 8px;
}
#idle-progress-items-title {
    font-size: 13px;
    color: #b8b0a0;
    margin: 4px 0 8px;
}
#idle-progress-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 8px;
    margin-bottom: 16px;
}
#idle-progress-continue-btn {
    padding: 12px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    background: linear-gradient(160deg, rgba(242, 215, 138, 0.25) 0%, rgba(20, 15, 8, 0.8) 100%);
    border: 1px solid var(--gold-bright);
    color: var(--gold-bright);
    border-radius: 10px;
    cursor: pointer;
}
#idle-progress-continue-btn:hover {
    box-shadow: 0 0 12px rgba(242, 215, 138, 0.4);
}

#vip-purchase-confirm-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 6100;
    display: flex;
    justify-content: center;
    align-items: center;
}

#vip-processing-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.85);
    z-index: 6100;
    display: flex;
    justify-content: center;
    align-items: center;
}
#vip-processing-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold-bright));
    transition: width 1.5s linear;
}

.block-adjustment-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}
.block-adjustment-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.block-adjustment-cell label {
    font-size: 10px;
    color: var(--gold-dim);
    margin-bottom: 2px;
}
.block-adjustment-cell input {
    width: 100%;
    max-width: 55px;
    text-align: center;
    background: #0a0704;
    border: 1px solid var(--gold-dim);
    color: var(--gold-bright);
    border-radius: 4px;
    padding: 3px 2px;
    font-size: 12px;
}
.block-adjustment-cell input:not([value="0"]) {
    border-color: var(--color-mythic);
}

#quest-tracker-container {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5010;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 190px;
}

.quest-tracker-card {
    background: rgba(10, 8, 5, 0.28);
    border: 1px solid var(--gold-dim);
    border-radius: 5px;
    padding: 3px 6px;
    cursor: pointer;
    transition: transform 0.15s ease, border-color 0.15s ease;
    max-width: 190px;
    overflow: hidden;
}
.quest-tracker-card.selected {
    border-color: #b18aff;
    box-shadow: 0 0 6px rgba(177, 138, 255, 0.5);
}
.quest-tracker-card:not(.selected) {
    transform: scale(0.75);
    transform-origin: top left;
    opacity: 0.75;
}
.quest-tracker-title {
    color: var(--gold-bright);
    font-size: 12px;
    line-height: 1.25;
    font-family: var(--font-display);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quest-tracker-rank-tag {
    font-size: 9.6px;
}
.quest-tracker-progress {
    color: var(--text-color);
    font-size: 6px;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.quest-target-tile {
    box-shadow: inset 0 0 0 3px #b18aff, 0 0 10px 2px rgba(177, 138, 255, 0.75) !important;
    position: relative;
}
.quest-target-tile::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: inherit;
    box-shadow: 0 0 16px 5px rgba(177, 138, 255, 0.95);
    pointer-events: none;
    opacity: 0.35;
}
@keyframes quest-target-pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 1; }
}

#quest-direction-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 22px;
    height: 22px;
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
    pointer-events: none;
}

.quest-offer-card, .quest-turnin-card {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--gold-dim);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}
.quest-offer-card.difficulty-easy { border-left: 4px solid #4caf50; }
.quest-offer-card.difficulty-medium { border-left: 4px solid #ffca28; }
.quest-offer-card.difficulty-hard { border-left: 4px solid #e53935; }
.quest-turnin-card { border-left: 4px solid #40e0d0; }
.quest-offer-title, .quest-turnin-title {
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: 15px;
    margin-bottom: 6px;
}
.quest-offer-reward, .quest-turnin-reward {
    color: var(--text-color);
    font-size: 13px;
    margin-bottom: 8px;
}

#quest-cancel-overlay, #ascension-confirm-overlay, #transcendence-confirm-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 6000;
    display: flex;
    justify-content: center;
    align-items: center;
}
#quest-cancel-box, .quest-cancel-box-style {
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: 1px solid rgba(242, 215, 138, 0.25);
    border-radius: 8px;
    padding: 25px 20px;
    text-align: center;
    width: 85%;
    max-width: 320px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
#quest-cancel-box p, .quest-cancel-box-style p {
    color: var(--text-color);
    font-size: 15px;
    margin: 0 0 18px 0;
}
#quest-cancel-buttons, .quest-cancel-buttons-style {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#start-screen-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.5s ease;
    overflow: hidden;
    /* Bug-Fix: garantiert sofort volle Abdeckung, noch BEVOR village.png ueberhaupt
       geladen ist. Vorher war hier keine eigene Hintergrundfarbe gesetzt - solange
       das Bild noch unterwegs war, war diese Flaeche schlicht durchsichtig und das
       Spiel dahinter konnte kurz durchscheinen. Dieselbe dunkle Farbe wie body/--void,
       damit es nahtlos zum spaeteren Bild-Overlay passt. */
    background-color: var(--void);
}
#start-screen-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}
#start-screen-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--void);
    background-image: url('village.png');
    background-size: cover;
    background-position: center;
    filter: saturate(0.9) brightness(0.55);
}
#start-screen-bg::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: radial-gradient(ellipse at center, rgba(11,9,6,0.35) 0%, rgba(11,9,6,0.85) 100%);
}
#start-screen-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 20px;
}
#start-screen-title {
    font-family: var(--font-display);
    font-size: 42px;
    color: var(--gold-bright);
    text-shadow: 0 0 20px rgba(242, 215, 138, 0.6), 0 2px 4px #000;
    margin: 0 0 26px 0;
    letter-spacing: 2px;
}
#start-screen-loadcount {
    font-family: var(--font-body);
    font-size: 12px;
    color: rgba(212, 175, 55, 0.7);
    margin: 8px 0 0 0;
    font-variant-numeric: tabular-nums;
}
#start-screen-subtitle {
    font-family: var(--font-body);
    font-size: 16px;
    color: var(--gold);
    animation: start-screen-pulse 1.8s infinite ease-in-out;
    margin: 18px 0 0 0;
}
@keyframes start-screen-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
#start-screen-loadbar-track {
    width: 220px;
    height: 14px;
    margin: 0 auto;
    background: rgba(0,0,0,0.5);
    border: 2px solid var(--gold-dim);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
}
#start-screen-loadbar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dim) 0%, var(--gold-bright) 100%);
    transition: width 0.2s ease-out;
}

/* Zonen-Namensanzeige: erscheint kurz mittig auf der Karte beim Betreten einer neuen Zone */
#zone-name-banner {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4000;
    font-family: var(--font-display);
    font-size: 32px;
    color: var(--gold-bright);
    text-shadow: 0 0 20px rgba(0,0,0,0.9), 0 0 30px rgba(242, 215, 138, 0.5), 0 2px 4px #000;
    letter-spacing: 3px;
    pointer-events: none;
    opacity: 0;
    text-align: center;
    white-space: nowrap;
}
#zone-name-banner.visible {
    animation: zone-banner-fade 4s ease forwards;
}
@keyframes zone-banner-fade {
    0%   { opacity: 0; }
    25%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { opacity: 0; }
}

/* Visuelle Zonen-Einfaerbung auf der Kartenansicht - Zone 1 (Cradlelands) bleibt
   unveraendert, ab Zone 2 zunehmend duesterer/waermer. Ueber #zone-tint-overlay per
   background-color geloest (guenstig), NICHT mehr per CSS-Filter auf #map-grid selbst -
   ein Filter auf dem Container aller Kartenkacheln zwang den Browser, bei jeder
   Aenderung (z.B. der pulsierenden Dungeon-Animation) das komplette Kachel-Raster neu
   zu kompositieren statt nur der einen betroffenen Kachel. */

/* QTE-Reflex-Button im Kampf: erscheint zufaellig, bewegt sich, Ring faerbt sich von
   Gruen nach Rot waehrend der 1 Sekunde, in der er anklickbar ist. */
/* Pet-Schlag: erscheint zufaellig positioniert direkt auf dem Gegner-Kreis (nicht
   mehr zentriert im ganzen Kampf-Bildschirm wie die alte QTE), 1 Sekunde
   anklickbar, blockiert den Kampf NICHT (der laeuft im Hintergrund normal weiter). */
#pet-strike-container {
    position: absolute;
    width: 44px;
    height: 44px;
    z-index: 4500;
    pointer-events: none;
}
#pet-strike-button {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: none;
    padding: 0;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 0 12px rgba(0,0,0,0.6);
}
#pet-strike-ring {
    position: absolute;
    top: 0; left: 0;
    width: 44px;
    height: 44px;
    transform: scale(1.15);
}
#pet-strike-icon {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    color: var(--gold-bright);
    filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
}

/* Pet-Kugel: 1/3 der Groesse des Spieler-Kreises (79px -> ~26px), schwebt direkt
   ueber dem Spieler-Kreis und zieht dort per JS (startPetFloat) kontinuierlich
   eine Acht/Unendlichkeitszeichen-Bahn. Nur sichtbar, wenn ein aktives Kampf-Pet
   vorhanden ist (siehe updatePetBallDisplay). Fliegt beim Pet-Schlag zum Gegner
   und zurueck (die Schwebe-Bahn wird dafuer kurz angehalten und danach wieder
   aufgenommen). Die Basis-Position hier (top/left/margin) ist nur der Ruhepunkt,
   um den die Schwebe-Animation ihre Bahn zieht - kein transform hier, da die
   Animation transform selbst kontinuierlich setzt. */
#vc-pet-ball {
    display: none;
    position: absolute;
    top: -74px;
    left: 50%;
    margin-left: -13px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    border: 2px solid var(--gold-dim);
    box-shadow: 0 2px 5px rgba(0,0,0,0.7);
    z-index: 3;
    overflow: hidden;
}
#vc-pet-ball.visible {
    display: block;
}
#vc-pet-ball img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
}

/* Upgrade-Fenster: Unterkategorien-Umschalter (gleiches Muster wie bei Stats) */
.upgrade-tab-switch {
    /* Bug-Fix: "position: fixed" statt "sticky" - dadurch bewegt sich die
       Leiste WIRKLICH NIE, auch nicht minimal beim Scrollen. Kein eigener
       Hintergrund mehr - zeigt einfach den gemeinsamen Verlauf von
       #game-container durch, dadurch keine sichtbare Kante mehr zum Rest der
       Ansicht.
       Bug-Fix 2: liegt jetzt als Kind von #top-section im HTML (siehe
       index.html) statt innerhalb der jeweiligen Ansicht/#central-content -
       #central-content hat eine CSS-Maske (.scroll-fade-active), die JEDEN
       Nachkommen beim Scrollen ein-/ausblendet. Das betraf faelschlich auch
       diese eigentlich fest stehende Leiste (sichtbares "Zerreissen"). Als
       Kind von #top-section (keine Maske) bleibt sie immer vollstaendig
       sichtbar. Da Skills UND Prestige diese Klasse teilen (zwei separate
       Elemente, #skill-tab-switch und #prestige-tab-switch), ist der
       Default hier "display:none" - sichtbar wird jeweils nur die zur
       aktiven Ansicht passende (siehe :has()-Regeln weiter unten). */
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    z-index: 20;
    /* Bug-Fix: solider eigener Hintergrund statt dem unzuverlaessigen
       "background-attachment: fixed"-Trick (auf echten Mobilgeraeten/
       WebViews oft gar nicht oder unzuverlaessig gerendert - das war der
       eigentliche Grund fuer sichtbares Durchscheinen). */
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 100%);
    padding: 4px 15px 12px 15px;
    gap: 5px;
}
body:has(#skill-view.content-panel.active) #skill-tab-switch,
body:has(#prestige-view.content-panel.active) #prestige-tab-switch {
    display: flex;
}
.upgrade-tab-switch::after {
    /* Weicher Fade-Uebergang direkt unter der Leiste - Inhalt, der beim
       Hochscrollen darunter verschwindet, wird so nicht hart abgeschnitten,
       sondern blendet sanft aus. Nutzt dieselbe Verlauf-Grundfarbe wie
       #game-container, damit der Uebergang farblich nahtlos passt. */
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    height: 22px;
    background: linear-gradient(180deg, #16110a 0%, rgba(22, 17, 10, 0) 100%);
    pointer-events: none;
}
.upgrade-subtab {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    line-height: 1.15;
    padding: 8px 3px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9c8a63;
    background: var(--parchment-shadow);
    border: 1px solid var(--gold-dim);
    border-radius: 6px;
    cursor: pointer;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: break-word;
    overflow: hidden;
}
.upgrade-subtab.active {
    color: var(--gold-bright);
    background: linear-gradient(180deg, rgba(201, 165, 68, 0.25), rgba(201, 165, 68, 0.08));
    border-color: var(--gold);
    text-shadow: 0 0 8px rgba(242, 215, 138, 0.4);
}
.upgrade-subview {
    display: none;
}
.upgrade-subview.active {
    display: block;
}

/* Skill-Zeile: Name + darunter Zaehler/Next-Hinweis */
.skill-name-block {
    display: flex;
    flex-direction: column;
}
.skill-meta {
    font-size: 10.5px;
    color: #9c8a63;
    margin-top: 1px;
}

/* Level-50-Meilenstein-Erklaerung */
#level50-notice-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.75);
    z-index: 6500;
    display: flex;
    justify-content: center;
    align-items: center;
}
#level50-notice-box {
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 20%, #16110a 55%, #0d0a07 80%, #060504 100%);
    border: 1px solid rgba(242, 215, 138, 0.25);
    border-radius: 8px;
    padding: 25px 20px;
    text-align: center;
    width: 85%;
    max-width: 340px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.8);
}
#level50-notice-box h3 {
    color: var(--gold-bright);
    font-family: var(--font-display);
    margin: 0 0 12px 0;
}
#level50-notice-box p {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 18px 0;
}
#level50-notice-box strong {
    color: var(--gold-bright);
}

/* Kreisfoermiges Badge in den Upgrade/Abilities-Tab-Buttons (verfuegbare Skillpunkte bzw.
   Heldenmarken), ersetzt die vorherige separate Kopfzeile. */
.subtab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    margin-left: 6px;
    border-radius: 10px;
    background: var(--gold);
    color: #1a1408;
    font-size: 12px;
    font-weight: 800;
    vertical-align: middle;
}

/* Neu gestaltete Marken-Status-Karte oben in den Abilities, mit echtem Countdown-Timer
   bis zum naechsten taeglichen Reset - im gleichen Stil wie die Upgrade-Karten gehalten. */
.medal-status-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(160deg, rgba(90, 160, 220, 0.12) 0%, rgba(15, 22, 30, 0.5) 100%);
    border: 1px solid rgba(90, 160, 220, 0.35);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    box-shadow: 0 0 10px rgba(90, 160, 220, 0.15);
}
.medal-status-card img {
    width: 28px;
    height: 28px;
    filter: drop-shadow(0 0 4px rgba(242, 215, 138, 0.5));
}
.medal-status-text {
    display: flex;
    flex-direction: column;
}
.medal-status-count {
    color: var(--gold-bright);
    font-family: var(--font-display);
    font-size: 15px;
}
.medal-status-timer {
    font-size: 11px;
    color: #9c8a63;
    margin-top: 1px;
}

/* Etagendungeon: Etagen-Anzeige und die extreme Farbe des ultimativen Elite-Bosses */
.tower-floor-label {
    text-align: center;
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 900;
    letter-spacing: 2.5px;
    color: #ff8a5a;
    text-shadow: 0 0 12px rgba(255, 40, 20, 0.85), 0 0 26px rgba(255, 8, 68, 0.6);
    margin-bottom: 10px;
}
.dungeon-tile.tower-elite-boss-tile {
    background: radial-gradient(ellipse at center, #3a0018 0%, #0d0006 70%);
    border: 2px solid #ff0844;
    box-shadow: 0 0 18px 4px rgba(255, 8, 68, 0.85), inset 0 0 12px rgba(255, 8, 68, 0.5);
}
.dungeon-tile.tower-elite-boss-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 34px 8px rgba(255, 8, 68, 1);
    opacity: 0;
    pointer-events: none;
}
#dungeon-header.tower-active {
    background: linear-gradient(180deg, rgba(120,0,30,0.6) 0%, transparent 100%);
}
#dungeon-header.tower-active #dungeon-title {
    color: #ff5a5a;
    text-shadow: 0 0 14px rgba(255, 20, 40, 0.9), 0 0 30px rgba(255, 8, 68, 0.6);
}
#dungeon-view.content-panel.tower-mode #dungeon-grid-frame {
    border-color: #7a1a2a;
    box-shadow:
        0 0 0 1px rgba(255, 8, 68, 0.35),
        0 0 40px rgba(255, 8, 68, 0.25),
        inset 0 0 40px rgba(0, 0, 0, 0.6);
}
#dungeon-view.content-panel.tower-mode #dungeon-embers::before {
    background-image:
        radial-gradient(2px 2px at 15% 85%, rgba(255,20,40,0.9), transparent),
        radial-gradient(1.5px 1.5px at 45% 92%, rgba(255,60,60,0.8), transparent),
        radial-gradient(2px 2px at 75% 88%, rgba(255,8,68,0.85), transparent);
}

/* Prestige-Stufen: gesperrte Tabs (Transcendence/Astral Ascension, sowie Ascension
   vor Freischaltung) sind ausgegraut und nicht anklickbar. */
.prestige-tab-locked {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
.locked-tier-message {
    text-align: center;
    padding: 40px 20px;
    color: #9c8a63;
    font-size: 15px;
    font-style: italic;
}

/* Bestiarium: Haustier-Auswahl-Dropdown in den Slot-Karten */
.settings-select {
    width: 100%;
    padding: 8px;
    margin-top: 6px;
    background: linear-gradient(180deg, var(--parchment) 0%, var(--parchment-shadow) 100%);
    border: 1px solid var(--gold-dim);
    border-radius: 4px;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: 13px;
}

/* ============ Bestiarium: Neugestaltung ============ */
#bestiary-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 4px 0;
}

#bestiary-list-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 6px;
}
.bestiary-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0 0 8px;
    -webkit-tap-highlight-color: transparent;
}
.bestiary-slot-name {
    font-size: 8px;
    font-weight: 700;
    color: var(--gold-bright);
    text-align: center;
    line-height: 1.15;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.bestiary-slot-img-wrap {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, #2a2116 0%, #14100a 75%);
    border: 2.5px solid #4a4436;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.5);
    position: relative;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    overflow: visible;
}
.bestiary-slot:active .bestiary-slot-img-wrap {
    transform: scale(0.93);
}
.bestiary-slot-img-wrap img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.6));
}
.bestiary-slot-img-wrap.uncaptured img {
    filter: brightness(0) opacity(0.55);
}
.bestiary-slot-img-wrap.uncaptured::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    color: rgba(212, 175, 55, 0.55);
    text-shadow: 0 0 6px rgba(0,0,0,0.9);
}

/* Rang-Rahmen - zeigt die aktuelle Arena-Evolutionsstufe (dieselben Farben wie im
   Kampf-Bildschirm) */
.bestiary-slot-img-wrap.rank-elite {
    border-color: var(--color-epic);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6), 0 0 9px 2px var(--color-epic), 0 0 16px 4px rgba(163, 53, 238, 0.45);
}
.bestiary-slot-img-wrap.rank-boss {
    border-color: var(--color-legendary);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6), 0 0 9px 2px var(--color-legendary), 0 0 16px 4px rgba(255, 128, 0, 0.45);
}
.bestiary-slot-img-wrap.captured.rank-normal {
    border-color: #c8b98a;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6), 0 0 6px 1px rgba(200, 185, 138, 0.5);
}
.bestiary-slot-img-wrap.captured.maxed {
    border-color: var(--color-mythic, #ff3a5e);
}

/* Level-Ring: sitzt ueberlappend am unteren Rand des Kreises und zeigt per
   Farbe den aktuellen Status des Pets. */
.bestiary-slot-level {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 20px;
    height: 15px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: #14100a;
    border-radius: 8px;
    border: 1.5px solid #e8e0cc;
    z-index: 2;
    line-height: 1;
}
.bestiary-slot-level.level-equipped {
    border-color: #4aa8ff;
    box-shadow: 0 0 5px rgba(74, 168, 255, 0.8);
}
.bestiary-slot-level.level-training {
    border-color: #ff4a4a;
    box-shadow: 0 0 5px rgba(255, 74, 74, 0.8);
    animation: bestiary-level-pulse-red 1.4s infinite ease-in-out;
}
@keyframes bestiary-level-pulse-red {
    0%, 100% { box-shadow: 0 0 4px rgba(255, 74, 74, 0.7); }
    50% { box-shadow: 0 0 10px rgba(255, 74, 74, 1); }
}
.bestiary-slot-level.level-ready {
    border-color: #4aff7a;
    box-shadow: 0 0 6px rgba(74, 255, 122, 0.9);
    animation: bestiary-level-pulse-green 1.1s infinite ease-in-out;
}
@keyframes bestiary-level-pulse-green {
    0%, 100% { box-shadow: 0 0 4px rgba(74, 255, 122, 0.8); }
    50% { box-shadow: 0 0 12px rgba(74, 255, 122, 1); }
}

/* ---- Evolve-Animation (Infofenster) ---- */
@keyframes evolve-flash-anim {
    0% { box-shadow: inset 0 0 14px rgba(0,0,0,0.7), 0 4px 10px rgba(0,0,0,0.6); transform: scale(1); }
    35% { box-shadow: 0 0 50px 24px rgba(255,255,255,0.95); transform: scale(1.14); }
    100% { box-shadow: inset 0 0 14px rgba(0,0,0,0.7), 0 4px 10px rgba(0,0,0,0.6); transform: scale(1); }
}
#bestiary-detail-img-wrap.evolve-flash {
    animation: evolve-flash-anim 1.2s ease;
}
#bestiary-detail-img-wrap.tap-to-collect {
    cursor: pointer;
    animation: bestiary-attention-glow 1.1s infinite ease-in-out;
}
.evolve-button {
    background: linear-gradient(180deg, #ffe9a8 0%, #c9a544 100%) !important;
    color: #2a2013 !important;
    animation: evolve-button-pulse 1.4s infinite ease-in-out;
}
@keyframes evolve-button-pulse {
    0%, 100% { box-shadow: 0 0 6px 1px rgba(255, 215, 100, 0.6); }
    50% { box-shadow: 0 0 16px 4px rgba(255, 235, 150, 0.95); }
}


/* ---- Arena-Tab: 3 grosse Trainings-Slots ---- */
#arena-slots-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.arena-slot-card {
    background: linear-gradient(135deg, rgba(30, 22, 12, 0.75) 0%, rgba(18, 13, 7, 0.85) 100%);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: 10px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-height: 150px;
}
.arena-slot-card.locked {
    opacity: 0.7;
}
.arena-slot-card .card-title {
    font-size: 11px;
    margin: 4px 0 0;
}
.arena-slot-card .card-desc {
    font-size: 10px;
    margin: 0;
}
.arena-slot-lock-icon,
.arena-slot-placeholder-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(242, 215, 138, 0.35);
    font-size: 22px;
}
.arena-slot-placeholder-icon svg {
    width: 100%;
    height: 100%;
}
.arena-slot-img-wrap {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, #2a2116 0%, #14100a 75%);
    border: 2.5px solid #c8b98a;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.7), 0 0 6px 1px rgba(200, 185, 138, 0.5);
    overflow: hidden;
}
.arena-slot-img-wrap.rank-elite {
    border-color: var(--color-epic);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6), 0 0 9px 2px var(--color-epic), 0 0 16px 4px rgba(163, 53, 238, 0.45);
}
.arena-slot-img-wrap.rank-boss {
    border-color: var(--color-legendary);
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6), 0 0 9px 2px var(--color-legendary), 0 0 16px 4px rgba(255, 128, 0, 0.45);
}
.arena-slot-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.arena-slot-card.occupied .card-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--gold-bright);
}
.arena-slot-level {
    font-size: 10px;
    color: #b8ac8e;
    margin: 0;
}
.arena-slot-bonus {
    font-size: 10.5px;
    font-weight: 700;
    color: #8fffa0;
    margin: 0;
}
.arena-slot-timer {
    font-size: 10px;
    color: #e8dcc0;
    background: rgba(0,0,0,0.4);
    border-radius: 6px;
    padding: 1px 6px;
    margin: 2px 0 0;
}
.arena-slot-card.ready .arena-slot-img-wrap {
    animation: bestiary-attention-glow 1.1s infinite ease-in-out;
}
.arena-slot-card.ready .arena-slot-timer {
    color: #ffe9a8;
    font-weight: 700;
}
.arena-slot-card.ready {
    cursor: pointer;
    animation: arena-ready-card-pulse 1.1s infinite ease-in-out;
}
@keyframes arena-ready-card-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(255, 215, 100, 0.25); }
    50% { box-shadow: 0 0 14px 2px rgba(255, 215, 100, 0.55); }
}

/* ---- Detail-Overlay ---- */
#bestiary-detail-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 6500;
    display: none;
    align-items: center;
    justify-content: center;
}
#bestiary-detail-box {
    position: relative;
    width: 88%;
    max-width: 360px;
    max-height: 85vh;
    overflow-y: auto;
    background: linear-gradient(160deg, #2a2013 0%, #16110a 100%);
    border: 2px solid var(--gold);
    border-radius: 14px;
    padding: 16px 16px;
    text-align: center;
    box-shadow: 0 15px 50px rgba(0,0,0,0.9), inset 0 1px 0 rgba(255,255,255,0.05);
    animation: popup-appear 0.25s ease;
}
#bestiary-detail-img-wrap {
    width: 88px;
    height: 88px;
    margin: 0 auto 8px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 35% 30%, #332711 0%, #171208 75%);
    border: 3px solid #4a4436;
    box-shadow: inset 0 0 14px rgba(0,0,0,0.7), 0 4px 10px rgba(0,0,0,0.6);
    position: relative;
    overflow: hidden;
}
#bestiary-detail-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.7));
}
#bestiary-detail-img-wrap.uncaptured::after {
    content: '?';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 900;
    color: rgba(212, 175, 55, 0.55);
    text-shadow: 0 0 10px rgba(0,0,0,0.9);
}
#bestiary-detail-title {
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--gold-bright);
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
    margin: 0 0 1px;
}
#bestiary-detail-subtitle {
    font-size: 11px;
    color: #a89a72;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 0 8px;
}
/* Neu: Fortschrittsbalken "Way to Evolve" - zeigt den Level-Fortschritt
   (arenaLevel/100) innerhalb der aktuellen Stufe, leuchtet in der Farbe der
   naechsten Zielstufe (Lila = Epic-Farbe fuer den Weg zu Elite, Orange =
   Legendary-Farbe fuer den Weg zu Boss - dieselben Farben, die das Spiel
   bereits fuer Elite-/Boss-Raenge verwendet). Sitzt bewusst zwischen dem
   Stufennamen (z.B. "Regular") und der Stage/Level-Zeile darunter. */
#bestiary-evolve-progress-bar {
    position: relative;
    height: 22px;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--gold-dim);
    border-radius: 5px;
    overflow: hidden;
    margin: 0 0 6px;
}
#bestiary-evolve-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-epic) 0%, #c98bf5 100%);
    box-shadow: 0 0 10px 1px var(--color-epic), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
#bestiary-evolve-progress-fill.evolve-target-boss {
    background: linear-gradient(90deg, var(--color-legendary) 0%, #ffb84d 100%);
    box-shadow: 0 0 10px 1px var(--color-legendary), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#bestiary-evolve-progress-fill.evolve-target-maxed {
    background: linear-gradient(90deg, var(--gold) 0%, var(--gold-bright) 100%);
    box-shadow: 0 0 10px 1px var(--gold-bright), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#bestiary-evolve-progress-label {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,0.95), 0 1px 1px rgba(0,0,0,0.95);
}
.bestiary-detail-stat-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 2px;
    border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    color: #e8dcc0;
}
/* Neues Feature: die Detail-Ansicht war bisher eine einzige, undifferenzierte
   Liste (alles gleich, einfach untereinander) - jetzt in klar getrennte,
   thematisch zusammengehoerige Abschnitte gruppiert (Status / Slot-Bonus /
   Evolve-Bonus / Kampfwerte), jeweils mit eigenem, dezentem Hintergrund und
   Titel, damit auf einen Blick erkennbar ist, was zueinander gehoert. Kompakte
   Paare (Stage+Level, Boosts+Current, Strike+Crit Chance) stehen nebeneinander
   statt jedes in einer eigenen vollen Zeile, spart spuerbar Hoehe. */
.bestiary-detail-section {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.12);
    border-radius: 6px;
    padding: 4px 8px;
    margin-bottom: 5px;
}
.bestiary-detail-section-title {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gold-bright);
    margin-bottom: 0px;
}
.bestiary-detail-section-hint {
    font-size: 9px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: #8a8272;
}
.bestiary-detail-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}
.bestiary-detail-section .bestiary-detail-stat-row {
    padding: 2px 2px;
    border-bottom: none;
    font-size: 13px;
}
.bestiary-detail-section .bestiary-detail-stat-row:not(:last-child):not(.bestiary-detail-grid-2 .bestiary-detail-stat-row) {
    border-bottom: 1px solid rgba(212, 175, 55, 0.1);
}
/* Neues Feature: die beiden Evolve-Bonus-Zeilen ("Evolve to Epic"/"Evolve to
   Boss") sind ausgegraut, solange die jeweilige Stufe noch nicht erreicht
   ist - sobald erreicht, verschwindet diese Klasse (siehe renderDetailOverlay()
   in bestiary-arena.js) und die Zeile zeigt die normale, helle Farbe. */
.bestiary-detail-stat-row.bestiary-evolve-locked {
    color: #6b6455;
    opacity: 0.65;
}
.bestiary-detail-stat-row.bestiary-evolve-locked span:last-child {
    color: #6b6455;
}
.bestiary-detail-stat-row span:last-child {
    font-weight: 700;
    color: var(--gold-bright);
}
#bestiary-detail-progress-container {
    margin: 12px 0;
}

/* ===== GPU-Burst: periodische, kurze Animationsfenster statt Dauerschleifen ===== */
body.gpu-burst-active #prestige-button::after {
    animation: dungeon-pulse-burst 2.5s ease-in-out;
}
body.gpu-burst-active #convert-ascension-btn::after {
    animation: dungeon-pulse-burst 2.5s ease-in-out;
}
body.gpu-burst-active .dungeon-tile-elite.revealed::after {
    animation: dungeon-pulse-burst 2.5s ease-in-out;
}
body.gpu-burst-active .dungeon-tile-boss.revealed::after {
    animation: dungeon-pulse-burst 2.5s ease-in-out;
}
body.gpu-burst-active .auto-battle-locked-tile::after {
    animation: dungeon-pulse-burst 2.5s ease-in-out;
}
body.gpu-burst-active .dungeon-tile.tower-elite-boss-tile::after {
    animation: dungeon-pulse-burst 2.5s ease-in-out;
}
@keyframes dungeon-pulse-burst {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

body.gpu-burst-active #prestige-title,
body.gpu-burst-active #ascension-title,
body.gpu-burst-active #dungeon-title,
body.gpu-burst-active .tower-floor-label {
    animation: dungeon-flicker-burst 2.5s ease-in-out;
}
@keyframes dungeon-flicker-burst {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

body.gpu-burst-active .dungeon-tile-boss.revealed {
    animation: dungeon-boss-scale 2.5s ease-in-out;
}
@keyframes dungeon-boss-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
body.gpu-burst-active .dungeon-tile.tower-elite-boss-tile {
    animation: tower-elite-boss-scale 2.5s ease-in-out;
}
@keyframes tower-elite-boss-scale {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* ===== Leaderboard (Settings-Panel) ===== */
.leaderboard-list {
    max-height: 260px;
    overflow-y: auto;
    margin: 8px 0;
    border: 1px solid rgba(242, 215, 138, 0.15);
    border-radius: 6px;
}
.leaderboard-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.leaderboard-row:last-child {
    border-bottom: none;
}
.leaderboard-row-me {
    background: rgba(242, 215, 138, 0.12);
    font-weight: bold;
}
.leaderboard-rank {
    width: 32px;
    opacity: 0.7;
    flex-shrink: 0;
}
.leaderboard-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.leaderboard-level {
    flex-shrink: 0;
    color: var(--gold-bright);
}
#leaderboard-name-input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(242, 215, 138, 0.3);
    border-radius: 4px;
    color: inherit;
    padding: 6px 8px;
    font-size: 13px;
}

/* ===== Karte-zu-Kampf / Karte-zu-Dorf / Dungeon-Uebergangs-Einblendung ===== */
/* 1 Sekunde gesamt: 0-50% faedet zur vollen Deckung, 50-100% faedet zurueck zur
   neuen Ansicht (Ansicht dahinter wird bei 50% im Hintergrund ausgetauscht -
   siehe playViewTransition() in game-core.js/camera.js). */
#view-transition-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9500; /* ueber normalen Ansichten, unter der Rauswurf-Flugfigur (9000-9999 Bereich beachten) und Modals */
    pointer-events: none;
    opacity: 0;
    background-size: cover;
    background-position: center;
}
#view-transition-overlay.style-bright {
    background-color: #fdf6e3;
    background-image: url('clouds.png');
}
#view-transition-overlay.style-dark {
    background-color: #000000;
    background-image: none;
}
#view-transition-overlay.view-transitioning {
    animation: view-transition-fade 1s ease-in-out;
}
@keyframes view-transition-fade {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* Kurzer Lichtblitz, nur bei style-dark, genau bei der 0.5s-Marke (dem
   Zeitpunkt, an dem im Hintergrund die Ansicht gewechselt wird) - ein
   schmaler Puls statt eines sanften Ein-/Ausblendens, damit er wie ein
   kurzes Aufblitzen wirkt statt wie ein zweites langsames Faden. */
#view-transition-flash {
    position: absolute;
    inset: 0;
    background-color: #ffffff;
    opacity: 0;
}
#view-transition-overlay.style-dark.view-transitioning #view-transition-flash {
    animation: view-transition-flash-pulse 1s ease-in-out;
}
@keyframes view-transition-flash-pulse {
    0%, 42% { opacity: 0; }
    50% { opacity: 0.9; }
    58%, 100% { opacity: 0; }
}

/* ===== Skills/Prestige/Bestiarium/Stats: Hintergrund-Verlauf bis ganz nach
   oben (unter den transparenten Header) statt erst darunter zu beginnen ===== */
/* Bug-Fix: Der Charakter-Header oben (#hud-row) hat KEINEN eigenen
   Hintergrund - er ist bewusst transparent, damit man z.B. auf der Karte
   durchsehen kann. .content-panel begann bisher erst UNTERHALB davon
   (margin-top), wodurch die Zone unter dem Header komplett ohne Hintergrund
   war - gescrollter Inhalt konnte dort ungehindert durchschimmern, auch
   unter/ueber der sticky Unterreiter-Leiste. Fuer diese vier Ansichten
   ersetzt "padding-top" jetzt das "margin-top": das Panel selbst (und damit
   sein Farbverlauf) beginnt jetzt bei y=0, genau wie bei Equipment - der
   sichtbare Inhalt startet optisch an derselben Stelle wie vorher, aber der
   Hintergrund reicht durchgehend von ganz oben bis ganz unten, und nichts
   kann mehr durch eine hintergrundlose Zone schimmern.
*/
#skill-view.content-panel,
#prestige-view.content-panel,
#bestiary-view.content-panel,
#stats-view.content-panel {
    margin-top: 0;
}
/* Reserviert Header-Hoehe + die eigene, individuell gemessene Hoehe der fest
   positionierten Unterreiter-Leiste (zaehlt nicht mehr zum normalen
   Layout-Fluss) + die normalen 15px Panel-Innenabstand. Getrennt pro Ansicht,
   da die vier Leisten unterschiedlich hoch sind (Prestige z.B. mit 4 teils
   zweizeiligen Buttons hoeher als Skills mit nur 2 kurzen). */
#skill-view.content-panel {
    padding-top: calc(var(--header-height) + var(--skill-tab-switch-height) + 15px);
}
#prestige-view.content-panel {
    padding-top: calc(var(--header-height) + var(--prestige-tab-switch-height) + 15px);
}
#bestiary-view.content-panel {
    padding-top: calc(var(--header-height) + var(--bestiary-tab-switch-height) + 15px);
}
#stats-view.content-panel {
    padding-top: calc(var(--header-height) + var(--stats-tab-switch-height) + 15px);
}

/* Eigener, gezielter Hintergrund NUR im Header-Bereich (#top-section), der
   sonst bewusst transparent ist (damit man z.B. auf der Karte durchsehen
   kann). #top-section liegt strukturell in einer HOEHEREN Stapel-Ebene
   (z-index 20 relativ zum restlichen Inhalt) als der scrollbare Bereich -
   deshalb reicht ein hoher z-index auf der Unterreiter-Leiste allein nicht,
   um gescrollten Inhalt dort zu verdecken: die eigentliche "Deckung" muss
   von INNERHALB von #top-section selbst kommen. Bleibt fuer alle anderen
   Ansichten (Karte, Dungeon, Equipment) unsichtbar/transparent wie bisher -
   nur bei Skills/Prestige/Bestiarium/Stats wird er per :has() eingeblendet. */
#view-header-backdrop {
    /* Bug-Fix: braucht eine EIGENE undurchsichtige Flaeche - Transparenz
       allein verdeckt nichts, es fehlte etwas UNDURCHSICHTIGES genau hier, um
       gescrollten Inhalt zu verbergen.
       Bug-Fix 2: der vorherige Ansatz nutzte "background-attachment: fixed",
       um farblich exakt zum Verlauf von #game-container zu passen - genau
       DAS war aber der eigentliche Fehler: "background-attachment: fixed"
       wird auf echten Mobilgeraeten/WebViews oft gar nicht oder nur
       unzuverlaessig gerendert (bekannte Einschraenkung), wodurch diese
       Flaeche auf dem Geraet tatsaechlich durchsichtig blieb - genau das vom
       Nutzer beschriebene Durchscheinen. Jetzt ein normaler, eigener,
       garantiert solider Hintergrund (kein "fixed"), in derselben Farbe wie
       der obere Bereich des Haupt-Verlaufs, fuer einen nahtlosen Uebergang. */
    position: absolute;
    top: 0; left: 0; right: 0;
    height: calc(120px + env(safe-area-inset-top, 0px));
    z-index: 0;
    pointer-events: none;
    background: transparent;
}
body:has(#skill-view.content-panel.active) #view-header-backdrop,
body:has(#prestige-view.content-panel.active) #view-header-backdrop,
body:has(#bestiary-view.content-panel.active) #view-header-backdrop,
body:has(#stats-view.content-panel.active) #view-header-backdrop {
    background: linear-gradient(180deg, #3a2a16 0%, #241a10 100%);
}

/* Bug-Fix: Popups/Modals, die WAEHREND Skills/Prestige/Bestiarium/Stats
   geoeffnet werden (Pet-Zuweisung, Info-Fenster ueber den "i"-Button), liegen
   strukturell INNERHALB von #central-content - dessen gesamter Ast liegt aber
   im Stapel-Kontext IMMER unter #top-section (wo die Tab-Leisten jetzt
   liegen), unabhaengig vom z-index des Popups selbst (6200 o.ae. zaehlt nur
   INNERHALB von #central-content, nicht gegenueber #top-section als Ganzes).
   Deshalb rendert die Tab-Leiste sonst faelschlich UEBER solchen Popups. Fix:
   Tab-Leisten explizit ausblenden, solange eines dieser Popups offen ist. */
body:has(#pet-assign-overlay[style*="flex"]) #skill-tab-switch,
body:has(#pet-assign-overlay[style*="flex"]) #prestige-tab-switch,
body:has(#pet-assign-overlay[style*="flex"]) .bestiary-tab-switch,
body:has(#pet-assign-overlay[style*="flex"]) .stats-tab-switch,
body:has(#bestiary-detail-overlay[style*="flex"]) #skill-tab-switch,
body:has(#bestiary-detail-overlay[style*="flex"]) #prestige-tab-switch,
body:has(#bestiary-detail-overlay[style*="flex"]) .bestiary-tab-switch,
body:has(#bestiary-detail-overlay[style*="flex"]) .stats-tab-switch,
body:has(#generic-info-modal.active) #skill-tab-switch,
body:has(#generic-info-modal.active) #prestige-tab-switch,
body:has(#generic-info-modal.active) .bestiary-tab-switch,
body:has(#generic-info-modal.active) .stats-tab-switch {
    display: none !important;
}

/* ===== Dynamischer Item-Drop: 6 Felder im Kampf, unter dem Level ===== */
#drop-rate-wrapper {
    display: none;
    position: fixed;
    top: calc(96px + env(safe-area-inset-top, 0px));
    left: 25px;
    right: 25px;
    z-index: 99998;
    pointer-events: none;
}
#drop-rate-display {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.drop-rate-box {
    /* Dieselbe Bauweise wie das Level-Abzeichen und die Faehigkeiten-Buttons
       im Kampf (radialer dunkler Verlauf, goldener Glanzsaum) - damit es
       wirklich wie ein Teil desselben HUDs wirkt, nicht wie ein
       aufgesetztes Extra-Element. */
    position: relative;
    width: 50px;
    height: 20px;
    border: 1px solid var(--color-common);
    border-radius: 6px;
    background: radial-gradient(ellipse at 35% 30%, #2a2015 0%, #0d0906 80%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 0 8px -1px var(--color-common),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        inset 0 -3px 4px rgba(0, 0, 0, 0.6),
        0 2px 5px rgba(0, 0, 0, 0.5);
}
.drop-rate-box::before {
    /* Duenner heller Schimmer oben, wie bei den Gegenstands-Rahmen im
       Inventar - nimmt der Box das "billige" Flach-Design. */
    content: '';
    position: absolute;
    top: 2px; left: 4px; right: 4px;
    height: 1px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 1px;
}
.drop-rate-box[data-rarity="uncommon"] { border-color: var(--color-uncommon); box-shadow: 0 0 8px -1px var(--color-uncommon), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 4px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.5); }
.drop-rate-box[data-rarity="rare"] { border-color: var(--color-rare); box-shadow: 0 0 8px -1px var(--color-rare), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 4px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.5); }
.drop-rate-box[data-rarity="epic"] { border-color: var(--color-epic); box-shadow: 0 0 8px -1px var(--color-epic), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 4px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.5); }
.drop-rate-box[data-rarity="legendary"] { border-color: var(--color-legendary); box-shadow: 0 0 8px -1px var(--color-legendary), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 4px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.5); }
.drop-rate-box[data-rarity="mythic"] { border-color: var(--color-mythic); box-shadow: 0 0 8px -1px var(--color-mythic), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -3px 4px rgba(0,0,0,0.6), 0 2px 5px rgba(0,0,0,0.5); }
.drop-rate-value {
    font-size: 10px;
    font-weight: 700;
    color: var(--gold-bright);
    text-shadow: 0 0 4px rgba(0,0,0,1), 0 1px 1px rgba(0,0,0,1);
    font-family: var(--font-display);
    white-space: nowrap;
    letter-spacing: 0.2px;
}