/* base.css — split from main.css by scripts/split-main-css.js.
   Shared shell: variables, nav, buttons, landing, auth, settings, rankings, notifications. Loaded by every page, first.
   Edit these files directly; main.css no longer exists. */

html {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    height: auto;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

main {
    padding: 0.1em;
}

.seo-home-page .seo-demon-card-meta {
    display: none;
}

.ad-common {
    color: #D1D5D8;
}

.ad-uncommon {
    color: #41A85F;
}

.ad-rare {
    color: #2C82C9;
}

.ad-epic {
    color: #9365B8;
}

.ad-legendary {
    color: #FAC51C;
}

.ad-mythic {
    color: #E25041;
}

.click-to-copy {
  cursor: pointer;
  font-size: 0.8em;
  padding: 0.3em 0;
}

.click-to-copy-icon-success {
    display: none;
    font-size: 1.2em;
    font-weight: bold;
}

.ad-icon {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    color: currentColor;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    vertical-align: -0.125em;
}

.soul-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    object-fit: contain;
}

.soul-amount,
.soul-inline-label,
.soul-heading,
.soul-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34em;
    color: var(--ad-soul, #55FFFF);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.soul-amount-value {
    line-height: 1;
}

.soul-amount-label {
    color: currentColor;
    font-size: 0.72em;
    font-weight: 800;
    letter-spacing: 0.05em;
    line-height: 1;
    text-transform: uppercase;
}

.soul-inline-label,
.soul-heading {
    text-transform: none;
}

.soul-inline-label .soul-icon,
.soul-heading .soul-icon,
.soul-cost .soul-icon {
    width: 1.05em;
    height: 1.05em;
}

.soul-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.38em;
    min-height: 2.25rem;
    border: 1px solid rgba(85,255,255,0.28);
    border-radius: var(--ad-radius, 6px);
    background:
        linear-gradient(180deg, rgba(85,255,255,0.1), rgba(85,255,255,0.025)),
        rgba(7,18,22,0.82);
    color: var(--ad-soul, #55FFFF);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.18);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.38rem 0.58rem;
    white-space: nowrap;
}

.soul-chip .soul-icon {
    width: 1.18em;
    height: 1.18em;
    filter: drop-shadow(0 0 7px rgba(85,255,255,0.42));
}

.soul-chip .soul-amount-value {
    color: #f5ffff;
}

.soul-chip .soul-amount-label {
    color: rgba(175,255,255,0.78);
}

.soul-chip-inline {
    min-height: 1.8rem;
    padding: 0.28rem 0.46rem;
    vertical-align: -0.2em;
}

.ad-icon-fill {
    fill: currentColor;
}

.btn .ad-icon {
    margin-right: 0.35rem;
}

.btn-icon-only .ad-icon,
.btn[title] .ad-icon:only-child {
    margin-right: 0;
}

/* mobile */
@media (max-width: 768px) {
.navbar-brand {
        min-width: 0;
        max-width: calc(100vw - 5.5rem);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.navbar-brand .logo-nav {
        width: 38px !important;
        height: 38px !important;
    }
}

/* Pagination styling - horizontal layout without bullets */
#pagination {
    display: flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 1rem auto;
    gap: 0;
}

#pagination ul {
    display: flex !important;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 0.25rem;
    width: auto;
}

#pagination li {
    display: inline-flex !important;
    align-items: center;
    margin: 0;
    padding: 0;
}

#pagination .page-item {
    display: inline-flex !important;
    align-items: center;
    margin: 0;
}

#pagination .page-link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    margin: 0;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    min-width: 36px;
}

#pagination .page-link:hover {
    text-decoration: none;
}

#pagination .page-item.active .page-link {
    background-color: #2C82C9 !important;
    color: white !important;
    font-weight: bold;
}

#pagination .page-item.disabled .page-link {
    cursor: default;
    opacity: 0.5;
}

/* Remove any bullet points or pseudo-elements */
#pagination li::before,
#pagination li::after,
#pagination li > a:before,
#pagination li > a::after,
#pagination .m-2 {
    display: none !important;
}

/* Navigation buttons styling */
#prevBtn,
#nextBtn {
    min-width: 40px;
    text-align: center;
}

.auth-shell {
    display: grid;
    place-items: center;
    min-height: calc(100vh - 190px);
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

.auth-layout {
    width: min(100%, 28rem);
}

.auth-card {
    border-color: rgba(111,214,189,0.24);
    background:
        linear-gradient(180deg, rgba(111,214,189,0.06), transparent 34%),
        rgba(7,16,19,0.9);
    box-shadow: 0 22px 54px rgba(0,0,0,0.34);
}

.auth-card-body {
    display: grid;
    gap: 1.1rem;
    padding: clamp(1.25rem, 4vw, 1.9rem);
}

.auth-title {
    margin: 0;
    color: #f2f7f5;
    font-size: clamp(2rem, 6vw, 2.7rem);
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.auth-mark {
    max-height: 420px;
    object-fit: contain;
}

.auth-complete-mark {
    width: 96px;
    height: 96px;
    object-fit: contain;
}

.auth-provider-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.oauth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 3.2rem;
    border-radius: 6px;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    transition: transform 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.oauth-brand-icon {
    display: block;
    width: 1.32rem;
    height: 1.32rem;
    flex: 0 0 auto;
    object-fit: contain;
}

.oauth-btn:hover,
.oauth-btn:focus-visible {
    transform: translateY(-1px);
}

.oauth-btn.is-disabled {
    cursor: not-allowed;
    opacity: 0.52;
    transform: none;
}

.oauth-google {
    border: 1px solid rgba(255,255,255,0.35);
    background: #f8f9fa;
    color: #1f1f1f;
}

.oauth-google:hover,
.oauth-google:focus-visible {
    border-color: #8ab4f8;
    background: #fff;
    color: #111;
}

.oauth-discord {
    border: 1px solid rgba(125,142,255,0.86);
    background: #5865f2;
    color: #fff;
}

.oauth-discord:hover,
.oauth-discord:focus-visible {
    border-color: #aeb7ff;
    background: #6875ff;
    color: #fff;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.25rem 0 0;
    color: rgba(232,199,106,0.88);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 0;
    border-top: 1px solid rgba(161,212,201,0.18);
}

.auth-divider span {
    flex: 0 0 auto;
}

.auth-form {
    display: grid;
    gap: 0.95rem;
}

.auth-field {
    display: grid;
    gap: 0.35rem;
}

.auth-field .form-label {
    margin: 0;
    color: rgba(220,232,229,0.84);
    font-size: 0.82rem;
    font-weight: 700;
}

.auth-card .form-control {
    min-height: 3rem;
    border-color: rgba(161,212,201,0.24);
    border-radius: 8px;
    background-color: rgba(5,12,15,0.76);
    font-size: 0.95rem;
}

.auth-password-field {
    position: relative;
}

.auth-password-field .form-control {
    padding-right: 3.2rem;
}

.auth-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.44rem;
    display: grid;
    place-items: center;
    width: 2.28rem;
    height: 2.28rem;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: rgba(220,232,229,0.66);
    line-height: 1;
    transform: translateY(-50%);
}

.auth-password-toggle:hover,
.auth-password-toggle:focus-visible {
    background: rgba(255,255,255,0.08);
    color: #f2f7f5;
}

.password-toggle-icon {
    display: grid;
    place-items: center;
}

.password-toggle-icon .ad-icon {
    width: 1.12rem;
    height: 1.12rem;
    margin-right: 0;
}

.password-toggle-hide,
.auth-password-toggle.is-visible .password-toggle-show {
    display: none;
}

.auth-password-toggle.is-visible .password-toggle-hide {
    display: grid;
}

.auth-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 3rem;
    border-radius: 8px;
    font-weight: 800;
}

.auth-switch-link {
    text-align: center;
}

.auth-switch-link a {
    color: rgba(111,214,189,0.94);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.auth-switch-link a:hover,
.auth-switch-link a:focus-visible {
    color: #f5d56d;
    text-decoration: underline;
}

.site-footer p {
    margin-bottom: 0.35rem;
}

.footer-links {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem 0.9rem;
    font-size: 0.82rem;
}

.footer-links a {
    color: rgba(220,232,229,0.72);
    font-weight: 700;
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: #f5d56d;
    text-decoration: underline;
}

.legal-page {
    background:
        radial-gradient(circle at 50% 0%, rgba(111,214,189,0.08), transparent 26rem),
        #071013;
}

.legal-shell {
    max-width: 56rem;
}

.legal-document {
    border: 1px solid rgba(111,214,189,0.2);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(111,214,189,0.05), transparent 20rem),
        rgba(7,16,19,0.88);
    box-shadow: 0 18px 48px rgba(0,0,0,0.28);
    color: rgba(220,232,229,0.9);
    padding: clamp(1.15rem, 4vw, 2.25rem);
}

.legal-header {
    margin-bottom: 1.35rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid rgba(161,212,201,0.16);
}

.legal-kicker {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: rgba(232,199,106,0.88);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.legal-header h1 {
    margin: 0;
    color: #f2f7f5;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    line-height: 1;
}

.legal-header p {
    margin: 0.65rem 0 0;
    color: rgba(220,232,229,0.66);
}

.legal-document section + section {
    margin-top: 1.35rem;
}

.legal-document h2 {
    margin: 0 0 0.45rem;
    color: #f2f7f5;
    font-size: 1.12rem;
    font-weight: 800;
}

.legal-document p {
    margin: 0;
    line-height: 1.65;
}

.legal-document p + p {
    margin-top: 0.65rem;
}

.legal-document a {
    color: rgba(111,214,189,0.98);
    font-weight: 700;
}

.legal-document code {
    color: #f5d56d;
}

@media (max-width: 575.98px) {
.auth-provider-grid {
        gap: 0.65rem;
    }

.oauth-btn {
        min-height: 3rem;
    }
}

.stat-box {
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 6px;
    padding: 0.9rem 0.5rem;
    background: rgba(0,0,0,0.18);
}

.stat-box > span {
    display: block;
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.1;
}

.stat-box > small {
    color: #9c9c9c;
}

.stat-box .soul-amount {
    display: inline-flex;
    color: var(--ad-soul, #55FFFF);
    gap: 0.28em;
}

.stat-box .soul-amount .soul-icon {
    width: 0.86em;
    height: 0.86em;
}

.empty-state {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 1rem;
}

.empty-state img {
    width: 140px;
    max-width: 60%;
    opacity: 0.75;
}

.demon-mini-card img {
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.demon-mini-card .card-body {
    font-size: 0.88rem;
}

.formation-lane {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;
    min-height: 0;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(255,255,255,0.025);
    padding: 0.45rem;
    width: fit-content;
}

.formation-lane-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    color: #aeb8c2;
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
}

.formation-lane-label .formation-lane-icon {
    margin-bottom: 0 !important;
}

.formation-lane-icon {
    width: 1.1rem;
    height: 1.1rem;
}

.button-melee-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
}

.formation-lane-cards {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
}

.formation-lane-cards.is-compressed {
    --dungeon-demon-card-width: 8rem;
    --dungeon-demon-card-height: auto;
}

.formation-lane-cards.is-drag-over {
    outline: 2px dashed rgba(250,197,28,0.68);
    outline-offset: 3px;
    border-radius: 6px;
}

.formation-lane-label.is-drag-over {
    outline: 2px dashed rgba(250,197,28,0.68);
    outline-offset: 3px;
    border-radius: 6px;
}

.formation-group {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0.5rem;
    min-width: 0;
    min-height: 0;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    background: rgba(255,255,255,0.025);
    padding: 0.45rem;
}

.formation-group-title {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.35rem;
    min-width: 0;
    color: #aeb8c2;
    font-size: 0.72rem;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
}

.formation-group-rows {
    min-width: 0;
    min-height: 0;
}

.formation-empty {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    width: var(--dungeon-demon-card-width, 9.25rem);
    min-height: 4.6rem;
    border-radius: 6px;
    color: #69737d;
    font-size: 0.8rem;
    font-weight: bold;
}

.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    min-width: 2rem;
    padding-left: 0;
    padding-right: 0;
}

.pointer-drag-ghost {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    opacity: 0.86;
    pointer-events: none;
    transform-origin: 0 0;
    box-shadow: 0 18px 40px rgba(0,0,0,0.44);
}

.hand-flow-ghost {
    position: fixed;
    z-index: 3200;
    pointer-events: none;
    transform-origin: 0 0;
    will-change: transform, opacity, filter;
}

.new-encounter-badge {
    position: absolute;
    top: 0.42rem;
    right: 0.42rem;
    z-index: 4;
    border: 1px solid rgba(141,231,255,0.72);
    border-radius: 4px;
    background: rgba(10,28,34,0.88);
    color: #8de7ff;
    font-size: 0.62rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.18rem 0.28rem;
    text-transform: uppercase;
}

.combat-stat-strip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.28rem;
    color: #f2f7ff;
    font-size: 0.62rem;
    font-weight: bold;
}

.combat-stat-strip span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.combat-stat-strip .ad-icon {
    color: #7d858d;
    width: 0.78rem;
    height: 0.78rem;
}

.combat-stat-icon {
    width: 0.72rem;
    height: 0.72rem;
    color: #7d858d;
    flex: 0 0 auto;
    margin: 0;
}

.combat-hp-bar {
    height: 0.3rem;
    margin-top: 0.2rem;
    border-radius: 4px;
    background: #303840;
    overflow: hidden;
}

.combat-hp-fill {
    height: 100%;
    background: #1f9657;
    transition: width 220ms ease;
}

.combat-hp-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.2rem;
    margin-top: 0.18rem;
    color: #f2f7ff;
    font-size: 0.62rem;
    font-weight: bold;
    line-height: 1;
}

.combat-hp-meta.is-separated {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(161,212,201,0.16);
}

.combat-hp-meta .ad-icon {
    color: #7d858d;
    width: 0.76rem;
    height: 0.76rem;
}

.attack-zap {
    position: fixed;
    inset: 0;
    z-index: 1080;
    pointer-events: none;
}

.attack-zap svg {
    width: 100%;
    height: 100%;
}

.attack-zap-trail {
    fill: none;
    stroke: var(--combat-color, #FAC51C);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(250,197,28,0.85)));
    animation: attack-zap-fade var(--battle-duration-320, 320ms) ease-out forwards;
}

.attack-zap-impact {
    fill: var(--combat-color, #FAC51C);
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(250,197,28,0.85)));
    animation: attack-zap-impact var(--battle-duration-320, 320ms) ease-out forwards;
}

.attack-zap.is-back-attack .attack-zap-trail {
    stroke-width: 5;
}

.attack-zap.is-heavy .attack-zap-trail {
    stroke-width: 7;
    animation: attack-zap-heavy var(--battle-duration-520, 520ms) cubic-bezier(0.18, 0.84, 0.18, 1) forwards;
}

.attack-zap.is-heavy .attack-zap-impact {
    animation-duration: var(--battle-duration-520, 520ms);
}

.attack-zap.is-crushing .attack-zap-trail {
    stroke-width: 14;
    animation: attack-zap-crushing var(--battle-duration-960, 960ms) cubic-bezier(0.12, 0.64, 0.1, 1) forwards;
}

.attack-zap.is-crushing .attack-zap-impact {
    animation: attack-zap-impact var(--battle-duration-960, 960ms) ease-out forwards;
}

.attack-zap.is-fiery .attack-zap-trail {
    stroke: #ff6e2f;
    stroke-width: 5;
    filter: drop-shadow(0 0 7px rgba(255,110,47,0.9));
}

.attack-zap.is-poison-flame .poison-bubble {
    animation-name: poison-bubble-flame;
}

.attack-zap.is-assassin .attack-zap-trail {
    stroke-width: 3;
    animation: attack-zap-assassin var(--battle-duration-240, 240ms) ease-out forwards;
}

.attack-zap.is-assassin .attack-zap-trail-secondary {
    opacity: 0;
    animation-delay: var(--battle-duration-34, 34ms);
}

.attack-zap.is-assassin .attack-zap-impact {
    animation-duration: var(--battle-duration-240, 240ms);
}

.attack-zap.is-player-attack .attack-zap-trail {
    stroke: var(--combat-color, #41A85F);
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(65,168,95,0.85)));
}

.attack-zap.is-player-attack .attack-zap-impact {
    fill: var(--combat-color, #41A85F);
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(65,168,95,0.85)));
}

.attack-zap.is-enemy-attack .attack-zap-trail {
    stroke: var(--combat-color, #E25041);
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(226,80,65,0.85)));
}

.attack-zap.is-enemy-attack .attack-zap-impact {
    fill: var(--combat-color, #E25041);
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(226,80,65,0.85)));
}

.attack-zap.is-poison-apply .attack-zap-trail {
    opacity: 0;
    animation: none;
}

.attack-zap.is-poison-apply .attack-zap-impact {
    fill: var(--combat-color, #167246);
    filter: drop-shadow(0 0 7px var(--combat-shadow, rgba(22,114,70,0.92)));
}

.poison-bubble {
    fill: var(--combat-color, #167246);
    stroke: color-mix(in srgb, var(--combat-color, #167246) 54%, #dfffce);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(22,114,70,0.92)));
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: poison-bubble-trail var(--battle-duration-360, 360ms) ease-out forwards;
}

.fire-spark {
    fill: #ffd166;
    stroke: #ff6e2f;
    stroke-width: 1.1;
    filter:
        drop-shadow(0 0 5px rgba(255,209,102,0.92))
        drop-shadow(0 0 8px rgba(226,80,65,0.72));
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
    animation: fire-spark-flicker var(--battle-duration-360, 360ms) ease-out forwards;
}

.fireball-shot {
    position: fixed;
    inset: 0;
    z-index: 1081;
    pointer-events: none;
}

.fireball-shot svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fireball-projectile {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: fireball-flight var(--battle-duration-520, 520ms) cubic-bezier(0.16, 0.84, 0.22, 1) forwards;
}

.fireball-core {
    fill: var(--combat-color, #E25041);
    stroke: #ffd166;
    stroke-width: 2;
    filter:
        drop-shadow(0 0 8px rgba(255,209,102,0.95))
        drop-shadow(0 0 16px var(--combat-shadow, rgba(226,80,65,0.88)));
}

.fireball-hot {
    fill: #fff4b8;
    filter: drop-shadow(0 0 8px rgba(255,244,184,0.92));
}

.fireball-impact {
    fill: none;
    stroke: #ffd166;
    stroke-width: 3;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    filter:
        drop-shadow(0 0 8px rgba(255,209,102,0.9))
        drop-shadow(0 0 16px var(--combat-shadow, rgba(226,80,65,0.82)));
    animation: fireball-impact-pop var(--battle-duration-520, 520ms) ease-out forwards;
}

.fireball-ember {
    fill: #ffd166;
    opacity: 0;
    filter: drop-shadow(0 0 6px rgba(255,110,47,0.9));
    transform-box: fill-box;
    transform-origin: center;
    animation: fireball-ember-fade var(--battle-duration-360, 360ms) ease-out forwards;
}

/* Red shockwave detonation for the grouped fire (type 4) attack. */
.fire-nova {
    position: fixed;
    inset: 0;
    z-index: 1082;
    pointer-events: none;
}

.fire-nova svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.fire-nova-flash {
    fill: var(--combat-color, #E25041);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    filter:
        drop-shadow(0 0 16px rgba(255,209,102,0.85))
        drop-shadow(0 0 30px var(--combat-shadow, rgba(226,80,65,0.9)));
    animation: fire-nova-flash var(--battle-duration-520, 520ms) ease-out forwards;
}

.fire-nova-ring {
    fill: none;
    stroke: var(--combat-color, #E25041);
    stroke-width: 6;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    filter:
        drop-shadow(0 0 10px rgba(255,209,102,0.82))
        drop-shadow(0 0 22px var(--combat-shadow, rgba(226,80,65,0.85)));
    animation: fire-nova-ring var(--battle-duration-620, 620ms) cubic-bezier(0.12, 0.72, 0.2, 1) forwards;
}

.fire-nova-ring-delayed {
    stroke-width: 3;
    opacity: 0;
    animation-delay: var(--battle-duration-80, 80ms);
}

/* Hot inner ring: yellow flame core amid the red shockwave. */
.fire-nova-ring-hot {
    stroke: #ffd166;
    stroke-width: 5;
    filter:
        drop-shadow(0 0 8px rgba(255,209,102,0.95))
        drop-shadow(0 0 18px rgba(255,110,47,0.85));
}

.dark-spike {
    position: fixed;
    z-index: 1081;
    height: 0;
    pointer-events: none;
    transform-origin: left center;
    animation: dark-spike-thrust var(--battle-duration-340, 340ms) ease-out forwards;
}

.dark-spike::before {
    content: "";
    position: absolute;
    top: -0.32rem;
    right: 0;
    width: 100%;
    height: 0.64rem;
    background: linear-gradient(90deg, rgba(4,8,10,0), color-mix(in srgb, var(--combat-color, #171d24) 72%, #05080d) 42%, var(--combat-color, #171d24) 76%, #020305);
    clip-path: polygon(0 50%, 82% 0, 100% 50%, 82% 100%);
    filter: drop-shadow(0 0 8px var(--combat-shadow, rgba(0,0,0,0.85)));
}

.chaos-lightning {
    position: fixed;
    inset: 0;
    z-index: 1081;
    pointer-events: none;
}

.chaos-lightning svg {
    width: 100%;
    height: 100%;
}

.chaos-lightning path {
    fill: none;
    stroke: var(--combat-color, #52b7ff);
    stroke-width: 7;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 10px var(--combat-shadow, rgba(82,183,255,0.9)));
    animation: chaos-lightning-flash var(--battle-duration-360, 360ms) ease-out forwards;
}

.chaos-lightning .chaos-thunder-core {
    stroke-width: 9;
}

.chaos-lightning .chaos-thunder-branch {
    stroke-width: 4;
    animation-delay: var(--battle-duration-36, 36ms);
}

.chaos-lightning .chaos-thunder-border {
    stroke: rgba(255,255,255,0.92);
    stroke-width: 14;
    filter: drop-shadow(0 0 5px rgba(255,255,255,0.72));
}

.chaos-lightning .chaos-thunder-border.chaos-thunder-branch {
    stroke-width: 8;
}

.sword-swing,
.thorn-burst,
.heal-effect {
    position: fixed;
    inset: 0;
    z-index: 1081;
    pointer-events: none;
}

.sword-swing svg,
.thorn-burst svg,
.heal-effect svg {
    width: 100%;
    height: 100%;
}

.sword-swing-arc,
.sword-swing-belly {
    fill: none;
    stroke: var(--combat-color, #FFB23F);
    stroke-linecap: round;
    filter: drop-shadow(0 0 8px var(--combat-shadow, rgba(255,178,63,0.9)));
    animation: sword-crescent-travel var(--battle-duration-440, 440ms) ease-out forwards;
}

.sword-swing-arc {
    stroke-width: 5;
}

.sword-swing-belly {
    opacity: 0.68;
    stroke-width: 11;
    stroke-dasharray: 46 96;
}

.sword-scratch-2 {
    animation-delay: var(--battle-duration-24, 24ms);
}

.sword-scratch-3 {
    animation-delay: var(--battle-duration-48, 48ms);
}

.thorn-spike {
    fill: none;
    stroke: var(--combat-color, #6E8F45);
    stroke-width: 7;
    stroke-linecap: round;
    filter: drop-shadow(0 0 7px var(--combat-shadow, rgba(110,143,69,0.86)));
    animation: thorn-burst-pulse var(--battle-duration-520, 520ms) ease-out forwards;
}

.heal-ring {
    fill: none;
    stroke: var(--combat-color, #8DE7FF);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 8px var(--combat-shadow, rgba(141,231,255,0.86)));
}

.heal-ring {
    stroke-width: 4;
    transform-box: fill-box;
    transform-origin: center;
    animation: heal-ring-rise var(--battle-duration-620, 620ms) ease-out forwards;
}

.heal-ring-secondary {
    animation-delay: var(--battle-duration-80, 80ms);
}

.heal-ring-tertiary {
    animation-delay: var(--battle-duration-150, 150ms);
}

.demon-status-strip {
    position: absolute;
    top: 0.32rem;
    right: 0.32rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-height: 1.35rem;
    pointer-events: none;
}

.demon-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    color: #dfffce;
    border: 1px solid rgba(132,236,124,0.72);
    border-radius: 999px;
    background: rgba(6,34,22,0.88);
    line-height: 1;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 2px 8px rgba(0,0,0,0.65),
        0 0 10px rgba(22,114,70,0.45);
}

.demon-status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.96rem;
    height: 0.96rem;
    color: #fff;
}

.demon-status-badge .ad-icon {
    color: inherit;
    width: 0.92rem;
    height: 0.92rem;
}

.demon-status-count {
    color: #f8fff4;
    font-size: 0.68rem;
    font-weight: 900;
}

.floating-combat-number {
    position: fixed;
    top: 0;
    right: auto;
    left: 0;
    bottom: auto;
    z-index: 1082;
    display: inline-flex;
    align-items: center;
    gap: 0.12rem;
    color: var(--combat-color, #f19187);
    font-size: 1.22rem;
    font-weight: 900;
    line-height: 1;
    -webkit-text-stroke: 0;
    paint-order: stroke fill;
    text-shadow:
        -0.08rem -0.08rem 0 var(--combat-text-outline, #fff),
        0 -0.08rem 0 var(--combat-text-outline, #fff),
        0.08rem -0.08rem 0 var(--combat-text-outline, #fff),
        -0.08rem 0 0 var(--combat-text-outline, #fff),
        0.08rem 0 0 var(--combat-text-outline, #fff),
        -0.08rem 0.08rem 0 var(--combat-text-outline, #fff),
        0 0.08rem 0 var(--combat-text-outline, #fff),
        0.08rem 0.08rem 0 var(--combat-text-outline, #fff),
        0 3px 8px rgba(0,0,0,0.95);
    pointer-events: none;
    white-space: nowrap;
    will-change: transform, opacity;
    animation: floating-combat-number var(--battle-duration-760, 760ms) ease-out forwards;
}

.floating-combat-number.is-poison {
    color: var(--combat-color, #167246);
}

.floating-combat-number.is-heal {
    color: var(--combat-color, #80d697);
}

.floating-combat-number.is-dark {
    color: var(--combat-color, #171d24);
}

/* Impact particle burst, anchored on the target card centre. */
.combat-impact-burst {
    position: fixed;
    z-index: 1083;
    width: 0;
    height: 0;
    pointer-events: none;
}

.combat-impact-core {
    position: absolute;
    top: 0;
    left: 0;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--combat-color, #FAC51C) 42%, transparent 72%);
    filter: drop-shadow(0 0 8px var(--combat-shadow, rgba(250,197,28,0.85)));
    transform: translate(-50%, -50%) scale(0.2);
    animation: combat-impact-pop var(--fx-duration, 380ms) ease-out forwards;
}

.combat-impact-burst.is-heavy .combat-impact-core {
    width: 2.3rem;
    height: 2.3rem;
}

.combat-impact-particle {
    position: absolute;
    top: 0;
    left: 0;
    width: 0.32rem;
    height: 0.6rem;
    border-radius: 999px;
    background: linear-gradient(var(--combat-color, #FAC51C), transparent);
    filter: drop-shadow(0 0 4px var(--combat-shadow, rgba(250,197,28,0.8)));
    transform: translate(-50%, -50%) rotate(var(--p-angle, 0deg));
    animation: combat-impact-particle var(--fx-duration, 380ms) ease-out forwards;
}

.combat-impact-burst.is-heavy .combat-impact-particle {
    width: 0.4rem;
    height: 0.82rem;
}

/* AOE hits get an extra expanding ring so multi-target splashes read clearly. */
.combat-impact-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.4rem;
    height: 2.4rem;
    border: 2px solid var(--combat-color, #FAC51C);
    border-radius: 50%;
    opacity: 0;
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(250,197,28,0.7)));
    transform: translate(-50%, -50%) scale(0.3);
    animation: combat-impact-ring var(--fx-duration, 380ms) ease-out forwards;
}

.reward-image {
    width: 76px;
    height: 76px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
}

.reward-item {
    background: rgba(0,0,0,0.14);
}

.reward-item.active {
    border-color: rgba(65,168,95,0.75) !important;
    box-shadow: 0 0 0 2px rgba(65,168,95,0.18);
}

.choice-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    overflow: visible;
    padding: 0.25rem;
}

@media (max-width: 767.98px) {
.choice-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.55rem;
    }
}

.short-team-dialog {
    max-width: min(92vw, 38rem);
}

.short-team-help {
    display: grid;
    gap: 0.58rem;
    color: var(--ad-text, #f2f7ff);
}

.short-team-help-image {
    display: block;
    justify-self: center;
    width: min(100%, 34rem);
    height: auto;
    max-height: min(44vh, 24rem);
    border: 1px solid rgba(161,212,201,0.18);
    border-radius: 6px;
    background: rgba(3,9,11,0.72);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.035), 0 18px 42px rgba(0,0,0,0.34);
    object-fit: contain;
}

.short-team-warning {
    border: 1px solid rgba(232,199,106,0.24);
    border-radius: 6px;
    background: rgba(232,199,106,0.09);
    color: #f3dc93;
    padding: 0.75rem 0.85rem;
}

.short-team-copy {
    justify-self: center;
    max-width: 34rem;
    margin: 0;
    color: rgba(220,232,229,0.88);
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.32;
    text-align: center;
}

.demon-detail-modal .modal-dialog {
    max-width: min(96vw, 1040px);
}

.demon-detail-modal {
    z-index: 1125;
}

body:has(#demonDetailModal.show) .modal-backdrop {
    z-index: 1120;
}

.demon-detail-modal .modal-content {
    border: 1px solid rgba(255,255,255,0.16);
    border-top: 5px solid var(--rarity-color, #D1D5D8);
    border-radius: 8px;
    background: #15191d;
    box-shadow: 0 24px 70px rgba(0,0,0,0.66);
    overflow: hidden;
}

.demon-detail-modal .modal-body {
    overflow: auto;
    padding: 0;
}

.demon-detail-layout {
    display: grid;
    grid-template-columns: minmax(320px, 0.95fr) minmax(340px, 1fr);
    align-items: stretch;
    min-height: 0;
}

.demon-detail-art {
    position: relative;
    align-self: start;
    aspect-ratio: 1 / 1;
    width: 100%;
    min-height: 0;
    background: rgba(0,0,0,0.28);
    overflow: hidden;
}

.demon-detail-art img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: center 22%;
}

.demon-detail-panel {
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--ad-text, #f2f7ff);
}

.demon-detail-heading,
.demon-detail-stats,
.demon-detail-meta,
.demon-detail-extra,
.demon-detail-actions {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
}

.demon-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.15rem;
    padding-bottom: 0.9rem;
}

.demon-detail-title {
    margin: 0;
    color: #fff;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.15;
}

.demon-detail-title-link,
.demon-detail-title-link:hover,
.demon-detail-title-link:focus-visible {
    color: #fff;
}

.demon-detail-title-link {
    text-decoration: none;
}

.demon-detail-title-link:hover,
.demon-detail-title-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2rem;
}

.demon-detail-rarity {
    margin: 0.25rem 0 0;
    color: var(--rarity-color, #FAC51C);
    font-weight: 700;
}

.demon-detail-close {
    flex: 0 0 auto;
}

.demon-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem 1.35rem;
    padding-top: 0.75rem;
    padding-bottom: 0.9rem;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.demon-detail-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    white-space: nowrap;
}

.demon-detail-stat .ad-icon,
.demon-detail-stat .combat-stat-icon {
    color: #8b949d;
    width: 1rem;
    height: 1rem;
}

.demon-detail-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    align-content: start;
    padding-bottom: 1rem;
}

.demon-detail-meta div {
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    background: rgba(255,255,255,0.04);
    padding: 0.55rem 0.65rem;
}

.demon-detail-meta span {
    display: block;
    color: #8f9aa4;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.demon-detail-meta .demon-detail-meta-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
}

.demon-detail-meta .demon-detail-meta-label-text {
    display: inline;
    min-width: 0;
}

.demon-detail-meta strong {
    display: block;
    min-width: 0;
    margin-top: 0.12rem;
    overflow: hidden;
    color: #f2f7ff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.demon-detail-extra {
    align-self: stretch;
    padding-bottom: 1rem;
    margin-top: auto;
}

.demon-detail-actions {
    display: flex;
    flex-wrap: wrap;
    align-self: stretch;
    align-items: center;
    justify-content: flex-end;
    gap: 0.6rem;
    margin-top: auto;
    padding-top: 1rem;
    padding-bottom: 1rem;
    border-top: 1px solid rgba(255,255,255,0.12);
}

.demon-detail-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 5.2rem;
    justify-content: center;
}

.demon-detail-action-lead {
    display: inline-flex;
    align-items: center;
    min-height: calc(1.5em + 0.75rem + 2px);
}

.demon-detail-actions .btn.is-training {
    box-shadow: 0 0 0 2px rgba(85,255,255,0.2), 0 0 20px rgba(85,255,255,0.18);
}

@media (max-width: 767.98px) {
.demon-detail-modal .modal-dialog {
        max-width: calc(100vw - 1rem);
        margin-right: 0.5rem;
        margin-left: 0.5rem;
    }

.demon-detail-layout {
        grid-template-columns: 1fr;
        min-height: 0;
    }

.demon-detail-art,
    .demon-detail-art img {
        min-height: 0;
        height: auto;
        aspect-ratio: 1 / 1;
    }

.demon-detail-panel {
        display: block;
    }

.demon-detail-meta {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }

.demon-detail-meta div {
        padding: 0.38rem 0.42rem;
    }

.demon-detail-meta span {
        font-size: 0.54rem;
    }

.demon-detail-meta strong {
        font-size: 0.72rem;
    }

.demon-detail-extra {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

.enemy-pressure-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    max-width: min(8rem, 78%);
    min-height: 1.35rem;
    padding: 0.16rem 0.46rem;
    border: 1px solid rgba(255,119,112,0.42);
    border-radius: 999px;
    color: #ffc0a6;
    background: rgba(92,21,17,0.46);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 0 16px rgba(226,80,65,0.18);
    font-size: 0.62rem;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: help;
}

.enemy-pressure-chip strong {
    color: #fff0c2;
    font-weight: 800;
}

.enemy-pressure-chip::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 35;
    top: calc(100% + 0.42rem);
    left: 50%;
    width: min(20rem, 78vw);
    padding: 0.5rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 6px;
    color: #eef6f3;
    background: rgba(6,12,15,0.96);
    box-shadow: 0 16px 34px rgba(0,0,0,0.42);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    white-space: pre-line;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -0.16rem);
    transition: opacity 0.14s ease, transform 0.14s ease;
}

.enemy-pressure-chip:hover::after,
.enemy-pressure-chip:focus::after,
.enemy-pressure-chip:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

.enemy-pressure-chip:focus-visible {
    outline: 2px solid rgba(255,208,118,0.76);
    outline-offset: 2px;
}

@media (max-width: 767.98px) {
.enemy-pressure-chip {
        gap: 0.2rem;
        min-height: 1.1rem;
        padding: 0.1rem 0.32rem;
        font-size: 0.54rem;
    }

.enemy-pressure-chip::after {
        width: min(16rem, 84vw);
        font-size: 0.66rem;
    }
}

@media (max-width: 575.98px) {
.cashout-summary-compact {
        align-items: flex-start;
        gap: 0.55rem;
        padding: 0.6rem;
    }

.cashout-summary-compact p {
        font-size: 0.76rem;
    }

.cashout-extract-summary {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        gap: 0.65rem;
        padding: 0.65rem;
    }

.cashout-extract-copy {
        width: 100%;
        text-align: center;
    }

.cashout-extract-copy p {
        font-size: 0.76rem;
    }

.cashout-reward-chips {
        justify-content: center;
        gap: 0.25rem;
    }

.formation-lane {
        gap: 0.22rem;
        height: 100%;
        padding: 0.22rem;
        width: 100%;
    }

.formation-lane-cards.is-compressed {
        --dungeon-demon-card-width: clamp(3.15rem, calc((100vw - 5.2rem) / 4), 5.25rem);
        --dungeon-demon-card-height: auto;
    }

.formation-empty {
        width: var(--dungeon-demon-card-width);
        height: var(--dungeon-demon-card-height);
        min-height: 0;
        font-size: 0.58rem;
    }

.formation-group-rows {
        gap: 0.22rem;
    }

.formation-group-title {
        gap: 0.18rem;
        font-size: 0.52rem;
    }

.formation-group-title .formation-lane-icon {
        width: 0.68rem;
        height: 0.68rem;
    }

.combat-stat-strip {
        gap: 0.18rem;
        font-size: 0.46rem;
    }

.combat-stat-strip span {
        gap: 0.12rem;
    }

.combat-stat-icon,
    .combat-stat-strip .ad-icon,
    .combat-hp-meta .ad-icon {
        width: 0.52rem;
        height: 0.52rem;
    }

.combat-hp-bar {
        height: 0.2rem;
        margin-top: 0.12rem;
    }

.combat-hp-meta {
        margin-top: 0.12rem;
        font-size: 0.46rem;
    }
}

@media (max-width: 420px) {
.formation-lane-cards {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
.formation-lane-cards {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.recruit-phase-panel {
    border-left: 3px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.035);
}

.strategy-phase-panel {
    border-left: 3px solid #2C82C9;
    background: rgba(44,130,201,0.08);
}

.cashout-modal-dialog {
    max-width: min(92vw, 46rem);
}

.cashout-modal-content {
    border: 1px solid rgba(161,212,201,0.18);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(12,26,31,0.96), rgba(4,13,17,0.98)),
        var(--ad-surface);
    box-shadow:
        0 22px 68px rgba(0,0,0,0.62),
        inset 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
}

.cashout-summary {
    margin-top: 0;
    border-bottom: 1px solid rgba(161,212,201,0.12);
    border-radius: 0px;
    background:
        radial-gradient(circle at 16% 0%, rgba(111,214,189,0.1), transparent 32%),
        rgba(3,12,16,0.48);
    padding: 1.15rem;
}

.cashout-summary-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin-top: 0;
}

.cashout-summary-compact p {
    color: rgba(220,232,229,0.86);
    font-size: 0.9rem;
    line-height: 1.3;
}

.cashout-extract-summary {
    display: grid;
    grid-template-columns: minmax(8.5rem, 12rem) minmax(0, 1fr);
    align-items: center;
    gap: 1.1rem;
    margin-top: 0;
}

.cashout-selected-reward {
    display: grid;
    gap: 0.75rem;
    justify-items: center;
    min-width: 0;
}

.cashout-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    color: rgba(232,199,106,0.84);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.cashout-section-title::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(232,199,106,0.5), transparent);
}

.cashout-extract-copy {
    display: grid;
    gap: 0.78rem;
    min-width: 0;
}

.cashout-demon-summary {
    display: grid;
    gap: 0.32rem;
}

.cashout-demon-eyebrow {
    color: rgba(220,232,229,0.58);
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.cashout-demon-summary h3 {
    margin: 0;
    color: var(--ad-text);
    font-size: clamp(1.12rem, 2.3vw, 1.48rem);
    font-weight: 800;
    line-height: 1.12;
}

.cashout-demon-name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.cashout-rarity-label {
    display: inline;
    color: var(--rarity-color, #D1D5D8);
    font: inherit;
    font-weight: inherit;
    letter-spacing: 0;
    line-height: inherit;
    padding: 0;
    text-transform: none;
    text-shadow: none;
}

.cashout-demon-summary p {
    margin: 0;
    color: rgba(220,232,229,0.72);
    font-size: 0.9rem;
    line-height: 1.34;
}

.cashout-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: fit-content;
    border: 1px solid rgba(232,199,106,0.42);
    border-radius: 6px;
    background: rgba(232,199,106,0.08);
    color: #f3c55c;
    font-size: 0.82rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 0.45rem 0.65rem;
    text-transform: uppercase;
}

.cashout-status-pill .ad-icon {
    width: 1rem;
    height: 1rem;
}

.cashout-divider {
    position: relative;
    height: 1px;
    margin: 0.05rem 0 0;
    background: rgba(161,212,201,0.12);
}

.cashout-divider::after {
    display: none;
}

.cashout-reward-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(6.4rem, 8.6rem));
    gap: 0.55rem;
    justify-content: flex-start;
}

.cashout-reward-chips > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    min-height: 2.45rem;
    border: 1px solid rgba(232,199,106,0.24);
    border-radius: 6px;
    background: rgba(6,14,17,0.58);
    color: #fffaf0;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.52rem 0.7rem;
}

.cashout-reward-chips > .soul-amount {
    border-color: rgba(85,255,255,0.42);
    background: rgba(6,22,24,0.74);
    color: var(--ad-soul, #55FFFF);
}

.cashout-reward-chips .ad-icon {
    width: 1.05rem;
    height: 1.05rem;
    color: #f3c55c;
}

.cashout-reward-chips .soul-icon {
    width: 1.12rem;
    height: 1.12rem;
}

.cashout-extract-note {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid rgba(232,199,106,0.2);
    border-radius: 6px;
    background: rgba(255,255,255,0.035);
    color: rgba(220,232,229,0.82);
    font-size: 0.95rem;
    padding: 0.85rem 1rem;
}

.cashout-extract-note .ad-icon {
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    color: #f3c55c;
}

.recruit-phase-panel {
    margin-top: 0.75rem;
}

.cashout-demon-card {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 6px;
    background: rgba(0,0,0,0.16);
    color: #fff;
    padding: 0.75rem;
    text-align: left;
}

.cashout-demon-card.active {
    border-color: rgba(250,197,28,0.82);
    box-shadow: 0 0 0 2px rgba(250,197,28,0.18);
}

.cashout-demon-card img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    margin-bottom: 0.65rem;
}

.cashout-demon-name {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.92rem;
    font-weight: bold;
    line-height: 1.2;
}

@keyframes demon-attack-hop {
    0% {
        transform: translate(0, 0) scale(1);
        filter: brightness(1);
    }
    38% {
        transform: translate(var(--lunge-x, 0px), var(--lunge-y, 0px)) scale(1.05);
        filter: brightness(1.18);
    }
    100% {
        transform: translate(0, 0) scale(1);
        filter: brightness(1);
    }
}

@keyframes demon-hit-flinch {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
        filter: brightness(1);
    }
    28% {
        transform: scale(0.95);
        filter: brightness(1.5) saturate(1.2);
    }
    60% {
        transform: scale(1.01);
    }
}

@keyframes demon-death-fall {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        filter: brightness(1.9) saturate(0.4);
    }
    18% {
        transform: translateY(-0.18rem) scale(1.04);
        filter: brightness(2.1) saturate(0.2);
    }
    100% {
        transform: translateY(0.5rem) scale(0.92) rotate(-3deg);
        filter: brightness(0.55) grayscale(0.85);
    }
}

@keyframes demon-poison-tick {
    0%,
    100% {
        filter: brightness(1);
    }
    30% {
        filter: brightness(1.16) hue-rotate(-12deg) saturate(1.3);
    }
}

@keyframes combat-impact-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.2);
    }
    30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
    }
}

@keyframes combat-impact-particle {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--p-angle, 0deg)) translateY(0) scale(0.6);
    }
    24% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(var(--p-angle, 0deg)) translateY(calc(-1 * var(--p-dist, 16px))) scale(0.35);
    }
}

@keyframes combat-impact-ring {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    35% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(2.4);
    }
}

@keyframes combat-screenshake {
    0%,
    100% {
        transform: translate(0, 0);
    }
    20% {
        transform: translate(-0.22rem, 0.16rem);
    }
    40% {
        transform: translate(0.24rem, -0.14rem);
    }
    60% {
        transform: translate(-0.16rem, -0.12rem);
    }
    80% {
        transform: translate(0.12rem, 0.1rem);
    }
}

@keyframes attack-zap-fade {
    0% {
        opacity: 0;
        stroke-width: 2;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        stroke-width: 7;
    }
}

@keyframes attack-zap-impact {
    0% {
        opacity: 0;
        transform: scale(0.65);
        transform-origin: center;
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.5);
        transform-origin: center;
    }
}

@keyframes attack-zap-heavy {
    0% {
        opacity: 0;
        stroke-width: 5;
        stroke-dasharray: 18 240;
        stroke-dashoffset: 38;
    }
    34% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        stroke-width: 10;
        stroke-dasharray: 160 40;
        stroke-dashoffset: -180;
    }
}

@keyframes attack-zap-crushing {
    0% {
        opacity: 0;
        stroke-width: 12;
        stroke-dasharray: 8 260;
        stroke-dashoffset: 28;
    }
    42% {
        opacity: 1;
        stroke-width: 16;
    }
    100% {
        opacity: 0;
        stroke-width: 22;
        stroke-dasharray: 260 24;
        stroke-dashoffset: -280;
    }
}

@keyframes attack-zap-assassin {
    0% {
        opacity: 0;
        stroke-dasharray: 4 190;
        stroke-dashoffset: 10;
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        stroke-dasharray: 118 28;
        stroke-dashoffset: -150;
    }
}

@keyframes fireball-flight {
    0% {
        opacity: 0;
        transform: translate(var(--fireball-start-x), var(--fireball-start-y)) scale(0.52);
    }
    12% {
        opacity: 1;
        transform: translate(var(--fireball-start-x), var(--fireball-start-y)) scale(0.8);
    }
    78% {
        opacity: 1;
        transform: translate(var(--fireball-end-x), var(--fireball-end-y)) scale(1.08);
    }
    100% {
        opacity: 0;
        transform: translate(var(--fireball-end-x), var(--fireball-end-y)) scale(0.62);
    }
}

@keyframes fireball-impact-pop {
    0%, 58% {
        opacity: 0;
        transform: scale(0.25);
    }
    68% {
        opacity: 1;
        transform: scale(0.78);
    }
    100% {
        opacity: 0;
        transform: scale(1.72);
    }
}

@keyframes fireball-ember-fade {
    0% {
        opacity: 0;
        transform: translateY(0.12rem) scale(0.45);
    }
    24% {
        opacity: 0.88;
    }
    100% {
        opacity: 0;
        transform: translateY(-0.5rem) scale(0.78);
    }
}

@keyframes fire-nova-flash {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    18% {
        opacity: 0.95;
        transform: scale(0.72);
    }
    100% {
        opacity: 0;
        transform: scale(1.18);
    }
}

@keyframes fire-nova-ring {
    0% {
        opacity: 0;
        transform: scale(0.16);
    }
    16% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.06);
    }
}

@keyframes fire-spark-flicker {
    0% {
        opacity: 0;
        transform: translateY(0.18rem) scale(0.38) rotate(-8deg);
    }
    18% {
        opacity: 1;
    }
    52% {
        opacity: 0.92;
        transform: translateY(-0.12rem) scale(1.15) rotate(8deg);
    }
    100% {
        opacity: 0;
        transform: translateY(-0.62rem) scale(0.74) rotate(-4deg);
    }
}

@keyframes poison-bubble-trail {
    0% {
        opacity: 0;
        transform: translateY(0) scale(0.45);
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(-0.42rem) scale(1.24);
    }
}

@keyframes poison-bubble-flame {
    0% {
        opacity: 0;
        transform: translateY(0.1rem) scale(0.42);
    }
    16% {
        opacity: 1;
    }
    58% {
        opacity: 0.86;
        transform: translateY(-0.18rem) scale(1.06);
    }
    100% {
        opacity: 0;
        transform: translateY(-0.72rem) scale(0.72);
    }
}

@keyframes sword-crescent-travel {
    0% {
        opacity: 0;
        stroke-width: 3;
        stroke-dasharray: 18 180;
        stroke-dashoffset: 88;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        stroke-width: 7;
        stroke-dasharray: 132 24;
        stroke-dashoffset: -62;
    }
}

@keyframes demon-target-shake {
    0%, 100% {
        transform: translateX(0);
    }
    18% {
        transform: translateX(-0.34rem);
    }
    36% {
        transform: translateX(0.34rem);
    }
    54% {
        transform: translateX(-0.22rem);
    }
    72% {
        transform: translateX(0.18rem);
    }
}

@keyframes thorn-burst-pulse {
    0% {
        opacity: 0;
        stroke-width: 3;
        stroke-dasharray: 4 90;
        stroke-dashoffset: 12;
    }
    24% {
        opacity: 1;
        stroke-width: 9;
    }
    100% {
        opacity: 0;
        stroke-width: 4;
        stroke-dasharray: 64 14;
        stroke-dashoffset: -58;
    }
}

@keyframes heal-ring-rise {
    0% {
        opacity: 0;
        transform: scale(0.24);
        transform-origin: center;
    }
    20% {
        opacity: 1;
    }
    72% {
        opacity: 0.72;
    }
    100% {
        opacity: 0;
        transform: scale(2.2);
        transform-origin: center;
    }
}

@keyframes dark-spike-thrust {
    0% {
        opacity: 0;
        transform: rotate(var(--dark-spike-angle, 0deg)) scaleX(0.15);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(var(--dark-spike-angle, 0deg)) scaleX(1);
    }
}

@keyframes chaos-lightning-flash {
    0% {
        opacity: 0;
        stroke-width: 3;
    }
    14% {
        opacity: 1;
        stroke-width: 11;
    }
    36% {
        opacity: 0.38;
    }
    52% {
        opacity: 1;
        stroke-width: 7;
    }
    100% {
        opacity: 0;
        stroke-width: 5;
    }
}

@keyframes floating-combat-number {
    0% {
        opacity: 1;
        transform: translate(-50%, 0.35rem) scale(0.82);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -0.1rem) scale(1.12);
    }
    82% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -2.35rem) scale(1.02);
    }
}

@keyframes battle-result-fade {
    0%, 82% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes battle-result-shockwave {
    0% {
        opacity: 0;
        transform: scale(0.2);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.15);
    }
}

@keyframes battle-result-ring {
    0% {
        opacity: 0;
        transform: scale(0.35) rotate(-18deg);
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.42) rotate(16deg);
    }
}

@keyframes battle-result-text-pop {
    0% {
        opacity: 0;
        transform: scale(0.62) rotate(-8deg);
        filter: blur(0.2rem);
    }
    18% {
        opacity: 1;
        transform: scale(1.08) rotate(1deg);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: scale(1.18) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes battle-result-spark {
    0% {
        opacity: 0;
        margin-top: 0;
        transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) scaleY(0.2);
    }
    18% {
        opacity: 1;
    }
    72% {
        opacity: 0.86;
        margin-top: -3.9rem;
        transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) scaleY(1.12);
    }
    100% {
        opacity: 0;
        margin-top: -4.6rem;
        transform: translate(-50%, -50%) rotate(var(--spark-angle, 0deg)) scaleY(1.25);
    }
}

@keyframes recruit-swap-confirm {
    0% {
        transform: scale(0.96);
        box-shadow: 0 0 0 0 rgba(250,197,28,0);
    }
    38% {
        transform: scale(1.04);
        border-color: rgba(250,197,28,0.95);
        box-shadow:
            0 0 0 3px rgba(250,197,28,0.32),
            0 0 24px rgba(65,168,95,0.42);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(250,197,28,0);
    }
}

@keyframes hand-flow-landed {
    0% {
        opacity: 0.68;
        transform: translateY(0.16rem) scale(0.96);
        box-shadow: 0 0 0 0 rgba(232,199,106,0);
    }
    42% {
        opacity: 1;
        transform: translateY(0) scale(1.045);
        border-color: rgba(232,199,106,0.95);
        box-shadow:
            0 0 0 3px rgba(232,199,106,0.24),
            0 0 24px rgba(111,214,189,0.3);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 0 0 0 rgba(232,199,106,0);
    }
}

@keyframes enemy-card-reveal {
    0% {
        opacity: 0;
        transform: translateY(-0.55rem) scale(0.92);
        filter: saturate(0.7) brightness(1.45);
        box-shadow:
            0 0 0 0 rgba(226,80,65,0),
            0 0 0 rgba(226,80,65,0);
    }
    45% {
        opacity: 1;
        transform: translateY(0.1rem) scale(1.05);
        filter: saturate(1.25) brightness(1.18);
        box-shadow:
            0 0 0 3px rgba(226,80,65,0.26),
            0 0 28px rgba(226,80,65,0.34);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: none;
        box-shadow: 0 0 0 0 rgba(226,80,65,0);
    }
}

@keyframes collection-reinforcement-pulse {
    0%,
    100% {
        border-color: rgba(141,231,255,0.42);
        box-shadow:
            inset 0 0 0 1px rgba(141,231,255,0.08),
            0 0 14px rgba(82,183,255,0.16);
    }
    50% {
        border-color: rgba(141,231,255,0.95);
        box-shadow:
            0 0 0 3px rgba(141,231,255,0.18),
            0 0 28px rgba(82,183,255,0.42);
    }
}

@keyframes collection-training-particle-converge {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(var(--sx), var(--sy)) scale(calc(var(--size, 1) * 0.55)) rotate(0deg);
    }
    12% {
        opacity: 1;
    }
    68% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(calc(var(--size, 1) * 1.18)) rotate(var(--spin, 0deg));
    }
    84% {
        opacity: 1;
        transform: translate(-50%, -50%) translate(0, 0) scale(calc(var(--size, 1) * 0.34)) rotate(var(--spin, 0deg));
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translate(0, 0) scale(0) rotate(var(--spin, 0deg));
    }
}

@keyframes collection-training-result-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 0.85rem)) scale(0.74);
    }
    72% {
        opacity: 1;
        transform: translate(-50%, calc(-50% - 0.12rem)) scale(1.08);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes collection-training-core-impact {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1);
    }
    72% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.1);
    }
    82% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

@keyframes collection-training-vortex-pulse {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }
    54% {
        opacity: 0.72;
        transform: scale(0.9);
    }
    100% {
        opacity: 0;
        transform: scale(0.72);
    }
}

@keyframes collection-training-fed-card {
    0%,
    100% {
        filter: none;
    }
    16%,
    62% {
        filter: drop-shadow(0 0 34px rgba(85,255,255,0.78)) saturate(1.34) brightness(1.18);
    }
}

@keyframes dungeon-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes dungeon-loading-shimmer {
    0% {
        background-position: 180% 0, 0 0;
        opacity: 0.72;
    }
    50% {
        opacity: 1;
    }
    100% {
        background-position: -80% 0, 0 0;
        opacity: 0.72;
    }
}

@keyframes dungeon-loading-pulse {
    0%,
    100% {
        opacity: 0.52;
        transform: scale(0.82);
    }
    50% {
        opacity: 1;
        transform: scale(1);
    }
}

.rank-table th,
.rank-table td {
    text-align: center;
}

.rank-table th:first-child,
.rank-table td:first-child {
    width: 4rem;
}

.rank-table th:nth-child(2),
.rank-table td:nth-child(2) {
    text-align: left;
}

.rank-table thead th {
    background: rgba(44,130,201,0.28);
    border-bottom-color: rgba(255,255,255,0.28);
    color: #fff;
}

.rank-sort-link {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.rank-sort-link:hover,
.rank-sort-link.active {
    color: tomato;
}

.current-player-rank td {
    background: rgba(250,197,28,0.16) !important;
    color: #fff;
}

.current-player-rank td:first-child {
    color: #FAC51C !important;
    font-weight: bold;
}

/* Visual theme: misted dungeon, teal magic, restrained ember accents */
:root {
    --ad-bg: #071013;
    --ad-bg-soft: #0d191d;
    --ad-surface: rgba(13,25,29,0.86);
    --ad-surface-soft: rgba(20,35,40,0.72);
    --ad-surface-glass: rgba(10,18,22,0.58);
    --ad-border: rgba(161,212,201,0.16);
    --ad-border-strong: rgba(161,212,201,0.28);
    --ad-text: #eef8f5;
    --ad-muted: #9fb6b2;
    --ad-faint: #6f8582;
    --ad-teal: #6fd6bd;
    --ad-teal-soft: rgba(111,214,189,0.16);
    --ad-green: #80d697;
    --ad-violet: #9c7ac8;
    --ad-ember: #e78a55;
    --ad-ember-soft: rgba(231,138,85,0.16);
    --ad-gold: #e8c76a;
    /* Torch-gold button treatment (warm, dimensional gold for the dungeon) */
    --gold-top: #f3cf78;
    --gold-mid: #e3a838;
    --gold-bottom: #c8861f;
    --gold-rim: #f6dd9a;
    --gold-text: #2a1d04;
    --gold-glow: rgba(232,176,74,0.40);
    --ad-soul: #55FFFF;
    --ad-danger: #e4685e;
    --ad-radius: 6px;
}

html,
body {
    background:
        radial-gradient(circle at 16% 0%, rgba(111,214,189,0.1), transparent 28rem),
        radial-gradient(circle at 86% 8%, rgba(156,122,200,0.08), transparent 24rem),
        var(--ad-bg);
    color: var(--ad-text);
}

a {
    color: var(--ad-teal);
}

a:hover {
    color: #a5ead9;
}

.text-muted,
.text-secondary {
    color: var(--ad-muted) !important;
}

.bg-dark,
.navbar.bg-dark {
    background: rgba(6,13,16,0.92) !important;
}

.navbar,
.border-bottom {
    border-color: var(--ad-border) !important;
}

.navbar-brand,
.nav-link {
    color: var(--ad-text);
}

.navbar-dark .navbar-nav .nav-link {
    color: var(--ad-muted);
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: var(--ad-teal);
}

.navbar-collapse {
    gap: 1rem;
}

.nav-auth-actions,
.nav-account {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    min-height: 2.5rem;
}

.nav-account {
    flex-wrap: nowrap;
}

.nav-balance,
.nav-player,
.nav-logout-btn {
    border: 1px solid var(--ad-border-strong);
    border-radius: var(--ad-radius);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.01)),
        rgba(7,16,19,0.72);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 8px 20px rgba(0,0,0,0.18);
}

.nav-balance,
.nav-player {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    color: var(--ad-text);
}

.nav-balance {
    padding: 0.38rem 0.58rem;
}

.nav-balance .soul-amount {
    font-size: 0.84rem;
}

.nav-balance .soul-icon {
    width: 1.18em;
    height: 1.18em;
    filter: drop-shadow(0 0 7px rgba(85,255,255,0.42));
}

.nav-balance .soul-amount-value {
    color: #f5ffff;
    font-weight: 900;
}

.nav-balance .soul-amount-label {
    color: rgba(175,255,255,0.78);
    display: none;
}

.nav-player {
    gap: 0.4rem;
    max-width: 13rem;
    padding: 0.38rem 0.62rem;
    color: var(--ad-muted);
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
}

.nav-player:hover,
.nav-player:focus-visible {
    border-color: rgba(111,214,189,0.5);
    color: var(--ad-text);
    text-decoration: none;
}

.nav-player .ad-icon {
    color: var(--ad-teal);
    margin-right: 0;
}

.nav-player span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--ad-danger);
}

.nav-logout-btn:hover,
.nav-logout-btn:focus-visible {
    border-color: rgba(228,104,94,0.62);
    background:
        linear-gradient(180deg, rgba(228,104,94,0.14), rgba(228,104,94,0.045)),
        rgba(28,12,13,0.86);
    color: #ffaea7;
}

.nav-logout-btn:focus-visible,
.nav-balance:focus-visible,
.nav-player:focus-visible {
    outline: 2px solid rgba(111,214,189,0.82);
    outline-offset: 2px;
}

@media (max-width: 768px) {
.navbar-collapse {
        padding-top: 0.75rem;
    }

.nav-auth-actions,
    .nav-account {
        justify-content: flex-start;
        width: 100%;
    }

.nav-account {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.5rem;
    }

.nav-balance,
    .nav-player {
        min-width: 0;
    }

.nav-balance {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

.dropdown-menu,
.modal-content,
.card {
    border-color: var(--ad-border);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.035), transparent 42%),
        var(--ad-surface);
    color: var(--ad-text);
    box-shadow: 0 18px 48px rgba(0,0,0,0.26);
}

.card-header,
.modal-header,
.modal-footer {
    border-color: var(--ad-border);
    background: rgba(6,13,16,0.28);
}

.card-body {
    color: var(--ad-text);
}

.form-control,
.form-select {
    border-color: var(--ad-border);
    background-color: rgba(5,12,15,0.68);
    color: var(--ad-text);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(111,214,189,0.58);
    box-shadow: 0 0 0 0.2rem rgba(111,214,189,0.14);
}

.btn {
    border-radius: var(--ad-radius);
    font-weight: 700;
}

.btn-glass-gold,
.btn-warning {
    --bs-btn-color: #071214;
    --bs-btn-bg: #f5d56d;
    --bs-btn-border-color: rgba(232,199,106,0.82);
    --bs-btn-hover-color: #071214;
    --bs-btn-hover-bg: #ffe482;
    --bs-btn-hover-border-color: rgba(255,228,130,0.96);
    --bs-btn-active-color: #071214;
    --bs-btn-active-bg: #e5ba48;
    --bs-btn-active-border-color: rgba(255,228,130,0.96);
    border-color: rgba(232,199,106,0.82);
    background:
        linear-gradient(180deg, #ffe482, #dcae38),
        #f5d56d;
    color: #071214;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.4),
        inset 0 -1px 0 rgba(71,46,6,0.28),
        0 0 16px rgba(232,199,106,0.18);
}

.btn-glass-gold:not(:disabled):hover,
.btn-glass-gold:not(:disabled):focus-visible,
.btn-warning:not(:disabled):hover,
.btn-warning:not(:disabled):focus-visible {
    border-color: rgba(255,228,130,0.96);
    background:
        linear-gradient(180deg, #fff0a8, #e5ba48),
        #ffe482;
    color: #071214;
}

.btn-glass-muted {
    --bs-btn-color: rgba(220,232,229,0.82);
    --bs-btn-bg: rgba(3,9,11,0.54);
    --bs-btn-border-color: rgba(161,212,201,0.26);
    --bs-btn-hover-color: #f2f7f5;
    --bs-btn-hover-bg: rgba(13,29,32,0.74);
    --bs-btn-hover-border-color: rgba(161,212,201,0.46);
    --bs-btn-active-color: #f2f7f5;
    --bs-btn-active-bg: rgba(18,39,42,0.82);
    --bs-btn-active-border-color: rgba(161,212,201,0.54);
    border-color: rgba(161,212,201,0.26);
    background:
        linear-gradient(180deg, rgba(161,212,201,0.08), rgba(3,9,11,0.22)),
        rgba(3,9,11,0.54);
    color: rgba(220,232,229,0.82);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.btn-glass-muted:not(:disabled):hover,
.btn-glass-muted:not(:disabled):focus-visible {
    border-color: rgba(161,212,201,0.46);
    background:
        linear-gradient(180deg, rgba(161,212,201,0.14), rgba(3,9,11,0.24)),
        rgba(13,29,32,0.74);
    color: #f2f7f5;
}

.btn-glass-danger,
.btn-danger {
    --bs-btn-color: #fff2f0;
    --bs-btn-bg: rgba(226,80,65,0.22);
    --bs-btn-border-color: rgba(226,80,65,0.62);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(226,80,65,0.34);
    --bs-btn-hover-border-color: rgba(255,127,111,0.8);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: rgba(181,49,42,0.52);
    --bs-btn-active-border-color: rgba(255,127,111,0.86);
    border-color: rgba(226,80,65,0.62);
    background:
        linear-gradient(180deg, rgba(226,80,65,0.26), rgba(80,12,10,0.22)),
        rgba(42,10,10,0.66);
    color: #fff2f0;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 0 16px rgba(226,80,65,0.14);
}

.btn-glass-danger:not(:disabled):hover,
.btn-glass-danger:not(:disabled):focus-visible,
.btn-danger:not(:disabled):hover,
.btn-danger:not(:disabled):focus-visible {
    border-color: rgba(255,127,111,0.8);
    background:
        linear-gradient(180deg, rgba(255,127,111,0.34), rgba(80,12,10,0.28)),
        rgba(66,14,12,0.78);
    color: #fff;
}

.modal .btn-close {
    box-sizing: border-box;
    position: relative;
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(161,212,201,0.26);
    border-radius: 6px;
    background-color: rgba(3,9,11,0.54);
    background-image: none;
    color: rgba(220,232,229,0.88);
    padding: 0;
    opacity: 1;
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.modal .btn-close::before,
.modal .btn-close::after {
    content: "";
    position: absolute;
    width: 0.86rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
}

.modal .btn-close::before {
    transform: rotate(45deg);
}

.modal .btn-close::after {
    transform: rotate(-45deg);
}

.modal .btn-close:hover,
.modal .btn-close:focus-visible {
    border-color: rgba(161,212,201,0.46);
    background-color: rgba(13,29,32,0.74);
    color: #f2f7f5;
    opacity: 1;
    outline: 0;
}

.btn-primary {
    --bs-btn-color: #04100f;
    --bs-btn-bg: var(--ad-teal);
    --bs-btn-border-color: var(--ad-teal);
    --bs-btn-hover-color: #03100e;
    --bs-btn-hover-bg: #8be4d0;
    --bs-btn-hover-border-color: #8be4d0;
    --bs-btn-active-color: #03100e;
    --bs-btn-active-bg: #5fc7af;
    --bs-btn-active-border-color: #5fc7af;
}

.btn-success {
    --bs-btn-color: #06110a;
    --bs-btn-bg: var(--ad-green);
    --bs-btn-border-color: var(--ad-green);
    --bs-btn-hover-color: #06110a;
    --bs-btn-hover-bg: #9ce5ae;
    --bs-btn-hover-border-color: #9ce5ae;
}

.btn-warning {
    font-weight: 800;
}

.btn-danger,
.btn-outline-danger:hover {
    font-weight: 800;
}

.btn-outline-light {
    --bs-btn-color: var(--ad-text);
    --bs-btn-border-color: var(--ad-border-strong);
    --bs-btn-hover-color: #06110f;
    --bs-btn-hover-bg: var(--ad-teal);
    --bs-btn-hover-border-color: var(--ad-teal);
}

#pagination .page-link,
.page-link {
    border-color: var(--ad-border);
    background: rgba(8,18,21,0.72);
    color: var(--ad-muted);
}

#pagination .page-link:hover,
.page-link:hover {
    background: var(--ad-teal-soft);
    color: var(--ad-text);
}

#pagination .page-item.active .page-link,
.page-item.active .page-link {
    background-color: var(--ad-teal) !important;
    border-color: var(--ad-teal) !important;
    color: #04100f !important;
}

.rank-sort-link {
    color: var(--ad-text);
}

body.seo-page {
    min-height: 100vh;
    background:
        linear-gradient(rgba(5,10,12,0.68), rgba(5,10,12,0.86)),
        url("/app/images/assets/background/amongdemons_home.png") center top / cover fixed no-repeat,
        #071013;
    color: var(--ad-text, #f5f7f8);
}

.seo-page main {
    padding: 0;
}

.seo-page .navbar,
.seo-page footer {
    background: rgba(5,10,12,0.88) !important;
    backdrop-filter: blur(10px);
}

.seo-hero {
    min-height: min(72vh, 46rem);
    display: flex;
    align-items: center;
    padding: clamp(3rem, 8vw, 6rem) 1rem;
    background:
        radial-gradient(circle at 76% 28%, rgba(111,214,189,0.12), transparent 24rem),
        radial-gradient(circle at 68% 72%, rgba(232,199,106,0.08), transparent 18rem),
        linear-gradient(90deg, rgba(5,10,12,0.78), rgba(5,10,12,0.5), rgba(5,10,12,0.72));
}

.seo-demons-hero {
    background:
        radial-gradient(circle at 78% 28%, rgba(147,101,184,0.1), transparent 20rem),
        radial-gradient(circle at 62% 68%, rgba(65,168,95,0.09), transparent 18rem),
        radial-gradient(circle at 88% 62%, rgba(226,80,65,0.08), transparent 16rem),
        linear-gradient(90deg, rgba(5,10,12,0.78), rgba(5,10,12,0.5), rgba(5,10,12,0.72));
}

.seo-hero-copy,
.seo-section,
.seo-demon-detail {
    width: min(1160px, calc(100% - 2rem));
    margin: 0 auto;
}

.seo-hero-copy {
    max-width: 44rem;
    margin-left: max(1rem, calc((100vw - 1160px) / 2));
}

.seo-kicker {
    display: inline-block;
    color: var(--ad-teal, #6fd6bd);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.seo-hero h1,
.seo-demon-detail h1 {
    max-width: 12ch;
    margin: 0.35rem 0 0.75rem;
    color: #fff;
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 0.95;
}

.seo-hero p,
.seo-demon-detail-copy > p,
.seo-section-heading p,
.seo-demon-card p,
.seo-feature-grid p,
.seo-feature-grid li {
    color: var(--ad-muted, #b8c2c8);
}

.seo-hero p,
.seo-demon-detail-copy > p {
    max-width: 40rem;
    font-size: clamp(1rem, 2.5vw, 1.25rem);
}

.seo-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.4rem;
}

.seo-section {
    padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.seo-section-heading {
    max-width: 48rem;
    margin-bottom: 1.5rem;
}

.seo-section-heading h2,
.seo-feature-grid h3,
.seo-demon-card h3 {
    color: #fff;
    letter-spacing: 0;
}

.seo-section-heading h2 {
    margin-bottom: 0.4rem;
    font-size: clamp(1.7rem, 4vw, 2.6rem);
    font-weight: 800;
}

.seo-feature-grid,
.seo-demon-grid {
    display: grid;
    gap: 1rem;
}

.seo-feature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seo-feature-grid article,
.seo-demon-card,
.seo-stat-list > div {
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: rgba(7,18,22,0.82);
    box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}

.seo-feature-grid article {
    padding: 1rem;
}

.seo-feature-grid h3 {
    margin-bottom: 0.45rem;
    font-size: 1.05rem;
}

.seo-demon-grid {
    grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
}

.seo-demons-page .seo-demon-grid,
.seo-demon-page .seo-demon-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.seo-demon-card {
    overflow: hidden;
    position: relative;
    border-color: rgba(255,255,255,0.12);
    box-shadow:
        inset 0 3px 0 var(--rarity-color, var(--ad-teal, #6fd6bd)),
        0 12px 28px rgba(0,0,0,0.28);
}

.seo-demon-card-art {
    display: block;
    aspect-ratio: 1 / 1;
    background: rgba(0,0,0,0.35);
}

.seo-demon-card img,
.seo-demon-detail-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.seo-demon-card-body {
    padding: 0.9rem;
}

.seo-demon-card-rarity {
    color: var(--rarity-color, var(--ad-teal, #6fd6bd));
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
}

.seo-demon-card h3 {
    margin: 0.25rem 0 0.4rem;
    font-size: 1.1rem;
}

.seo-demons-page .seo-demon-card h3 {
    font-size: 0.96rem;
}

.seo-demons-page .seo-demon-card p {
    font-size: 0.82rem;
    line-height: 1.35;
}

.seo-demon-card-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.28rem;
    margin-top: 0.65rem;
}

.seo-demon-card-meta span {
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 6px;
    background: rgba(0,0,0,0.22);
    color: rgba(245,247,248,0.88);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1.2;
    overflow-wrap: anywhere;
    padding: 0.28rem 0.2rem;
    text-align: center;
}

.seo-demon-card a {
    color: inherit;
    text-decoration: none;
}

.seo-demon-card a:hover {
    color: var(--ad-ember, #ff6e2f);
}

.seo-demon-detail {
    display: grid;
    grid-template-columns: minmax(16rem, 28rem) minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(2rem, 5vw, 4rem) 0;
}

.seo-demon-detail-art {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid var(--rarity-color, rgba(255,255,255,0.14));
    border-radius: 8px;
    background: rgba(0,0,0,0.4);
    box-shadow: 0 18px 42px rgba(0,0,0,0.32), 0 0 0 1px rgba(255,255,255,0.04);
}

.seo-demon-detail .seo-kicker,
.seo-stat-list dt {
    color: var(--rarity-color, var(--ad-teal, #6fd6bd));
}

.seo-stat-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0 0;
}

.seo-stat-list > div {
    padding: 0.7rem 0.85rem;
}

.seo-stat-list dt {
    color: var(--rarity-color, var(--ad-muted, #b8c2c8));
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
}

.seo-stat-list dd {
    margin: 0;
    color: #fff;
    font-weight: 800;
}

@media (max-width: 900px) {
.seo-feature-grid,
    .seo-demon-detail {
        grid-template-columns: 1fr;
    }

.seo-demons-page .seo-demon-grid,
    .seo-demon-page .seo-demon-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

.seo-hero-copy {
        margin-left: auto;
    }

.seo-stat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
.seo-hero {
        min-height: 64vh;
    }

.seo-demon-grid,
    .seo-stat-list {
        grid-template-columns: 1fr;
    }

.seo-demons-page .seo-demon-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.seo-demon-page .seo-demon-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
.seo-demons-page .seo-demon-grid {
        grid-template-columns: 1fr;
    }
}

.rank-sort-link:hover,
.rank-sort-link.active {
    color: var(--ad-ember);
}

.demon-type-page {
    min-height: 100%;
    background:
        linear-gradient(rgba(5,9,12,0.76), rgba(5,9,12,0.9)),
        radial-gradient(circle at 18% 6%, rgba(232,199,106,0.12), transparent 24rem),
        radial-gradient(circle at 82% 14%, rgba(111,214,189,0.12), transparent 22rem),
        url("/app/images/assets/background/amongdemons_home.png") center top / cover fixed no-repeat;
    background-attachment: fixed;
}

.demon-type-page .navbar,
.demon-type-page footer {
    border-color: rgba(161,212,201,0.16) !important;
    background: rgba(4,10,13,0.86) !important;
    backdrop-filter: blur(12px);
}

.demon-type-page main.container {
    max-width: 1180px;
}

.demon-type-hero {
    position: relative;
    margin-top: 0.25rem;
    border: 1px solid rgba(161,212,201,0.12);
    border-radius: 8px;
    background:
        linear-gradient(90deg, rgba(111,214,189,0.08), transparent 45%, rgba(232,199,106,0.08)),
        rgba(3,9,11,0.34);
    box-shadow: 0 18px 44px rgba(0,0,0,0.22);
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.demon-type-title-block {
    text-align: center;
}

.demon-type-title-block h1 {
    margin-bottom: 0.2rem;
    color: #f8fbf9;
    font-weight: 800;
    text-shadow: 0 3px 20px rgba(0,0,0,0.72);
}

.demon-type-title-block p {
    color: rgba(220,232,229,0.68) !important;
    letter-spacing: 0;
}

.demon-type-hero a {
    color: #f3dc93;
    text-shadow: 0 0 12px rgba(232,199,106,0.36);
}

.demon-type-page .demon-type-info {
    border: 1px solid rgba(161,212,201,0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(111,214,189,0.1), transparent 38%, rgba(232,199,106,0.08)),
        linear-gradient(180deg, rgba(10,24,27,0.92), rgba(4,10,13,0.88));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 18px 48px rgba(0,0,0,0.34);
    padding: 3.25rem 1.15rem 1.15rem;
}

.demon-type-info-heading {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    margin-bottom: 1rem;
}

.type-info-badge,
.type-stat-pill,
.type-rarity-pill {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 0;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    background: rgba(0,0,0,0.28);
    color: #dce8e5;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}

.type-info-badge {
    padding: 0.5rem 0.7rem;
}

.type-info-badge span,
.type-stat-pill span,
.type-rarity-pill span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: rgba(220,232,229,0.66);
    font-size: 0.72rem;
    text-transform: uppercase;
}

.type-info-badge strong,
.type-stat-pill strong,
.type-rarity-pill strong {
    color: #fff;
    font-size: 0.9rem;
}

.demon-type-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.85rem;
}

.demon-type-info-grid article {
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    background: rgba(2,7,9,0.48);
    padding: 0.85rem;
}

.demon-type-info-grid h2 {
    margin: 0 0 0.65rem;
    color: #f2f7f5;
    font-size: 0.98rem;
    font-weight: 700;
}

.type-stat-row,
.type-rarity-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.type-stat-row {
    flex-direction: column;
}

.type-stat-pill {
    width: 100%;
    min-width: 7.35rem;
    padding: 0.55rem 0.65rem;
}

.type-stat-icon {
    width: 0.95rem;
    height: 0.95rem;
    color: #f3dc93;
}

.type-detail-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
}

.type-detail-list div {
    display: flex;
    justify-content: space-between;
    gap: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 0.35rem;
}

.type-detail-list div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.type-detail-list dt {
    color: rgba(220,232,229,0.65);
    font-weight: 600;
}

.type-detail-list dd {
    margin: 0;
    color: #fff;
    text-align: right;
}

.type-text-list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding-left: 1.1rem;
    color: #e3ece9;
}

.type-empty-text {
    margin: 0;
    color: rgba(220,232,229,0.58);
}

.type-rarity-panel {
    grid-column: 1 / -1;
}

.type-rarity-pill {
    padding: 0.45rem 0.6rem;
}

.demon-type-page .demon-card-grid {
    --bs-gutter-x: 1.1rem;
    --bs-gutter-y: 1.1rem;
    position: relative;
    z-index: 2;
    margin-top: 0;
    margin-bottom: -2.1rem;
    padding-right: 0.65rem;
    padding-left: 0.65rem;
}

.demon-type-page .pagination {
    margin-top: 0.75rem;
}

.demon-type-page .page-link {
    border-color: rgba(161,212,201,0.16);
    background: rgba(4,10,13,0.78);
    color: #dce8e5;
}

.demon-type-page .page-item.active .page-link {
    border-color: rgba(232,199,106,0.62);
    background: rgba(232,199,106,0.2);
    color: #fff;
}

@media (max-width: 575.98px) {
.demon-type-page .demon-type-info {
        padding-top: 2.5rem;
    }

.demon-type-page .demon-card-grid {
        margin-bottom: -1.45rem;
        padding-right: 0.35rem;
        padding-left: 0.35rem;
    }
}

.formation-lane {
    border-color: rgba(161,212,201,0.16);
    background: rgba(7,18,20,0.42);
}

.formation-empty {
    border-color: rgba(161,212,201,0.18);
    color: rgba(207,226,220,0.54);
}

.reward-item {
    flex-direction: column;
    align-items: center;
}

.combat-hp-bar {
    background: rgba(207,226,220,0.18);
}

.combat-hp-fill {
    background: linear-gradient(90deg, #62cfa9, #83db91);
}

.attack-zap-trail {
    stroke: var(--combat-color, var(--ad-gold));
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(232,199,106,0.78)));
}

.attack-zap-impact {
    fill: var(--combat-color, var(--ad-gold));
    filter: drop-shadow(0 0 6px var(--combat-shadow, rgba(232,199,106,0.78)));
}

.strategy-phase-panel {
    border-left-color: var(--ad-teal);
    background: rgba(111,214,189,0.08);
}

.rank-table thead th {
    background: rgba(111,214,189,0.16);
    border-bottom-color: var(--ad-border-strong);
}

.current-player-rank td {
    background: rgba(232,199,106,0.11) !important;
}

body.rankings-page {
    min-height: 100%;
    background:
        linear-gradient(rgba(6,13,16,0.48), rgba(6,13,16,0.78)),
        radial-gradient(circle at 18% 10%, rgba(111,214,189,0.14), transparent 22rem),
        radial-gradient(circle at 78% 16%, rgba(232,199,106,0.11), transparent 24rem),
        url("/app/images/assets/background/amongdemons_rankings.png") center top / cover fixed no-repeat,
        var(--ad-bg);
}

.rankings-page main,
.rankings-shell {
    min-height: calc(100vh - 170px);
}

.rankings-shell {
    display: grid;
    gap: 1rem;
}

.rankings-hero {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    align-items: end;
    gap: 1rem;
    overflow: hidden;
    border: 1px solid rgba(161,212,201,0.18);
    border-radius: 8px;
    background:
        radial-gradient(circle at 82% 18%, rgba(232,199,106,0.14), transparent 18rem),
        linear-gradient(112deg, rgba(4,12,14,0.94), rgba(9,24,27,0.82) 58%, rgba(45,30,17,0.72)),
        rgba(7,16,19,0.86);
    box-shadow: 0 22px 58px rgba(0,0,0,0.34);
    padding: 1.65rem;
}

.rankings-hero::before {
    content: "";
    position: absolute;
    inset: auto -8% -38% 18%;
    height: 52%;
    background: radial-gradient(ellipse at center, rgba(111,214,189,0.13), transparent 68%);
    pointer-events: none;
}

.rankings-hero-copy,
.rankings-stats {
    position: relative;
    z-index: 1;
}

.rankings-kicker {
    display: inline-flex;
    color: var(--ad-gold);
    font-size: 0.72rem;
    font-weight: 840;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.rankings-page h1 {
    margin: 0.18rem 0 0;
    color: var(--ad-text);
    font-size: 4rem;
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: 0;
    text-shadow: 0 2px 18px rgba(0,0,0,0.42);
}

.rankings-hero-copy p {
    max-width: 35rem;
    margin: 0.75rem 0 0;
    color: var(--ad-muted);
    font-size: 1rem;
}

.rankings-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(6.6rem, max-content));
    justify-self: end;
    width: max-content;
    max-width: 100%;
    gap: 0.55rem;
}

.rankings-stat {
    min-width: 0;
    border: 1px solid rgba(161,212,201,0.15);
    border-radius: 6px;
    background: rgba(4,11,13,0.44);
    padding: 0.75rem;
}

.rankings-stat-value,
.rankings-stat-label {
    display: block;
}

.rankings-stat-value {
    color: var(--ad-text);
    font-size: 1.15rem;
    font-weight: 870;
    line-height: 1;
    overflow-wrap: anywhere;
}

.rankings-stat-label {
    margin-top: 0.32rem;
    color: var(--ad-muted);
    font-size: 0.72rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rankings-panel {
    overflow: hidden;
    border: 1px solid rgba(161,212,201,0.17);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(111,214,189,0.05), transparent 38%),
        rgba(7,16,19,0.82);
    box-shadow: 0 16px 42px rgba(0,0,0,0.25);
    backdrop-filter: blur(2px);
}

.rankings-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(161,212,201,0.13);
    background: rgba(4,10,12,0.42);
    padding: 0.9rem 1rem;
}

.rankings-panel-head h2 {
    margin: 0;
    color: var(--ad-text);
    font-size: 1rem;
    font-weight: 840;
}

.rankings-panel-head p {
    margin: 0.16rem 0 0;
    color: var(--ad-muted);
    font-size: 0.82rem;
}

.rank-sort-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.rankings-page .rank-sort-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.28rem;
    border: 1px solid rgba(161,212,201,0.18);
    border-radius: 999px;
    background: rgba(8,18,21,0.72);
    color: var(--ad-muted);
    font-size: 0.86rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    padding: 0.46rem 0.78rem;
}

.rankings-page .rank-sort-link:hover,
.rankings-page .rank-sort-link.active {
    border-color: rgba(111,214,189,0.54);
    background: rgba(111,214,189,0.14);
    color: var(--ad-text);
    text-decoration: none;
}

.rankings-page .rank-sort-link[aria-disabled="true"] {
    cursor: progress;
}

.rankings-page .rank-sort-link[aria-disabled="true"]:not(.active) {
    opacity: 0.72;
}

.rankings-page .table-dark {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.025);
    --bs-table-hover-bg: rgba(111,214,189,0.08);
    --bs-table-border-color: rgba(161,212,201,0.12);
    color: var(--ad-text);
}

.rankings-page .rank-table {
    min-width: 36rem;
}

.rankings-page .rank-table tbody {
    transition: opacity 0.16s ease;
}

.rankings-page .rank-table.is-rank-loading tbody {
    opacity: 0.62;
}

.rankings-page .rank-table th,
.rankings-page .rank-table td {
    padding: 0.86rem 0.75rem;
    vertical-align: middle;
}

.rankings-page .rank-table th {
    color: var(--ad-muted);
    font-size: 0.72rem;
    font-weight: 820;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.rankings-page .rank-table th:first-child,
.rankings-page .rank-table td:first-child {
    width: 5.2rem;
}

.rank-row {
    --rank-accent: var(--ad-teal);
    --rank-border: rgba(161,212,201,0.14);
    --rank-row-bg: rgba(7,16,19,0.58);
}

.rank-row td {
    background: var(--rank-row-bg);
    border-top: 1px solid rgba(161,212,201,0.09);
    border-bottom: 1px solid rgba(161,212,201,0.09);
}

.rank-top-1 {
    --rank-accent: var(--ad-gold);
    --rank-border: rgba(232,199,106,0.42);
    --rank-row-bg: rgba(25,21,13,0.68);
}

.rank-top-2 {
    --rank-accent: #d7e6e2;
    --rank-border: rgba(215,230,226,0.36);
    --rank-row-bg: rgba(20,27,28,0.66);
}

.rank-top-3 {
    --rank-accent: var(--ad-ember);
    --rank-border: rgba(231,138,85,0.38);
    --rank-row-bg: rgba(25,17,13,0.66);
}

.rank-top-4,
.rank-top-5 {
    --rank-border: rgba(111,214,189,0.28);
    --rank-row-bg: rgba(8,20,22,0.64);
}

.rank-top td {
    border-color: var(--rank-border);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.055);
}

.rankings-page .rank-top.current-player-rank td {
    background: var(--rank-row-bg) !important;
}

.rank-top-1 td {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.rank-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.34rem;
    min-width: 3.15rem;
    color: var(--ad-muted);
    font-weight: 850;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rank-top .rank-position {
    color: var(--rank-accent);
}

.rank-position-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--rank-accent);
}

.rank-position-icon:empty {
    display: none;
}

.rank-position-number {
    line-height: 1;
}

.rank-hunter {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
}

.rank-hunter-name {
    max-width: 100%;
    color: var(--ad-text);
    font-weight: 780;
    overflow-wrap: anywhere;
}

.rank-hunter-meta {
    max-width: 100%;
    color: var(--ad-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.rank-floor-cell {
    min-width: 9rem;
}

.rank-floor {
    display: inline-flex;
    align-items: baseline;
    gap: 0.32rem;
    white-space: nowrap;
}

.rank-floor-value {
    color: var(--ad-text);
    font-size: 1.12rem;
    font-weight: 860;
}

.rank-top .rank-floor-value {
    color: var(--rank-accent);
    text-shadow: 0 0 16px var(--rank-border);
}

.rank-top-1 .rank-floor-value {
    font-size: 1.34rem;
}

.rank-floor-label,
.rank-metric {
    color: var(--ad-muted);
    font-size: 0.88rem;
    font-weight: 760;
}

.rank-metric {
    display: inline-flex;
    justify-content: center;
    min-width: 3.2rem;
    white-space: nowrap;
}

.rank-top .rank-metric {
    color: var(--ad-text);
}

.rank-metric-souls {
    color: var(--ad-soul);
}

.rank-metric-souls .soul-amount-value,
.rank-metric-souls .soul-amount-label {
    color: #fff;
}

.rank-metric-souls .soul-icon {
    width: 1.08em;
    height: 1.08em;
}

.rank-sort-label {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
}

.rank-empty-cell {
    color: var(--ad-muted);
    text-align: center;
    padding: 2rem 1rem !important;
}

@media (max-width: 767.98px) {
body.rankings-page {
        background-attachment: scroll;
    }

.rankings-shell {
        gap: 0.78rem;
    }

.rankings-hero {
        grid-template-columns: 1fr;
        padding: 1rem;
    }

.rankings-page h1 {
        font-size: 2.65rem;
    }

.rankings-hero-copy p {
        font-size: 0.92rem;
    }

.rankings-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-self: start;
        width: 100%;
    }

.rankings-stat {
        padding: 0.64rem;
    }

.rankings-stat-value {
        font-size: 1rem;
    }

.rankings-stat-label {
        font-size: 0.64rem;
    }

.rankings-panel-head {
        flex-direction: column;
        align-items: stretch;
        padding: 0.85rem;
    }

.rank-sort-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        justify-content: stretch;
    }

.rankings-page .rank-sort-link {
        padding-right: 0.45rem;
        padding-left: 0.45rem;
    }

.rankings-page .table-responsive {
        overflow-x: visible;
    }

.rankings-page .rank-table {
        min-width: 0;
        border-collapse: separate;
        border-spacing: 0 0.65rem;
        margin: 0;
    }

.rankings-page .rank-table thead {
        display: none;
    }

.rankings-page .rank-table tbody,
    .rankings-page .rank-table tr,
    .rankings-page .rank-table td {
        display: block;
        width: 100%;
    }

.rankings-page .rank-table tbody {
        padding: 0.15rem 0.75rem 0.75rem;
    }

.rank-row {
        overflow: hidden;
        border: 1px solid var(--rank-border);
        border-radius: 8px;
        background: var(--rank-row-bg);
    }

.rank-row td {
        display: grid;
        grid-template-columns: 7.5rem minmax(0, 1fr);
        align-items: center;
        gap: 0.7rem;
        border: 0;
        background: transparent;
        text-align: right;
        padding: 0.54rem 0.75rem;
    }

.rank-row td::before {
        content: attr(data-label);
        color: var(--ad-muted);
        font-size: 0.66rem;
        font-weight: 820;
        letter-spacing: 0.05em;
        text-align: left;
        text-transform: uppercase;
    }

.rank-position-cell {
        padding-top: 0.75rem !important;
    }

.rank-hunter {
        align-items: flex-end;
    }

.rank-floor-cell {
        min-width: 0;
    }

.rank-floor {
        justify-content: flex-end;
    }

.rank-empty-row {
        border: 0;
        background: transparent;
    }

.rank-empty-row td {
        display: block !important;
        text-align: center;
    }

.rank-empty-row td::before {
        display: none;
    }
}

@media (max-width: 420px) {
.rankings-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.4rem;
    }

.rankings-stat {
        padding: 0.52rem 0.45rem;
    }

.rankings-stat-label {
        font-size: 0.58rem;
        letter-spacing: 0.02em;
        line-height: 1.12;
    }

.rank-row td {
        grid-template-columns: 1fr;
        gap: 0.22rem;
        text-align: left;
    }

.rank-hunter {
        align-items: flex-start;
    }

.rank-floor {
        justify-content: flex-start;
    }
}

.play-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1rem;
    border: 1px solid rgba(161,212,201,0.16);
    border-radius: 8px;
    background:
        linear-gradient(110deg, rgba(5,15,17,0.92), rgba(9,24,27,0.76) 58%, rgba(48,33,18,0.68)),
        rgba(7,16,19,0.82);
    box-shadow: 0 18px 50px rgba(0,0,0,0.28);
    padding: clamp(1rem, 2.3vw, 1.8rem);
}

.play-kicker {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    color: var(--ad-gold);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.play-hero-copy p {
    color: var(--ad-muted);
    font-weight: 700;
}

.play-hero-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
}

.play-run-card {
    overflow: hidden;
}

.play-status-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    min-height: 1.75rem;
    border: 1px solid rgba(111,214,189,0.28);
    border-radius: 999px;
    background: rgba(111,214,189,0.11);
    color: var(--ad-teal);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.play-status-chip.is-ready {
    border-color: rgba(232,199,106,0.28);
    background: rgba(232,199,106,0.1);
    color: var(--ad-gold);
}

.play-status-chip.is-choice {
    border-color: rgba(156,122,200,0.38);
    background: rgba(156,122,200,0.13);
    color: #cdb5ee;
}

.play-status-chip.is-danger {
    border-color: rgba(228,104,94,0.38);
    background: rgba(228,104,94,0.12);
    color: #ffaea7;
}

.play-run-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.7fr);
    gap: 1rem;
    align-items: stretch;
}

.play-run-main {
    display: grid;
    align-content: center;
    min-height: 12rem;
    border: 1px solid rgba(161,212,201,0.12);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(111,214,189,0.11), rgba(232,199,106,0.05)),
        rgba(3,10,12,0.48);
    padding: clamp(1rem, 2.1vw, 1.45rem);
}

.play-run-label {
    color: var(--ad-muted);
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.play-run-main strong {
    color: #fff;
    font-size: clamp(3rem, 7vw, 5.4rem);
    font-weight: 900;
    line-height: 0.92;
    text-shadow: 0 0 26px rgba(111,214,189,0.18);
}

.play-run-metrics {
    display: grid;
    gap: 0.65rem;
}

.play-run-metrics > span {
    display: grid;
    align-content: center;
    min-height: 3.4rem;
    border: 1px solid rgba(161,212,201,0.12);
    border-radius: 8px;
    background: rgba(3,10,12,0.44);
    color: var(--ad-muted);
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1.05;
    padding: 0.68rem 0.78rem;
    text-transform: uppercase;
}

.play-run-metrics strong {
    color: var(--ad-text);
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1.1;
    text-transform: none;
}

.play-run-metrics > span > span {
    display: block;
}

.play-objective-list,
.play-action-grid {
    display: grid;
    gap: 0.7rem;
}

.play-objective,
.play-action-tile {
    color: var(--ad-text);
    text-decoration: none;
}

.play-objective {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 4.55rem;
    border: 1px solid rgba(161,212,201,0.12);
    border-radius: 8px;
    background: rgba(3,10,12,0.42);
    padding: 0.72rem;
}

.play-objective:hover,
.play-action-tile:hover {
    border-color: rgba(111,214,189,0.34);
    background:
        linear-gradient(180deg, rgba(111,214,189,0.08), rgba(255,255,255,0.015)),
        rgba(5,15,17,0.8);
    color: var(--ad-text);
}

.play-objective-icon,
.play-action-icon {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(232,199,106,0.2);
    border-radius: 8px;
    background: rgba(232,199,106,0.08);
    color: var(--ad-gold);
}

.play-objective strong,
.play-action-tile strong {
    display: block;
    color: #fff;
    font-size: 0.94rem;
    line-height: 1.15;
}

.play-objective small,
.play-action-tile small {
    display: block;
    color: var(--ad-muted);
    font-size: 0.78rem;
    line-height: 1.25;
    margin-top: 0.18rem;
}

.play-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.play-action-tile {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.7rem;
    min-height: 6rem;
    border: 1px solid rgba(161,212,201,0.12);
    border-radius: 8px;
    background: rgba(3,10,12,0.42);
    padding: 0.82rem;
}

.play-action-primary {
    border-color: rgba(111,214,189,0.3);
    background:
        linear-gradient(135deg, rgba(111,214,189,0.14), rgba(232,199,106,0.05)),
        rgba(3,10,12,0.48);
}

@media (max-width: 991.98px) {
.play-hero,
    .play-run-layout {
        grid-template-columns: minmax(0, 1fr);
    }

.play-hero-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 575.98px) {
.play-hero {
        padding: 1rem;
    }

.play-hero-actions,
    .play-hero-actions .btn-primary {
        width: 100%;
    }

.play-hero-actions .btn-primary {
        justify-content: center;
    }

.play-run-main {
        min-height: 9rem;
    }
}

.play-objective-body {
    display: grid;
    gap: 0.34rem;
    min-width: 0;
}

.quest-title-row {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.quest-title-row em {
    flex: 0 0 auto;
    border: 1px solid rgba(85,255,255,0.2);
    border-radius: 999px;
    background: rgba(85,255,255,0.07);
    color: var(--ad-soul);
    font-size: 0.66rem;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    padding: 0.26rem 0.42rem;
}

.quest-progress {
    display: block;
    height: 0.42rem;
    overflow: hidden;
    border: 1px solid rgba(161,212,201,0.1);
    border-radius: 999px;
    background: rgba(0,0,0,0.46);
}

.quest-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255,110,47,0.88), rgba(232,199,106,0.9));
    box-shadow: 0 0 12px rgba(255,110,47,0.26);
}

.quest-progress-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    color: rgba(220,232,229,0.54);
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

@keyframes camp-rune-drift {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.nav-player-avatar {
    display: grid;
    place-items: center;
    width: 2.35rem;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(111,214,189,0.36);
    border-radius: 50%;
    background: rgba(4,10,13,0.58);
    box-shadow:
        0 0 16px rgba(111,214,189,0.18),
        0 0 18px rgba(231,138,85,0.12);
}

.nav-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-player-copy {
    display: grid;
    gap: 0.16rem;
    min-width: 0;
}

.nav-player-copy span,
.nav-player-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nav-player-copy span {
    color: #f3dc93;
    font-size: 0.84rem;
    font-weight: 900;
}

.nav-player-copy small {
    color: rgba(220,232,229,0.68);
    font-size: 0.68rem;
    font-weight: 800;
}

.play-status-chip {
    min-width: 4.7rem;
    border-radius: 4px;
    background: rgba(4,10,13,0.54);
}

.profile-demon-edit-hint {
    position: absolute;
    right: 0.08rem;
    bottom: 0.08rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 1.85rem;
    aspect-ratio: 1;
    border: 1px solid rgba(232,199,106,0.42);
    border-radius: 50%;
    background: rgba(4,10,13,0.82);
    color: var(--ad-teal, #6fd6bd);
    box-shadow: 0 0 16px rgba(111,214,189,0.16);
}

.profile-demon-edit-hint .ad-icon {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.quest-requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.28rem;
}

.quest-requirement {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    min-height: 1.3rem;
    border: 1px solid rgba(232,199,106,0.2);
    border-radius: 3px;
    background: rgba(232,199,106,0.06);
    padding: 0.18rem 0.34rem;
    color: rgba(243,220,147,0.86);
    font-size: 0.61rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.quest-requirement .ad-icon {
    width: 0.76rem;
    height: 0.76rem;
    flex: 0 0 auto;
}

.quest-progress-meta {
    justify-content: end;
    color: rgba(220,232,229,0.66);
}

.quest-reward {
    display: grid;
    justify-items: end;
    gap: 0.22rem;
    min-width: 3.8rem;
}

.quest-reward small {
    display: block !important;
    color: rgba(220,232,229,0.58);
    font-size: 0.6rem;
    font-weight: 900;
    text-transform: uppercase;
}

.quest-reward strong {
    display: inline-flex !important;
    align-items: center;
    gap: 0.22rem;
    color: var(--ad-soul) !important;
    font-size: 1.05rem !important;
    line-height: 1 !important;
}

.quest-reward .ad-icon {
    width: 1rem;
    height: 1rem;
    margin: 0;
}

.quest-reward-souls {
    color: #fff !important;
}

.quest-reward-xp {
    color: var(--ad-gold, #e8c76a) !important;
}

.quest-xp-mark {
    color: var(--ad-gold, #e8c76a);
    font-size: 0.72rem;
    font-weight: 900;
}

.daily-soul-art {
    position: absolute;
    top: 50%;
    right: 0.35rem;
    width: 120px;
    height: 140px;
    transform: translateY(-50%);
    pointer-events: none;
}

.daily-soul-art canvas {
    display: block;
    width: 120px;
    height: 140px;
}

.profile-demon-picker[hidden] {
    display: none;
}

.profile-demon-picker {
    position: fixed;
    inset: 0;
    z-index: 1060;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 4vw, 2rem);
}

.profile-demon-picker-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(111,214,189,0.12), transparent 28rem),
        rgba(2,7,9,0.74);
    backdrop-filter: blur(8px);
    cursor: default;
}

.profile-demon-picker-dialog {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.9rem;
    width: min(46rem, 100%);
    max-height: min(42rem, calc(100vh - 2rem));
    border: 1px solid rgba(161,212,201,0.24);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(111,214,189,0.08), transparent 42%, rgba(231,138,85,0.06)),
        rgba(5,13,16,0.96);
    box-shadow:
        0 28px 70px rgba(0,0,0,0.58),
        inset 0 0 0 1px rgba(255,255,255,0.04);
    padding: clamp(0.95rem, 2vw, 1.25rem);
}

.profile-demon-picker-head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-demon-picker-head h2 {
    margin: 0.22rem 0 0;
    color: #f8fbf9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.35rem, 3vw, 1.9rem);
    font-weight: 900;
    line-height: 1;
}

.profile-demon-picker-close {
    display: grid;
    place-items: center;
    flex: 0 0 2.6rem;
    width: 2.6rem;
    aspect-ratio: 1;
    border: 1px solid rgba(161,212,201,0.18);
    border-radius: 6px;
    background: rgba(4,10,13,0.7);
    color: rgba(220,232,229,0.82);
}

.profile-demon-picker-close:hover,
.profile-demon-picker-close:focus-visible {
    border-color: rgba(111,214,189,0.42);
    color: #fff;
}

.profile-demon-picker-status {
    margin: -0.25rem 0 0;
    color: var(--ad-muted, #9fb6b2);
    font-size: 0.9rem;
}

.profile-demon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.65rem;
    min-height: 0;
    overflow: auto;
    padding-right: 0.15rem;
}

.profile-demon-option {
    display: grid;
    grid-template-columns: 3.6rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.62rem;
    border: 1px solid rgba(161,212,201,0.16);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.01)),
        rgba(4,10,13,0.62);
    color: var(--ad-text, #eef8f5);
    padding: 0.5rem;
    text-align: left;
    transition:
        border-color 150ms ease,
        box-shadow 150ms ease,
        transform 150ms ease;
}

.profile-demon-option:hover,
.profile-demon-option:focus-visible,
.profile-demon-option.is-selected {
    border-color: rgba(232,199,106,0.5);
    box-shadow:
        0 0 0 1px rgba(232,199,106,0.12),
        0 12px 28px rgba(0,0,0,0.3);
    outline: 0;
    transform: translateY(-1px);
}

.profile-demon-option.is-busy {
    opacity: 0.68;
}

.profile-demon-option-art {
    display: block;
    width: 3.6rem;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid rgba(111,214,189,0.18);
    border-radius: 6px;
    background: rgba(0,0,0,0.3);
}

.profile-demon-option-art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-demon-option-copy {
    display: grid;
    gap: 0.14rem;
    min-width: 0;
}

.profile-demon-option-copy strong,
.profile-demon-option-copy small {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-demon-option-copy strong {
    color: #f8fbf9;
    font-size: 0.84rem;
    font-weight: 900;
}

.profile-demon-option-copy small {
    color: var(--ad-gold, #e8c76a);
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
}

.profile-demon-selected-mark {
    display: grid;
    place-items: center;
    width: 1.45rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(111,214,189,0.14);
    color: var(--ad-teal, #6fd6bd);
}

.profile-demon-selected-mark .ad-icon {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
}

.profile-demon-empty {
    grid-column: 1 / -1;
    display: grid;
    justify-items: center;
    gap: 0.6rem;
    border: 1px dashed rgba(161,212,201,0.18);
    border-radius: 8px;
    background: rgba(4,10,13,0.48);
    color: var(--ad-muted, #9fb6b2);
    padding: 1.4rem;
    text-align: center;
}

.profile-demon-empty img {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: contain;
    opacity: 0.76;
}

@media (max-width: 1399.98px) {
.nav-player-avatar {
        width: 2rem;
    }

.quest-reward {
        grid-column: 2;
        justify-self: end;
    }
}

@media (max-height: 820px) and (min-width: 1200px) {
.play-objective-body {
        gap: 0.24rem;
    }

.quest-reward {
        gap: 0.12rem;
    }

.quest-reward strong {
        font-size: 0.96rem !important;
    }

.daily-soul-art {
        right: 0;
    }
}

.demon-detail-art.is-training-fed img {
    animation: collection-training-fed-card 1600ms ease-out both;
}

.demonic-pact-overlay {
    position: fixed;
    inset: 0;
    z-index: 2600;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(3,8,10,0.92), rgba(6,10,14,0.96)),
        url("/app/images/assets/background/amongdemons_dungeon.png") center / cover no-repeat;
    padding: clamp(1rem, 3vw, 2.4rem);
    animation: demonic-pact-overlay-in 520ms ease-out both;
}

.demonic-pact-overlay.d-none {
    display: none !important;
}

.demonic-pact-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.demonic-pact-backdrop::before,
.demonic-pact-backdrop::after {
    content: "";
    position: absolute;
    inset: -18%;
    background:
        repeating-conic-gradient(from 0deg, transparent 0deg 12deg, rgba(232,199,106,0.075) 13deg 14deg, transparent 15deg 30deg);
    opacity: 0.62;
    animation: demonic-pact-sigil-spin 18s linear infinite;
}

.demonic-pact-backdrop::after {
    inset: 16%;
    border: 1px solid rgba(232,199,106,0.22);
    border-radius: 50%;
    background: none;
    box-shadow:
        inset 0 0 48px rgba(232,199,106,0.08),
        0 0 60px rgba(111,214,189,0.08);
    animation-direction: reverse;
}

.demonic-pact-backdrop span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 140vmax;
    background: linear-gradient(transparent, rgba(232,199,106,0.34), transparent);
    transform-origin: 50% 50%;
    opacity: 0.34;
}

.demonic-pact-backdrop span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(0deg);
}

.demonic-pact-backdrop span:nth-child(2) {
    transform: translate(-50%, -50%) rotate(62deg);
}

.demonic-pact-backdrop span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(124deg);
}

.demonic-pact-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, auto) auto;
    gap: clamp(1rem, 2.4vw, 1.8rem);
    width: min(100%, 74rem);
}

.demonic-pact-stage::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 58%;
    width: clamp(7rem, 16vw, 12rem);
    aspect-ratio: 1;
    border: 1px solid rgba(232,199,106,0.42);
    border-radius: 50%;
    background:
        repeating-conic-gradient(from 18deg, rgba(232,199,106,0.34) 0deg 7deg, transparent 8deg 18deg),
        radial-gradient(circle, rgba(232,199,106,0.26), rgba(111,214,189,0.12) 42%, transparent 68%);
    box-shadow:
        inset 0 0 34px rgba(232,199,106,0.12),
        0 0 48px rgba(232,199,106,0.18);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
}

.demonic-pact-stage-heading {
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    text-align: center;
    animation: demonic-pact-heading-in 540ms ease-out both;
}

.demonic-pact-stage-heading h2 {
    margin: 0;
    color: #fff8d8;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(2.3rem, 6vw, 5.1rem);
    line-height: 0.9;
    letter-spacing: 0;
    text-shadow:
        0 2px 18px rgba(0,0,0,0.88),
        0 0 28px rgba(232,199,106,0.34);
}

.demonic-pact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(0.8rem, 2vw, 1.35rem);
    min-width: 0;
    perspective: 1200px;
}

.demonic-pact-card {
    --pact-card-y: 0;
    --pact-recast-x: 0%;
    --pact-recast-enter-x: 0rem;
    --pact-recast-rotate: 0deg;
    --pact-recast-delay: 0ms;
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    justify-items: center;
    gap: 0.7rem;
    min-width: 0;
    min-height: clamp(22rem, 45vh, 31rem);
    border: 1px solid rgba(255,255,255,0.15);
    border-top-width: 5px;
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(17,35,38,0.94), rgba(5,9,12,0.94)),
        rgba(7,18,20,0.86);
    color: #f4f8f7;
    padding: clamp(1rem, 2vw, 1.5rem);
    text-align: center;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 28px 58px rgba(0,0,0,0.42);
    overflow: hidden;
    transform-origin: 50% 70%;
    transform: translateY(var(--pact-card-y));
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
    animation: demonic-pact-card-in 680ms cubic-bezier(0.16, 0.92, 0.18, 1) backwards;
}

.demonic-pact-card:nth-child(2) {
    --pact-recast-delay: 70ms;
    animation-delay: 90ms;
}

.demonic-pact-card:nth-child(3) {
    --pact-recast-x: -112%;
    --pact-recast-enter-x: 5.6rem;
    --pact-recast-rotate: 8deg;
    --pact-recast-delay: 140ms;
    animation-delay: 180ms;
}

.demonic-pact-card:nth-child(1) {
    --pact-recast-x: 112%;
    --pact-recast-enter-x: -5.6rem;
    --pact-recast-rotate: -8deg;
}

.demonic-pact-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(120deg, transparent 0 32%, rgba(255,255,255,0.12) 42%, transparent 52% 100%);
    transform: translateX(-120%);
    opacity: 0;
}

.demonic-pact-card:hover,
.demonic-pact-card:focus-visible {
    --pact-card-y: -0.38rem;
    border-color: rgba(232,199,106,0.72);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 0 0 2px rgba(232,199,106,0.2),
        0 36px 74px rgba(0,0,0,0.52),
        0 0 42px rgba(232,199,106,0.18);
}

.demonic-pact-card:hover::before,
.demonic-pact-card:focus-visible::before {
    opacity: 1;
    animation: demonic-pact-card-shine 860ms ease-out both;
}

.demonic-pact-card.is-common {
    border-top-color: #D1D5D8;
}

.demonic-pact-card.is-uncommon {
    border-top-color: #41A85F;
}

.demonic-pact-card.is-rare {
    border-top-color: #2C82C9;
}

.demonic-pact-icon {
    display: grid;
    place-items: center;
    width: clamp(4.5rem, 7vw, 6.2rem);
    aspect-ratio: 1;
    border: 1px solid rgba(232,199,106,0.3);
    border-radius: 50%;
    color: #f5d56d;
    background:
        conic-gradient(from 45deg, rgba(232,199,106,0.18), rgba(111,214,189,0.08), rgba(226,80,65,0.12), rgba(232,199,106,0.18)),
        rgba(3,9,11,0.6);
    box-shadow:
        inset 0 0 22px rgba(232,199,106,0.12),
        0 0 26px rgba(232,199,106,0.18);
}

.demonic-pact-icon .ad-icon {
    width: 52%;
    height: 52%;
}

.demonic-pact-rarity {
    font-size: 0.74rem;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.demonic-pact-card strong {
    min-width: 0;
    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.45rem, 2.35vw, 2.2rem);
    line-height: 1.02;
}

.demonic-pact-description {
    min-width: 0;
    color: rgba(220,232,229,0.84);
    font-size: clamp(0.92rem, 1.25vw, 1.08rem);
    line-height: 1.38;
}

.demonic-pact-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.34rem;
    margin-top: 0.2rem;
}

.demonic-pact-tags span {
    border: 1px solid rgba(141,231,255,0.22);
    border-radius: 999px;
    background: rgba(141,231,255,0.07);
    color: rgba(202,239,245,0.9);
    font-size: 0.66rem;
    font-weight: 800;
    line-height: 1;
    padding: 0.24rem 0.4rem;
    text-transform: uppercase;
}

.demonic-pact-actions {
    display: flex;
    justify-content: center;
    min-width: 0;
}

.demonic-pact-reroll-cluster {
    display: grid;
    grid-template-columns: minmax(0, 16.8rem) auto;
    align-items: stretch;
    justify-content: center;
    gap: 0.82rem;
    width: min(100%, 22.5rem);
    min-width: 0;
}

.demonic-pact-reroll-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.72rem;
    width: 100%;
    min-width: 0;
    min-height: 2.85rem;
    border: 1px solid rgba(232,199,106,0.52);
    border-radius: 6px;
    background:
        linear-gradient(135deg, rgba(232,199,106,0.14), transparent 38%),
        linear-gradient(180deg, rgba(232,199,106,0.11), rgba(232,199,106,0.035)),
        rgba(3,9,11,0.64);
    color: #fff4c2;
    font-size: 1.05rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.05),
        0 16px 34px rgba(0,0,0,0.34);
}

.demonic-pact-reroll-btn:hover,
.demonic-pact-reroll-btn:focus-visible {
    border-color: rgba(232,199,106,0.74);
    color: #fff8d8;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.08),
        0 0 0 2px rgba(232,199,106,0.16),
        0 18px 38px rgba(0,0,0,0.42);
}

.demonic-pact-reroll-btn:disabled {
    border-color: rgba(255,255,255,0.12);
    color: rgba(220,232,229,0.44);
    opacity: 0.62;
}

.demonic-pact-reroll-btn .ad-icon {
    margin-right: 0;
}

.demonic-pact-reroll-cost {
    min-width: 4rem;
    min-height: 2.85rem;
    border-color: rgba(85,255,255,0.26);
    background:
        linear-gradient(180deg, rgba(85,255,255,0.1), rgba(85,255,255,0.03)),
        rgba(5,18,21,0.78);
    padding: 0.38rem 0.72rem;
    font-size: 0.96rem;
}

.demonic-pact-reroll-cost .soul-icon {
    width: 1.05em;
    height: 1.05em;
}

.demonic-pact-reroll-cluster.is-disabled .demonic-pact-reroll-cost {
    opacity: 0.62;
}

.demonic-pact-overlay.is-recasting-out .demonic-pact-card {
    animation: demonic-pact-recast-fold-out 320ms ease-in both;
    animation-delay: var(--pact-recast-delay);
}

.demonic-pact-overlay.is-recasting-in .demonic-pact-card {
    animation: demonic-pact-recast-deal-in 680ms cubic-bezier(0.14, 0.88, 0.16, 1) both;
    animation-delay: var(--pact-recast-delay);
}

.demonic-pact-overlay.has-recast-settled .demonic-pact-card {
    animation: none;
}

.demonic-pact-overlay.is-recasting-out .demonic-pact-stage::after,
.demonic-pact-overlay.is-recasting-in .demonic-pact-stage::after {
    animation: demonic-pact-recast-seal 760ms ease-out both;
}

.demonic-pact-overlay.is-recasting-out .demonic-pact-actions {
    opacity: 0;
    transform: translateY(0.35rem);
    transition: opacity 140ms ease, transform 140ms ease;
}

.active-pact-chip {
    --active-pact-icon-size: clamp(1.35rem, calc(var(--dungeon-hand-pact-height, 4rem) * 0.45), 2.25rem);
    position: relative;
    display: grid;
    place-items: center;
    width: var(--dungeon-hand-pact-width, 3.2rem);
    height: var(--dungeon-hand-pact-height, 4.25rem);
    min-height: 0;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(7,18,20,0.74), rgba(3,9,11,0.92)),
        radial-gradient(circle at 50% 12%, rgba(232,199,106,0.14), transparent 56%);
    color: #f5d56d;
    padding: 0;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.04),
        0 8px 18px rgba(0,0,0,0.28);
}

.active-pact-chip:hover,
.active-pact-chip:focus,
.active-pact-chip:focus-visible {
    border-color: rgba(232,199,106,0.58);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 0 0 2px rgba(232,199,106,0.15),
        0 10px 22px rgba(0,0,0,0.34);
}

.active-pact-chip.is-common {
    border-top: 3px solid #D1D5D8;
}

.active-pact-chip.is-uncommon {
    border-top: 3px solid #41A85F;
}

.active-pact-chip.is-rare {
    border-top: 3px solid #2C82C9;
}

.active-pact-chip-art {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    border-radius: 7px 7px 0 0;
    background:
        radial-gradient(circle, rgba(232,199,106,0.18), rgba(3,9,11,0.04) 58%),
        linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.06));
}

.active-pact-chip-icon {
    display: grid;
    place-items: center;
}

.active-pact-chip-icon .ad-icon {
    width: var(--active-pact-icon-size);
    height: var(--active-pact-icon-size);
}

.active-pact-chip-body {
    display: grid;
    align-content: end;
    gap: 0.2rem;
    min-width: 0;
    min-height: 42%;
    border-radius: 0 0 7px 7px;
    background: linear-gradient(to top, rgba(2,7,9,0.96), rgba(2,7,9,0.72) 72%, transparent);
    padding: 0.42rem 0.34rem 0.34rem;
}

.active-pact-chip-name {
    min-width: 0;
    color: #fff5c7;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(0.62rem, 0.75vw, 0.78rem);
    font-weight: 800;
    line-height: 1.02;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
}

.active-pact-chip-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.14rem;
    max-width: 100%;
    min-width: 0;
}

.active-pact-chip-tag {
    max-width: 100%;
    color: rgba(220,232,229,0.74);
    font-size: 0.42rem;
    font-weight: 900;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.active-pact-chip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 0.48rem);
    z-index: 30;
    width: max-content;
    max-width: min(20rem, 54vw);
    border: 1px solid rgba(232,199,106,0.34);
    border-radius: 8px;
    background: rgba(3,9,11,0.96);
    color: #f4f8f7;
    box-shadow: 0 16px 34px rgba(0,0,0,0.42);
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: left;
    white-space: pre-line;
    padding: 0.55rem 0.65rem;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, 0.25rem);
    transition: opacity 140ms ease, transform 140ms ease;
}

.active-pact-chip:hover::after,
.active-pact-chip:focus::after,
.active-pact-chip:focus-visible::after,
.active-pact-chip.is-tooltip-visible::after {
    opacity: 1;
    transform: translate(-50%, 0);
}

@keyframes demonic-pact-overlay-in {
    from {
        opacity: 0;
        transform: scale(1.03);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes demonic-pact-sigil-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes demonic-pact-heading-in {
    from {
        opacity: 0;
        transform: translateY(-0.8rem) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes demonic-pact-card-in {
    from {
        opacity: 0;
        transform: translateY(1.6rem) rotateX(18deg) scale(0.94);
    }
    to {
        opacity: 1;
        transform: translateY(0) rotateX(0) scale(1);
    }
}

@keyframes demonic-pact-card-shine {
    from {
        transform: translateX(-120%);
    }
    to {
        transform: translateX(120%);
    }
}

@keyframes demonic-pact-recast-fold-out {
    0% {
        opacity: 1;
        filter: brightness(1);
        transform: translateY(var(--pact-card-y)) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        filter: brightness(0.7) blur(1px);
        transform: translateX(var(--pact-recast-x)) translateY(1.4rem) rotate(var(--pact-recast-rotate)) scale(0.72);
    }
}

@keyframes demonic-pact-recast-deal-in {
    0% {
        opacity: 0;
        filter: brightness(1.8) saturate(1.18);
        transform: translateX(var(--pact-recast-enter-x)) translateY(2.25rem) rotate(var(--pact-recast-rotate)) scale(0.78);
    }
    62% {
        opacity: 1;
        filter: brightness(1.16) saturate(1.06);
        transform: translateX(0) translateY(-0.26rem) rotate(0deg) scale(1.025);
    }
    100% {
        opacity: 1;
        filter: brightness(1) saturate(1);
        transform: translateX(0) translateY(0) rotate(0deg) scale(1);
    }
}

@keyframes demonic-pact-recast-seal {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.42) rotate(0deg);
    }
    34% {
        opacity: 0.95;
        transform: translate(-50%, -50%) scale(1.04) rotate(96deg);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.48) rotate(176deg);
    }
}

@media (prefers-reduced-motion: reduce) {
.demonic-pact-overlay,
    .demonic-pact-backdrop::before,
    .demonic-pact-backdrop::after,
    .demonic-pact-stage-heading,
    .demonic-pact-stage::after,
    .demonic-pact-grid,
    .demonic-pact-card,
    .demonic-pact-card::before {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 767.98px) {
.cashout-summary {
        padding: 0.8rem;
    }

.cashout-extract-summary {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

.cashout-demon-summary {
        justify-items: center;
        text-align: center;
    }

.cashout-demon-name-line {
        justify-content: center;
    }

.cashout-demon-summary h3 {
        font-size: 1.18rem;
    }

.cashout-demon-summary p {
        font-size: 0.9rem;
    }

.cashout-reward-chips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.cashout-reward-chips > span {
        min-height: 2.45rem;
        font-size: 0.86rem;
        padding: 0.55rem 0.5rem;
    }
}

@media (max-width: 575.98px) {
.demonic-pact-overlay {
        place-items: start center;
        overflow-y: auto;
        padding: 0.72rem;
    }

.demonic-pact-stage {
        width: min(100%, 27rem);
        gap: 0.65rem;
        padding: 0.2rem 0 0.7rem;
    }

.demonic-pact-stage-heading {
        gap: 0.18rem;
    }

.demonic-pact-stage-heading h2 {
        font-size: clamp(2rem, 10.8vw, 3.05rem);
        line-height: 0.95;
    }

.demonic-pact-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

.demonic-pact-card {
        min-height: 10.2rem;
        gap: 0.34rem;
        padding: 0.68rem;
    }

.demonic-pact-icon {
        width: 3.35rem;
    }

.demonic-pact-card strong {
        font-size: 1.2rem;
    }

.demonic-pact-description {
        font-size: 0.8rem;
        line-height: 1.25;
    }

.demonic-pact-actions {
        align-items: stretch;
    }

.demonic-pact-reroll-btn {
        width: min(100%, 15rem);
        min-height: 2.45rem;
        font-size: 0.78rem;
    }

.active-pact-chip-tag {
        font-size: 0.36rem;
    }

.active-pact-chip::after {
        max-width: min(16rem, 62vw);
    }

.active-pact-chip-name {
        font-size: 0.54rem;
    }

.active-pact-chip-body {
        padding: 0.3rem 0.22rem 0.24rem;
    }
}

@media (max-width: 575.98px) and (orientation: portrait) {
.new-encounter-badge {
        top: 0.18rem;
        right: 0.18rem;
        display: grid;
        place-items: center;
        width: 0.82rem;
        height: 0.82rem;
        border-radius: 50%;
        padding: 0;
        font-size: 0;
        line-height: 1;
    }

.new-encounter-badge::after {
        content: "N";
        font-size: 0.43rem;
        font-weight: 900;
        line-height: 1;
    }
}

/* Shared compact game navigation and dungeon command dock */
:root {
    --game-nav-height: 3.6rem;
    --nav-xp-progress-height: 0.42rem;
}

@media (min-width: 768px) {
:root {
        --nav-xp-progress-height: 0.72rem;
    }
}

@media (min-width: 1200px) {
:root {
        --nav-xp-progress-height: 0.9rem;
    }
}

body .game-shell-nav {
    position: sticky;
    top: 0;
    z-index: 1040;
    min-height: var(--game-nav-height);
    border-bottom-color: rgba(161,212,201,0.16) !important;
    background:
        linear-gradient(180deg, rgba(6,13,16,0.97), rgba(4,10,13,0.91)),
        rgba(6,13,16,0.94) !important;
    box-shadow:
        inset 0 -1px 0 rgba(232,199,106,0.1),
        0 12px 30px rgba(0,0,0,0.38);
    backdrop-filter: blur(14px);
    padding-block: 0;
}

body .game-shell-nav .container-fluid {
    min-height: var(--game-nav-height);
    gap: 0.65rem;
    padding-inline: 0.8rem;
}

.game-shell-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.48rem;
    min-width: 9.5rem;
    margin: 0;
    color: #fff6d7 !important;
    text-decoration: none;
}

.game-shell-brand .logo-nav {
    width: 2.45rem !important;
    height: 2.45rem !important;
    flex: 0 0 2.45rem;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    object-fit: contain;
    box-shadow: none;
    filter:
        drop-shadow(0 0 11px rgba(231,138,85,0.28))
        drop-shadow(0 0 15px rgba(111,214,189,0.09));
}

.game-shell-brand-copy {
    display: grid;
    min-width: 0;
    line-height: 1;
}

.game-shell-brand-name {
    color: #fff6d7;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.94rem;
    font-weight: 900;
    white-space: nowrap;
}

body .game-shell-nav .navbar-collapse {
    min-width: 0;
    gap: 0.55rem;
}

.game-shell-tabs {
    align-self: stretch;
    align-items: stretch;
    min-width: 0;
    margin-inline: auto;
}

.game-shell-tabs .nav-item {
    display: flex;
    align-items: stretch;
    border-left: 1px solid rgba(161,212,201,0.07);
}

.game-shell-tabs .nav-item:last-child {
    border-right: 1px solid rgba(161,212,201,0.07);
}

body .game-shell-nav .game-nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-height: var(--game-nav-height);
    border: 0;
    border-radius: 0;
    background: transparent;
    color: rgba(220,232,229,0.72) !important;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.4rem 0.55rem;
    text-transform: uppercase;
    transition: background 150ms ease, color 150ms ease;
}

body .game-shell-nav .game-nav-link .ad-icon {
    width: 0.92rem;
    height: 0.92rem;
    margin: 0;
    color: rgba(111,214,189,0.76);
}

body .game-shell-nav .game-nav-link::after {
    content: "";
    position: absolute;
    right: 0.7rem;
    bottom: 0;
    left: 0.7rem;
    height: 1px;
    background: transparent;
}

body .game-shell-nav .game-nav-link:hover,
body .game-shell-nav .game-nav-link:focus-visible {
    background: linear-gradient(180deg, rgba(111,214,189,0.08), rgba(231,138,85,0.04));
    color: #f8fbf9 !important;
}

body .game-shell-nav .game-nav-link.active,
body .game-shell-nav .game-nav-link.active:hover,
body .game-shell-nav .game-nav-link.active:focus-visible {
    background:
        radial-gradient(ellipse at 50% 100%, rgba(231,138,85,0.2), transparent 68%),
        linear-gradient(180deg, rgba(111,214,189,0.08), rgba(232,199,106,0.04));
    color: #f3dc93 !important;
    box-shadow: inset 0 -1px 0 rgba(232,199,106,0.25);
}

body .game-shell-nav .game-nav-link.active::after {
    height: 2px;
    background: linear-gradient(90deg, transparent, #e78a55, #f1b35f, transparent);
    box-shadow: 0 0 12px rgba(231,138,85,0.62);
}

body .game-shell-nav .game-nav-link.is-locked {
    color: rgba(220,232,229,0.38) !important;
    cursor: not-allowed;
}

body .game-shell-nav .nav-account,
body .game-shell-nav .nav-auth-actions {
    align-items: center;
    gap: 0.35rem;
    min-height: 0;
}

body .game-shell-nav .nav-balance,
body .game-shell-nav .nav-player,
body .game-shell-nav .nav-settings-link,
body .game-shell-nav .nav-logout-btn,
body .game-shell-nav .game-shell-auth-actions .btn {
    height: 2.42rem;
    min-height: 2.42rem;
    border: 1px solid rgba(161,212,201,0.18);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(111,214,189,0.035), rgba(255,255,255,0.01)),
        rgba(5,13,16,0.68);
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.03),
        0 7px 18px rgba(0,0,0,0.16);
}

body .game-shell-nav .nav-balance {
    height: 2.42rem;
    min-height: 2.42rem;
    align-self: center;
    justify-self: start;
    width: max-content;
    max-width: 100%;
    padding: 0.18rem 0.42rem;
}

body .game-shell-nav .nav-balance .soul-amount-label {
    display: none;
}

body .game-shell-nav .nav-balance .soul-amount {
    gap: 0.24rem;
    font-size: 0.72rem;
}

body .game-shell-nav .nav-balance .soul-icon {
    width: 0.96em;
    height: 0.96em;
}

body .game-shell-nav .nav-player {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.42rem;
    width: 8.6rem;
    min-width: 8.6rem;
    padding: 0.22rem 0.48rem 0.22rem 0.26rem;
}

body .game-shell-nav .nav-player-avatar {
    width: 1.86rem;
}

body .game-shell-nav .nav-player-copy {
    gap: 0.08rem;
}

body .game-shell-nav .nav-player-copy span {
    font-size: 0.72rem;
}

body .game-shell-nav .nav-player-copy small {
    font-size: 0.58rem;
}

body .game-shell-nav .nav-settings-link,
body .game-shell-nav .nav-logout-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.42rem;
    min-width: 2.42rem;
    flex: 0 0 2.42rem;
    padding: 0;
    text-decoration: none;
}

body .game-shell-nav .nav-settings-link {
    color: rgba(220,232,229,0.76);
}

body .game-shell-nav .nav-settings-link:hover,
body .game-shell-nav .nav-settings-link:focus-visible {
    border-color: rgba(111,214,189,0.4);
    color: #f8fbf9;
}

body .game-shell-nav .nav-settings-link .ad-icon,
body .game-shell-nav .nav-logout-btn .ad-icon {
    width: 0.96rem;
    height: 0.96rem;
    margin: 0;
}

body .game-shell-nav .game-shell-auth-actions .btn {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    font-size: 0.72rem;
}

body .game-shell-nav .game-shell-auth-actions .btn-primary {
    border-color: rgba(231,138,85,0.72);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), transparent),
        #d97845;
    color: #140906;
}

body .game-shell-nav .game-shell-auth-actions .btn-primary:hover,
body .game-shell-nav .game-shell-auth-actions .btn-primary:focus-visible {
    border-color: #f1b35f;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.2), transparent),
        #e78a55;
    color: #100604;
}

.game-shell-toggle {
    display: inline-grid;
    place-items: center;
    width: 2.42rem;
    height: 2.42rem;
    border-color: rgba(161,212,201,0.2);
    border-radius: 6px;
    padding: 0;
    line-height: 1;
}

.game-shell-toggle .navbar-toggler-icon {
    width: 1.18rem;
    height: 1.18rem;
    margin: 0;
    background-position: center;
    background-size: 100% 100%;
}

.nav-xp-progress {
    --nav-xp-progress: 0%;
    --nav-xp-tooltip-left: 50%;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2700;
    display: block;
    width: 100%;
    height: var(--nav-xp-progress-height);
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(161,212,201,0.16);
    border-radius: 0;
    background:
        linear-gradient(180deg, rgba(15,28,30,0.98), rgba(5,10,12,0.98)),
        #050a0c;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        inset 0 -1px 0 rgba(0,0,0,0.88),
        0 -6px 18px rgba(0,0,0,0.34);
    cursor: help;
    outline: 0;
}

.nav-xp-progress-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--nav-xp-progress);
    background:
        linear-gradient(90deg, #9b6d1c 0%, #d3a640 36%, #f0d36d 68%, #c88c26 100%);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.32),
        inset 0 -1px 0 rgba(71,45,8,0.76),
        0 0 10px rgba(232,199,106,0.34);
    transition: width 220ms ease;
}

.nav-xp-progress-marks {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.nav-xp-progress-mark {
    position: absolute;
    width: 1px;
    background: rgba(3,8,10,0.62);
    transform: translateX(-50%);
}

.nav-xp-progress-mark-minor {
    top: 32%;
    height: 36%;
    opacity: 0.68;
}

.nav-xp-progress-mark-major {
    top: 0;
    height: 100%;
    width: 1px;
    background: #273A39;
}

.nav-xp-progress-tooltip {
    position: absolute;
    bottom: calc(100% + 0.52rem);
    left: 50vw;
    display: grid;
    gap: 0.12rem;
    width: max-content;
    max-width: calc(100vw - 1rem);
    min-width: min(14rem, calc(100vw - 1rem));
    border: 1px solid rgba(232,199,106,0.34);
    border-radius: 6px;
    background:
        linear-gradient(180deg, rgba(24,31,29,0.98), rgba(7,13,16,0.96)),
        rgba(7,13,16,0.98);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 12px 26px rgba(0,0,0,0.42),
        0 0 18px rgba(111,214,189,0.12);
    color: rgba(248,251,249,0.92);
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.15;
    padding: 0.46rem 0.58rem;
    text-align: center;
    text-transform: none;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 0.18rem);
    transition: opacity 140ms ease, transform 140ms ease;
}

.nav-xp-progress-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0.58rem;
    height: 0.58rem;
    border-right: 1px solid rgba(232,199,106,0.34);
    border-bottom: 1px solid rgba(232,199,106,0.34);
    background: rgba(7,13,16,0.98);
    transform: translate(-50%, -50%) rotate(45deg);
}

.nav-xp-progress-tooltip strong,
.nav-xp-progress-tooltip span,
.nav-xp-progress-tooltip small {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
}

.nav-xp-progress-tooltip strong {
    color: #f3dc93;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.84rem;
    line-height: 1;
}

.nav-xp-progress-tooltip small {
    color: rgba(161,212,201,0.82);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}

.nav-xp-progress:hover .nav-xp-progress-tooltip,
.nav-xp-progress:focus-visible .nav-xp-progress-tooltip,
.nav-xp-progress.is-tooltip-visible .nav-xp-progress-tooltip {
    opacity: 1;
    transform: translate(-50%, -0.08rem);
}

.nav-xp-progress:focus-visible {
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.88),
        0 -6px 18px rgba(0,0,0,0.34),
        0 0 0 2px rgba(111,214,189,0.62);
}

.level-up-celebration {
    position: fixed;
    inset: 0;
    z-index: 3900;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: #fff6d7;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
}

.level-up-celebration-vignette {
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 0deg at 50% 48%, transparent 0 8%, rgba(232,199,106,0.2) 10%, transparent 14% 25%, rgba(111,214,189,0.14) 28%, transparent 34% 46%, rgba(255,110,47,0.14) 50%, transparent 56% 100%),
        linear-gradient(180deg, rgba(3,8,10,0.16), rgba(3,8,10,0.34));
    opacity: 0;
    animation: level-up-screen-glow 3000ms ease-out both;
}

.level-up-celebration-burst {
    position: relative;
    display: grid;
    place-items: center;
    gap: 0.34rem;
    width: min(30rem, calc(100vw - 2rem));
    min-height: min(17rem, calc(100vh - 2rem));
    padding: 1.25rem;
    text-align: center;
    opacity: 0;
    transform: translateY(0.6rem) scale(0.88);
    animation: level-up-burst-card 3000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.level-up-celebration.is-dismissing .level-up-celebration-vignette,
.level-up-celebration.is-dismissing .level-up-celebration-burst,
.level-up-celebration.is-dismissing .level-up-ring,
.level-up-celebration.is-dismissing .level-up-beams,
.level-up-celebration.is-dismissing .level-up-particles span {
    animation: level-up-fast-dismiss 220ms ease-in both !important;
}

.level-up-ring,
.level-up-beams {
    position: absolute;
    inset: 50% auto auto 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.level-up-ring {
    width: min(19rem, 70vw);
    aspect-ratio: 1;
    border: 1px solid rgba(232,199,106,0.36);
    border-radius: 50%;
    box-shadow:
        inset 0 0 28px rgba(232,199,106,0.1),
        0 0 38px rgba(111,214,189,0.12);
}

.level-up-ring-outer {
    animation: level-up-ring-expand 2600ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.level-up-ring-inner {
    width: min(12.5rem, 52vw);
    border-color: rgba(111,214,189,0.38);
    animation: level-up-ring-spin 2500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.level-up-beams {
    width: min(21rem, 78vw);
    aspect-ratio: 1;
    background: repeating-conic-gradient(from 0deg, transparent 0 13deg, rgba(232,199,106,0.24) 14deg 16deg, transparent 18deg 36deg);
    -webkit-mask-image: radial-gradient(circle, transparent 0 24%, #000 25% 58%, transparent 60%);
    mask-image: radial-gradient(circle, transparent 0 24%, #000 25% 58%, transparent 60%);
    opacity: 0;
    animation: level-up-beams 2400ms ease-out both;
}

.level-up-eyebrow {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 1.8rem;
    border: 1px solid rgba(232,199,106,0.38);
    border-radius: 999px;
    background: rgba(5,13,16,0.78);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 0 22px rgba(232,199,106,0.22);
    color: #f3dc93;
    font-size: 0.72rem;
    font-weight: 900;
    line-height: 1;
    padding: 0.38rem 0.76rem;
    text-transform: uppercase;
}

.level-up-celebration-burst strong {
    position: relative;
    z-index: 1;
    color: #fff9dd;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(3rem, 12vw, 7.5rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0;
    text-shadow:
        0 2px 0 rgba(0,0,0,0.32),
        0 8px 24px rgba(0,0,0,0.88),
        0 18px 44px rgba(0,0,0,0.7);
}

.level-up-celebration-burst small {
    position: relative;
    z-index: 1;
    color: rgba(220,232,229,0.88);
    font-size: clamp(0.9rem, 2.4vw, 1.15rem);
    font-weight: 900;
    line-height: 1.1;
    text-shadow:
        0 1px 0 rgba(0,0,0,0.42),
        0 5px 16px rgba(0,0,0,0.82);
}

.level-up-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.level-up-particles span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--size);
    height: calc(var(--size) * 0.36);
    border-radius: 2px;
    background: currentColor;
    color: #f3dc93;
    box-shadow: 0 0 12px currentColor;
    opacity: 0;
    transform: rotate(var(--angle)) translate3d(0, 0, 0) scale(0.35);
    animation: level-up-spark var(--duration) cubic-bezier(0.16, 1, 0.3, 1) var(--delay) both;
}

.level-up-particles span.is-teal {
    color: #6fd6bd;
}

.level-up-particles span.is-orange {
    color: #ff8a4d;
}

@keyframes level-up-screen-glow {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(1.04);
    }
}

@keyframes level-up-burst-card {
    0% {
        opacity: 0;
        transform: translateY(0.7rem) scale(0.82);
        filter: blur(2px);
    }
    18% {
        opacity: 1;
        transform: translateY(0) scale(1.04);
        filter: blur(0);
    }
    34% {
        transform: translateY(0) scale(1);
    }
    78% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-0.35rem) scale(0.96);
    }
}

@keyframes level-up-fast-dismiss {
    to {
        opacity: 0;
        transform: scale(0.98);
    }
}

@keyframes level-up-ring-expand {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.32);
    }
}

@keyframes level-up-ring-spin {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-24deg) scale(0.62);
    }
    22% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(72deg) scale(1.08);
    }
}

@keyframes level-up-beams {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-18deg) scale(0.72);
    }
    28% {
        opacity: 0.86;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(26deg) scale(1.14);
    }
}

@keyframes level-up-spark {
    0% {
        opacity: 0;
        transform: rotate(var(--angle)) translate3d(0, 0, 0) scale(0.25);
    }
    12% {
        opacity: 1;
    }
    74% {
        opacity: 0.86;
    }
    100% {
        opacity: 0;
        transform: rotate(var(--angle)) translate3d(var(--distance), 0, 0) rotate(80deg) scale(1);
    }
}

@keyframes level-up-track-aura {
    0% {
        opacity: 0;
        transform: scaleX(0.94);
    }
    18% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scaleX(1.04);
    }
}

@keyframes level-up-track-sweep {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(0.18);
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scaleX(1.18);
    }
}

@keyframes level-up-fill-flare {
    0%, 100% {
        filter: brightness(1);
    }
    24% {
        filter: brightness(1.82) saturate(1.28);
        box-shadow:
            0 0 18px rgba(232,199,106,0.52),
            0 0 30px rgba(111,214,189,0.28);
    }
}

@keyframes level-up-soft-aura {
    0% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
.game-shell-brand {
        min-width: 8.5rem;
        gap: 0.36rem;
    }

.game-shell-brand .logo-nav {
        width: 2.25rem !important;
        height: 2.25rem !important;
        flex-basis: 2.25rem;
    }

.game-shell-brand-name {
        font-size: 0.84rem;
    }

body .game-shell-nav .game-nav-link {
        gap: 0.22rem;
        padding-inline: 0.36rem;
        font-size: 0.61rem;
    }

body .game-shell-nav .nav-player {
        width: 7.7rem;
        min-width: 7.7rem;
    }
}

@media (max-width: 1199.98px) {
body .game-shell-nav .navbar-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        max-height: calc(100vh - var(--game-nav-height));
        max-height: calc(100dvh - var(--game-nav-height));
        overflow-y: auto;
        border-bottom: 1px solid rgba(161,212,201,0.2);
        background:
            linear-gradient(180deg, rgba(6,13,16,0.98), rgba(4,10,13,0.97)),
            #061013;
        box-shadow: 0 20px 42px rgba(0,0,0,0.5);
        padding: 0.6rem;
    }

.game-shell-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.28rem;
        width: 100%;
        margin: 0;
    }

.game-shell-tabs .nav-item,
    .game-shell-tabs .nav-item:last-child {
        border: 0;
    }

body .game-shell-nav .game-nav-link {
        width: 100%;
        min-height: 2.35rem;
        border: 1px solid rgba(161,212,201,0.1);
        border-radius: 4px;
    }

body .game-shell-nav .nav-account,
    body .game-shell-nav .nav-auth-actions {
        justify-content: flex-end;
        width: 100%;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(161,212,201,0.12);
    }
}

@media (max-width: 767.98px) {
.game-shell-brand {
        min-width: 0;
    }
}

@media (max-width: 575.98px) {
.game-shell-brand-name {
        font-size: 0.84rem;
    }

.game-shell-tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

body .game-shell-nav .nav-account {
        grid-template-columns: minmax(0, 1fr) repeat(2, 2.42rem);
    }

body .game-shell-nav .nav-balance {
        grid-column: 1;
        grid-row: 2;
        height: 2.42rem;
        min-height: 2.42rem;
        justify-content: center;
    }

body .game-shell-nav .nav-player {
        grid-column: 1 / -1;
        grid-row: 1;
        width: auto;
        min-width: 0;
        max-width: none;
    }

body .game-shell-nav .nav-settings-link,
    body .game-shell-nav .nav-logout-btn {
        grid-row: 2;
    }

body .game-shell-nav .nav-settings-link {
        grid-column: 2;
    }

body .game-shell-nav .nav-logout-btn {
        grid-column: 3;
    }
}

@media (prefers-reduced-motion: reduce) {
body .game-shell-nav .game-nav-link {
        transition: none;
    }

.nav-xp-progress-fill,
    .nav-xp-progress-tooltip {
        transition: none;
    }

.level-up-particles,
    .level-up-beams {
        display: none;
    }
}

/* Settings: compact account controls outside the playfield. */
body.settings-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 12%, rgba(111,214,189,0.14), transparent 25rem),
        radial-gradient(circle at 82% 8%, rgba(156,122,200,0.1), transparent 22rem),
        linear-gradient(180deg, rgba(4,10,13,0.16), rgba(4,10,13,0.62)),
        var(--ad-bg);
}

body .game-shell-nav .nav-settings-link.active,
body.settings-page .game-shell-nav .nav-settings-link {
    border-color: rgba(111,214,189,0.48);
    background: rgba(111,214,189,0.12);
    color: var(--ad-text);
}

.settings-shell {
    display: grid;
    gap: 1.35rem;
    width: min(100% - 2rem, 58rem);
    margin: 0 auto;
    padding: clamp(2rem, 6vw, 4.5rem) 0 4rem;
}

.settings-hero {
    position: relative;
    display: grid;
    gap: 0.3rem;
    padding-left: 1.15rem;
}

.settings-hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--ad-teal), rgba(111,214,189,0.08));
    box-shadow: 0 0 18px rgba(111,214,189,0.36);
}

.settings-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--ad-teal);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.settings-kicker .ad-icon {
    width: 0.82rem;
    height: 0.82rem;
}

.settings-hero h1 {
    margin: 0;
    color: var(--ad-text);
    font-size: clamp(2.4rem, 7vw, 4rem);
    font-weight: 900;
    line-height: 0.98;
}

.settings-section {
    overflow: hidden;
    border: 1px solid rgba(161,212,201,0.2);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(111,214,189,0.055), transparent 46%),
        rgba(7,16,19,0.9);
    box-shadow: 0 22px 58px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.035);
}

.settings-section-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    border-bottom: 1px solid rgba(161,212,201,0.13);
    padding: 1.15rem clamp(1rem, 4vw, 1.5rem);
}

.settings-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 2.65rem;
    width: 2.65rem;
    height: 2.65rem;
    border: 1px solid rgba(111,214,189,0.26);
    border-radius: 50%;
    background: rgba(111,214,189,0.1);
    color: var(--ad-teal);
}

.settings-section-icon .ad-icon {
    width: 1.2rem;
    height: 1.2rem;
}

.settings-section-header h2 {
    margin: 0;
    color: var(--ad-text);
    font-size: 1.18rem;
    font-weight: 850;
}

.settings-section-header p {
    margin: 0.12rem 0 0;
    color: var(--ad-muted);
    font-size: 0.82rem;
}

.settings-form {
    display: grid;
    gap: 0;
}

.settings-field {
    display: grid;
    gap: 0.38rem;
    max-width: 36rem;
    padding: clamp(1rem, 4vw, 1.5rem);
}

.settings-field .form-label {
    margin: 0;
    color: rgba(232,244,241,0.9);
    font-size: 0.82rem;
    font-weight: 800;
}

.settings-field .form-control {
    min-height: 3rem;
    border-color: rgba(161,212,201,0.24);
    border-radius: 7px;
    background: rgba(3,9,11,0.72);
    color: var(--ad-text);
}

.settings-field .form-control:focus {
    border-color: rgba(111,214,189,0.7);
    box-shadow: 0 0 0 0.2rem rgba(111,214,189,0.12);
}

.settings-field .form-control:disabled {
    background: rgba(3,9,11,0.46);
    color: var(--ad-muted);
}

.settings-field .form-text {
    color: var(--ad-faint);
    font-size: 0.74rem;
}

.settings-toggle {
    margin: 0;
    padding-top: 0.15rem;
}

.settings-toggle .form-check-input {
    cursor: pointer;
    background-color: rgba(3,9,11,0.72);
    border-color: rgba(161,212,201,0.3);
}

.settings-toggle .form-check-input:checked {
    background-color: var(--ad-teal, #6fd6bd);
    border-color: var(--ad-teal, #6fd6bd);
}

.settings-toggle .form-check-input:focus {
    border-color: rgba(111,214,189,0.7);
    box-shadow: 0 0 0 0.2rem rgba(111,214,189,0.12);
}

.settings-toggle .form-check-label {
    margin: 0;
    color: rgba(232,244,241,0.92);
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.settings-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4.2rem;
    border-top: 1px solid rgba(161,212,201,0.11);
    background: rgba(3,9,11,0.24);
    padding: 0.7rem clamp(1rem, 4vw, 1.5rem);
}

.settings-message {
    position: relative;
    flex: 1 1 auto;
    margin: 0;
    color: var(--ad-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
    padding-left: 0.9rem;
}

.settings-message::before {
    content: "";
    position: absolute;
    top: 0.42em;
    left: 0;
    width: 0.38rem;
    height: 0.38rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.settings-message.is-success {
    color: var(--ad-green);
}

.settings-message.is-error {
    color: #f19187;
}

.settings-message.is-neutral {
    color: var(--ad-muted);
}

.settings-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    flex: 0 0 auto;
    min-width: 6.5rem;
    min-height: 2.75rem;
    font-weight: 850;
}

.settings-submit .ad-icon {
    width: 0.95rem;
    height: 0.95rem;
}

@media (max-width: 767.98px) {
.settings-shell {
        width: min(100% - 1rem, 58rem);
        padding-top: 1.5rem;
    }

.settings-field {
        max-width: none;
    }

.settings-form-footer {
        width: 100%;
    }
}

.level-points-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    min-width: 0;
}

.level-points-balance {
    border: 1px solid rgba(161,212,201,0.18);
    border-radius: 3px;
    background: rgba(4,10,13,0.56);
    color: rgba(220,232,229,0.74);
    padding: 0.18rem 0.42rem;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.has-unspent-points .level-points-balance {
    border-color: rgba(232,199,106,0.48);
    color: #f3dc93;
    box-shadow: 0 0 14px rgba(232,199,106,0.12);
}

.level-points-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(8.5rem, 1fr)) minmax(12rem, auto);
    gap: 0.42rem;
    min-width: 0;
}

.level-point-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
    min-width: 0;
    border: 1px solid rgba(161,212,201,0.13);
    border-radius: 4px;
    background:
        linear-gradient(90deg, rgba(111,214,189,0.05), rgba(231,138,85,0.025)),
        rgba(4,10,13,0.48);
    padding: 0.38rem 0.42rem;
}

.level-point-copy {
    display: grid;
    gap: 0.06rem;
    min-width: 0;
}

.level-point-copy strong {
    color: #f8fbf9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.74rem;
    line-height: 1.05;
}

.level-point-copy small {
    overflow: hidden;
    color: rgba(220,232,229,0.58);
    font-size: 0.55rem;
    font-weight: 800;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.level-point-controls {
    display: inline-grid;
    grid-template-columns: 1.55rem minmax(1.45rem, auto) 1.55rem;
    align-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(232,199,106,0.22);
    border-radius: 3px;
    background: rgba(2,7,9,0.66);
}

.level-point-controls button {
    display: grid;
    place-items: center;
    width: 1.55rem;
    height: 1.55rem;
    border: 0;
    background: rgba(111,214,189,0.07);
    color: var(--ad-teal, #6fd6bd);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
}

.level-point-controls button:last-child {
    color: #f3dc93;
}

.level-point-controls button:not(:disabled):hover,
.level-point-controls button:not(:disabled):focus-visible {
    background: rgba(232,199,106,0.16);
    color: #fff3bd;
    outline: 0;
}

.level-point-controls button:disabled {
    cursor: not-allowed;
    opacity: 0.3;
}

.level-point-controls output {
    min-width: 1.45rem;
    color: #f8fbf9;
    font-size: 0.72rem;
    font-weight: 900;
    text-align: center;
}

.level-points-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(4.4rem, 1fr));
    align-items: center;
    gap: 0.3rem;
    min-width: 12rem;
}

.level-points-actions > span {
    grid-column: 1 / -1;
    overflow: hidden;
    color: rgba(220,232,229,0.62);
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.has-unspent-points .level-points-actions > span {
    color: #f3dc93;
}

.level-points-actions button {
    min-height: 1.65rem;
    border: 1px solid rgba(161,212,201,0.22);
    border-radius: 3px;
    background: rgba(4,10,13,0.62);
    color: rgba(220,232,229,0.78);
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.level-points-actions .level-points-save {
    border-color: rgba(232,199,106,0.52);
    background: linear-gradient(180deg, rgba(232,199,106,0.15), rgba(231,138,85,0.12));
    color: #f3dc93;
}

.level-points-actions button:not(:disabled):hover,
.level-points-actions button:not(:disabled):focus-visible {
    border-color: rgba(232,199,106,0.72);
    color: #fff3bd;
    outline: 0;
}

.level-points-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.36;
}

@media (max-width: 1199.98px) {
.level-points-grid {
        grid-template-columns: repeat(3, minmax(8.5rem, 1fr));
    }

.level-points-actions {
        min-width: 0;
    }
}

@media (max-width: 767.98px) {
.level-points-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.level-points-actions {
        grid-column: 1 / -1;
    }

.level-points-actions > span {
        text-align: left;
    }
}

.active-pact-chip.is-account {
    border-top: 3px solid var(--ad-gold, #e8c76a);
    background:
        radial-gradient(circle at 50% 18%, rgba(111,214,189,0.18), transparent 58%),
        linear-gradient(180deg, rgba(29,34,24,0.84), rgba(3,9,11,0.94));
    color: #fff3bd;
    box-shadow:
        inset 0 0 0 1px rgba(232,199,106,0.08),
        0 0 18px rgba(232,199,106,0.12),
        0 8px 18px rgba(0,0,0,0.28);
}

.active-pact-chip.is-account-available {
    border-top: 3px solid #8de7ff;
    background:
        radial-gradient(circle at 50% 18%, rgba(141,231,255,0.2), transparent 58%),
        linear-gradient(180deg, rgba(8,29,37,0.86), rgba(3,9,11,0.94));
    color: #8de7ff;
    text-decoration: none;
}

@media (max-width: 420px) {
.level-points-grid {
        grid-template-columns: minmax(0, 1fr);
    }

.level-points-actions {
        grid-column: auto;
    }
}

body.skill-tree-page {
    min-height: 100vh;
    background:
        radial-gradient(circle at 50% 12%, rgba(232,199,106,0.1), transparent 24rem),
        radial-gradient(circle at 18% 30%, rgba(111,214,189,0.09), transparent 28rem),
        radial-gradient(circle at 82% 28%, rgba(231,138,85,0.08), transparent 25rem),
        linear-gradient(180deg, rgba(3,8,10,0.74), rgba(4,10,13,0.96)),
        url("/app/images/assets/background/amongdemons_summon.png") center / cover fixed no-repeat,
        var(--ad-bg, #071013);
}

.skill-tree-main {
    display: grid;
    gap: 1rem;
    width: min(100rem, calc(100% - 2rem));
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2.4rem) 0 2.5rem;
}

.skill-tree-main > .alert {
    margin: 0;
}

.skill-tree-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(161,212,201,0.16);
    padding: 0.35rem 0 1rem;
}

.skill-tree-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    color: var(--ad-teal, #6fd6bd);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.skill-tree-kicker .ad-icon {
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
}

.skill-tree-hero h1 {
    margin: 0.26rem 0 0.35rem;
    color: #f8fbf9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2rem, 4vw, 3.25rem);
    line-height: 0.95;
}

.skill-tree-hero p {
    max-width: 42rem;
    margin: 0;
    color: rgba(220,232,229,0.68);
    font-size: 0.86rem;
}

.skill-tree-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.58rem;
}

.skill-tree-summary > span {
    display: grid;
    gap: 0.15rem;
    border: 1px solid rgba(161,212,201,0.16);
    border-radius: 5px;
    background:
        linear-gradient(135deg, rgba(111,214,189,0.055), rgba(232,199,106,0.025)),
        rgba(4,10,13,0.68);
    padding: 0.72rem 0.8rem;
}

.skill-tree-summary small {
    color: rgba(220,232,229,0.52);
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.skill-tree-summary strong {
    color: #f8fbf9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
    line-height: 1;
}

.skill-tree-summary > .has-unspent-points {
    border-color: rgba(232,199,106,0.58);
    background:
        radial-gradient(circle at 80% 50%, rgba(232,199,106,0.13), transparent 5rem),
        rgba(4,10,13,0.72);
    box-shadow: 0 0 24px rgba(232,199,106,0.1);
}

.skill-tree-summary > .has-unspent-points strong {
    color: #f3dc93;
}

.skill-tree-panel {
    display: grid;
    gap: 0.9rem;
    border: 1px solid rgba(161,212,201,0.2);
    border-radius: 7px;
    background:
        linear-gradient(180deg, rgba(111,214,189,0.035), transparent 22%),
        rgba(4,10,13,0.78);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 24px 58px rgba(0,0,0,0.34);
    padding: clamp(0.8rem, 2vw, 1.25rem);
}

.skill-tree-panel > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(161,212,201,0.12);
    padding-bottom: 0.72rem;
}

.skill-tree-panel h1 {
    margin: 0.18rem 0 0;
    color: #f8fbf9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.45rem;
}

.skill-tree-panel > header p {
    margin: 0.28rem 0 0;
    color: rgba(220,232,229,0.64);
    font-size: 0.78rem;
}

.skill-tree-status {
    color: #f3dc93;
    font-size: 0.72rem;
    font-weight: 900;
}

.skill-tree-map {
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid rgba(161,212,201,0.12);
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 0, rgba(232,199,106,0.1), transparent 20rem),
        linear-gradient(rgba(111,214,189,0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(111,214,189,0.025) 1px, transparent 1px),
        rgba(2,8,10,0.68);
    background-size: auto, 2.4rem 2.4rem, 2.4rem 2.4rem, auto;
    padding: 1rem;
}

.skill-tree-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: max-content;
    max-width: 100%;
    margin: 0 auto 0.8rem;
    border: 1px solid rgba(161,212,201,0.16);
    border-radius: 999px;
    background: rgba(4,10,13,0.7);
    color: rgba(220,232,229,0.68);
    padding: 0.32rem 0.7rem;
    font-size: 0.64rem;
}

.skill-tree-rule .ad-icon {
    width: 0.88rem;
    height: 0.88rem;
    margin: 0;
    color: #f3dc93;
}

.skill-tree-origin {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: max-content;
    margin: 0 auto;
    border: 1px solid rgba(232,199,106,0.48);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(232,199,106,0.14), rgba(5,12,14,0.96));
    box-shadow: 0 0 30px rgba(232,199,106,0.08);
    padding: 0.55rem 1rem 0.55rem 0.55rem;
}

.skill-tree-origin::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 1px;
    height: 2.25rem;
    background: linear-gradient(rgba(232,199,106,0.72), rgba(161,212,201,0.32));
}

.skill-tree-origin-icon {
    display: grid;
    place-items: center;
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    background: rgba(232,199,106,0.14);
    color: #f3dc93;
}

.skill-tree-origin-icon .ad-icon {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.skill-tree-origin > span:last-child {
    display: grid;
    gap: 0.05rem;
}

.skill-tree-origin small {
    color: rgba(220,232,229,0.5);
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.skill-tree-origin strong {
    color: #fff3bd;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.88rem;
}

.skill-tree-branches {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: clamp(0.65rem, 1.5vw, 1.2rem);
    padding-top: 2.25rem;
}

.skill-tree-branches::before {
    content: "";
    position: absolute;
    top: 2.25rem;
    right: 10%;
    left: 10%;
    height: 1px;
    background: linear-gradient(90deg, rgba(231,138,85,0.62), rgba(232,199,106,0.58), rgba(217,109,112,0.58), rgba(111,214,189,0.58), rgba(143,239,255,0.58));
}

.skill-branch {
    position: relative;
    min-width: 0;
    padding-top: 1.15rem;
}

.skill-branch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 1.15rem;
    background: color-mix(in srgb, var(--branch-accent) 60%, transparent);
}

.skill-branch-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    min-height: 4.2rem;
    border: 1px solid color-mix(in srgb, var(--branch-accent) 34%, transparent);
    border-radius: 5px;
    background:
        radial-gradient(circle at 12% 50%, color-mix(in srgb, var(--branch-accent) 12%, transparent), transparent 6rem),
        rgba(6,14,16,0.94);
    padding: 0.65rem 0.7rem;
}

.skill-branch-emblem {
    display: grid;
    place-items: center;
    width: 2.45rem;
    height: 2.45rem;
    border: 1px solid color-mix(in srgb, var(--branch-accent) 44%, transparent);
    border-radius: 50%;
    color: var(--branch-accent);
}

.skill-branch-emblem .ad-icon {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.skill-branch-header small,
.skill-tree-stat-copy small,
.skill-path-keystone small,
.skill-path-echo small {
    display: block;
    color: color-mix(in srgb, var(--branch-accent) 76%, rgba(220,232,229,0.54));
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.skill-branch-header h2 {
    margin: 0.06rem 0 0;
    color: #f8fbf9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.05rem;
}

.skill-branch-header > strong {
    border: 1px solid color-mix(in srgb, var(--branch-accent) 28%, transparent);
    border-radius: 999px;
    color: var(--branch-accent);
    padding: 0.24rem 0.45rem;
    font-size: 0.62rem;
    white-space: nowrap;
}

.skill-branch-nodes {
    display: grid;
    gap: 1.45rem;
    padding: 1.45rem 0.25rem 0;
}

.skill-branch-nodes > article {
    position: relative;
}

.skill-branch-nodes > article::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 1px;
    height: 1.45rem;
    background: color-mix(in srgb, var(--branch-accent) 44%, transparent);
}

.skill-tree-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem 0.7rem;
    min-width: 0;
    border: 1px solid rgba(161,212,201,0.15);
    border-radius: 7px 7px 18px 7px;
    background: linear-gradient(135deg, rgba(12,24,25,0.94), rgba(3,9,11,0.92));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.018);
    padding: 0.72rem;
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.skill-tree-stat.is-invested {
    border-color: color-mix(in srgb, var(--branch-accent) 52%, transparent);
    background:
        radial-gradient(circle at 12% 30%, color-mix(in srgb, var(--branch-accent) 13%, transparent), transparent 7rem),
        linear-gradient(135deg, rgba(12,24,25,0.96), rgba(3,9,11,0.94));
    box-shadow: 0 0 22px color-mix(in srgb, var(--branch-accent) 8%, transparent);
}

.skill-tree-stat:focus-within {
    border-color: color-mix(in srgb, var(--branch-accent) 72%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--branch-accent) 12%, transparent);
}

.skill-tree-stat-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.15rem;
    height: 3.15rem;
    border: 1px solid color-mix(in srgb, var(--branch-accent) 46%, transparent);
    border-radius: 50%;
    background: color-mix(in srgb, var(--branch-accent) 7%, rgba(4,10,13,0.92));
    color: var(--branch-accent);
}

.is-invested .skill-tree-stat-icon {
    background: color-mix(in srgb, var(--branch-accent) 14%, rgba(4,10,13,0.9));
    box-shadow: 0 0 18px color-mix(in srgb, var(--branch-accent) 12%, transparent);
}

.skill-tree-stat-icon .ad-icon {
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
}

.skill-tree-stat-icon b {
    position: absolute;
    right: -0.24rem;
    bottom: -0.18rem;
    display: grid;
    place-items: center;
    min-width: 1.18rem;
    height: 1.18rem;
    border: 1px solid color-mix(in srgb, var(--branch-accent) 52%, transparent);
    border-radius: 50%;
    background: #071013;
    color: #f8fbf9;
    font-size: 0.56rem;
}

.skill-tree-stat-copy {
    display: grid;
    min-width: 0;
}

.skill-tree-stat-copy h3,
.skill-path-keystone h3 {
    margin: 0.08rem 0 0;
    color: #f8fbf9;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.95rem;
}

.skill-tree-stat-copy p,
.skill-path-keystone p {
    margin: 0.18rem 0 0;
    color: rgba(220,232,229,0.54);
    font-size: 0.62rem;
    line-height: 1.35;
}

.skill-tree-stat-copy strong,
.skill-path-keystone p strong {
    color: var(--branch-accent);
    font-size: 0.64rem;
}

.skill-tree-stat .level-point-controls {
    grid-column: 1 / -1;
    grid-template-columns: 2rem minmax(2.15rem, 1fr) 2rem;
}

.skill-tree-stat .level-point-controls button {
    width: 2rem;
    height: 1.9rem;
}

.skill-tree-stat .level-point-controls output {
    min-width: 2.15rem;
    font-size: 0.78rem;
}

.skill-path-echo {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 4.25rem;
    border: 1px dashed color-mix(in srgb, var(--branch-accent) 20%, transparent);
    border-radius: 50%;
    opacity: 0.55;
    padding: 0.6rem 0.8rem;
}

.skill-path-echo > span {
    color: var(--branch-accent);
}

.skill-path-echo .ad-icon {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
}

.skill-path-echo strong {
    color: rgba(220,232,229,0.58);
    font-size: 0.62rem;
}

.skill-path-keystone {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.65rem;
    min-height: 5rem;
    border: 1px solid rgba(161,212,201,0.13);
    border-radius: 26px 7px 7px 26px;
    background: rgba(3,9,11,0.82);
    filter: saturate(0.35);
    opacity: 0.6;
    padding: 0.65rem 0.7rem;
    transition: filter 180ms ease, opacity 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.skill-path-keystone > span {
    display: grid;
    place-items: center;
    width: 3.3rem;
    height: 3.3rem;
    border: 1px solid color-mix(in srgb, var(--branch-accent) 35%, transparent);
    border-radius: 50%;
    color: var(--branch-accent);
}

.skill-path-keystone .ad-icon {
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
}

.skill-path-keystone > b {
    grid-column: 1 / -1;
    justify-self: end;
    border: 1px solid rgba(220,232,229,0.18);
    border-radius: 999px;
    color: rgba(220,232,229,0.48);
    padding: 0.2rem 0.4rem;
    font-size: 0.52rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.skill-path-keystone.is-unlocked {
    border-color: color-mix(in srgb, var(--branch-accent) 64%, transparent);
    background:
        radial-gradient(circle at 10% 50%, color-mix(in srgb, var(--branch-accent) 18%, transparent), transparent 7rem),
        rgba(5,13,15,0.94);
    box-shadow: 0 0 26px color-mix(in srgb, var(--branch-accent) 11%, transparent);
    filter: none;
    opacity: 1;
}

.skill-path-keystone.is-unlocked > b {
    border-color: color-mix(in srgb, var(--branch-accent) 42%, transparent);
    color: var(--branch-accent);
}

.skill-tree-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    border-top: 1px solid rgba(161,212,201,0.12);
    padding-top: 0.8rem;
}

.skill-tree-actions p {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    margin: 0 auto 0 0;
    color: rgba(220,232,229,0.54);
    font-size: 0.66rem;
}

.skill-tree-actions p .ad-icon {
    width: 0.9rem;
    height: 0.9rem;
    margin: 0;
    color: var(--ad-teal, #6fd6bd);
}

.skill-tree-actions button {
    min-height: 2.45rem;
    border: 1px solid rgba(161,212,201,0.24);
    border-radius: 4px;
    background: rgba(4,10,13,0.7);
    color: rgba(220,232,229,0.78);
    padding: 0.48rem 0.8rem;
    font-size: 0.68rem;
    font-weight: 900;
    text-transform: uppercase;
}

.skill-tree-actions .skill-tree-save {
    border-color: rgba(232,199,106,0.58);
    background: linear-gradient(180deg, rgba(232,199,106,0.2), rgba(231,138,85,0.16));
    color: #fff3bd;
}

.skill-tree-actions button:not(:disabled):hover,
.skill-tree-actions button:not(:disabled):focus-visible {
    border-color: rgba(232,199,106,0.78);
    color: #fff3bd;
    box-shadow: 0 0 18px rgba(232,199,106,0.1);
    outline: 0;
}

.skill-tree-actions button:disabled {
    cursor: not-allowed;
    opacity: 0.36;
}

@media (max-width: 1199.98px) {
.skill-tree-map {
        padding: 0.8rem;
    }

.skill-tree-branches {
        min-width: 70rem;
    }

.skill-branch-nodes {
        padding-right: 0;
        padding-left: 0;
    }

.skill-path-keystone {
        grid-template-columns: auto minmax(0, 1fr);
    }

.skill-path-keystone > b {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 767.98px) {
.skill-tree-hero,
    .skill-tree-panel > header,
    .skill-tree-actions {
        align-items: stretch;
        flex-direction: column;
    }

.skill-tree-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.skill-tree-branches {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.85rem;
        min-width: 0;
        padding-top: 1.3rem;
    }

.skill-tree-branches::before {
        display: none;
    }

.skill-tree-origin::after {
        height: 1.3rem;
    }

.skill-branch {
        padding-top: 0;
    }

.skill-branch::before {
        display: none;
    }

.skill-branch-nodes {
        gap: 1rem;
        padding-top: 1rem;
    }

.skill-branch-nodes > article::before {
        height: 1rem;
    }

.skill-path-echo {
        border-radius: 6px;
    }

.skill-tree-actions p {
        margin-right: 0;
    }
}

@media (max-width: 420px) {
.skill-tree-summary {
        grid-template-columns: minmax(0, 1fr);
    }

.skill-tree-stat {
        grid-template-columns: auto minmax(0, 1fr);
    }

.skill-tree-map {
        margin-right: -0.35rem;
        margin-left: -0.35rem;
        padding: 0.55rem;
    }

.skill-tree-origin {
        padding-right: 0.75rem;
    }

.skill-branch-header {
        grid-template-columns: auto minmax(0, 1fr);
    }

.skill-branch-header > strong {
        grid-column: 1 / -1;
        justify-self: stretch;
        text-align: center;
    }

.skill-path-keystone {
        grid-template-columns: auto minmax(0, 1fr);
        border-radius: 22px 7px 7px 22px;
    }

.skill-tree-stat .level-point-controls {
        grid-column: 1 / -1;
        justify-self: stretch;
        grid-template-columns: 2.3rem minmax(2.15rem, 1fr) 2.3rem;
    }

.skill-tree-stat .level-point-controls button {
        width: 2.3rem;
    }
}

/* Shared notifications float above every game surface and dismiss on interaction. */
.alert.game-toast-alert[role="alert"] {
    position: fixed !important;
    top: calc(var(--game-nav-height, 3.6rem) + max(0.35rem, env(safe-area-inset-top, 0px))) !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    z-index: 20000 !important;
    width: min(38rem, calc(100vw - 2rem)) !important;
    min-height: 3.4rem;
    margin: 0 !important;
    border: 1px solid rgba(111,214,189,0.42) !important;
    border-radius: 4px !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(111,214,189,0.14), transparent 9rem),
        linear-gradient(145deg, rgba(8,20,23,0.98), rgba(3,8,11,0.98)) !important;
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.025),
        0 0 24px rgba(50,151,155,0.18),
        0 16px 42px rgba(0,0,0,0.56) !important;
    color: rgba(236,246,243,0.94) !important;
    padding: 0.85rem 1rem !important;
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    cursor: pointer;
    transform: translateX(-50%) !important;
    animation: game-alert-enter 180ms ease-out both;
    isolation: isolate;
}

.alert.game-toast-alert.alert-success {
    border-color: rgba(111,214,189,0.5) !important;
}

.alert.game-toast-alert.alert-danger {
    border-color: rgba(241,113,103,0.44) !important;
    background:
        radial-gradient(circle at 8% 0%, rgba(191,49,48,0.17), transparent 9rem),
        linear-gradient(145deg, rgba(25,11,13,0.98), rgba(7,7,10,0.98)) !important;
    box-shadow: 0 0 24px rgba(191,49,48,0.16), 0 16px 42px rgba(0,0,0,0.56) !important;
}

.alert.game-toast-alert.alert-warning {
    border-color: rgba(232,199,106,0.46) !important;
}

.alert.game-toast-alert:focus-visible {
    outline: 2px solid rgba(141,231,255,0.82);
    outline-offset: 3px;
}

@keyframes game-alert-enter {
    from {
        opacity: 0;
        transform: translateY(-0.6rem) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.settings-submit {
    margin-left: auto;
}

@media (prefers-reduced-motion: reduce) {
.alert.game-toast-alert[role="alert"] {
        animation: none;
    }
}

body.is-world-battle-instant-close .modal-backdrop {
    opacity: 0 !important;
}

body.hunter-page {
    min-height: 100vh;
    background:
        linear-gradient(180deg, rgba(4, 11, 14, 0.82), rgba(10, 19, 24, 0.94) 42%, rgba(4, 9, 12, 0.98)),
        url("/images/assets/background/amongdemons_home.png") center top / cover fixed,
        #05090c;
    color: #edf5f2;
}

.hunter-shell {
    max-width: 1180px;
}

.hunter-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    align-items: stretch;
    gap: 1rem;
    border: 1px solid rgba(161, 212, 201, 0.18);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgba(22, 43, 46, 0.92), rgba(25, 18, 24, 0.94)),
        rgba(8, 14, 18, 0.96);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
    padding: clamp(1rem, 2.4vw, 1.45rem);
}

.hunter-identity {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.hunter-avatar {
    display: grid;
    place-items: center;
    width: clamp(4.5rem, 9vw, 6rem);
    height: clamp(4.5rem, 9vw, 6rem);
    border: 1px solid rgba(232, 199, 106, 0.36);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    box-shadow: inset 0 0 24px rgba(232, 199, 106, 0.08);
    overflow: hidden;
}

.hunter-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hunter-title-block {
    min-width: 0;
}

.hunter-kicker {
    display: inline-flex;
    align-items: center;
    color: rgba(232, 199, 106, 0.82);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hunter-title-block h1 {
    margin: 0.08rem 0 0.2rem;
    color: #fff8dc;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(2.1rem, 5.6vw, 4.2rem);
    font-weight: 900;
    line-height: 0.96;
    overflow-wrap: anywhere;
}

.hunter-title-block p {
    margin: 0;
    color: rgba(237, 245, 242, 0.72);
    font-size: clamp(0.88rem, 1.7vw, 1rem);
}

.hunter-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.hunter-stat {
    display: grid;
    align-content: center;
    min-height: 5.05rem;
    border: 1px solid rgba(161, 212, 201, 0.14);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.24);
    padding: 0.8rem;
}

.hunter-stat-value {
    color: #f4d675;
    font-size: clamp(1.08rem, 2vw, 1.42rem);
    font-weight: 900;
    line-height: 1.05;
    overflow-wrap: anywhere;
}

.hunter-stat-label {
    margin-top: 0.28rem;
    color: rgba(237, 245, 242, 0.58);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.hunter-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr);
    gap: 1rem;
    margin-top: 1rem;
}

.hunter-panel {
    min-width: 0;
    border: 1px solid rgba(161, 212, 201, 0.16);
    border-radius: 8px;
    background: rgba(8, 14, 18, 0.94);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
    padding: clamp(0.9rem, 2vw, 1.1rem);
}

.hunter-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.85rem;
    margin-bottom: 0.9rem;
}

.hunter-panel-head h2 {
    margin: 0;
    color: #fff2bd;
    font-size: 1rem;
    font-weight: 900;
}

.hunter-panel-head p {
    margin: 0.18rem 0 0;
    color: rgba(237, 245, 242, 0.62);
    font-size: 0.82rem;
}

.hunter-panel-icon {
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    min-width: 2.15rem;
    border: 1px solid rgba(232, 199, 106, 0.24);
    border-radius: 8px;
    color: #f1d581;
    background: rgba(232, 199, 106, 0.08);
}

.hunter-panel-icon .ad-icon {
    width: 1.05rem;
    height: 1.05rem;
}

.hunter-team-board {
    display: grid;
    justify-items: center;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.hunter-team-board .formation-slot {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.hunter-team-board .formation-slot-cards {
    min-width: 0;
    min-height: 0;
}

.hunter-buff-list {
    display: grid;
    gap: 0.62rem;
}

.hunter-buff {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.68rem;
    align-items: start;
    border: 1px solid rgba(161, 212, 201, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    padding: 0.72rem;
}

.hunter-buff-icon {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 8px;
    color: #8de6cb;
    background: rgba(141, 230, 203, 0.1);
}

.hunter-buff-copy {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.hunter-buff-copy strong {
    color: #f6efd5;
    font-size: 0.9rem;
    line-height: 1.1;
}

.hunter-buff-copy small {
    color: rgba(237, 245, 242, 0.58);
    line-height: 1.35;
}

.hunter-buff-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 0.34rem;
}

.hunter-buff-effects span {
    border: 1px solid rgba(232, 199, 106, 0.18);
    border-radius: 6px;
    background: rgba(232, 199, 106, 0.08);
    color: rgba(255, 245, 211, 0.88);
    padding: 0.2rem 0.42rem;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.1;
}

.hunter-empty {
    margin: 0;
    border: 1px dashed rgba(161, 212, 201, 0.2);
    border-radius: 8px;
    color: rgba(237, 245, 242, 0.58);
    background: rgba(255, 255, 255, 0.025);
    padding: 0.8rem;
    text-align: center;
}

.rank-hunter-name-link {
    color: #fff4c7;
    text-decoration: none;
}

.rank-hunter-name-link:hover,
.rank-hunter-name-link:focus-visible {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.18rem;
}

@media (max-width: 991.98px) {
.hunter-hero,
    .hunter-content-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 575.98px) {
.hunter-hero {
        gap: 0.75rem;
        padding: 0.9rem;
    }

.hunter-identity {
        grid-template-columns: minmax(0, 1fr);
    }

.hunter-stat-grid {
        grid-template-columns: minmax(0, 1fr);
    }

.hunter-stat {
        min-height: 4.25rem;
    }
}