/* Game chrome, tab art, modals, forge rarity + Clash strike animations.
   Utility classes come from /static/css/tailwind.css (built via npm run build:css). */

@font-face { font-family: 'MainFont'; src: url('/static/fonts/main.ttf?v=1d257d0dfd') format('truetype'); }
@font-face { font-family: 'HeadingFont'; src: url('/static/fonts/heading.ttf?v=1d257d0dfd') format('truetype'); }
@font-face {
    font-family: 'Dico';
    src: url('/static/fonts/Dico.ttf?v=1d257d0dfd') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'Alagard';
    src: url('/static/fonts/alagard.ttf?v=1d257d0dfd') format('truetype');
    font-display: swap;
}

/* Pixel cursors (scripts/build_cursor_art.py): gold arrow by default, gold hand on clickables.
   The Forge hammer still hides both over the anvil. */
:root {
    --cursor-arrow: url('/static/images/ui/cursor/arrow.png?v=1d257d0dfd') 2 2, default;
    --cursor-hand: url('/static/images/ui/cursor/hand.png?v=1d257d0dfd') 10 2, pointer;
}
@supports (cursor: -webkit-image-set(url('/static/images/ui/cursor/arrow.png?v=1d257d0dfd') 1x) 2 2, default) {
    :root {
        --cursor-arrow: -webkit-image-set(url('/static/images/ui/cursor/arrow.png?v=1d257d0dfd') 1x, url('/static/images/ui/cursor/arrow@2x.png?v=1d257d0dfd') 2x) 2 2, default;
        --cursor-hand: -webkit-image-set(url('/static/images/ui/cursor/hand.png?v=1d257d0dfd') 1x, url('/static/images/ui/cursor/hand@2x.png?v=1d257d0dfd') 2x) 10 2, pointer;
    }
}
@supports (cursor: image-set(url('/static/images/ui/cursor/arrow.png?v=1d257d0dfd') 1x) 2 2, default) {
    :root {
        --cursor-arrow: image-set(url('/static/images/ui/cursor/arrow.png?v=1d257d0dfd') 1x, url('/static/images/ui/cursor/arrow@2x.png?v=1d257d0dfd') 2x) 2 2, default;
        --cursor-hand: image-set(url('/static/images/ui/cursor/hand.png?v=1d257d0dfd') 1x, url('/static/images/ui/cursor/hand@2x.png?v=1d257d0dfd') 2x) 10 2, pointer;
    }
}
html {
    cursor: var(--cursor-arrow);
}
body {
    margin: 0;
    background-color: #121212;
    background-image: url('/static/images/bg_splash.webp?v=1d257d0dfd');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'MainFont', Segoe UI, sans-serif;
    color: white;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* -------------------------------------------------------------------------
   SKELETON PLACEHOLDERS: reserve the size/shape of async content (leaderboard
   rows, quest cards, history entries) before it loads so nothing pops in or
   shifts the layout. JS replaces these nodes' innerHTML wholesale once real
   data arrives, so no JS wiring is required to "clear" them.
   ------------------------------------------------------------------------- */
.skel-block, .skel-line, .skel-circle {
    background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.14) 37%, rgba(255,255,255,0.06) 63%);
    background-size: 400% 100%;
    animation: skel-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}
.skel-circle { border-radius: 50%; }
.skel-line { height: 11px; }
@keyframes skel-shimmer {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}
@media (prefers-reduced-motion: reduce) {
    .skel-block, .skel-line, .skel-circle { animation: none; background: rgba(255,255,255,0.08); }
}
/* Weapon-row skeleton: mirrors leaderboard/entry markup (icon + two lines). */
.skel-row-weapon {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}
.skel-row-weapon .skel-row-top { display: flex; align-items: center; gap: 8px; }
.skel-row-weapon .skel-row-top .skel-line:first-child { width: 18px; }
.skel-row-weapon .skel-row-top .skel-line:last-child { flex: 1; max-width: 140px; }
.skel-row-weapon .skel-row-bottom { display: flex; align-items: center; gap: 12px; padding-left: 28px; }
.skel-row-weapon .skel-icon { width: 40px; height: 40px; flex-shrink: 0; }
.skel-row-weapon .skel-row-bottom .skel-line { flex: 1; max-width: 220px; }
/* Single-line stat-row skeleton: loadouts / quests / streak / RNGelo boards. */
.skel-row-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin-bottom: 8px;
}
.skel-row-stat .skel-line:first-child { width: 24px; }
.skel-row-stat .skel-line:nth-child(2) { flex: 1; max-width: 160px; }
.skel-row-stat .skel-line:last-child { width: 50px; margin-left: auto; }
/* -------------------------------------------------------------------------
   VISUAL COHESION: shared panel / button / toggle / pixel-corner classes.
   One place to define chrome that used to be re-typed as one-off utility
   strings (raw hex colors, mismatched radii, bespoke shadows) across
   templates. Prefer these over new arbitrary-value utility strings.
   ------------------------------------------------------------------------- */

/* Standard elevated dark panel: forge config box, home identity plate, stat
   panels, leaderboard/quest rows. */
.panel {
    background-color: var(--color-bgCard, #1f1f1f);
    border: 2px solid var(--color-borderMed, #333333);
    border-radius: var(--radius-panelLg, 14px);
    box-shadow: var(--shadow-panel, 0 5px 15px rgba(0, 0, 0, 0.5));
    box-sizing: border-box;
}

/* Recessed panel: slot wells, inline readouts sitting inside a .panel. */
.panel-solid {
    background-color: var(--color-bgSlot, #181818);
    border: 1px solid var(--color-borderDark, #222222);
    border-radius: var(--radius-panel, 10px);
    box-sizing: border-box;
}

/* Leaderboard rows that belong to the viewing player. Profile-board rows are
   server-rendered HTML that Tailwind never scans, so this lives here. Shadows
   rather than background keep the podium's inline medal tint visible. */
.lb-own-entry,
.lb-own-entry:hover {
    border-color: color-mix(in srgb, var(--color-luckGreen, #2ecc71) 55%, transparent);
    box-shadow:
        inset 3px 0 0 var(--color-luckGreen, #2ecc71),
        inset 0 0 18px color-mix(in srgb, var(--color-luckGreen, #2ecc71) 12%, transparent);
}
.lb-own-tag {
    flex-shrink: 0;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--color-luckGreen, #2ecc71) 60%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-luckGreen, #2ecc71) 14%, transparent);
    color: var(--color-luckGreen, #2ecc71);
    font-family: var(--font-heading, inherit);
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Pixel-corner accent: a lighter echo of the loot card's ornate pixel frame
   for non-card chrome (panel headers, modal panels). Purely decorative
   background layers; add to any positioned element alongside .panel. */
.pixel-panel {
    --pixel-panel-color: var(--color-accentGold, #ffd966);
    position: relative;
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px;
    background-position:
        top 4px left 4px,
        top 4px right 4px,
        bottom 4px left 4px,
        bottom 4px right 4px;
    background-image:
        linear-gradient(var(--pixel-panel-color), var(--pixel-panel-color)),
        linear-gradient(var(--pixel-panel-color), var(--pixel-panel-color)),
        linear-gradient(var(--pixel-panel-color), var(--pixel-panel-color)),
        linear-gradient(var(--pixel-panel-color), var(--pixel-panel-color));
    image-rendering: pixelated;
}

/* Shared pixel button: stepped corners, a solid rim and a dark tinted fill,
   matching the Home inspect Lock / Salvage tiles. Only chrome lives here;
   display, padding and font size stay with each call site's Tailwind
   utilities (this sheet is unlayered, so layout props here would beat them).
   Tone = --pb-edge (rim), --pb-fill-a/b (fill gradient), --pb-text. */
.btn,
.subnav-btn,
.upgrade-action-btn,
.loot-card-repair-socket-well,
.settings-esc-resume,
.settings-esc-panel .settings-menu-sound,
.settings-esc-panel .settings-menu-item,
.settings-volume-track,
.stash-dock-salvage,
.onboard-primary,
.clash-beat-pill {
    --pb-px: 2px;
    --pb-edge: #8a8a96;
    --pb-fill-a: #232329;
    --pb-fill-b: #16161a;
    --pb-text: #d8d8e0;
    appearance: none;
    border: 0;
    border-radius: 0;
    color: var(--pb-text);
    background:
        linear-gradient(var(--pb-edge), var(--pb-edge)) left var(--pb-px) top var(--pb-px) / var(--pb-px) calc(var(--pb-px) * 2) no-repeat,
        linear-gradient(var(--pb-edge), var(--pb-edge)) left var(--pb-px) top var(--pb-px) / calc(var(--pb-px) * 2) var(--pb-px) no-repeat,
        linear-gradient(var(--pb-edge), var(--pb-edge)) right var(--pb-px) top var(--pb-px) / var(--pb-px) calc(var(--pb-px) * 2) no-repeat,
        linear-gradient(var(--pb-edge), var(--pb-edge)) right var(--pb-px) top var(--pb-px) / calc(var(--pb-px) * 2) var(--pb-px) no-repeat,
        linear-gradient(var(--pb-edge), var(--pb-edge)) left var(--pb-px) bottom var(--pb-px) / var(--pb-px) calc(var(--pb-px) * 2) no-repeat,
        linear-gradient(var(--pb-edge), var(--pb-edge)) left var(--pb-px) bottom var(--pb-px) / calc(var(--pb-px) * 2) var(--pb-px) no-repeat,
        linear-gradient(var(--pb-edge), var(--pb-edge)) right var(--pb-px) bottom var(--pb-px) / var(--pb-px) calc(var(--pb-px) * 2) no-repeat,
        linear-gradient(var(--pb-edge), var(--pb-edge)) right var(--pb-px) bottom var(--pb-px) / calc(var(--pb-px) * 2) var(--pb-px) no-repeat,
        linear-gradient(180deg, var(--pb-fill-a) 0%, var(--pb-fill-b) 100%);
    box-shadow: inset 0 0 0 var(--pb-px) var(--pb-edge);
    clip-path: polygon(
        0 calc(var(--pb-px) * 2), var(--pb-px) calc(var(--pb-px) * 2),
        var(--pb-px) var(--pb-px), calc(var(--pb-px) * 2) var(--pb-px),
        calc(var(--pb-px) * 2) 0, calc(100% - var(--pb-px) * 2) 0,
        calc(100% - var(--pb-px) * 2) var(--pb-px), calc(100% - var(--pb-px)) var(--pb-px),
        calc(100% - var(--pb-px)) calc(var(--pb-px) * 2), 100% calc(var(--pb-px) * 2),
        100% calc(100% - var(--pb-px) * 2), calc(100% - var(--pb-px)) calc(100% - var(--pb-px) * 2),
        calc(100% - var(--pb-px)) calc(100% - var(--pb-px)), calc(100% - var(--pb-px) * 2) calc(100% - var(--pb-px)),
        calc(100% - var(--pb-px) * 2) 100%, calc(var(--pb-px) * 2) 100%,
        calc(var(--pb-px) * 2) calc(100% - var(--pb-px)), var(--pb-px) calc(100% - var(--pb-px)),
        var(--pb-px) calc(100% - var(--pb-px) * 2), 0 calc(100% - var(--pb-px) * 2));
    image-rendering: pixelated;
    cursor: var(--cursor-hand);
    transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
:is(.btn, .subnav-btn, .upgrade-action-btn, .settings-esc-resume, .stash-dock-salvage, .onboard-primary):hover:not(:disabled, [aria-disabled="true"]) {
    transform: translateY(-2px);
    filter: brightness(1.18);
}
:is(.btn, .subnav-btn, .upgrade-action-btn, .settings-esc-resume, .stash-dock-salvage, .onboard-primary):active:not(:disabled, [aria-disabled="true"]) {
    transform: translateY(1px);
}
:is(.btn, .subnav-btn, .upgrade-action-btn, .settings-esc-resume, .stash-dock-salvage, .onboard-primary):focus-visible {
    --pb-edge: #ffffff;
    outline: none;
}
:is(.btn, .subnav-btn, .upgrade-action-btn, .settings-esc-resume, .stash-dock-salvage, .onboard-primary):is(:disabled, [aria-disabled="true"]) {
    filter: grayscale(1);
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}
/* Links can't be disabled; core/connection.js sets aria-disabled instead. */
a.btn[aria-disabled="true"] {
    pointer-events: none;
}
@media (min-width: 768px) {
    .btn:not(.btn-sm),
    .subnav-btn,
    .settings-esc-resume,
    .settings-esc-panel .settings-menu-sound,
    .settings-esc-panel .settings-menu-item,
    .settings-volume-track,
    .onboard-primary {
        --pb-px: 3px;
    }
}
@media (prefers-reduced-motion: reduce) {
    :is(.btn, .subnav-btn, .upgrade-action-btn, .settings-esc-resume, .stash-dock-salvage, .onboard-primary) {
        transition: none;
    }
}

.btn-gold,
.btn-ghost,
.subnav-btn.is-active,
.subnav-btn.active,
.settings-esc-resume,
.onboard-primary {
    --pb-edge: var(--color-accentGold, #ffd966);
    --pb-fill-a: #2a2410;
    --pb-fill-b: #17140a;
    --pb-text: var(--color-accentGold, #ffd966);
}
.btn-primary,
.btn-ok {
    --pb-edge: var(--color-luckGreen, #2ecc71);
    --pb-fill-a: #11291b;
    --pb-fill-b: #09160e;
    --pb-text: #7fe3a8;
}
.btn-danger {
    --pb-edge: var(--color-danger, #ff4757);
    --pb-fill-a: #2e1317;
    --pb-fill-b: #17090c;
    --pb-text: #ff939c;
}
.btn-entropy,
.upgrade-action-btn,
.stash-dock-salvage {
    --pb-edge: var(--color-entropyBase, #a335ee);
    --pb-fill-a: #2a1838;
    --pb-fill-b: #150e1c;
    --pb-text: #d9a8ff;
}
.btn-silver {
    --pb-edge: var(--color-qualitySilver, #e2e8f0);
    --pb-fill-a: #26282d;
    --pb-fill-b: #15161a;
    --pb-text: var(--color-qualitySilver, #e2e8f0);
}
.btn-discord {
    --pb-edge: var(--color-discordBase, #5865F2);
    --pb-fill-a: #1b1e3a;
    --pb-fill-b: #0e1022;
    --pb-text: #b3b9ff;
}
.btn-muted {
    --pb-edge: #5a5a64;
    --pb-text: var(--color-textMuted, #888888);
}

/* Segmented sub-nav (Home's Inventory / Stats / Mechanics row); JS toggles
   .is-active, which swaps to the gold tone above. */
.subnav-btn {
    --pb-edge: #55555e;
    --pb-text: var(--color-textMuted, #888888);
}
:where(#landing-stage) .subnav-btn {
    --pb-text: var(--color-textSubtle, #a5a5a5);
}
.subnav-btn:hover:not(.is-active, .active) {
    --pb-edge: #8a8a96;
    --pb-text: #dddddd;
}
/* A running boost keeps its tone instead of greying out like other disabled buttons. */
.btn.is-active:disabled {
    filter: none;
    opacity: 0.7;
    cursor: var(--cursor-arrow);
}
/* clip-path hides the tour's outline/glow, so pulse the rim instead. */
:is(.btn, .subnav-btn, .upgrade-action-btn, .settings-esc-resume, .stash-dock-salvage, .onboard-primary).onboard-target-live {
    --pb-edge: #ffd966;
    box-shadow: inset 0 0 0 var(--pb-px) var(--pb-edge) !important;
    animation: pixel-btn-tour-pulse 1.1s ease-in-out infinite;
}
@keyframes pixel-btn-tour-pulse {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.45); }
}
@media (prefers-reduced-motion: reduce) {
    :is(.btn, .subnav-btn, .upgrade-action-btn, .settings-esc-resume, .stash-dock-salvage, .onboard-primary).onboard-target-live {
        animation: none;
    }
}

/* Shared modal panel: footer-matching gold pixel rim (canvas) + Dico titles. */
.modal-panel {
    position: relative;
    isolation: isolate;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
}
.modal-pixel-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
/* Modal headings → Alagard (pixel-art display); body/labels → Dico. */
.modal-panel h2,
.modal-panel .modal-title,
.modal-panel #info-tooltip-modal-title,
.modal-panel #game-dialog-title,
.modal-panel .settings-esc-title,
.modal-panel .activity-log-title,
.modal-panel .stash-dock-modal-header h2,
.modal-panel #clash-result-title,
.modal-panel .clash-end-heading {
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
    letter-spacing: 0.04em;
    text-transform: none;
}
/* Body copy inside modal panels uses Dico */
.modal-panel p,
.modal-panel .font-main,
.modal-panel .clash-result-sub,
.modal-panel .settings-esc-hint,
.modal-panel #info-tooltip-modal-body,
.modal-panel #game-dialog-body,
.modal-panel #site-doc-body {
    font-family: 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
}
.clash-history-panel {
    width: min(92vw, 520px);
    max-height: min(70vh, 560px);
}
.clash-history-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}
.clash-history-list::-webkit-scrollbar {
    width: 8px;
}
.clash-history-list::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 999px;
}
@media (min-width: 768px) {
    .clash-history-panel {
        width: min(92vw, 640px);
        max-height: min(62vh, 560px);
    }
}
.mail-panel {
    width: min(94vw, 520px);
    height: min(80vh, 620px);
}
@media (min-width: 768px) {
    .mail-panel {
        width: min(92vw, 820px);
        height: min(74vh, 620px);
    }
}
.mail-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}
.home-mail-btn.is-pending > img,
.nav-tab.mail-tab-ready > .ui-icon,
.landing-mail-badge > img,
.landing-bulletin-fab-icon {
    animation: quest-tab-glow 1.6s ease-in-out infinite;
}
.landing-bulletin-fab {
    box-shadow: -4px 0 14px rgba(255, 217, 102, 0.28), 0 6px 18px rgba(0, 0, 0, 0.45);
}
.landing-bulletin-fab.is-unread {
    animation: bulletin-fab-glow 1.6s ease-in-out infinite;
}
@keyframes bulletin-fab-glow {
    0%, 100% { box-shadow: -4px 0 14px rgba(255, 217, 102, 0.3), 0 6px 18px rgba(0, 0, 0, 0.45); }
    50% { box-shadow: -6px 0 26px rgba(255, 217, 102, 0.75), 0 6px 18px rgba(0, 0, 0, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
    .home-mail-btn.is-pending > img,
    .nav-tab.mail-tab-ready > .ui-icon,
    .landing-mail-badge > img,
    .landing-bulletin-fab-icon,
    .landing-bulletin-fab.is-unread {
        animation: none;
    }
}

/* Landing -> game hand-off after Play (ui/stage-transition.js). The landing
   gathers into its glow, a veil with the crest covers the stage swap, then
   irises open while the game shell settles in. Only opacity on #app-content:
   a transform there would re-anchor the fixed scene layers inside it. */
@property --veil-iris {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%;
}
#landing-stage.is-leaving {
    pointer-events: none;
}
#landing-stage.is-leaving > :not(.landing-glow, [aria-hidden="true"]) {
    animation: landing-leave 380ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
#landing-stage.is-leaving > .landing-brand {
    animation: landing-brand-leave 420ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#landing-stage.is-leaving > .landing-glow {
    animation: landing-glow-bloom 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes landing-leave {
    to { opacity: 0; transform: translateY(14px) scale(0.97); }
}
@keyframes landing-brand-leave {
    to { opacity: 0; transform: translateY(-12px) scale(1.08); }
}
@keyframes landing-glow-bloom {
    to { opacity: 0.5; transform: scale(2.6); }
}

.stage-veil {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    overflow: hidden;
    pointer-events: auto;
}
.stage-veil > * {
    grid-area: 1 / 1;
}
.stage-veil.is-revealing {
    pointer-events: none;
}
.stage-veil-shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #251e0e 0%, var(--color-bgMain, #121212) 58%);
    opacity: 0;
}
/* Mask only while opening: WebKit paints a zero-length mask gradient as fully transparent once the
   game's layers sit under the veil, which uncovered the stage swap. The iris starts above 0% for the same reason. */
.stage-veil.is-revealing .stage-veil-shade {
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--veil-iris) - 14%), #000 var(--veil-iris));
    mask-image: radial-gradient(circle at 50% 50%, transparent calc(var(--veil-iris) - 14%), #000 var(--veil-iris));
}
.stage-veil-glow {
    width: min(72vmin, 540px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 217, 102, 0.5) 0%, rgba(255, 217, 102, 0.16) 38%, transparent 70%);
    opacity: 0;
}
.stage-veil-crest {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    opacity: 0;
}
.stage-veil-logo {
    width: 96px;
    height: 96px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 22px rgba(255, 217, 102, 0.55));
}
.stage-veil-mote {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    image-rendering: pixelated;
    opacity: 0;
    animation: stage-veil-mote 760ms cubic-bezier(0.22, 1, 0.36, 1) calc(320ms + var(--mote-delay, 0ms)) forwards;
}
.stage-veil.is-covering .stage-veil-shade {
    animation: stage-veil-shade-in 480ms ease-in 120ms forwards;
}
.stage-veil.is-covering .stage-veil-glow {
    animation:
        stage-veil-glow-in 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards,
        stage-veil-breathe 2.4s ease-in-out 600ms infinite;
}
.stage-veil.is-covering .stage-veil-crest {
    animation: stage-veil-crest-in 520ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards;
}.stage-veil.is-revealing .stage-veil-shade {
    animation: stage-veil-iris 820ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.stage-veil.is-revealing .stage-veil-glow {
    animation: stage-veil-glow-out 620ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stage-veil.is-revealing .stage-veil-crest {
    animation: stage-veil-crest-out 560ms cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes stage-veil-shade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes stage-veil-shade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes stage-veil-glow-in {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes stage-veil-breathe {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.08); }
}
@keyframes stage-veil-crest-in {
    from { opacity: 0; transform: scale(0.82); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes stage-veil-mote {
    0% { opacity: 0; transform: rotate(var(--mote-angle)) translateX(0) rotate(calc(var(--mote-angle) * -1)) scale(0.4); }
    25% { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--mote-angle)) translateX(var(--mote-dist)) rotate(calc(var(--mote-angle) * -1)) scale(1); }
}
/* The opacity steps cover browsers without @property, where the iris can't interpolate. */
@keyframes stage-veil-iris {
    0% { --veil-iris: 2%; opacity: 1; }
    75% { opacity: 1; }
    100% { --veil-iris: 115%; opacity: 0; }
}
@keyframes stage-veil-glow-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.8); }
}
@keyframes stage-veil-crest-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(1.9); }
}

#roll-stage.is-arriving #app-content {
    animation: stage-arrive-fade 700ms ease-out 160ms backwards;
}
#roll-stage.is-arriving #app-sidebar {
    animation: stage-arrive-side 680ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards;
}
#roll-stage.is-arriving #mobile-top-strip {
    animation: stage-arrive-drop 620ms cubic-bezier(0.22, 1, 0.36, 1) 120ms backwards;
}
#roll-stage.is-arriving #player-footer,
#roll-stage.is-arriving #bottom-tab-nav {
    animation: stage-arrive-rise 680ms cubic-bezier(0.22, 1, 0.36, 1) 220ms backwards;
}
@keyframes stage-arrive-fade {
    from { opacity: 0; }
}
@keyframes stage-arrive-side {
    from { opacity: 0; translate: -32px 0; }
}
@keyframes stage-arrive-drop {
    from { opacity: 0; translate: 0 -100%; }
}
@keyframes stage-arrive-rise {
    from { opacity: 0; translate: 0 48px; }
}

@media (prefers-reduced-motion: reduce) {
    #landing-stage.is-leaving > :not(.landing-glow, [aria-hidden="true"]),
    #landing-stage.is-leaving > .landing-brand,
    #landing-stage.is-leaving > .landing-glow,
    #roll-stage.is-arriving #app-content,
    #roll-stage.is-arriving #app-sidebar,
    #roll-stage.is-arriving #mobile-top-strip,
    #roll-stage.is-arriving #player-footer,
    #roll-stage.is-arriving #bottom-tab-nav {
        animation: none;
    }
    .stage-veil-glow,
    .stage-veil-crest {
        display: none;
    }
    .stage-veil.is-covering .stage-veil-shade {
        animation: stage-veil-shade-in 200ms linear forwards;
    }
    .stage-veil.is-revealing .stage-veil-shade {
        animation: stage-veil-shade-out 200ms linear forwards;
    }
}

/* Shared toggle switch. Pair <input type="checkbox" class="sr-only"> with a
   sibling <span class="toggle-switch">. */
.toggle-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 2.5rem;
    height: 1.25rem;
    border-radius: 999px;
    background-color: var(--color-borderMed, #333333);
    border: 1px solid var(--color-borderLight, #444444);
    transition: background-color 200ms ease, border-color 200ms ease;
}
.toggle-switch::after {
    content: '';
    position: absolute;
    top: 1px;
    left: 1px;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    background-color: #ffffff;
    transition: transform 200ms ease;
}
input:checked + .toggle-switch {
    background-color: var(--color-entropyBase, #a335ee);
    border-color: var(--color-entropyHover, #b554ff);
}
input:checked + .toggle-switch::after {
    transform: translateX(1.25rem);
}

/* Immersive game chrome: no highlight-drag. Legal/info pages omit .game-ui. */
html.game-ui,
html.game-ui body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
html.game-ui input,
html.game-ui textarea,
html.game-ui [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

/* Tile name/type: reserved 16px line so descenders (g/y/p) are not clipped.
   truncate + flex parent otherwise shrinks overflow:hidden items to 0 min-height. */
.tile-item-label {
    flex-shrink: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 16px;
    height: 16px;
}

.ui-icon {
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: pixelated;
}

.settings-menu-icon > .ui-glyph {
    width: 100%;
    height: 100%;
    vertical-align: 0;
}

/* Clash streak flame: sprite plus a pixel fire canvas (streak-flame.js) that
   rises above it. --flame-heat (0..1) warms the sprite's glow. Size comes
   from Tailwind w-/h- at each call site. */
.streak-flame {
    --flame-heat: 0;
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.streak-flame > img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 calc(2px + var(--flame-heat) * 7px) rgba(255, 140, 26, calc(0.25 + var(--flame-heat) * 0.6)));
}
.streak-flame[data-heat]:not([data-heat="0"]) > img {
    animation: streak-flame-flicker 0.9s steps(3, end) infinite;
}
.streak-flame-fx {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 240%;
    height: 320%;
    transform: translateX(-50%);
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
@keyframes streak-flame-flicker {
    0%, 100% { transform: scale(1, 1); }
    50% { transform: scale(0.96, 1.05); }
}

/* Clash streak shield: greyed while unarmed; armed gets a rare pixel glint
   wipe masked to the sprite's alpha. */
.streak-shield {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}
.streak-shield[hidden] { display: none; }
.streak-shield > img {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    filter: grayscale(1) opacity(0.45);
    transition: filter 0.2s;
}
.streak-shield[data-active="1"] > img {
    filter: drop-shadow(0 0 5px rgba(110, 190, 255, 0.65));
}
.streak-shield::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(115deg,
        transparent 0 40%,
        rgba(255, 255, 255, 0.55) 40% 44%,
        rgba(255, 255, 255, 0.95) 44% 50%,
        rgba(255, 255, 255, 0.55) 50% 54%,
        transparent 54% 100%) 100% 0 / 300% 100% no-repeat;
    -webkit-mask: url('/static/images/ui/clash/clash-shield.png?v=1d257d0dfd') center / contain no-repeat;
    mask: url('/static/images/ui/clash/clash-shield.png?v=1d257d0dfd') center / contain no-repeat;
}
.streak-shield[data-active="1"]::after {
    animation: streak-shield-glint 9s 1.5s infinite;
}
@keyframes streak-shield-glint {
    0% { opacity: 1; background-position: 100% 0; animation-timing-function: steps(10, end); }
    9% { opacity: 1; background-position: 0% 0; }
    9.01%, 100% { opacity: 0; background-position: 0% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .streak-flame[data-heat]:not([data-heat="0"]) > img,
    .streak-shield[data-active="1"]::after {
        animation: none;
    }
}

@keyframes quest-tab-glow {
    0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 217, 102, 0.4)); }
    50% { filter: drop-shadow(0 0 10px rgba(255, 217, 102, 0.95)); }
}
@keyframes quest-claim-glow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.4); }
}
.quest-claim-ready {
    animation: quest-claim-glow 1.6s ease-in-out infinite;
}
.nav-tab.quest-tab-ready > .ui-icon,
.nav-tab.forge-tab-ready > .ui-icon {
    animation: quest-tab-glow 1.6s ease-in-out infinite;
}

/* CrazyGames iframe: hide cross-promo / Discord login and block parent-page
   text selection. Compact sidebar stays at every iframe height; .crazygames-short
   only tightens cards/HUD further. Public lootrng.com is unchanged. */
html.crazygames-embed {
    --sidebar-width: 168px;
    --player-footer-wing-height: 76px;
    --player-footer-height: 100px;
    --desktop-footer-height: var(--player-footer-height);
    --bottom-nav-height: 48px;
    --desktop-content-clearance: calc(var(--player-footer-height) + 16px);
}
html.crazygames-embed body {
    -webkit-user-select: none;
    user-select: none;
}
html.crazygames-embed .landing-cross-promo,
html.crazygames-embed [data-embed-hide-discord] {
    display: none !important;
}
html.crazygames-embed #embed-guest-note {
    display: block !important;
}
html.crazygames-embed #landing-stage .landing-wordmark {
    font-size: clamp(28px, 6vw, 40px);
}
html.crazygames-embed #landing-stage .landing-brand img {
    width: 2.5rem;
    height: 2.5rem;
}
html.crazygames-embed #landing-play-online {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: clamp(16px, 4vw, 20px);
}
html.crazygames-embed #app-sidebar > div:first-child {
    padding: 0.75rem 0.85rem;
    gap: 0.5rem;
}
html.crazygames-embed #app-sidebar > div:first-child img {
    width: 1.75rem;
    height: 1.75rem;
}
html.crazygames-embed #app-sidebar > div:first-child .font-heading {
    font-size: 1.05rem;
}
html.crazygames-embed #app-sidebar nav {
    padding: 0.5rem 0.5rem;
    gap: 0.15rem;
}
html.crazygames-embed #app-sidebar .nav-tab {
    padding: 0.4rem 0.6rem;
    font-size: 13px;
    gap: 0.5rem;
}
html.crazygames-embed #app-sidebar .nav-tab span.text-lg {
    font-size: 14px;
}
html.crazygames-embed #app-sidebar > div:last-child {
    height: auto !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    padding: 0.4rem 0.5rem;
    gap: 0.4rem;
}
html.crazygames-embed #entropy-display {
    font-size: 11px;
    padding: 0.25rem 0.5rem;
    flex: 0 0 auto;
    min-width: 0;
    overflow: visible;
}
html.crazygames-embed #mute-btn {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.8rem;
}
html.crazygames-embed #auth-button-container,
html.crazygames-embed #app-sidebar > div:last-child > div:last-child > div:last-child {
    display: none !important;
}
html.crazygames-embed #app-sidebar > div:last-child > div:last-child {
    flex: 0 0 auto;
    width: auto;
}
html.crazygames-embed #clash-combat-phase {
    min-height: 200px !important;
}

html.crazygames-embed .home-nav-btn,
html.crazygames-embed #async-roll-trigger,
html.crazygames-embed #rolling-indicator,
html.crazygames-embed #equip-actions button,
html.crazygames-embed #save-feedback,
html.crazygames-embed #quests-summary > * {
    box-sizing: border-box;
    min-height: 36px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
}
html.crazygames-embed .home-nav-btn {
    height: 36px !important;
    white-space: nowrap;
}
html.crazygames-embed #quests-tally,
html.crazygames-embed #quests-best-reward {
    font-size: 14px !important;
    margin-top: 0 !important;
}
html.crazygames-embed #quests-summary span.uppercase {
    font-size: 9px !important;
}
html.crazygames-embed .player-footer {
    min-height: var(--player-footer-height);
}
html.crazygames-embed .dom-dock-loadout > * {
    width: 64px !important;
    height: 92px !important;
}
html.crazygames-embed .dom-dock-loadout > .bg-bgSlotFilled {
    padding: 18px 5px 4px !important;
}
html.crazygames-embed .dom-dock-loadout img:not(.dom-dock-pixel-frame):not(.ui-glyph-badge):not(.tile-origin-icon) {
    width: 32px !important;
    height: 32px !important;
}
html.crazygames-embed .dom-dock-loadout .weapon-glow-wrap,
html.crazygames-embed .dom-dock-loadout .tile-weapon-art {
    width: 32px !important;
    height: 32px !important;
    flex-basis: 32px;
}
html.crazygames-embed .dom-dock-summary {
    height: 92px;
}
html.crazygames-embed .forge-action-tray-inner {
    gap: 0.4rem;
}

html.crazygames-embed .loot-standard-card {
    height: min(440px, calc(100vh - var(--desktop-footer-height) - 56px)) !important;
    max-width: 320px !important;
    padding: 0.5rem !important;
}
html.crazygames-embed .loot-standard-card > img {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0.2rem !important;
}
html.crazygames-embed .loot-standard-card > hr,
html.crazygames-embed .loot-standard-card .loot-card-pixel-rule {
    margin-top: 0.2rem !important;
    margin-bottom: 0.2rem !important;
}
html.crazygames-embed .loot-card-stamps {
    gap: 1.5rem !important;
}
html.crazygames-embed .loot-card-stamps .font-heading {
    font-size: 20px !important;
}
html.crazygames-embed .loot-card-name {
    font-size: 16px !important;
    line-height: 1.15 !important;
}
html.crazygames-embed .loot-card-subtype {
    font-size: 12px !important;
    margin-top: 0.1rem !important;
}
html.crazygames-embed .loot-card-stance,
html.crazygames-embed .loot-card-force,
html.crazygames-embed .loot-card-weight,
html.crazygames-embed .loot-card-affixes-label,
html.crazygames-embed .loot-card-affix-list,
html.crazygames-embed .loot-card-flavor,
html.crazygames-embed .loot-card-subtext {
    font-size: 11px !important;
    margin-top: 0.1rem !important;
    margin-bottom: 0.1rem !important;
}
html.crazygames-embed .loot-card-affixes {
    min-height: 40px !important;
}
html.crazygames-embed .loot-card-affix-list {
    gap: 0.15rem !important;
    margin-top: 0.15rem !important;
}
html.crazygames-embed .loot-card-power {
    font-size: 16px !important;
    line-height: 1.2 !important;
}
html.crazygames-embed .loot-card-power span {
    font-size: 14px !important;
}
html.crazygames-embed .loot-card-rolled [class*="py-4"] {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}
html.crazygames-embed .loot-standard-card [class*="text-4xl"],
html.crazygames-embed .loot-standard-card [class*="text-5xl"],
html.crazygames-embed .loot-standard-card [class*="text-3xl"] {
    font-size: 1.2rem !important;
    margin-top: 0.1rem !important;
}

html.crazygames-embed #tab-clash .clash-hud.sticky {
    position: fixed;
    top: auto;
    bottom: var(--player-footer-height);
    left: var(--sidebar-width);
    width: calc(100% - var(--sidebar-width));
    height: auto;
    min-height: 48px;
    box-sizing: border-box;
    z-index: 103;
    margin: 0;
    border-radius: 0;
    border: none;
    border-top: 1px solid #333;
    background: #1a1a1a;
    box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.6);
    padding: 0.25rem 0.75rem;
    overflow: hidden;
}
html.crazygames-embed #clash-player-avatar-container,
html.crazygames-embed #clash-enemy-avatar-container {
    width: 2.5rem;
    height: 2.5rem;
}
html.crazygames-embed #clash-player-score,
html.crazygames-embed #clash-enemy-score {
    font-size: 1.1rem !important;
    margin-top: 0 !important;
}
html.crazygames-embed #clash-status-title {
    font-size: 0.75rem !important;
}
html.crazygames-embed #clash-player-weight,
html.crazygames-embed #clash-enemy-weight {
    display: none !important;
}
html.crazygames-embed #clash-enemy-hand,
html.crazygames-embed #clash-player-hand {
    min-height: 72px !important;
}
html.crazygames-embed #tab-clash > div {
    gap: 0.35rem;
    padding-top: 0.35rem;
}
html.crazygames-embed .clash-arena {
    min-height: 280px;
    gap: 0.35rem;
}
html.crazygames-embed .clash-pip { width: 7px; height: 7px; }
html.crazygames-embed #clash-result-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
html.crazygames-embed.crazygames-short .clash-arena {
    min-height: 220px;
}
html.crazygames-embed .home-identity-plate {
    min-height: 0 !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.5rem;
}
html.crazygames-embed #tab-home > div {
    padding-top: 0.35rem;
}

html.crazygames-embed.crazygames-short .loot-standard-card {
    height: min(400px, calc(100vh - var(--desktop-footer-height) - 48px)) !important;
    max-width: 300px !important;
}
html.crazygames-embed.crazygames-short #clash-enemy-hand,
html.crazygames-embed.crazygames-short #clash-player-hand {
    min-height: 64px !important;
}
html.crazygames-embed.crazygames-short .home-identity-plate {
    padding: 0.4rem 0.6rem !important;
}
.pulse-update { animation: stat-pulse 0.4s ease-out; }
.entropy-float-gain {
    position: absolute; left: 50%; top: 0; transform: translate(-50%, -8px);
    color: #ffb8ff; font-size: 12px; font-weight: bold; pointer-events: none;
    white-space: nowrap; opacity: 1; z-index: 20;
    transition: transform 0.9s ease-out, opacity 0.9s ease-out;
    text-shadow: 0 0 8px rgba(255,184,255,0.8);
}
.entropy-float-gain.float-away {
    transform: translate(-50%, -28px);
    opacity: 0;
}
.stat-float-gain {
    position: absolute; left: 50%; top: 0; transform: translate(-50%, -8px);
    font-size: 11px; font-weight: bold; pointer-events: none;
    white-space: nowrap; opacity: 1; z-index: 20;
    transition: transform 0.9s ease-out, opacity 0.9s ease-out;
}
.stat-float-gain.float-away {
    transform: translate(-50%, -28px);
    opacity: 0;
}
.stat-float-rngelo {
    color: #ffd966;
    text-shadow: 0 0 8px rgba(255, 217, 102, 0.75);
}
.stat-float-forge {
    color: #c4a574;
    text-shadow: 0 0 8px rgba(196, 165, 116, 0.7);
}
.stat-float-boss {
    color: #ff6b7a;
    text-shadow: 0 0 8px rgba(255, 71, 87, 0.7);
}

/* Global identity chrome (sidebar + mobile second header) */
.shell-identity-chips {
    scrollbar-width: none;
}
.shell-identity-chips::-webkit-scrollbar {
    display: none;
}
.shell-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.2rem 0.45rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    font-size: 10px;
    line-height: 1.1;
    white-space: nowrap;
}
.shell-stat-label {
    color: #888;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 9px;
}
.shell-stat-label.normal-case {
    text-transform: none;
}
:where(#landing-stage) .shell-stat-label {
    color: var(--color-textLight, #cccccc);
}
.shell-stat-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    object-fit: contain;
    image-rendering: pixelated;
}
.shell-stat-value {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    font-size: 11px;
}
.shell-stat-rngelo .shell-stat-value { color: #ffd966; }
.shell-stat-forge .shell-stat-value { color: #d4c4a8; }
.shell-stat-boss .shell-stat-value { color: #ff8a95; }
.shell-stat-rngelo { border-color: rgba(255, 217, 102, 0.28); }
.shell-stat-forge { border-color: rgba(196, 165, 116, 0.28); }
.shell-stat-boss { border-color: rgba(255, 71, 87, 0.28); }

html.crazygames-embed .shell-identity {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
}
html.crazygames-embed .shell-stat-chip {
    padding: 0.12rem 0.35rem;
}
html.crazygames-embed .shell-stat-label { font-size: 8px; }
html.crazygames-embed .shell-stat-value { font-size: 10px; }
html.crazygames-embed .shell-stat-icon { width: 14px; height: 14px; flex-basis: 14px; }

@media (max-width: 767px) {
    .shell-stat-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
    #entropy-display-mobile .entropy-float-gain {
        top: auto;
        bottom: 0;
        transform: translate(-50%, 16px);
    }
    #entropy-display-mobile .entropy-float-gain.float-away {
        transform: translate(-50%, -6px);
        opacity: 0;
    }
    .shell-identity-mobile .stat-float-gain {
        top: auto;
        bottom: 0;
        transform: translate(-50%, 14px);
    }
    .shell-identity-mobile .stat-float-gain.float-away {
        transform: translate(-50%, -4px);
        opacity: 0;
    }
}
.reveal-item { animation: quick-reveal 0.35s both ease-out; }
.fade-list { transition: opacity 0.5s ease; opacity: 1; }

/* Nav shell tunables (left sidebar on desktop, bottom tab bar on mobile). */
:root {
    --sidebar-width: 220px;
    --bottom-nav-height: 60px;
    --bottom-nav-total-height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    --player-footer-wing-height: 96px;
    --player-footer-height: 124px;
    --player-footer-podium-width: 340px;
    /* Legacy alias: page footers retired; clearance tracks the player footer. */
    --desktop-footer-height: var(--player-footer-height);
    --content-clearance-nav-only: calc(var(--bottom-nav-total-height) + var(--player-footer-height) + 16px);
    --content-clearance-with-footer: calc(var(--bottom-nav-total-height) + var(--player-footer-height) + 16px);
    --desktop-content-clearance: calc(var(--player-footer-height) + 28px);
}
@media (max-width: 767px) {
    :root {
        --player-footer-collapsed-height: 28px;
        --player-footer-height: var(--player-footer-collapsed-height);
    }
}

/* Home subpages use Tailwind .hidden / .block (toggled in tabs.js) - do not
   force display:none here or it overrides .block when app.css loads after Tailwind. */
.tab-content, .main-tab-content { display: none; }
.tab-content.active, .main-tab-content.active { display: block; }
/* Outgoing pane while tabs.js cross-fades it under the incoming one. */
.main-tab-content.is-tab-leaving {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 49;
    pointer-events: none;
}
/* Desktop sidebar edge: the player footer's gold pixel stroke turned on its side (outer, gold, shade). */
@media (min-width: 768px) {
    .sidebar-pixel-rim::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 9px;
        background: linear-gradient(to left, #594c24 0 3px, #ffd966 3px 6px, rgb(140 119 56 / 0.9) 6px 9px);
        pointer-events: none;
    }
}

.platform-badge { display: inline-flex; align-items: center; vertical-align: middle; }
.site-logo-mark {
    filter:
        drop-shadow(0 0 1px rgba(92, 164, 255, 0.7))
        drop-shadow(0 0 3px rgba(116, 96, 255, 0.35));
}
.discord-svg-icon { width: 14px; height: 14px; fill: #5865F2; filter: drop-shadow(0 0 2px rgba(88,101,242,0.4)); }
.flag-badge { font-size: 15px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)); }

/* Clash strike animation tunables */
#clash-combat-phase { --clash-strike-distance: 45px; --clash-strike-duration: 0.4s; }
@media (min-width: 768px) {
    #clash-combat-phase { --clash-strike-distance: 120px; --clash-strike-duration: 0.55s; }
}
#clash-combat-phase.flex .clash-card-motion {
    transform: translateZ(0);
}

.clash-pips { display: flex; gap: 5px; align-items: center; }
.clash-pip {
    width: 9px; height: 9px; border-radius: 999px;
    flex: 0 0 auto;
    background: #333; border: 1px solid #555;
    box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.clash-pip-on {
    background: #2ecc71; border-color: #7dffb0;
    box-shadow: 0 0 6px rgba(46,204,113,0.75), inset 0 0 0 1px rgba(255,255,255,0.22);
}
.clash-pips-foe .clash-pip-on {
    background: #ff4757; border-color: #ff9aa3;
    box-shadow: 0 0 6px rgba(255,71,87,0.75), inset 0 0 0 1px rgba(255,255,255,0.22);
}
/* A newly won point stamps in once; never dips in opacity. */
.clash-pip-flash { animation: clash-pip-flash 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
@keyframes clash-pip-flash {
    0% { transform: scale(1.65); filter: brightness(1.9); }
    55% { transform: scale(0.9); filter: brightness(1.2); }
    100% { transform: scale(1); filter: none; }
}

.clash-arena-combat { min-height: 420px; }

/* Clash splash: centered hero (mobile scales the desktop layout down) */
:root { --clash-header-height: 124px; --clash-header-wing-height: 86px; }
.clash-splash-hero { position: relative; gap: 4px; }
.clash-splash-hero::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 45%;
    width: 340px;
    height: 170px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse at center, rgba(255, 217, 102, 0.16), rgba(255, 71, 87, 0.06) 45%, transparent 70%);
    pointer-events: none;
    z-index: -1;
}
.clash-splash-emblem {
    width: 44px;
    height: 44px;
    margin-bottom: 2px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 10px rgba(255, 217, 102, 0.55));
}
.clash-splash-rule {
    display: block;
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 217, 102, 0.85));
    box-shadow: 0 0 6px rgba(255, 217, 102, 0.45);
}
.clash-splash-rule-flip { transform: scaleX(-1); }
.clash-splash-center {
    /* 59px: the sticky, in-flow #mobile-top-strip above the tab content. */
    min-height: calc(100dvh - var(--content-clearance-with-footer) - 59px - 0.5rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}
#clash-splash .clash-splash-cta {
    border-color: rgba(255, 217, 102, 0.35);
    box-shadow: 0 0 28px rgba(255, 217, 102, 0.08), inset 0 0 22px rgba(255, 217, 102, 0.04);
}
@media (min-width: 380px) {
    .clash-splash-rule { width: 56px; }
}
@media (min-width: 768px) {
    .clash-splash-hero { gap: 6px; }
    .clash-splash-hero::before { width: 560px; height: 280px; }
    .clash-splash-emblem {
        width: 64px;
        height: 64px;
        margin-bottom: 4px;
        filter: drop-shadow(0 0 14px rgba(255, 217, 102, 0.55));
    }
    .clash-splash-rule {
        width: 96px;
        height: 3px;
        box-shadow: 0 0 8px rgba(255, 217, 102, 0.45);
    }
    .clash-splash-center {
        min-height: calc(100dvh - var(--desktop-content-clearance) - 1rem);
        gap: 28px;
    }
}

/* Clash match: mobile HUD polish (colors only; box model unchanged) */
#tab-clash .clash-hud {
    background: linear-gradient(180deg, rgba(36, 31, 22, 0.95), rgba(20, 20, 24, 0.95));
    border-color: rgba(255, 217, 102, 0.3);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 217, 102, 0.14);
}

/* Clash match: full-bleed field. --clash-split tracks the arena's midline (clash.js). */
.clash-field-bg { display: none; }
html:not(.crazygames-embed) .clash-field-bg {
    --clash-split: 50vh;
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}
html:not(.crazygames-embed) .clash-field-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.75);
    transition: box-shadow 0.6s ease;
}
.clash-field-half {
    position: absolute;
    left: 0;
    right: 0;
    transition: opacity 0.4s ease;
}
.clash-field-foe {
    top: 0;
    height: var(--clash-split);
    background:
        radial-gradient(ellipse 80% 70% at 50% 100%, rgba(255, 71, 87, 0.12), transparent 70%),
        linear-gradient(to top, rgba(255, 71, 87, 0.06), rgba(255, 71, 87, 0.22));
}
.clash-field-player {
    top: var(--clash-split);
    bottom: 0;
    background:
        radial-gradient(ellipse 80% 70% at 50% 0%, rgba(46, 204, 113, 0.1), transparent 70%),
        linear-gradient(to bottom, rgba(46, 204, 113, 0.05), rgba(46, 204, 113, 0.19));
}
.clash-field-seam {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--clash-split);
    height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, transparent, rgba(255, 217, 102, 0.7) 15%, rgba(255, 217, 102, 0.95) 50%, rgba(255, 217, 102, 0.7) 85%, transparent);
    box-shadow: 0 0 14px rgba(255, 217, 102, 0.5);
    transition: opacity 0.4s ease;
}
.clash-field-bg.is-combat .clash-field-seam { opacity: 0.35; }

/* Boss clash: crimson sky, rising embers, flickering seam */
.clash-field-boss {
    display: none;
    position: absolute;
    inset: 0;
}
.clash-field-bg.is-boss .clash-field-boss { display: block; }
.clash-field-embers {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 12% 18%, rgba(255, 176, 84, 0.95), transparent),
        radial-gradient(3px 3px at 38% 62%, rgba(255, 120, 60, 0.85), transparent),
        radial-gradient(2px 2px at 64% 34%, rgba(255, 217, 102, 0.9), transparent),
        radial-gradient(2px 2px at 86% 78%, rgba(255, 140, 70, 0.85), transparent),
        radial-gradient(3px 3px at 52% 92%, rgba(255, 90, 60, 0.8), transparent),
        radial-gradient(2px 2px at 24% 84%, rgba(255, 200, 110, 0.85), transparent);
    background-size: 340px 340px;
    mix-blend-mode: screen;
    opacity: 0.75;
    animation: clash-embers-rise 9s linear infinite;
}
.clash-field-embers-far {
    background-size: 210px 210px;
    opacity: 0.4;
    animation: clash-embers-rise-far 15s linear infinite;
}
.clash-field-boss-flash {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 45% at 50% var(--clash-split), rgba(255, 71, 87, 0.6), rgba(255, 217, 102, 0.15) 45%, transparent 70%);
    opacity: 0;
    animation: clash-boss-flash 1.6s ease-out both;
}
.clash-field-bg.is-boss .clash-field-foe {
    background:
        radial-gradient(ellipse 90% 80% at 50% 100%, rgba(255, 120, 40, 0.2), transparent 70%),
        linear-gradient(to top, rgba(140, 0, 16, 0.2), rgba(255, 40, 60, 0.36));
    animation: clash-boss-breathe 3.2s ease-in-out infinite;
}
.clash-field-bg.is-boss .clash-field-seam {
    height: 3px;
    margin-top: -1.5px;
    background: linear-gradient(90deg, transparent, rgba(255, 71, 87, 0.9) 12%, #ffd966 50%, rgba(255, 71, 87, 0.9) 88%, transparent);
    box-shadow: 0 0 18px rgba(255, 71, 87, 0.85), 0 0 44px rgba(255, 217, 102, 0.35);
    animation: clash-boss-seam 2.6s linear infinite;
}
html:not(.crazygames-embed) .clash-field-bg.is-boss::after {
    box-shadow: inset 0 0 170px rgba(45, 0, 4, 0.92);
}
@keyframes clash-boss-breathe {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}
@keyframes clash-embers-rise {
    from { background-position: 0 0; }
    to { background-position: 0 -340px; }
}
@keyframes clash-embers-rise-far {
    from { background-position: 0 0; }
    to { background-position: 0 -210px; }
}
@keyframes clash-boss-flash {
    0% { opacity: 0; }
    18% { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes clash-boss-seam {
    0%, 100% { opacity: 1; }
    47% { opacity: 1; }
    50% { opacity: 0.45; }
    53% { opacity: 1; }
    71% { opacity: 0.7; }
    74% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .clash-field-bg *,
    .clash-field-bg *::before { animation: none !important; }
}

/* Split arena: enemy half on top, player half below, the callout riding the seam */
html:not(.crazygames-embed) #clash-arena { gap: 0; }
html:not(.crazygames-embed) #clash-drafting-phase { gap: 0; }
html:not(.crazygames-embed) #clash-drafting-phase > .clash-side {
    flex: 1 1 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
}
html:not(.crazygames-embed) #clash-drafting-phase > .clash-side-player { flex-direction: column-reverse; }
html:not(.crazygames-embed) #clash-drafting-phase > .clash-side-player .clash-side-label { margin: 6px 0 0; }
html:not(.crazygames-embed) #clash-drafting-phase > .clash-seam-slot {
    flex: 0 0 0;
    min-height: 0;
    height: 0;
    padding: 0;
    z-index: 20;
}
html:not(.crazygames-embed) #clash-active-prompt .clash-callout-text {
    padding: 6px 28px;
    background: radial-gradient(ellipse at center, rgba(12, 12, 14, 0.9), rgba(12, 12, 14, 0.6) 55%, transparent 75%);
}
@media (max-width: 767px) {
    :root {
        --clash-header-height: 84px;
        --clash-header-wing-height: 56px;
        --clash-footer-height: 80px;
        --clash-footer-wing-height: 56px;
    }
    html:not(.crazygames-embed) #tab-clash .clash-hud { display: none; }
    html:not(.crazygames-embed) #clash-stage-root {
        min-height: calc(100dvh - var(--clash-stage-top, 59px));
        padding-top: calc(var(--clash-header-height) + 8px);
        padding-bottom: calc(var(--bottom-nav-total-height) + var(--clash-footer-height) + 8px);
    }
    html:not(.crazygames-embed) #clash-arena {
        flex: 1 1 auto;
        min-height: 340px;
    }
}
.clash-duel-header,
.clash-duel-footer { display: none; }

/* Duel header / footer skin (shown on desktop, and on mobile outside the embed) */
.clash-duel-label {
    color: var(--color-textMuted, #888);
    font: 700 9px/1 HeadingFont, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}
.clash-duel-streak { display: flex; align-items: center; gap: 10px; min-width: 0; }
.clash-duel-streak-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 8px rgba(255, 217, 102, 0.45));
}
.clash-duel-shield {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 12px 6px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    color: var(--color-textMuted, #888);
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, color 0.2s;
}
.clash-duel-shield[data-active="1"] {
    border-color: rgba(255, 217, 102, 0.7);
    background: rgba(255, 217, 102, 0.1);
    color: var(--color-accentGold, #ffd966);
    box-shadow: 0 0 14px rgba(255, 217, 102, 0.25);
}
.clash-duel-level {
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.35);
    color: #cfcfcf;
    font: 400 13px/1 var(--font-card, sans-serif);
    white-space: nowrap;
}
.clash-duel-level[data-tier="challenging"] { color: #ffb347; border-color: rgba(255, 179, 71, 0.5); }
.clash-duel-level[data-tier="elite"] { color: #ff6b7a; border-color: rgba(255, 71, 87, 0.55); }
.clash-duel-level[data-tier="relic"],
.clash-duel-level[data-tier="mythic"] { color: #ffd966; border-color: rgba(255, 217, 102, 0.6); }
.clash-duel-level[data-tier="pvp"] { color: #c77dff; border-color: rgba(199, 125, 255, 0.5); }
.clash-duel-score { display: flex; align-items: center; gap: 10px; }
.clash-duel-foe-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    min-width: 0;
    text-align: right;
}
.clash-duel-avatar {
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 999px;
    border: 2px solid #ff4757;
    box-shadow: 0 0 14px rgba(255, 71, 87, 0.5);
    font-size: 22px;
}
.clash-duel-avatar img { width: 100%; height: 100%; object-fit: cover; }
.clash-duel-avatar img { transform: scaleX(-1); }
.clash-duel-avatar-player {
    border-color: #2ecc71;
    box-shadow: 0 0 14px rgba(46, 204, 113, 0.5);
}
.clash-duel-avatar-player img { transform: none; }

@media (max-width: 767px) {
    /* Header hangs off the top strip; the footer mirrors it above the tab bar */
    html:not(.crazygames-embed) .clash-duel-header,
    html:not(.crazygames-embed) .clash-duel-footer {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        z-index: 96;
        pointer-events: none;
    }
    html:not(.crazygames-embed) .clash-duel-header {
        /* 59px: the sticky #mobile-top-strip. */
        top: 59px;
        height: var(--clash-header-height);
    }
    html:not(.crazygames-embed) .clash-duel-footer {
        bottom: var(--bottom-nav-total-height);
        height: var(--clash-footer-height);
    }
    .clash-duel-header-frame,
    .clash-duel-footer-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
    }
    .clash-duel-wing {
        position: absolute;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 6px;
        box-sizing: border-box;
        pointer-events: auto;
    }
    /* Wing bands sit clear of the podium ramps, so they can run up to the podium itself.
       Their content stays off the 3-cell (9px) rim the frame paints along their inner edge. */
    .clash-duel-header .clash-duel-wing {
        top: 0;
        height: var(--clash-header-wing-height);
        max-width: calc(50% - var(--clash-header-podium-width, 180px) / 2 - 2px);
        padding-bottom: 9px;
    }
    .clash-duel-footer .clash-duel-wing {
        bottom: 0;
        height: var(--clash-footer-wing-height);
        max-width: calc(50% - var(--clash-footer-podium-width, 160px) / 2 - 2px);
        padding-top: 9px;
    }
    .clash-duel-wing-left { left: 0; padding: 0 4px 0 10px; }
    .clash-duel-wing-right { right: 0; padding: 0 10px 0 4px; justify-content: flex-end; }
    .clash-duel-podium {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        width: max-content;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        pointer-events: auto;
    }
    .clash-duel-header .clash-duel-podium {
        top: 0;
        height: var(--clash-header-height);
        padding: 2px 12px 11px;
    }
    .clash-duel-footer .clash-duel-podium {
        bottom: 0;
        height: var(--clash-footer-height);
        padding: 11px 12px 4px;
    }
    .clash-duel-label { font-size: 8px; }
    .clash-duel-streak { gap: 6px; }
    .clash-duel-streak-icon,
    .clash-duel-foe-copy { display: none; }
    /* Mobile keeps the HUD's rule: the shield only shows, as a bare icon, once it's armed */
    .clash-duel-shield,
    .clash-duel-shield[data-active="1"] {
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
    .clash-duel-shield[data-active="0"] { display: none; }
    /* Armed shield rides the streak row (flame · count · shield) with the label beneath. */
    .clash-duel-header .clash-duel-wing-left {
        display: grid;
        grid-template-columns: auto auto;
        justify-content: start;
        align-content: center;
        align-items: center;
        column-gap: 6px;
        row-gap: 4px;
    }
    .clash-duel-header .clash-duel-wing-left .clash-duel-streak,
    .clash-duel-header .clash-duel-wing-left .clash-duel-streak > .flex-col {
        display: contents;
    }
    .clash-duel-header .clash-duel-wing-left .clash-duel-streak > .flex-col > :first-child {
        grid-area: 1 / 1;
    }
    .clash-duel-header .clash-duel-streak .clash-duel-label {
        grid-area: 2 / 1 / 3 / -1;
    }
    .clash-duel-header .clash-duel-shield {
        grid-area: 1 / 2;
    }
    .clash-duel-level { padding: 2px 8px; font-size: 11px; }
    .clash-duel-score { gap: 6px; }
    .clash-duel-header .clash-pip { width: 9px; height: 9px; }
    .clash-duel-avatar { width: 40px; height: 40px; font-size: 18px; }
}
@media (max-width: 767px) and (max-height: 700px) {
    :root {
        --clash-header-height: 76px;
        --clash-header-wing-height: 50px;
        --clash-footer-height: 72px;
        --clash-footer-wing-height: 50px;
    }
    .clash-duel-header .clash-duel-podium { gap: 4px; }
    .clash-duel-footer .clash-duel-podium { gap: 4px; }
    .clash-duel-avatar { width: 34px; height: 34px; font-size: 16px; }
}

@media (min-width: 768px) {
    html:not(.crazygames-embed) #tab-clash .clash-hud { display: none; }
    html:not(.crazygames-embed) #clash-stage-root {
        padding-top: calc(var(--clash-header-height) + 14px);
    }

    /* Duel header: the player footer flipped to the top edge */
    html:not(.crazygames-embed) .clash-duel-header {
        display: block;
        position: fixed;
        top: 0;
        left: var(--sidebar-width);
        right: 0;
        height: var(--clash-header-height);
        z-index: 96;
        pointer-events: none;
    }
    .clash-duel-header-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
        image-rendering: pixelated;
        image-rendering: crisp-edges;
    }
    .clash-duel-wing {
        position: absolute;
        top: 0;
        z-index: 1;
        height: var(--clash-header-wing-height);
        display: flex;
        align-items: center;
        gap: 14px;
        box-sizing: border-box;
        max-width: calc(50% - var(--clash-header-podium-width, 340px) / 2 - 8px);
        pointer-events: auto;
    }
    .clash-duel-wing-left { left: 0; padding: 0 14px 0 18px; }
    .clash-duel-wing-right { right: 0; padding: 0 18px 0 14px; justify-content: flex-end; }
    .clash-duel-podium {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
        width: max-content;
        min-width: 280px;
        height: var(--clash-header-height);
        margin: 0 auto;
        padding: 6px 26px 14px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        pointer-events: auto;
    }
    @media (max-width: 1279px) {
        .clash-duel-wing { gap: 10px; }
        .clash-duel-wing-left { padding-left: 14px; }
        .clash-duel-streak-icon { display: none; }
    }
    .clash-duel-header .clash-pip { width: 12px; height: 12px; }

    html:not(.crazygames-embed) .clash-field-bg { left: var(--sidebar-width); }
    html:not(.crazygames-embed) #clash-arena {
        min-height: max(520px, calc(100dvh - var(--clash-header-height) - 14px - var(--desktop-content-clearance)));
    }
    html:not(.crazygames-embed) #clash-drafting-phase > .clash-side { padding: 18px 0; }
    html:not(.crazygames-embed) #clash-active-prompt .clash-callout-text { padding: 6px 36px; }

    /* Footer portrait wears a green duel ring for the length of a match */
    .player-footer-avatar { position: relative; }
    .player-footer-avatar::after {
        content: '';
        position: absolute;
        inset: -12px;
        border-radius: 999px;
        background: radial-gradient(circle closest-side, transparent 29.5px, #2ecc71 30px, #2ecc71 32px, rgba(46, 204, 113, 0.3) 32.5px, rgba(46, 204, 113, 0.1) 38px, transparent 44px);
        -webkit-mask-image: conic-gradient(#000 var(--clash-ring-sweep), transparent 0);
        mask-image: conic-gradient(#000 var(--clash-ring-sweep), transparent 0);
        --clash-ring-sweep: 0deg;
        opacity: 0;
        transform: scale(1);
        transition: --clash-ring-sweep 0.5s cubic-bezier(0.55, 0, 0.8, 0.25), opacity 0.2s ease 0.35s, transform 0.5s ease;
        pointer-events: none;
    }
    .player-footer-avatar.is-clash-duelist::after {
        --clash-ring-sweep: 360deg;
        opacity: 1;
        animation: clash-ring-pop 0.9s ease-out;
        transition: --clash-ring-sweep 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.12s ease;
    }
}
@property --clash-ring-sweep {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@keyframes clash-ring-pop {
    0%, 70% { transform: scale(1); filter: none; }
    82% { transform: scale(1.06); filter: drop-shadow(0 0 6px rgba(46, 204, 113, 0.5)); }
    100% { transform: scale(1); filter: none; }
}
/* Clash portraits: dark gray backing at rest, easing to a deep duel tint while a match runs */
@property --portrait-bg {
    syntax: '<color>';
    inherits: false;
    initial-value: #2a2a2a;
}
@property --boss-ring-spin {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@property --boss-hue-drift {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
.clash-portrait {
    --portrait-bg: #2a2a2a;
    background: var(--portrait-bg);
    transition: --portrait-bg 0.9s ease;
}
.clash-portrait.is-dueling { --portrait-bg: #1d7f46; }
.clash-portrait-foe.is-dueling { --portrait-bg: #a8303b; }
.clash-portrait img { image-rendering: pixelated; }

/* Boss: the foe's 2px red ring with two sparks orbiting along it */
.clash-portrait.is-boss {
    border-color: transparent;
    background:
        linear-gradient(var(--portrait-bg), var(--portrait-bg)) padding-box,
        conic-gradient(from var(--boss-ring-spin),
            #7a1622 0deg 12deg, #ff4757 20deg 100deg, #ff8a95 150deg, #fff1f2 172deg 180deg,
            #7a1622 180deg 192deg, #ff4757 200deg 280deg, #ff8a95 330deg, #fff1f2 352deg 360deg) border-box;
    animation: clash-boss-ring-spin 2.6s linear infinite, clash-boss-ring-glow 1.6s ease-in-out infinite;
}
@keyframes clash-boss-ring-spin {
    to { --boss-ring-spin: 360deg; }
}
@keyframes clash-boss-ring-glow {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 71, 87, 0.5); }
    50% { box-shadow: 0 0 22px rgba(255, 71, 87, 0.85), 0 0 4px rgba(255, 241, 242, 0.5); }
}

/* Boss recolour: a per-match palette (set from JS) drifting slowly around its hue */
.clash-portrait.is-boss img { animation: clash-boss-hue-drift 7s ease-in-out infinite; }
.clash-portrait.is-boss[data-boss-recolor="shift"] img {
    filter: hue-rotate(calc(var(--boss-hue, 0deg) + var(--boss-hue-drift))) saturate(1.45);
}
.clash-portrait.is-boss[data-boss-recolor="spectral"] img {
    filter: grayscale(1) sepia(1) hue-rotate(calc(var(--boss-hue, 0deg) + var(--boss-hue-drift))) saturate(3) brightness(1.05);
}
.clash-portrait.is-boss[data-boss-recolor="fever"] img {
    filter: hue-rotate(calc(var(--boss-hue, 0deg) + var(--boss-hue-drift))) saturate(2.6) contrast(1.2) brightness(0.9);
}
@keyframes clash-boss-hue-drift {
    0%, 100% { --boss-hue-drift: -14deg; }
    50% { --boss-hue-drift: 14deg; }
}
@media (prefers-reduced-motion: reduce) {
    .clash-portrait.is-boss,
    .clash-portrait.is-boss img { animation: none; }
    .clash-portrait.is-boss { box-shadow: 0 0 14px rgba(255, 71, 87, 0.6); }
}

/* Desktop player footer portrait takes the same green tint for the length of a match */
#shell-avatar { transition: border-color 0.15s ease, background-color 0.9s ease; }
.player-footer-avatar.is-clash-duelist #shell-avatar { background-color: #1d7f46; }

.clash-consider-tab,
.clash-lock-tab {
    position: absolute; left: 50%; top: -11px; transform: translateX(-50%);
    z-index: 30; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    padding: 1px 8px; border-radius: 999px;
    border: 1px solid #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.clash-consider-tab > .ui-glyph,
.clash-lock-tab > .ui-glyph {
    width: 16px; height: 16px;
}
.clash-consider-tab {
    background: #ffd966; color: #1a1408;
    animation: clash-look-in 0.28s ease;
}

/* Foe faces the player: HUD / PvP portraits, hand weapons, and combat art + glow. */
#clash-enemy-avatar-container img,
#pvp-opponents-grid img {
    transform: scaleX(-1);
}
#clash-enemy-hand .clash-mini-art > .weapon-glow-wrap,
#clash-enemy-hand .clash-mini-art > img {
    transform: scaleX(-1);
}
#clash-card-enemy-slot .clash-card-icon {
    transform: scaleX(-1);
}
#clash-player-hand .is-hotkey-focus {
    outline: 2px solid #ffd966;
    outline-offset: 2px;
}

.clash-lock-tab {
    background: #2ecc71; color: #082012;
}
.clash-lock-tab-foe {
    background: #ff4757; color: #fff;
}

@keyframes clash-look-in {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes clash-think-fade {
    from { opacity: 0.4; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}
.clash-think-swap {
    animation: clash-think-fade 0.32s ease;
}

/* Shared Clash end-of-round / relic card: uses modal-panel pixel chrome.
   Border, background and radius are all painted by the canvas; only layout
   properties live here. Padding is generous to clear the 12-px pixel rim. */
.clash-end-panel {
    /* no border / bg / radius; canvas handles them */
    padding: 1.4rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    /* mobile: stay clear of screen edges (min 6 vw each side) */
    width: min(88vw, 22rem);
    max-width: 22rem;
    box-sizing: border-box;
    flex-shrink: 0;
    overflow: visible;
    height: auto;
}
@media (min-width: 768px) {
    .clash-end-panel {
        width: 17rem;
        max-width: 17rem;
        padding: 1.25rem 1.4rem;
    }
}
.clash-end-panel-tall {
    min-height: 17rem;
}
#clash-result-title {
    min-height: 2.75em;
}
.clash-result-sub {
    display: block;
    font-family: 'MainFont', 'Segoe UI', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.25;
}
@media (min-width: 768px) {
    .clash-result-sub {
        font-size: 1.125rem;
    }
}
#clash-continue-loss-btn,
#clash-continue-btn {
    white-space: nowrap;
    font-size: 12px;
    padding-left: 0.6rem;
    padding-right: 0.6rem;
}
@media (min-width: 768px) {
    #clash-continue-loss-btn,
    #clash-continue-btn {
        font-size: 13px;
    }
}
@media (min-width: 768px) {
    .clash-end-panel-tall {
        min-height: 19.5rem;
    }
    #clash-temp-claim-panel {
        width: 19rem;
        max-width: 19rem;
    }
}

#clash-temp-claim-cards {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: 100%;
}
.clash-relic-mini {
    width: 84px;
    height: 120px;
    min-width: 84px;
    min-height: 120px;
    flex-shrink: 0;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .clash-relic-mini {
        width: 96px;
        height: 144px;
        min-width: 96px;
        min-height: 144px;
    }
}

@media (max-width: 767px) {
    #clash-arena,
    #clash-drafting-phase,
    #clash-player-loadout {
        overflow-x: clip;
        max-width: 100%;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-art,
    #clash-enemy-hand.clash-hand-5 .clash-mini-art {
        transform: none;
    }
    /* Inline-block glow art sits on the text baseline and adds descender space,
       pushing Rare+ stance/Force 8px lower than Common/Uncommon. */
    .clash-mini-art > .weapon-glow-wrap {
        display: block;
    }
}
.clash-relic-mini .clash-mini-label.invisible {
    display: none;
}
#clash-arena.clash-foe-picking #clash-drafting-phase {
    display: none !important;
}
.clash-temp-card { box-shadow: inset 0 3px 0 #00ffff; }
.clash-temp-mark {
    display: inline-block; color: #00ffff; font-size: 8px; line-height: 1;
    padding: 0 3px; border: 1px solid #00ffff; border-radius: 3px;
    text-shadow: 0 0 4px rgba(0,255,255,0.5);
}

#clash-player-hand.clash-hand-5,
#clash-enemy-hand.clash-hand-5 {
    --clash-hand-gap: 4px;
    --clash-hand-slot-w: min(90px, calc((100% - 4 * var(--clash-hand-gap)) / 5));
    --clash-hand-art: 32px;
    display: flex;
    flex-wrap: nowrap !important;
    justify-content: center;
    align-items: flex-start;
    gap: var(--clash-hand-gap);
    min-height: 92px;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
}
#clash-player-hand.clash-hand-5 > [id^="clash_player-mini-slot"],
#clash-enemy-hand.clash-hand-5 > [id^="clash_enemy-mini-slot"] {
    width: var(--clash-hand-slot-w);
    max-width: var(--clash-hand-slot-w);
    height: auto;
    aspect-ratio: 64 / 92;
    min-width: 0;
    flex: 1 1 0;
    overflow: visible;
    box-sizing: border-box;
    contain: layout;
    transition-property: box-shadow, filter, opacity;
}
#clash-player-hand.clash-hand-5 .clash-mini-art .weapon-glow-wrap,
#clash-enemy-hand.clash-hand-5 .clash-mini-art .weapon-glow-wrap,
#clash-player-hand.clash-hand-5 .clash-mini-art > img,
#clash-enemy-hand.clash-hand-5 .clash-mini-art > img {
    width: var(--clash-hand-art);
    height: var(--clash-hand-art);
}
#clash-player-hand.clash-hand-5 .clash-mini-art .weapon-glow-wrap > img,
#clash-enemy-hand.clash-hand-5 .clash-mini-art .weapon-glow-wrap > img,
#clash-player-hand.clash-hand-5 .clash-mini-art .weapon-glow-fx,
#clash-enemy-hand.clash-hand-5 .clash-mini-art .weapon-glow-fx {
    width: 100%;
    height: 100%;
}
#clash-player-hand.clash-hand-5 .clash-mini-art,
#clash-enemy-hand.clash-hand-5 .clash-mini-art {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--clash-hand-art);
    padding: 0;
    margin-bottom: 1px;
}
#clash-player-hand.clash-hand-5 .clash-mini-label,
#clash-enemy-hand.clash-hand-5 .clash-mini-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 12px;
    height: 12px;
    margin-bottom: 2px;
    font-size: 8px;
}
#clash-player-hand.clash-hand-5 .clash-mini-force,
#clash-enemy-hand.clash-hand-5 .clash-mini-force {
    padding-top: 2px;
    padding-bottom: 2px;
}
.clash-roll-ghost {
    visibility: hidden;
    pointer-events: none;
    border: 2px solid transparent;
}
#clash-enemy-hand.clash-hand-dealing {
    overflow: visible;
}
#clash-player-hand.clash-hand-5 .clash-enemy-blank-mark,
#clash-enemy-hand.clash-hand-5 .clash-enemy-blank-mark {
    font-size: 16px;
}
@media (max-width: 767px) {
    /* Stage cards keep their outer edge and grow in toward the VS badge, landing on
       the full card's 408:620 shape. Content taller than that still grows the card. */
    #clash-combat-row {
        gap: 8px;
    }
    #clash-combat-row > #clash-vs-slot {
        width: 40px;
    }
    #clash-card-player-slot { justify-content: flex-end; }
    #clash-card-enemy-slot { justify-content: flex-start; }
    #clash-combat-row .clash-card-motion {
        display: flex;
        flex-direction: column;
        width: clamp(118px, calc(100% - 12px), 156px);
        margin: 0;
        aspect-ratio: 408 / 620;
    }
    #clash-combat-row .clash-card-motion > .clash-card-chrome {
        flex: 1 1 auto;
    }
    #clash-combat-row .clash-card-motion .roll-container {
        min-height: 36px;
    }

    /* Five-card hands take the stage gutter so each card keeps its proportions. */
    html:not(.crazygames-embed) #clash-stage-root:has(.clash-hand-5) {
        padding-left: 4px;
        padding-right: 4px;
    }
    /* Same 2:3 card and top-to-bottom rhythm as the 3-card hand, scaled down:
       name-band spacer, art centred in the free space, stance + Force at the foot. */
    #clash-player-hand.clash-hand-5 > [id^="clash_player-mini-slot"],
    #clash-enemy-hand.clash-hand-5 > [id^="clash_enemy-mini-slot"] {
        padding: 4px;
        aspect-ratio: 2 / 3;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-label.invisible,
    #clash-enemy-hand.clash-hand-5 .clash-mini-label.invisible {
        height: 10px;
        margin-bottom: 2px;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-art,
    #clash-enemy-hand.clash-hand-5 .clash-mini-art {
        flex: 1 1 auto;
        min-height: var(--clash-hand-art);
        height: auto;
        margin-bottom: 2px;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-type,
    #clash-enemy-hand.clash-hand-5 .clash-mini-type {
        gap: 3px;
        font-size: 10px;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-force > :first-child,
    #clash-enemy-hand.clash-hand-5 .clash-mini-force > :first-child {
        line-height: 10px;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-force-value,
    #clash-enemy-hand.clash-hand-5 .clash-mini-force-value {
        white-space: nowrap;
        font-size: 12px;
        line-height: 16px;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-force-value.is-len-10,
    #clash-enemy-hand.clash-hand-5 .clash-mini-force-value.is-len-10 { font-size: 11px; }
    #clash-player-hand.clash-hand-5 .clash-mini-force-value.is-len-12,
    #clash-enemy-hand.clash-hand-5 .clash-mini-force-value.is-len-12 { font-size: 10px; }
    #clash-player-hand.clash-hand-5 .clash-mini-force-value.is-len-13,
    #clash-enemy-hand.clash-hand-5 .clash-mini-force-value.is-len-13 { font-size: 9px; }
    #clash-player-hand.clash-hand-5 .clash-mini-force-value.is-len-14,
    #clash-enemy-hand.clash-hand-5 .clash-mini-force-value.is-len-14 { font-size: 8px; }
}
@media (min-width: 768px) {
    #clash-player-hand.clash-hand-5,
    #clash-enemy-hand.clash-hand-5 {
        --clash-hand-slot-w: 124px;
        --clash-hand-art: 56px;
        gap: 16px;
        min-height: 180px;
        overflow-x: visible;
    }
    #clash-player-hand.clash-hand-5 > [id^="clash_player-mini-slot"],
    #clash-enemy-hand.clash-hand-5 > [id^="clash_enemy-mini-slot"] {
        width: 124px;
        max-width: 124px;
        height: 180px;
        flex: 0 0 124px;
        overflow: visible;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-art,
    #clash-enemy-hand.clash-hand-5 .clash-mini-art {
        display: block;
        height: auto;
        padding: 0.25rem;
        margin-bottom: 0.125rem;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-label,
    #clash-enemy-hand.clash-hand-5 .clash-mini-label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: inherit;
        line-height: 1;
        height: auto;
        margin-bottom: 0.25rem;
    }
    #clash-player-hand.clash-hand-5 .clash-mini-force,
    #clash-enemy-hand.clash-hand-5 .clash-mini-force {
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }
}

.clash-temp-deal { animation: clash-temp-deal 0.45s ease-out; }
@keyframes clash-temp-deal {
    0% { opacity: 0; transform: scale(0.92); }
    100% { opacity: 1; transform: scale(1); }
}
.clash-roll-dim {
    box-shadow: none !important;
}
.clash-roll-dim::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(12, 12, 12, 0.48);
    pointer-events: none;
    z-index: 12;
}
.clash-roll-dim img {
    filter: grayscale(0.85) brightness(0.72);
}
.clash-force-num {
    display: inline-block;
    transform-origin: center bottom;
}
@keyframes clash-force-tick {
    0% { transform: translateY(0.07em); }
    100% { transform: translateY(0); }
}
.clash-force-tick {
    animation: clash-force-tick 140ms ease-out;
}
@keyframes clash-force-land {
    0% { transform: scale(1.04); }
    100% { transform: scale(1); }
}
.clash-force-land {
    animation: clash-force-land 220ms ease-out;
}

/* Clash modifier callouts (Advantage, Initiative, Twinned…). The pill uses
   the shared pixel chrome above; the wrapper carries the glow because the
   pill's clip-path would cut an outer shadow. */
.clash-beat-pill {
    --pb-px: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    cursor: var(--cursor-arrow);
    pointer-events: none;
    transition: none;
    white-space: nowrap;
    text-shadow: 0 1px 0 #000, 0 0 6px rgba(0, 0, 0, 0.8);
}
.clash-beat-pill--gold { --beat-color: #ffd966; --pb-edge: #ffd966; --pb-fill-a: #3a3113; --pb-fill-b: #1b170a; --pb-text: #ffe28a; }
.clash-beat-pill--green { --beat-color: #2ecc71; --pb-edge: #2ecc71; --pb-fill-a: #133a23; --pb-fill-b: #09190f; --pb-text: #8ff0b6; }
.clash-beat-pill--red { --beat-color: #ff4757; --pb-edge: #ff4757; --pb-fill-a: #3d151b; --pb-fill-b: #1b090c; --pb-text: #ffa0a8; }
.clash-beat-pill--cyan { --beat-color: #00e5ff; --pb-edge: #00e5ff; --pb-fill-a: #0c3440; --pb-fill-b: #06171c; --pb-text: #8ff6ff; }
.clash-beat-pill--magenta { --beat-color: #ff3df2; --pb-edge: #ff3df2; --pb-fill-a: #3a1238; --pb-fill-b: #1a0819; --pb-text: #ff9cf7; }
.clash-beat-pill--orange { --beat-color: #ff8a1f; --pb-edge: #ff8a1f; --pb-fill-a: #45240a; --pb-fill-b: #1f1004; --pb-text: #ffc68a; }
.clash-beat-pill--neutral { --beat-color: #8a8a96; --pb-edge: #8a8a96; --pb-text: #d8d8e0; }

.clash-beat-banner {
    filter: drop-shadow(0 0 10px var(--beat-glow, transparent)) drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6));
}
.clash-beat-banner .clash-beat-pill,
.clash-beat-fly .clash-beat-pill {
    padding: 0.45rem 0.9rem;
    font-size: 13px;
    letter-spacing: 0.04em;
}
@media (min-width: 768px) {
    .clash-beat-banner .clash-beat-pill,
    .clash-beat-fly .clash-beat-pill {
        padding: 0.55rem 1.25rem;
        font-size: 17px;
    }
}
.clash-beat-fly {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 85;
    pointer-events: none;
    will-change: transform;
    filter: drop-shadow(0 0 10px var(--beat-glow, transparent));
}
.clash-beat-burst {
    position: fixed;
    width: 76px;
    height: 76px;
    margin: -38px 0 0 -38px;
    z-index: 84;
    pointer-events: none;
    box-shadow: inset 0 0 0 4px var(--beat-color), 0 0 16px var(--beat-color), inset 0 0 12px var(--beat-color);
    image-rendering: pixelated;
}
.clash-beat-spark {
    position: fixed;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    z-index: 84;
    pointer-events: none;
    background: var(--beat-color);
    box-shadow: 0 0 6px var(--beat-color);
}
.clash-beat-hit {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
    border-radius: inherit;
    box-shadow: inset 0 0 0 3px var(--beat-color), inset 0 0 28px var(--beat-color);
    background: color-mix(in srgb, var(--beat-color) 18%, transparent);
}

/* Weapon charge: each landed callout adds orbiting motes that wrap round the
   weapon art plus themed ambient particles. Every orbit exists twice: the far
   half of its path in the back layer (behind the art), the near half in the
   front layer. Both copies share timing, so a mote hands off between layers
   as it crosses the orbit's midline. All motion is CSS so the finisher's
   cloned weapon keeps animating mid-swing. Foes' art is mirrored, so are the
   layers. */
.clash-charge-anchor {
    position: relative;
    isolation: isolate;
}
.clash-charge-back,
.clash-charge-front {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--charge-size);
    height: var(--charge-size);
    translate: -50% -50%;
    pointer-events: none;
}
.clash-charge-back { z-index: -1; }
.clash-charge-front { z-index: 5; }
#clash-card-enemy-slot .clash-charge-back,
#clash-card-enemy-slot .clash-charge-front { scale: -1 1; }
@keyframes clash-charge-spin { to { rotate: 360deg; } }
.clash-charge-orbit {
    position: absolute;
    left: calc(50% + var(--ox, 0px));
    top: calc(50% + var(--oy, 0px));
    width: 0;
    height: 0;
    rotate: var(--tilt);
}
.clash-charge-ox {
    position: absolute;
    left: 0;
    top: 0;
    animation: clash-charge-x var(--t) ease-in-out infinite alternate, clash-charge-near var(--t) linear infinite alternate;
    animation-delay: var(--dx), var(--dy);
}
.clash-charge-orbit.is-far .clash-charge-ox { animation-name: clash-charge-x, clash-charge-far; }
.clash-charge-mote {
    position: absolute;
    left: -3px;
    top: -3px;
    width: 6px;
    height: 6px;
    background: var(--c);
    box-shadow: 0 0 4px var(--c), inset 0 0 0 1px rgba(255, 255, 255, 0.55);
    animation: clash-charge-y var(--t) ease-in-out infinite alternate;
    animation-delay: var(--dy);
}
.clash-charge-orbit.is-far .clash-charge-mote { filter: brightness(0.75); }
@keyframes clash-charge-x {
    from { translate: calc(var(--rx) * -1) 0; }
    to { translate: var(--rx) 0; }
}
@keyframes clash-charge-y {
    from { translate: 0 calc(var(--ry) * -1); scale: 0.6; opacity: 0.6; }
    to { translate: 0 var(--ry); scale: 1.15; opacity: 1; }
}
/* Hand-off between layers at the orbit midline (y animation's halfway point). */
@keyframes clash-charge-near {
    0%, 50% { opacity: 0; }
    50.1%, 100% { opacity: var(--o, 1); }
}
@keyframes clash-charge-far {
    0%, 50% { opacity: var(--o, 1); }
    50.1%, 100% { opacity: 0; }
}
.clash-charge-flash {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--c) 38%, transparent 70%);
    mix-blend-mode: screen;
}

/* Per-effect particle shapes (data-shape on the orbiting element). Clipped
   shapes glow via drop-shadow on the parent since clip-path eats box-shadow. */
.clash-charge-ox[data-shape='block'] > .clash-charge-mote {
    left: -3.5px; top: -3.5px; width: 7px; height: 7px;
}
.clash-charge-ox[data-shape='chevron'],
.clash-charge-ox[data-shape='star'],
.clash-charge-ox[data-shape='shard'],
.clash-charge-ox[data-shape='flame'] {
    filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 4px var(--c));
}
/* Stance arrows: hard 1px rim (four unblurred shadows) before the glow so the
   up/down silhouette reads at a glance. */
.clash-charge-ox[data-shape='chevron'] {
    --arrow-rim: rgba(10, 4, 8, 0.9);
    filter:
        drop-shadow(1px 0 0 var(--arrow-rim)) drop-shadow(-1px 0 0 var(--arrow-rim))
        drop-shadow(0 1px 0 var(--arrow-rim)) drop-shadow(0 -1px 0 var(--arrow-rim))
        drop-shadow(0 0 3px var(--c));
}
.clash-charge-ox.is-debuff[data-shape='chevron'] {
    --arrow-rim: color-mix(in srgb, var(--c) 45%, #fff);
    filter:
        drop-shadow(1px 0 0 var(--arrow-rim)) drop-shadow(-1px 0 0 var(--arrow-rim))
        drop-shadow(0 1px 0 var(--arrow-rim)) drop-shadow(0 -1px 0 var(--arrow-rim))
        drop-shadow(0 0 2px var(--c)) drop-shadow(0 1px 1px #000);
}
.clash-charge-ox[data-shape='chevron'] > .clash-charge-mote {
    left: -8px; top: -8px; width: 16px; height: 16px;
    box-shadow: none;
    rotate: calc(var(--tilt) * -1);
    background: linear-gradient(#fff 0%, var(--c) 40%);
    clip-path: polygon(50% 0, 100% 52%, 70% 52%, 70% 100%, 30% 100%, 30% 52%, 0 52%);
}
.clash-charge-ox[data-shape='star'] > .clash-charge-mote {
    left: -5px; top: -5px; width: 10px; height: 10px;
    box-shadow: none;
    background: linear-gradient(#fff, var(--c) 70%);
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
    animation: clash-charge-y var(--t) ease-in-out infinite alternate, clash-charge-twinkle 0.9s steps(4) infinite;
    animation-delay: var(--dy), 0s;
}
@keyframes clash-charge-twinkle { to { rotate: 90deg; } }
.clash-charge-ox[data-shape='shard'] > .clash-charge-mote {
    left: -2px; top: -5px; width: 4px; height: 10px;
    box-shadow: none;
    background: linear-gradient(#fff 0%, var(--c) 45%);
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    rotate: 25deg;
}
.clash-charge-ox[data-shape='flame'] > .clash-charge-mote {
    left: -3px; top: -5px; width: 6px; height: 9px;
    box-shadow: none;
    border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
    background: radial-gradient(circle at 50% 70%, #fff 0 18%, var(--c) 55%);
    animation: clash-charge-y var(--t) ease-in-out infinite alternate, clash-charge-flicker 0.24s ease-in-out infinite alternate;
    animation-delay: var(--dy), 0s;
}
@keyframes clash-charge-flicker {
    from { rotate: -14deg; }
    to { rotate: 12deg; }
}
.clash-charge-ox[data-shape='twin'] > .clash-charge-mote { rotate: 45deg; }
.clash-charge-ox.is-echo { --o: 0.4; }

/* Comet orbit: spinning arms squashed into an ellipse, head at the rim. */
.clash-charge-squash {
    position: absolute;
    left: 0;
    top: 0;
    scale: 1 0.38;
}
.clash-charge-spin {
    position: absolute;
    left: 0;
    top: 0;
    animation: clash-charge-spin var(--t) linear infinite;
}
.clash-charge-spin.is-reverse { animation-direction: reverse; }
.clash-charge-comet {
    position: absolute;
    left: var(--rx);
    top: -3px;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background: #fff;
    box-shadow: 0 0 4px var(--c), 0 0 9px var(--c);
    animation: clash-charge-near-spin var(--t) linear infinite;
}
.clash-charge-orbit.is-far .clash-charge-comet { animation-name: clash-charge-far-spin; filter: brightness(0.75); }
.clash-charge-spin.is-reverse .clash-charge-comet { animation-direction: reverse; }
/* Spin runs 0→360°: the first half sweeps the near (lower) side. */
@keyframes clash-charge-near-spin {
    0%, 50% { opacity: 1; }
    50.1%, 100% { opacity: 0; }
}
@keyframes clash-charge-far-spin {
    0%, 50% { opacity: 0; }
    50.1%, 100% { opacity: 1; }
}
.clash-charge-comet::after {
    content: '';
    position: absolute;
    left: 1px;
    bottom: 100%;
    width: 4px;
    height: 22px;
    background: linear-gradient(to top, var(--c), transparent);
}
.clash-charge-spin.is-reverse .clash-charge-comet::after {
    bottom: auto;
    top: 100%;
    background: linear-gradient(to bottom, var(--c), transparent);
}

/* Themed ambient particles scattered along the weapon (data-fx). */
.clash-charge-fx {
    position: absolute;
    left: calc(50% + var(--x));
    top: calc(50% + var(--y));
    opacity: 0;
    animation-duration: var(--dur);
    animation-delay: var(--d);
    animation-iteration-count: infinite;
}
/* Initiative: static electricity, jagged bolts that crackle in and out. */
.clash-charge-fx[data-fx='zap'] {
    width: 9px;
    height: 14px;
    margin: -7px 0 0 -4.5px;
    background: linear-gradient(#fff 30%, var(--c));
    clip-path: polygon(45% 0, 100% 0, 62% 42%, 92% 42%, 18% 100%, 40% 55%, 8% 55%);
    filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 4px var(--c));
    rotate: var(--r);
    animation-name: clash-fx-zap;
    animation-timing-function: steps(1, end);
}
@keyframes clash-fx-zap {
    0% { opacity: 0; scale: 1; }
    6% { opacity: 1; scale: 1; }
    10% { opacity: 0.2; }
    13% { opacity: 1; scale: -1.15 1.15; }
    18% { opacity: 0.5; scale: 0.8; }
    21%, 100% { opacity: 0; }
}
/* Twinned: glitch slices with a chromatic split that jitter between timelines. */
.clash-charge-fx[data-fx='glitch'] {
    width: 10px;
    height: 3px;
    margin: -1.5px 0 0 -5px;
    background: var(--c);
    box-shadow: 3px 1px 0 rgba(0, 229, 255, 0.8), -3px -1px 0 rgba(255, 255, 255, 0.4);
    animation-name: clash-fx-glitch;
    animation-timing-function: steps(1, end);
}
@keyframes clash-fx-glitch {
    0% { opacity: 0; translate: 0 0; scale: 1 1; }
    8% { opacity: 1; translate: -4px 0; scale: 1.4 1; }
    15% { opacity: 0.6; translate: 4px 1px; scale: 0.6 1; }
    22% { opacity: 1; translate: 1px -3px; scale: 1.1 1.4; }
    29% { opacity: 0.8; translate: -2px 2px; scale: 1.6 0.7; }
    35%, 100% { opacity: 0; }
}
/* Bolster: pixel crosses that float up like a ward being raised. */
.clash-charge-fx[data-fx='plus'] {
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    background: var(--c);
    clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%);
    filter: drop-shadow(0 0 2px var(--c)) drop-shadow(0 0 3px var(--c));
    animation-name: clash-fx-rise;
    animation-timing-function: ease-out;
}
@keyframes clash-fx-rise {
    0% { opacity: 0; translate: 0 6px; scale: 0.5; }
    20% { opacity: 1; scale: 1; }
    100% { opacity: 0; translate: var(--drift) calc(var(--charge-size) * -0.32); scale: 0.8; }
}
/* Stance advantage: fast power-surge streaks. */
.clash-charge-fx[data-fx='surge'] {
    width: 2px;
    height: 13px;
    margin: -6.5px 0 0 -1px;
    background: linear-gradient(to top, transparent, var(--c) 55%, #fff);
    filter: drop-shadow(0 0 2px var(--c));
    animation-name: clash-fx-surge;
    animation-timing-function: cubic-bezier(0.3, 0, 0.8, 0.6);
}
@keyframes clash-fx-surge {
    0% { opacity: 0; translate: 0 10px; scale: 1 0.4; }
    25% { opacity: 1; scale: 1 1.25; }
    100% { opacity: 0; translate: 0 calc(var(--charge-size) * -0.4); scale: 1 0.6; }
}
/* Grand: glints that pop and spin in place. */
.clash-charge-fx[data-fx='glint'] {
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    background: linear-gradient(#fff, var(--c));
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    filter: drop-shadow(0 0 3px var(--c));
    animation-name: clash-fx-glint;
    animation-timing-function: ease-in-out;
}
@keyframes clash-fx-glint {
    0% { opacity: 0; scale: 0; rotate: 0deg; }
    12% { opacity: 1; scale: 1.2; rotate: 45deg; }
    26%, 100% { opacity: 0; scale: 0; rotate: 90deg; }
}
/* Favored: frost flakes drifting down and turning. */
.clash-charge-fx[data-fx='frost'] {
    width: 6px;
    height: 7px;
    margin: -3.5px 0 0 -3px;
    background: linear-gradient(135deg, #fff, var(--c));
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    filter: drop-shadow(0 0 2px var(--c));
    animation-name: clash-fx-drift;
    animation-timing-function: linear;
}
@keyframes clash-fx-drift {
    0% { opacity: 0; translate: 0 -8px; rotate: 0deg; }
    20% { opacity: 0.95; }
    100% { opacity: 0; translate: var(--drift) calc(var(--charge-size) * 0.3); rotate: 180deg; }
}
/* Sudden Death: licking flame tongues. */
.clash-charge-fx[data-fx='flame'] {
    width: 7px;
    height: 11px;
    margin: -5.5px 0 0 -3.5px;
    border-radius: 50% 50% 45% 45% / 65% 65% 35% 35%;
    background: radial-gradient(circle at 50% 72%, #fff 0 14%, #ffd966 30%, var(--c) 60%, transparent 74%);
    filter: drop-shadow(0 0 3px var(--c));
    animation-name: clash-fx-flame;
    animation-timing-function: ease-in;
}
@keyframes clash-fx-flame {
    0% { opacity: 0; translate: 0 4px; scale: 0.5 0.6; }
    15% { opacity: 1; scale: 1.1 1.2; }
    55% { opacity: 0.9; translate: calc(var(--drift) * 0.5) calc(var(--charge-size) * -0.16); scale: 0.8 1; }
    100% { opacity: 0; translate: var(--drift) calc(var(--charge-size) * -0.34); scale: 0.2 0.4; }
}
/* Debuff drips. */
.clash-charge-fx[data-fx='drip'] {
    width: 3px;
    height: 5px;
    margin: -2.5px 0 0 -1.5px;
    border-radius: 0 0 2px 2px;
    background: #140a12;
    box-shadow: 0 0 0 1px var(--c), 0 0 4px var(--c);
    animation-name: clash-charge-fall;
    animation-timing-function: ease-in;
}
@keyframes clash-charge-fall {
    0% { translate: 0 0; opacity: 0; scale: 1 1; }
    15% { opacity: 0.95; }
    100% { translate: var(--drift) calc(var(--charge-size) * 0.42); opacity: 0; scale: 0.7 1.7; }
}
.clash-charge-fx.is-debuff:not([data-fx='drip']) {
    background: #140a12;
    filter: drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 2px var(--c));
}

/* Debuffs: dark cores with a coloured rim, orbit sinks low and runs backwards,
   and drips fall instead of particles rising. */
.clash-charge-orbit.is-debuff { translate: 0 var(--sink); }
.clash-charge-ox.is-debuff {
    filter: drop-shadow(0 0 1px var(--c)) drop-shadow(0 0 2px var(--c)) drop-shadow(0 1px 1px #000);
}
.clash-charge-ox.is-debuff > .clash-charge-mote {
    background: #140a12;
    box-shadow: none;
}
.clash-charge-ox.is-debuff[data-shape='chevron'] > .clash-charge-mote {
    rotate: calc(180deg - var(--tilt));
    background: linear-gradient(var(--c) 0%, color-mix(in srgb, var(--c) 30%, #140a12) 70%);
}
.clash-charge-spin.is-debuff .clash-charge-comet {
    background: #140a12;
    box-shadow: 0 0 0 1px var(--c), 0 0 6px var(--c);
}
.clash-charge-spin.is-debuff .clash-charge-comet::after { opacity: 0.55; }
.clash-charge-flash.is-debuff {
    background: radial-gradient(circle, #0a0408 0%, color-mix(in srgb, var(--c) 65%, #000) 42%, transparent 70%);
    mix-blend-mode: normal;
}
.clash-beat-fly.is-debuff {
    filter: saturate(0.55) brightness(0.78) drop-shadow(0 0 8px var(--beat-glow, transparent)) drop-shadow(0 3px 0 #000);
}
.clash-beat-hit.is-debuff {
    background: rgba(8, 2, 10, 0.45);
}
.clash-beat-spark.is-debuff {
    background: #140a12;
    box-shadow: 0 0 0 1px var(--beat-color), 0 0 4px var(--beat-color);
}

@media (max-width: 767px) {
    .clash-charge-ox, .clash-charge-comet { scale: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
    .clash-charge-ox, .clash-charge-mote, .clash-charge-spin, .clash-charge-comet { animation: none; }
    .clash-charge-orbit.is-far, .clash-charge-fx { display: none; }
}
.clash-finisher-charged > .weapon-glow-wrap,
.clash-finisher-charged > img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
}
.clash-finisher-charge-ring {
    position: fixed;
    z-index: 91;
    width: 56px;
    height: 56px;
    pointer-events: none;
    box-shadow: inset 0 0 0 4px var(--c), 0 0 18px var(--c), inset 0 0 14px var(--c);
    will-change: transform, opacity;
}
.clash-slot-flicker { animation: clash-slot-flicker 0.28s ease-out; }
@keyframes clash-slot-flicker {
    0% { opacity: 0.65; transform: scale(0.96); }
    100% { opacity: 1; transform: scale(1); }
}

.clash-burst-layer {
    position: fixed; width: 0; height: 0; z-index: 80; pointer-events: none;
}
.clash-finisher-layer {
    position: fixed;
    inset: 0;
    z-index: 88;
    pointer-events: none;
    overflow: visible;
}
.clash-finisher-weapon {
    z-index: 90;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.55));
    will-change: transform, opacity;
}
.clash-finisher-piece {
    z-index: 86;
    overflow: hidden;
    will-change: transform, opacity;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
}
.clash-finisher-slash {
    position: fixed;
    z-index: 91;
    height: 4px;
    border-radius: 999px;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
    box-shadow: 0 0 10px currentColor, 0 0 18px #fff;
}
.clash-finisher-shot {
    position: fixed;
    z-index: 89;
    pointer-events: none;
    will-change: transform, opacity;
}
.clash-finisher-shot.is-arrowhead {
    width: 32px;
    height: 24px;
    filter: drop-shadow(0 0 6px currentColor) drop-shadow(0 0 12px currentColor);
}
.clash-finisher-arrowhead-core {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, currentColor 0%, currentColor 38%, #fff 100%);
    clip-path: polygon(100% 50%, 0 0, 26% 50%, 0 100%);
}
.clash-finisher-flare {
    position: fixed;
    z-index: 89;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle, #fff 0%, currentColor 32%, transparent 70%);
    mix-blend-mode: screen;
    will-change: transform, opacity;
}
.glow-impact-fx {
    position: fixed;
    pointer-events: none;
    mix-blend-mode: screen;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.clash-finisher-trail {
    position: fixed;
    z-index: 89;
    width: 5px;
    height: 5px;
    pointer-events: none;
    box-shadow: 0 0 6px currentColor;
    will-change: transform, opacity;
}
.clash-finisher-shot.is-bolt {
    width: 18px;
    height: 18px;
    border-radius: 999px;
}
.clash-finisher-seal {
    position: fixed;
    z-index: 87;
    width: 58px;
    height: 58px;
    border: 2px solid currentColor;
    border-radius: 6px;
    pointer-events: none;
    will-change: transform, opacity;
    box-shadow: 0 0 18px currentColor, inset 0 0 14px currentColor;
}
.clash-finisher-seal-inner {
    position: absolute;
    inset: 9px;
    border: 1px solid currentColor;
    border-radius: 3px;
    opacity: 0.7;
}
.clash-finisher-mote {
    position: fixed;
    z-index: 91;
    width: 11px;
    height: 11px;
    pointer-events: none;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    will-change: transform, opacity;
    box-shadow: 0 0 10px currentColor;
}
.clash-finisher-shock {
    position: fixed;
    z-index: 87;
    width: 22px;
    height: 22px;
    border: 2px solid currentColor;
    border-radius: 999px;
    pointer-events: none;
    will-change: transform, opacity;
    box-shadow: 0 0 12px currentColor;
}
.clash-finisher-crack {
    position: fixed;
    z-index: 87;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 0 4px currentColor);
}
.clash-burst-dot {
    position: absolute; width: 6px; height: 6px; border-radius: 999px;
    margin: -3px 0 0 -3px; pointer-events: none;
}
.pending-card-fly {
    position: fixed;
    z-index: 20000;
    pointer-events: none;
    margin: 0 !important;
    will-change: transform, opacity;
    filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55));
}
.pending-card-fly .reveal-item { animation: none !important; }
.pending-card-fly-dot {
    position: fixed;
    z-index: 20001;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 999px;
    pointer-events: none;
    box-shadow: 0 0 8px currentColor;
    will-change: transform, opacity;
}
.inspect-shot-orb {
    position: fixed;
    z-index: 20002;
    width: 28px;
    height: 10px;
    margin: -5px 0 0 -14px;
    border-radius: 999px;
    pointer-events: none;
    background: #fff;
    box-shadow: 0 0 10px currentColor, 0 0 22px currentColor, -10px 0 18px currentColor;
    will-change: transform, opacity;
}
/* Weapon art thrown into the Ledger book / popped out of the Home chest (inspect-scenes.js). */
.inspect-flyer {
    position: fixed;
    z-index: 20004;
    object-fit: contain;
    image-rendering: pixelated;
    pointer-events: none;
    filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 0 6px var(--flyer-glow, #ffd966));
}
.card-disintegrate {
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.card-disintegrate-ember {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none;
    image-rendering: pixelated;
}
.card-dust-layer {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 20003;
    pointer-events: none;
}
.dust-splash-mote,
.dust-splash-puff {
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
.dust-splash-mote { border-radius: 1px; }
.dust-splash-puff { border-radius: 999px; filter: blur(3px); }

@media (prefers-reduced-motion: reduce) {
    .clash-temp-deal, .clash-slot-flicker, .clash-pip-flash,
    .clash-force-tick, .clash-force-land,
    .animate-clash-strike-right, .animate-clash-strike-left,
    .animate-clash-slash-right, .animate-clash-slash-left,
    .animate-clash-pierce-right, .animate-clash-pierce-left,
    .animate-clash-smash-right, .animate-clash-smash-left,
    .animate-clash-fade-out { animation: none; }
}

.tab-bg {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%;
    min-height: 100%;
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: none;
    pointer-events: none; user-select: none; z-index: 0;
}
/* Phones: each tab stands on its own receding floor, pinned to the bottom of the
   screen behind the footer and nav. Sized to the large viewport so the browser
   toolbar showing or hiding on scroll never resizes it (which slid the art and
   its fade) and footer/stash height changes never move it. */
@media (max-width: 767px) {
    .tab-bg {
        position: fixed;
        top: auto;
        bottom: 0;
        height: 100vh;
        height: 100lvh;
        min-height: 0;
        background: url(/static/images/ui/home/scene-floor.png?v=1d257d0dfd) 50% 100% / 1440px auto no-repeat;
        image-rendering: pixelated;
        -webkit-mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.45) 38%, #000 72%);
        mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.45) 38%, #000 72%);
    }
    #app-tab-bg.bg-forge { background-image: url(/static/images/ui/forge/scene-floor.png?v=1d257d0dfd); }
    #app-tab-bg.bg-ledger { background-image: url(/static/images/ui/ledger/scene-floor.png?v=1d257d0dfd); }
    #app-tab-bg.bg-clash { background-image: url(/static/images/ui/clash/scene-floor.png?v=1d257d0dfd); }
    #app-tab-bg.bg-quests { background-image: url(/static/images/ui/quests/scene-floor.png?v=1d257d0dfd); }
}
#app-content { position: relative; isolation: isolate; background-color: transparent; }
.activity-log-panel {
    display: none;
}
.activity-log-glance {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 4px 8px 4px 24px;
    box-sizing: border-box;
    cursor: var(--cursor-hand);
    text-align: left;
}
.activity-log-glance-icon {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 14px;
    height: 14px;
    object-fit: contain;
    pointer-events: none;
}
.activity-log-preview {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 1px;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    font-family: 'MainFont', Segoe UI, sans-serif;
    font-size: 11px;
    line-height: 1.25;
    color: #e8e8e8;
}
.activity-log-preview .activity-log-line {
    min-width: 0;
    width: 100%;
    padding: 0;
    opacity: 0.28;
}
.activity-log-preview .activity-log-line:nth-last-child(2) { opacity: 0.6; }
.activity-log-preview .activity-log-line:nth-last-child(1) { opacity: 1; }
.activity-log-preview .activity-log-msg {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.activity-log-item {
    display: inline;
    padding: 0;
    margin: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-weight: bold;
    cursor: var(--cursor-hand);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.activity-log-item:hover {
    filter: brightness(1.15);
}
#item-tooltip-modal.modal-overlay {
    z-index: 10120;
}
/* Mobile card-tip taps open this from inside the item inspect modal, so it stacks above it. */
#info-tooltip-modal.modal-overlay {
    z-index: 10130;
}
/* Menu sits above every particle / flyer layer (they reach 20004); its own dialogs open after it closes. */
#settings-modal.modal-overlay,
#avatar-modal.modal-overlay {
    z-index: 20050;
}
/* Alerts raised from either of those (e.g. a failed avatar save) stay on top of them. */
#game-dialog-modal.modal-overlay {
    z-index: 20060;
}
/* Above every modal and tour layer (tours reach 20004). */
#play-session-modal.modal-overlay {
    z-index: 20100;
}
.activity-log-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 3px;
    border-bottom: 1px solid rgba(255, 217, 102, 0.28);
}
.modal-panel .activity-log-header {
    padding: 10px 12px 8px;
}
.activity-log-title {
    font-family: 'MainFont', Segoe UI, sans-serif;
    font-size: 11px;
    letter-spacing: 0.03em;
    color: var(--color-accentGold, #ffd966);
}
.modal-panel .activity-log-title {
    font-family: 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
    font-size: 15px;
    letter-spacing: 0.04em;
}
.activity-filter-toggle {
    background: transparent;
    border: 1px solid rgba(255, 217, 102, 0.35);
    color: #c8c8c8;
    font-family: 'MainFont', Segoe UI, sans-serif;
    font-size: 10px;
    line-height: 1;
    padding: 3px 6px;
    cursor: var(--cursor-hand);
}
.activity-filter-toggle:hover {
    color: #fff;
    border-color: rgba(255, 217, 102, 0.7);
}
.activity-log-clear:hover {
    color: #ff939c;
    border-color: rgba(255, 71, 87, 0.7);
}
.activity-filter-clear {
    width: 100%;
    margin-top: 4px;
    padding-top: 5px;
    background: none;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    color: #ff939c;
    text-align: left;
}
.activity-filter-clear:hover {
    color: #ffffff;
}
/* Date divider between log lines from different local days. */
.activity-log-day {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 3px;
    font-family: 'MainFont', Segoe UI, sans-serif;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 217, 102, 0.75);
}
.activity-log-day:first-child {
    margin-top: 2px;
}
.activity-log-day::before,
.activity-log-day::after {
    content: '';
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 217, 102, 0.28);
}
.activity-filter-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 8;
    min-width: 132px;
    padding: 6px 8px;
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 217, 102, 0.35);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}
.activity-filter-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'MainFont', Segoe UI, sans-serif;
    font-size: 11px;
    color: #ddd;
    cursor: var(--cursor-hand);
    padding: 2px 0;
}
.activity-filter-option-sep {
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.activity-log-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 6px 6px;
    text-align: left;
}
.activity-log-line {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-family: 'MainFont', Segoe UI, sans-serif;
    font-size: 11px;
    line-height: 1.35;
    color: #e8e8e8;
    padding: 1px 0;
}
.activity-log-time {
    flex: 0 0 auto;
    color: #888;
    font-variant-numeric: tabular-nums;
}
.activity-log-tag {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: 0.04em;
}
.activity-log-tag-roll {
    color: var(--color-accentGold, #ffd966);
}
.activity-log-tag-server {
    color: var(--color-upgradedCyan, #00ffff);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.activity-log-tag-clash {
    color: var(--color-danger, #ff4757);
}
.activity-log-tag-ledger {
    color: var(--color-entropyBase, #a335ee);
}
.activity-log-tag-forge {
    color: var(--color-rarityLegendary, #ff8000);
}
.activity-log-tag-local {
    color: #8d8d8d;
}
.activity-log-msg {
    min-width: 0;
    flex: 1 1 auto;
}
.activity-log-empty {
    color: #777;
    font-family: 'MainFont', Segoe UI, sans-serif;
    font-size: 11px;
    font-style: italic;
    padding: 0;
}
.activity-log-list-modal {
    min-height: 220px;
    max-height: min(60vh, 420px);
    padding: 8px 10px 12px;
}
.activity-log-list-modal .activity-log-empty {
    padding: 8px 2px;
}
.activity-modal-panel {
    background: rgba(18, 18, 18, 0.96);
    border: 1px solid rgba(255, 217, 102, 0.35);
}
/* Mobile Activity modal: clear the 12px pixel rim, and stack each entry
   (time + tag over a full-width message) so nothing is squeezed or clipped. */
@media (max-width: 767px) {
    .activity-modal-panel .activity-log-header {
        padding: 16px 18px 10px;
    }
    .activity-log-list-modal {
        max-height: min(64vh, 520px);
        padding: 4px 18px 18px;
    }
    .activity-log-list-modal .activity-log-line {
        flex-wrap: wrap;
        row-gap: 2px;
        padding: 7px 0;
        font-size: 12px;
        line-height: 1.4;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    }
    .activity-log-list-modal .activity-log-line:last-child {
        border-bottom: 0;
    }
    .activity-log-list-modal .activity-log-time {
        font-size: 10px;
    }
    .activity-log-list-modal .activity-log-msg {
        flex-basis: 100%;
        overflow-wrap: anywhere;
    }
}
#bottom-tab-nav .nav-tab.is-open {
    color: var(--color-accentGold, #ffd966);
}
@media (min-width: 768px) {
    .player-footer-actions {
        width: 100%;
        overflow: visible;
    }
    .activity-log-panel {
        display: block;
        position: relative;
        flex: 1 1 0;
        width: auto;
        min-width: 120px;
        height: calc(var(--player-footer-wing-height) - (var(--player-footer-wing-inset, 14px) * 2));
        max-height: calc(100% - 8px);
        margin-left: 8px;
        margin-right: 8px;
        align-self: center;
        pointer-events: auto;
        z-index: 2;
        background: rgba(18, 18, 18, 0.88);
        border: 1px solid rgba(255, 217, 102, 0.28);
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
    }
    .activity-log-history {
        display: none;
        flex-direction: column;
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 4px);
        height: 240px;
        pointer-events: auto;
        background: rgba(18, 18, 18, 0.94);
        border: 1px solid rgba(255, 217, 102, 0.28);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55);
    }
    .activity-log-panel.is-expanded .activity-log-history {
        display: flex;
    }
    .activity-log-panel.is-expanded .activity-log-glance {
        background: rgba(255, 217, 102, 0.06);
    }
}
.relative-z1 { position: relative; z-index: 1; }

.upgrade-action-btn {
    -webkit-appearance: none !important;
    padding: 4px 12px !important; font-family: 'MainFont', sans-serif !important;
    font-size: 12px !important; font-weight: bold !important;
}
.upgrade-action-btn.upgrade-reroll-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1 !important;
    padding: 2px 10px !important;
}
.upgrade-action-btn.upgrade-reroll-btn .upgrade-reroll-glyph {
    font-size: 12px;
    line-height: 1;
}
.upgrade-action-btn.upgrade-reroll-btn .upgrade-reroll-cost {
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

.ledger-bench-rows {
    max-height: min(52vh, 420px);
    overflow-y: auto;
}
.ledger-stat-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    font-size: 17px;
    line-height: 1;
    text-shadow: 0 0 6px currentColor;
}

@property --det-progress {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}
.forge-det-host {
    --det-progress: 0;
}
.forge-det-ring {
    position: absolute;
    inset: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}
.forge-det-ring-track,
.forge-det-ring-fill {
    fill: none;
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}
.forge-det-ring-track {
    stroke: rgba(199, 125, 255, 0.22);
}
.forge-det-ring-fill {
    stroke: #c77dff;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: var(--det-progress, 0) 100;
    filter: drop-shadow(0 0 5px rgba(199, 125, 255, 0.65));
}
.forge-det-host.is-det-empty .forge-det-ring-fill {
    opacity: 0;
}
.forge-det-host.is-det-complete .forge-det-ring-fill {
    stroke: #ffb8ff;
    filter: drop-shadow(0 0 10px rgba(255, 184, 255, 0.9));
}
#async-roll-trigger[data-card-tip] {
    cursor: var(--cursor-hand);
}
#async-roll-trigger,
#equip-actions button,
#save-feedback,
#rolling-indicator {
    font-family: 'Dico', MainFont, sans-serif;
}

#async-roll-trigger {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    isolation: isolate;
    box-shadow: 0 0 15px #ff4757;
    transition: transform 0.2s ease, box-shadow 0.55s ease, opacity 0.2s ease;
}
#async-roll-trigger:hover {
    box-shadow: 0 0 25px #ff4757;
}
#async-roll-trigger::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #ff007f, #7f00ff, #00d2ff);
    opacity: 0;
    transition: opacity 0.55s ease;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}
#async-roll-trigger.forge-determined {
    box-shadow: 0 0 20px #ff007f;
}
#async-roll-trigger.forge-determined:hover {
    box-shadow: 0 0 26px #ff007f;
}
#async-roll-trigger.forge-determined::before {
    opacity: 1;
}
#async-roll-trigger > *:not(.forge-det-ring) {
    position: relative;
    z-index: 1;
}
#async-roll-trigger > .forge-det-ring {
    position: absolute;
    inset: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    z-index: 2;
}
#forge-tier-pill {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    pointer-events: none;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.22);
    padding: 5px 8px 5px 5px;
    line-height: 1;
    overflow: hidden;
}
#forge-tier-badge {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
}
#forge-tier-text {
    font-family: 'Dico', MainFont, sans-serif;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
#forge-roll-label {
    grid-column: 2;
    justify-self: center;
    text-align: center;
    white-space: nowrap;
}
/* Over the bench the pill takes only its own width, so the label never runs into it. */
.forge-roll-float #async-roll-trigger {
    grid-template-columns: auto 1fr;
    column-gap: 8px;
}
.forge-config-stat-row {
    display: flex;
    width: 100%;
    gap: 8px;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) {
    font-family: 'Dico', MainFont, sans-serif;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .font-heading,
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .font-main {
    font-family: inherit;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) > h2,
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .font-card-display {
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    box-sizing: border-box;
    padding: 0.45rem 0.55rem;
    gap: 0.4rem;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    transition: box-shadow 0.55s ease, border-color 0.55s ease;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #ff007f, #7f00ff, #00d2ff);
    opacity: 0;
    transition: opacity 0.55s ease;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
}
#forge-boosts-panel .forge-config-pill.forge-determined {
    box-shadow: 0 0 16px #ff007f;
    border-color: rgba(255, 184, 255, 0.5);
}
#forge-boosts-panel .forge-config-pill.forge-determined::before {
    opacity: 1;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill > * {
    position: relative;
    z-index: 1;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-label {
    font-size: 12px;
    color: #fff;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-value {
    font-size: 14px;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
}
@media (min-width: 768px) {
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill {
        padding: 0.5rem 0.55rem;
        gap: 0.35rem;
    }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-label {
        font-size: 13px;
    }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-value {
        font-size: 16px;
    }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-icon {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }
}
/* Each pill sizes its own text: narrow pills step down whole pixel sizes (pixel fonts),
   and the label truncates before the value is ever pushed out. */
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill {
    container-type: inline-size;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
:is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-value {
    flex-shrink: 0;
}
@container (max-width: 160px) {
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-label {
        font-size: 12px;
        letter-spacing: 0;
    }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-value { font-size: 14px; }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-icon {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }
}
@container (max-width: 138px) {
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-label { font-size: 11px; }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-value { font-size: 13px; }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-icon {
        width: 16px;
        height: 16px;
        flex-basis: 16px;
        margin-right: -2px;
    }
}
@container (max-width: 118px) {
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-label { font-size: 10px; }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-value { font-size: 12px; }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill .shell-stat-icon {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
}
@media (min-width: 768px) {
    #forge-tier-badge { width: 24px; height: 24px; }
    #forge-tier-text { font-size: 13px; }
}

.twinned-transition, .twinned-transition * { transition: background-color 0.6s ease-in-out, background-image 0.6s ease-in-out, opacity 0.6s ease-in-out, color 0.6s ease-in-out, border-color 0.6s ease-in-out, text-shadow 0.6s ease-in-out, box-shadow 0.6s ease-in-out, filter 0.6s ease-in-out !important; }
.twinned-blackout { background-image: none !important; background-color: #000 !important; border-color: #000 !important; box-shadow: 0 0 20px #000 !important; }
.twinned-blackout * { color: #000 !important; text-shadow: none !important; border-color: #000 !important; box-shadow: none !important; }
.twinned-blackout img { filter: brightness(0) !important; border-color: #000 !important; }

.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); backdrop-filter: blur(5px);
    z-index: 10100; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: 0.3s ease;
}
/* Compiled Tailwind does not include the arbitrary max-w on this panel, so
   the flex item grew to the longest unwrapped line (full desktop width). */
#info-tooltip-panel {
    /* 6 vw breathing room each side on mobile, 320 px cap on desktop */
    width: min(88vw, 320px);
    max-width: 320px;
    box-sizing: border-box;
}
#site-doc-panel {
    width: min(88vw, 720px);
    max-width: 720px;
    max-height: 85vh;
    box-sizing: border-box;
}
#site-doc-body {
    overflow-y: auto;
    max-height: calc(85vh - 48px);
    -webkit-overflow-scrolling: touch;
}
#site-doc-body h1,
#site-doc-body h2,
#site-doc-body h3 {
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
}

/* Changelog panel: patch buttons (a row on mobile, a column on desktop)
   beside a recessed well holding the patch page's frame. */
.changelog-panel {
    width: min(94vw, 980px);
    height: min(86vh, 720px);
}
.changelog-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
}
.changelog-patches {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 3px 3px 6px;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #555 transparent;
}
.changelog-patch-btn {
    --pb-edge: #55555e;
    --pb-text: var(--color-textMuted, #888888);
    flex: 0 0 auto;
    min-width: 152px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 9px 12px 10px;
    text-align: left;
}
.changelog-patch-btn:hover:not(.is-active) {
    --pb-edge: #8a8a96;
    --pb-text: #dddddd;
}
.changelog-patch-btn.is-active {
    --pb-edge: var(--color-accentGold, #ffd966);
    --pb-fill-a: #2a2410;
    --pb-fill-b: #17140a;
    --pb-text: var(--color-accentGold, #ffd966);
}
.changelog-patch-head {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.changelog-patch-version {
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.04em;
    color: var(--pb-text);
}
.changelog-patch-btn.is-active .changelog-patch-version {
    text-shadow: 0 0 10px rgba(255, 217, 102, 0.45);
}
.changelog-patch-tag {
    margin-left: auto;
    padding: 2px 5px;
    border: 1px solid color-mix(in srgb, var(--color-luckGreen, #2ecc71) 60%, transparent);
    border-radius: 3px;
    background: color-mix(in srgb, var(--color-luckGreen, #2ecc71) 14%, transparent);
    color: var(--color-luckGreen, #2ecc71);
    font-family: var(--font-heading, inherit);
    font-size: 9px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.changelog-patch-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
    font-size: 13px;
    line-height: 1.2;
    color: #e8e8ee;
}
.changelog-patch-date {
    font-family: 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
    font-size: 11px;
    line-height: 1.2;
    color: var(--color-textMuted, #888888);
}
.changelog-frame-well {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    background: #111114;
    box-shadow: inset 0 0 0 2px #0b0b0e, inset 0 0 0 3px #2c2c33;
}
.changelog-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    opacity: 0;
    transition: opacity 180ms ease;
}
.changelog-frame.is-ready {
    opacity: 1;
}
.changelog-frame-status {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 16px;
    text-align: center;
    pointer-events: none;
    color: var(--color-textMuted, #888888);
    font-size: 14px;
}
.changelog-frame-status.is-visible {
    display: flex;
}
@media (min-width: 768px) {
    .changelog-body {
        flex-direction: row;
        gap: 14px;
    }
    .changelog-patches {
        flex: 0 0 220px;
        flex-direction: column;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 3px 6px 3px 3px;
    }
    .changelog-patch-btn {
        min-width: 0;
        width: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .changelog-frame {
        transition: none;
    }
}
.settings-esc-panel .settings-menu-external {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
    margin-left: 2px;
    opacity: 0.85;
}
#game-dialog-panel {
    width: min(88vw, 360px);
    max-width: 360px;
    box-sizing: border-box;
}
#game-dialog-body {
    white-space: pre-wrap;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
@media (max-width: 767px) {
    .modal-overlay { backdrop-filter: none; -webkit-backdrop-filter: none; }
    #mobile-top-strip { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: #1a1a1a !important; }
    html { scroll-padding-top: 64px; }
    #shell-identity-mobile { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background-color: #1a1a1a !important; }
    #clash-result-overlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}

/* DOM shell: always column so mobile chrome stacks (display:flex is set in JS). */
#roll-stage {
    position: relative;
    flex-direction: column;
    min-height: 0;
    isolation: isolate;
}
/* Content tabs sit on black (the splash art stays on the landing stage). */
#roll-stage::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: #000;
    pointer-events: none;
}

/* Pixi-parity large card chrome (canvas-painted rim + rarity HRs) */
.loot-card-pixel-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 2;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.loot-card-pixel-rule {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    position: relative;
    z-index: 2;
}
.inspect-card-stage {
    position: relative;
}
.inspect-card-placeholder {
    position: relative;
}
.inspect-card-mount {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.inspect-card-stage.is-occupied .inspect-placeholder-copy {
    visibility: hidden;
}
.inspect-card-stage.is-occupied .inspect-card-placeholder {
    pointer-events: none;
}
/* Desktop design size is source of truth (408×620). Mobile only uniform-scales. */
.loot-standard-card-shell {
    --loot-card-design-w: 408px;
    --loot-card-design-h: 620px;
    /* 294/408 ≈ 0.72; also shrink for narrow or short viewports. */
    --loot-card-scale: min(0.72, calc((100vw - 32px) / 408px), calc((100dvh - 13rem) / 620px));
    width: calc(var(--loot-card-design-w) * var(--loot-card-scale));
    height: calc(var(--loot-card-design-h) * var(--loot-card-scale));
    margin-inline: auto;
    position: relative;
    flex-shrink: 0;
    overflow: hidden;
}
/* Forge reveals scale/glow past the card box; don't clip those edges. */
#tab-forge,
#tab-forge .forge-card-col,
#forge-card-container,
#forge-card-container .loot-standard-card-shell,
#forge-card-container .loot-standard-card-zoom,
#forge-card-container .loot-standard-card {
    overflow: visible;
}
@media (max-width: 767px) {
    /* Leave room for the fixed roll/save tray (Forge) and the expanded
       loadout/stash footer so the scaled card does not sit on them. */
    #tab-forge #forge-card-container .loot-standard-card-shell,
    .inspect-card-stage .loot-standard-card-shell {
        --loot-card-scale: min(
            0.72,
            calc((100vw - 32px) / 408px),
            calc((100dvh - var(--bottom-nav-total-height) - var(--player-footer-height) - 9rem) / 620px)
        );
    }
    /* Card col must stay below the tray: the tray is position:fixed and would
       otherwise paint under this stacking context while overflow:visible. */
    #tab-forge .forge-card-col {
        z-index: 1;
    }
}
@media (min-width: 768px) {
    .loot-standard-card-shell {
        --loot-card-scale: 1;
        width: var(--loot-card-design-w);
        height: var(--loot-card-design-h);
    }
}
#card-inspection-modal.modal-overlay {
    z-index: 10120;
}
#card-inspection-modal .inspect-modal-stage {
    width: fit-content;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}
#card-inspection-modal #modal-action-container {
    width: 100%;
}
#card-inspection-modal .loot-standard-card-shell {
    --loot-card-scale: min(0.58, calc((100vw - 40px) / 408px), calc((100dvh - 12rem) / 620px));
    width: calc(var(--loot-card-design-w) * var(--loot-card-scale));
    height: calc(var(--loot-card-design-h) * var(--loot-card-scale));
}
@media (min-width: 768px) {
    #card-inspection-modal .loot-standard-card-shell {
        --loot-card-scale: min(0.68, calc((100vw - 80px) / 408px), calc((100dvh - 10rem) / 620px));
        width: calc(var(--loot-card-design-w) * var(--loot-card-scale));
        height: calc(var(--loot-card-design-h) * var(--loot-card-scale));
    }
}
.loot-standard-card-zoom {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--loot-card-design-w);
    height: var(--loot-card-design-h);
    transform: scale(var(--loot-card-scale));
    transform-origin: top left;
}
.loot-standard-card {
    --loot-card-pad: 2rem;
    --loot-affix-band-h: 8rem;
    width: var(--loot-card-design-w, 408px);
    height: var(--loot-card-design-h, 620px);
    isolation: isolate;
    padding: var(--loot-card-pad);
    box-sizing: border-box;
    font-family: 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
}
.loot-standard-card-shell .loot-standard-card {
    width: 100%;
    height: 100%;
}
.loot-standard-card .font-heading,
.loot-standard-card .font-main {
    font-family: inherit;
}
.loot-standard-card .loot-card-name,
.loot-standard-card .loot-card-stamp-letter {
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
}
/* Full-bleed rules + affix band: span card width inside the border, cancel content pad. */
.loot-standard-card .loot-card-rule-bleed,
.loot-standard-card .loot-card-affix-band {
    width: calc(100% + (2 * var(--loot-card-pad)));
    max-width: none;
    margin-left: calc(-1 * var(--loot-card-pad));
    margin-right: calc(-1 * var(--loot-card-pad));
}
/* Rules sit on the seam so the band edge doesn't show a hard cut. */
.loot-standard-card .loot-card-rule-bleed {
    margin-top: -4px;
    margin-bottom: -4px;
}
.loot-card-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex: 1;
}
.loot-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex-shrink: 0;
    /* One text-line of air before the top affix rule (card height stays fixed). */
    padding-bottom: 1.25em;
}
.loot-standard-card .loot-card-stamp-letter {
    font-size: 48px;
    line-height: 1;
}
.loot-standard-card .loot-card-stamp-badge {
    width: 48px;
    height: 48px;
}
.loot-card-stamps {
    position: relative;
    display: block;
    width: 100%;
    min-height: 4.25rem;
}
.loot-card-stamp {
    position: absolute;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    transform: translateX(-50%);
}
.loot-card-stamp--tier {
    left: 25%;
}
.loot-card-stamp--power {
    left: 50%;
}
.loot-card-stamp--origin {
    left: 75%;
}
/* Larger score, same in-flow box as Tier/origin so the 48px badge does not rise. */
.loot-standard-card .loot-card-stamp-score {
    transform: scale(1.5);
    transform-origin: top center;
}
.loot-card-flavor {
    flex-shrink: 0;
    width: 100%;
    margin-top: 1.25em;
    font-size: 12px;
}
.loot-card-affix-band {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    height: var(--loot-affix-band-h);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    /* Equal top/bottom padding so the stance badge (pinned to the top of the
       rail below) and the weight badge (pinned to the bottom) sit at matching
       distances from the band's edges. */
    padding: 0.45rem 1rem;
    background-color: #1a2740;
    background-image: url('/static/images/card-bgs/band.png?v=1d257d0dfd');
    background-repeat: repeat;
    background-size: 32px 32px;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    overflow: hidden;
}
/* "Affixes" now lives inside .loot-card-affixes-col (see below), centered
   over just the affix grid's two columns instead of the full band width -
   this also frees the row it used to occupy above the whole band, letting
   the rail (and its pinned stance/weight badges) use the band's full height. */
.loot-card-affixes-label {
    flex-shrink: 0;
    width: 100%;
    text-align: center;
    font-size: 16px;
    color: var(--color-accentGold, #ffd966);
    font-style: italic;
    letter-spacing: 0.04em;
    line-height: 1.15;
}
.loot-card-affix-body {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.45rem;
}
.loot-card-affixes-col {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 0.15rem;
}
.loot-card-affix-rail {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    min-width: 3.5rem;
    padding: 0 0.1rem;
}
.loot-card-rail-stance,
.loot-card-rail-weight {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.12rem;
}
.loot-card-stance-icon,
.loot-card-weight-icon {
    width: 36px;
    height: 36px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.9));
}
.loot-card-stance-icon--empty {
    background: transparent;
}
.loot-card-rail-stance-label,
.loot-card-rail-weight-value {
    font-size: 12px;
    line-height: 1.1;
}
.loot-card-rail-stance-label {
    color: rgba(0, 204, 255, 0.9);
    font-style: italic;
}
.loot-card-rail-weight-value {
    color: #c8c8c8;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.loot-card-affix-vdiv {
    flex: 0 0 auto;
    /* Stretches with .loot-card-affix-body's new full-height align-items so
       the divider spans edge-to-edge, matching the rail's pinned stance/weight
       badges instead of floating short in the vertical middle. */
    align-self: stretch;
    height: auto;
    max-height: none;
    width: auto;
    object-fit: contain;
    object-position: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.loot-card-affix-vdiv--fallback {
    align-self: stretch;
    width: 2px;
    height: auto;
    max-height: none;
    border-radius: 1px;
    opacity: 0.85;
}
.loot-standard-card.loot-card-upgrade .loot-card-affix-band {
    --loot-affix-band-h: 9.75rem;
}
.loot-card-affix-band .loot-card-affixes {
    flex: 0 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
}
.loot-standard-card.loot-card-upgrade .loot-card-affix-band .loot-card-affixes {
    overflow-y: auto;
}
.loot-card-affix-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.2rem 0.35rem;
    width: 100%;
    height: auto;
    align-items: center;
    align-content: center;
    justify-items: stretch;
    font-size: 15px;
}
.loot-card-affix-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    padding: 0.05rem 0.1rem;
    text-align: left;
    line-height: 1.15;
}
.loot-card-affix-cell--upgrade {
    align-items: stretch;
    gap: 0.2rem;
}
.loot-card-affix-cell--empty {
    visibility: hidden;
    pointer-events: none;
}
.loot-card-affix-text {
    width: 100%;
    overflow-wrap: anywhere;
}
.loot-card-affix-pill {
    --affix-color: #9ca3af;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 0.3em;
    box-sizing: border-box;
    padding: 0.2rem 0.45rem 0.2rem 0.5rem;
    border-left: 3px solid var(--affix-color);
    border-radius: 0 4px 4px 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--affix-color) 22%, rgba(8, 10, 16, 0.85)) 0%, rgba(8, 10, 16, 0.72) 100%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--affix-color) 18%, transparent);
    text-shadow: 0 1px 1px #000;
    cursor: help;
    outline: none;
    transition: background-color 120ms ease, box-shadow 120ms ease;
}
.loot-card-affix-pill:hover,
.loot-card-affix-pill:focus-visible {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--affix-color) 55%, transparent), 0 0 8px color-mix(in srgb, var(--affix-color) 35%, transparent);
}
.loot-card-affix-value {
    color: #ffffff;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.loot-card-affix-name {
    color: var(--affix-color);
}
.loot-card-affix-pill.is-upgraded .loot-card-affix-name {
    text-shadow: 0 1px 1px #000, 0 0 6px color-mix(in srgb, var(--affix-color) 70%, transparent);
}
.loot-card-affix-mark {
    font-size: 0.8em;
    line-height: 1;
    cursor: help;
    outline: none;
}
/* Every Ledger bench row gets a flat edge in its affix color; .affix-upgraded
   below reuses the same geometry and lights it up. */
.ledger-bench-row {
    position: relative;
}
.ledger-bench-row::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 1px;
    pointer-events: none;
    background: color-mix(in srgb, var(--affix-color, #9ca3af) 75%, transparent);
}
/* Ledger-upgraded affix line: the colored left edge carries a rising light
   sweep and sheds sparks. Pseudo-elements only, so no reflow. Strength follows
   the Glow setting (html[data-weapon-glow]): full > soft > static. */
.affix-upgraded {
    --aug-spark: color-mix(in srgb, var(--affix-color) 45%, #fff);
    --aug-edge-left: 0px;
    --aug-edge-inset: 0px;
    --aug-edge-w: 3px;
    position: relative;
    isolation: isolate;
}
.loot-card-affix-pill.affix-upgraded {
    --aug-edge-left: -3px;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--affix-color) 30%, transparent), -3px 0 10px -4px var(--affix-color);
}
.ledger-bench-row.affix-upgraded {
    --aug-edge-left: -1px;
    --aug-edge-inset: 9px;
    border-color: color-mix(in srgb, var(--affix-color) 35%, var(--color-borderDark, #222222));
}
.affix-upgraded::before {
    content: '';
    position: absolute;
    left: var(--aug-edge-left);
    top: var(--aug-edge-inset);
    bottom: var(--aug-edge-inset);
    width: var(--aug-edge-w);
    border-radius: 1px;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 30%, #fff 50%, transparent 70%) 0 0 / 100% 250% no-repeat, var(--affix-color);
    box-shadow: 0 0 4px var(--affix-color), 0 0 10px color-mix(in srgb, var(--affix-color) 60%, transparent);
    animation: aug-edge-sweep 2.2s linear infinite, aug-edge-breathe 2.2s ease-in-out infinite;
}
.affix-upgraded::after {
    content: '';
    position: absolute;
    left: calc(var(--aug-edge-left) + var(--aug-edge-w));
    top: var(--aug-edge-inset);
    bottom: var(--aug-edge-inset);
    width: 18px;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle, var(--aug-spark) 0 1px, transparent 1.6px),
        radial-gradient(circle, var(--affix-color) 0 0.9px, transparent 1.5px),
        radial-gradient(circle, var(--aug-spark) 0 0.7px, transparent 1.3px);
    background-size: 11px 19px, 7px 13px, 15px 23px;
    background-position: 0 0, 4px 6px, 8px 3px;
    -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 0%, transparent 100%);
    animation: aug-motes 1.9s linear infinite;
}
.loot-card-affix-pill.affix-upgraded:hover,
.loot-card-affix-pill.affix-upgraded:focus-visible {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--affix-color) 55%, transparent), 0 0 8px color-mix(in srgb, var(--affix-color) 35%, transparent), -3px 0 10px -4px var(--affix-color);
}
html:not([data-weapon-glow="static"], [data-weapon-glow="off"]) .affix-upgraded.is-upgrade-fresh::before {
    animation: aug-ignite 0.9s ease-out, aug-edge-sweep 2.2s linear infinite;
}
@keyframes aug-edge-sweep {
    from { background-position: 0 0%, 0 0; }
    to { background-position: 0 100%, 0 0; }
}
@keyframes aug-edge-breathe {
    0%, 100% { box-shadow: 0 0 3px var(--affix-color), 0 0 7px color-mix(in srgb, var(--affix-color) 45%, transparent); }
    50% { box-shadow: 0 0 5px var(--affix-color), 0 0 14px color-mix(in srgb, var(--affix-color) 75%, transparent); }
}
@keyframes aug-motes {
    to { background-position: 0 -19px, 4px -7px, 8px -20px; }
}
@keyframes aug-ignite {
    0% { box-shadow: 0 0 6px 2px #fff, 0 0 22px 6px var(--affix-color); }
    100% { box-shadow: 0 0 4px var(--affix-color), 0 0 10px color-mix(in srgb, var(--affix-color) 60%, transparent); }
}
html[data-weapon-glow="soft"] .affix-upgraded::before {
    box-shadow: 0 0 3px var(--affix-color), 0 0 6px color-mix(in srgb, var(--affix-color) 40%, transparent);
    animation: aug-edge-sweep 3.6s ease-in-out infinite;
}
html[data-weapon-glow="soft"] .affix-upgraded::after {
    opacity: 0.45;
    background-image: radial-gradient(circle, var(--aug-spark) 0 0.9px, transparent 1.5px);
    background-size: 13px 21px;
    background-position: 2px 0;
    animation: aug-motes-soft 3.4s linear infinite;
}
@keyframes aug-motes-soft {
    to { background-position: 2px -21px; }
}
html[data-weapon-glow="static"] .affix-upgraded::before,
html[data-weapon-glow="off"] .affix-upgraded::before,
html.crazygames-short .affix-upgraded::before {
    background: linear-gradient(180deg, color-mix(in srgb, var(--affix-color) 55%, #fff), var(--affix-color) 60%);
    box-shadow: 0 0 3px var(--affix-color), 0 0 7px color-mix(in srgb, var(--affix-color) 50%, transparent);
    animation: none;
}
html[data-weapon-glow="static"] .affix-upgraded::after,
html[data-weapon-glow="off"] .affix-upgraded::after,
html.crazygames-short .affix-upgraded::after {
    display: none;
}
@media (prefers-reduced-motion: reduce) {
    .affix-upgraded::before,
    .affix-upgraded::after {
        animation: none !important;
    }
}
.loot-card-affix-mark--quality {
    display: inline-flex;
    align-items: center;
    position: relative;
    top: 2px;
    color: #e2e8f0;
}
.loot-card-affix-mark--quality img {
    width: 12px;
    height: 12px;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px rgba(226, 232, 240, 0.65));
}
/* Lower half (rules → footer): full-bleed and darker than the header area. */
.loot-standard-card .loot-card-lower {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
    min-height: 0;
    box-sizing: border-box;
    width: calc(100% + (2 * var(--loot-card-pad)));
    margin: 0 calc(-1 * var(--loot-card-pad)) calc(-1 * var(--loot-card-pad));
    padding: 0 var(--loot-card-pad) var(--loot-card-pad);
}
.loot-standard-card .loot-card-lower::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(18, 18, 18, 0.58);
    pointer-events: none;
}
.loot-card-affix-grid--effects {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}
.loot-card-affix-grid--effects-grid {
    grid-template-rows: none;
    grid-auto-rows: auto;
    align-content: center;
}
.loot-card-effect-line {
    grid-column: 1 / -1;
    width: 100%;
    color: #e8d5b5;
    text-align: center;
    line-height: 1.2;
    text-shadow: 0 1px 1px #000;
}
/* Quest card: objective, progress and reward share a taller effect band. */
.loot-standard-card.loot-card-quest { --loot-affix-band-h: 12.5rem; }
.loot-card-quest .loot-card-affix-grid--effects { gap: 0.45rem; }
.loot-card-quest-objective {
    font-size: 16px;
    color: #fff;
}
.loot-card-quest-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 0.5rem;
    box-sizing: border-box;
}
.loot-card-quest-bar {
    position: relative;
    flex: 1 1 auto;
    height: 10px;
    border: 2px solid #120c06;
    background: #0c0906;
    box-shadow: inset 0 0 0 1px rgba(184, 137, 58, 0.35);
    overflow: hidden;
}
.loot-card-quest-bar > span {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--quest-fill, 0%);
    background: linear-gradient(to bottom, #ffeeb8 0 2px, #ffd966 2px);
    transition: width 0.5s ease;
}
.loot-card-quest-progress.is-ready .loot-card-quest-bar > span {
    background: linear-gradient(to bottom, #b6ffcf 0 2px, #2ecc71 2px);
}
.loot-card-quest-count {
    flex-shrink: 0;
    min-width: 4.5em;
    text-align: right;
    font-size: 14px;
    color: #e8d5b5;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 1px #000;
}
.loot-card-quest-progress.is-ready .loot-card-quest-count { color: #2ecc71; }
.loot-card-quest-reward-label { margin-top: 0.15rem; }
.loot-card-quest-reward {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.loot-card-quest-reward img {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 4px var(--reward-color)) drop-shadow(0 1px 1px #000);
}
.loot-card-quest-reward-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    line-height: 1.15;
}
.loot-card-quest-reward-title {
    font-size: 17px;
    color: var(--reward-color);
    text-shadow: 0 1px 1px #000, 0 0 8px color-mix(in srgb, var(--reward-color) 50%, transparent);
}
.loot-card-quest-reward-detail {
    font-size: 13px;
    color: #cfc6b4;
    text-shadow: 0 1px 1px #000;
}
.loot-card-stamp--quest-grade { left: 50%; }
.loot-card-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: flex-end;
    gap: 0.15rem;
}
.weapon-glow-wrap {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
}
.weapon-glow-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
html[data-weapon-glow="static"] .weapon-glow-fx,
html[data-weapon-glow="off"] .weapon-glow-fx {
    display: none;
}
html[data-weapon-glow="static"] .weapon-glow-wrap > img,
html[data-weapon-glow="off"] .weapon-glow-wrap > img {
    filter: drop-shadow(0 0 3px var(--glow-main, #ffffff)) drop-shadow(0 0 10px color-mix(in srgb, var(--glow-main, #ffffff) 75%, transparent)) !important;
}
.weapon-glow-wrap > img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.clash-card-chrome,
.clash-mini-card {
    font-family: 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
    isolation: isolate;
    --rarity-color: #888;
}
.clash-card-chrome .font-heading,
.clash-card-chrome .font-main,
.clash-mini-card .font-heading,
.clash-mini-card .font-main {
    font-family: inherit;
}
.clash-card-chrome .loot-card-name,
.clash-card-chrome .clash-card-name {
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 0 8px var(--rarity-color), 0 0 16px color-mix(in srgb, var(--rarity-color) 55%, transparent);
}
.clash-card-stance {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #00ccff;
    font-style: italic;
    min-width: 0;
}
.clash-card-chrome .clash-card-stance {
    margin-top: 0.55rem;
}
.clash-card-motion[data-compact-rolls="1"] .clash-card-stance {
    margin-top: 0.2rem;
    margin-bottom: 0.15rem;
    gap: 4px;
    font-size: 10px;
}
.clash-card-stance-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    object-fit: contain;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.clash-card-motion[data-compact-rolls="1"] .clash-card-stance-icon,
.clash-mini-card .clash-card-stance-icon {
    width: 12px;
    height: 12px;
}
.clash-card-stance-label {
    min-width: 0;
}
.clash-mini-card .clash-card-stance-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clash-card-roll-well {
    border-color: color-mix(in srgb, var(--rarity-color) 42%, #333) !important;
}
.clash-card-rule {
    line-height: 0;
}
.clash-card-rule .loot-card-pixel-rule {
    margin: 0;
}
.clash-card-pixel-frame {
    z-index: 4;
}
.clash-mini-card .clash-card-pixel-frame {
    border-radius: 12px;
}
/* Reserved 2-line title band: Legendary-style top alignment for all rarities.
   Extra top/bottom padding (beyond the 2-line min-height) gives 2-line names
   a little clearance before their glyphs reach the plate/border edge. */
.loot-card-title-band {
    --loot-title-size: 26px;
    --loot-title-lh: 1.15;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: calc(2 * var(--loot-title-lh) * var(--loot-title-size));
    padding-top: 4px;
    padding-bottom: 5px;
    box-sizing: content-box;
    position: relative;
    z-index: 1;
}
/* Short, single-line names get vertically centered in the reserved 2-line
   band instead of sitting high against the top edge (see cards.js's
   title-band line-count MutationObserver). */
.loot-card-title-band.is-single-line {
    align-items: center;
}
/* Dark plaque behind the title so it stays legible on every rarity tile
   (Common's pale gray text and busy tile patterns were the weakest case).
   Percentage/px insets here are resolved against the band's padding box, so
   the plaque automatically grows to cover the padding added above. */
.loot-card-title-band::before {
    content: '';
    position: absolute;
    inset: -2px 4% -2px 4%;
    background: linear-gradient(180deg, rgba(6, 6, 8, 0.62), rgba(6, 6, 8, 0.5));
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: -1;
    pointer-events: none;
}
/* Rarity-tiered ornate pixel border for the title plate, sized to exactly
   match the ::before plaque above. Position/size are pinned via top+left+
   width+height (never right/bottom together with a percentage width) so
   this <img> stretches to the box instead of falling back to its canvas's
   intrinsic size, which is what previously made the border overshoot to the
   right and sit off-center. */
.loot-card-title-plate-frame {
    position: absolute;
    top: -2px;
    left: 4%;
    width: calc(100% - 8%);
    height: calc(100% + 4px);
    object-fit: fill;
    pointer-events: none;
    z-index: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.loot-card-title-band .loot-card-name {
    position: relative;
    z-index: 1;
    font-size: var(--loot-title-size);
    line-height: var(--loot-title-lh);
    max-width: 92%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.loot-card-title-band--clash {
    --loot-title-size: 16px;
    --loot-title-lh: 1.12;
    padding-top: 2px;
    padding-bottom: 3px;
    min-height: calc(2 * var(--loot-title-lh) * var(--loot-title-size));
}
.loot-card-title-band--clash-compact {
    --loot-title-size: 11px;
    --loot-title-lh: 1.1;
    padding-top: 2px;
    padding-bottom: 2px;
    min-height: calc(2 * var(--loot-title-lh) * var(--loot-title-size));
}
.loot-card-title-band--clash-compact::before {
    inset: -1px 3% -1px 3%;
    border-radius: 6px;
}
.loot-card-title-band--clash-compact .loot-card-title-plate-frame {
    top: -1px;
    left: 3%;
    width: calc(100% - 6%);
    height: calc(100% + 2px);
}
/* Flavor sits under the affix band with Force-gap spacing (see .loot-card-flavor). */
.player-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 105;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    box-shadow: none;
    opacity: 1;
    pointer-events: none;
    overflow: visible;
}
.player-footer-toggle {
    display: none;
    pointer-events: auto;
}
.player-footer-pixel-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.player-footer-wing,
.player-footer-podium {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    box-sizing: border-box;
}
.player-footer-identity {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.player-footer-entropy-dock {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: max-content;
    min-width: 0;
    box-sizing: border-box;
    pointer-events: auto;
}
.player-footer-entropy-label {
    color: var(--color-accentGold, #ffd966);
    font: 700 9px/1 HeadingFont, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.player-footer-id-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.player-footer-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.player-footer-name {
    max-width: 7.5rem;
}
.player-footer-entropy {
    display: none;
    flex: 0 0 auto;
}
.player-footer-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.player-footer-podium {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
.player-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
.forge-page-actions {
    width: 100%;
    min-width: 0;
}

/* Forge Bench resting on a pixel workbench (three-column desktop only). 3px art pixels. */
.forge-workbench {
    position: relative;
    margin: -6px -12px 0;
    pointer-events: none;
}
.forge-workbench-top {
    position: relative;
    height: 30px;
    box-sizing: border-box;
    border: 3px solid #1e140c;
    background:
        repeating-linear-gradient(90deg, transparent 0 69px, #6b4424 69px 72px) 0 3px / 100% 12px no-repeat,
        repeating-linear-gradient(90deg, transparent 0 18px, #875a31 18px 33px, transparent 33px 51px, #875a31 51px 57px, transparent 57px 72px) 0 9px / 100% 3px no-repeat,
        linear-gradient(to bottom, #c08a52 0 3px, #9a6a3c 3px 15px, #6b4424 15px 18px, #4d301a 18px 24px);
    box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35);
}
.forge-workbench-frame {
    position: relative;
    height: 96px;
    margin: 0 15px;
}
.forge-workbench-frame::after {
    content: '';
    position: absolute;
    left: -18px;
    right: -18px;
    bottom: -6px;
    height: 12px;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
}
.forge-workbench-leg {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 27px;
    background:
        linear-gradient(to bottom, #5b5f66 0 3px, #8c9199 3px 6px, #5b5f66 6px 9px) 0 12px / 100% 9px no-repeat,
        linear-gradient(to bottom, transparent 0 calc(100% - 9px), #3a2413 calc(100% - 9px) calc(100% - 3px), #1e140c calc(100% - 3px)),
        linear-gradient(to right, #1e140c 0 3px, #b07a45 3px 6px, #9a6a3c 6px 15px, #6b4424 15px 24px, #1e140c 24px 27px);
}
.forge-workbench-leg:first-child { left: 0; }
.forge-workbench-leg:nth-child(2) { right: 0; }
.forge-workbench-shelf {
    position: absolute;
    left: 27px;
    right: 27px;
    bottom: 21px;
    height: 15px;
    box-sizing: border-box;
    border-top: 3px solid #1e140c;
    border-bottom: 3px solid #1e140c;
    background: linear-gradient(to bottom, #9a6a3c 0 3px, #6b4424 3px 9px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 36px;
}
.forge-workbench-item {
    position: relative;
    top: -12px;
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.45));
}
/* Lying flat: its front corner rests over the shelf's edge. */
.forge-workbench-item--book { top: -9px; }

/* ---------- Wide desktop Forge scene (1280px+): laid out on the player footer's shape.
   The anvil stands on a raised dais that continues the footer podium (its ramps
   carry on from the footer's), the bench and hearth stand on the lower floor over
   the footer's lower tiers, and the floor runs on under the footer. Column widths
   come from footer-chrome.js (--footer-tier-left / --footer-mid). Art is 1 art px
   per image px, shown at 3x; hearth offsets below are art rows/cols x 3 and the
   dais geometry is baked from the footer size (see scripts/build_forge_scene_art.py). ---------- */
.forge-scene-ground,
.ledger-scene-ground,
.clash-scene-ground,
.quests-scene-ground,
.forge-hearth,
.forge-stash-det { display: none; }
@media (min-width: 1280px) {
    /* Brass Determination plate floating above the open stash (the stash covers the hearth). */
    body.stash-panel-open:not(.stash-panel-pinned) #tab-forge .forge-stash-det {
        --plaque-rim: #b8893a;
        --plaque-text: var(--color-accentGold, #ffd966);
        --plaque-fill: #ff9148;
        position: fixed;
        right: calc(var(--stash-float-right, 0px) + 6px);
        bottom: var(--stash-float-bottom, 50vh);
        z-index: 90;
        width: calc(var(--stash-float-width, 420px) - 12px);
        height: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        border: 3px solid #1e140c;
        background: linear-gradient(to bottom, #3a2f18 0 3px, #2a2410 3px calc(100% - 3px), #17140a calc(100% - 3px));
        box-shadow: inset 0 0 0 1px var(--plaque-rim), 0 3px 0 rgba(0, 0, 0, 0.45), 0 10px 24px rgba(0, 0, 0, 0.5);
        cursor: help;
        outline: none;
        animation: forge-stash-det-in 0.28s ease-out;
        transition: box-shadow 0.4s ease, filter 0.3s ease;
    }
    #tab-forge .forge-stash-det:focus-visible { --plaque-rim: #ffffff; }
    .forge-stash-det-label {
        flex-shrink: 0;
        font-size: 10px;
        line-height: 1;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--plaque-text) 70%, #8a7a5a);
    }
    .forge-stash-det-bar {
        position: relative;
        flex: 1 1 auto;
        height: 9px;
        border: 2px solid #120c06;
        background: #0c0906;
        box-shadow: inset 0 0 0 1px rgba(184, 137, 58, 0.35);
        overflow: hidden;
    }
    .forge-stash-det-fill {
        position: absolute;
        inset: 0;
        transform-origin: left center;
        transform: scaleX(var(--det-fill, 0));
        background: linear-gradient(to bottom, color-mix(in srgb, var(--plaque-fill) 60%, #fff) 0 2px, var(--plaque-fill) 2px);
        transition: transform 0.6s ease;
    }
    .forge-stash-det-value {
        flex-shrink: 0;
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0.04em;
        color: var(--plaque-text);
        font-variant-numeric: tabular-nums;
        text-shadow: 0 1px 0 #000;
    }
    #tab-forge .forge-stash-det.is-determined {
        --plaque-rim: #ff5fb0;
        --plaque-text: #ffb8ff;
        --plaque-fill: #ff007f;
        box-shadow: inset 0 0 0 1px var(--plaque-rim), 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 0, 127, 0.45), 0 10px 24px rgba(0, 0, 0, 0.5);
    }
    #tab-forge .forge-stash-det.is-stoked {
        filter: brightness(1.45);
        box-shadow: inset 0 0 0 1px #ffe2a0, 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 18px rgba(255, 145, 72, 0.7), 0 10px 24px rgba(0, 0, 0, 0.5);
    }
    @keyframes forge-stash-det-in {
        from { opacity: 0; transform: translateY(8px); }
    }
    /* Full content-hole width, reaching down behind the footer. Shared by the Ledger scene.
       Stations' floor glows and shadows hang below their in-flow spot (the scene bottom),
       so stop short of the viewport bottom or they would make the tab scroll. */
    :is(#forge-scene, #ledger-scene, #quests-scene) {
        --scene-station-lift: calc(var(--player-footer-wing-height, 96px) + 18px);
        max-width: none;
        min-height: calc(100dvh - 48px);
        padding-inline: 0;
        column-gap: 0;
        grid-template-columns: var(--footer-tier-left, minmax(0, 1fr)) var(--footer-mid, 420px) minmax(0, 1fr);
    }
    .forge-scene-ground,
    .ledger-scene-ground,
    .clash-scene-ground,
    .quests-scene-ground {
        display: block;
        position: absolute;
        z-index: 0;
        inset: 0;
        pointer-events: none;
    }
    /* Fills the content hole to the viewport top: the floor runs off to its vanishing point
       and fades out, so each tab reads as a long room ending in darkness. Pinned to the
       viewport so the dais meets the footer podium even while the tab scrolls. */
    .forge-scene-floor,
    .ledger-scene-floor,
    .home-scene-floor,
    .clash-scene-floor,
    .quests-scene-floor {
        position: fixed;
        top: 0;
        bottom: 0;
        left: var(--sidebar-width);
        right: 0;
        background: url(/static/images/ui/forge/scene-floor.png?v=1d257d0dfd) 50% 100% / 2160px auto no-repeat;
        image-rendering: pixelated;
        -webkit-mask-image: linear-gradient(to right, transparent calc(50% - 1080px), #000 calc(50% - 960px), #000 calc(50% + 960px), transparent calc(50% + 1080px)), linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.45) 38%, #000 72%);
        mask-image: linear-gradient(to right, transparent calc(50% - 1080px), #000 calc(50% - 960px), #000 calc(50% + 960px), transparent calc(50% + 1080px)), linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.45) 38%, #000 72%);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }
    .ledger-scene-floor { background-image: url(/static/images/ui/ledger/scene-floor.png?v=1d257d0dfd); }
    .home-scene-floor { background-image: url(/static/images/ui/home/scene-floor.png?v=1d257d0dfd); }
    .clash-scene-floor { background-image: url(/static/images/ui/clash/scene-floor.png?v=1d257d0dfd); }
    .quests-scene-floor { background-image: url(/static/images/ui/quests/scene-floor.png?v=1d257d0dfd); }
    /* Light the anvil throws on the dais, in the current tier colour. */
    .forge-scene-pool {
        position: absolute;
        left: 50%;
        top: 300px;
        width: 560px;
        height: 150px;
        margin-left: -280px;
        border-radius: 50%;
        background: radial-gradient(closest-side, color-mix(in srgb, var(--forge-tier-glow, #ff9148) 38%, transparent), transparent);
        mix-blend-mode: screen;
    }

    /* Bench centred over the footer's left lower tier. Pushed to the scene bottom, then
       sticky so its feet rest just above the footer wing whatever the height / scroll. */
    .forge-bench-col,
    .ledger-bench-col {
        position: sticky;
        bottom: var(--scene-station-lift);
        justify-self: center;
        align-self: end;
        width: min(360px, calc(100% - 28px));
        margin-bottom: calc(-1 * var(--desktop-content-clearance));
    }
    /* Bench stat pills wrap onto two rows when the side column is narrow. */
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-stat-row { flex-wrap: wrap; }
    :is(#forge-boosts-panel, #ledger-bench-panel, .bench-panel) .forge-config-pill { flex: 1 1 9.5rem; }

    /* Hearth centred over the footer's right lower tier. It stays put when the stash
       opens; the panel simply rises over it. */
    #forge-scene #forge-action-tray {
        --hearth-bottom: 0px;
        position: sticky;
        bottom: var(--scene-station-lift);
        display: block;
        justify-self: center;
        align-self: end;
        width: min(320px, calc(100% - 16px));
        height: 438px;
        min-height: 0;
        margin-bottom: calc(-1 * var(--desktop-content-clearance));
    }
    /* Boons panel stands just over the hearth's chimney. */
    #forge-scene #forge-boons-panel {
        position: absolute;
        z-index: 2;
        left: 0;
        right: 0;
        bottom: calc(100% + 14px);
        margin: 0;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    }
    #forge-scene .forge-hearth {
        --hearth-fire: var(--forge-tier-glow, #ff9148);
        display: block;
        position: absolute;
        left: 50%;
        bottom: var(--hearth-bottom);
        width: 276px;
        height: 438px;
        margin-left: -138px;
        background: url(/static/images/ui/forge/scene-hearth.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        image-rendering: pixelated;
        pointer-events: none;
    }
    #forge-scene .forge-hearth.is-determined { --hearth-fire: #ff007f; }
    /* Firelight spilling onto the floor in front of the plinth. */
    .forge-hearth::after {
        content: '';
        position: absolute;
        left: -12px;
        right: -12px;
        bottom: -42px;
        height: 90px;
        border-radius: 50%;
        background: radial-gradient(closest-side, color-mix(in srgb, var(--hearth-fire) calc(8% + 14% * var(--hearth-fuel, 1)), transparent), transparent);
        mix-blend-mode: screen;
    }
    .forge-hearth-fire {
        position: absolute;
        left: 36px;
        top: 150px;
        width: 204px;
        height: 156px;
        overflow: hidden;
        border-radius: 50% 50% 0 0 / 42px 42px 0 0;
        /* --hearth-fuel (0..1, set by forge-hearth.js) dims the glow while the fire burns low. */
        background:
            radial-gradient(ellipse 60% 40% at 50% 30%, color-mix(in srgb, var(--hearth-fire) calc(6% + 29% * var(--hearth-fuel, 1)), transparent), transparent 75%),
            radial-gradient(ellipse 90% 80% at 50% 110%, color-mix(in srgb, var(--hearth-fire) calc(25% + 30% * var(--hearth-fuel, 1)), transparent), transparent 75%);
        mix-blend-mode: screen;
        animation: forge-hearth-glow 2.4s ease-in-out infinite;
        transition: filter 0.6s ease;
    }
    .forge-hearth.is-stoked .forge-hearth-fire {
        filter: brightness(1.45) saturate(1.2);
        transition-duration: 0.12s;
    }
    /* Pixel fire simulated in forge-hearth.js: one canvas px per 3px art pixel. */
    .forge-hearth-flames {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        image-rendering: pixelated;
        filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hearth-fire) 60%, transparent));
    }
    /* Weapon rack bolted under the sill (workbench wood, 3px art pixels). */
    .forge-hearth-rack {
        position: absolute;
        left: 21px;
        right: 21px;
        top: 324px;
        height: 18px;
        box-sizing: border-box;
        border: 3px solid #1e140c;
        background: linear-gradient(to bottom, #c08a52 0 3px, #9a6a3c 3px 9px, #6b4424 9px);
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
    }
    .forge-hearth-rack::before,
    .forge-hearth-rack::after {
        content: '';
        position: absolute;
        top: 3px;
        width: 6px;
        height: 6px;
        background: #8c9199;
        box-shadow: inset -3px -3px 0 #5b5f66;
    }
    .forge-hearth-rack::before { left: 6px; }
    .forge-hearth-rack::after { right: 6px; }

    /* Riveted brass plate on the lintel above the fire mouth (3px art pixels). */
    .forge-hearth-plaque {
        --plaque-rim: #b8893a;
        --plaque-text: var(--color-accentGold, #ffd966);
        position: absolute;
        left: 50%;
        top: 111px;
        width: 132px;
        height: 36px;
        margin-left: -66px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border: 3px solid #1e140c;
        background: linear-gradient(to bottom, #3a2f18 0 3px, #2a2410 3px calc(100% - 3px), #17140a calc(100% - 3px));
        box-shadow: inset 0 0 0 1px var(--plaque-rim), 0 3px 0 rgba(0, 0, 0, 0.45);
        pointer-events: auto;
        cursor: help;
        outline: none;
        transition: box-shadow 0.6s ease;
    }
    .forge-hearth-plaque::before,
    .forge-hearth-plaque::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 3px;
        height: 3px;
        margin-top: -2px;
        background: var(--plaque-rim);
        box-shadow: 1px 1px 0 #1e140c;
    }
    .forge-hearth-plaque::before { left: 5px; }
    .forge-hearth-plaque::after { right: 5px; }
    .forge-hearth-plaque:focus-visible { --plaque-rim: #ffffff; }
    .forge-hearth-plaque-label {
        font-size: 9px;
        line-height: 1;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--plaque-text) 70%, #8a7a5a);
    }
    .forge-hearth-plaque-value {
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0.04em;
        color: var(--plaque-text);
        font-variant-numeric: tabular-nums;
        /* Brighter as the fire below builds. */
        text-shadow: 0 1px 0 #000, 0 0 calc(2px + 8px * var(--hearth-fuel, 0)) color-mix(in srgb, var(--hearth-fire) 70%, transparent);
    }
    .forge-hearth-plaque-total {
        font-size: 12px;
        opacity: 0.6;
    }
    .forge-hearth-plaque.is-determined {
        --plaque-rim: #ff5fb0;
        --plaque-text: #ffb8ff;
        box-shadow: inset 0 0 0 1px var(--plaque-rim), 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 0, 127, 0.45);
    }

    #forge-scene #forge-action-tray .forge-action-tray-inner {
        position: static;
        display: block;
    }
    /* The status sign hangs from the rack on short chains. */
    #forge-scene #forge-action-tray .forge-action-tray-status {
        position: absolute;
        z-index: 1;
        left: 50%;
        top: calc(100% - var(--hearth-bottom) - 438px + 351px);
        width: 222px;
        margin-left: -111px;
    }
    #forge-scene #forge-action-tray :is(#rolling-indicator, #save-feedback) {
        position: relative;
        overflow: visible;
    }
    #forge-scene #forge-action-tray :is(#rolling-indicator, #save-feedback)::before,
    #forge-scene #forge-action-tray :is(#rolling-indicator, #save-feedback)::after {
        content: '';
        position: absolute;
        top: -14px;
        width: 3px;
        height: 12px;
        background: repeating-linear-gradient(to bottom, #8c9199 0 3px, #3a3d42 3px 6px);
        pointer-events: none;
    }
    #forge-scene #forge-action-tray :is(#rolling-indicator, #save-feedback)::before { left: 22px; }
    #forge-scene #forge-action-tray :is(#rolling-indicator, #save-feedback)::after { right: 22px; }
    /* The status reads as a slate sign. */
    #forge-scene #forge-action-tray #rolling-indicator {
        background: linear-gradient(to bottom, #34373d 0 3px, #26292e 3px calc(100% - 3px), #1a1c20 calc(100% - 3px));
        border-width: 3px;
        border-radius: 3px;
        box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
    }
}
@keyframes forge-hearth-glow {
    0%, 100% { opacity: 0.85; }
    45% { opacity: 1; }
    70% { opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
    .forge-hearth-fire { animation: none; }
}

/* ---------- Wide desktop Ledger scene (1280px+): a counting house on the Forge scene's
   footer-shaped floor (grid, floor and bench column rules are shared above). The inspect
   card rests in the gutter of an open ledger on a clerk's desk standing on the dais; the
   Ledger Stats hang as a tally sheet on the record shelf (tabs.js moves them there).
   Art is 1 art px per image px shown at 3x; offsets below are art rows/cols x 3
   (see scripts/build_ledger_scene_art.py). ---------- */
.ledger-desk,
.ledger-records { display: none; }
@media (min-width: 1280px) {
    #ledger-scene {
        /* Desk feet on the dais, just above the footer podium. */
        --ledger-desk-lift: calc(var(--player-footer-height, 124px) + 2px);
        /* Desk below the card's bottom edge: 216px tall, card sits 39px down in the gutter. */
        --ledger-desk-rise: 177px;
    }
    #ledger-scene .ledger-card-col {
        position: sticky;
        top: auto;
        bottom: var(--ledger-desk-lift);
        align-self: end;
        gap: 0;
        margin-bottom: calc(-1 * var(--desktop-content-clearance));
    }
    /* The card shrinks on shorter screens so it still stands in the ledger. */
    #ledger-scene .inspect-card-stage .loot-standard-card-shell {
        --loot-card-scale: min(1, calc((100dvh - var(--ledger-desk-lift) - var(--ledger-desk-rise) - 16px) / 620px));
        width: calc(var(--loot-card-design-w) * var(--loot-card-scale));
        height: calc(var(--loot-card-design-h) * var(--loot-card-scale));
    }
    /* Empty ledger: no card frame, just a prompt over the open pages. */
    #ledger-scene .inspect-card-placeholder .loot-standard-card {
        background: none;
        border-width: 0;
        box-shadow: none;
        justify-content: flex-end;
    }
    #ledger-scene .inspect-placeholder-copy {
        margin: 0 0 22px;
        font-family: var(--font-card);
        font-size: 15px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-textLight, #ccc);
        text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 180, 90, 0.35);
        /* Colour, not opacity: the inspect reveal fades this out with GSAP. */
        animation: ledger-hint-breathe 2.6s ease-in-out infinite;
    }

    /* The Ledger Bench rests on a low bookshelf (the Forge's sits on a workbench). */
    .ledger-bench-shelf {
        position: relative;
        height: 126px;
        margin: -6px -12px 0;
        background: url(/static/images/ui/ledger/scene-bench.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        image-rendering: pixelated;
        pointer-events: none;
    }
    .ledger-bench-shelf::after {
        content: '';
        position: absolute;
        left: -6px;
        right: -6px;
        bottom: -6px;
        height: 12px;
        z-index: -1;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
    }

    .ledger-desk {
        display: block;
        position: relative;
        z-index: 0;
        align-self: center;
        flex: none;
        width: 450px;
        height: 216px;
        margin-top: -39px;
        background: url(/static/images/ui/ledger/scene-desk.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        image-rendering: pixelated;
        pointer-events: none;
    }
    /* Candlelight on the pages. */
    .ledger-desk::before {
        content: '';
        position: absolute;
        left: -40px;
        right: -40px;
        top: -70px;
        height: 230px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 176, 92, 0.22), transparent);
        mix-blend-mode: screen;
        animation: ledger-candle-glow 3.2s ease-in-out infinite;
    }
    /* Shadow on the rug under the desk. */
    .ledger-desk::after {
        content: '';
        position: absolute;
        left: 6px;
        right: 6px;
        bottom: -8px;
        height: 16px;
        z-index: -1;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
    }
    /* Candle flame canvas (ledger-book.js): 9x14 art px standing on the wick (art col 8, rows 3-16). */
    .ledger-desk-candle {
        position: absolute;
        left: 12px;
        top: 9px;
        width: 27px;
        height: 42px;
    }
    .ledger-desk-candle canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        image-rendering: pixelated;
        filter: drop-shadow(0 0 4px rgba(255, 145, 72, 0.6));
    }
    .ledger-desk-candle::after {
        content: '';
        position: absolute;
        left: 50%;
        top: 70%;
        width: 120px;
        height: 120px;
        margin: -60px 0 0 -60px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 170, 90, 0.28), transparent);
        mix-blend-mode: screen;
        animation: ledger-candle-glow 3.2s ease-in-out infinite;
    }
    /* While the item hovers over the book (inspect-scenes.js fades this in and sets
       --ledger-glow), the pages dim and the ink glows in the item's rarity colour. The glow
       filter sits on .ledger-desk-ink: on the masked layer itself it would be masked away. */
    .ledger-desk-lines {
        position: absolute;
        inset: 0;
        opacity: 0;
    }
    .ledger-desk-lines::before,
    .ledger-desk-ink::before {
        content: '';
        position: absolute;
        inset: 0;
    }
    .ledger-desk-lines::before {
        background: rgba(34, 14, 30, 0.42);
        -webkit-mask: url(/static/images/ui/ledger/scene-desk-faces.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        mask: url(/static/images/ui/ledger/scene-desk-faces.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
    }
    .ledger-desk-ink {
        position: absolute;
        inset: 0;
        filter: drop-shadow(0 0 2px var(--ledger-glow, #ffd966)) drop-shadow(0 0 5px color-mix(in srgb, var(--ledger-glow, #ffd966) 60%, transparent));
    }
    .ledger-desk-ink::before {
        background: color-mix(in srgb, var(--ledger-glow, #ffd966) 72%, #fff);
        -webkit-mask: url(/static/images/ui/ledger/scene-desk-lines.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        mask: url(/static/images/ui/ledger/scene-desk-lines.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
    }
    /* Turning leaves (ledger-book.js): 150x64 art px, row 32 is desk row 0. */
    .ledger-desk-leaves {
        position: absolute;
        left: 0;
        top: -96px;
        width: 100%;
        height: 192px;
        image-rendering: pixelated;
    }
    /* Magic holding the inspected item over the book (inspect-scenes.js), in its rarity colour. */
    .ledger-magic-ring,
    .ledger-magic-beam,
    .ledger-magic-mote {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 20003;
        pointer-events: none;
    }
    .ledger-magic-ring {
        width: 132px;
        height: 132px;
        margin: -66px 0 0 -66px;
    }
    .ledger-magic-ring::before,
    .ledger-magic-ring::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        transform: scaleY(0.26) rotate(0deg);
        animation: ledger-rune-spin 5s linear infinite;
    }
    .ledger-magic-ring::before {
        border: 4px dashed color-mix(in srgb, var(--magic) 80%, #fff);
        box-shadow: 0 0 12px var(--magic), inset 0 0 12px var(--magic);
    }
    .ledger-magic-ring::after {
        inset: 22px;
        border: 3px dotted color-mix(in srgb, var(--magic) 70%, #fff);
        animation-direction: reverse;
        animation-duration: 3.4s;
    }
    .ledger-magic-beam {
        width: 72px;
        margin-left: -36px;
        transform-origin: 50% 100%;
        background: linear-gradient(to top, color-mix(in srgb, var(--magic) 55%, transparent), transparent 92%);
        -webkit-mask: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
        mask: linear-gradient(to right, transparent, #000 30%, #000 70%, transparent);
        mix-blend-mode: screen;
    }
    .ledger-magic-mote {
        width: 6px;
        height: 6px;
        margin: -3px 0 0 -3px;
        background: color-mix(in srgb, var(--magic) 60%, #fff);
        box-shadow: 0 0 6px var(--magic);
    }

    /* Record shelf centred over the footer's right lower tier; the stash panel rises over it. */
    #ledger-scene .ledger-records {
        display: block;
        position: sticky;
        bottom: var(--scene-station-lift);
        justify-self: center;
        align-self: end;
        width: min(320px, calc(100% - 16px));
        height: 438px;
        margin-bottom: calc(-1 * var(--desktop-content-clearance));
    }
    .ledger-shelf {
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 276px;
        height: 438px;
        margin-left: -138px;
        background: url(/static/images/ui/ledger/scene-shelf.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        image-rendering: pixelated;
    }
    .ledger-shelf::after {
        content: '';
        position: absolute;
        left: -12px;
        right: -12px;
        bottom: -6px;
        height: 12px;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
    }
    /* Ledger Stats as a parchment tally sheet pinned over the cabinet doors. */
    .ledger-records-sheet {
        position: absolute;
        left: 50%;
        bottom: 18px;
        width: 240px;
        margin-left: -120px;
        box-sizing: border-box;
        padding: 12px 12px 8px;
        border: 3px solid #3b2616;
        background: linear-gradient(to bottom, #ead6ae, #d9bf8e);
        box-shadow: inset 0 0 0 1px rgba(255, 244, 220, 0.45), inset 0 -12px 18px rgba(120, 80, 40, 0.18), 0 3px 0 rgba(0, 0, 0, 0.45);
        color: #3b2616;
    }
    .ledger-records-sheet:empty { display: none; }
    .ledger-records-sheet::before {
        content: '';
        position: absolute;
        left: 50%;
        top: -6px;
        width: 6px;
        height: 6px;
        margin-left: -3px;
        background: #d6aa54;
        box-shadow: inset -3px -3px 0 #96703a, 0 2px 0 rgba(0, 0, 0, 0.5);
    }
    .ledger-records-sheet .ledger-bench-stats {
        border: 0;
        padding: 0;
    }
    .ledger-records-sheet :is(div, span) { color: inherit; }
    .ledger-records-sheet .font-card-display {
        margin-bottom: 4px;
        text-align: center;
        font-size: 15px;
        letter-spacing: 0.06em;
        color: #8d2c44;
    }
    .ledger-records-sheet .ledger-bench-stats > .text-\[13px\] {
        padding-bottom: 4px;
        border-bottom: 2px solid rgba(141, 44, 68, 0.55);
        font-size: 12px;
    }
    .ledger-records-sheet .grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        margin-top: 2px;
    }
    .ledger-records-sheet .panel-solid {
        gap: 6px;
        padding: 3px 0;
        background: none;
        border: 0;
        border-bottom: 1px dashed rgba(59, 38, 22, 0.35);
        border-radius: 0;
    }
    .ledger-records-sheet .panel-solid:last-child { border-bottom: 0; }
    .ledger-records-sheet .ledger-stat-glyph { color: #8d2c44; }
    .ledger-records-sheet .panel-solid img {
        width: 18px;
        height: 18px;
    }
}
@keyframes ledger-rune-spin {
    to { transform: scaleY(0.26) rotate(360deg); }
}
@keyframes ledger-hint-breathe {
    0%, 100% { color: #8f8a80; }
    50% { color: #efe6d4; }
}
@keyframes ledger-candle-glow {
    0%, 100% { opacity: 0.9; }
    40% { opacity: 1; }
    65% { opacity: 0.8; }
}
@media (prefers-reduced-motion: reduce) {
    .ledger-desk::before,
    .ledger-desk-candle::after,
    .ledger-magic-ring::before,
    .ledger-magic-ring::after,
    #ledger-scene .inspect-placeholder-copy { animation: none; }
}

/* ---------- Quests tab: below 1280px the pedestals are a button row over the card. ---------- */
.quests-pedestal { transition: border-color 0.2s ease, transform 0.15s ease; }
.quests-pedestal[aria-pressed="true"] { border-color: var(--color-accentGold, #ffd966); }
.quests-pedestal.is-ready .quests-pedestal-icon { animation: quest-tab-glow 1.6s ease-in-out infinite; }
@media (max-width: 767px) {
    /* The pedestal row above and the buttons below share the card's height budget. */
    #quests-scene .inspect-card-stage .loot-standard-card-shell {
        --loot-card-scale: min(
            0.72,
            calc((100vw - 32px) / 408px),
            calc((100dvh - var(--bottom-nav-total-height) - var(--player-footer-height) - 14rem) / 620px)
        );
    }
}

/* ---------- Wide desktop Quests scene (1280px+): a museum hall on the Forge scene's
   footer-shaped floor (grid, floor and station lift are shared above). The inspected quest
   card stands on a display plinth on the dais, its buttons on the plinth's front panel; the
   Loot and Clash quests hover over marble pedestals on the lower floor either side.
   Art is 1 art px per image px shown at 3x; offsets below are art rows/cols x 3
   (see scripts/build_quests_scene_art.py). ---------- */
@media (min-width: 1280px) {
    #quests-scene {
        /* Plinth foot on the dais, just above the footer podium. */
        --quests-plinth-lift: calc(var(--player-footer-height, 124px) + 2px);
        /* Plinth below the card's bottom edge: 150px tall, the card rests 15px down on it. */
        --quests-plinth-rise: 135px;
    }
    #quests-scene .quests-card-col {
        position: sticky;
        top: auto;
        bottom: var(--quests-plinth-lift);
        align-self: end;
        gap: 0;
        margin-bottom: calc(-1 * var(--desktop-content-clearance));
    }
    #quests-scene .inspect-card-stage .loot-standard-card-shell {
        --loot-card-scale: min(1, calc((100dvh - var(--quests-plinth-lift) - var(--quests-plinth-rise) - 16px) / 620px));
        width: calc(var(--loot-card-design-w) * var(--loot-card-scale));
        height: calc(var(--loot-card-design-h) * var(--loot-card-scale));
    }
    #quests-scene .inspect-card-placeholder .loot-standard-card {
        background: none;
        border-width: 0;
        box-shadow: none;
        justify-content: flex-end;
    }
    #quests-scene .inspect-placeholder-copy {
        margin: 0 0 22px;
        font-family: var(--font-card);
        font-size: 15px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-textLight, #ccc);
        text-shadow: 0 2px 0 #000;
        animation: ledger-hint-breathe 2.6s ease-in-out infinite;
    }
    .quests-plinth {
        position: relative;
        z-index: 0;
        align-self: center;
        flex: none;
        width: 450px;
        height: 150px;
        margin-top: -15px;
        background: url(/static/images/ui/quests/scene-plinth.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        image-rendering: pixelated;
    }
    /* Display light falling on the card from above the plinth. */
    .quests-plinth::before {
        content: '';
        position: absolute;
        left: -50px;
        right: -50px;
        top: -90px;
        height: 200px;
        border-radius: 50%;
        background: radial-gradient(closest-side, rgba(255, 226, 160, 0.16), transparent);
        mix-blend-mode: screen;
        pointer-events: none;
    }
    .quests-plinth::after {
        content: '';
        position: absolute;
        z-index: -1;
        left: -6px;
        right: -6px;
        bottom: -8px;
        height: 16px;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
    }
    /* Buttons on the recessed panel (art rows 15-41, cols 9-141). */
    #quests-scene .quests-actions {
        position: absolute;
        left: 33px;
        right: 33px;
        top: 48px;
        width: auto;
        height: 72px;
        max-width: none;
        margin: 0;
        align-items: center;
    }

    /* Pedestals centred over the footer's lower tiers: the 168x312 marble pedestal, with
       the quest letter hovering over its cushion and a brass plaque on its plinth. */
    #quests-scene .quests-pedestal {
        position: sticky;
        bottom: var(--scene-station-lift);
        justify-self: center;
        align-self: end;
        display: block;
        flex: none;
        width: 168px;
        height: 460px;
        margin-bottom: calc(-1 * var(--desktop-content-clearance));
        padding: 0;
        background: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        z-index: 2;
    }
    #quests-scene .quests-pedestal::before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 168px;
        height: 312px;
        background: url(/static/images/ui/quests/scene-pedestal.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        image-rendering: pixelated;
        filter: drop-shadow(0 6px 4px rgba(0, 0, 0, 0.55));
    }
    /* Spotlight on the selected pedestal. */
    #quests-scene .quests-pedestal::after {
        content: '';
        position: absolute;
        left: -56px;
        right: -56px;
        top: -40px;
        bottom: -10px;
        background: linear-gradient(to bottom, rgba(255, 226, 160, 0.02), rgba(255, 226, 160, 0.14) 70%, rgba(255, 226, 160, 0.2));
        clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
        mix-blend-mode: screen;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    #quests-scene .quests-pedestal[aria-pressed="true"]::after { opacity: 1; }
    #quests-scene .quests-pedestal-art {
        position: absolute;
        z-index: 1;
        left: 50%;
        bottom: 318px;
        width: 128px;
        height: 128px;
        margin-left: -64px;
        animation: quests-exhibit-float 3.4s ease-in-out infinite;
    }
    #quests-scene .quests-pedestal[data-quest-pedestal="1"] .quests-pedestal-art { animation-delay: -1.7s; }
    #quests-scene .quests-pedestal-icon {
        width: 128px;
        height: 128px;
        filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
        transition: translate 0.2s ease, filter 0.3s ease;
    }
    #quests-scene .quests-pedestal:hover .quests-pedestal-icon,
    #quests-scene .quests-pedestal:focus-visible .quests-pedestal-icon { translate: 0 -8px; }
    #quests-scene .quests-pedestal[aria-pressed="true"] .quests-pedestal-icon {
        filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(255, 226, 160, 0.55));
    }
    /* Brass plaque over the plinth's front panel (art rows 88-100, cols 5-51). */
    #quests-scene .quests-pedestal-plaque {
        position: absolute;
        z-index: 1;
        left: 12px;
        right: 12px;
        bottom: 9px;
        height: 42px;
        box-sizing: border-box;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 0 6px;
        border: 3px solid #1e140c;
        background: linear-gradient(to bottom, #3a2f18 0 3px, #2a2410 3px calc(100% - 3px), #17140a calc(100% - 3px));
        box-shadow: inset 0 0 0 1px #b8893a, 0 3px 0 rgba(0, 0, 0, 0.45);
        text-align: center;
    }
    #quests-scene .quests-pedestal[aria-pressed="true"] .quests-pedestal-plaque { box-shadow: inset 0 0 0 1px #ffd966, 0 3px 0 rgba(0, 0, 0, 0.45), 0 0 10px rgba(255, 217, 102, 0.35); }
    #quests-scene .quests-pedestal-kind {
        font-size: 10px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: color-mix(in srgb, var(--color-accentGold, #ffd966) 70%, #8a7a5a);
    }
    #quests-scene .quests-pedestal-status {
        max-width: 100%;
        font-size: 13px;
        color: var(--color-accentGold, #ffd966);
        text-shadow: 0 1px 0 #000;
    }
    #quests-scene .quests-pedestal.is-ready .quests-pedestal-status { color: #2ecc71; }

    /* Running boons hang at the top of their side of the hall. */
    #quests-scene .quests-boons {
        position: relative;
        z-index: 3;
        align-self: start;
        justify-self: center;
        width: min(300px, calc(100% - 28px));
        margin-top: 8px;
    }
}
@keyframes quests-exhibit-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.bench-boon.is-new { animation: quest-claim-glow 0.8s ease-in-out 3; }
@media (prefers-reduced-motion: reduce) {
    #quests-scene .quests-pedestal-art,
    .quests-pedestal.is-ready .quests-pedestal-icon,
    .bench-boon.is-new,
    #quests-scene .inspect-placeholder-copy { animation: none; }
}
/* "Quest Complete" / "New Quest" stamped across the inspected card (ui/quests.js animates it). */
.quest-card-stamp {
    position: absolute;
    z-index: 30;
    left: 50%;
    top: 38%;
    translate: -50% -50%;
    padding: 0.35em 0.9em 0.4em;
    border: 4px double currentColor;
    border-radius: 6px;
    background: rgba(12, 10, 8, 0.82);
    font-size: clamp(18px, calc(34px * var(--loot-card-scale, 1)), 34px);
    line-height: 1;
    letter-spacing: 0.06em;
    white-space: nowrap;
    text-transform: uppercase;
    text-shadow: 0 2px 0 #000, 0 0 14px currentColor;
    box-shadow: 0 0 22px color-mix(in srgb, currentColor 45%, transparent), 0 8px 24px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.quest-card-stamp.is-complete { color: #2ecc71; }
.quest-card-stamp.is-new { color: var(--color-accentGold, #ffd966); }

/* Toasts off a main nav link (Quests, Forge): right of the sidebar, or up from the bottom bar. */
.nav-toast {
    --nav-toast-color: #2ecc71;
    position: fixed;
    z-index: 130;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 260px;
    padding: 8px 14px 8px 8px;
    background: #18181c;
    border: 3px solid var(--nav-toast-color);
    border-radius: 8px;
    box-shadow: 0 0 14px color-mix(in srgb, var(--nav-toast-color) 45%, transparent), 0 10px 24px rgba(0, 0, 0, 0.6);
    text-align: left;
    cursor: var(--cursor-hand);
}
.nav-toast.is-bottom { bottom: calc(var(--bottom-nav-total-height) + 10px); }
.nav-toast-art {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.nav-toast-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.nav-toast-kicker {
    font: 700 10px/1 HeadingFont, sans-serif;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--nav-toast-color);
}
.nav-toast-title {
    overflow: hidden;
    font: 15px/1.1 'Alagard', 'Dico', MainFont, sans-serif;
    color: #fff;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-toast-arrow {
    position: absolute;
    width: 0;
    height: 0;
}
.nav-toast.is-side .nav-toast-arrow {
    right: 100%;
    top: 50%;
    margin-top: -7px;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 8px solid var(--nav-toast-color);
}
.nav-toast.is-bottom .nav-toast-arrow {
    top: 100%;
    left: calc(50% + var(--toast-arrow-x, 0px));
    margin-left: -7px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 8px solid var(--nav-toast-color);
}
/* Restless Hammer: Auto-Salvage tally. Entropy rim, latest weapon tagged with the salvage bowl,
   its rarity line like the keeper toast, and the running Entropy total on the right. */
.nav-toast.is-forge-salvage { max-width: min(330px, calc(100vw - 12px)); }
.nav-toast.is-forge-salvage .nav-toast-copy { flex: 1 1 auto; }
.nav-toast-art-wrap {
    position: relative;
    flex-shrink: 0;
    display: flex;
}
.nav-toast-art-tag {
    position: absolute;
    right: -5px;
    bottom: -4px;
    width: 16px;
    height: 16px;
    image-rendering: pixelated;
    filter: drop-shadow(0 1px 1px #000);
}
.nav-toast.is-forge-salvage .nav-toast-kicker { color: #d9a8ff; }
.nav-toast-count {
    display: inline-block;
    margin-left: 5px;
    color: #fff;
}
.nav-toast-count:empty { display: none; }
.nav-toast-gain {
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    align-self: stretch;
    margin-left: 2px;
    padding-left: 10px;
    border-left: 1px solid color-mix(in srgb, var(--nav-toast-color) 40%, transparent);
    font: 17px/1 var(--font-card-display, 'Alagard', MainFont, sans-serif);
    color: var(--color-entropyGlow, #ffb8ff);
    text-shadow: 0 1px 2px #000;
    white-space: nowrap;
}
.nav-toast-gain .ui-glyph { width: 16px; height: 16px; vertical-align: 0; }
/* The nav link a toast is attached to glows in the toast's colour. */
.nav-tab.is-toast-linked > .ui-icon {
    filter: drop-shadow(0 0 5px var(--nav-toast-color));
}
#app-sidebar .nav-tab.is-toast-linked:not(.active) {
    color: #ddd;
    border-color: color-mix(in srgb, var(--nav-toast-color) 55%, transparent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--nav-toast-color) 25%, transparent);
}
/* Restless Hammer: Auto-Forge stopped on a keeper. Gold kicker, rarity rim, slow pulse. */
.nav-toast.is-forge-keeper { animation: nav-toast-keeper-pulse 1.6s ease-in-out infinite; }
.nav-toast.is-forge-keeper .nav-toast-kicker { color: var(--color-accentGold, #ffd966); }
.nav-toast-title.is-item {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--toast-item-color, var(--nav-toast-color));
    text-shadow: 0 1px 2px #000;
}
.nav-toast-title.is-item img { top: 0 !important; }
@keyframes nav-toast-keeper-pulse {
    50% { box-shadow: 0 0 26px color-mix(in srgb, var(--nav-toast-color) 80%, transparent), 0 10px 24px rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-toast.is-forge-keeper { animation: none; }
}

/* Forge boons panel: Twinned Fate lights up while any Twinned piece is equipped. */
#forge-boons-panel .forge-twinned-pill.is-active {
    border-color: rgba(255, 125, 255, 0.6);
    box-shadow: 0 0 12px rgba(255, 0, 255, 0.3);
}

/* ---------- Wide desktop Home > Inventory scene (1280px+): a cottage on the Forge scene's
   footer-shaped floor. The inspect card keeps its column and rises out of an open treasure
   chest (inspect-scenes.js stages the reveals).
   Art is 1 art px per image px shown at 3x; offsets below are art rows/cols x 3
   (see scripts/build_home_scene_art.py). ---------- */
.home-scene-ground,
.home-chest { display: none; }
@media (min-width: 1280px) {
    /* Full content-hole width so the floor spans it; the grid keeps its own 1100px cap. */
    #home-page:has(#home-sub-inventory:not(.hidden)) {
        max-width: none;
        padding-inline: 0;
    }
    #home-sub-inventory { position: relative; }
    .home-scene-ground {
        display: block;
        position: absolute;
        z-index: 0;
        inset: 0;
        pointer-events: none;
    }
    #home-scene {
        /* Chest feet on the floor, just above the footer podium. */
        --home-chest-lift: calc(var(--player-footer-height, 124px) + 2px);
        /* Chest below the card's bottom edge: 306px tall, the card sits 180px down in it. */
        --home-chest-rise: 126px;
        z-index: 1;
        min-height: calc(100dvh - 128px - var(--desktop-content-clearance));
    }
    #home-scene .home-card-col {
        position: sticky;
        top: auto;
        bottom: var(--home-chest-lift);
        align-self: end;
        gap: 0;
        margin-bottom: calc(-1 * var(--desktop-content-clearance));
    }
    /* The card shrinks on shorter screens so it still stands in the chest below the sub-nav. */
    #home-scene .inspect-card-stage .loot-standard-card-shell {
        --loot-card-scale: min(1, calc((100dvh - var(--home-chest-lift) - var(--home-chest-rise) - 112px) / 620px));
        width: calc(var(--loot-card-design-w) * var(--loot-card-scale));
        height: calc(var(--loot-card-design-h) * var(--loot-card-scale));
    }
    /* Nothing inspected: no card frame, just a prompt over the chest. */
    #home-scene .inspect-card-placeholder .loot-standard-card {
        background: none;
        border-width: 0;
        box-shadow: none;
        justify-content: flex-end;
    }
    #home-scene .inspect-placeholder-copy {
        margin: 0 0 108px;
        font-family: var(--font-card);
        font-size: 15px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-textLight, #ccc);
        text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 200, 110, 0.35);
        animation: ledger-hint-breathe 2.6s ease-in-out infinite;
    }

    .home-chest {
        --chest-light: #ffce6e;
        display: block;
        position: relative;
        z-index: 0;
        align-self: center;
        flex: none;
        width: 444px;
        height: 306px;
        margin-top: -180px;
        pointer-events: none;
    }
    /* Last frame (open) of both four-frame sheets. Loot stands between them. */
    .home-chest-back,
    .home-chest-sprite {
        position: absolute;
        inset: 0;
        background: url(/static/images/ui/home/scene-chest.png?v=1d257d0dfd) 100% 0 / 400% 100% no-repeat;
        image-rendering: pixelated;
    }
    .home-chest-back { background-image: url(/static/images/ui/home/scene-chest-back.png?v=1d257d0dfd); }
    /* Player's best weapons, standing in the chest with their tops over the rim (192px down). */
    .home-chest-loot {
        position: absolute;
        inset: 0;
    }
    .home-chest-loot img {
        position: absolute;
        top: calc(192px - var(--peek));
        width: 96px;
        height: 96px;
        image-rendering: pixelated;
        filter: brightness(0.82) drop-shadow(0 0 5px color-mix(in srgb, var(--loot-glow) 70%, transparent));
        rotate: var(--tilt, 0deg);
        transform-origin: 50% 100%;
        transition:
            translate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            rotate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
            filter 0.3s ease;
    }
    .home-chest-loot img.is-flipped { scale: -1 1; }
    /* The inspected weapon rises ahead of the rest (LOOT_RISE_MS), then lifts out (inspect-scenes.js). */
    .home-chest-loot img.is-chosen {
        translate: 0 -24px;
        filter: brightness(1.15) drop-shadow(0 0 8px var(--loot-glow));
    }
    .home-chest-loot img.is-lifted { visibility: hidden; }
    /* Warm light from inside, behind the card. */
    .home-chest-glow {
        position: absolute;
        left: -60px;
        right: -60px;
        top: -150px;
        height: 330px;
        border-radius: 50%;
        background: radial-gradient(closest-side, color-mix(in srgb, var(--chest-light) 42%, transparent), transparent);
        mix-blend-mode: screen;
        transition: filter 0.5s ease;
        animation: home-chest-shimmer 3.2s ease-in-out infinite;
    }
    .home-chest.is-bursting .home-chest-glow {
        filter: brightness(1.9) saturate(1.2);
        transition-duration: 0.1s;
    }
    /* Braided rug the chest stands on, with the chest's shadow. */
    .home-chest-rug {
        position: absolute;
        z-index: -1;
        left: 50%;
        bottom: -42px;
        width: 600px;
        height: 90px;
        margin-left: -300px;
        background: url(/static/images/ui/home/scene-rug.png?v=1d257d0dfd) 0 0 / 100% 100% no-repeat;
        image-rendering: pixelated;
    }
    .home-chest-rug::after {
        content: '';
        position: absolute;
        left: 80px;
        right: 80px;
        top: 24px;
        height: 34px;
        background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 70%);
    }
    /* Barrel of weapons to the right; crate and shield to the left (mirrored so the shield faces out). */
    .home-chest-barrel,
    .home-chest-crate {
        position: absolute;
        bottom: 3px;
        background: 0 0 / 100% 100% no-repeat;
        image-rendering: pixelated;
    }
    .home-chest-barrel {
        left: calc(100% - 30px);
        width: 120px;
        height: 198px;
        background-image: url(/static/images/ui/home/scene-barrel.png?v=1d257d0dfd);
    }
    .home-chest-crate {
        right: calc(100% - 60px);
        width: 168px;
        height: 138px;
        background-image: url(/static/images/ui/home/scene-crate.png?v=1d257d0dfd);
        transform: scaleX(-1);
    }
}
@media (min-width: 1280px) and (max-width: 1439px) {
    .home-chest-crate { display: none; }
}
@keyframes home-chest-shimmer {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    #home-scene .inspect-placeholder-copy,
    .home-chest-glow { animation: none !important; }
    .home-chest-loot img { transition: none !important; }
}

/* Save row over the revealed card: rises in whenever it is shown. */
.forge-equip-overlay:not(.hidden) {
    animation: forge-equip-rise 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes forge-equip-rise {
    from { opacity: 0; transform: translateY(14px) scale(0.94); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .forge-equip-overlay:not(.hidden) { animation-duration: 0.01s; }
}
/* Mobile: the bench sits right under the card, so make room for the part of the row below the card. */
@media (max-width: 767px) {
    .forge-stage { transition: margin-bottom 0.3s ease; }
    .forge-stage:has(> .forge-equip-overlay:not(.hidden)) { margin-bottom: 34px; }
}

/* ---------- Forge anvil stage: skeleton card + tiered pixel anvil ---------- */
@property --anvil-scale {
    syntax: '<number>';
    inherits: true;
    initial-value: 2;
}
.forge-stage {
    --anvil-scale: 2;
    --forge-tier-glow: #ff9148;
    position: relative;
    display: grid;
    width: 100%;
    justify-items: center;
}
@media (max-width: 767px) {
    /* Shrinks with the forge card (see its mobile --loot-card-scale) as the footer and stash open. */
    .forge-stage {
        --anvil-scale: max(1.2, calc(2 / 0.72 * min(
            0.72,
            calc((100vw - 32px) / 408px),
            calc((100dvh - var(--bottom-nav-total-height) - var(--player-footer-height) - 9rem) / 620px)
        )));
        transition: --anvil-scale 0.3s ease;
    }
}
.forge-stage > #forge-card-container,
.forge-stage > .forge-anvil-rig,
.forge-stage > .forge-anvil-shock,
.forge-stage > .forge-anvil-tierup {
    grid-area: 1 / 1;
}
.forge-stage > #forge-card-container { z-index: 1; }
.forge-stage.is-card-up > #forge-card-container { z-index: 3; }
.forge-stage.is-card-up #forge-card-container .loot-standard-card-shell:not(.forge-skeleton-shell) {
    cursor: var(--cursor-hand);
}
@media (min-width: 768px) {
    .forge-stage { --anvil-scale: 3; }
}

/* The empty slot only holds the card's footprint; nothing of it is drawn around the anvil. */
.forge-skeleton-shell { visibility: hidden; }

.forge-anvil-rig {
    position: relative;
    z-index: 2;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: -4%;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.35s ease, filter 0.3s ease;
}
.forge-anvil {
    position: relative;
    width: calc(96px * var(--anvil-scale));
    height: calc(72px * var(--anvil-scale));
    padding: 0;
    border: 0;
    background: none;
    pointer-events: auto;
    cursor: var(--cursor-hand);
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
/* Strike / hammer hit area reaches past the sprite, most of all above it where the art pops. */
.forge-anvil::before {
    content: '';
    position: absolute;
    inset: calc(-14px * var(--anvil-scale)) calc(-18px * var(--anvil-scale)) calc(-6px * var(--anvil-scale));
}
.forge-stage.is-card-up .forge-anvil { pointer-events: none; }

/* Card emerge: the weapon art sits on the anvil (rig held visible), flies to its
   slot, then the card opens out of it. No clicks until it finishes. */
.forge-stage.is-emerge-hold .forge-anvil-rig {
    opacity: 1;
    transform: none;
    filter: none;
}
.forge-stage.is-emerging #forge-card-container,
.forge-stage.is-emerging #forge-card-container * {
    pointer-events: none !important;
}
.forge-stage.is-emerging.is-card-up #forge-card-container .loot-standard-card-shell:not(.forge-skeleton-shell) {
    cursor: inherit;
}
/* No transitions while emerging: `transition-all` would ease visibility, painting the
   whole card for 300ms before it hides, and would lag the GSAP-driven art. */
.forge-emerge-card .loot-standard-card,
.forge-emerge-card .loot-standard-card * { transition: none !important; }
.forge-emerge-card .loot-standard-card { visibility: hidden; }
.forge-emerge-card .loot-card-hero-wrap { visibility: visible; }
.forge-emerge-card.is-expanding .loot-standard-card { visibility: visible; }
.forge-emerge-card:not(.is-expanding) .reveal-item { animation-play-state: paused; }
.forge-emerge-flare {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
}

/* Twinned Fate on the anvil: the losing art charges inside the hero, a beam rises
   behind it and a ring bursts as the winner takes its place. */
.forge-twin-ghost {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.forge-twin-beam {
    position: absolute;
    left: 50%;
    bottom: 30%;
    z-index: -1;
    width: 70%;
    height: 240%;
    margin-left: -35%;
    background: linear-gradient(to top, var(--twin-color) 0%, color-mix(in srgb, var(--twin-color) 45%, transparent) 45%, transparent 100%);
    filter: blur(6px);
    mix-blend-mode: screen;
    pointer-events: none;
}
.forge-twin-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    margin: -50% 0 0 -50%;
    border-radius: 50%;
    border: 4px solid var(--twin-color);
    box-shadow: 0 0 18px var(--twin-color), inset 0 0 12px var(--twin-color);
    pointer-events: none;
}

/* Rarity / letter-tier rays behind the art on the anvil; spin runs in CSS so the reveal timeline stays finite.
   Centred with margins: GSAP folds a CSS `translate` into its own transform when it scales these. */
.forge-reveal-rays {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: var(--reveal-size, 150%);
    aspect-ratio: 1;
    margin: calc(var(--reveal-size, 150%) / -2) 0 0 calc(var(--reveal-size, 150%) / -2);
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--reveal-color) 70%, transparent) 0deg 7deg, transparent 7deg 30deg);
    mask-image: radial-gradient(circle, #000 18%, transparent 68%);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: forge-reveal-spin 6s linear infinite;
}
@keyframes forge-reveal-spin {
    to { rotate: 360deg; }
}

/* Forge Dust amount: a Determination aura behind the art, stronger for bigger grants. */
.forge-dust-aura {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: -1;
    width: var(--dust-aura-size, 120%);
    aspect-ratio: 1;
    margin: 0 0 calc(var(--dust-aura-size, 120%) * -0.12) calc(var(--dust-aura-size, 120%) / -2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 102, 204, var(--dust-aura-alpha, 0.35)) 0%, rgba(199, 125, 255, calc(var(--dust-aura-alpha, 0.35) * 0.6)) 38%, transparent 68%);
    pointer-events: none;
}
.forge-dust-aura.is-swirl::after {
    content: '';
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 140, 220, 0.75) 40deg, transparent 90deg, transparent 180deg, rgba(199, 125, 255, 0.7) 220deg, transparent 270deg);
    mask-image: radial-gradient(circle, transparent 40%, #000 52%, transparent 70%);
    animation: forge-reveal-spin 1.6s linear infinite;
}

/* Caption / toast pinned above the anvil face (Twinned upgrade, Forge Dust). */
.forge-anvil-toast {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 5px 14px 6px;
    border-radius: 10px;
    border: 1px solid rgba(199, 125, 255, 0.55);
    background: rgba(20, 16, 28, 0.9);
    box-shadow: 0 0 14px rgba(199, 125, 255, 0.4), 0 6px 16px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    pointer-events: none;
}
.forge-anvil-toast-title {
    font-size: 17px;
    letter-spacing: 0.06em;
    color: #ffb8ff;
    text-shadow: 0 0 10px rgba(255, 0, 127, 0.55), 0 2px 0 rgba(0, 0, 0, 0.8);
}
.forge-anvil-toast-sub {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    letter-spacing: 0.04em;
    color: var(--color-textLight, #ccc);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}
.forge-anvil-toast-anchor {
    position: absolute;
    z-index: 6;
    translate: -50% -100%;
    pointer-events: none;
}
.forge-twin-caption { border-color: rgba(255, 0, 255, 0.55); box-shadow: 0 0 16px rgba(255, 0, 255, 0.45), 0 6px 16px rgba(0, 0, 0, 0.55); }
.forge-twin-caption .forge-anvil-toast-title { color: #ff9cff; }
.forge-twin-arrow { color: var(--color-accentGold, #ffd966); }
.forge-anvil-toast.is-error .forge-anvil-toast-title { color: var(--color-textLight, #ccc); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.8); }
@media (min-width: 768px) {
    .forge-anvil-toast-title { font-size: 20px; }
    .forge-anvil-toast-sub { font-size: 14px; }
}

/* Forge Dust: art on the anvil face with its Determination toast; no card. */
.forge-dust-reveal {
    position: absolute;
    z-index: 5;
    translate: -50% -100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    pointer-events: none;
}
.forge-dust-reveal-img {
    display: block;
    image-rendering: pixelated;
}
/* Forge Dust thrown from the anvil into the hearth (sparks canvas stays above it). */
.forge-dust-fly {
    position: fixed;
    z-index: 10150;
    pointer-events: none;
    image-rendering: pixelated;
    will-change: transform;
}
.forge-stage.is-dust-reveal .forge-anvil,
.forge-stage.is-salvage-reveal .forge-anvil { pointer-events: none; }
/* Auto-Salvage: the toast takes the item's rarity colour. */
.forge-salvage-toast {
    border-color: color-mix(in srgb, var(--toast-color) 60%, transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--toast-color) 40%, transparent), 0 6px 16px rgba(0, 0, 0, 0.55);
}
.forge-salvage-toast .forge-anvil-toast-title {
    color: var(--toast-color);
    text-shadow: 0 0 10px color-mix(in srgb, var(--toast-color) 55%, transparent), 0 2px 0 rgba(0, 0, 0, 0.8);
}
.forge-anvil:focus-visible .forge-anvil-floor::after {
    box-shadow: 0 0 0 3px rgba(255, 217, 102, 0.8);
}
.forge-anvil > span {
    position: absolute;
    display: block;
    pointer-events: none;
}
.forge-anvil-body {
    inset: 0;
    transform-origin: 50% 80%;
}
.forge-anvil-float {
    position: absolute;
    inset: 0;
}
.forge-anvil-float canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
}
.forge-anvil-sprite {
    filter: drop-shadow(0 calc(2px * var(--anvil-scale)) 0 rgba(0, 0, 0, 0.45));
    transition: filter 0.2s ease;
}
.forge-anvil:hover .forge-anvil-sprite,
.forge-anvil:focus-visible .forge-anvil-sprite {
    filter: drop-shadow(0 calc(2px * var(--anvil-scale)) 0 rgba(0, 0, 0, 0.45)) brightness(1.14);
}
.forge-anvil-emissive {
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 5px var(--forge-tier-glow)) drop-shadow(0 0 12px var(--forge-tier-glow));
    animation: forge-emissive-pulse 2.4s ease-in-out infinite;
}
.forge-anvil-flash { opacity: 0; }

/* Floor: flattened circle so the rune rings can spin in perspective. */
.forge-anvil-floor {
    left: 4%;
    right: 4%;
    bottom: -4%;
    aspect-ratio: 1;
    transform: scaleY(0.26);
    transform-origin: 50% 100%;
}
.forge-anvil-floor::before,
.forge-anvil-floor::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
}
.forge-anvil-floor::after {
    inset: 18%;
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.25) 70%, transparent);
}
.forge-anvil-aura {
    inset: -8% -4% 6%;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(closest-side, var(--forge-tier-glow), transparent 72%);
    filter: blur(6px);
    transition: opacity 0.4s ease;
}
.forge-anvil-orbit {
    inset: 34% -6% 4%;
    transform: scaleY(0.32);
    opacity: 0;
    transition: opacity 0.4s ease;
}
.forge-anvil-orbit i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    animation: forge-orbit-spin 7s linear infinite;
}
.forge-anvil-orbit i::before {
    content: '';
    position: absolute;
    width: calc(3px * var(--anvil-scale));
    height: calc(3px * var(--anvil-scale));
    margin: calc(-1.5px * var(--anvil-scale));
    transform: translateX(calc(46px * var(--anvil-scale))) rotate(0deg) scaleY(3.125);
    background: var(--orbit-color, #81e1d6);
    box-shadow: 0 0 8px var(--orbit-color, #81e1d6);
    animation: forge-orbit-counter 7s linear infinite;
}
.forge-anvil-orbit i:nth-child(2) { animation-delay: -1.75s; --orbit-color: var(--orbit-color-2, #b227a7); }
.forge-anvil-orbit i:nth-child(3) { animation-delay: -3.5s; }
.forge-anvil-orbit i:nth-child(4) { animation-delay: -5.25s; --orbit-color: var(--orbit-color-2, #b227a7); }
.forge-anvil-orbit i:nth-child(2)::before { animation-delay: -1.75s; }
.forge-anvil-orbit i:nth-child(3)::before { animation-delay: -3.5s; }
.forge-anvil-orbit i:nth-child(4)::before { animation-delay: -5.25s; }
.forge-anvil-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
    pointer-events: none;
}
.forge-anvil-hint-cta {
    color: var(--color-textLight, #ccc);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: forge-hint-breathe 2.6s ease-in-out infinite;
}
.forge-anvil-hint-cta::before { content: 'Strike the anvil'; }
.forge-stage.is-auto-forging .forge-anvil-hint-cta::before { content: 'Auto Forging'; }
.forge-stage.is-forging .forge-anvil-hint-cta::before { content: 'Forging...'; }
.forge-stage.is-emerging .forge-anvil-hint-cta::before { content: 'Forged!'; }
.forge-stage.is-twin-upgrading .forge-anvil-hint-cta::before { content: 'Twinned!'; }
.forge-stage.is-dust-reveal .forge-anvil-hint-cta::before { content: 'Forge Dust!'; }
.forge-stage.is-salvage-reveal .forge-anvil-hint-cta::before { content: 'Auto-Salvaging'; }
.forge-anvil-hint-tier {
    font-size: 11px;
    color: var(--forge-tier-glow);
    opacity: 0.85;
}
@media (min-width: 768px) {
    .forge-anvil-hint-cta { font-size: 15px; }
    .forge-anvil-hint-tier { font-size: 12px; }
}

.forge-anvil-shock {
    position: relative;
    z-index: 4;
    align-self: center;
    width: calc(80px * var(--anvil-scale));
    height: calc(80px * var(--anvil-scale));
    border-radius: 50%;
    border: calc(2px * var(--anvil-scale)) solid var(--forge-tier-glow);
    box-shadow: 0 0 24px var(--forge-tier-glow), inset 0 0 18px var(--forge-tier-glow);
    opacity: 0;
    pointer-events: none;
}
.forge-anvil-tierup {
    position: relative;
    z-index: 5;
    align-self: start;
    margin-top: 16%;
    font-size: 24px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-accentGold, #ffd966);
    text-shadow: 0 0 12px var(--forge-tier-glow), 0 2px 0 rgba(0, 0, 0, 0.8);
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}
.forge-anvil-tierup[data-direction="down"] { color: var(--color-textLight, #ccc); }
@media (min-width: 768px) {
    .forge-anvil-tierup { font-size: 30px; }
}

/* Strike + forging heat */
.forge-stage.is-striking .forge-anvil-aura {
    animation: forge-aura-strike 0.42s ease-out;
}
.forge-stage.is-forging .forge-anvil-aura { opacity: 0.75; }
.forge-stage.is-forging .forge-anvil-emissive { animation-duration: 0.55s; }
.forge-stage.is-forging .forge-anvil-sprite {
    filter: drop-shadow(0 calc(2px * var(--anvil-scale)) 0 rgba(0, 0, 0, 0.45)) brightness(1.2) saturate(1.2);
}

/* Tier ornament. Each tier keeps the previous tier's layers and pushes them further. */
.forge-stage[data-forge-tier="1"] .forge-anvil-floor::before {
    background: radial-gradient(closest-side, rgba(255, 145, 72, 0.08), transparent);
}
.forge-stage[data-forge-tier="2"] .forge-anvil-aura { opacity: 0.2; animation: forge-ember-flicker 3.2s ease-in-out infinite; }
.forge-stage[data-forge-tier="2"] .forge-anvil-floor::before {
    background: radial-gradient(closest-side, rgba(255, 145, 72, 0.35), rgba(232, 104, 56, 0.12) 60%, transparent);
}
.forge-stage[data-forge-tier="3"] .forge-anvil-aura { opacity: 0.28; animation: forge-ember-flicker 3s ease-in-out infinite; }
.forge-stage[data-forge-tier="3"] .forge-anvil-floor::before {
    background: radial-gradient(closest-side, transparent 58%, rgba(255, 217, 102, 0.5) 62%, transparent 68%),
        radial-gradient(closest-side, rgba(255, 217, 102, 0.3), transparent);
}
.forge-stage[data-forge-tier="3"] .forge-anvil-sprite {
    filter: drop-shadow(0 calc(2px * var(--anvil-scale)) 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 8px rgba(255, 217, 102, 0.35));
}
.forge-stage[data-forge-tier="4"] {
    --orbit-color: #81e1d6;
    --orbit-color-2: #b227a7;
}
.forge-stage[data-forge-tier="4"] .forge-anvil-aura {
    opacity: 0.34;
    background: radial-gradient(closest-side, rgba(129, 225, 214, 0.9), rgba(132, 75, 204, 0.5) 45%, transparent 72%);
    animation: forge-arcane-pulse 3.4s ease-in-out infinite;
}
.forge-stage[data-forge-tier="4"] .forge-anvil-floor::before {
    border: calc(1.5px * var(--anvil-scale)) dashed rgba(178, 39, 167, 0.8);
    box-shadow: 0 0 18px rgba(132, 75, 204, 0.55), inset 0 0 22px rgba(129, 225, 214, 0.35);
    animation: forge-rune-spin 16s linear infinite;
}
.forge-stage[data-forge-tier="4"] .forge-anvil-orbit { opacity: 1; }
.forge-stage[data-forge-tier="4"] .forge-anvil-float { animation: forge-anvil-hover 4.2s ease-in-out infinite; --hover-lift: -3px; }
.forge-stage[data-forge-tier="5"] {
    --orbit-color: #f3bc3c;
    --orbit-color-2: #e51d3a;
}
.forge-stage[data-forge-tier="5"] .forge-anvil-aura {
    opacity: 0.42;
    background: radial-gradient(closest-side, rgba(255, 145, 72, 0.95), rgba(229, 29, 58, 0.55) 45%, transparent 72%);
    animation: forge-fire-flicker 0.9s steps(3) infinite;
}
.forge-stage[data-forge-tier="5"] .forge-anvil-floor::before {
    border: calc(2px * var(--anvil-scale)) dotted rgba(243, 188, 60, 0.85);
    background: radial-gradient(closest-side, rgba(255, 106, 42, 0.55), rgba(171, 20, 71, 0.2) 60%, transparent);
    box-shadow: 0 0 26px rgba(255, 106, 42, 0.6);
    animation: forge-rune-spin 10s linear infinite;
}
.forge-stage[data-forge-tier="5"] .forge-anvil-orbit { opacity: 1; }
.forge-stage[data-forge-tier="5"] .forge-anvil-orbit i,
.forge-stage[data-forge-tier="5"] .forge-anvil-orbit i::before { animation-duration: 4.5s; }
.forge-stage[data-forge-tier="5"] .forge-anvil-float { animation: forge-anvil-hover 3.2s ease-in-out infinite; --hover-lift: -4px; }
.forge-stage[data-forge-tier="5"] .forge-anvil-sprite {
    filter: drop-shadow(0 calc(2px * var(--anvil-scale)) 0 rgba(0, 0, 0, 0.45)) drop-shadow(0 0 10px rgba(229, 29, 58, 0.45));
}
.forge-stage[data-forge-tier="6"] {
    --orbit-color: #e6fdd1;
    --orbit-color-2: #f66cc3;
}
.forge-stage[data-forge-tier="6"] .forge-anvil-aura {
    opacity: 0.5;
    inset: -14% -8% 2%;
    background: conic-gradient(from 0deg, #8cf099, #507ce1, #9e4bea, #f66cc3, #8cf099);
    -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 72%);
    mask: radial-gradient(closest-side, #000 20%, transparent 72%);
    filter: blur(10px);
    animation: forge-rune-spin 9s linear infinite;
}
.forge-stage[data-forge-tier="6"] .forge-anvil-floor::before {
    border: calc(1.5px * var(--anvil-scale)) dashed rgba(140, 240, 153, 0.85);
    background: radial-gradient(closest-side, transparent 64%, rgba(88, 25, 217, 0.6) 68%, transparent 74%),
        radial-gradient(closest-side, rgba(80, 124, 225, 0.45), transparent);
    box-shadow: 0 0 30px rgba(88, 25, 217, 0.7), inset 0 0 26px rgba(246, 108, 195, 0.35);
    animation: forge-rune-spin 14s linear infinite;
}
.forge-stage[data-forge-tier="6"] .forge-anvil-floor::after {
    inset: 8%;
    border-radius: 50%;
    border: calc(1px * var(--anvil-scale)) dotted rgba(246, 108, 195, 0.8);
    background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent 75%);
    animation: forge-rune-spin 22s linear infinite reverse;
}
.forge-stage[data-forge-tier="6"] .forge-anvil-orbit { opacity: 1; }
.forge-stage[data-forge-tier="6"] .forge-anvil-float { animation: forge-anvil-hover 3.6s ease-in-out infinite; --hover-lift: -7px; }
.forge-stage[data-forge-tier="6"] .forge-anvil-sprite {
    filter: drop-shadow(0 calc(2px * var(--anvil-scale)) 0 rgba(0, 0, 0, 0.35)) drop-shadow(0 0 12px rgba(140, 240, 153, 0.45));
}
.forge-stage[data-forge-tier="6"] .forge-anvil-hint-tier {
    background: linear-gradient(90deg, #8cf099, #507ce1, #f66cc3, #8cf099);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: forge-prism-text 4s linear infinite;
}

@keyframes forge-emissive-pulse {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}
@keyframes forge-aura-strike {
    0% { opacity: 1; transform: scale(0.85); }
    100% { transform: scale(1.1); }
}
@keyframes forge-ember-flicker {
    0%, 100% { transform: scale(1); }
    40% { transform: scale(1.04) translateY(-2px); }
    70% { transform: scale(0.98); }
}
@keyframes forge-arcane-pulse {
    0%, 100% { transform: scale(0.96); filter: blur(6px) hue-rotate(0deg); }
    50% { transform: scale(1.06); filter: blur(8px) hue-rotate(-25deg); }
}
@keyframes forge-fire-flicker {
    0% { transform: scale(1) translateY(0); }
    33% { transform: scale(1.05, 1.08) translateY(-3px); }
    66% { transform: scale(0.98, 1.02) translateY(-1px); }
}
@keyframes forge-rune-spin {
    to { transform: rotate(360deg); }
}
@keyframes forge-orbit-spin {
    to { transform: rotate(360deg); }
}
@keyframes forge-orbit-counter {
    from { transform: translateX(calc(46px * var(--anvil-scale))) rotate(0deg) scaleY(3.125); }
    to { transform: translateX(calc(46px * var(--anvil-scale))) rotate(-360deg) scaleY(3.125); }
}
@keyframes forge-anvil-hover {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(var(--hover-lift, -3px)); }
}
@keyframes forge-hint-breathe {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 1; }
}
@keyframes forge-prism-text {
    to { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .forge-anvil-emissive,
    .forge-anvil-aura,
    .forge-anvil-floor::before,
    .forge-anvil-floor::after,
    .forge-anvil-orbit i,
    .forge-anvil-orbit i::before,
    .forge-anvil-float,
    .forge-anvil-hint-cta {
        animation: none !important;
    }
}

/* Forge hammer cursor (fine pointers) + shared particle canvas */
html.forge-hammer-on #tab-forge,
html.forge-hammer-on #tab-forge * {
    cursor: none !important;
}
.forge-hammer-cursor {
    position: fixed;
    left: 0;
    top: 0;
    width: 48px;
    height: 48px;
    z-index: 10210;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
}
.forge-hammer-cursor.is-visible { opacity: 1; }
.forge-hammer-rig {
    position: absolute;
    inset: 0;
    will-change: transform;
}
.forge-hammer-cursor img {
    display: block;
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6));
}
.forge-hammer-cursor.is-hot img {
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 5px rgba(255, 217, 102, 0.85));
}
/* Head-only heat tint, masked to the head's alpha by the canvas itself. */
.forge-hammer-heat {
    position: absolute;
    inset: 0;
    width: 48px;
    height: 48px;
    image-rendering: pixelated;
    mix-blend-mode: screen;
    opacity: 0;
    filter: drop-shadow(0 0 3px var(--hammer-glow, #ff9148));
    pointer-events: none;
}
.forge-hammer-cursor[data-forge-tier="2"] .forge-hammer-heat { opacity: 0.12; }
.forge-hammer-cursor[data-forge-tier="3"] .forge-hammer-heat { opacity: 0.18; }
.forge-hammer-cursor[data-forge-tier="4"] .forge-hammer-heat { animation: forge-hammer-heat-pulse 2.4s ease-in-out infinite; --heat-lo: 0.14; --heat-hi: 0.32; }
.forge-hammer-cursor[data-forge-tier="5"] .forge-hammer-heat { animation: forge-hammer-heat-pulse 0.9s steps(3) infinite; --heat-lo: 0.24; --heat-hi: 0.42; }
.forge-hammer-cursor[data-forge-tier="6"] .forge-hammer-heat { animation: forge-hammer-heat-pulse 3.6s ease-in-out infinite, forge-hammer-prism 6s linear infinite; --heat-lo: 0.22; --heat-hi: 0.4; }
/* Determined rolls ready: Determination-pink head and aura on top of the tier look. */
.forge-hammer-cursor.is-determined img {
    animation: forge-hammer-determined 1.3s ease-in-out infinite;
}
.forge-hammer-cursor.is-determined.is-hot img {
    animation: none;
    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(255, 0, 127, 0.95)) drop-shadow(0 0 6px rgba(255, 217, 102, 0.8));
}
.forge-hammer-cursor.is-determined .forge-hammer-heat {
    animation: forge-hammer-heat-pulse 1.1s ease-in-out infinite;
    --heat-lo: 0.34;
    --heat-hi: 0.62;
}
@keyframes forge-hammer-determined {
    0%, 100% { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 3px rgba(255, 0, 127, 0.8)) drop-shadow(0 0 7px rgba(255, 95, 176, 0.35)); }
    50% { filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 5px rgba(255, 0, 127, 1)) drop-shadow(0 0 12px rgba(255, 95, 176, 0.65)); }
}
@keyframes forge-hammer-heat-pulse {
    0%, 100% { opacity: var(--heat-lo); }
    50% { opacity: var(--heat-hi); }
}
@keyframes forge-hammer-prism {
    to { filter: drop-shadow(0 0 3px var(--hammer-glow, #8cf099)) hue-rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .forge-hammer-heat { animation: none !important; opacity: 0.2 !important; }
    .forge-hammer-cursor[data-forge-tier="1"] .forge-hammer-heat { opacity: 0 !important; }
    .forge-hammer-cursor.is-determined .forge-hammer-heat { opacity: 0.45 !important; }
    .forge-hammer-cursor.is-determined img {
        animation: none;
        filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 4px rgba(255, 0, 127, 0.9));
    }
}
.forge-fx-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 10200;
    pointer-events: none;
}
.forge-action-tray-inner {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    width: 100%;
}
.forge-action-tray-status {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-width: 0;
}
/* The status column only reads beside the bench; the stash covers it when open. */
@media (max-width: 767px) {
    .forge-page-actions > :not(#forge-boons-panel) { display: none; }
    #forge-boons-panel { margin-bottom: 0; }
}
@media (min-width: 768px) and (max-width: 1279.98px) {
    body.stash-panel-open .forge-page-actions { display: none; }
}
/* Desktop stash layout: the Forge Bench collapses to its Rarity/Quality +
   Auto-Salvage controls floating above the stash. */
@media (min-width: 768px) and (max-width: 1279.98px) {
    html.forge-stash-layout #forge-boosts-panel {
        position: fixed;
        right: calc(var(--stash-float-right, 0px) + 4px);
        bottom: var(--stash-float-bottom, 50vh);
        width: calc(var(--stash-float-width, 420px) - 8px);
        z-index: 90;
        box-sizing: border-box;
        gap: 8px;
        padding: 10px 12px 11px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    }
    html.forge-stash-layout #forge-boosts-panel > h2 {
        display: none;
    }
    html.forge-stash-layout #forge-boosts-panel .forge-bench-salvage > .font-card-display {
        margin-bottom: 6px;
    }
    html.forge-stash-layout #forge-boosts-panel .forge-bench-salvage-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px 16px;
        font-size: 13px;
    }
    /* Opt-in Roll button rides just above the floating bench. */
    html.forge-stash-layout .forge-roll-float {
        position: fixed;
        right: calc(var(--stash-float-right, 0px) + 4px);
        bottom: calc(var(--stash-float-bottom, 50vh) + var(--forge-bench-float-h, 180px) + 10px);
        width: calc(var(--stash-float-width, 420px) - 8px);
        z-index: 90;
        margin: 0;
    }
}
/* Ledger desktop stash layout: the bench's actions float in the margin between the
   inspect card and the stash, vertically centered on the card; the bench itself
   collapses to its Discount / Byproducts pills floating above the stash. */
.ledger-margin-rail {
    display: none;
}
@media (min-width: 768px) {
    html.ledger-stash-layout #ledger-bench-panel {
        position: fixed;
        right: calc(var(--stash-float-right, 0px) + 4px);
        bottom: var(--stash-float-bottom, 50vh);
        width: calc(var(--stash-float-width, 420px) - 8px);
        z-index: 90;
        box-sizing: border-box;
        padding: 10px 12px;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55);
    }
    html.ledger-stash-layout.ledger-bench-cramped #ledger-bench-panel {
        display: none;
    }
    html.ledger-stash-layout #ledger-bench-panel > h2,
    html.ledger-stash-layout #ledger-bench-panel .ledger-bench-actions,
    html.ledger-stash-layout #ledger-bench-panel .ledger-bench-stats {
        display: none;
    }
    html.ledger-stash-layout .ledger-margin-rail {
        position: fixed;
        left: calc(var(--ledger-margin-x, 50vw) - var(--ledger-margin-w, 224px) / 2);
        top: var(--ledger-margin-top, 12vh);
        width: var(--ledger-margin-w, 224px);
        height: var(--ledger-margin-h, 70vh);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
        z-index: 90;
    }
}
.ledger-margin-rail-inner {
    pointer-events: auto;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 14px;
    background: rgba(24, 24, 28, 0.96);
    border: 1px solid rgba(255, 217, 102, 0.22);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.ledger-margin-rail-inner:empty {
    display: none;
}
.ledger-margin-rail .ledger-bench-rows {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}
.ledger-margin-rail .ledger-bench-row {
    gap: 6px;
    padding: 6px 8px;
}
/* Broken Weapon inspect card: Scale / Slag sockets in place of the flavor line. */
.loot-card-repair-sockets {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-top: 14px;
    flex-shrink: 0;
}
.loot-card-repair-socket {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: none;
    cursor: var(--cursor-hand);
    -webkit-tap-highlight-color: transparent;
}
.loot-card-repair-socket-well {
    --pb-px: 3px;
    --pb-edge: rgba(255, 217, 102, 0.38);
    --pb-fill-a: #121214;
    --pb-fill-b: #08080a;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    cursor: inherit;
    transition: transform 150ms ease, filter 150ms ease;
}
.loot-card-repair-socket-well img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    image-rendering: pixelated;
    opacity: 0.22;
    filter: grayscale(1) brightness(1.4);
    pointer-events: none;
}
.loot-card-repair-socket-label {
    font-family: 'Dico', MainFont, sans-serif;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-textMuted, #888);
}
.loot-card-repair-socket-join {
    align-self: center;
    margin-top: -18px;
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    font-size: 20px;
    color: rgba(255, 217, 102, 0.55);
}
.loot-card-repair-socket:hover .loot-card-repair-socket-well {
    transform: translateY(-2px);
    filter: brightness(1.25);
}
.loot-card-repair-socket[data-filled="true"] .loot-card-repair-socket-well {
    --pb-edge: var(--color-accentGold, #ffd966);
    --pb-fill-a: #2a2410;
    --pb-fill-b: #17140a;
}
.loot-card-repair-socket[data-filled="true"] .loot-card-repair-socket-well img {
    opacity: 1;
    filter: drop-shadow(0 0 6px rgba(255, 217, 102, 0.55));
}
.loot-card-repair-socket[data-filled="true"] .loot-card-repair-socket-label {
    color: var(--color-accentGold, #ffd966);
}
.loot-card-repair-socket[data-busy="true"] {
    cursor: wait;
    opacity: 0.7;
}
.loot-card-repair-socket.is-wanted .loot-card-repair-socket-well,
.loot-card-repair-socket.drag-over .loot-card-repair-socket-well {
    --pb-edge: #fff3c4;
    animation: repair-socket-call 0.9s ease-in-out infinite;
}
.loot-card-repair-socket.drag-over .loot-card-repair-socket-well {
    --pb-fill-a: #2a2410;
    --pb-fill-b: #17140a;
}
.loot-card-repair-socket.is-wanted .loot-card-repair-socket-label,
.loot-card-repair-socket.drag-over .loot-card-repair-socket-label {
    color: #fff3c4;
}
@keyframes repair-socket-call {
    0%, 100% { transform: scale(1); filter: brightness(1) drop-shadow(0 0 0 rgba(255, 217, 102, 0)); }
    50% { transform: scale(1.07); filter: brightness(1.3) drop-shadow(0 0 8px rgba(255, 217, 102, 0.8)); }
}

/* Ledger: Scrap hovered or dragged -> the inspected card invites the drop. */
.ledger-drop-invite {
    position: absolute;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: 14px;
    background: radial-gradient(circle at 50% 45%, rgba(34, 14, 50, 0.88) 0%, rgba(10, 6, 16, 0.9) 70%);
    box-shadow: inset 0 0 0 2px rgba(217, 166, 255, 0.55), 0 0 24px rgba(163, 53, 238, 0.35);
    transition: box-shadow 160ms ease, background 160ms ease;
}
.ledger-drop-invite::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 2px dashed rgba(217, 166, 255, 0.55);
    border-radius: 10px;
    animation: ledger-invite-march 1.6s linear infinite;
}
.ledger-drop-invite-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    padding: 0 20px;
}
.ledger-drop-invite-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 0 10px rgba(217, 166, 255, 0.8));
    animation: ledger-invite-bob 1.4s ease-in-out infinite;
}
.ledger-drop-invite-title {
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    font-size: 24px;
    color: #f1dcff;
    text-shadow: 0 2px 0 #000, 0 0 12px rgba(163, 53, 238, 0.8);
}
.ledger-drop-invite-sub {
    font-family: 'Dico', MainFont, sans-serif;
    font-size: 14px;
    letter-spacing: 0.06em;
    color: var(--color-accentGold, #ffd966);
    text-shadow: 0 1px 0 #000;
}
.ledger-drop-invite[data-ok="false"] {
    background: radial-gradient(circle at 50% 45%, rgba(24, 24, 28, 0.88) 0%, rgba(8, 8, 10, 0.9) 70%);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.ledger-drop-invite[data-ok="false"]::before {
    border-color: rgba(255, 255, 255, 0.2);
    animation: none;
}
.ledger-drop-invite[data-ok="false"] .ledger-drop-invite-sub {
    color: var(--color-textMuted, #888);
}
.ledger-drop-invite.is-hot {
    background: radial-gradient(circle at 50% 45%, rgba(80, 34, 114, 0.9) 0%, rgba(24, 10, 36, 0.9) 70%);
    box-shadow: inset 0 0 0 3px #e8c8ff, 0 0 36px rgba(217, 166, 255, 0.7);
}
@keyframes ledger-invite-march {
    to { border-color: rgba(255, 217, 102, 0.6); }
}
@keyframes ledger-invite-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Alchemy transmutation over the inspected card (ui/alchemy-fx.js). */
.alchemy-fx {
    position: fixed;
    width: 0;
    height: 0;
    z-index: 90;
    pointer-events: none;
}
.alchemy-fx > * {
    position: absolute;
    left: 0;
    top: 0;
}
.alchemy-fx-veil {
    width: calc(var(--afx-size) * 1.35);
    height: calc(var(--afx-size) * 1.35);
    margin: calc(var(--afx-size) * -0.675) 0 0 calc(var(--afx-size) * -0.675);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 6, 4, 0.9) 0%, rgba(8, 6, 4, 0.72) 42%, rgba(8, 6, 4, 0) 70%);
    opacity: 0;
}
.alchemy-fx-circle {
    width: var(--afx-size);
    height: var(--afx-size);
    margin: calc(var(--afx-size) / -2) 0 0 calc(var(--afx-size) / -2);
    overflow: visible;
    filter: drop-shadow(0 0 4px var(--afx-color));
}
.alchemy-fx-circle circle,
.alchemy-fx-circle polygon,
.alchemy-fx-circle line {
    fill: none;
    stroke: var(--afx-color);
    stroke-width: 1.3;
}
.alchemy-fx-circle .is-thin {
    stroke-width: 0.7;
    opacity: 0.7;
}
.alchemy-fx-circle text {
    fill: var(--afx-color);
    font-family: 'Segoe UI Symbol', 'Apple Symbols', serif;
    font-size: 11px;
}
.alchemy-fx-digit {
    position: absolute;
    left: 0;
    top: 0;
    margin: -0.5em 0 0 -0.3em;
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    font-size: calc(var(--afx-size) * 0.075);
    line-height: 1;
    color: var(--afx-accent);
    text-shadow: 0 0 6px var(--afx-color), 0 1px 0 #000;
    will-change: transform, opacity;
}
.alchemy-fx-readout {
    width: var(--afx-size);
    margin-left: calc(var(--afx-size) / -2);
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
}
.alchemy-fx-letters {
    display: flex;
    align-items: baseline;
    gap: 0.25em;
    opacity: 0;
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    font-size: calc(var(--afx-size) * 0.24);
    line-height: 1;
    color: #fff;
    text-shadow: 0 3px 0 #000, 0 0 16px var(--afx-color);
}
.alchemy-fx-from {
    font-size: 0.55em;
    color: #cfcfd6;
}
.alchemy-fx-arrow {
    font-size: 0.45em;
    color: var(--afx-color);
}
.alchemy-fx-to {
    display: inline-block;
    color: var(--afx-accent);
}
.alchemy-fx-number {
    min-height: 1em;
    opacity: 0;
    font-family: 'Dico', MainFont, sans-serif;
    font-size: calc(var(--afx-size) * 0.11);
    line-height: 1;
    letter-spacing: 0.1em;
    font-variant-numeric: tabular-nums;
    color: var(--afx-color);
    text-shadow: 0 0 10px var(--afx-color), 0 2px 0 #000;
}
.alchemy-fx-number.is-settled {
    letter-spacing: 0.02em;
    color: #fff;
}
.alchemy-fx-caption {
    opacity: 0;
    font-family: 'Dico', MainFont, sans-serif;
    font-size: calc(var(--afx-size) * 0.05);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--afx-color);
    text-shadow: 0 1px 0 #000;
}
.alchemy-fx-flash {
    width: calc(var(--afx-size) * 1.6);
    height: calc(var(--afx-size) * 1.6);
    margin: calc(var(--afx-size) * -0.8) 0 0 calc(var(--afx-size) * -0.8);
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, var(--afx-color) 28%, rgba(0, 0, 0, 0) 66%);
    mix-blend-mode: screen;
    opacity: 0;
}
@media (min-width: 768px) {
    .player-footer {
        left: var(--sidebar-width);
        width: calc(100% - var(--sidebar-width));
        height: var(--player-footer-height);
        min-height: var(--player-footer-height);
        padding: 0;
    }
    .player-footer-identity {
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 1;
        height: var(--player-footer-wing-height);
        width: max-content;
        max-width: calc(50% - var(--player-footer-podium-width) / 2 - 8px);
        padding: 0 10px 0 14px;
        align-items: center;
        overflow: visible;
    }
    .player-footer-entropy-dock {
        display: flex;
        position: absolute;
        left: var(--entropy-dock-center, calc(50% - var(--player-footer-podium-width) / 2 - 30px));
        bottom: 0;
        z-index: 2;
        height: var(--player-footer-wing-height);
        padding-bottom: var(--footer-dock-label-bottom, 10px);
    }
    .player-footer-avatar img {
        width: 64px;
        height: 64px;
    }
    .player-footer-id-copy {
        min-width: 0;
        flex: 1 1 auto;
    }
    .player-footer-name {
        max-width: none;
        min-width: 0;
        flex: 0 1 auto;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        line-height: 1.15;
    }
    .player-footer-chips .shell-stat-chip {
        padding: 0.12rem 0.35rem;
    }
    .player-footer-podium {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: max-content;
        margin: 0 auto;
        height: var(--player-footer-height);
        padding: 8px 12px 6px;
    }
    .player-footer-actions {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 100%;
        height: var(--player-footer-wing-height);
        max-width: calc(50% - var(--player-footer-podium-width) / 2 - 8px);
        padding: 0 14px 0 18px;
        align-items: center;
        overflow: visible;
    }
    .player-footer-toggle {
        display: none !important;
    }
    .player-footer.is-clash-cards-locked .dom-dock-loadout {
        filter: grayscale(1);
        opacity: 0.42;
        pointer-events: none;
        user-select: none;
    }
    .player-footer.is-clash-cards-locked .dom-dock-loadout > * {
        cursor: var(--cursor-arrow);
        pointer-events: none;
    }
    .player-footer.is-clash-stash-locked .dom-dock-stash {
        filter: grayscale(1);
        opacity: 0.42;
        pointer-events: none;
        cursor: var(--cursor-arrow);
    }
}
@media (max-width: 767px) {
    .player-footer {
        bottom: var(--bottom-nav-total-height);
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        column-gap: 6px;
        row-gap: 6px;
        height: auto;
        min-height: 0;
        padding: 14px 10px 10px;
    }
    .player-footer-avatar {
        display: none;
    }
    .player-footer-podium {
        display: contents;
        transform: none;
        height: auto;
    }
    .dom-dock-summary {
        grid-column: 1;
        grid-row: 1;
        justify-self: center;
        align-self: center;
    }
    .dom-dock-loadout {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
        justify-content: center;
    }
    .player-footer-actions {
        grid-column: 3;
        grid-row: 1;
        justify-self: stretch;
        align-self: center;
        width: 100%;
        height: auto;
        justify-content: center;
    }
    .player-footer-identity {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        gap: 0;
    }
    .player-footer-id-copy {
        flex: 1 1 auto;
        width: 100%;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }
    .player-footer-name-row {
        flex: 1 1 auto;
        min-width: 0;
    }
    .player-footer-name {
        max-width: none;
        min-width: 0;
        width: 100%;
    }
    .player-footer-chips {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        margin-left: auto;
        gap: 4px;
    }
    .player-footer-chips .shell-stat-chip {
        display: inline-flex;
    }
    .player-footer-chips .shell-stat-label {
        display: none;
    }
    .player-footer-toggle {
        display: flex;
        position: absolute;
        left: 6px;
        bottom: 4px;
        z-index: 4;
        pointer-events: auto;
        width: 28px;
        height: 22px;
        padding: 0;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(255, 217, 102, 0.55);
        border-radius: 6px;
        background: #141414;
        cursor: var(--cursor-hand);
    }
    .player-footer-identity {
        padding-left: 34px;
    }
    .player-footer-toggle-chevron {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid var(--color-accentGold, #ffd966);
    }
    .player-footer.is-collapsed {
        height: var(--player-footer-collapsed-height, 28px);
        min-height: var(--player-footer-collapsed-height, 28px);
        padding: 0;
        row-gap: 0;
        column-gap: 0;
        overflow: visible;
    }
    .player-footer.is-collapsed .player-footer-pixel-frame,
    .player-footer.is-collapsed .player-footer-identity,
    .player-footer.is-collapsed .player-footer-actions,
    .player-footer.is-collapsed .player-footer-entropy-dock,
    .player-footer.is-collapsed .dom-dock-summary,
    .player-footer.is-collapsed .dom-dock-loadout {
        display: none;
    }
    .player-footer.is-collapsed .player-footer-toggle {
        left: 50%;
        bottom: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 72px;
        height: 22px;
        border-radius: 8px;
    }
    .player-footer.is-collapsed .player-footer-toggle-chevron {
        border-top: 0;
        border-bottom: 6px solid var(--color-accentGold, #ffd966);
    }
    .player-footer.is-clash-forced-hidden {
        display: none;
    }
}
/* legacy dock class kept for animation hooks */
.settings-menu-trigger {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: transparent;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: var(--cursor-hand);
}
.settings-menu-trigger-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
    transition: filter 160ms ease, transform 160ms ease;
}
.settings-menu-trigger:hover,
.settings-menu-trigger[aria-expanded="true"] {
    background: transparent;
}
.settings-menu-trigger:hover .settings-menu-trigger-icon,
.settings-menu-trigger[aria-expanded="true"] .settings-menu-trigger-icon {
    filter: drop-shadow(0 0 4px rgba(255, 217, 102, 0.65));
    transform: scale(1.08);
}
@media (min-width: 768px) {
    .player-footer-entropy {
        display: inline-flex;
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}
.settings-esc-panel {
    width: min(92vw, 400px);
    padding: 28px 28px 20px;
    text-align: center;
}
.settings-esc-panel[data-view="hotkeys"] {
    width: min(94vw, 860px);
}
.settings-esc-title {
    margin: 0 0 18px;
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    -webkit-font-smoothing: none;
    font-size: 28px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--color-accentGold, #ffd966);
    text-shadow: 0 0 12px rgba(255, 217, 102, 0.35);
}
.settings-esc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-esc-panel .settings-menu-discord:not(.hidden) {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-esc-panel .settings-menu-sound,
.settings-esc-panel .settings-menu-item {
    justify-content: center;
    min-height: 44px;
    padding: 12px 14px;
    font-family: var(--font-card-display, Alagard, Dico, MainFont, sans-serif);
    font-size: 15px;
    font-weight: 600;
    -webkit-font-smoothing: none;
}
/* WebKit (the desktop app) drops whole clip-path buttons from the panel while a sibling's hover
   transform runs on a temporary layer. A standing layer per button avoids that. */
.settings-esc-panel :is(.settings-menu-sound, .settings-menu-item),
.settings-esc-resume {
    will-change: transform;
}
.settings-esc-panel :is(.settings-menu-sound, .settings-menu-item):hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.18);
}
.settings-esc-panel :is(.settings-menu-sound, .settings-menu-item):active:not(:disabled) {
    transform: translateY(1px);
}
.settings-esc-panel :is(.settings-menu-sound, .settings-menu-item):disabled {
    filter: grayscale(1);
    opacity: 0.45;
    cursor: not-allowed;
}
.settings-esc-panel :is(.settings-menu-sound, .settings-menu-item):focus-visible {
    --pb-edge: #ffffff;
    outline: none;
}
.settings-esc-panel :is([data-discord-join], [data-discord-login]) {
    --pb-edge: var(--color-discordBase, #5865F2);
    --pb-fill-a: #1b1e3a;
    --pb-fill-b: #0e1022;
    --pb-text: #b3b9ff;
}
.settings-esc-panel [data-discord-logout] {
    --pb-edge: var(--color-danger, #ff4757);
    --pb-fill-a: #2e1317;
    --pb-fill-b: #17090c;
    --pb-text: #ff939c;
}
.settings-esc-panel .settings-menu-danger {
    --pb-edge: var(--color-danger, #ff4757);
    --pb-fill-a: #2e1317;
    --pb-fill-b: #17090c;
    --pb-text: #ff939c;
}
.settings-esc-panel .settings-menu-divider {
    margin: 2px 0;
}
.settings-esc-panel .settings-menu-divider:has(+ .settings-menu-discord.hidden) {
    display: none;
}
/* Volume row: square mute toggle + a pixel-rimmed slider well. The range is
   restyled per engine (track/thumb pseudo-elements) to the pixel palette;
   --fill (set from JS) paints the gold level. */
.settings-volume {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.settings-esc-panel .settings-volume-mute {
    flex: 0 0 44px;
    width: 44px;
    padding: 0;
}
.settings-esc-panel .settings-volume-mute .settings-menu-icon {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    font-size: 18px;
}
.settings-volume-track {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    cursor: var(--cursor-arrow);
}
.settings-volume-range {
    --fill: 80%;
    flex: 1 1 auto;
    min-width: 0;
    height: 22px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: var(--cursor-hand);
}
.settings-volume-range:focus-visible {
    outline: none;
}
.settings-volume-range::-webkit-slider-runnable-track {
    height: 6px;
    background: linear-gradient(90deg, var(--color-accentGold, #ffd966) var(--fill), #34343c var(--fill));
    box-shadow: 0 0 0 2px #0b0b0e;
}
.settings-volume-range::-moz-range-track {
    height: 6px;
    background: linear-gradient(90deg, var(--color-accentGold, #ffd966) var(--fill), #34343c var(--fill));
    box-shadow: 0 0 0 2px #0b0b0e;
}
.settings-volume-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 20px;
    margin-top: -7px;
    border: 0;
    border-radius: 0;
    background: #d8d8e0;
    box-shadow: inset 0 0 0 3px #8a8a96, 0 0 0 2px #0b0b0e;
}
.settings-volume-range::-moz-range-thumb {
    width: 12px;
    height: 20px;
    border: 0;
    border-radius: 0;
    background: #d8d8e0;
    box-shadow: inset 0 0 0 3px #8a8a96, 0 0 0 2px #0b0b0e;
}
.settings-volume-range:focus-visible::-webkit-slider-thumb {
    box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 2px #0b0b0e;
}
.settings-volume-range:focus-visible::-moz-range-thumb {
    box-shadow: inset 0 0 0 3px #ffffff, 0 0 0 2px #0b0b0e;
}
.settings-volume.is-muted .settings-volume-range {
    filter: grayscale(1);
    opacity: 0.55;
}
.settings-volume-value {
    flex: 0 0 3.4em;
    text-align: right;
    font-family: var(--font-card-display, Alagard, Dico, MainFont, sans-serif);
    font-size: 15px;
    font-weight: 600;
    -webkit-font-smoothing: none;
    color: #d8d8e0;
    font-variant-numeric: tabular-nums;
}
.settings-volume.is-muted .settings-volume-value {
    color: #8a8a96;
}
@media (prefers-reduced-motion: reduce) {
    .settings-esc-panel :is(.settings-menu-sound, .settings-menu-item) {
        transition: none;
    }
}
.settings-esc-panel .settings-menu-icon {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
    font-size: 16px;
}
.settings-esc-resume {
    width: 100%;
    margin-top: 16px;
    padding: 12px 14px;
    font-family: HeadingFont, sans-serif;
    font-size: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.settings-esc-hint {
    margin: 12px 0 0;
    color: #777;
    font-size: 12px;
    letter-spacing: 0.04em;
}
.settings-menu-sound {
    width: 100%;
    padding: 8px;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 6px;
    text-align: left;
    font: 700 12px/1.2 MainFont, sans-serif;
    cursor: var(--cursor-hand);
    display: flex;
    align-items: center;
    gap: 6px;
}
.settings-menu-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    line-height: 1;
}
.settings-menu-item {
    min-height: 34px;
    font: 700 12px/1.2 MainFont, sans-serif;
}
.settings-menu-divider {
    height: 1px;
    margin: 4px 0;
    background: #444;
}
.desktop-settings-rail {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
    height: var(--player-footer-wing-height);
    min-height: var(--player-footer-wing-height);
    padding: 8px 12px 22px;
    flex-shrink: 0;
}
.game-version-label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    margin: 0;
    padding: 0;
    text-align: center;
    color: var(--color-textMuted, #888);
    font: 600 11px/1 HeadingFont, sans-serif;
    letter-spacing: 0.06em;
}
.settings-menu-version {
    position: static;
    margin: 8px 0 2px;
    font-size: 10px;
}
#home-stat-rarity .forge-stat-rarity-badge {
    top: 0 !important;
}
.settings-menu-discord,
.settings-menu-discord > * {
    width: 100%;
}
.settings-menu-discord [data-discord-menu] {
    bottom: auto;
    top: 100%;
    left: auto;
    right: 0;
    margin-top: 6px;
    margin-bottom: 0;
}
.player-footer.is-ready {
    pointer-events: none;
}
.player-footer > *:not(.player-footer-pixel-frame):where(:not(.stash-dock-panel, .stash-icon-toast)) {
    opacity: 1;
    transform: translateY(0);
}
.dom-dock-stash {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-accentGold, #ffd966);
    border-radius: 0;
    flex: 0 0 auto;
    min-width: 40px;
    width: auto;
    height: auto;
    min-height: 0;
    align-self: center;
    padding: 0 2px;
    box-sizing: border-box;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    cursor: var(--cursor-hand);
    font: 700 11px/1 HeadingFont, sans-serif;
    transition: filter 160ms ease, transform 160ms ease, color 160ms ease;
}
.dom-dock-stash:hover {
    color: var(--color-accentGold, #ffd966);
    filter: drop-shadow(0 0 8px rgba(255, 217, 102, 0.45));
}
.dom-dock-stash-count {
    color: var(--color-accentGold, #ffd966);
    font: 700 11px/1 HeadingFont, sans-serif;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}
.dom-dock-stash-label {
    color: var(--color-accentGold, #ffd966);
    font: 700 9px/1 HeadingFont, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dom-dock-stash img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}
/* Landing pulse when an item's fly-in ghost reaches the stash icon. */
.dom-dock-stash-pulse {
    animation: dom-dock-stash-land 260ms ease-out;
}
@keyframes dom-dock-stash-land {
    0% { filter: drop-shadow(0 0 0 rgba(255, 217, 102, 0)); transform: scale(1); }
    35% { filter: drop-shadow(0 0 14px rgba(255, 217, 102, 0.7)); transform: scale(1.12); }
    100% { filter: drop-shadow(0 0 0 rgba(255, 217, 102, 0)); transform: scale(1); }
}
/* Collapsed footer toggle is centered with transform; don't override it. */
.player-footer-toggle.dom-dock-stash-pulse {
    animation: player-footer-toggle-land 260ms ease-out;
}
@keyframes player-footer-toggle-land {
    0% { filter: drop-shadow(0 0 0 rgba(255, 217, 102, 0)); }
    35% { filter: drop-shadow(0 0 14px rgba(255, 217, 102, 0.7)); }
    100% { filter: drop-shadow(0 0 0 rgba(255, 217, 102, 0)); }
}
.dom-dock-loadout {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 4px;
    flex: 0 1 auto;
    min-width: 0;
}
.dom-dock-loadout.landing-loadout {
    gap: 10px;
}
.dom-dock-summary {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    align-self: center;
    flex: 0 0 auto;
    width: 110px;
    min-width: 92px;
    height: 104px;
    padding: 8px 10px;
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-textMuted, #888);
    font: 700 9px/1.15 MainFont, sans-serif;
    white-space: nowrap;
}
.dom-dock-summary-title {
    color: var(--color-accentGold, #ffd966);
    font: 700 10px/1 HeadingFont, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
    flex: 0 0 auto;
}
.dom-dock-summary-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 0;
    padding: 0.22rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    outline: none;
}
.dom-dock-summary-pill:hover,
.dom-dock-summary-pill:focus-visible {
    border-color: rgba(255, 217, 102, 0.42);
}
.dom-dock-summary-pill.is-over {
    border-color: rgba(255, 71, 87, 0.5);
}
.dom-dock-summary-weight-icon,
.dom-dock-summary-power-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    object-fit: contain;
    image-rendering: pixelated;
}
.dom-dock-summary-label {
    color: var(--color-textMuted, #888);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 8px;
}
.dom-dock-summary strong {
    display: block;
    color: var(--color-accentGold, #ffd966);
    font: 700 12px/1 HeadingFont, sans-serif;
    font-variant-numeric: tabular-nums;
}
.dom-dock-loadout > * {
    width: 72px !important;
    min-width: 0 !important;
    height: 104px !important;
    padding: 6px !important;
    font-size: 9px !important;
}
/* Loadout dock + stash panel tiles share one layout. */
.dom-dock-loadout > .bg-bgSlotFilled,
.stash-dock-grid > .bg-bgSlotFilled {
    padding: 26px 6px 6px !important;
    justify-content: space-between !important;
    gap: 0 !important;
}
.dom-dock-loadout img:not(.dom-dock-pixel-frame):not(.ui-glyph-badge):not(.tile-origin-icon),
.stash-dock-grid img:not(.dom-dock-pixel-frame):not(.ui-glyph-badge):not(.tile-origin-icon) {
    width: 36px !important;
    height: 36px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.dom-dock-loadout .weapon-glow-wrap,
.dom-dock-loadout .tile-weapon-art,
.stash-dock-grid .weapon-glow-wrap,
.stash-dock-grid .tile-weapon-art {
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
    flex: 0 0 36px;
}
.dom-dock-loadout .tile-item-label,
.stash-dock-grid .tile-item-label {
    margin: 0;
    line-height: 1.15;
}
.tile-tier-letter {
    font-family: 'Alagard', 'Dico', MainFont, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
}
.dom-dock-pixel-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    pointer-events: none;
    z-index: 3;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}
.dom-dock-loadout .tile-origin-badge,
.stash-dock-grid .tile-origin-badge {
    top: 8px !important;
    left: 8px !important;
}
.dom-dock-loadout .tile-tier-row,
.stash-dock-grid .tile-tier-row {
    top: 8px;
    padding-left: 8px;
    padding-right: 8px;
}
.dom-dock-stash[aria-expanded="true"] img {
    filter: drop-shadow(0 0 6px rgba(255, 217, 102, 0.8));
}
/* Home -> Inventory keeps the stash pinned open; the toggle is inert there. */
.dom-dock-stash.is-pinned-locked {
    filter: grayscale(1);
    opacity: 0.42;
    pointer-events: none;
    user-select: none;
}
.dom-dock-stash.is-pinned-locked img {
    filter: none;
}

/* Lock / Salvage beside the Home inspect card. Absolutely placed by
   layoutHomeInspectActions() so the page never shifts. */
.home-inspect-actions {
    position: absolute;
    inset: 0;
    z-index: 25;
    pointer-events: none;
}
.home-inspect-actions[hidden] {
    display: none;
}
.home-inspect-action {
    --hia-px: 3px;
    --hia-edge: #8a8a96;
    --hia-fill: linear-gradient(180deg, #232329 0%, #16161a 100%);
    --hia-steps: polygon(
        0 calc(var(--hia-px) * 2), var(--hia-px) calc(var(--hia-px) * 2),
        var(--hia-px) var(--hia-px), calc(var(--hia-px) * 2) var(--hia-px),
        calc(var(--hia-px) * 2) 0, calc(100% - var(--hia-px) * 2) 0,
        calc(100% - var(--hia-px) * 2) var(--hia-px), calc(100% - var(--hia-px)) var(--hia-px),
        calc(100% - var(--hia-px)) calc(var(--hia-px) * 2), 100% calc(var(--hia-px) * 2),
        100% calc(100% - var(--hia-px) * 2), calc(100% - var(--hia-px)) calc(100% - var(--hia-px) * 2),
        calc(100% - var(--hia-px)) calc(100% - var(--hia-px)), calc(100% - var(--hia-px) * 2) calc(100% - var(--hia-px)),
        calc(100% - var(--hia-px) * 2) 100%, calc(var(--hia-px) * 2) 100%,
        calc(var(--hia-px) * 2) calc(100% - var(--hia-px)), var(--hia-px) calc(100% - var(--hia-px)),
        var(--hia-px) calc(100% - var(--hia-px) * 2), 0 calc(100% - var(--hia-px) * 2));
    position: absolute;
    left: 0;
    top: 0;
    width: 76px;
    height: 80px;
    padding: 8px 4px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: var(--hia-edge);
    clip-path: var(--hia-steps);
    color: #fff;
    cursor: var(--cursor-hand);
    pointer-events: auto;
    transition: translate 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}
.home-inspect-action::before {
    content: '';
    position: absolute;
    inset: var(--hia-px);
    background: var(--hia-fill);
    clip-path: var(--hia-steps);
}
.home-inspect-action > * {
    position: relative;
}
.home-inspect-action.is-lock.is-engaged {
    --hia-edge: var(--color-accentGold, #ffd966);
    --hia-fill: linear-gradient(180deg, #2a2410 0%, #17140a 100%);
}
.home-inspect-action.is-salvage {
    --hia-edge: var(--color-entropyBase, #a335ee);
    --hia-fill: linear-gradient(180deg, #2a1838 0%, #150e1c 100%);
}
.home-inspect-action:hover:not(:disabled) {
    translate: 0 -2px;
    filter: brightness(1.18);
}
.home-inspect-action:active:not(:disabled) {
    translate: 0 1px;
}
.home-inspect-action:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.home-inspect-action:disabled {
    filter: grayscale(1);
    opacity: 0.45;
    cursor: not-allowed;
}
.home-inspect-action-icon {
    width: 22px;
    height: 22px;
    font-size: 19px;
    line-height: 22px;
    text-align: center;
    image-rendering: pixelated;
}
.home-inspect-action.is-engaged .home-inspect-action-icon {
    filter: drop-shadow(0 0 5px rgba(255, 217, 102, 0.7));
}
.home-inspect-action-label {
    font-family: var(--font-card-display);
    font-size: 14px;
    line-height: 1;
    color: var(--hia-edge);
    letter-spacing: 0.02em;
}
.home-inspect-action.is-lock:not(.is-engaged) .home-inspect-action-label {
    color: #d8d8e0;
}
.home-inspect-action.is-salvage .home-inspect-action-label {
    color: #d9a8ff;
}
.home-inspect-action-sub {
    font-family: var(--font-main);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    color: #c9c9d1;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .home-inspect-action {
        --hia-px: 2px;
        width: 40px;
        height: 58px;
        padding: 6px 2px 5px;
        gap: 3px;
    }
    .home-inspect-action-icon {
        width: 18px;
        height: 18px;
        font-size: 15px;
        line-height: 18px;
    }
    .home-inspect-action-label {
        font-size: 10px;
    }
    .home-inspect-action.is-lock:disabled .home-inspect-action-label {
        font-size: 8px;
        letter-spacing: 0;
    }
    .home-inspect-action.is-salvage .home-inspect-action-label {
        display: none;
    }
    .home-inspect-action-sub {
        font-size: 9px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-inspect-action {
        transition: none;
    }
}
/* Stash rises out of the footer's right wing: it sits under the silhouette
   canvas (z -1 inside the footer's stacking context) so the wing hides it. */
.stash-dock-panel {
    --stash-px: 3px;
    --stash-tile-w: 72px;
    --stash-tile-h: 104px;
    --stash-steps: polygon(
        0 calc(var(--stash-px) * 2), var(--stash-px) calc(var(--stash-px) * 2),
        var(--stash-px) var(--stash-px), calc(var(--stash-px) * 2) var(--stash-px),
        calc(var(--stash-px) * 2) 0, calc(100% - var(--stash-px) * 2) 0,
        calc(100% - var(--stash-px) * 2) var(--stash-px), calc(100% - var(--stash-px)) var(--stash-px),
        calc(100% - var(--stash-px)) calc(var(--stash-px) * 2), 100% calc(var(--stash-px) * 2),
        100% 100%, 0 100%);
    position: absolute;
    right: 0;
    bottom: var(--player-footer-wing-height);
    z-index: -1;
    width: var(--footer-tier-right, max(248px, calc(50% - var(--player-footer-podium-width, 340px) / 2 - 8px)));
    max-height: min(62vh, 560px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 12px 10px 8px;
    background: var(--color-accentGold, #ffd966);
    clip-path: var(--stash-steps);
    transform: translateY(calc(100% + var(--player-footer-wing-height)));
    visibility: hidden;
    pointer-events: none;
    will-change: transform;
    transition: transform 0.32s cubic-bezier(0.55, 0, 0.8, 0.25), visibility 0s linear 0.32s;
}
.stash-dock-panel::before {
    content: '';
    position: absolute;
    inset: var(--stash-px) var(--stash-px) 0;
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(255, 217, 102, 0.07), transparent 70%),
        #18181c;
    clip-path: var(--stash-steps);
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}
.stash-dock-panel > * {
    position: relative;
    z-index: 1;
}
.stash-dock-panel.active {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
.stash-dock-panel.is-pinned .close-btn {
    display: none;
}
.stash-dock-modal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    flex: 0 0 auto;
    padding: 0 4px 9px;
    margin-bottom: 2px;
    background: linear-gradient(90deg, rgba(255, 217, 102, 0.4) 50%, transparent 0) left bottom / 6px 2px repeat-x;
}
.stash-dock-modal-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    image-rendering: pixelated;
}
.stash-dock-modal-header h2 {
    margin: 0;
    color: var(--color-accentGold, #ffd966);
    font: 400 20px/1 'Alagard', 'Dico', MainFont, sans-serif;
    letter-spacing: 0.04em;
    text-shadow: 0 0 8px rgba(255, 217, 102, 0.35);
}
.stash-dock-modal-count {
    padding: 3px 7px;
    color: #bbb;
    background: #0f0f12;
    border: 1px solid #3a3a40;
    border-radius: 999px;
    font: 700 11px/1 MainFont, sans-serif;
    font-variant-numeric: tabular-nums;
}
.stash-dock-salvage {
    margin-left: auto;
    padding: 6px 9px;
    font: 700 11px/1 MainFont, sans-serif;
    white-space: nowrap;
}
.stash-dock-modal-header .close-btn {
    padding: 2px 4px;
    color: #aaa;
    background: transparent;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: var(--cursor-hand);
}
.stash-dock-modal-header .close-btn:hover {
    color: var(--color-accentGold, #ffd966);
}
.stash-dock-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--stash-tile-w));
    grid-auto-rows: var(--stash-tile-h);
    justify-content: center;
    align-content: start;
    gap: 6px;
    flex: 1 1 auto;
    min-height: 0;
    padding: 9px 6px 4px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #6b5a24 transparent;
}
.stash-dock-grid > * {
    width: var(--stash-tile-w) !important;
    height: var(--stash-tile-h) !important;
    min-width: 0 !important;
    max-width: none !important;
}
/* Entropic stash items: a still violet pool under the art, readable at a glance. */
.stash-dock-grid > [data-entropic]::before,
.stash-panel-pinned .dom-dock-loadout > [data-entropic]::before {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 4px;
    background: radial-gradient(ellipse 95% 70% at 50% 100%, rgba(163, 53, 238, 0.6), rgba(163, 53, 238, 0) 78%);
    box-shadow: inset 0 0 10px rgba(163, 53, 238, 0.45);
    pointer-events: none;
    z-index: -1;
}
/* Home -> Inventory: Entropic items breathe on their own loop (not the pulse timer). */
.stash-panel-pinned :is(.stash-dock-grid, .dom-dock-loadout) > [data-entropic]::before {
    animation: entropic-item-breathe 2.4s ease-in-out infinite;
}
.stash-panel-pinned :is(.stash-dock-grid, .dom-dock-loadout) > [data-entropic]::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 0 0 1px rgba(199, 125, 255, 0.7), 0 0 18px 4px rgba(163, 53, 238, 0.85), inset 0 0 18px rgba(199, 125, 255, 0.6);
    opacity: 0;
    animation: entropic-item-ring 2.4s ease-in-out infinite;
}
@keyframes entropic-item-breathe {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}
@keyframes entropic-item-ring {
    0%, 100% { opacity: 0.15; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .stash-panel-pinned :is(.stash-dock-grid, .dom-dock-loadout) > [data-entropic]::before {
        animation: none;
    }
    .stash-panel-pinned :is(.stash-dock-grid, .dom-dock-loadout) > [data-entropic]::after {
        animation: none;
        opacity: 0.6;
    }
}
/* The Scale / Slag the next roll will spend (locking pauses it): Scale gleams, Slag smoulders. */
.stash-dock-grid > [data-charge-active]::before,
.stash-dock-grid > [data-charge-active="scale"]::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 4px;
    pointer-events: none;
}
.stash-dock-grid > [data-charge-active]::before {
    z-index: -1;
}
.stash-dock-grid > [data-charge-active="scale"]::before {
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(ellipse 95% 70% at 50% 100%, rgba(255, 196, 64, 0.55), rgba(255, 196, 64, 0) 78%);
    box-shadow: 0 0 12px 1px rgba(255, 210, 90, 0.6), inset 0 0 16px rgba(255, 190, 60, 0.7);
}
.stash-dock-grid > [data-charge-active="scale"]::after {
    z-index: 2;
    background: linear-gradient(115deg, transparent 40%, rgba(255, 250, 225, 0.7) 50%, transparent 60%) no-repeat;
    background-size: 260% 100%;
    animation: charge-gleam 3.2s ease-in-out infinite;
}
.stash-dock-grid > [data-charge-active="slag"]::before {
    inset: 0;
    border-radius: 6px;
    background: radial-gradient(ellipse 95% 75% at 50% 100%, rgba(255, 90, 24, 0.8), rgba(255, 90, 24, 0) 78%);
    box-shadow: 0 0 12px 1px rgba(255, 100, 30, 0.6), inset 0 0 16px rgba(255, 96, 28, 0.75);
    animation: charge-smoulder 2.6s ease-in-out infinite;
}
@keyframes charge-gleam {
    0% { background-position: 110% 0; }
    40%, 100% { background-position: -10% 0; }
}
@keyframes charge-smoulder {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .stash-dock-grid > [data-charge-active]::before,
    .stash-dock-grid > [data-charge-active]::after {
        animation: none;
    }
}
.stash-dock-grid [data-lock-badge] {
    top: -6px;
    right: -5px;
    width: 18px;
    height: 18px;
    font-size: 9px;
}
@media (min-width: 768px) {
    .stash-dock-panel.is-pinned {
        height: calc(100dvh - var(--player-footer-wing-height) - var(--stash-pin-top, 76px));
        max-height: none;
    }
    /* Grid hugs its rows so the Entropic Pulse box can centre in the space left below. */
    .stash-dock-panel.is-pinned .stash-dock-grid {
        flex: 0 1 auto;
    }
}
@media (max-width: 1100px) and (min-width: 768px) {
    .dom-dock-loadout > * {
        width: 64px !important;
        height: 92px !important;
    }
    .stash-dock-panel {
        --stash-tile-w: 64px;
        --stash-tile-h: 92px;
    }
    .dom-dock-loadout > .bg-bgSlotFilled,
    .stash-dock-grid > .bg-bgSlotFilled {
        padding: 22px 5px 5px !important;
    }
    .dom-dock-loadout .tile-origin-badge,
    .stash-dock-grid .tile-origin-badge {
        top: 7px !important;
        left: 7px !important;
    }
    .dom-dock-loadout .tile-tier-row,
    .stash-dock-grid .tile-tier-row {
        top: 7px;
        padding-left: 7px;
        padding-right: 7px;
    }
    .dom-dock-loadout img:not(.dom-dock-pixel-frame):not(.ui-glyph-badge):not(.tile-origin-icon),
    .stash-dock-grid img:not(.dom-dock-pixel-frame):not(.ui-glyph-badge):not(.tile-origin-icon) {
        width: 32px !important;
        height: 32px !important;
    }
    .dom-dock-loadout .weapon-glow-wrap,
    .dom-dock-loadout .tile-weapon-art,
    .stash-dock-grid .weapon-glow-wrap,
    .stash-dock-grid .tile-weapon-art {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px;
    }
    .tile-tier-letter {
        font-size: 14px;
    }
    .dom-dock-summary {
        height: 92px;
    }
}
@media (max-width: 767px) {
    .dom-dock-loadout > * {
        width: 64px !important;
        height: 92px !important;
    }
    .dom-dock-loadout > .bg-bgSlotFilled,
    .stash-dock-grid > .bg-bgSlotFilled {
        padding: 22px 5px 5px !important;
    }
    .dom-dock-loadout .tile-origin-badge,
    .stash-dock-grid .tile-origin-badge {
        top: 7px !important;
        left: 7px !important;
    }
    .dom-dock-loadout .tile-tier-row,
    .stash-dock-grid .tile-tier-row {
        top: 7px;
        padding-left: 7px;
        padding-right: 7px;
    }
    .dom-dock-loadout img:not(.dom-dock-pixel-frame):not(.ui-glyph-badge):not(.tile-origin-icon),
    .stash-dock-grid img:not(.dom-dock-pixel-frame):not(.ui-glyph-badge):not(.tile-origin-icon) {
        width: 32px !important;
        height: 32px !important;
    }
    .dom-dock-loadout .weapon-glow-wrap,
    .dom-dock-loadout .tile-weapon-art,
    .stash-dock-grid .weapon-glow-wrap,
    .stash-dock-grid .tile-weapon-art {
        width: 32px !important;
        height: 32px !important;
        flex-basis: 32px;
    }
    .tile-tier-letter {
        font-size: 14px;
    }
    .dom-dock-stash img {
        width: 28px;
        height: 28px;
    }
    .dom-dock-summary {
        justify-self: stretch;
        width: 100%;
        min-width: 0;
        height: 92px;
        padding: 8px 0;
        font-size: 8px;
        gap: 4px;
    }
    .dom-dock-summary-title {
        font-size: 9px;
    }
    .dom-dock-summary-pill {
        gap: 4px;
        padding: 0.22rem 0.35rem;
    }
    .dom-dock-summary-weight-icon,
    .dom-dock-summary-power-icon {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }
    .dom-dock-summary strong {
        font-size: 10px;
    }
    /* Mobile: horizontal marquee strip resting on top of the player footer. */
    .stash-dock-panel {
        --stash-tile-w: 64px;
        --stash-tile-h: 80px;
        left: 0;
        right: 0;
        bottom: 100%;
        width: auto;
        max-height: none;
        padding: 9px 8px 6px;
        opacity: 0;
        transform: translateY(14px);
        transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s linear 0.26s;
    }
    .stash-dock-panel.active {
        opacity: 1;
        transform: translateY(0);
        transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease, visibility 0s;
    }
    .player-footer.is-collapsed .stash-dock-panel::before {
        inset: var(--stash-px);
    }
    .stash-dock-grid::-webkit-scrollbar {
        display: none;
    }
    .stash-dock-modal-header {
        flex-wrap: nowrap;
        gap: 6px;
        padding: 0 2px 6px;
    }
    .stash-dock-modal-icon {
        width: 16px;
        height: 16px;
    }
    .stash-dock-modal-header h2 {
        font-size: 16px;
    }
    .stash-dock-modal-count {
        padding: 2px 6px;
        font-size: 10px;
    }
    .stash-dock-salvage {
        padding: 5px 7px;
        font-size: 10px;
    }
    .stash-dock-grid {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 6px;
        padding: 9px 12px 4px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent);
    }
    .stash-dock-grid > * {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }
    .stash-dock-grid .tile-item-label {
        display: none;
    }
}
[data-stash-panel].is-collapsed {
    display: none;
}
#stash-expand-dimmer {
    position: fixed;
    inset: 0;
    z-index: 95;
    background: rgba(0, 0, 0, 0.45);
}
@media (max-width: 767px) {
    body.stash-dom-expanded [data-stash-dock] {
        position: relative;
        z-index: 96;
    }
}
@media (min-width: 768px) {
    #stash-expand-dimmer {
        display: none !important;
    }
}

body.home-dom-overlay #dom-well #tab-home.main-tab-content {
    pointer-events: auto !important;
}
body.home-dom-overlay #dom-well #tab-home.main-tab-content.active > :not([id*="footer"]) {
    visibility: visible !important;
    pointer-events: auto !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
}


body.is-dragging,
html.is-dragging {
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: grabbing;
    touch-action: none;
    overscroll-behavior: none;
}
body.is-dragging .slot-tooltip,
body.is-dragging .info-tooltip { display: none !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.stash-slot-landed {
    animation: stash-slot-landed 0.6s ease-out;
}
@keyframes stash-slot-landed {
    0% { filter: brightness(2) drop-shadow(0 0 10px var(--rarity-color, #ffd966)); }
    100% { filter: brightness(1) drop-shadow(0 0 0 transparent); }
}
/* Touch hold-to-drag: rarity fill rises while held, then flashes when pickup unlocks. */
.slot-hold-ring {
    position: absolute;
    inset: 0;
    z-index: 30;
    border-radius: 3px;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    box-shadow: inset 0 0 0 2px var(--rarity-color, #ffd966);
    animation: slot-hold-ring-in 0.12s ease-out forwards;
}
.slot-hold-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        color-mix(in srgb, var(--rarity-color, #ffd966) 55%, transparent),
        color-mix(in srgb, var(--rarity-color, #ffd966) 12%, transparent));
    transform-origin: 50% 100%;
    transform: scaleY(0);
    animation: slot-hold-fill var(--hold-ms, 210ms) linear forwards;
}
.slot-hold-ring.is-armed {
    opacity: 1;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 12px var(--rarity-color, #ffd966);
    animation: slot-hold-armed 0.45s ease-out forwards;
}
.slot-hold-ring.is-armed::before {
    transform: scaleY(1);
    animation: slot-hold-flash 0.45s ease-out forwards;
}
.slot-drag-armed > :not(.slot-hold-ring) {
    opacity: 0.35;
    transition: opacity 0.15s ease-out;
}
@keyframes slot-hold-ring-in {
    to { opacity: 1; }
}
@keyframes slot-hold-fill {
    to { transform: scaleY(1); }
}
@keyframes slot-hold-flash {
    0% { opacity: 1; filter: brightness(1.9); }
    100% { opacity: 0.3; filter: brightness(1); }
}
@keyframes slot-hold-armed {
    0% { box-shadow: inset 0 0 0 3px #fff, inset 0 0 22px var(--rarity-color, #ffd966); }
    100% { box-shadow: inset 0 0 0 2px var(--rarity-color, #ffd966), inset 0 0 8px var(--rarity-color, #ffd966); }
}
@media (prefers-reduced-motion: reduce) {
    .slot-hold-ring,
    .slot-hold-ring::before,
    .slot-hold-ring.is-armed,
    .slot-hold-ring.is-armed::before {
        animation: none;
        opacity: 1;
    }
    .slot-hold-ring::before {
        transform: scaleY(1);
    }
}
/* Mobile: brief edge tab pointing toward a stash slot scrolled out of view. */
.stash-side-toast {
    position: fixed;
    z-index: 20003;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 8px;
    background: #18181c;
    border: 3px solid var(--color-accentGold, #ffd966);
    box-shadow: 0 0 12px rgba(255, 217, 102, 0.45), 0 4px 12px rgba(0, 0, 0, 0.65);
    cursor: var(--cursor-hand);
    visibility: hidden;
}
.stash-side-toast.is-left {
    left: 0;
    border-left: 0;
    border-radius: 0 8px 8px 0;
}
.stash-side-toast.is-right {
    right: 0;
    border-right: 0;
    border-radius: 8px 0 0 8px;
}
.stash-side-toast img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.stash-side-toast-arrow {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    animation: stash-side-toast-nudge 0.5s ease-in-out infinite alternate;
}
.stash-side-toast.is-right .stash-side-toast-arrow {
    border-left: 7px solid var(--color-accentGold, #ffd966);
    --nudge: 3px;
}
.stash-side-toast.is-left .stash-side-toast-arrow {
    border-right: 7px solid var(--color-accentGold, #ffd966);
    --nudge: -3px;
}
@keyframes stash-side-toast-nudge {
    to { transform: translateX(var(--nudge)); }
}
@media (prefers-reduced-motion: reduce) {
    .stash-side-toast {
        visibility: visible;
        transform: translateY(-50%);
    }
    .stash-side-toast-arrow {
        animation: none;
    }
}
/* Desktop, stash closed: tab rises from behind the right wing above the stash
   icon (z -1 under the footer silhouette, like the stash panel). */
.stash-icon-toast {
    position: absolute;
    bottom: var(--player-footer-wing-height);
    z-index: -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 8px 5px;
    background: #18181c;
    border: 3px solid var(--color-accentGold, #ffd966);
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 0 12px rgba(255, 217, 102, 0.45);
    cursor: var(--cursor-hand);
    pointer-events: auto;
}
.stash-icon-toast.is-home-nav {
    position: fixed;
    bottom: var(--bottom-nav-total-height);
    z-index: 109;
}
.stash-icon-toast img {
    width: 52px;
    height: 52px;
    object-fit: contain;
    image-rendering: pixelated;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
}
.stash-icon-toast-arrow {
    position: relative;
    left: var(--toast-arrow-x, 0px);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 7px solid var(--color-accentGold, #ffd966);
    animation: stash-icon-toast-nudge 0.5s ease-in-out infinite alternate;
}
@keyframes stash-icon-toast-nudge {
    to { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .stash-icon-toast-arrow {
        animation: none;
    }
}
.slot-drag-ghost {
    position: fixed;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    pointer-events: none;
    z-index: 20000;
    will-change: transform;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}
@media (min-width: 768px) {
    [data-drop-slot] {
        user-select: none;
        -webkit-user-select: none;
        touch-action: none;
    }
}
.slot-tooltip,
.info-tooltip { z-index: 10060; }
/* Above #card-inspection-modal (10120) so card parts explain themselves inside the item modal. */
.card-info-tip {
    --tip-color: #888;
    position: fixed;
    z-index: 10130;
    max-width: 260px;
    padding: 8px 10px;
    box-sizing: border-box;
    background: #111111;
    border: 2px solid var(--tip-color);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.9);
    color: #cccccc;
    font-family: 'MainFont', 'Segoe UI', sans-serif;
    font-size: 12px;
    line-height: 1.4;
    text-align: left;
    pointer-events: none;
}
.card-info-tip[hidden] {
    display: none;
}
.card-info-tip-title {
    color: var(--tip-color);
    font-family: 'HeadingFont', sans-serif;
    font-size: 14px;
    text-shadow: 0 1px 2px #000;
}
.card-info-tip-meta {
    color: #888888;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-top: 1px;
}
.card-info-tip-body {
    margin-top: 4px;
}
[data-card-tip] {
    cursor: help;
}
[data-card-tip]:focus-visible {
    outline: 1px dashed rgba(255, 217, 102, 0.7);
    outline-offset: 2px;
}
#desktop-tip-layer {
    position: fixed;
    z-index: 10060;
    pointer-events: none;
}
#desktop-tip-layer .slot-tooltip,
#desktop-tip-layer .info-tooltip,
.slot-tooltip.is-tip-floating,
.info-tooltip.is-tip-floating {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition: none !important;
}
@media (min-width: 768px) {
    .is-tip-open,
    .is-tip-stack {
        z-index: 20;
        position: relative;
    }
}

/* Shared keyframes used by custom classes (also mirrored in tailwind.config for utilities) */
@keyframes quick-reveal {
    0% { opacity: 0; transform: translateX(-15px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes stat-pulse {
    0%, 100% { transform: scale(1); filter: brightness(1); }
    50% { transform: scale(1.15); filter: brightness(1.5); }
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

/* --- FORGE RARITY ANIMATIONS --- */
@keyframes rare-pulse {
    0% { box-shadow: 0 0 0px var(--rarity-color); border-color: #fff; transform: scale(0.98); }
    50% { box-shadow: 0 0 40px var(--rarity-color); border-color: var(--rarity-color); transform: scale(1.02); }
    100% { box-shadow: var(--rarity-shadow); border-color: var(--rarity-color); transform: scale(1); }
}
@keyframes epic-flashy {
    0% { box-shadow: 0 0 0px var(--rarity-color); transform: translateY(15px) scale(0.95); filter: brightness(2); border-color: #fff; }
    30% { box-shadow: 0 0 50px var(--rarity-color), inset 0 0 20px var(--rarity-color); transform: translateY(-5px) scale(1.04); filter: brightness(1.5); border-color: var(--rarity-color); }
    100% { box-shadow: var(--rarity-shadow); transform: translateY(0) scale(1); filter: brightness(1); border-color: var(--rarity-color); }
}
@keyframes legendary-epicness {
    0% { box-shadow: 0 0 0px var(--rarity-color); transform: scale(0.8) rotate(-3deg); opacity: 0; filter: contrast(1.5); }
    20% { opacity: 1; box-shadow: 0 0 80px var(--rarity-color), inset 0 0 40px #fff; transform: scale(1.1) rotate(2deg); border-color: #fff; }
    50% { box-shadow: 0 0 50px var(--rarity-color); transform: scale(1.05) rotate(-1deg); border-color: var(--rarity-color); }
    100% { box-shadow: var(--rarity-shadow); transform: scale(1) rotate(0deg); filter: contrast(1); border-color: var(--rarity-color); }
}
@keyframes artifact-ominous {
    0% { box-shadow: 0 0 10px var(--rarity-color); transform: scale(0.95); filter: contrast(1.5) saturate(2); border-color: #fff; }
    10% { transform: scale(1.03) translateX(-3px); box-shadow: -15px 0 40px var(--rarity-color); }
    20% { transform: scale(1.03) translateX(3px); box-shadow: 15px 0 40px var(--rarity-color); }
    30% { transform: scale(1.06); box-shadow: 0 0 80px var(--rarity-color), inset 0 0 50px var(--rarity-color); border-color: #fff; }
    100% { box-shadow: var(--rarity-shadow); transform: scale(1); filter: contrast(1) saturate(1); border-color: var(--rarity-color); }
}

.animate-rare-pulse { animation: rare-pulse 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.animate-epic-flashy { animation: epic-flashy 1.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; }
.animate-legendary-epicness { animation: legendary-epicness 1.5s ease-out forwards; }
.animate-artifact-ominous { animation: artifact-ominous 2.2s cubic-bezier(0.36, 0, 0.66, -0.56) forwards; }

/* --- CLASH STRIKE / FADE (named classes - not Tailwind arbitrary values) --- */
#clash-combat-phase .animate-stat-pulse { animation-name: clash-stat-nudge; }
@keyframes clash-stat-nudge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
@keyframes clash-strike-right {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    25% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.35), 0, 0) scale(1.08) rotate(3deg); }
    50% { transform: translate3d(var(--clash-strike-distance, 120px), 0, 0) scale(1.2) rotate(5deg); z-index: 10; }
    75% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.45), 0, 0) scale(1.08) rotate(2deg); }
    100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes clash-strike-left {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    25% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.35), 0, 0) scale(1.08) rotate(-3deg); }
    50% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -1), 0, 0) scale(1.2) rotate(-5deg); z-index: 10; }
    75% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.45), 0, 0) scale(1.08) rotate(-2deg); }
    100% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
}
@keyframes clash-slash-right {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    18% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.22), -4px, 0) rotate(10deg) scale(1.06); }
    35% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.55), -6px, 0) rotate(18deg) scale(1.15); z-index: 10; }
    55% { transform: translate3d(var(--clash-strike-distance, 120px), 0, 0) rotate(-8deg) scale(1.25); z-index: 10; }
    78% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.4), 2px, 0) rotate(-3deg) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
@keyframes clash-slash-left {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    18% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.22), -4px, 0) rotate(-10deg) scale(1.06); }
    35% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.55), -6px, 0) rotate(-18deg) scale(1.15); z-index: 10; }
    55% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -1), 0, 0) rotate(8deg) scale(1.25); z-index: 10; }
    78% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.4), 2px, 0) rotate(3deg) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
}
@keyframes clash-pierce-right {
    0% { transform: translate3d(0, 0, 0) scaleX(1) scaleY(1); }
    22% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.28), 0, 0) scaleX(1.12) scaleY(0.97); }
    45% { transform: translate3d(var(--clash-strike-distance, 120px), 0, 0) scaleX(1.35) scaleY(0.92); z-index: 10; }
    72% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.4), 0, 0) scaleX(1.1) scaleY(0.98); }
    100% { transform: translate3d(0, 0, 0) scaleX(1) scaleY(1); }
}
@keyframes clash-pierce-left {
    0% { transform: translate3d(0, 0, 0) scaleX(1) scaleY(1); }
    22% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.28), 0, 0) scaleX(1.12) scaleY(0.97); }
    45% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -1), 0, 0) scaleX(1.35) scaleY(0.92); z-index: 10; }
    72% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.4), 0, 0) scaleX(1.1) scaleY(0.98); }
    100% { transform: translate3d(0, 0, 0) scaleX(1) scaleY(1); }
}
@keyframes clash-smash-right {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    16% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.12), -10px, 0) scale(1.02); }
    30% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.35), -18px, 0) scale(1.05); z-index: 10; }
    55% { transform: translate3d(var(--clash-strike-distance, 120px), 14px, 0) scale(1.28); z-index: 10; }
    78% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * 0.35), 6px, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes clash-smash-left {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    16% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.12), -10px, 0) scale(1.02); }
    30% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.35), -18px, 0) scale(1.05); z-index: 10; }
    55% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -1), 14px, 0) scale(1.28); z-index: 10; }
    78% { transform: translate3d(calc(var(--clash-strike-distance, 120px) * -0.35), 6px, 0) scale(1.08); }
    100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes clash-fade-out {
    0% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    100% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.5) rotate(15deg); }
}

.animate-clash-strike-right { animation: clash-strike-right var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-strike-left { animation: clash-strike-left var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-slash-right { animation: clash-slash-right var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-slash-left { animation: clash-slash-left var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-pierce-right { animation: clash-pierce-right var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-pierce-left { animation: clash-pierce-left var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-smash-right { animation: clash-smash-right var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-smash-left { animation: clash-smash-left var(--clash-strike-duration, 0.5s) ease-in-out; }
.animate-clash-fade-out { animation: clash-fade-out 0.5s forwards; }
.animate-float-temp { animation: float 2s ease-in-out infinite; }

/* Guided onboarding coachmarks */
#onboard-root { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.onboard-scrim {
    /* Visual dim only; clicks pass through so targets inside isolated stacking contexts stay usable. */
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55);
    pointer-events: none; opacity: 0; transition: opacity 0.2s ease;
}
.onboard-scrim.is-on { opacity: 1; }
/* Hole, card and tab ring are pinned at the origin and moved / faded by GSAP (core/tour-motion.js). */
#onboard-hole {
    --onboard-dim: 0.55;
    --onboard-hole-border: 1;
    --onboard-glow: 0.45;
    --onboard-glow-size: 22px;
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 121;
    border: 2px solid rgba(255, 217, 102, var(--onboard-hole-border)); border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, var(--onboard-dim)),
        0 0 var(--onboard-glow-size) rgba(255, 217, 102, calc(var(--onboard-glow) * var(--onboard-hole-border)));
    opacity: 0; visibility: hidden; will-change: transform;
}
#onboard-probe { position: fixed; top: 0; left: -9999px; width: 0; visibility: hidden; pointer-events: none; }
.onboard-tooltip {
    position: fixed; top: 0; left: 0; z-index: 123; pointer-events: auto;
    max-width: min(340px, calc(100vw - 24px));
    background: #1f1f1f; border: 1px solid rgba(255, 217, 102, 0.45);
    border-radius: 12px; padding: 14px 16px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.65), 0 0 18px rgba(255, 217, 102, 0.12);
    opacity: 0; visibility: hidden; will-change: transform;
}
.onboard-progress {
    font-family: 'MainFont', sans-serif; color: #888;
    font-size: 0.75rem; letter-spacing: 0.02em; margin: 0 0 4px;
}
.onboard-title {
    font-family: 'HeadingFont', sans-serif; color: #ffd966;
    font-size: 1.1rem; margin: 0 0 6px;
}
.onboard-scroll-target {
    scroll-margin-top: 24px;
    scroll-margin-bottom: calc(var(--bottom-nav-total-height, 64px) + 96px);
}
/* Clash hand sits above the clash activity footer + bottom nav. */
#clash-player-hand.onboard-scroll-target {
    scroll-margin-bottom: calc(var(--bottom-nav-total-height, 64px) + 140px);
}
.onboard-elevated {
    position: relative !important;
    z-index: 122 !important;
    pointer-events: auto;
    box-shadow: 0 0 0 2px #ffd966, 0 0 22px rgba(255, 217, 102, 0.55) !important;
    border-radius: 14px;
}
.onboard-body {
    font-family: 'MainFont', sans-serif; color: #ccc;
    font-size: 0.9rem; line-height: 1.45; margin: 0 0 10px;
}
.onboard-cue {
    font-family: 'MainFont', sans-serif; color: #ffb8ff;
    font-size: 0.8rem; margin: 0 0 10px;
}
.onboard-actions { display: flex; gap: 10px; align-items: center; }
.onboard-primary {
    flex: 1;
    font-family: 'HeadingFont', sans-serif; font-weight: 700;
    padding: 0.55rem 0.85rem; font-size: 0.9rem;
}
.onboard-primary.is-waiting {
    opacity: 0.55; cursor: var(--cursor-arrow);
}
.onboard-skip {
    appearance: none; background: transparent; border: none;
    color: #888; font-family: 'MainFont', sans-serif; font-size: 0.85rem;
    cursor: var(--cursor-hand); text-decoration: underline; padding: 0.4rem 0.2rem;
}
.onboard-skip:hover { color: #ccc; }
.onboard-target-live {
    outline: 2px solid #ffd966 !important;
    box-shadow: 0 0 18px rgba(255, 217, 102, 0.55) !important;
}
/* New player tour: practice widgets, tour-owned tap targets, gain floats */
.onboard-demo { margin: 0 0 10px; }
#guide-hit {
    position: fixed; top: 0; left: 0; z-index: 122; pointer-events: auto; will-change: transform;
    appearance: none; background: transparent; border: 2px dashed rgba(255, 217, 102, 0.85);
    border-radius: 14px; cursor: var(--cursor-hand); padding: 0;
    animation: guide-hit-pulse 1.4s ease-in-out infinite;
}
#guide-hit[hidden] { display: none; }
#guide-hit:focus-visible { outline: 2px solid #fff3b0; outline-offset: 3px; }
@keyframes guide-hit-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 217, 102, 0.55), inset 0 0 18px rgba(255, 217, 102, 0.12); }
    50% { box-shadow: 0 0 0 12px rgba(255, 217, 102, 0), inset 0 0 28px rgba(255, 217, 102, 0.28); }
}
.guide-float {
    position: fixed; z-index: 124; pointer-events: none;
    translate: -50% 0; white-space: nowrap;
    color: #ffb8ff; font-size: 1.15rem;
    text-shadow: 0 0 10px rgba(163, 53, 238, 0.9), 0 2px 3px rgba(0, 0, 0, 0.8);
}
.guide-float.is-gold {
    color: #ffe28a;
    text-shadow: 0 0 10px rgba(255, 217, 102, 0.85), 0 2px 3px rgba(0, 0, 0, 0.8);
}
/* Practice Clash arena: lives in the overlay, so the body-level callout / finisher layers ride above it. */
#guide-arena {
    position: fixed; z-index: 122; pointer-events: auto;
    width: min(340px, calc(100vw - 24px));
    transform-origin: 50% 0;
}
.guide-arena-foe .clash-card-icon { transform: scaleX(-1); }
.guide-arena-foe .clash-charge-back,
.guide-arena-foe .clash-charge-front { scale: -1 1; }
html.guide-arena-on .clash-beat-fly,
html.guide-arena-on .clash-beat-burst,
html.guide-arena-on .clash-beat-spark,
html.guide-arena-on .clash-finisher-layer { z-index: 125; }
@media (prefers-reduced-motion: reduce) {
    #guide-hit { animation: none; }
}
/* Overlay-owned ring so the leg tab stays visible without raising the real navbar. */
#onboard-tab-ring {
    --onboard-ring-glow: 0.65;
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 122;
    border: 2px solid #ffd966; border-radius: 10px;
    box-shadow: 0 0 18px rgba(255, 217, 102, var(--onboard-ring-glow));
    opacity: 0; visibility: hidden; will-change: transform;
}
.onboard-tab-live {
    outline: 2px solid #ffd966 !important;
    box-shadow: 0 0 16px rgba(255, 217, 102, 0.65) !important;
    border-radius: 10px;
}

/* Entropic pulse: fill left → right over the tick, then reset */
@keyframes entropic-wallet-flash {
    0% { box-shadow: 0 0 0 rgba(163, 53, 238, 0); }
    40% { box-shadow: 0 0 16px rgba(163, 53, 238, 0.95), inset 0 0 12px rgba(163, 53, 238, 0.45); }
    100% { box-shadow: 0 0 0 rgba(163, 53, 238, 0); }
}
#entropy-display.entropic-wallet-active,
#entropy-display-mobile.entropic-wallet-active {
    border-color: rgba(163, 53, 238, 0.65);
}
#entropy-display.entropic-wallet-flash,
#entropy-display-mobile.entropic-wallet-flash {
    animation: entropic-wallet-flash 0.55s ease-out;
}
.entropic-wallet-track {
    background: transparent;
}
.entropic-wallet-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(163, 53, 238, 0.35), rgba(163, 53, 238, 0.72));
    pointer-events: none;
    will-change: width;
}