@import url('common.css');

:root {
    --hub-bg: #090909;
    --hub-panel: rgba(14, 12, 10, 0.58);
    --hub-panel-strong: rgba(20, 17, 13, 0.72);
    --hub-panel-soft: rgba(42, 37, 30, 0.38);
    --hub-border: rgba(255, 156, 89, 0.34);
    --hub-border-strong: rgba(255, 165, 79, 0.58);
    --hub-glow: rgba(255, 104, 43, 0.24);
    --hub-text: #f6ede4;
    --hub-muted: rgba(246, 237, 228, 0.7);
    --hub-dim: rgba(246, 237, 228, 0.48);
    --hub-red: #b12517;
    --hub-red-bright: #ef5d28;
    --hub-red-dark: #58130c;
    --hub-black-button: linear-gradient(180deg, rgba(28, 28, 28, 0.96), rgba(10, 10, 10, 0.96));
    --hub-section-gap: clamp(14px, 1.5vw, 28px);
    --den-rail-clearance: clamp(118px, 17vh, 156px);
    --action-rail-gap: 16px;
    --action-rail-bottom: clamp(18px, 2.2vh, 30px);
    --action-rail-button-height: clamp(52px, 6.8vh, 74px);
    --action-rail-side-icon-size: clamp(68px, 5vw, 92px);
    --action-rail-popover-gap: 14px;
    --action-rail-secondary-width: clamp(260px, 20vw, 320px);
    --char-level-ring-size: clamp(188px, 16vw, 244px);
}

@media (max-width: 900px) and (orientation: landscape) {

    #character-button,
    #marketplace-button {
        font-size: clamp(13px, 1.75vh, 19px) !important;
    }

    #character-button .utility-button-content,
    #character-button .action-button-title-row,
    #character-button .action-button-copy,
    #marketplace-button .utility-button-content,
    #marketplace-button .action-button-inline-copy,
    #marketplace-button .action-button-title-row,
    #marketplace-button .marketplace-button-copy,
    #marketplace-button .action-button-meta-copy,
    #marketplace-button .marketplace-button-wallet,
    #marketplace-button .marketplace-button-gold-value {
        font-size: inherit !important;
    }

    #marketplace-button .action-button-meta-copy,
    #marketplace-button .marketplace-button-wallet {
        align-items: center;
    }
}

@media (max-width: 900px) and (orientation: landscape) {

    #profile-back-den-button,
    #cards-back-button {
        padding: 8px 10px;
        font-size: clamp(9px, 1.25vw, 11px);
        white-space: nowrap;
    }

    .back-den-button-content {
        gap: 6px;
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    #game-container.den-home-layout #character-button,
    #game-container.den-home-layout #quest-controls #marketplace-button,
    #game-container.den-home-layout #timeline-controls #smell-blood-button,
    #game-container.den-home-layout #timeline-controls #refer-friend-button {
        font-size: clamp(13px, 1.75vh, 19px) !important;
    }

    #game-container.den-home-layout #character-button .action-button-copy,
    #game-container.den-home-layout #character-button .action-button-title,
    #game-container.den-home-layout #quest-controls #marketplace-button .marketplace-button-copy,
    #game-container.den-home-layout #quest-controls #marketplace-button .marketplace-button-wallet,
    #game-container.den-home-layout #timeline-controls #smell-blood-button #fight-status,
    #game-container.den-home-layout #timeline-controls #refer-friend-button #refer-friend-status {
        font-size: inherit !important;
    }
}

body {
    background: var(--hub-bg);
    color: var(--hub-text);
    font-family: 'Rajdhani', Arial, sans-serif;
}

#game-container.redesign-page {
    position: relative;
    background: #090909 !important;
    overflow: hidden;
    isolation: isolate;
}

#game-container.redesign-page.is-page-loading .hub-stage,
#game-container.redesign-page.is-page-loading .action-rail {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#game-container.redesign-page.is-page-ready .hub-stage,
#game-container.redesign-page.is-page-ready .action-rail {
    visibility: visible;
    animation: redesign-page-reveal 240ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

#game-container.redesign-page.is-page-ready .action-rail {
    animation-delay: 36ms;
}

@keyframes redesign-page-reveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.den-page::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--den-rail-clearance) + 64px);
    pointer-events: none;
    z-index: 2;
    background:
        linear-gradient(180deg, rgba(9, 8, 7, 0), rgba(9, 8, 7, 0.18) 30%, rgba(9, 8, 7, 0.62) 68%, rgba(9, 8, 7, 0.94) 100%);
}

#game-container.redesign-page .page-backdrop,
#game-container.redesign-page .page-vignette,
#ambient-particles {
    position: absolute;
    inset: 0;
}

#game-container.redesign-page .page-backdrop {
    inset: 0;
    background:
        radial-gradient(circle at 18% 26%, rgba(255, 140, 73, 0.14), transparent 28%),
        radial-gradient(circle at 78% 72%, rgba(255, 116, 36, 0.1), transparent 26%),
        linear-gradient(180deg, rgba(12, 10, 9, 0.36), rgba(12, 10, 9, 0.72)),
        url('../assets/images/bg/bg-den.png') center center / cover no-repeat;
    filter: blur(5px) saturate(0.92) brightness(0.9);
    transform: scale(1.04);
    opacity: 0.96;
}

#game-container.redesign-page .page-vignette {
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 185, 102, 0.07), transparent 34%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.34)),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.6));
    z-index: 1;
}

#ambient-particles {
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen;
    opacity: 0.85;
}

.hub-stage {
    position: relative;
    z-index: 3;
    height: 100%;
    padding: clamp(18px, 2.2vh, 30px) clamp(18px, 2vw, 30px) clamp(96px, 14vh, 140px);
    box-sizing: border-box;
}

.den-page .hub-stage {
    padding-bottom: clamp(18px, 2.2vh, 30px);
}

.char-page .hub-stage {
    padding-bottom: clamp(20px, 3vh, 36px);
}

.den-shell {
    display: grid;
    grid-template-columns: minmax(240px, 0.95fr) minmax(0, 2.35fr);
    gap: var(--hub-section-gap);
    height: 100%;
}

.den-page .den-shell {
    height: calc(100% - var(--den-rail-clearance));
    align-items: stretch;
}

.char-shell {
    display: grid;
    grid-template-columns: minmax(250px, 0.9fr) minmax(500px, 1.18fr) minmax(270px, 0.94fr);
    gap: clamp(12px, 1.2vw, 22px);
    align-items: center;
    height: 100%;
}

.hub-panel {
    position: relative;
    background:
        linear-gradient(180deg, rgba(31, 26, 19, 0.66), rgba(15, 12, 10, 0.48)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.035), transparent 38%);
    border: 1px solid var(--hub-border);
    border-radius: 28px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 28px 55px rgba(0, 0, 0, 0.36),
        0 0 0 1px rgba(255, 151, 83, 0.05);
    backdrop-filter: blur(10px) saturate(1.08);
    overflow: hidden;
}

.hub-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 204, 140, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(255, 118, 40, 0.08), transparent 26%);
}

.panel-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.panel-eyebrow {
    color: var(--hub-muted);
    font-size: clamp(14px, 1.7vh, 19px);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.panel-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(30px, 4.2vh, 56px);
    font-weight: 400;
    letter-spacing: 0.06em;
}

.skills-panel-title-points {
    color: #ff7b60;
}

.panel-subtitle {
    color: var(--hub-dim);
    font-size: clamp(14px, 1.7vh, 20px);
    line-height: 1.25;
}

.character-column {
    display: flex;
    align-items: stretch;
    position: relative;
    overflow: visible;
}

.character-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
    padding: clamp(14px, 2vh, 28px);
    box-sizing: border-box;
}

.den-page .character-stage {
    padding: clamp(4px, 0.8vh, 12px) 0 clamp(86px, 12vh, 124px);
}

.char-page .character-stage {
    padding: clamp(54px, 7vh, 88px) 0 clamp(188px, 30vh, 260px);
}

#character-sprite-button {
    all: unset;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

#character-sprite-button .character-sprite {
    pointer-events: none;
}

#character-sprite-container {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.den-page #character-sprite-container {
    padding-top: 0;
}

.char-page #character-sprite-container {
    padding-top: clamp(30px, 4.5vh, 54px);
}

.character-sprite {
    position: relative;
    display: block;
    object-fit: contain;
    object-position: center bottom;
    filter:
        drop-shadow(0 20px 28px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 28px rgba(255, 142, 82, 0.18));
    animation: character-breath 4.6s ease-in-out infinite;
    user-select: none;
    -webkit-user-drag: none;
}

.den-page .character-sprite {
    width: clamp(300px, 29vw, 430px);
    max-width: none;
    max-height: calc(100vh - 210px);
}

.char-page .character-sprite {
    width: clamp(290px, 25vw, 420px);
    max-width: none;
    max-height: calc(100vh - 200px);
}

@keyframes character-breath {

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

    50% {
        transform: translateY(-10px);
    }
}

.identity-badge {
    position: absolute;
    left: 50%;
    bottom: clamp(12px, 2vh, 22px);
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 2;
}

.den-page .identity-badge {
    top: auto;
    bottom: clamp(60px, 8vh, 92px);
    width: 100%;
    transform: translateX(-50%);
    justify-content: flex-end;
    gap: 0;
    pointer-events: none;
}

.char-page .identity-badge {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    align-items: center;
    width: min(100%, 400px);
    padding: 0;
    box-sizing: border-box;
    gap: 18px;
}

.skins-page .identity-badge {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    align-items: center;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.level-ring {
    position: relative;
    width: clamp(176px, 15vw, 236px);
    aspect-ratio: 1 / 1;
}

.char-page .level-ring {
    width: var(--char-level-ring-size);
    margin: 0 auto;
}

.level-ring svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

.xp-arc-track,
.xp-arc-progress {
    fill: none;
    stroke-linecap: round;
    stroke-width: 12;
}

.xp-arc-track {
    stroke: rgba(255, 141, 79, 0.18);
    filter: drop-shadow(0 0 8px rgba(255, 110, 48, 0.12));
}

.xp-arc-progress {
    stroke: url(#xpArcGradient);
    stroke-dasharray: 100;
    stroke-dashoffset: calc(100 - var(--xp-progress, 0));
    filter:
        drop-shadow(0 0 8px rgba(255, 96, 31, 0.28)) drop-shadow(0 0 18px rgba(255, 132, 62, 0.2));
    transition: stroke-dashoffset 0.45s ease;
}

.level-ring-core {
    position: absolute;
    inset: 16%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 181, 113, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(49, 31, 26, 0.94), rgba(16, 13, 11, 0.94));
    border: 1px solid rgba(255, 170, 98, 0.24);
    box-shadow:
        inset 0 0 0 3px rgba(255, 255, 255, 0.03),
        inset 0 -12px 18px rgba(0, 0, 0, 0.28),
        0 18px 32px rgba(0, 0, 0, 0.28);
    text-align: center;
}

.level-ring-label {
    color: var(--hub-muted);
    font-size: clamp(14px, 2vh, 24px);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.level-ring-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(52px, 9.6vh, 98px);
    line-height: 0.9;
}

.level-ring-copy {
    color: var(--hub-dim);
    font-size: clamp(12px, 1.55vh, 18px);
    letter-spacing: 0.05em;
    line-height: 1.15;
}

.identity-nameplate {
    min-width: clamp(190px, 15vw, 260px);
    padding: 12px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 157, 88, 0.16);
    background: linear-gradient(180deg, rgba(12, 12, 12, 0.94), rgba(7, 7, 7, 0.9));
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.32);
    text-align: center;
}

.char-page .identity-nameplate {
    min-width: 0;
    width: 100%;
    text-align: center;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.den-page .identity-nameplate {
    order: -1;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    text-align: center;
}

.identity-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 4vh, 44px);
    letter-spacing: 0.06em;
    line-height: 0.94;
}

.identity-record {
    margin-top: 4px;
    color: var(--hub-muted);
    font-size: clamp(15px, 1.85vh, 21px);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.identity-copy {
    width: min(100%, 340px);
    color: var(--hub-dim);
    font-size: clamp(14px, 1.7vh, 19px);
    line-height: 1.35;
}

.battle-and-quests {
    display: grid;
    gap: var(--hub-section-gap);
    min-width: 0;
    min-height: 0;
}

.den-page .battle-and-quests {
    gap: clamp(6px, 0.9vh, 12px);
}

.panel-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: clamp(6px, 0.8vh, 10px);
}

.den-page .panel-heading-row .panel-title {
    font-size: clamp(24px, 3.2vh, 38px);
    letter-spacing: 0.05em;
}

.quests-count {
    color: var(--hub-dim);
    font-size: 0.5em;
    letter-spacing: 0.03em;
    margin-left: 0.25em;
}

.den-page .panel-heading-row--section {
    margin: clamp(4px, 0.6vh, 8px) 0 clamp(8px, 1vh, 14px);
}

.panel-section-copy {
    margin: calc(clamp(6px, 0.8vh, 10px) * -1) 0 clamp(10px, 1.2vh, 16px);
    color: var(--hub-dim);
    font-size: clamp(13px, 1.5vh, 17px);
    line-height: 1.3;
    width: 100%;
    max-width: none;
}

.chapter-summary {
    display: grid;
    gap: 5px;
    margin: 0 0 clamp(10px, 1.2vh, 16px);
}

.chapter-summary-kicker {
    color: var(--hub-dim);
    font-size: clamp(12px, 1.2vh, 14px);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.chapter-summary-title {
    color: var(--hub-text);
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(24px, 2.8vh, 34px);
    letter-spacing: 0.05em;
    line-height: 0.96;
}

.chapter-summary-meta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: var(--hub-muted);
    font-size: clamp(12px, 1.35vh, 16px);
}

.chapter-summary-bank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 175, 103, 0.18);
    background: rgba(18, 15, 12, 0.72);
    color: #ffd7ac;
    font-size: 0.94em;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.battle-pass-panel,
.missions-panel,
.timeline-panel,
.info-column-panel,
.skills-panel,
.character-center-panel {
    position: relative;
    min-height: 0;
    padding: clamp(16px, 1.8vh, 24px);
    box-sizing: border-box;
}

.battle-pass-panel {
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(80, 30, 16, 0.62), rgba(40, 20, 15, 0.48)),
        linear-gradient(125deg, rgba(255, 255, 255, 0.04), transparent 38%);
    border: 1px solid rgba(255, 148, 74, 0.42);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 22px 40px rgba(0, 0, 0, 0.28),
        0 0 24px rgba(255, 112, 44, 0.08);
    overflow: hidden;
}

.den-page .battle-pass-panel .panel-title,
.den-page .missions-panel .panel-title,
.den-page .timeline-panel .panel-title,
.char-page .skills-panel .panel-title {
    font-size: clamp(24px, 3.2vh, 38px);
    letter-spacing: 0.05em;
}

.battle-pass-panel::after {
    content: '';
    position: absolute;
    inset: auto -10% -35% 38%;
    height: 90%;
    background: radial-gradient(circle, rgba(255, 166, 83, 0.2), transparent 56%);
    pointer-events: none;
}

.den-page .battle-pass-panel,
.den-page .missions-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
}

.den-page .battle-pass-panel {
    margin-inline: calc(clamp(10px, 1.2vh, 14px) * -1);
    padding-top: clamp(6px, 0.8vh, 10px);
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    overflow: visible;
}

.den-page .battle-pass-panel::after,
.den-page .missions-panel::before {
    display: none;
}

.battle-pass-track {
    position: relative;
    z-index: 1;
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.den-page .battle-pass-track {
    margin-top: 0;
}

.battle-pass-meter-shell {
    --battle-pass-side-gutter-start: clamp(44px, 4vw, 60px);
    --battle-pass-side-gutter-end: clamp(88px, 8vw, 120px);
    --battle-pass-meter-height: 16px;
    position: relative;
    padding-bottom: clamp(34px, 4.6vh, 50px);
}

.battle-pass-rewards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    left: var(--battle-pass-side-gutter-start);
    right: var(--battle-pass-side-gutter-end);
}

.battle-pass-milestones {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--battle-pass-side-gutter-start);
    right: var(--battle-pass-side-gutter-end);
    margin: 0;
    display: block;
    pointer-events: none;
}

.battle-pass-reward {
    position: absolute;
    top: calc(var(--battle-pass-meter-height) / 2);
    transform: translate(-50%, -50%);
    display: inline-flex;
    white-space: nowrap;
    margin: 0;
    z-index: 2;
    background: #171515;
    border: 1px solid rgba(255, 171, 98, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 10px 16px rgba(0, 0, 0, 0.2);
    pointer-events: auto;
}

.chapter-reward-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    white-space: normal;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.chapter-reward-stack {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.chapter-reward-chip {
    pointer-events: auto;
}

.chapter-next-slot {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 18px);
    transform: translateX(-50%);
    min-width: max-content;
}

.chapter-next-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 171, 98, 0.22);
    background: rgba(16, 14, 12, 0.9);
    color: #ffd9b2;
    font-size: clamp(11px, 1.15vh, 13px);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 12px 18px rgba(0, 0, 0, 0.22);
}

.chapter-next-button {
    min-width: 168px;
    font-size: clamp(13px, 1.35vh, 16px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 24px rgba(0, 0, 0, 0.26),
        0 0 18px rgba(56, 173, 92, 0.18);
}

.chapter-next-button[disabled] {
    cursor: default;
    opacity: 0.72;
    filter: grayscale(0.08);
}

.battle-pass-reward.is-reached {
    box-shadow: 0 0 16px rgba(255, 121, 46, 0.18);
    filter: brightness(1.08);
}

.battle-pass-reward.is-edge-end {
    transform: translate(-50%, -50%);
}

.battle-pass-reward img,
.quest-reward-chip img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.battle-pass-reward-value {
    font-size: inherit;
    line-height: 1;
    font-family: inherit;
}

.battle-pass-markers {
    position: absolute;
    left: var(--battle-pass-side-gutter-start);
    right: var(--battle-pass-side-gutter-end);
    top: 0;
    height: 100%;
    pointer-events: none;
}

.battle-pass-marker {
    position: absolute;
    top: calc(var(--battle-pass-meter-height) + clamp(10px, 1.4vh, 16px));
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
}

.battle-pass-marker.is-edge-end {
    transform: translateX(-50%);
}

.battle-pass-marker-copy {
    color: var(--hub-muted);
    font-size: clamp(11px, 1.25vh, 14px);
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.battle-pass-marker.is-reached .battle-pass-marker-copy {
    color: #ffd8af;
}

.chapter-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 6400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(12px, 2.4vh, 24px);
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.chapter-transition-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.chapter-transition-backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 152, 68, 0.18), transparent 28%),
        linear-gradient(180deg, rgba(9, 8, 7, 0.46), rgba(5, 4, 4, 0.9));
    backdrop-filter: blur(12px);
}

.chapter-transition-panel {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: clamp(6px, 1.3vh, 10px);
    width: min(72vw, 520px);
    max-height: calc(100vh - clamp(24px, 4.8vh, 48px));
    padding: clamp(16px, 3vh, 28px);
    border-radius: 30px;
    border: 1px solid rgba(255, 168, 92, 0.24);
    background:
        linear-gradient(180deg, rgba(26, 19, 15, 0.9), rgba(12, 10, 9, 0.94)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 36%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 36px 64px rgba(0, 0, 0, 0.42),
        0 0 36px rgba(255, 116, 39, 0.12);
}

.chapter-transition-skip {
    position: absolute;
    top: 16px;
    right: 16px;
    appearance: none;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 171, 98, 0.18);
    background: rgba(18, 15, 12, 0.72);
    color: var(--hub-muted);
    cursor: pointer;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.chapter-transition-kicker {
    color: #ffcb95;
    font-size: clamp(13px, 1.45vh, 16px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.chapter-transition-title {
    margin: 0;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(34px, 5.4vh, 58px);
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 0.92;
}

.chapter-transition-copy {
    margin: 0;
    color: var(--hub-muted);
    font-size: clamp(14px, 1.6vh, 18px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
}

.chapter-transition-sprite-stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    min-height: clamp(150px, 25vh, 240px);
    padding-top: clamp(4px, 1vh, 10px);
}

.chapter-transition-sprite {
    width: clamp(170px, 20vw, 250px);
    max-height: 100%;
}

.battle-pass-meter {
    position: relative;
    margin-inline-start: var(--battle-pass-side-gutter-start);
    margin-inline-end: var(--battle-pass-side-gutter-end);
    height: var(--battle-pass-meter-height);
    border-radius: 999px;
    background: rgba(15, 13, 11, 0.58);
    box-shadow: inset 0 0 0 1px rgba(255, 172, 101, 0.16);
    overflow: hidden;
}

.battle-pass-meter-fill {
    height: 100%;
    width: var(--battle-pass-progress, 0%);
    border-radius: inherit;
    background:
        linear-gradient(90deg, #b62618, #f45f27 58%, #ffb24b 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 0 16px rgba(255, 100, 35, 0.28);
    transition: width 0.45s ease;
}

.missions-panel,
.timeline-panel,
.skills-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.missions-scroll-content,
.timeline-scroll-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.missions-scroll-content {
    gap: clamp(6px, 0.8vh, 12px);
}

.timeline-scroll-content {
    gap: clamp(8px, 1vh, 14px);
}

.panel-scroll-shell {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
}

.panel-scroll-shell::before,
.panel-scroll-shell::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 42px;
    pointer-events: none;
    z-index: 2;
}

.panel-scroll-shell::before {
    top: 0;
    background: linear-gradient(180deg, rgba(17, 14, 12, 0.92), rgba(17, 14, 12, 0));
}

.panel-scroll-shell::after {
    bottom: 0;
    background: linear-gradient(180deg, rgba(17, 14, 12, 0), rgba(17, 14, 12, 0.98));
}

.den-page .missions-panel .panel-scroll-shell::before,
.den-page .timeline-panel .panel-scroll-shell::before {
    display: none;
}

.den-page .missions-panel .panel-scroll-shell::after,
.den-page .timeline-panel .panel-scroll-shell::after {
    height: clamp(108px, 15vh, 156px);
    background: linear-gradient(180deg, rgba(17, 14, 12, 0), rgba(17, 14, 12, 0.28) 24%, rgba(17, 14, 12, 0.72) 58%, rgba(9, 8, 7, 0.98));
}

.panel-scroll {
    position: relative;
    z-index: 1;
    height: 100%;
    overflow: auto;
    padding-right: 8px;
    scroll-padding-bottom: clamp(144px, 18vh, 204px);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 138, 62, 0.46) rgba(0, 0, 0, 0.18);
}

.panel-scroll::-webkit-scrollbar {
    width: 8px;
}

.panel-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 999px;
}

.panel-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(255, 104, 43, 0.7), rgba(138, 41, 19, 0.82));
    border-radius: 999px;
}

#quest-board-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-bottom: clamp(148px, 20vh, 212px);
}

.den-page #quest-board-list {
    padding-bottom: clamp(148px, 20vh, 212px);
}

.quest-item {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 14px 16px 12px;
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(35, 27, 20, 0.76), rgba(19, 17, 14, 0.92));
    border: 1px solid rgba(255, 160, 86, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 16px 28px rgba(0, 0, 0, 0.24);
}

.quest-item.is-claimed {
    opacity: 0.72;
}

.quest-item-top {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.quest-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.quest-item-main-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.92fr);
    align-items: center;
    gap: 12px;
}

.quest-item-copy {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.quest-item-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
}

.quest-item-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 106, 41, 0.14);
    color: #ffd0a4;
    font-size: clamp(12px, 1.3vh, 15px);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quest-item-label {
    font-size: clamp(18px, 2.25vh, 26px);
    line-height: 1.02;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 0.04em;
}

.quest-description {
    color: var(--hub-dim);
    font-size: clamp(12px, 1.45vh, 16px);
    line-height: 1.2;
}

.quest-progress-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.36);
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(255, 173, 103, 0.14),
        inset 0 8px 14px rgba(255, 255, 255, 0.02);
}

.quest-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #c12c1d, #f4682d 60%, #ffbf54);
    box-shadow: 0 0 10px rgba(255, 112, 44, 0.28);
}

.quest-item.is-completed .quest-progress-fill {
    background: linear-gradient(90deg, #1d8f43, #3ec56c 58%, #8df0a5);
    box-shadow: 0 0 12px rgba(62, 197, 108, 0.28);
}

.quest-progress-label {
    position: relative;
    z-index: 1;
    color: #fff2df;
    font-size: clamp(11px, 1.18vh, 14px);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.7),
        0 0 8px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

.quest-rewards {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
}

.quest-reward-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    background: #171515;
    border: 1px solid rgba(255, 167, 95, 0.16);
    color: var(--hub-text);
    font-size: clamp(12px, 1.3vh, 15px);
}

.quest-reward-chip.is-previewable,
.battle-pass-reward.is-previewable {
    cursor: pointer;
}

.quest-state-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 171, 98, 0.24);
    background: rgba(255, 118, 40, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: #ffd4ad;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(12px, 1.3vh, 15px);
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

button.quest-state-pill {
    appearance: none;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

button.quest-state-pill.is-claimable {
    background: linear-gradient(180deg, rgba(55, 153, 79, 0.96), rgba(28, 103, 50, 0.98));
    border-color: rgba(152, 255, 176, 0.28);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 18px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(56, 173, 92, 0.18);
    color: #f3fff4;
}

button.quest-state-pill.is-claimable:hover {
    transform: translateY(-1px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 14px 22px rgba(0, 0, 0, 0.24),
        0 0 18px rgba(67, 194, 108, 0.24);
    filter: brightness(1.05);
}

.quest-claim-button,
.hub-action-button,
.hub-utility-button,
#pick-cards-button,
#char-card-deck-button,
#cards-back-button {
    appearance: none;
    border: 1px solid rgba(255, 171, 98, 0.26);
    border-radius: 18px;
    padding: 12px 18px;
    color: var(--hub-text);
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.9vh, 20px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
}

.quest-claim-button {
    flex-shrink: 0;
    min-width: 112px;
    background: linear-gradient(180deg, rgba(109, 26, 19, 0.92), rgba(60, 17, 13, 0.94));
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.24);
}

.quest-claim-button:disabled {
    cursor: default;
    opacity: 0.7;
    filter: grayscale(0.15);
}

.quest-claim-button.is-claimed {
    background: linear-gradient(180deg, rgba(37, 110, 59, 0.94), rgba(22, 67, 36, 0.96));
    border-color: rgba(120, 227, 151, 0.22);
    color: #eaffef;
    opacity: 1;
    filter: none;
}

.quest-claim-button:not(:disabled):hover,
.hub-action-button:hover,
.hub-utility-button:hover,
#pick-cards-button:hover,
#char-card-deck-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24), 0 0 18px rgba(255, 119, 46, 0.18);
    filter: brightness(1.05);
}

.timeline-panel {
    height: 100%;
}

.den-page .missions-panel,
.den-page .timeline-panel {
    padding: 4px 0 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
}

.den-page .timeline-panel .panel-scroll-shell::after {
    height: clamp(108px, 15vh, 156px);
    background: linear-gradient(180deg, rgba(12, 10, 9, 0), rgba(12, 10, 9, 0.24) 24%, rgba(12, 10, 9, 0.7) 58%, rgba(9, 8, 7, 0.98));
}

.den-page .timeline-panel .panel-scroll-shell {
    box-shadow: inset 0 -34px 44px rgba(0, 0, 0, 0.18);
}

#fight-status,
#refer-friend-status,
.action-button-subtitle {
    display: inline-flex;
    align-items: flex-end;
    color: var(--hub-dim);
    font-size: clamp(11px, 1.28vh, 14px);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin: 0;
    line-height: 0.96;
}

.action-button-title {
    display: block;
    line-height: 0.98;
}

#timeline-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow: visible;
    padding-bottom: 0;
    padding-right: 0;
}

.event-item {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    grid-template-areas:
        "icon time"
        "icon message";
    gap: 4px 14px;
    padding: 12px 14px 12px 12px;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(28, 36, 49, 0.74), rgba(17, 22, 31, 0.86));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 14px 24px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(6px);
}

.event-item.win {
    background: linear-gradient(180deg, rgba(34, 86, 58, 0.82), rgba(20, 52, 34, 0.94));
    border-color: rgba(122, 216, 149, 0.14);
}

.event-item.lose {
    background: linear-gradient(180deg, rgba(102, 38, 38, 0.84), rgba(58, 20, 20, 0.96));
    border-color: rgba(255, 137, 137, 0.12);
}

.event-item.referral,
.event-item.marketplace {
    background: linear-gradient(180deg, rgba(80, 45, 112, 0.82), rgba(45, 23, 66, 0.95));
    border-color: rgba(193, 152, 255, 0.14);
}

.event-item.level-up {
    background: linear-gradient(180deg, rgba(118, 86, 28, 0.88), rgba(72, 50, 16, 0.96));
    border-color: rgba(255, 216, 119, 0.14);
}

.event-icon {
    grid-area: icon;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: linear-gradient(180deg, rgba(76, 95, 122, 0.52), rgba(30, 40, 56, 0.82));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 8px 16px rgba(0, 0, 0, 0.22);
}

.event-icon img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.event-icon i {
    font-size: 28px;
    line-height: 1;
}

.event-item.win .event-icon {
    background: linear-gradient(180deg, rgba(58, 146, 93, 0.54), rgba(28, 76, 48, 0.84));
}

.event-item.lose .event-icon {
    background: linear-gradient(180deg, rgba(185, 74, 74, 0.56), rgba(96, 28, 28, 0.84));
}

.event-item.referral .event-icon,
.event-item.marketplace .event-icon {
    background: linear-gradient(180deg, rgba(152, 97, 220, 0.56), rgba(76, 38, 124, 0.84));
}

.event-item.level-up .event-icon {
    background: linear-gradient(180deg, rgba(232, 176, 73, 0.58), rgba(132, 87, 24, 0.84));
}

.event-time {
    grid-area: time;
    color: var(--hub-dim);
    font-size: clamp(12px, 1.35vh, 15px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
    justify-self: start;
    align-self: start;
}

.event-message {
    grid-area: message;
    font-size: clamp(16px, 1.9vh, 21px);
    line-height: 1.22;
    align-self: center;
}

.event-message a {
    color: #ffe0b2;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

.event-message a:hover {
    color: #fff2d6;
}

#close-side-menu-button {
    margin: 0;
    width: 100%;
    min-width: 0;
    padding: 0;
    background: var(--hub-black-button);
    color: var(--hub-text);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.22);
}

#close-side-menu-button.is-open {
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 171, 98, 0.22);
}

#close-side-menu-button:hover {
    background: var(--hub-black-button);
}

.timeline-menu-top-actions,
.timeline-menu-bottom-actions,
.timeline-menu-settings-actions {
    display: grid;
    gap: 10px;
}

.timeline-menu-top-actions button,
.timeline-menu-bottom-actions button,
.timeline-menu-settings-actions button,
.action-rail button,
#profile-back-den-button,
#marketplace-back-button {
    appearance: none;
    border-radius: 18px;
    border: 1px solid rgba(255, 171, 98, 0.24);
    cursor: pointer;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.timeline-menu-top-actions button,
.timeline-menu-bottom-actions button,
.timeline-menu-settings-actions button {
    padding: 12px 16px;
    font-size: clamp(15px, 1.8vh, 19px);
    color: var(--hub-text);
    background: var(--hub-black-button);
}

.timeline-menu-top-actions[hidden],
.timeline-menu-settings-actions[hidden],
.timeline-menu-bottom-actions button[hidden] {
    display: none;
}

.action-rail {
    position: absolute;
    left: clamp(18px, 2vw, 30px);
    right: clamp(18px, 2vw, 30px);
    bottom: var(--action-rail-bottom);
    z-index: 5;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--action-rail-gap);
    align-items: stretch;
}

.action-rail-side {
    grid-column: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--action-rail-gap);
    align-items: stretch;
    width: calc(var(--action-rail-secondary-width) + var(--action-rail-side-icon-size) + var(--action-rail-gap));
    min-width: 0;
}

.action-rail-menu-cluster {
    position: relative;
}

.action-rail-right-cluster {
    position: relative;
    grid-column: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--action-rail-side-icon-size);
    gap: var(--action-rail-gap);
    width: calc(var(--action-rail-secondary-width) + var(--action-rail-side-icon-size) + var(--action-rail-gap));
    min-width: 0;
    align-items: stretch;
}

.action-rail-menu-cluster {
    display: grid;
    grid-template-columns: var(--action-rail-side-icon-size) minmax(0, 1fr);
    gap: var(--action-rail-gap);
    min-width: 0;
}

.action-rail button {
    width: 100%;
    min-width: 0;
    min-height: var(--action-rail-button-height);
    padding: 0 18px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.34);
    font-size: clamp(16px, 2.1vh, 24px);
    border-radius: 18px;
}

.action-rail .main-button {
    grid-column: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.action-rail .utility-button,
#profile-back-den-button,
#marketplace-back-button,
#cards-back-button,
#pick-cards-button,
#char-card-deck-button {
    color: var(--hub-text);
    background: var(--hub-black-button);
}

#character-button,
#marketplace-button,
#close-side-menu-button,
#timeline-toggle-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

#character-button,
#marketplace-button {
    position: relative;
    width: var(--action-rail-secondary-width);
}

#character-button.has-notification,
#challenges-shortcut-button.has-notification {
    background: linear-gradient(180deg, #611512, #320d0c);
    color: #f2e8e1;
    border: 1px solid #8f201c;
    text-shadow: none;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.action-rail-marketplace {
    width: 100%;
}

.utility-button-content {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
}

.utility-button-content-single {
    gap: 0;
}

.marketplace-button-content,
.action-button-inline-copy {
    gap: 10px;
}

.action-button-inline-copy {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    min-width: 0;
    max-width: 100%;
}

.action-button-meta-copy {
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
    color: var(--hub-dim);
    white-space: nowrap;
    font-size: inherit;
    line-height: inherit;
}

.action-button-meta-separator {
    color: currentColor;
    flex: 0 0 auto;
}

.action-button-meta-copy .action-button-subtitle,
.action-button-meta-copy #fight-status,
.action-button-meta-copy .marketplace-button-wallet {
    font-size: inherit;
    line-height: inherit;
}

.action-button-title-row {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 10px;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
}

.action-button-icon,
.menu-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 1;
}

.action-button-icon {
    font-size: 0.86em;
}

.menu-toggle-icon {
    font-size: clamp(20px, 2.5vh, 28px);
}

.action-button-copy,
.marketplace-button-copy,
.action-button-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.action-button-copy {
    display: block;
    max-width: 100%;
}

.action-button-inline-copy .action-button-subtitle,
.action-button-inline-copy .action-button-meta-copy,
.action-button-inline-copy .marketplace-button-wallet,
.action-button-inline-copy #fight-status,
.action-button-inline-copy #refer-friend-status {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

.back-den-button-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.back-den-button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.95em;
}

.action-rail .main-button {
    background: linear-gradient(180deg, #611512, #320d0c);
    color: #f2e8e1;
    border: 1px solid #8f201c;
    text-shadow: none;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

#char-card-deck-button {
    background: linear-gradient(180deg, #611512, #320d0c);
    color: #f2e8e1;
    border: 1px solid #8f201c;
    text-shadow: none;
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.action-rail button:hover,
#profile-back-den-button:hover,
#marketplace-back-button:hover,
#cards-back-button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

#timeline-toggle-button.is-open,
#close-side-menu-button.is-open {
    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 171, 98, 0.22);
}

.action-drawer-panel {
    position: absolute;
    bottom: calc(100% + var(--action-rail-popover-gap));
    height: calc((var(--vh, 1vh) * 100) - var(--action-rail-bottom) - var(--action-rail-button-height) - var(--action-rail-popover-gap));
    padding: 16px;
    border-radius: 22px;
    border: 1px solid rgba(255, 170, 95, 0.2);
    background:
        linear-gradient(180deg, rgba(14, 12, 10, 0.96), rgba(8, 8, 8, 0.94)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 42%);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 40px rgba(0, 0, 0, 0.34);
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
}

.action-drawer-panel.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.action-rail-menu-cluster .action-drawer-panel {
    left: 0;
    width: 100%;
    transform-origin: bottom left;
}

.action-rail-right-cluster .action-drawer-panel {
    left: 0;
    width: 100%;
    transform-origin: bottom right;
}

.action-drawer-scroll {
    flex: 1 1 auto;
    min-height: 0;
    padding-right: 8px;
    scroll-padding-bottom: 0;
}

.action-drawer-panel-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(26px, 3.2vh, 38px);
    letter-spacing: 0.08em;
    text-align: center;
}

.action-drawer-panel-content {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    flex-direction: column;
}

.action-drawer-panel-content--menu {
    justify-content: space-between;
    gap: 16px;
}

.action-drawer-panel-content--timeline {
    overflow: hidden;
}

.timeline-menu-bottom-actions {
    margin-top: auto;
}

#marketplace-button {
    justify-content: center;
}

.marketplace-button-wallet {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    color: var(--hub-dim);
    font-size: inherit;
    letter-spacing: 0.14em;
    line-height: inherit;
    text-transform: uppercase;
}

.action-drawer-panel--timeline .panel-heading-row {
    justify-content: center;
}

.marketplace-button-gold-icon {
    width: clamp(14px, 1.5vh, 17px);
    height: clamp(14px, 1.5vh, 17px);
}

.info-column-panel,
.skills-panel,
.character-center-panel {
    display: flex;
    flex-direction: column;
}

.info-column-panel {
    justify-content: space-between;
}

.char-page .info-column-panel,
.char-page .skills-panel,
.char-page .character-center-panel {
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
}

.char-page .info-column-panel {
    position: relative;
    justify-content: flex-start;
    gap: clamp(16px, 2vh, 22px);
    width: min(100%, 360px);
    justify-self: end;
    padding-top: clamp(14px, 2vh, 20px);
    padding-right: 0;
    align-self: stretch;
    align-items: center;
}

.char-page .skills-panel {
    justify-content: center;
    width: min(100%, 430px);
    justify-self: start;
    padding-left: 0;
    align-self: stretch;
}

.info-column-panel .panel-subtitle {
    max-width: 28ch;
}

.char-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 12px;
}

.char-page .char-toolbar {
    position: static;
    width: min(100%, var(--char-level-ring-size));
    justify-content: center;
    margin: 0 auto;
    z-index: 2;
}

.char-page .identity-badge {
    margin-top: auto;
    margin-bottom: auto;
}

.char-skins-button {
    width: min(100%, var(--char-level-ring-size));
    justify-content: center;
    background:
        linear-gradient(180deg, rgba(109, 26, 19, 0.92), rgba(60, 17, 13, 0.94)),
        linear-gradient(135deg, rgba(255, 255, 255, 0.03), transparent 40%);
    box-shadow:
        0 16px 28px rgba(0, 0, 0, 0.22),
        0 0 18px rgba(255, 119, 46, 0.14);
}

.char-skins-button .back-den-button-content {
    justify-content: center;
}

#profile-back-den-button,
#marketplace-back-button,
#cards-back-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    min-height: var(--action-rail-side-icon-size);
    height: var(--action-rail-side-icon-size);
    font-size: clamp(15px, 1.8vh, 19px);
    max-width: 100%;
    color: var(--hub-text);
    background: var(--hub-black-button);
}

.char-page #profile-back-den-button.chapter-inline-back-button {
    position: fixed;
    top: clamp(18px, 2vh, 28px);
    left: clamp(18px, 2vw, 30px);
    z-index: 8;
    padding: 0 20px;
    min-height: var(--action-rail-side-icon-size);
    height: var(--action-rail-side-icon-size);
    border-radius: 18px;
    box-shadow: 0 18px 30px rgba(0, 0, 0, 0.34);
    backdrop-filter: blur(10px) saturate(1.04);
}

.character-center-panel {
    align-items: center;
    justify-content: center;
    padding-bottom: clamp(26px, 4vh, 40px);
}

.char-page .character-center-panel {
    padding: 0;
}

.char-page #character-cards-display {
    position: absolute;
    left: 50%;
    bottom: clamp(72px, 10vh, 118px);
    transform: translateX(-50%);
    width: min(104%, 720px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    z-index: 2;
}

.den-page .missions-panel {
    padding-top: 4px;
}

.den-page .missions-panel>.panel-title {
    display: none;
}

.char-page .identity-name {
    font-size: clamp(34px, 4.8vh, 52px);
}

.char-page .identity-record {
    font-size: clamp(16px, 2vh, 24px);
}

.char-page #den-cards-stack {
    position: relative;
    width: min(100%, 640px);
    height: clamp(250px, 34vh, 340px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.char-page #den-cards-stack .card {
    position: absolute;
    bottom: 0;
    width: clamp(150px, 16vw, 220px);
    max-height: 100%;
    border-radius: 14px;
    box-shadow:
        0 18px 26px rgba(0, 0, 0, 0.3),
        0 0 18px rgba(255, 123, 70, 0.14);
    cursor: pointer;
}

.char-page #den-cards-stack .card.card-slot-left {
    transform: translateX(-56%) translateY(-4%) rotate(-16deg);
}

.char-page #den-cards-stack .card.card-slot-center {
    transform: translateY(-10%) rotate(0deg);
    z-index: 2;
}

.char-page #den-cards-stack .card.card-slot-right {
    transform: translateX(56%) translateY(-4%) rotate(16deg);
}

.char-page #pick-cards-button,
.char-page #char-card-deck-button,
.char-page .cards-action-spacer {
    min-width: clamp(220px, 20vw, 320px);
    min-height: clamp(52px, 6.8vh, 74px);
}

.char-page .cards-action-spacer {
    visibility: hidden;
    pointer-events: none;
}

.skills-panel .panel-title {
    margin-bottom: 6px;
}

.char-page .skills-panel .panel-title {
    margin-bottom: 12px;
    text-align: center;
}

.char-page .skills-panel {
    align-self: stretch;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    max-height: 100%;
    overflow: hidden;
    scrollbar-width: none;
}

#player-stats-container {
    display: grid;
    gap: 14px;
}

.char-page #player-stats-container {
    align-content: center;
    gap: clamp(10px, 1.7vh, 16px);
    min-height: 0;
    overflow: hidden;
    scrollbar-width: none;
}

.char-page #player-stats-container.has-pending-stat-points {
    align-content: stretch;
}

.char-page .skills-panel::-webkit-scrollbar,
.char-page #player-stats-container::-webkit-scrollbar {
    display: none;
}

.pending-stat-points {
    display: block;
    margin: 0 0 6px;
    color: #ff7b60;
    font-size: clamp(13px, 1.45vh, 17px);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-align: center;
}

.pending-stat-points[hidden] {
    display: none;
}

.pending-stat-points.has-points {
    color: #ff7b60;
    text-shadow: 0 0 12px rgba(255, 123, 96, 0.18);
}

.skill-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(42px, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(30, 23, 18, 0.62), rgba(12, 11, 10, 0.34));
    border: none;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease;
}

.char-page .skill-row {
    gap: clamp(7px, 0.9vw, 10px);
    padding: clamp(11px, 1.8vh, 16px);
    border-radius: 18px;
}

.char-page .skill-badge {
    width: clamp(32px, 5.4vh, 42px);
    height: clamp(32px, 5.4vh, 42px);
    border-radius: 12px;
    font-size: clamp(14px, 2.2vh, 18px);
}

.char-page .skill-badge i {
    font-size: clamp(14px, 2.2vh, 18px);
}

.skill-row.skill-row-no-allocation {
    grid-template-columns: auto minmax(0, 1fr) minmax(42px, 1fr);
}

.skill-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.22);
}

.skill-row:focus-visible {
    outline: 2px solid rgba(255, 153, 85, 0.9);
    outline-offset: 2px;
}

.skill-badge {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    background: rgba(255, 104, 43, 0.12);
    color: #ffd6ad;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.05em;
}

.skill-badge i {
    font-size: 18px;
}

.skill-meta {
    min-width: 0;
}

.skill-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.skill-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(22px, 2.8vh, 30px);
    letter-spacing: 0.04em;
    line-height: 0.96;
}

.char-page .skill-name {
    font-size: clamp(18px, 2.7vh, 27px);
}

.skill-info-button {
    appearance: none;
    border: 0;
    padding: 6px;
    background: transparent;
    color: rgba(246, 237, 228, 0.52);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 999px;
    pointer-events: none;
}

.skill-info-button i {
    font-size: 18px;
}

@media (hover: none), (pointer: coarse) {
    .skill-info-button {
        width: 42px;
        height: 42px;
        padding: 8px;
    }
}

.skill-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 4vh, 44px);
    line-height: 0.9;
    width: 100%;
    justify-self: end;
    text-align: right;
}

.char-page .skill-value {
    font-size: clamp(24px, 3.5vh, 38px);
}

.skill-allocate-button {
    appearance: none;
    width: 42px;
    height: 42px;
    border: 0;
    padding: 0;
    background: transparent;
    color: #ff7b60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 140ms ease, color 140ms ease, opacity 140ms ease;
}

.char-page .skill-allocate-button {
    width: clamp(32px, 5.4vh, 42px);
    height: clamp(32px, 5.4vh, 42px);
}

.skill-allocate-button i {
    font-size: 28px;
}

.char-page .skill-allocate-button i {
    font-size: clamp(22px, 3.4vh, 28px);
}

.skill-allocate-button:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.04);
    color: #ff9d86;
}

.skill-allocate-button:disabled {
    opacity: 0.28;
    cursor: default;
}

.skill-meter {
    grid-column: 2 / span 3;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px;
}

.char-page .skill-meter {
    gap: 4px;
}

.skill-row.skill-row-no-allocation .skill-meter {
    grid-column: 2 / span 2;
}

.skill-meter-block {
    height: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
}

.char-page .skill-meter-block {
    height: clamp(5px, 1vh, 8px);
}

.skill-meter-block.active {
    background: linear-gradient(90deg, #c22f1f, #f07131 70%, #ffbc58);
    box-shadow: 0 0 10px rgba(255, 110, 44, 0.24);
}

.empty-state {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--hub-dim);
}

.quest-empty,
.timeline-empty {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--hub-dim);
    font-size: clamp(14px, 1.6vh, 18px);
}

#den-card-tooltip,
#xp-tooltip {
    position: absolute;
    z-index: 8;
    max-width: min(320px, 42vw);
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255, 163, 87, 0.22);
    background: rgba(11, 10, 9, 0.94);
    color: var(--hub-text);
    font-size: clamp(13px, 1.5vh, 16px);
    text-align: center;
    box-shadow: 0 16px 26px rgba(0, 0, 0, 0.28);
    transform: translateX(-50%);
    pointer-events: none;
}

#den-card-preview-overlay {
    position: fixed;
    inset: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(10px);
}

#den-card-preview-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: min(90vw, 520px);
}

#den-card-preview-image {
    width: min(72vw, 300px);
    max-height: 68vh;
    object-fit: contain;
}

#den-card-preview-description {
    padding: 12px 16px;
    border-radius: 18px;
    border: 1px solid rgba(255, 168, 92, 0.22);
    background: rgba(12, 11, 10, 0.92);
    color: var(--hub-text);
    text-align: center;
}

#den-card-preview-overlay.skill-preview-mode #den-card-preview-image {
    display: none;
}

#den-card-preview-overlay.skill-preview-mode #den-card-preview-description {
    width: min(90vw, 420px);
    padding: 18px 20px;
}

.skill-preview-card {
    display: grid;
    gap: 16px;
}

.skill-preview-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    justify-self: center;
}

.skill-preview-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 16px;
    background: rgba(255, 104, 43, 0.12);
    color: #ffd6ad;
    font-size: 24px;
}

.skill-preview-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(28px, 3.6vh, 38px);
    letter-spacing: 0.05em;
    line-height: 0.94;
    white-space: nowrap;
}

.skill-preview-impact-list {
    display: grid;
    gap: 8px;
}

.skill-preview-impact-item {
    color: var(--hub-text);
    font-size: clamp(15px, 1.8vh, 19px);
    line-height: 1.2;
}

#orientation-message {
    position: fixed;
    inset: 0;
    z-index: 20;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 18px;
    background: rgba(0, 0, 0, 0.94);
    color: var(--hub-text);
    text-align: center;
}

#orientation-message .orientation-icon {
    font-size: clamp(72px, 12vh, 112px);
    line-height: 1;
    color: #e8eaed;
}

#orientation-message .orientation-title {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(40px, 8vw, 58px);
    letter-spacing: 0.08em;
    line-height: 0.9;
    font-weight: 400;
}

#orientation-message p {
    margin: 0;
    font-size: clamp(18px, 2.4vh, 26px);
}

#logo {
    width: min(42vw, 260px);
    height: auto;
}

body.landscape-only-mobile::before {
    content: none !important;
    display: none !important;
}

body.landscape-only-mobile #game-container.redesign-page {
    display: block;
}

body.landscape-only-mobile #orientation-message {
    display: none;
    padding:
        max(24px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    box-sizing: border-box;
    background:
        radial-gradient(circle at 50% 22%, rgba(255, 154, 76, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(14, 11, 9, 0.94), rgba(7, 6, 6, 0.98));
}

body.landscape-only-mobile #orientation-message p {
    max-width: min(28ch, 100%);
    color: var(--hub-muted);
    font-size: clamp(16px, 2.2vh, 22px);
    line-height: 1.35;
}

@media (max-width: 1180px) and (orientation: portrait) and (hover: none),
(max-width: 1180px) and (orientation: portrait) and (pointer: coarse) {

    html,
    body.landscape-only-mobile {
        overflow: hidden;
    }

    body.landscape-only-mobile #game-container.redesign-page {
        display: none !important;
    }

    body.landscape-only-mobile #orientation-message {
        display: flex !important;
    }
}

@media (max-width: 1180px) {
    .den-shell {
        grid-template-columns: minmax(220px, 0.9fr) minmax(0, 2fr);
        gap: 16px;
    }

    .char-shell {
        grid-template-columns: minmax(210px, 0.82fr) minmax(360px, 1.12fr) minmax(230px, 0.88fr);
        gap: 16px;
    }

    #quest-board-list {
        grid-template-columns: 1fr;
    }

    .battle-pass-rewards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    :root {
        --action-rail-gap: 10px;
        --action-rail-side-icon-size: clamp(54px, 10vw, 72px);
        --action-rail-secondary-width: clamp(200px, 28vw, 250px);
        --char-level-ring-size: clamp(148px, 18vw, 188px);
    }

    .hub-stage {
        padding-bottom: 104px;
    }

    .action-rail {
        gap: var(--action-rail-gap);
    }

    .action-rail-side {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--action-rail-gap);
    }

    .action-rail-menu-cluster {
        grid-template-columns: var(--action-rail-side-icon-size) minmax(0, 1fr);
        gap: var(--action-rail-gap);
    }

    .action-rail-right-cluster {
        grid-template-columns: minmax(0, 1fr) var(--action-rail-side-icon-size);
        gap: var(--action-rail-gap);
    }

    .action-rail button {
        min-height: 58px;
        font-size: clamp(15px, 2.4vw, 20px);
    }

    .action-button-title-row {
        gap: 8px;
    }

    .battle-pass-rewards {
        grid-template-columns: 1fr;
    }

    .char-shell {
        grid-template-columns: minmax(180px, 0.8fr) minmax(280px, 1.12fr) minmax(210px, 0.84fr);
    }

    .char-page #den-cards-stack {
        width: min(96%, 430px);
    }

    .char-page #den-cards-stack .card {
        width: clamp(110px, 16vw, 154px);
    }

    .char-page .hub-stage {
        padding-bottom: clamp(18px, 4vh, 32px);
    }

    .char-page .char-shell {
        grid-template-columns: minmax(156px, 0.76fr) minmax(0, 1.02fr) minmax(196px, 0.94fr);
        gap: 12px;
    }

    .char-page .info-column-panel {
        width: min(100%, 220px);
        gap: 12px;
        padding-top: 0;
    }

    .char-page .skills-panel {
        width: min(100%, 276px);
        gap: 0;
    }

    .char-page .character-stage {
        padding: clamp(26px, 5vh, 40px) 0 clamp(124px, 24vh, 170px);
    }

    .char-page .character-sprite {
        width: clamp(210px, 32vw, 300px);
        max-height: calc(100vh - 148px);
    }

    .char-page .identity-name {
        font-size: clamp(30px, 4.4vw, 40px);
    }

    .char-page .identity-record {
        font-size: clamp(15px, 2vw, 18px);
    }

    .char-page #character-cards-display {
        bottom: clamp(12px, 3.4vh, 28px);
        width: min(100%, 470px);
        gap: 12px;
    }

    .char-page #char-card-deck-button,
    .char-page #pick-cards-button,
    .char-page #char-skins-button,
    .char-page .cards-action-spacer {
        min-width: clamp(180px, 30vw, 260px);
        min-height: 48px;
    }

    .char-page .pending-stat-points {
        margin: 0 0 2px;
    }

    .skill-row {
        gap: 10px;
        padding: 12px;
        border-radius: 18px;
        grid-template-columns: 36px minmax(0, 1fr) auto 36px;
    }

    .skill-row.skill-row-no-allocation {
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }

    .skill-badge {
        width: 36px;
        height: 36px;
        border-radius: 12px;
    }

    .skill-badge i {
        font-size: 16px;
    }

    .skill-name {
        font-size: clamp(18px, 2.5vw, 24px);
    }

    .skill-copy {
        font-size: clamp(11px, 1.55vw, 13px);
    }

    .skill-value {
        font-size: clamp(24px, 3.6vw, 32px);
    }

    .skill-meter {
        gap: 4px;
    }

    .skill-meter-block {
        height: 7px;
    }
}

@media (max-width: 900px) and (orientation: landscape) {
    :root {
        --hub-section-gap: 9px;
        --den-rail-clearance: 40px;
        --action-rail-gap: 6px;
        --action-rail-bottom: 8px;
        --action-rail-button-height: 40px;
        --action-rail-side-icon-size: 40px;
        --action-rail-popover-gap: 6px;
        --action-rail-secondary-width: clamp(132px, 22vw, 176px);
        --char-level-ring-size: clamp(126px, 17vw, 160px);
    }

    #game-container.redesign-page .page-backdrop {
        filter: blur(3px) saturate(0.94) brightness(0.92);
        transform: scale(1.02);
    }

    .den-page .hub-stage {
        padding: 8px 10px 4px;
    }

    .den-page::after {
        height: calc(var(--den-rail-clearance) + 8px);
    }

    .den-shell {
        grid-template-columns: minmax(138px, 0.62fr) minmax(0, 2.38fr);
        gap: var(--hub-section-gap);
    }

    .den-page .den-shell {
        height: calc(100% - var(--den-rail-clearance));
    }

    .character-column,
    .battle-and-quests,
    .timeline-panel,
    .missions-panel,
    .panel-scroll-shell,
    .panel-scroll,
    .missions-scroll-content,
    .timeline-scroll-content {
        min-width: 0;
    }

    .den-page .character-stage {
        padding: 0 0 18px;
    }

    .den-page .character-sprite {
        width: clamp(148px, 18vw, 190px);
        max-height: calc(100vh - 108px);
    }

    #game-container.chapters-page.is-journey-active .character-sprite {
        max-height: none;
    }

    .den-page .identity-badge {
        bottom: 12px;
    }

    .level-ring {
        width: clamp(112px, 13vw, 136px);
    }

    .xp-arc-track,
    .xp-arc-progress {
        stroke-width: 8;
    }

    .level-ring-label {
        font-size: clamp(9px, 1.1vh, 11px);
    }

    .level-ring-value {
        font-size: clamp(42px, 6.2vh, 60px);
    }

    .level-ring-copy {
        font-size: clamp(8px, 1vh, 10px);
    }

    .den-page .panel-heading-row .panel-title,
    .den-page .battle-pass-panel .panel-title,
    .den-page .missions-panel .panel-title,
    .den-page .timeline-panel .panel-title {
        font-size: clamp(17px, 2.8vw, 24px);
    }

    .den-page .panel-heading-row {
        margin-bottom: 4px;
    }

    .den-page .panel-heading-row--section {
        margin: 3px 0 6px;
    }

    .panel-section-copy {
        margin-bottom: 6px;
        font-size: clamp(10px, 1.45vw, 12px);
        line-height: 1.18;
    }

    .missions-scroll-content {
        gap: 6px;
    }

    .battle-pass-meter-shell {
        --battle-pass-side-gutter-start: clamp(44px, 4vw, 60px);
        --battle-pass-side-gutter-end: clamp(88px, 8vw, 120px);
        --battle-pass-meter-height: 16px;
        padding-bottom: clamp(34px, 4.6vh, 50px);
    }

    .battle-pass-reward {
        gap: 8px;
        padding: 8px 12px;
        font-size: clamp(13px, 1.45vh, 17px);
    }

    .battle-pass-reward img {
        width: 28px;
        height: 28px;
    }

    .battle-pass-reward-value {
        font-size: inherit;
    }

    .battle-pass-marker-copy {
        font-size: clamp(11px, 1.25vh, 14px);
    }

    .battle-pass-meter {
        height: 16px;
    }

    .panel-scroll {
        padding-right: 6px;
        scroll-padding-bottom: 18px;
    }

    .den-page .missions-panel .panel-scroll-shell::after,
    .den-page .timeline-panel .panel-scroll-shell::after {
        height: 18px;
    }

    #quest-board-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .den-page #quest-board-list {
        padding-bottom: 16px;
    }

    .quest-item {
        gap: 5px;
        padding: 9px 10px 8px;
        border-radius: 14px;
    }

    .quest-item-top {
        gap: 4px;
    }

    .quest-item-main-row {
        grid-template-columns: minmax(0, 1fr) minmax(154px, 0.92fr);
        gap: 8px;
    }

    .quest-item-copy {
        gap: 4px;
    }

    .quest-item-actions {
        gap: 5px;
        min-width: 0;
    }

    .quest-item-label {
        font-size: clamp(14px, 1.7vh, 17px);
    }

    .quest-description {
        font-size: clamp(9px, 1.1vh, 11px);
        line-height: 1.16;
    }

    .quest-progress-track {
        min-height: 14px;
    }

    .quest-progress-label {
        font-size: clamp(7px, 0.82vh, 9px);
    }

    .quest-rewards {
        flex-wrap: nowrap;
        gap: 5px;
        max-width: none;
        overflow: visible;
        white-space: normal;
    }

    .quest-reward-chip {
        gap: 5px;
        padding: 5px 8px;
        font-size: clamp(8px, 0.92vh, 10px);
        white-space: nowrap;
    }

    .quest-reward-chip img {
        width: 14px;
        height: 14px;
    }

    .quest-state-pill {
        min-width: 0;
        min-height: 0;
        padding: 5px 8px;
        font-size: clamp(8px, 0.95vh, 10px);
    }

    #timeline-container {
        gap: 6px;
    }

    .event-item {
        grid-template-columns: 30px 1fr;
        gap: 1px 7px;
        padding: 6px 7px 6px 6px;
    }

    .event-icon {
        width: 30px;
        height: 30px;
    }

    .event-icon img {
        width: 16px;
        height: 16px;
    }

    .event-icon i {
        font-size: 16px;
    }

    .event-time {
        font-size: clamp(5px, 0.62vh, 6px);
    }

    .event-message {
        font-size: clamp(9px, 1.02vh, 11px);
        line-height: 1.04;
    }

    .action-rail {
        grid-template-columns: auto minmax(0, 1fr) auto;
        left: 10px;
        right: 10px;
        gap: var(--action-rail-gap);
    }

    .action-rail-side {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--action-rail-gap);
    }

    .action-rail-menu-cluster {
        grid-template-columns: var(--action-rail-side-icon-size) minmax(0, 1fr);
        gap: var(--action-rail-gap);
    }

    .action-rail-right-cluster {
        grid-template-columns: minmax(0, 1fr) var(--action-rail-side-icon-size);
        gap: var(--action-rail-gap);
    }

    .action-rail .main-button {
        grid-column: 2;
        width: 100%;
        text-align: center;
    }

    .action-rail button {
        min-height: var(--action-rail-button-height);
        padding: 4px 8px;
        font-size: clamp(11px, 1.18vh, 14px);
    }

    .action-button-inline-copy {
        gap: 6px;
    }

    .action-button-meta-copy {
        gap: 6px;
    }

    .action-button-title-row {
        gap: 6px;
        flex: 0 1 auto;
        white-space: nowrap;
    }

    #smell-blood-button,
    #refer-friend-button {
        width: 100%;
        font-size: inherit;
    }

    .action-button-copy,
    .marketplace-button-copy,
    .action-button-title,
    .action-button-subtitle,
    #fight-status,
    #refer-friend-status,
    .marketplace-button-wallet {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .action-button-subtitle,
    #fight-status,
    #refer-friend-status,
    .marketplace-button-wallet {
        font-size: inherit;
        letter-spacing: 0.06em;
        display: inline-flex;
        align-items: flex-end;
    }

    .menu-toggle-icon {
        font-size: clamp(12px, 1.35vh, 16px);
    }

    .marketplace-button-gold-icon {
        width: 8px;
        height: 8px;
    }

    .action-drawer-panel {
        padding: 12px;
        border-radius: 18px;
    }

    #level-up-modal {
        display: none !important;
    }

    .action-drawer-panel-title {
        font-size: clamp(20px, 2.8vw, 26px);
    }

    .timeline-menu-top-actions button,
    .timeline-menu-bottom-actions button,
    .timeline-menu-settings-actions button {
        padding: 10px 12px;
        font-size: clamp(12px, 1.45vw, 14px);
    }

    .char-page .hub-stage {
        padding: 10px 10px 12px;
    }

    .char-page .char-shell {
        grid-template-columns: minmax(148px, 0.72fr) minmax(0, 0.98fr) minmax(188px, 0.94fr);
        gap: 10px;
        align-items: stretch;
    }

    .char-page .info-column-panel,
    .char-page .skills-panel,
    .char-page .character-center-panel {
        min-width: 0;
    }

    .char-page .info-column-panel {
        width: min(100%, 190px);
        gap: 10px;
        padding-top: 0;
    }

    .char-page .skills-panel {
        width: min(100%, 236px);
        gap: 6px;
    }

    .char-page .character-stage {
        padding: 18px 0 108px;
    }

    .char-page #character-sprite-container {
        align-items: flex-end;
    }

    .char-page .character-sprite {
        width: clamp(180px, 31vw, 248px);
        max-height: calc(100vh - 118px);
    }

    .char-page .char-toolbar {
        width: min(100%, var(--char-level-ring-size));
        justify-content: center;
    }

    #profile-back-den-button {
        padding: 0 20px;
        font-size: clamp(15px, 1.8vh, 19px);
    }

    .back-den-button-content {
        gap: 7px;
    }

    .char-page .identity-badge {
        gap: 10px;
        width: 100%;
    }

    .char-page .identity-name {
        font-size: clamp(26px, 4vw, 36px);
    }

    .char-page .identity-record {
        font-size: clamp(12px, 1.6vw, 15px);
    }

    .char-page #character-cards-display {
        bottom: 10px;
        width: min(100%, 400px);
        gap: 10px;
    }

    .char-page #den-cards-stack {
        width: min(100%, 330px);
        height: clamp(146px, 34vh, 200px);
    }

    .char-page #den-cards-stack .card {
        width: clamp(84px, 14vw, 118px);
    }

    .char-page #den-cards-stack .card.card-slot-left {
        transform: translateX(-52%) translateY(-2%) rotate(-15deg);
    }

    .char-page #den-cards-stack .card.card-slot-center {
        transform: translateY(-8%) rotate(0deg);
    }

    .char-page #den-cards-stack .card.card-slot-right {
        transform: translateX(52%) translateY(-2%) rotate(15deg);
    }

    .char-page #pick-cards-button,
    .char-page #char-card-deck-button,
    .char-page #char-skins-button,
    .char-page .cards-action-spacer {
        min-width: 0;
        min-height: 40px;
        padding: 8px 14px;
        font-size: clamp(11px, 1.45vw, 14px);
    }

    #player-stats-container {
        gap: 10px;
        margin-top: 0;
    }

    .pending-stat-points {
        margin: 0 0 8px;
        border-radius: 12px;
        font-size: clamp(10px, 1.2vw, 12px);
    }

    .skill-row {
        gap: 8px;
        padding: 10px;
        border-radius: 16px;
        grid-template-columns: 32px minmax(0, 1fr) auto 32px;
    }

    .skill-row.skill-row-no-allocation {
        grid-template-columns: 32px minmax(0, 1fr) auto;
    }

    .skill-badge {
        width: 32px;
        height: 32px;
        border-radius: 10px;
        font-size: 14px;
    }

    .skill-badge i {
        font-size: 14px;
    }

    .skill-name {
        font-size: clamp(15px, 2vw, 20px);
    }

    .skill-copy {
        font-size: clamp(9px, 1.15vw, 11px);
        line-height: 1.14;
    }

    .skill-value {
        font-size: clamp(20px, 2.8vw, 28px);
    }

    .skill-allocate-button {
        width: 32px;
        height: 32px;
    }

    .skill-allocate-button i {
        font-size: 22px;
    }

    .skill-meter {
        gap: 3px;
    }

    .skill-meter-block {
        height: 6px;
    }
}

@media (max-width: 760px) and (orientation: landscape) {
    :root {
        --hub-section-gap: 8px;
        --den-rail-clearance: 36px;
        --action-rail-gap: 4px;
        --action-rail-button-height: 36px;
        --action-rail-side-icon-size: 36px;
        --action-rail-secondary-width: clamp(112px, 22vw, 144px);
        --char-level-ring-size: clamp(104px, 15vw, 138px);
    }

    #game-container.redesign-page .page-backdrop {
        filter: blur(2px) saturate(0.95) brightness(0.93);
        transform: scale(1.015);
    }

    .den-page .hub-stage {
        padding: 8px 8px 4px;
    }

    .den-shell {
        grid-template-columns: minmax(138px, 0.68fr) minmax(0, 2fr);
    }

    .den-page .character-sprite {
        width: clamp(136px, 21vw, 170px);
    }

    .level-ring {
        width: clamp(102px, 12vw, 124px);
    }

    .den-page .panel-heading-row .panel-title,
    .den-page .battle-pass-panel .panel-title,
    .den-page .missions-panel .panel-title,
    .den-page .timeline-panel .panel-title {
        font-size: clamp(16px, 3vw, 22px);
    }

    #quest-board-list {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .event-item {
        grid-template-columns: 30px 1fr;
        gap: 2px 7px;
        padding: 6px 8px 6px 6px;
    }

    .event-icon {
        width: 30px;
        height: 30px;
    }

    .quest-item-label {
        font-size: clamp(14px, 2.5vw, 18px);
    }

    .den-page #quest-board-list {
        padding-bottom: 14px;
    }

    .action-rail {
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--action-rail-gap);
    }

    .action-rail-side {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--action-rail-gap);
    }

    .action-rail-menu-cluster {
        grid-template-columns: var(--action-rail-side-icon-size) minmax(0, 1fr);
        gap: var(--action-rail-gap);
    }

    .action-rail-right-cluster {
        grid-template-columns: minmax(0, 1fr) var(--action-rail-side-icon-size);
        gap: var(--action-rail-gap);
    }

    .action-rail button {
        min-height: var(--action-rail-button-height);
        padding: 0 6px;
        font-size: clamp(7px, 0.82vh, 9px);
    }

    .action-button-inline-copy {
        gap: 5px;
    }

    .action-button-meta-copy {
        gap: 5px;
    }

    .action-button-title-row {
        gap: 6px;
    }

    .action-button-subtitle,
    #fight-status,
    #refer-friend-status,
    .marketplace-button-wallet {
        font-size: inherit;
    }

    .char-page .char-shell {
        grid-template-columns: minmax(132px, 0.68fr) minmax(0, 0.94fr) minmax(174px, 0.92fr);
        gap: 8px;
    }

    .char-page .info-column-panel {
        width: min(100%, 170px);
        gap: 8px;
    }

    .char-page .skills-panel {
        width: min(100%, 214px);
        gap: 5px;
        justify-content: flex-start;
    }

    .char-page .character-stage {
        padding: 14px 0 90px;
    }

    .char-page .character-sprite {
        width: clamp(156px, 30vw, 210px);
        max-height: calc(100vh - 102px);
    }

    #profile-back-den-button {
        min-height: var(--action-rail-side-icon-size);
        padding: 0 20px;
        font-size: clamp(15px, 1.8vh, 19px);
    }

    .back-den-button-content {
        gap: 6px;
    }

    .char-page .identity-name {
        font-size: clamp(22px, 3.6vw, 30px);
    }

    .char-page .identity-record {
        font-size: clamp(10px, 1.35vw, 13px);
    }

    .char-page #character-cards-display {
        bottom: 8px;
        width: min(100%, 320px);
        gap: 8px;
    }

    .char-page #den-cards-stack {
        width: min(100%, 270px);
        height: clamp(128px, 31vh, 168px);
    }

    .char-page #den-cards-stack .card {
        width: clamp(72px, 13vw, 98px);
    }

    .char-page #pick-cards-button,
    .char-page #char-card-deck-button,
    .char-page #char-skins-button,
    .char-page .cards-action-spacer {
        min-height: 34px;
        padding: 7px 10px;
        font-size: clamp(9px, 1.2vw, 11px);
    }

    .char-page .skills-panel .panel-title {
        margin-bottom: 3px;
        font-size: clamp(16px, 2.4vw, 20px);
        text-align: center;
    }

    #player-stats-container {
        gap: 6px;
        margin-top: 0;
    }

    .pending-stat-points {
        margin: 0 0 6px;
        border-radius: 10px;
        font-size: clamp(9px, 1.05vw, 11px);
    }

    .skill-row {
        gap: 6px;
        padding: 7px 8px;
        border-radius: 14px;
        grid-template-columns: 28px minmax(0, 1fr) auto 28px;
    }

    .skill-badge {
        width: 28px;
        height: 28px;
        border-radius: 9px;
        font-size: 12px;
    }

    .skill-badge i {
        font-size: 12px;
    }

    .skill-name {
        font-size: clamp(13px, 1.8vw, 17px);
    }

    .skill-copy {
        font-size: clamp(8px, 1vw, 10px);
    }

    .skill-value {
        font-size: clamp(18px, 2.5vw, 24px);
    }

    .skill-allocate-button {
        width: 28px;
        height: 28px;
    }

    .skill-allocate-button i {
        font-size: 19px;
    }

    .skill-meter-block {
        height: 5px;
    }
}

body.compact-landscape-handset {
    --hub-section-gap: 9px;
    --den-rail-clearance: 40px;
    --action-rail-gap: 6px;
    --action-rail-bottom: max(10px, env(safe-area-inset-bottom));
    --action-rail-button-height: 40px;
    --action-rail-side-icon-size: 40px;
    --action-rail-popover-gap: 6px;
    --action-rail-secondary-width: clamp(132px, 22vw, 176px);
    --char-level-ring-size: clamp(126px, 17vw, 160px);
}

body.compact-landscape-handset .action-rail {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    gap: var(--action-rail-gap);
}

body.compact-landscape-handset .action-rail button {
    min-height: var(--action-rail-button-height);
    padding: 6px 10px;
    font-size: clamp(12px, 1.32vh, 15px);
    line-height: 1;
}

body.compact-landscape-handset .action-button-inline-copy {
    align-items: center;
    gap: 6px;
}

body.compact-landscape-handset .action-button-meta-copy {
    align-items: center;
    gap: 5px;
}

body.compact-landscape-handset .action-button-title-row {
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    white-space: nowrap;
}

body.compact-landscape-handset #character-button,
body.compact-landscape-handset #marketplace-button {
    font-size: clamp(15px, 2vh, 21px) !important;
}

body.compact-landscape-handset #character-button .utility-button-content,
body.compact-landscape-handset #character-button .action-button-title-row,
body.compact-landscape-handset #character-button .action-button-copy,
body.compact-landscape-handset #marketplace-button .utility-button-content,
body.compact-landscape-handset #marketplace-button .action-button-inline-copy,
body.compact-landscape-handset #marketplace-button .action-button-title-row,
body.compact-landscape-handset #marketplace-button .marketplace-button-copy,
body.compact-landscape-handset #marketplace-button .action-button-meta-copy,
body.compact-landscape-handset #marketplace-button .marketplace-button-wallet,
body.compact-landscape-handset #marketplace-button .marketplace-button-gold-value {
    font-size: inherit !important;
}

body.compact-landscape-handset #marketplace-button .action-button-meta-copy,
body.compact-landscape-handset #marketplace-button .marketplace-button-wallet {
    align-items: center;
}

body.compact-landscape-handset #game-container.den-home-layout #character-button,
body.compact-landscape-handset #game-container.den-home-layout #quest-controls #marketplace-button,
body.compact-landscape-handset #game-container.den-home-layout #timeline-controls #smell-blood-button,
body.compact-landscape-handset #game-container.den-home-layout #timeline-controls #refer-friend-button {
    font-size: clamp(15px, 2vh, 21px) !important;
}

body.compact-landscape-handset #game-container.den-home-layout #character-button .action-button-copy,
body.compact-landscape-handset #game-container.den-home-layout #character-button .action-button-title,
body.compact-landscape-handset #game-container.den-home-layout #quest-controls #marketplace-button .marketplace-button-copy,
body.compact-landscape-handset #game-container.den-home-layout #quest-controls #marketplace-button .marketplace-button-wallet,
body.compact-landscape-handset #game-container.den-home-layout #timeline-controls #smell-blood-button #fight-status,
body.compact-landscape-handset #game-container.den-home-layout #timeline-controls #refer-friend-button #refer-friend-status {
    font-size: inherit !important;
}

body.compact-landscape-handset #smell-blood-button,
body.compact-landscape-handset #refer-friend-button {
    width: 100%;
    font-size: inherit;
}

body.compact-landscape-handset .action-button-copy,
body.compact-landscape-handset .marketplace-button-copy,
body.compact-landscape-handset .action-button-title,
body.compact-landscape-handset .action-button-subtitle,
body.compact-landscape-handset #fight-status,
body.compact-landscape-handset #refer-friend-status,
body.compact-landscape-handset .marketplace-button-wallet {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.compact-landscape-handset .action-button-subtitle,
body.compact-landscape-handset #fight-status,
body.compact-landscape-handset #refer-friend-status,
body.compact-landscape-handset .marketplace-button-wallet {
    font-size: inherit;
    letter-spacing: 0.06em;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-start;
}

body.compact-landscape-handset .menu-toggle-icon {
    font-size: clamp(16px, 1.7vh, 20px);
}

body.compact-landscape-handset .marketplace-button-gold-icon {
    width: 9px;
    height: 9px;
}

body.compact-landscape-handset .action-drawer-panel {
    padding: 12px;
    border-radius: 18px;
}

body.compact-landscape-handset .action-drawer-panel-title {
    font-size: clamp(20px, 2.4vw, 26px);
}

body.compact-landscape-handset .timeline-menu-top-actions button,
body.compact-landscape-handset .timeline-menu-bottom-actions button,
body.compact-landscape-handset .timeline-menu-settings-actions button {
    padding: 10px 12px;
    font-size: clamp(14px, 1.55vw, 17px);
}

body.compact-landscape-handset #profile-back-den-button,
body.compact-landscape-handset #marketplace-back-button,
body.compact-landscape-handset #cards-back-button {
    padding: 0 20px;
    min-height: var(--action-rail-side-icon-size);
    height: var(--action-rail-side-icon-size);
    font-size: clamp(15px, 1.8vh, 19px);
}

body.compact-landscape-handset .back-den-button-content {
    gap: 6px;
    flex-wrap: nowrap;
    white-space: nowrap;
}

body.compact-landscape-handset .den-page .hub-stage {
    padding: 10px 12px 6px;
}

body.compact-landscape-handset .den-page::after {
    height: calc(var(--den-rail-clearance) + 8px);
}

body.compact-landscape-handset .den-shell {
    grid-template-columns: minmax(138px, 0.62fr) minmax(0, 2.38fr);
    gap: var(--hub-section-gap);
}

body.compact-landscape-handset .den-page .den-shell {
    height: calc(100% - var(--den-rail-clearance));
}

body.compact-landscape-handset .den-page .character-stage {
    padding: 0 0 18px;
}

body.compact-landscape-handset .den-page .character-sprite {
    width: clamp(148px, 18vw, 190px);
    max-height: calc(100vh - 108px);
}

body.compact-landscape-handset #game-container.chapters-page.is-journey-active .character-sprite {
    max-height: none;
}

body.compact-landscape-handset .den-page .identity-badge {
    bottom: 12px;
}

body.compact-landscape-handset .den-page .action-rail button {
    padding: 4px 8px;
    font-size: clamp(14px, 1.48vh, 17px);
}

body.compact-landscape-handset .den-page .missions-panel .panel-scroll-shell::after,
body.compact-landscape-handset .den-page .timeline-panel .panel-scroll-shell::after {
    height: 18px;
}

body.compact-landscape-handset .den-page .panel-scroll {
    padding-right: 6px;
    scroll-padding-bottom: 18px;
}

body.compact-landscape-handset .den-page #quest-board-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-bottom: 16px;
}

body.compact-landscape-handset .level-ring {
    width: clamp(112px, 13vw, 136px);
}

body.compact-landscape-handset .xp-arc-track,
body.compact-landscape-handset .xp-arc-progress {
    stroke-width: 8;
}

body.compact-landscape-handset .den-page .panel-heading-row .panel-title,
body.compact-landscape-handset .den-page .battle-pass-panel .panel-title,
body.compact-landscape-handset .den-page .missions-panel .panel-title,
body.compact-landscape-handset .den-page .timeline-panel .panel-title {
    font-size: clamp(18px, 2.4vw, 26px);
}

body.compact-landscape-handset .den-page .panel-heading-row {
    margin-bottom: 4px;
}

body.compact-landscape-handset .den-page .panel-heading-row--section {
    margin: 4px 0 8px;
}

body.compact-landscape-handset .den-page .panel-section-copy {
    margin-bottom: 6px;
    font-size: clamp(10px, 1.45vw, 12px);
    line-height: 1.18;
}

body.compact-landscape-handset .den-page .battle-pass-meter-shell {
    --battle-pass-side-gutter-start: clamp(44px, 4vw, 60px);
    --battle-pass-side-gutter-end: clamp(88px, 8vw, 120px);
    --battle-pass-meter-height: 16px;
    padding-bottom: clamp(34px, 4.6vh, 50px);
}

body.compact-landscape-handset .den-page .battle-pass-reward {
    gap: 8px;
    padding: 8px 12px;
    font-size: clamp(13px, 1.45vh, 17px);
}

body.compact-landscape-handset .den-page .battle-pass-reward img {
    width: 28px;
    height: 28px;
}

body.compact-landscape-handset .den-page .battle-pass-marker-copy {
    font-size: clamp(11px, 1.25vh, 14px);
}

body.compact-landscape-handset .den-page .quest-item {
    gap: 5px;
    padding: 9px 10px 8px;
    border-radius: 14px;
}

body.compact-landscape-handset .den-page .quest-item-top {
    gap: 4px;
}

body.compact-landscape-handset .den-page .quest-item-main-row {
    grid-template-columns: minmax(0, 1fr) minmax(154px, 0.92fr);
    gap: 8px;
}

body.compact-landscape-handset .den-page .quest-item-copy {
    gap: 4px;
}

body.compact-landscape-handset .den-page .quest-item-actions {
    gap: 5px;
    min-width: 0;
}

body.compact-landscape-handset .den-page .quest-item-label {
    font-size: clamp(14px, 1.45vh, 18px);
}

body.compact-landscape-handset .den-page .quest-description {
    font-size: clamp(9px, 1.1vh, 11px);
    line-height: 1.16;
}

body.compact-landscape-handset .den-page .quest-progress-track {
    min-height: 14px;
}

body.compact-landscape-handset .den-page .quest-progress-label {
    font-size: clamp(7px, 0.82vh, 9px);
}

body.compact-landscape-handset .den-page .quest-rewards {
    gap: 5px;
    max-width: none;
    overflow: visible;
    white-space: normal;
}

body.compact-landscape-handset .den-page .quest-reward-chip {
    gap: 5px;
    padding: 5px 8px;
    font-size: clamp(8px, 0.92vh, 10px);
}

body.compact-landscape-handset .den-page .quest-reward-chip img {
    width: 14px;
    height: 14px;
}

body.compact-landscape-handset .den-page .quest-state-pill {
    min-width: 0;
    min-height: 0;
    padding: 5px 8px;
    font-size: clamp(8px, 0.95vh, 10px);
}

body.compact-landscape-handset .char-page .hub-stage {
    padding: 12px 12px 14px;
}

body.compact-landscape-handset .char-page .char-shell {
    grid-template-columns: minmax(172px, 0.74fr) minmax(0, 1.02fr) minmax(224px, 1fr);
    gap: 12px;
    align-items: stretch;
}

body.compact-landscape-handset .char-page .info-column-panel,
body.compact-landscape-handset .char-page .skills-panel,
body.compact-landscape-handset .char-page .character-center-panel {
    min-width: 0;
}

body.compact-landscape-handset .char-page .info-column-panel {
    width: min(100%, 198px);
    gap: 10px;
    padding-top: 0;
}

body.compact-landscape-handset .char-page .skills-panel {
    width: min(100%, 264px);
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

body.compact-landscape-handset .char-page:not(.skins-page) .character-stage {
    height: 100%;
    padding: 80px 0 110px;
    overflow: visible;
}

body.compact-landscape-handset .char-page:not(.skins-page) #character-sprite-container {
    align-items: flex-end;
    height: 100%;
}

body.compact-landscape-handset .char-page:not(.skins-page) .character-sprite {
    width: clamp(174px, 22vw, 226px);
    max-height: calc((var(--vh, 1vh) * 100) - 126px);
}

body.compact-landscape-handset .char-page .char-toolbar {
    width: min(100%, var(--char-level-ring-size));
    justify-content: center;
}

body.compact-landscape-handset .char-page .identity-badge {
    gap: 10px;
    width: 100%;
}

body.compact-landscape-handset .char-page .level-ring {
    width: clamp(148px, 18vw, 188px);
}

body.compact-landscape-handset .char-page .identity-name {
    font-size: clamp(28px, 3.4vw, 36px);
}

body.compact-landscape-handset .char-page .identity-record {
    font-size: clamp(12px, 1.45vw, 15px);
}

body.compact-landscape-handset .char-page #character-cards-display {
    bottom: 6px;
    width: min(100%, 420px);
    gap: 10px;
}

body.compact-landscape-handset .char-page #den-cards-stack {
    width: min(100%, 360px);
    height: clamp(150px, 26vh, 196px);
}

body.compact-landscape-handset .char-page #den-cards-stack .card {
    width: clamp(92px, 12.8vw, 124px);
}

body.compact-landscape-handset .char-page #den-cards-stack .card.card-slot-left {
    transform: translateX(-52%) translateY(-2%) rotate(-15deg);
}

body.compact-landscape-handset .char-page #den-cards-stack .card.card-slot-center {
    transform: translateY(-8%) rotate(0deg);
}

body.compact-landscape-handset .char-page #den-cards-stack .card.card-slot-right {
    transform: translateX(52%) translateY(-2%) rotate(15deg);
}

body.compact-landscape-handset .char-page #pick-cards-button,
body.compact-landscape-handset .char-page #char-card-deck-button,
body.compact-landscape-handset .char-page #char-skins-button,
body.compact-landscape-handset .char-page .cards-action-spacer {
    min-width: 0;
    min-height: 42px;
    padding: 8px 14px;
    font-size: clamp(10px, 1.15vw, 13px);
}

body.compact-landscape-handset .char-page #player-stats-container {
    flex: 1 1 auto;
    min-height: 0;
    gap: 8px;
    margin-top: 0;
    overflow: hidden;
    padding-right: 0;
    scrollbar-width: none;
}

body.compact-landscape-handset .char-page .pending-stat-points {
    padding: 2px 6px;
    border-radius: 12px;
    font-size: clamp(10px, 1vw, 12px);
    text-align: center;
}

body.compact-landscape-handset .char-page .skill-row {
    gap: 8px;
    padding: 8px 10px;
    border-radius: 16px;
    grid-template-columns: 32px minmax(0, 1fr) auto 32px;
}

body.compact-landscape-handset .char-page .skill-row.skill-row-no-allocation {
    grid-template-columns: 32px minmax(0, 1fr) auto;
}

body.compact-landscape-handset .char-page .skill-badge {
    width: 32px;
    height: 32px;
    border-radius: 10px;
}

body.compact-landscape-handset .char-page .skill-badge i {
    font-size: 14px;
}

body.compact-landscape-handset .char-page .skill-name {
    font-size: clamp(16px, 1.85vw, 21px);
}

body.compact-landscape-handset .char-page .skill-copy {
    font-size: clamp(9px, 1vw, 12px);
    line-height: 1.14;
}

body.compact-landscape-handset .char-page .skill-value {
    font-size: clamp(20px, 2.4vw, 28px);
}

body.compact-landscape-handset .char-page .skill-allocate-button {
    width: 32px;
    height: 32px;
}

body.compact-landscape-handset .char-page .skill-allocate-button i {
    font-size: 22px;
}

body.compact-landscape-handset .char-page .skill-meter {
    gap: 3px;
}

body.compact-landscape-handset .char-page .skill-meter-block {
    height: 6px;
}

#skins-marketplace-button,
#skins-apply-button {
    appearance: none;
    border: 1px solid rgba(255, 171, 98, 0.26);
    border-radius: 18px;
    padding: 12px 18px;
    color: #f2e8e1;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.9vh, 20px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
    background: linear-gradient(180deg, #611512, #320d0c);
    border: 1px solid #8f201c;
    text-shadow: none;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#char-skins-button {
    appearance: none;
    border-radius: 18px;
    padding: 12px 18px;
    font-family: 'Rajdhani', Arial, sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 1.9vh, 20px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background 0.18s ease;
    background: var(--hub-black-button);
    color: var(--hub-text);
    border: 1px solid rgba(255, 171, 98, 0.26);
    text-shadow: none;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#char-skins-button i {
    font-size: 0.9em;
}

#char-skins-button:hover,
#skins-marketplace-button:hover,
#skins-apply-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.24), 0 0 18px rgba(255, 119, 46, 0.18);
    filter: brightness(1.05);
}

.char-page #char-skins-button {
    position: absolute;
    left: 50%;
    bottom: clamp(18px, 2.2vh, 30px);
    transform: translateX(-50%);
    min-width: clamp(220px, 20vw, 320px);
    min-height: clamp(52px, 6.8vh, 74px);
    margin: 0 auto;
}

.char-page #char-skins-button:hover {
    transform: translateX(-50%) translateY(-1px);
}

.skins-page #skins-apply-button {
    min-width: 0;
    min-height: clamp(52px, 6.8vh, 74px);
    margin: 0 auto;
}

.skins-page #skins-marketplace-button,
#char-skins-button {
    min-width: clamp(220px, 20vw, 320px);
    min-height: clamp(52px, 6.8vh, 74px);
    background: var(--hub-black-button);
    color: var(--hub-text);
    border: 1px solid rgba(255, 171, 98, 0.24);
    border-radius: 18px;
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35);
}

@media (max-width: 900px) {
    .char-page #char-skins-button {
        width: min(100%, var(--char-level-ring-size));
        min-width: 0;
        min-height: 40px;
        margin-top: 0;
        padding: 8px 14px;
        font-size: clamp(11px, 1.45vw, 14px);
        line-height: 1;
    }
}

@media (max-width: 760px) and (orientation: landscape) {
    .char-page #char-skins-button {
        width: min(100%, var(--char-level-ring-size));
        min-width: 0;
        min-height: 34px;
        margin-top: 0;
        padding: 7px 10px;
        font-size: clamp(9px, 1.2vw, 11px);
    }
}

body.compact-landscape-handset .char-page #char-skins-button {
    width: min(100%, var(--char-level-ring-size));
    min-width: 0;
    min-height: 42px;
    margin-top: 0;
    padding: 8px 14px;
    font-size: clamp(10px, 1.15vw, 13px);
}