/* Shared lobby palette for every game interface. Combat art keeps its own colors. */
.sprite-load-notice{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:10000;padding:14px 20px;border:1px solid var(--ui-border);border-radius:9px;background:var(--ui-panel);color:var(--ui-text);box-shadow:0 8px 30px #0006;font:13px system-ui}
.sprite-load-notice[hidden]{display:none}.sprite-load-notice button{margin-left:12px}
:root {
    --ui-bg: #0b100e;
    --ui-panel: #111815;
    --ui-raised: #1b2420;
    --ui-button: #232b26;
    --ui-border: #46524b;
    --ui-text: #dce2df;
    --ui-muted: #a8b8ae;
    --ui-accent: #30483a;
    --cream: var(--ui-text);
    --gold: #b6c9bc;
    --mint: #a8c4b1;
    --ink: #0b100e;
    color-scheme: dark
}

body {
    background: var(--ui-bg);
    color: var(--ui-text)
}

body .brand, body .timer, body .top h1 {
    color: var(--ui-text);
    text-shadow: none
}

body .tag, body .build span, body kbd, body .menu-controls kbd, body .card .choice-key {
    background: var(--ui-raised);
    border-color: var(--ui-border);
    color: var(--ui-text);
    box-shadow: none
}

body .arena {
    border-color: #080e0b;
    box-shadow: 0 0 0 1px #38433d, 0 6px 15px #0005;
    background: #0b1510
}

body .overlay, body .account-dialog {
    background: #050907dc
}

body .panel, body .account-panel, body .player-profile-dialog {
    background: var(--ui-panel);
    color: var(--ui-text);
    border-color: var(--ui-border);
    box-shadow: 0 12px 36px #0006
}

body .panel p, body .panel .eyebrow, body .hint, body .upgrade-stat, body .menu-controls, body .account-panel p, body .footer, body .subtitle {
    color: var(--ui-muted)
}

body .menu-title {
    color: var(--ui-text);
    text-shadow: none
}

body .primary, body .panel .primary {
    background: var(--ui-accent);
    border-color: #667f6d;
    color: #e1ebe4;
    box-shadow: none
}

body .primary:hover, body .panel .primary:hover {
    background: #3a5544;
    box-shadow: none
}

body .quiet, body .panel .quiet, body .profile-characters button, body .connection-debug button {
    background: var(--ui-button);
    border-color: var(--ui-border);
    color: var(--ui-text);
    box-shadow: none
}

body .card, body .hero-card[data-hero], body .talent-node, body .talent-node.locked {
    background: var(--ui-raised);
    border-color: var(--ui-border);
    color: var(--ui-text);
    box-shadow: none
}

body .card:hover, body .talent-node:hover {
    border-color: #8ca895
}

body .card span, body .card small, body .talent-node small, body .talent-branches h3, body .talent-link {
    color: var(--ui-muted)
}

body .hero-card[aria-pressed=true] {
    background: #26392d;
    border-color: #8ca895;
    box-shadow: inset 0 0 0 1px #6c8976
}

body .health, body .hudright, body .party-frame, body .wave-badge, body .wave-banner, body .upgrade-toast, body .notice, body .party-pause-notice, body .equipment-slot, body .equipment-tip, body .damage-meter, body .phone-install-hint {
    background: #111815f2;
    border-color: var(--ui-border);
    color: var(--ui-text);
    box-shadow: none;
    text-shadow: none
}

body .hudlabel, body .boss-hud, body .wave-banner span, body .wave-banner small, body .upgrade-toast small, body .equipment-tip small, body .build b {
    color: var(--ui-muted)
}

body .track, body .boss-hud .track, body .xp-track {
    background: #080e0b;
    border-color: #080e0b
}

body .panel input, body .panel select, body .player-profile-dialog input {
    background: #0b120e;
    color: var(--ui-text);
    border-color: var(--ui-border)
}

body button:focus-visible, body [tabindex]:focus-visible {
    outline-color: #a1b7a8
}

/* Keep the identity actions as text links, including inside the themed panels. */
body .nightfall-lobby .lobby-identity .profile-name-link {
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--ui-muted)
}

body .progression-navigation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #38433d;
    text-align: left
}

body .progression-navigation button {
    border-width: 1px;
    border-radius: 7px;
    padding: 9px 12px;
    font-size: 12px
}

body .progression-navigation #respec {
    margin-left: auto
}

body .achievement {
    background: var(--ui-raised);
    color: var(--ui-muted);
    border: 1px solid #38433d
}

body .achievement.earned {
    background: #22362a;
    color: #d6e5db;
    border-color: #6d8a77
}

body .panel-achievements, body .panel-talents {
    border-width: 1px;
    border-radius: 12px
}

body .talent-node {
    border-width: 1px;
    border-radius: 8px
}

body .talent-node.locked {
    background: #141c18;
    border-color: #303c34;
    color: #9aaa9f
}

@media (max-width: 600px) {
    body .progression-navigation {
        gap: 8px
    }

    body .progression-navigation button {
        font-size: 11px;
        padding: 8px
    }

    .achievement-grid {
        grid-template-columns:repeat(auto-fit, minmax(min(190px, 100%), 1fr))
    }
}

/* Progression screens use the same flat frame and surfaces as the lobby. */
body .panel.panel-talents, body .panel.panel-achievements {
    background: #111714;
    color: #d8dedb;
    border: 1px solid #39433e;
    border-radius: 12px;
    box-shadow: none;
    padding: 22px 26px
}

body .panel-talents .progression-navigation, body .panel-achievements .progression-navigation {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #111714;
    padding: 8px 0 12px;
    margin-top: 0;
    justify-content: space-between
}

body .panel-talents .talent-node, body .panel-achievements .achievement {
    background: #171d1a;
    border-color: #38433d
}

body .panel-achievements .achievement.earned {
    background: #26392d;
    border-color: #6d8a77;
    color: #d6e5db
}

@media (max-width: 600px) {
    body .panel.panel-talents, body .panel.panel-achievements {
        padding: 12px
    }

    .panel-talents .talent-branches {
        grid-template-columns:1fr
    }
}

/* Flat, restrained in-game frames and a consistent action bar. */
body .panel.panel-achievements { max-width: 1080px; height: min(900px, calc(100dvh - 24px)); max-height: calc(100% - 24px); display: flex; flex-direction: column; overflow: hidden; }
.panel-achievements > :not(.chronicle-layout) { flex-shrink: 0; }
.panel-achievements .chronicle-layout { flex: 1; min-height: 0; }
.panel-achievements .chronicle-categories { min-height: 0; overflow-y: auto; }
.panel-achievements .chronicle-content { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.panel-achievements .chronicle-cards { flex: 1; min-height: 0; max-height: none; }
.panel-achievements .chronicle-section-heading, .panel-achievements .chronicle-count { flex-shrink: 0; }
.chronicle-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; max-width: 600px; margin: 0 auto 24px; font-size: 13px; color: #adbbb1; text-align: left; }
.chronicle-summary b { color: #e3cf9c; }
.chronicle-progress { width: 100%; height: 7px; background: #0c130f; border: 1px solid #39473d; border-radius: 10px; overflow: hidden; }
.chronicle-progress > span { display: block; height: 100%; background: #a5915c; border-radius: inherit; }
.chronicle-layout { display: grid; grid-template-columns: 184px minmax(0,1fr); gap: 22px; text-align: left; }
.chronicle-categories { display: flex; flex-direction: column; gap: 5px; padding-right: 14px; border-right: 1px solid #39433e; }
body .chronicle-category { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 5px; padding: 10px; background: transparent; border: 1px solid transparent; border-radius: 6px; box-shadow: none; color: #aab9ae; font-size: 12px; text-align: left; }
body .chronicle-category.active { background: #2b3527; border-color: #8b7c52; color: #e5cf95; }
.chronicle-category small { font-size: 10px; opacity: .8; }
.chronicle-nav-heading { font-size: 10px; color: #8d9f91; text-transform: uppercase; letter-spacing: 2px; margin: 16px 10px 6px; }
.chronicle-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.chronicle-section-heading h3 { color: #ddc990; margin: 0; }
.chronicle-section-heading span { font-size: 11px; color: #aab9ae; }
.chronicle-filter { font-size: 11px; color: #aab9ae; }
.chronicle-filter select { margin-left: 6px; padding: 7px; max-width: 100%; border: 1px solid #46574a; background: #1a271e; color: #dbe2da; border-radius: 5px; font-size: 11px; }
.chronicle-count, .chronicle-empty { color: #9bad9e; font-size: 11px !important; }
.chronicle-card .chronicle-description { color: #bac8bd; line-height: 1.5; }
.chronicle-cards { display: grid; gap: 10px; max-height: 51vh; overflow: auto; padding-right: 6px; }
body .chronicle-card { display: flex; gap: 14px; padding: 16px; }
.chronicle-card > .item-icon { flex: 0 0 46px; width: 46px; height: 46px; margin: 2px 0; }
.chronicle-card-main { min-width: 0; flex: 1; }
.chronicle-card-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.chronicle-card h4 { margin: 0; font-size: 13px; color: #dbe2da; }
.chronicle-status { font-size: 10px; color: #8f9f94; }
.earned .chronicle-status { color: #d9c18a; }
body .chronicle-card p { font-size: 11px; margin: 8px 0; }
.chronicle-card small { display: block; margin-top: 8px; font-size: 10px; color: #95a79a; }
.achievement-checklist { display: flex; flex-wrap: wrap; gap: 5px 14px; list-style: none; padding: 0; margin: 9px 0 12px; font-size: 11px; line-height: 1.5; }
.achievement-checklist .incomplete { color: #89918d; }
.achievement-checklist .complete { color: #ffffff; }
body .achievement-track { padding: 5px 12px; margin-top: 9px; font-size: 11px; }
body .achievement-track[aria-pressed="true"] { border-color: #b9a26a; color: #e5cf95; }
#achievementTracker { position: absolute; left: 12px; bottom: 30px; width: 250px; z-index: 2; pointer-events: none; display: grid; gap: 6px; }
#achievementTracker[hidden] { display: none; }
#arena:has(.overlay:not(.hidden)) #achievementTracker { display: none; }
.tracked-achievement { display: flex; gap: 8px; padding: 8px; border: 1px solid #46524b; border-radius: 7px; background: #111815de; color: #d8dedb; }
.tracked-achievement .item-icon { width: 28px; height: 28px; flex: 0 0 28px; margin: 0; }
.tracked-achievement > div { flex: 1; min-width: 0; }
.tracked-achievement b { font-size: 11px; display: block; }
.tracked-achievement small { display: block; font-size: 10px; color: #adbbb1; margin: 4px 0; }
.tracked-achievement .chronicle-progress { height: 4px; }
@media(max-width:600px) { #achievementTracker { left: 6px; bottom: 32px; width: 170px; } .tracked-achievement { padding: 5px; gap: 5px; } .tracked-achievement .item-icon { width: 22px; height: 22px; flex-basis: 22px; } }
@media(max-width: 600px) {
    .chronicle-layout { grid-template-columns: 112px minmax(0,1fr); gap: 10px; }
    .chronicle-categories { padding-right: 6px; }
    body .chronicle-category { padding: 9px 4px; font-size: 10px; }
    .chronicle-category small { font-size: 9px; }
    .chronicle-section-heading { display: block; }
    .chronicle-section-heading h3 { font-size: 16px; margin-bottom: 6px; }
    body .chronicle-card { display: block; padding: 10px; }
    .chronicle-card > .item-icon { width: 32px; height: 32px; margin: 0 0 8px; }
    .chronicle-card h4 { font-size: 12px; }
    .chronicle-cards { max-height: 58vh; }
}

body .panel.panel-talents { max-width: 1250px !important; width: calc(100vw - 32px); }
body .panel.character-talents-panel { max-width: 1500px !important; text-align: left; }
.character-talents-shell { display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; }
.character-talents-sidebar { border-right:1px solid #3b493f; padding-right:16px; }
.character-talents-sidebar h3 { color:#e3cf9c; margin:8px 0 16px; }
.character-talents-sidebar button { width:100%; display:flex; align-items:center; gap:10px; margin:4px 0; padding:10px 8px; text-align:left; background:#18251e; border:1px solid transparent; border-radius:8px; }
.character-talents-sidebar button[aria-pressed=true] { border-color:#c3ab75; background:#30392b; }
.character-talents-sidebar p { color:#a0b0a5; font-size:12px; line-height:1.6; }
.character-talents-content { min-width:0; }
.character-talents-content header { display:flex; justify-content:space-between; align-items:center; gap:24px; padding:8px 0 18px; }
.character-talents-content h2 { margin:4px 0; }
.character-xp { width:240px; font-size:12px; color:#b4c6b6; }
.character-xp progress { display:block; width:100%; height:8px; margin-top:8px; accent-color:#dbc485; }
.character-tier-label { position:absolute; left:30px; right:30px; padding-bottom:8px; border-bottom:1px solid #61735a55; color:#bca876; font-size:12px; letter-spacing:2px; }
.character-talents-panel .talent-map-viewport { background:radial-gradient(ellipse at top,#243a2d,#101a16 70%); }
.character-talents-panel .talent-orb b { width:138px; font-size:12px; }
.character-talents-panel .talent-orb > small { position:absolute; top:calc(100% + 40px); left:50%; transform:translateX(-50%); white-space:nowrap; color:#b4c29e; font-size:11px; }
.character-level-ring { --level-progress:0%; flex:none; display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:linear-gradient(#10201a,#10201a) padding-box,conic-gradient(#f0d88e var(--level-progress),#8ba091 var(--level-progress)) border-box; border:3px solid transparent; color:#fff5d6; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
.hero-card[data-hero] { position:relative; }
.hero-card > .character-level-ring { position:absolute; right:12px; top:50%; transform:translateY(-50%); width:30px; height:30px; font-size:13px; }
.hero-card[data-hero] > b { padding-right:36px; }
.cinematic-hero-stage { position:relative; }
.cinematic-hero-stage > .character-level-ring { position:absolute; left:20px; top:20px; width:50px; height:50px; font-size:20px; }
@media(max-width:900px) { .character-talents-shell { grid-template-columns:150px minmax(0,1fr); gap:12px; } .character-talents-panel .talent-layout { grid-template-columns:minmax(0,1fr); } .character-talents-content header { display:block; } .character-xp { width:100%; } }
@media(max-width:600px) { .character-talents-shell { display:block; } .character-talents-sidebar { display:flex; overflow-x:auto; gap:6px; border-right:0; padding:0 0 10px; } .character-talents-sidebar h3,.character-talents-sidebar p { display:none; } .character-talents-sidebar button { width:auto; min-width:150px; flex:none; } .character-talents-panel .talent-map-viewport { height:380px; } }
.talent-layout { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 18px; text-align: left; }
.talent-map-area { min-width: 0; }
.talent-map-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; color: #a1b2a6; font-size: 11px; }
.talent-map-tools > div { display: flex; align-items: center; gap: 6px; }
.talent-map-tools .quiet { padding: 7px 10px; margin: 0; font-size: 12px; }
.talent-map-tools output { min-width: 38px; text-align: center; font-variant-numeric: tabular-nums; }
.talent-map-viewport { position: relative; overflow: clip; border: 1px solid #39433e; border-radius: 12px; background: #121a16; height: clamp(350px, 57vh, 640px); touch-action: none; user-select: none; cursor: grab; }
.talent-map-viewport.dragging, .talent-map-viewport.dragging * { cursor: grabbing; }
.talent-map { position: absolute; left: 0; top: 0; width: 1100px; height: 900px; transform-origin: 0 0; will-change: transform; }
.talent-paths { position: absolute; width: 100%; height: 100%; inset: 0; }
.talent-paths path { fill: none; stroke: #35433a; stroke-width: 3; }
.talent-paths path.open { stroke: #9a8756; }
body .talent-orb { position: absolute; transform: translate(-50%, -50%); width: 76px; height: 76px; padding: 5px; border: 2px solid #7c8c72; border-radius: 50%; background: #25352b; box-shadow: 0 3px 8px #0006; color: #d8dedb; }
.talent-orb .item-icon { width: 100%; height: 100%; margin: 0; object-fit: contain; }
.talent-orb b { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 156px; font-size: 14px; line-height: 1.15; text-align: center; font-weight: 500; }
.talent-rank { position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); background: #111714; border: 1px solid #66775b; padding: 1px 6px; border-radius: 8px; font-size: 14px; white-space: nowrap; }
body .talent-orb.locked { border-color: #3d4a42; background: #18201b; }
.talent-orb.locked .item-icon { opacity: .45; filter: saturate(.45); }
body .talent-orb.mastered { border-color: #dfc681; background: #3f3c28; }
body .talent-orb.selected, body .talent-orb:focus-visible { outline: 2px solid #dfc681; outline-offset: 5px; }
body .talent-orb.keystone { border-radius: 15px; border-color: #ad9360; }
.talent-heart { position: absolute; left: 550px; top: 440px; transform: translate(-50%,-50%); width: 170px; padding: 24px 6px; text-align: center; background: #1c2c23; border: 1px solid #a39160; border-radius: 50%; }
.talent-heart span { color: #dac38b; font-size: 12px; letter-spacing: 2px; }
.talent-heart b, .talent-heart small { display: block; font-size: 10px; margin-top: 6px; font-weight: normal; }
.talent-heart small { color: #97a69b; font-size: 9px; }
.talent-branch-name { position: absolute; color: #bca876; font-size: 10px; letter-spacing: 2px; transform: translateX(-50%); }
.talent-branch-name.might { left: 330px; top: 360px; }
.talent-branch-name.resolve { left: 550px; top: 185px; }
.talent-branch-name.fortune { left: 770px; top: 360px; }
.talent-detail { align-self: start; padding: 20px; border: 1px solid #39433e; background: #171f1a; border-radius: 12px; }
.talent-detail > .item-icon { display: block; width: 76px; height: 76px; margin: 0 0 12px; object-fit: contain; }
.talent-detail h3 { color: #e3cf9c; margin: 8px 0; }
.talent-detail p { font-size: 13px; line-height: 1.5; }
.talent-detail .talent-requirement, .talent-detail small { color: #9baaa0; }
.talent-detail small { display: block; margin-top: 18px; line-height: 1.5; font-size: 11px; }
.talent-detail button { width: 100%; padding: 12px 6px; background: #9e8958; color: #101a13; border: 1px solid #c2ab72; border-radius: 7px; }
.talent-detail button:disabled { opacity: .5; cursor: default; }
@media(max-width: 800px) {
    .talent-layout { grid-template-columns: 1fr; }
    .talent-map-viewport { height: 350px; }
    .talent-map-tools { flex-wrap: wrap; }
    .talent-detail { padding: 14px; }
    .talent-detail > .item-icon { float: left; width: 54px; height: 54px; margin-right: 14px; }
    .talent-detail small { margin-top: 10px; }
}

body .health, body .hudright {
    border: 1px solid #46524b;
    border-radius: 8px;
    background: #111815ed;
    box-shadow: 0 3px 12px #0003
}

body .health {
    padding: 9px 11px
}

body .health .track, body .party-frame .track {
    height: 7px;
    border: 0;
    border-radius: 3px
}

body .health .fill, body .party-frame .fill {
    border-top: 0;
    border-radius: 3px
}

body .hudright {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 7px 0;
    min-height: 44px
}

.hud-stat {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 13px
}

.hud-stat + .hud-stat {
    border-left: 1px solid #39463e
}

.hud-stat small {
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: #9aae9f
}

.hud-stat > span {
    font: 700 17px/1.2 ui-monospace, monospace;
    color: #e0e9e3
}

body .wave-badge {
    background: #1b2b21ed;
    color: #c6d9cd;
    border: 1px solid #526b59;
    border-radius: 6px;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 7px 12px;
    box-shadow: none
}

body .hud-stats-group .performance-hud {
    background: #0d1511d9;
    border: 1px solid #34463a;
    border-radius: 6px;
    color: #aebeb3;
    font-size: 9px
}

body .bottom {
    border-top: 1px solid #303c34;
    padding-top: 9px;
    margin-top: 8px
}

body .actions {
    gap: 6px;
    align-items: center
}

body .actions .quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 12px;
    background: #1b2420;
    border: 1px solid #46524b;
    border-radius: 6px;
    color: #cfdcd3;
    box-shadow: none;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    transition: background .15s, border-color .15s;
    white-space: nowrap
}

body .actions .quiet:hover {
    background: #29392e;
    border-color: #789681
}

body .actions .quiet[aria-pressed="true"] {
    background: #30483a;
    border-color: #7b9986;
    color: #e5eee8
}

body .actions .quiet:active {
    background: #354d3e
}

body .actions .quiet[hidden] {
    display: none
}

@media (max-width: 600px) {
    body .hudright {
        min-height: 36px;
        padding: 5px 0
    }

    .hud-stat {
        gap: 4px;
        padding: 0 6px;
        flex-direction: column
    }

    .hud-stat small {
        font-size: 6px;
        letter-spacing: .8px
    }

    .hud-stat > span {
        font-size: 12px
    }

    body .health {
        padding: 7px
    }

    body .hud-stats-group .performance-hud {
        font-size: 8px
    }

    body .bottom {
        margin-top: 0
    }

    body .actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        scrollbar-width: none;
        padding: 2px 0
    }

    body .actions .quiet {
        flex: 0 0 auto;
        font-size: 10px;
        padding: 6px 9px;
        min-height: 32px
    }

    body.game-fullscreen .bottom {
        border: 0
    }
}

/* Wave and upgrade notifications share one mobile slot; JS serializes them. */
@media (pointer: coarse),(max-width: 600px) {
    body .wave-banner, body .upgrade-toast {
        top: 48px;
        bottom: auto;
        right: 8px;
        left: auto;
        transform: none !important
    }
}

@media (pointer: coarse) and (orientation: landscape) {
    body .wave-banner, body .upgrade-toast {
        top: 8px;
        right: auto;
        left: 50%;
        transform: translateX(-50%) !important
    }
}

/* Anchor to the phone viewport, not the arena below the page header. */
@media (pointer: coarse),(max-width: 600px) {
    body #waveBanner, body #upgradeToast {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 8px);
        bottom: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%) !important;
        z-index: 4;
        max-width: calc(100vw - 32px)
    }
}

body .upgrade-panel .card .upgrade-rank-preview {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: auto;
    padding-top: 14px;
}

body .upgrade-panel .upgrade-rank-preview > span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
}

body .upgrade-panel .upgrade-rank-preview small {
    margin: 0;
    font-size: 9px;
    color: #9aada2;
    letter-spacing: .04em;
    white-space: nowrap;
}

body .upgrade-panel .upgrade-rank-preview strong {
    font-size: 15px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #dfebdf;
}

body .upgrade-panel .upgrade-rank-next strong {
    color: #bfd8c5;
}

body .upgrade-panel .rank-up-sprite {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    color: #a3bda9;
    image-rendering: pixelated;
}

@media (max-width: 700px) {
    body .upgrade-panel .card .upgrade-rank-preview {
        gap: 10px;
        padding-top: 12px;
    }

    body .upgrade-panel .upgrade-rank-preview small {
        font-size: 8px;
        letter-spacing: 0;
    }

    body .upgrade-panel .upgrade-rank-preview strong {
        font-size: 14px;
    }

    body .upgrade-panel .rank-up-sprite {
        flex-basis: 10px;
        width: 10px;
        height: 10px;
    }
}

body .upgrade-panel {
    max-width: 1000px
}

body .upgrade-panel .cards {
    grid-template-columns:repeat(3, minmax(0, 1fr))
}

body .upgrade-panel .card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
    overflow-wrap: anywhere
}

@media (max-width: 700px) {
    body .upgrade-panel .cards {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 8px
    }

    body .upgrade-panel .card {
        padding: 9px
    }

    body .upgrade-panel .card b {
        font-size: 12px
    }

    body .upgrade-panel .card span {
        font-size: 11px;
        line-height: 1.3
    }

    body .upgrade-panel .card .item-icon {
        width: 32px;
        height: 32px
    }
}

@media (orientation: landscape) and (max-height: 500px) and (min-width: 650px) {
    body .upgrade-panel .cards {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

/* Leave a visible gap beneath the level/slain frame. */
body .wave-badge {
    top: 68px;
    color: #e3a09a;
    border-color: #72524e;
    background: #251a19ed
}

@media (max-width: 600px) {
    body .wave-badge {
        top: 60px
    }
}

@media (orientation: landscape) and (max-height: 520px) {
    body .wave-badge {
        top: 60px
    }
}

@media (min-width: 601px) and (min-height: 521px) {
    body .wave-badge {
        top: 82px
    }
}

/* Fixed icon slots keep artwork aligned regardless of card text length. */
body .upgrade-panel .card {
    position: relative;
    padding-top: 88px
}

body .upgrade-panel .card > .item-icon {
    position: absolute;
    top: 14px;
    left: 14px;
    right: auto;
    width: 56px;
    height: 56px;
    margin: 0;
    object-fit: contain
}

body .upgrade-panel .card > b {
    margin-top: 0
}

@media (max-width: 700px),(pointer: coarse) {
    body .upgrade-panel .card {
        padding-top: 51px
    }

    body .upgrade-panel .card > .item-icon {
        top: 9px;
        right: 9px;
        left: auto;
        width: 32px;
        height: 32px
    }

    body .upgrade-panel .card .choice-key {
        top: 9px;
        left: 9px;
        right: auto
    }
}

body .panel.pause-layout {
    max-width: 1120px;
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(220px, .9fr) minmax(0, 1fr);
    align-items: start;
    gap: 20px;
    padding: 22px;
    background: #111714;
    border: 1px solid #39433e;
    border-radius: 12px;
    box-shadow: none
}

.pause-center {
    padding: 24px 6px;
    text-align: center
}

.pause-center h2 {
    font-size: 28px
}

.pause-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px
}

body .pause-actions button {
    margin: 0;
    padding: 12px 18px;
    border-width: 1px;
    border-radius: 7px;
    font-size: 14px;
    box-shadow: none
}

.pause-inventory {
    min-width: 0;
    text-align: left;
    background: #171d1a;
    border: 1px solid #38433d;
    border-radius: 8px;
    padding: 14px;
    max-height: 65dvh;
    overflow: auto
}

.pause-inventory h3 {
    margin: 0 0 8px;
    color: #dce2df;
    font-size: 15px
}

body .pause-inventory p {
    font-size: 11px;
    margin: 0 0 12px;
    text-align: left
}

.pause-item {
    margin-top: 8px;
    padding: 8px;
    border: 1px solid #39463e;
    border-radius: 6px;
    background: #111815
}

.pause-item summary {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    list-style: none
}

.pause-item summary::-webkit-details-marker {
    display: none
}

.pause-item .item-icon {
    width: 36px;
    height: 36px;
    object-fit: contain
}

.pause-item strong, .pause-item small {
    display: block
}

.pause-item strong {
    font-size: 12px
}

.pause-item small {
    color: #a8b8ae;
    font-size: 10px;
    margin-top: 3px
}

.pause-item-description {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #344039;
    font-size: 12px;
    line-height: 1.5;
    color: #bacbbf
}

.pause-item[open] > .pause-item-description, .pause-item:focus-within > .pause-item-description {
    display: block
}

@media (hover: hover) {
    .pause-item:hover > .pause-item-description {
        display: block
    }
}

@media (max-width: 700px) {
    body .panel.pause-layout {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        padding: 12px;
        gap: 10px
    }

    .pause-center {
        grid-column: 1/-1;
        grid-row: 1;
        padding: 4px
    }

    .pause-center h2 {
        font-size: 24px
    }

    .pause-actions {
        flex-direction: row;
        margin-top: 12px
    }

    .pause-actions button {
        flex: 1
    }

    .pause-inventory {
        padding: 9px;
        max-height: 45dvh
    }

    .pause-inventory h3 {
        font-size: 12px
    }

    .pause-item summary {
        flex-wrap: wrap
    }

    .pause-item-description {
        font-size: 11px
    }
}

body .panel.end-screen {
    max-width: 1020px;
    background: #111714;
    border: 1px solid #39433e;
    border-radius: 12px;
    padding: 26px;
    box-shadow: none;
    text-align: left
}

.end-heading {
    padding-bottom: 18px;
    border-bottom: 1px solid #303c34;
    margin-bottom: 20px
}

.end-heading h2 {
    font-size: 32px;
    margin: 8px 0
}

body .end-heading p {
    margin: 0;
    max-width: none;
    color: #c5aaa5;
    font-size: 12px
}

.end-stat-columns {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 14px
}

.end-stat-column {
    min-width: 0;
    background: #171d1a;
    border: 1px solid #38433d;
    border-radius: 8px;
    padding: 16px
}

.end-stat-column h3 {
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #afc4b5
}

.end-stat-column dl {
    margin: 0
}

.end-stat-column dl > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #29362e
}

.end-stat-column dl > div:last-child {
    border-bottom: 0
}

.end-stat-column dt {
    font-size: 11px;
    color: #a8b8ae
}

.end-stat-column dd {
    margin: 0;
    text-align: right;
    overflow-wrap: anywhere;
    font-size: 14px;
    font-weight: 700;
    color: #e0e8e2
}

.end-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    border-top: 1px solid #303c34;
    padding-top: 20px;
    margin-top: 20px
}

body .end-actions button {
    margin: 0 !important;
    padding: 12px 18px;
    border-radius: 7px;
    border-width: 1px;
    font-size: 13px;
    box-shadow: none
}

body .end-screen .end-hint {
    font-size: 11px;
    max-width: none;
    margin: 12px 0 0;
    text-align: right;
    color: #93a69a
}

@media (max-width: 700px) {
    body .panel.end-screen {
        padding: 14px
    }

    .end-heading h2 {
        font-size: 26px
    }

    .end-stat-columns {
        grid-template-columns:1fr;
        gap: 9px
    }

    .end-stat-column {
        padding: 12px
    }

    .end-stat-column h3 {
        margin-bottom: 5px
    }

    .end-stat-column dl > div {
        padding: 6px 0
    }

    .end-actions {
        justify-content: stretch
    }

    .end-actions button {
        flex: 1
    }

    body .end-screen .end-hint {
        text-align: center
    }
}

/* Size the arena from the available window space instead of a fixed offset. */
html {
    height: 100%;
    overflow: hidden;
}
body {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
body > header {
    flex: 0 0 auto;
}
body > main {
    flex: 1 1 0;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
body .top, body .bottom {
    flex: 0 0 auto;
}
body .arena, body.game-fullscreen .arena {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
    min-width: 0;
}
body .bottom, body.game-fullscreen .bottom {
    height: auto;
    justify-content: flex-end;
    margin: 6px 0 0;
    padding: 4px 0;
    border: 0;
}
body .actions {
    flex-wrap: wrap;
    overflow: visible;
}
body .connection-debug[hidden], body #build[hidden], body #encounter[hidden] {
    display: none;
}
@media (max-height: 700px) {
    body > header { padding: 6px 14px; }
    body .top { margin-bottom: 6px; }
    body .top h1 { font-size: 18px; }
    body .top .subtitle { display: none; }
}
@media (max-height: 480px) {
    body > header { display: none; }
    body .top > div:first-child { display: none; }
    body .top { justify-content: flex-end; }
    body .timer { font-size: 18px; }
    body .timer small { display: none; }
}

/* Keep every lobby choice on-screen; lobby-fit.js scales the complete menu. */
body .overlay:has(.nightfall-lobby) {
    overflow: hidden;
    padding: 0;
}
body .panel.nightfall-lobby {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1040px;
    max-width: none;
    height: auto;
    max-height: none;
    margin: 0;
    overflow: visible;
    transform: translate(-50%, -50%) scale(var(--lobby-scale, 1));
    transform-origin: center;
    animation: none;
}
body .nightfall-lobby .hero-cards {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
}
body .nightfall-lobby .hero-card {
    min-width: 0;
}
body .nightfall-lobby .lobby-biomes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    overflow: visible;
}
body .nightfall-lobby .lobby-biome {
    min-width: 0;
}
/* Keep the lobby focused on selecting a wanderer and starting an expedition. */
body:has(.nightfall-lobby) .top,
body:has(.nightfall-lobby) > header > .tag { display: none; }
.brand { display: flex; align-items: center; gap: 8px; }
#brandWarden { width: 36px; height: 36px; flex: 0 0 36px; }
body:has(.nightfall-lobby) > header { padding: 4px 16px; }
body { -webkit-user-select: none; user-select: none; }
.arena, #game { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; }
.lobby-code { -webkit-user-select: all; user-select: all; }
body > header { padding: 4px 16px; }
.survival-time { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; padding-top: 5px; border-top: 1px solid #46524b; color: #dce2df; }
.survival-time small { font-size: 8px; letter-spacing: .6px; color: #a8b8ae; }
.survival-time #time { font-size: 12px; font-variant-numeric: tabular-nums; }
body:has(#overlay:not(.hidden) .nightfall-lobby) #waveStatus { display: none; }

body .nightfall-lobby .hero-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.wanderer-upgrade-icon { display: inline-block; flex-shrink: 0; background-repeat: no-repeat; background-size: 700% 300%; }

/* Each compact party card has a separate, wrapping upgrade grid beside it. */
body #partyFrames{position:absolute;top:14px;left:12px;width:330px;margin:0;display:grid;grid-template-columns:1fr;gap:8px;direction:ltr;align-content:start;overflow:visible;max-height:none;pointer-events:none}
body #partyFrames[hidden]{display:none}
body .party-member{display:grid;grid-template-columns:174px minmax(0,1fr);gap:8px;align-items:start}
body .party-frame{display:grid;grid-template-columns:32px minmax(0,1fr);gap:1px 6px;padding:4px 6px;border-radius:8px;min-width:0;align-items:center}
body .party-frame .party-portrait{width:32px;height:32px;grid-column:1;grid-row:1/4;background:#18241e;border-radius:6px}
body .party-frame strong{grid-column:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px}
body .party-frame .track{grid-column:2;margin:2px 0;position:relative;height:13px}
body .party-hp-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:9px;font-weight:800;line-height:1;white-space:nowrap;text-shadow:0 1px 2px #000,0 -1px 2px #000}
body .party-frame .party-stats{grid-column:2;font-size:8px}
body .party-frame button{grid-column:2;margin:3px 0 0}
body .party-frame button[hidden]{display:none}
body:has(#partyFrames:not([hidden])) #equipmentRail,body:has(#partyFrames:not([hidden])) .hud>.health{display:none}
body:has(#partyFrames:not([hidden])) .hud-stats-group{margin-left:auto}
body .party-equipment{display:grid;grid-template-columns:repeat(6,21px);gap:4px;margin:4px 0;max-height:none;overflow:visible;pointer-events:auto;align-content:start}
body .party-equipment:empty{display:none}
body .party-equipment-slot{position:relative;display:inline-flex;width:21px;height:21px;align-items:center;justify-content:center;background:#111d17;border:1px solid #52675a;border-radius:5px}
body .party-equipment-slot .item-icon{width:18px;height:18px;margin:0;flex:0 0 18px;font-size:17px}
body .party-equipment-slot b{position:absolute;right:-2px;bottom:-3px;font-size:9px;line-height:12px;min-width:12px;text-align:center;border-radius:4px;background:#324c3c;color:#eff5e9}
body .party-equipment-slot:focus-visible{outline:2px solid #b9d3aa}
.end-party-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.end-party-roster section{display:grid;grid-template-columns:38px minmax(0,1fr);gap:2px 8px;align-items:center;padding:8px;background:#17251e;border:1px solid #405449;border-radius:8px}
.end-party-roster .lobby-portrait{width:38px;height:38px;grid-row:1/3}
.end-party-roster bdi{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.end-party-roster span{font-size:11px;color:#b8c9bf}

@media(max-width:650px){body #partyFrames{width:268px;left:6px;top:12px;gap:5px}body .party-member{grid-template-columns:134px minmax(0,1fr);gap:6px}body .party-frame{grid-template-columns:26px minmax(0,1fr);gap:1px 4px;padding:3px 4px}body .party-frame .party-portrait{width:26px;height:26px}body .party-equipment{grid-template-columns:repeat(5,20px);gap:4px}body .party-equipment-slot{width:20px;height:20px}.end-party-roster{grid-template-columns:1fr}}
body:has(#partyFrames:not([hidden])) .hud-stats-group{position:absolute;top:0;right:0;left:auto;margin:0;direction:ltr}
body #partyUpgradeTooltip{position:fixed;z-index:1200;max-width:min(280px,calc(100vw - 16px));padding:12px 14px;background:#132219;border:1px solid #839a79;border-radius:8px;box-shadow:0 5px 20px #000a;color:#edf2dc;font:13px/1.45 system-ui;pointer-events:none}
body #partyUpgradeTooltip[hidden]{display:none}body #partyUpgradeTooltip strong,body #partyUpgradeTooltip small{display:block}body #partyUpgradeTooltip small{color:#b8d5a0;margin-top:3px}body #partyUpgradeTooltip p{margin:7px 0 0;color:#d0d9c8}
body .arena:has(#resume) #partyFrames{z-index:45}

body .profile-characters button[data-taken="true"]{filter:grayscale(1);opacity:.45;cursor:not-allowed}body .profile-characters button small{display:block;font-size:10px;margin-top:4px}

body #partyFrameToggle{position:absolute;top:12px;left:250px;z-index:6;width:28px;height:36px;padding:0;background:#17251ee8;color:#dce8dc;border:1px solid #536956;border-radius:0 7px 7px 0;font:24px/1 system-ui;touch-action:manipulation}body #partyFrameToggle.collapsed{left:4px}
body:has(#devTools:not([hidden])) #partyFrameToggle.collapsed{left:34px}body #partyFrameToggle[hidden]{display:none}
@media(max-width:650px),(pointer:coarse) and (max-width:1000px) and (max-height:600px){
 body{--phone-party-edge:6px}
 body:has(#devTools:not([hidden])){--phone-party-edge:34px}
 body #partyFrames{left:calc(var(--phone-party-edge) + 24px);top:12px;width:242px;gap:4px}
 body #partyFrameToggle,body #partyFrameToggle.collapsed{left:var(--phone-party-edge);width:22px;border-radius:7px 0 0 7px}
 body #partyFrames.phone-party-hidden{display:none}
 body .party-member{grid-template-columns:124px minmax(0,1fr);gap:5px}
 body .party-frame{grid-template-columns:20px minmax(0,1fr);padding:2px 3px;gap:1px 3px}
 body .party-frame .party-portrait{width:20px;height:20px}
 body .party-frame strong{font-size:9px}body .party-frame .party-stats{font-size:7px}
 body .party-frame .track{height:12px;margin:1px 0}body .party-hp-text{font-size:8px}
 body .party-equipment{grid-template-columns:repeat(5,17px);gap:3px;margin:2px 0}
 body .party-equipment-slot{width:17px;height:17px}body .party-equipment-slot .item-icon{width:15px;height:15px;flex-basis:15px}
}

body .hud-stats-group .performance-hud{cursor:pointer;touch-action:manipulation;user-select:none}
body .hud-stats-group .performance-hud:focus-visible{outline:2px solid #b9d3aa;outline-offset:2px}

/* Keep mobile text metrics stable before Safari receives its first touch. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Keep portrait lobby controls below the iPhone status bar and beside the menu. */
@media (pointer: coarse) and (orientation: portrait) {
    body:has(#overlay:not(.hidden) .nightfall-lobby) > header {
        display: flex;
        padding: calc(env(safe-area-inset-top, 0px) + 8px) max(12px, env(safe-area-inset-right, 0px)) 8px max(12px, env(safe-area-inset-left, 0px));
    }
    body:has(#overlay:not(.hidden) .nightfall-lobby) > main {
        padding-top: 0;
    }
    body .overlay:not(.hidden) .panel.nightfall-lobby {
        top: 8px;
        transform: translateX(-50%) scale(var(--lobby-scale, 1));
        transform-origin: top center;
    }
}

/* Boss gifts retain the existing card shape with an unmistakable rare colour. */
.upgrade-panel .card.rare-upgrade{background:linear-gradient(155deg,#49315e,#241b38)!important;border-color:#b78ad7!important;box-shadow:inset 0 0 0 2px #1b1426,0 4px 0 #130f1d}.upgrade-panel .card.rare-upgrade:hover,.upgrade-panel .card.rare-upgrade:focus-visible{background:linear-gradient(155deg,#634078,#322248)!important;border-color:#e4b5ff!important}.upgrade-panel .rare-upgrade>small{color:#e2b7fa}
.survival-time #waveEnemies { font-size: 12px; font-variant-numeric: tabular-nums; }
/* Full-size minion portraits sit with health, independent of world zoom. */
body .hud > .health { position:relative; }
body #summonHud { display:flex;flex-wrap:wrap;gap:4px;width:212px;max-width:calc(100vw - 40px);pointer-events:none; }
body .health > #summonHud { position:absolute;top:calc(100% + 7px);left:0; }
body .party-member > #summonHud { grid-column:1 / -1; }
body #summonHud[hidden] { display:none; }
body #summonHud canvas { display:block;width:32px;height:32px;flex:0 0 32px;filter:drop-shadow(0 2px 2px #0009); }
body .arena:has(.health > #summonHud:not([hidden])) #equipmentRail { top:var(--summon-equipment-top,170px); }
.nightfall-lobby .lobby-visibility{display:flex;flex-direction:column;gap:8px;text-align:left;color:var(--muted,#b9b4c6);font-size:13px;min-width:200px}
.nightfall-lobby .lobby-visibility select{font:inherit;color:#eee7d5;background:#201d30;border:1px solid #65586e;border-radius:9px;padding:10px;max-width:100%}
.nightfall-lobby .lobby-visibility select:disabled{opacity:.8}
.lobby-host-block .lobby-visibility{margin-bottom:12px}
.panel.public-server-browser{width:min(920px,94vw);height:min(720px,90dvh);display:flex;flex-direction:column;overflow:hidden}
.public-server-list{overflow:auto;min-height:0;display:flex;flex-direction:column;gap:12px;padding:4px}
.public-server-row{display:flex;align-items:center;gap:16px;padding:16px;background:#201d30;border:1px solid #65586e;border-radius:12px;text-align:left}
.public-server-row>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.public-server-row>div strong{overflow-wrap:anywhere}.public-server-row>div span{font-size:13px;color:#b9b4c6}
.public-server-row>img,.public-server-row>.lobby-biome-art{width:64px;height:64px;object-fit:cover;border-radius:8px;flex:none}
@media(max-width:600px){.public-server-row{gap:8px;padding:10px}.public-server-row>img,.public-server-row>.lobby-biome-art{width:40px;height:40px}.lobby-party-settings{flex-wrap:wrap}}
body .panel.nightfall-lobby.public-server-browser{height:650px;overflow:hidden;display:flex;flex-direction:column}
body .public-server-browser .lobby-heading{justify-content:center;text-align:center}
body .public-server-browser .lobby-secondary{display:flex;justify-content:space-between;gap:12px}
body .public-server-browser .lobby-secondary button{padding:12px 18px;border:1px solid #576755;border-radius:9px;background:#22372b;color:#eee7d5}
body .public-server-row{background:#1c2b24;border-color:#576755}
body .nightfall-lobby .lobby-visibility select{background:#1c2b24;border-color:#576755}
/* Server rows remain readable on phones instead of scaling the entire menu down. */
body .overlay:not(.hidden) .panel.nightfall-lobby.public-server-browser{width:min(1040px,calc(100% - 24px));height:min(650px,calc(100% - 24px));top:50%;transform:translate(-50%,-50%);transform-origin:center}
@media(max-width:600px){body .public-server-browser{padding:16px}body .public-server-browser .lobby-heading h2{font-size:25px}body .public-server-browser .lobby-secondary button{min-width:0;padding:10px}body .public-server-row>div span{font-size:12px}body .public-server-row button{min-width:54px;padding:10px}body .public-server-row .lobby-biome-art{width:40px;height:40px}}
body .nightfall-lobby .lobby-room-settings{padding:16px 18px;margin:14px 0;background:#19271f;border:1px solid #435248;border-radius:12px;text-align:left;width:100%;box-sizing:border-box}
body .nightfall-lobby .lobby-room-settings h3{margin:0 0 12px;font-size:15px;color:#e7dfca}
body .nightfall-lobby .lobby-room-fields{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
body .nightfall-lobby .lobby-room-fields label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:#bec8bb;min-width:0}
body .nightfall-lobby .lobby-room-fields input,body .nightfall-lobby .lobby-room-fields select{box-sizing:border-box;width:100%;min-width:0;max-width:none;padding:10px 12px;border-radius:8px;border:1px solid #576755;background:#111e18;color:#eee7d5;font:inherit;font-size:13px}
body .nightfall-lobby .lobby-room-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px}
body .nightfall-lobby .lobby-room-actions button{min-height:36px;min-width:130px;padding:8px 14px;background:#2a4233;border:1px solid #63755c;border-radius:8px}
body .nightfall-lobby .lobby-password-remove{display:flex;gap:7px;align-items:center}body .nightfall-lobby .lobby-password-remove[hidden]{display:none}
body .nightfall-lobby .lobby-room-summary{margin:0;color:#bec8bb;font-size:14px}
body .lobby-host-block .lobby-room-fields{grid-template-columns:1fr}body .lobby-host-block .lobby-room-settings{margin:0 0 12px}
body .panel.lobby-password-panel{width:min(460px,calc(100% - 24px));box-sizing:border-box}body .lobby-password-panel form{display:flex;flex-direction:column;gap:12px}body .lobby-password-panel input{padding:12px;border:1px solid #63755c;border-radius:8px;background:#111e18;color:#eee7d5;font:inherit}
@media(max-width:700px){body .nightfall-lobby .lobby-room-fields{grid-template-columns:1fr 1fr}body .nightfall-lobby .lobby-room-fields label:first-child{grid-column:1/-1}}
body .nightfall-party-lobby .lobby-entry-actions{display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:16px 24px}
body .lobby-entry-actions #createLobby{height:48px;min-height:48px}
body .lobby-entry-actions .lobby-find-servers{grid-column:1/-1;justify-self:center;width:min(330px,100%);min-height:44px}
@media(max-width:560px){body .nightfall-party-lobby .lobby-entry-actions{grid-template-columns:1fr}}
body .nightfall-lobby .lobby-member-self{border:2px solid #9ed6aa;box-shadow:0 0 0 2px #385f47,inset 0 0 18px #8fcfa512;cursor:pointer}
body .nightfall-lobby .lobby-member-self:hover,body .nightfall-lobby .lobby-member-self:focus-visible{outline:2px solid #d5e5ba;outline-offset:3px;background:#253d2f}
body .nightfall-lobby .lobby-map-editable{cursor:pointer;border:1px solid #63755c;border-radius:10px;padding:12px;position:relative}
body .nightfall-lobby .lobby-map-editable:hover,body .nightfall-lobby .lobby-map-editable:focus-visible{outline:2px solid #a9cd99;outline-offset:2px}
body .lobby-map-editable small{color:#bec8bb;font-size:11px;display:block}
.player-profile-dialog .lobby-map-picker .lobby-biomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.player-profile-dialog .lobby-map-picker .lobby-biome{min-width:0;padding:10px;background:#1c2b24;border:1px solid #576755;border-radius:10px;color:#eee7d5}
.player-profile-dialog .lobby-map-picker .lobby-biome[aria-pressed=true]{border-color:#c8dca5;box-shadow:inset 0 0 0 1px #c8dca5}
.player-profile-dialog .lobby-map-picker .lobby-biome canvas{width:100%;height:auto}.player-profile-dialog .lobby-map-picker .lobby-biome small{display:block;margin-top:6px}
.player-profile-dialog .lobby-map-picker .lobby-biome:disabled{opacity:.45;cursor:not-allowed}
@media(max-width:600px){.player-profile-dialog .lobby-map-picker .lobby-biomes{grid-template-columns:repeat(2,minmax(0,1fr))}}
body .bottom,body.game-fullscreen .bottom{flex-wrap:wrap;row-gap:6px}
.server-test-controls{position:static;flex:0 0 100%;box-sizing:border-box;display:flex;align-items:center;justify-content:flex-start;gap:6px;flex-wrap:wrap;min-width:0;padding:4px 0;font-size:11px;color:#d5dfcc}
.server-test-controls[hidden],.server-test-controls button[hidden]{display:none}.server-test-controls button{padding:7px 10px;min-height:30px;background:#293f30;border:1px solid #607658;border-radius:6px;color:#eee7d5;font:inherit;cursor:pointer}
.server-test-controls button[aria-pressed=true]{border-color:#d2b66b;color:#f4d589}
.server-test-report{width:min(760px,94vw);max-height:85vh}.server-test-report textarea{box-sizing:border-box;width:100%;height:45vh;resize:vertical;background:#101b15;color:#d9e6d2;border:1px solid #63755c;border-radius:8px;padding:12px;font:11px monospace}.server-test-report>div{display:flex;gap:10px;margin-top:12px}
@media(max-width:600px){.server-test-controls{font-size:10px}.server-test-controls button{padding:6px}.server-test-controls span{max-width:120px}}

/* Compact achievement banners share the wave notification queue. */
body #waveBanner.achievement-popup{position:absolute;left:50%;right:auto;top:12px;transform:translateX(-50%) !important;box-sizing:border-box;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;align-items:center;width:min(330px,calc(100% - 24px));padding:10px 14px;border:1px solid #bba363;border-radius:10px;background:linear-gradient(120deg,#2c4036f5,#101e1cf5);box-shadow:0 4px 16px #0007,inset 0 0 0 3px #c9ad6410;text-align:left;color:#f5e9c5;pointer-events:none;z-index:8}
body .achievement-popup .achievement-popup-label{grid-column:2;grid-row:1;font-size:8px;line-height:1.4;letter-spacing:1.5px;font-weight:800;color:#e5c777;margin:0 0 3px}
body .achievement-popup .achievement-popup-medallion{grid-column:1;grid-row:1 / 3;display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin:0;border:1px solid #bba36388;border-radius:50%;background:#d6c27815}
body .achievement-popup .achievement-sprite{width:38px;height:38px;margin:0;image-rendering:auto;filter:drop-shadow(0 2px 3px #0008)}
body .achievement-popup strong{grid-column:2;grid-row:2;font-size:16px;line-height:1.2;letter-spacing:0;margin:0;text-shadow:0 1px 3px #0008;overflow-wrap:anywhere}
body .achievement-popup>span{display:block;grid-column:2;grid-row:3;margin:5px 0 0;font-size:11px;line-height:1.45;font-weight:400;letter-spacing:0;text-transform:none;color:#cbd8ce;white-space:normal;overflow-wrap:anywhere;text-shadow:none}
body .achievement-popup .achievement-popup-footer{display:none}
@media(max-width:600px),(pointer:coarse){body #waveBanner.achievement-popup{top:68px;width:min(290px,calc(100% - 24px));padding:8px 10px}body .achievement-popup strong{font-size:14px}}
@keyframes challenge-highlight-pulse {
    0%, 100% { border-color: #f5d65b; box-shadow: 0 0 0 2px #f5d65b, 0 0 18px #f5d65b66; }
    50% { border-color: #ad9440; box-shadow: 0 0 0 1px #ad944055; }
}
.chronicle-card.challenge-highlight { animation: challenge-highlight-pulse 1.5s ease-in-out 3; scroll-margin-block: 24px; }
@media (prefers-reduced-motion: reduce) {
    .chronicle-card.challenge-highlight { animation: none; border-color: #f5d65b; box-shadow: 0 0 0 2px #f5d65b; }
}

/* Combat stats float above the existing damage panel. */
.damage-meter{position:absolute}.combat-stats{position:absolute;bottom:calc(100% + 7px);right:0;display:flex;align-items:center;gap:6px;width:max-content;max-width:min(440px,85vw);padding:7px 10px;background:#081320e8;border:1px solid #496376;border-radius:7px;color:#dbe9f0;font:12px/1.6 system-ui;box-shadow:0 3px 14px #0008}.combat-stats-toggle{padding:0 5px;min-width:20px;font-size:24px;line-height:1;color:#dbe9f0;background:transparent;border:0}.combat-stats-values[hidden]{display:none}

#partyReviveCount{position:absolute;left:14px;top:76px;z-index:8;color:#e5d8ae;background:#081320d9;border:1px solid #496376;border-radius:6px;padding:5px 9px;font:12px system-ui;pointer-events:none}#partyReviveCount[hidden]{display:none}@media(max-width:700px){#partyReviveCount{top:66px;left:8px;font-size:11px}}

body #partyReviveCount{top:14px;left:12px}body #partyFrames{top:44px}@media(max-width:700px){body #partyReviveCount{top:12px;left:8px}body #partyFrames{top:40px}}

.combat-stats{align-items:center;justify-content:space-between;width:190px}.combat-stats-toggle{order:2;align-self:center}.combat-stats-values{display:grid;gap:2px}.combat-stats-values>div{white-space:nowrap}.combat-stats:has(.combat-stats-values[hidden]){width:auto}

/* Floating combat readouts stay readable without covering the forest. */
body .damage-meter,body .combat-stats,body .damage-meter .meter-row{border:0;box-shadow:none;backdrop-filter:none;text-shadow:0 1px 2px #000,0 0 5px #000}
body .damage-meter,body .combat-stats{background:transparent}
body .damage-meter .meter-row{margin:4px 0;background:linear-gradient(90deg,var(--row-tint,var(--tint)) var(--bar),#1b2a3766 var(--bar))}
body .meter-row:nth-child(8n+1){--row-tint:#456e87}
body .meter-row:nth-child(8n+2){--row-tint:#896247}
body .meter-row:nth-child(8n+3){--row-tint:#588747}
body .meter-row:nth-child(8n+4){--row-tint:#78618e}
body .meter-row:nth-child(8n+5){--row-tint:#8b4f65}
body .meter-row:nth-child(8n+6){--row-tint:#398782}
body .meter-row:nth-child(8n+7){--row-tint:#8a7a3d}
body .meter-row:nth-child(8n+8){--row-tint:#56629b}
body .combat-stats-toggle{text-shadow:0 1px 2px #000,0 0 5px #000}

html.phone-viewport-locked{touch-action:pan-x pan-y}
html.phone-viewport-locked body :is(input,textarea,select){font-size:max(16px,1em)}

/* Share the meter's left text edge and reserve the toggle's position when folded. */
body .damage-meter{--stats-meter-inset:7px}
body .combat-stats,body .combat-stats:has(.combat-stats-values[hidden]){right:var(--stats-meter-inset);width:calc(100% - var(--stats-meter-inset)*2);box-sizing:border-box;padding:7px 4px;text-align:left}
body .combat-stats-values{width:calc(100% - 28px)}
body .combat-stats-values[hidden]{display:grid;visibility:hidden}
body .combat-stats-toggle{position:absolute;right:0;top:50%;transform:translateY(-50%);margin:0;outline:none;border:0;box-shadow:none}
body .combat-stats-toggle:is(:hover,:focus,:focus-visible,:active){outline:none;border:0;box-shadow:none;background:transparent}
body .combat-stats-toggle:focus-visible{color:#f4d589}
@media(pointer:coarse){body .damage-meter{--stats-meter-inset:4px}body .combat-stats{padding-inline:3px}}

body .damage-meter>details{margin-right:24px}
body .damage-meter>details.meter-content-hidden{visibility:hidden;pointer-events:none}
body .damage-meter summary{list-style:none}
body .damage-meter summary::-webkit-details-marker{display:none}
body .damage-meter-toggle{position:absolute;right:var(--stats-meter-inset);top:50%;transform:translateY(-50%);margin:0;padding:0 5px;min-width:20px;font-size:24px;line-height:1;color:#dbe9f0;background:transparent;outline:none;border:0;box-shadow:none;text-shadow:0 1px 2px #000,0 0 5px #000}
body .damage-meter-toggle:is(:hover,:focus,:focus-visible,:active){outline:none;border:0;box-shadow:none;background:transparent}
body .damage-meter-toggle:focus-visible{color:#f4d589}

body .meter-caption{display:grid;grid-template-columns:minmax(0,1fr) 42px 43px;gap:5px;padding-inline:4px}
body .meter-caption>span{text-align:right}
@media(pointer:coarse){body .meter-caption{grid-template-columns:minmax(0,1fr) 30px 32px;gap:3px;padding-inline:3px}}

/* A quiet, narrow scroll rail for longer damage breakdowns. */
body .meter-rows{scrollbar-width:thin;scrollbar-color:#354a43 #0c171366}
@supports selector(::-webkit-scrollbar){
 body .meter-rows{scrollbar-width:auto;scrollbar-color:auto}
 body .meter-rows::-webkit-scrollbar{width:5px;height:5px}
 body .meter-rows::-webkit-scrollbar-track{background:#0c171366;border-radius:999px}
 body .meter-rows::-webkit-scrollbar-thumb{background:#354a43;border-radius:999px}
 body .meter-rows::-webkit-scrollbar-thumb:hover{background:#526b60}
 body .meter-rows::-webkit-scrollbar-button{display:none;width:0;height:0}
 body .meter-rows::-webkit-scrollbar-corner{background:transparent}
}

.phone-scroll-hint{position:fixed;z-index:100;transform:translateX(-50%);pointer-events:none;color:#e4d8ac;font:bold 28px/24px system-ui;text-shadow:0 1px 3px #000,0 0 6px #000}
.phone-scroll-hint[hidden]{display:none}
.phone-scroll-hint svg{display:block;width:24px;height:24px;filter:drop-shadow(0 1px 3px #000)}
.phone-scroll-hint-up svg{transform:rotate(180deg)}
@media(pointer:coarse){body .combat-stats{font-size:9px;line-height:1.3;padding-block:4px}body .combat-stats-values{gap:1px}}
@media(pointer:coarse){body.arena-shell[data-game-state="playing"] #pause.floating-pause{left:calc(env(safe-area-inset-left,0px) + 8px);right:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);width:40px;min-width:40px;height:40px;min-height:40px;padding:8px;transform:none}}

body .profile-identity-links:has(.profile-logout-row){flex-direction:column;align-items:flex-end;gap:4px}

html.phone-viewport-locked body .sprite-load-notice{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 8px);height:auto;min-height:0;width:max-content;max-width:calc(100vw - 24px);padding:0;gap:8px;border:0;border-radius:0;background:transparent;box-shadow:none;font:11px/1.4 system-ui;text-shadow:0 1px 3px #000}
html.phone-viewport-locked body .sprite-load-notice button{font-size:11px;min-height:24px;padding:3px 6px;margin:0}


/* Compact mastery paths: bare circular nodes and real prerequisite links. */
body .panel.character-talents-panel { height:min(900px,94vh); display:flex; flex-direction:column; overflow:hidden; padding:24px; }
.character-talents-panel .progression-navigation { flex:none; }
.character-talents-shell { flex:1; min-height:0; overflow:hidden; }
.character-talents-sidebar { overflow-y:auto; }
.character-talents-content { display:flex; flex-direction:column; min-height:0; }
.character-talents-content header { flex:none; }
.character-talents-panel .talent-layout { grid-template-columns:minmax(0,1fr) 230px; flex:1; min-height:0; overflow:hidden; }
.mastery-paths { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)); gap:12px; overflow:auto; align-items:start; padding:10px 10px 16px; scrollbar-width:thin; }
.mastery-path { --path-color:#e6c775; border:0; border-radius:0; background:none; padding:0; min-width:0; }
.mastery-path:nth-child(2) { --path-color:#81cbb5; } .mastery-path:nth-child(3) { --path-color:#b59de8; } .mastery-path:nth-child(4) { --path-color:#80badf; }
.mastery-path h3 { text-align:center; color:var(--path-color); font-size:16px; margin:0 0 4px; }
.mastery-spent { display:block; text-align:center; color:var(--path-color); opacity:.8; font-size:11px; }
.mastery-track { height:520px; position:relative; }
.mastery-track svg { position:absolute; inset:0; width:100%; height:520px; pointer-events:none; }
.mastery-track path { fill:none; stroke:var(--path-color); stroke-width:1.3; opacity:.28; }
.mastery-track path.open { opacity:.9; }
.mastery-level { position:absolute; left:0; font-size:9px; letter-spacing:.8px; color:#96a4ae; }
body .mastery-paths .talent-orb { position:absolute; transform:translate(-50%,-50%); width:42px; height:42px; margin:0; padding:0; display:grid; place-items:center; border:2px solid #77828a; border-radius:50%; background:#0d1923; box-shadow:none; outline:none; }
body .mastery-paths .talent-orb .item-icon { width:26px; height:26px; margin:0; padding:0; border:0; background-color:transparent; object-fit:contain; }
body .mastery-paths .talent-orb b { display:none; }
body .mastery-paths .talent-rank { position:absolute; top:35px; left:50%; transform:translateX(-50%); min-width:25px; text-align:center; font-size:10px; line-height:14px; color:var(--path-color); background:#0c1721; border:1px solid var(--path-color); border-radius:8px; padding:0 3px; }
body .mastery-paths .talent-orb.locked { opacity:.65; filter:grayscale(.7); }
body .mastery-paths .talent-orb.selected,body .mastery-paths .talent-orb:focus-visible { border-color:var(--path-color); outline:2px solid var(--path-color); outline-offset:4px; background:#142331; }
body .mastery-paths .talent-orb.mastered { border-color:var(--path-color); background:color-mix(in srgb,var(--path-color) 30%,#0d1923); }
.character-talents-panel .talent-detail { overflow:auto; background:none; border:0; border-left:1px solid #60718055; border-radius:0; padding:18px; align-self:stretch; }
.character-talents-panel .hint { flex:none; font-size:11px; line-height:1.5; margin:10px 0 0; }
@media(max-width:1100px) { .character-talents-panel .talent-layout { grid-template-columns:minmax(0,1fr) 200px; } }
@media(max-width:700px) { body .panel.character-talents-panel { padding:12px; height:96vh; } .character-talents-shell { display:flex; flex-direction:column; gap:8px; } .character-talents-sidebar { flex:none; display:flex; overflow-x:auto; border:0; padding:0; } .character-talents-sidebar h3,.character-talents-sidebar p { display:none; } .character-talents-sidebar button { min-width:145px; } .character-talents-content { flex:1; } .character-talents-content header { padding:0 0 8px; } .character-talents-content header h2 { font-size:22px; } .character-talents-content header p { margin:4px 0; } .character-talents-panel .talent-layout { display:flex; flex-direction:column; overflow:hidden; } .mastery-paths { flex:1; min-height:0; overflow:auto; grid-template-columns:repeat(4,150px); } .character-talents-panel .talent-detail { flex:none; min-height:0; height:180px; border-left:0; border-top:1px solid #60718055; padding:12px; } .character-talents-panel .talent-detail h3 { margin:4px 0; } .character-talents-panel .talent-detail p { margin:6px 0; font-size:12px; } }
@media(max-height:500px) and (min-width:701px) { body .panel.character-talents-panel { padding:10px; height:96vh; } .character-talents-content header { padding:0 0 4px; } .character-talents-content header p { margin:2px 0; } .character-talents-panel .hint { display:none; } }

/* Level precedes the portrait; the skin control keeps its own right-hand slot. */
body .hero-card > .character-level-ring { position:static; transform:none; order:-1; align-self:center; margin:0; }
body .hero-card[data-hero] > b { padding-right:0; }
body.arena-shell .cinematic-wanderers .hero-card { padding-right:32px; }
@media(max-width:700px) { body.arena-shell .cinematic-wanderers .hero-card { gap:4px; } body.arena-shell .cinematic-wanderers .hero-card > .character-level-ring { width:22px; height:22px; font-size:11px; border-width:2px; } body.arena-shell .cinematic-wanderers .hero-card canvas { width:26px; height:26px; } body.arena-shell .cinematic-wanderers .hero-card b { font-size:12px; } }

body.arena-shell .panel-talents .mastery-paths .talent-orb { background:#0d1923; border-color:#78848d; }
body.arena-shell .panel-talents .mastery-paths .talent-orb.selected,body.arena-shell .panel-talents .mastery-paths .talent-orb.mastered { border-color:var(--path-color); background:color-mix(in srgb,var(--path-color) 20%,#0d1923); }
body.arena-shell .panel-talents .mastery-paths .talent-rank { bottom:auto; background:#0c1721; border-color:var(--path-color); }
body .mastery-paths .talent-orb.locked .item-icon { opacity:.8; filter:none; }
body.arena-shell .panel-talents.character-talents-panel .talent-detail { background:none; }
.character-talents-sidebar button { background:#10202c; }
.character-talents-sidebar button[aria-pressed=true] { background:#24313a; }

/* Small enchanted tiles, with beveled rims and a quiet etched centre. */
body.arena-shell .panel-talents .mastery-paths .talent-orb { width:46px; height:46px; border:1px solid color-mix(in srgb,var(--path-color) 48%,#425465); border-radius:9px; background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--path-color) 16%,#172735),#09131d 85%); box-shadow:inset 0 1px 0 #ffffff24,inset 0 -2px 0 #0008,0 3px 5px #0005; }
body.arena-shell .panel-talents .mastery-paths .talent-orb::before { content:""; position:absolute; inset:4px; border:1px solid color-mix(in srgb,var(--path-color) 18%,transparent); border-radius:5px; background:repeating-linear-gradient(135deg,transparent 0 7px,#ffffff03 7px 8px); pointer-events:none; }
body.arena-shell .panel-talents .mastery-paths .talent-orb .item-icon { width:30px; height:30px; position:relative; z-index:1; filter:drop-shadow(0 2px 1px #0008); }
body.arena-shell .panel-talents .mastery-paths .talent-orb.selected { outline:1px solid var(--path-color); outline-offset:3px; background:radial-gradient(ellipse at top,color-mix(in srgb,var(--path-color) 32%,#152432),#0a1722); }
body.arena-shell .panel-talents .mastery-paths .talent-orb.mastered { background:linear-gradient(145deg,color-mix(in srgb,var(--path-color) 38%,#172735),#10212c); }
body.arena-shell .panel-talents .mastery-paths .talent-rank { top:40px; z-index:2; }

body .nightfall-lobby { position:relative; padding-bottom:34px; }
.lobby-release { position:absolute; right:20px; bottom:9px; color:#9caeb9; font:11px/1.4 system-ui; opacity:.85; pointer-events:none; }
@media(max-width:700px) { .lobby-release { right:12px; bottom:7px; font-size:10px; } }

.mastery-paths { grid-template-columns:48px repeat(4,minmax(150px,1fr)); }
.mastery-level-rail { position:relative; height:564px; }
.mastery-level-rail span { position:absolute; left:0; transform:translateY(-50%); color:#a8b6c1; font-size:10px; text-align:center; line-height:1.5; width:40px; }
.mastery-level-rail strong { font-size:14px; color:#d7e3e9; }
.mastery-help { display:inline-grid; place-items:center; width:20px; height:20px; min-height:0; margin:0 0 0 3px; padding:0; border:1px solid #80badf; border-radius:50%; background:transparent; color:#b6d7e9; font:12px system-ui; vertical-align:middle; }
body.arena-shell .panel-talents .mastery-paths .talent-orb.locked { opacity:1; filter:none; background:linear-gradient(145deg,#394048,#252b32); border-color:#727b83; box-shadow:inset 0 1px 0 #ffffff20,0 2px 4px #0005; }
body.arena-shell .panel-talents .mastery-paths .talent-orb.locked::before { border-color:#7a83894d; }
body.arena-shell .panel-talents .mastery-paths .talent-orb.locked .item-icon { opacity:.4; filter:grayscale(1); }
body.arena-shell .panel-talents .mastery-paths .talent-orb.locked .talent-rank { color:#c1c7cc; border-color:#727b83; }
@media(max-width:700px) { .mastery-paths { grid-template-columns:42px repeat(4,150px); } }

.mastery-camera { min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.mastery-zoom { display:flex; justify-content:flex-end; gap:5px; height:30px; flex:none; }
.mastery-zoom button { padding:2px 8px; margin:0; min-height:24px; font:11px system-ui; }
.mastery-viewport { position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none; }
.mastery-viewport .mastery-paths { position:absolute; width:800px; height:600px; box-sizing:border-box; left:0; top:0; transform-origin:0 0; overflow:visible; grid-template-columns:48px repeat(4,minmax(0,1fr)); }
@media(max-width:700px) { .mastery-camera { flex:1; } .mastery-viewport .mastery-paths { flex:none; grid-template-columns:48px repeat(4,minmax(0,1fr)); } }

.mastery-paths > .mastery-path:nth-child(2) { --path-color:#e6c775; }
.mastery-paths > .mastery-path:nth-child(3) { --path-color:#81cbb5; }
.mastery-paths > .mastery-path:nth-child(4) { --path-color:#b59de8; }
.mastery-paths > .mastery-path:nth-child(5) { --path-color:#80badf; }
.mastery-zoom button { background:#142a3b; color:#d3e2ec; border:1px solid #526d80; border-radius:5px; }

/* Shared slim scrollbar, matching the damage meter. */
html,body,body *{scrollbar-width:thin;scrollbar-color:#354a43 #0c171366}
@supports selector(::-webkit-scrollbar){
 html,body,body *{scrollbar-width:auto;scrollbar-color:auto}
 body::-webkit-scrollbar,body *::-webkit-scrollbar{width:5px;height:5px}
 body::-webkit-scrollbar-track,body *::-webkit-scrollbar-track{background:#0c171366;border-radius:999px}
 body::-webkit-scrollbar-thumb,body *::-webkit-scrollbar-thumb{background:#354a43;border-radius:999px}
 body::-webkit-scrollbar-thumb:hover,body *::-webkit-scrollbar-thumb:hover{background:#526b60}
 body::-webkit-scrollbar-button,body *::-webkit-scrollbar-button{display:none;width:0;height:0}
 body::-webkit-scrollbar-corner,body *::-webkit-scrollbar-corner{background:transparent}
}

body .chronicle-help{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;min-height:0;padding:0;margin:0 0 0 8px;border-radius:50%;font:600 14px/1 system-ui;vertical-align:middle}

body .character-talents-content>header{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px}
body .talent-available-points{color:#efd38b;font:700 clamp(22px,2vw,32px)/1.2 Georgia,serif;text-align:center;text-shadow:0 2px 8px #0009}
body .character-talents-content>header .character-xp{justify-self:end;max-width:100%;min-width:0}
@media(max-width:900px){body .character-talents-content>header{grid-template-columns:1fr 1fr}body .talent-available-points{grid-column:1/-1;grid-row:1;font-size:24px}body .character-talents-content>header .character-xp{width:100%}}

/* Character XP stays beside each party portrait and is available on hover. */
body .nightfall-lobby .lobby-member{position:relative}
body .nightfall-lobby .lobby-member>.character-level-ring{position:absolute;top:12px;left:12px;z-index:2;cursor:help}
.character-level-ring:focus-visible{outline:2px solid #f0d88e;outline-offset:3px}
body .player-profile-dialog.character-picker{width:min(500px,calc(100vw - 40px));max-width:500px;max-height:calc(100dvh - 40px);overflow:auto;background:linear-gradient(135deg,#101c24f2,#071018e8);border:1px solid #bda76e55;border-radius:4px;color:#d9e5ef}
body .character-picker .profile-characters{display:flex;flex-direction:column;gap:4px}
body .character-picker .profile-character-card{position:relative;min-width:0;width:100%}
body.arena-shell .character-picker .hero-card-shell>.hero-card{width:100%;min-height:48px;padding:4px 32px 4px 12px}
body .character-picker .hero-card>.character-level-ring{position:static;transform:none;order:-1;margin:0;width:30px;height:30px;font-size:13px;cursor:help}
body .character-picker .skin-toggle{background:transparent;border:0;box-shadow:none}