/* Game District: item preview art (mini sprites, avatar effects, 3D preview shells).  Carried over from the old portal sheet; the rules only style the generated preview markup. */
.dashboard-pixel-sprite {
    shape-rendering: crispEdges;
}
.dashboard-shop-icon .dashboard-pixel-sprite {
    width: 88% !important;
    height: 88% !important;
}
.dashboard-shop-category-icon .dashboard-pixel-sprite {
    width: 22px !important;
    height: 22px !important;
}
.dashboard-gear-slot-icon .dashboard-pixel-sprite,
.dashboard-inventory-icon .dashboard-pixel-sprite {
    width: 82% !important;
    height: 82% !important;
}
.dashboard-mini-dart {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 42px;
    overflow: hidden;
}
.dashboard-mini-dart svg {
    position: relative;
    z-index: 1;
}
.dashboard-shop-svg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.dashboard-shop-svg--pisk,
.dashboard-shop-svg--social {
    width: 34px;
    height: 34px;
}
.dashboard-shop-svg--table-cosmetic {
    width: 42px;
    height: 42px;
}
.dashboard-shop-svg--category {
    width: 24px;
    height: 24px;
}
.dashboard-shop-svg--slot {
    width: 34px;
    height: 34px;
}
.dashboard-mini-dart.is-animated .dashboard-mini-dart-fx {
    position: absolute;
    inset: 6px 8px;
    border-radius: 999px;
    pointer-events: none;
}
.dashboard-mini-dart--flame.is-animated .dashboard-mini-dart-fx {
    background: radial-gradient(ellipse at 38% 50%, rgba(249, 115, 22, 0.38), transparent 58%);
    animation: dashboardDartPulse 0.9s ease-in-out infinite;
}
.dashboard-mini-dart--sparkle.is-animated .dashboard-mini-dart-fx {
    background:
        radial-gradient(circle at 20% 25%, rgba(255,255,255,0.95) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 58%, rgba(244, 114, 182, 0.78) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 22%, rgba(34, 211, 238, 0.78) 0 2px, transparent 3px);
    animation: dashboardDartSparkle 1.2s linear infinite;
}
.dashboard-mini-dart--cat.is-animated .dashboard-mini-dart-fx {
    border: 1px solid rgba(34, 197, 94, 0.38);
    box-shadow: inset 0 0 12px rgba(34, 197, 94, 0.22), 0 0 14px rgba(34, 197, 94, 0.16);
    animation: dashboardDartPulse 1.7s ease-in-out infinite;
}
.dashboard-mini-dart--comet.is-animated .dashboard-mini-dart-fx {
    background: linear-gradient(90deg, transparent, rgba(34, 211, 238, 0.35), transparent);
    animation: dashboardDartComet 1.4s linear infinite;
}
.dashboard-mini-frame {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 7px 10px;
    border: 2px solid var(--frame-primary, #d2a24b);
    border-left-width: 8px;
    border-radius: 10px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--frame-accent, #f7ead1) 78%, white), color-mix(in srgb, var(--frame-primary, #d2a24b) 16%, white));
    overflow: hidden;
}
.dashboard-owned-icon .dashboard-mini-frame {
    min-height: 30px;
    padding: 4px 6px;
    border-left-width: 5px;
}
.dashboard-mini-frame::after {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed color-mix(in srgb, var(--frame-secondary, #1f5f8b) 55%, transparent);
    border-radius: 6px;
    pointer-events: none;
}
.dashboard-mini-frame > span {
    position: relative;
    z-index: 1;
    color: var(--frame-text, #2f2216) !important;
    font-weight: 900;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-mini-frame.is-animated::before {
    content: "";
    position: absolute;
    inset: -40% auto -40% -30%;
    width: 35%;
    background: rgba(255, 255, 255, 0.36);
    transform: skewX(-18deg);
    animation: dashboardFrameSweep 2.4s linear infinite;
    pointer-events: none;
}
.dashboard-mini-pisk {
    display: grid;
    align-items: center;
    justify-items: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--pisk-accent-preview, #f7ead1) 16%, #fffaf0);
    overflow: hidden;
}
.dashboard-mini-pisk-x,
.dashboard-mini-pisk-o {
    font-family: var(--gp-display);
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
}
.dashboard-mini-pisk-x {
    color: var(--pisk-x-preview, #0b49b6) !important;
    transform: rotate(-5deg);
}
.dashboard-mini-pisk-o {
    color: var(--pisk-o-preview, #b51724) !important;
    transform: rotate(4deg);
}
.dashboard-owned-icon .dashboard-mini-pisk {
    min-height: 30px;
    gap: 2px;
}
.dashboard-owned-icon .dashboard-mini-pisk-x,
.dashboard-owned-icon .dashboard-mini-pisk-o {
    font-size: 0.9rem;
}
.dashboard-mini-pisk.is-animated .dashboard-mini-pisk-x,
.dashboard-mini-pisk.is-animated .dashboard-mini-pisk-o {
    animation: dashboardSocialBounce 1.9s ease-in-out infinite;
}
.dashboard-mini-chat {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border: 1px solid rgba(106, 74, 39, 0.18);
    border-radius: 12px;
    background: rgba(255, 251, 242, 0.82);
}
.dashboard-owned-icon .dashboard-mini-chat {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0;
    min-height: 30px;
    padding: 4px;
}
.dashboard-mini-chat > span {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(47, 104, 151, 0.1);
}
.dashboard-owned-icon .dashboard-mini-chat > span {
    width: 24px;
    height: 24px;
}
.dashboard-owned-icon .dashboard-shop-svg--pisk,
.dashboard-owned-icon .dashboard-shop-svg--social,
.dashboard-owned-icon .dashboard-shop-svg--table-cosmetic {
    width: 24px;
    height: 24px;
}
.dashboard-mini-chat strong {
    color: #2f2216 !important;
    font-size: 0.8rem;
    line-height: 1.2;
}
.dashboard-owned-icon .dashboard-mini-chat strong {
    display: none;
}
.dashboard-mini-chat.is-animated > span {
    animation: dashboardSocialBounce 1.8s ease-in-out infinite;
}
.dashboard-mini-effect {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 251, 242, 0.84);
    border: 1px solid rgba(196, 153, 44, 0.22);
    overflow: hidden;
}
.dashboard-mini-effect > span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: rgba(196, 153, 44, 0.14);
}
.dashboard-mini-effect strong {
    position: relative;
    z-index: 1;
    color: #2f2216 !important;
    font-size: 0.8rem;
    line-height: 1.2;
}
.dashboard-mini-effect i {
    position: absolute;
    inset: 8px 10px 8px 34px;
    border-radius: 999px;
    pointer-events: none;
}
.dashboard-mini-effect--confetti.is-animated i {
    background:
        radial-gradient(circle at 15% 55%, #ef4444 0 2px, transparent 3px),
        radial-gradient(circle at 38% 28%, #22d3ee 0 2px, transparent 3px),
        radial-gradient(circle at 70% 66%, #facc15 0 2px, transparent 3px);
    animation: dashboardEffectDrift 1.1s linear infinite;
}
.dashboard-mini-effect--spark.is-animated i,
.dashboard-mini-effect--starfall.is-animated i {
    background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.38), transparent);
    animation: dashboardDartComet 1.4s linear infinite;
}
.dashboard-mini-effect--flame.is-animated i {
    background: radial-gradient(ellipse at 35% 50%, rgba(249, 115, 22, 0.32), transparent 62%);
    animation: dashboardDartPulse 1s ease-in-out infinite;
}
.dashboard-journal-effect-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dashboard-journal-effect-labels span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    border: 1px solid rgba(106, 74, 39, 0.2);
    border-radius: 7px;
    background: rgba(255, 253, 245, 0.72);
    color: #5a351c;
    font-size: 0.74rem;
    font-weight: 850;
}
.dashboard-journal-effect-stage {
    position: relative;
    display: grid;
    align-content: end;
    min-height: 150px;
    padding: 12px;
    border: 1px solid rgba(106, 74, 39, 0.22);
    border-radius: 10px;
    background:
        linear-gradient(180deg, rgba(35, 20, 12, 0.02), rgba(35, 20, 12, 0.14)),
        #fff4d8;
    overflow: hidden;
}
.dashboard-journal-effect-stage::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 2px dashed rgba(106, 74, 39, 0.18);
    border-radius: 12px;
}
.dashboard-journal-effect-sprite {
    position: absolute;
    display: block;
}
.dashboard-journal-effect-sprite--badge {
    left: 24px;
    top: 26px;
    width: 42px;
    height: 42px;
    border: 3px solid #24140a;
    background: var(--dashboard-rarity-bright, #f0ca55);
    box-shadow: 7px 7px 0 rgba(36, 20, 10, 0.16);
}
.dashboard-journal-effect-sprite--glint {
    right: 42px;
    top: 22px;
    width: 16px;
    height: 16px;
    background: #fff4d6;
    box-shadow: 22px 24px 0 var(--dashboard-rarity-bright, #f0ca55), -16px 44px 0 rgba(255, 244, 214, 0.76);
    animation: dashboardJournalGlint 1.8s steps(3, end) infinite;
}
.dashboard-journal-effect-sprite--trail {
    left: 34px;
    bottom: 48px;
    width: 80px;
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--dashboard-rarity-main, #8a5a24), transparent);
    opacity: 0.72;
    animation: dashboardJournalTrail 2.2s steps(4, end) infinite;
}
.dashboard-journal-effect-sprite--spark {
    right: 78px;
    bottom: 62px;
    width: 9px;
    height: 9px;
    background: var(--dashboard-rarity-main, #8a5a24);
    box-shadow: 14px -20px 0 var(--dashboard-rarity-bright, #f0ca55), 32px 4px 0 #fff4d6, -16px 16px 0 var(--dashboard-rarity-bright, #f0ca55);
    animation: dashboardJournalSpark 1.6s steps(3, end) infinite;
}
.dashboard-journal-effect-labels {
    position: relative;
    z-index: 1;
    align-self: end;
}
.dashboard-mini-frame {
    color: #1b1007 !important;
    -webkit-text-fill-color: #1b1007 !important;
}
.dashboard-game-portal .dashboard-mini-frame {
    color: #1b1007 !important;
    -webkit-text-fill-color: #1b1007 !important;
}
.dashboard-mini-frame {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.dashboard-mini-frame {
    color: #201205 !important;
    -webkit-text-fill-color: #201205 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    justify-content: center !important;
    text-align: center !important;
}
.dashboard-mini-frame {
    min-height: 34px !important;
    height: auto !important;
    max-width: 100% !important;
    padding: 5px 12px !important;
    border-radius: 5px !important;
}
.dashboard-mini-avatar-bg {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    background: #8fc9f4;
}
.dashboard-mini-avatar-bg--night_sky {
    background: #172143;
}
.dashboard-mini-avatar-bg--cozy_apartment {
    background: #d7a45d;
}
.dashboard-mini-avatar-bg--animal_corner {
    background: #a9d985;
}
.dashboard-mini-frame {
    color: #1b1007 !important;
    -webkit-text-fill-color: #1b1007 !important;
}
.dashboard-mini-frame {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 3px solid #2f1d12 !important;
    border-radius: 0 !important;
    background: var(--frame-accent, #f7ead1) !important;
    background-image:
        linear-gradient(90deg, var(--frame-primary, #d2a24b) 0 12px, transparent 12px calc(100% - 12px), var(--frame-primary, #d2a24b) calc(100% - 12px)),
        linear-gradient(180deg, color-mix(in srgb, var(--frame-accent, #f7ead1) 92%, white) 0%, var(--frame-accent, #f7ead1) 100%) !important;
    box-shadow:
        inset 0 0 0 2px color-mix(in srgb, var(--frame-primary, #d2a24b) 72%, #2f1d12),
        4px 4px 0 #4a2915 !important;
    color: var(--frame-text, #2f2216) !important;
    -webkit-text-fill-color: var(--frame-text, #2f2216) !important;
    text-align: center !important;
    text-shadow: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
}
.dashboard-mini-frame {
    min-height: 38px !important;
    padding: 7px 16px !important;
}
.dashboard-mini-frame::before {
    content: "" !important;
    position: absolute !important;
    left: 13px !important;
    right: 13px !important;
    top: 6px !important;
    width: auto !important;
    height: 4px !important;
    border: 0 !important;
    background: var(--frame-secondary, #1f5f8b) !important;
    box-shadow: none !important;
    clip-path: none !important;
    pointer-events: none !important;
    transform: none !important;
    z-index: 0 !important;
}
.dashboard-mini-frame::after {
    content: "" !important;
    position: absolute !important;
    inset: 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(var(--frame-secondary, #1f5f8b), var(--frame-secondary, #1f5f8b)) left top / 7px 7px no-repeat,
        linear-gradient(var(--frame-secondary, #1f5f8b), var(--frame-secondary, #1f5f8b)) right top / 7px 7px no-repeat,
        linear-gradient(var(--frame-secondary, #1f5f8b), var(--frame-secondary, #1f5f8b)) left bottom / 7px 7px no-repeat,
        linear-gradient(var(--frame-secondary, #1f5f8b), var(--frame-secondary, #1f5f8b)) right bottom / 7px 7px no-repeat !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
.dashboard-mini-frame > * {
    position: relative !important;
    z-index: 1 !important;
    display: inline-block !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding: 3px 10px !important;
    border: 2px solid color-mix(in srgb, var(--frame-primary, #d2a24b) 58%, #2f1d12) !important;
    background: color-mix(in srgb, var(--frame-accent, #f7ead1) 88%, white) !important;
    color: var(--frame-text, #2f2216) !important;
    -webkit-text-fill-color: var(--frame-text, #2f2216) !important;
    line-height: 1.08 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    box-shadow: 2px 2px 0 color-mix(in srgb, var(--frame-primary, #d2a24b) 38%, transparent) !important;
}
.dashboard-mini-frame.is-animated::before {
    animation: dashboardPixelFramePulse 1.1s steps(2, end) infinite !important;
}
.dashboard-mini-chat,
.dashboard-mini-effect {
    position: relative !important;
    border: 3px solid #3a2414 !important;
    border-radius: 0 !important;
    background: #fff4d6 !important;
    background-image: none !important;
    box-shadow: 4px 4px 0 #6b4524 !important;
    color: #2f1d12 !important;
    overflow: visible !important;
}
.dashboard-mini-chat::after {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    bottom: -11px !important;
    width: 12px !important;
    height: 8px !important;
    background: #fff4d6 !important;
    border-left: 3px solid #3a2414 !important;
    border-bottom: 3px solid #3a2414 !important;
}
.dashboard-mini-chat > span,
.dashboard-mini-effect > span {
    width: 30px !important;
    height: 30px !important;
    border: 2px solid #3a2414 !important;
    border-radius: 0 !important;
    background: #efd19a !important;
    background-image: none !important;
    box-shadow: inset -4px -4px 0 #d2a24b !important;
}
.dashboard-mini-effect {
    background: #f8e4b5 !important;
}
.dashboard-mini-effect i {
    position: absolute !important;
    right: 14px !important;
    top: 12px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 0 !important;
    background: #facc15 !important;
    background-image: none !important;
    box-shadow:
        -18px 12px 0 #2f6897,
        -32px 3px 0 #b8332f,
        -7px 23px 0 #2f6b4c !important;
    pointer-events: none !important;
}
.dashboard-mini-effect--flame i {
    background: #f97316 !important;
    box-shadow:
        -12px 12px 0 #b8332f,
        -24px 18px 0 #facc15,
        -6px 25px 0 #7f1d1d !important;
}
.dashboard-mini-effect--spark i,
.dashboard-mini-effect--starfall i {
    background: #fff1bd !important;
    box-shadow:
        -12px 8px 0 #facc15,
        -25px 16px 0 #38bdf8,
        -36px 5px 0 #fff1bd !important;
}
.dashboard-shop-preview-art .dashboard-mini-frame,
.dashboard-shop-preview-art .dashboard-mini-chat,
.dashboard-shop-preview-art .dashboard-mini-effect {
    width: 240px !important;
    height: 128px !important;
    max-width: 240px !important;
    max-height: 128px !important;
}
.dashboard-mini-avatar-bg--scene {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: #24140a !important;
    border: 2px solid #3c2411 !important;
    border-radius: 8px !important;
}
.dashboard-mini-avatar-bg--scene svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
.dashboard-shop-icon .dashboard-mini-avatar-bg--scene,
.dashboard-owned-icon .dashboard-mini-avatar-bg--scene,
.dashboard-inventory-icon .dashboard-mini-avatar-bg--scene,
.dashboard-slot-icon .dashboard-mini-avatar-bg--scene {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
}
.dashboard-shop-preview-art .dashboard-mini-avatar-bg--scene {
    width: 240px !important;
    height: 240px !important;
    max-width: 240px !important;
    max-height: 240px !important;
}
.dashboard-shop-icon .dashboard-pixel-sprite {
    width: 94% !important;
    height: 94% !important;
    transform: scale(1.12) !important;
    transform-origin: center !important;
}
.dashboard-gear-slot-icon .dashboard-pixel-sprite,
.dashboard-inventory-icon .dashboard-pixel-sprite,
.dashboard-slot-icon .dashboard-pixel-sprite {
    width: 90% !important;
    height: 90% !important;
    transform: scale(1.08) !important;
    transform-origin: center !important;
}
.dashboard-shop-icon .dashboard-mini-chat,
.dashboard-shop-icon .dashboard-mini-effect {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 116px !important;
    min-height: 66px !important;
    max-width: 116px !important;
    max-height: 88px !important;
    padding: 9px 10px 10px 37px !important;
    overflow: visible !important;
}
.dashboard-shop-icon .dashboard-mini-chat > span,
.dashboard-shop-icon .dashboard-mini-effect > span {
    position: absolute !important;
    left: 9px !important;
    top: 50% !important;
    width: 28px !important;
    height: 28px !important;
    transform: translateY(-50%) !important;
    z-index: 1 !important;
}
.dashboard-shop-icon .dashboard-mini-chat > span .dashboard-shop-svg--social,
.dashboard-shop-icon .dashboard-mini-chat > span svg,
.dashboard-shop-icon .dashboard-mini-effect > span .dashboard-shop-svg--social,
.dashboard-shop-icon .dashboard-mini-effect > span svg {
    width: 23px !important;
    height: 23px !important;
    transform: none !important;
}
.dashboard-shop-icon .dashboard-mini-chat strong,
.dashboard-shop-icon .dashboard-mini-effect strong {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    max-width: 70px !important;
    color: #2f1d12 !important;
    -webkit-text-fill-color: #2f1d12 !important;
    font-size: 0.72rem !important;
    line-height: 1.04 !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
}
.dashboard-shop-icon .dashboard-mini-effect i {
    right: 9px !important;
    top: 9px !important;
}
.dashboard-shop-icon .dashboard-mini-pisk,
.dashboard-shop-icon .dashboard-shop-svg--pisk {
    display: block !important;
    width: 84px !important;
    height: 84px !important;
    max-width: 84px !important;
    max-height: 84px !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.dashboard-shop-icon .dashboard-shop-svg--pisk * {
    opacity: 1 !important;
    visibility: visible !important;
}
.dashboard-wardrobe2-bg .dashboard-mini-avatar-bg,
.dashboard-wardrobe2-bg .dashboard-mini-avatar-bg--scene {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
    border-radius: 0 !important;
}
.dashboard-wardrobe2-bg .dashboard-mini-avatar-bg--scene svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.dashboard-rarity-icon {
    display: inline-grid !important;
    place-items: center !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
}
.retro-human-avatar .retro-avatar-fx {
    pointer-events: none !important;
}
/* each sparkle / mote / fleck runs on its own clock; the --1..--4 phases stagger them so they never pulse in unison */
.retro-human-avatar .retro-avatar-fx__p {
    transform-box: fill-box;
    transform-origin: center;
}
.retro-human-avatar--fx-foil_glint .retro-avatar-fx--glint .retro-avatar-fx__p {
    animation: retroAvatarTwinkle 3.2s ease-in-out infinite !important;
}
.retro-human-avatar--fx-idle_sparkle .retro-avatar-fx--sparkle .retro-avatar-fx__p {
    animation: retroAvatarTwinkle 2.4s ease-in-out infinite !important;
}
.retro-human-avatar--fx-scene_particles .retro-avatar-fx--particles .retro-avatar-fx__p {
    animation: retroAvatarDrift 4.8s ease-in-out infinite !important;
}
.retro-human-avatar--fx-ember_pop .retro-avatar-fx--ember .retro-avatar-fx__p {
    animation: retroAvatarEmber 2.2s ease-out infinite !important;
}
.retro-human-avatar--fx-signature_aura .retro-avatar-fx--aura {
    animation: retroAvatarAura 3.6s ease-in-out infinite !important;
}
.retro-human-avatar .retro-avatar-fx__p--2 { animation-delay: -0.8s !important; }
.retro-human-avatar .retro-avatar-fx__p--3 { animation-delay: -1.6s !important; }
.retro-human-avatar .retro-avatar-fx__p--4 { animation-delay: -2.4s !important; }
.retro-human-avatar--fx-idle_sparkle-2 .retro-avatar-fx--sparkle .retro-avatar-fx__p {
    animation-duration: 1.9s !important;
}
.retro-human-avatar--fx-scene_particles-2 .retro-avatar-fx--particles .retro-avatar-fx__p {
    animation-duration: 3.8s !important;
}
.retro-human-avatar--fx-signature_aura-2 .retro-avatar-fx--aura {
    animation-duration: 2.8s !important;
}
/* reduced motion: the effects stay, still (each shape's own opacity), with no twinkle, drift or pulse */
@media (prefers-reduced-motion: reduce) {
    .retro-human-avatar .retro-avatar-fx,
    .retro-human-avatar .retro-avatar-fx .retro-avatar-fx__p {
        animation: none !important;
    }
}
/* the hub does not load game-portal.css, so the effect keyframes live here too (without them the overlays sat at full
   opacity, solid and still); game pages get the same rules from assets/identity/identity.css (scoped off the hub),
   keep them and game-portal.css in step */
@keyframes retroAvatarTwinkle {
    0%, 100% { opacity: 0.35; transform: scale(0.72); }
    45% { opacity: 1; transform: scale(1.08); }
    60% { opacity: 0.9; transform: scale(1); }
}
@keyframes retroAvatarDrift {
    0% { opacity: 0; transform: translate(0, 1px); }
    25% { opacity: 0.9; }
    75% { opacity: 0.7; }
    100% { opacity: 0; transform: translate(0.8px, -2.4px); }
}
@keyframes retroAvatarEmber {
    0% { opacity: 0; transform: translate(0, 1.2px) scale(0.85); }
    20% { opacity: 1; }
    100% { opacity: 0; transform: translate(0.6px, -3.2px) scale(0.5); }
}
@keyframes retroAvatarAura {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
.dashboard-three-cosmetic-preview {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: 132px;
    overflow: hidden;
    border: 2px solid var(--dashboard-rarity-line, #8b6a42);
    border-radius: 7px;
    background: #26352e;
    box-shadow: inset 0 0 0 2px rgba(255, 247, 218, 0.1);
}
.dashboard-three-cosmetic-preview::after {
    content: "3D MODEL";
    position: absolute;
    right: 7px;
    bottom: 5px;
    color: #f9e8b9;
    font: 700 8px/1 var(--retro-font-pixel, monospace);
    letter-spacing: 0.08em;
    opacity: 0.72;
}
.dashboard-three-cosmetic-canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}
.dashboard-three-cosmetic-loading {
    color: #f9e8b9;
    font: 700 9px/1.3 var(--retro-font-pixel, monospace);
    letter-spacing: 0.04em;
}
.dashboard-three-cosmetic-preview.is-ready .dashboard-three-cosmetic-loading {
    display: none;
}