/* Shared premium profile + coin HUD for Main Menu, Story, Party and Store. */
.game-profile-card.profile-card-v3,
.game-profile-card.game-profile-card-user.profile-card-v3 {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    height: 48px !important;
    max-width: min(55%, 340px) !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    border-radius: 2rem !important;
    overflow: visible !important;
    cursor: pointer !important;
    color: #fff !important;
    text-decoration: none !important;
    z-index: 20 !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.1), inset 0 -2px 5px rgba(0,0,0,0.5) !important;
    border: 1px solid rgba(139, 92, 246, 0.3) !important;
    border-top-color: rgba(168, 85, 247, 0.5) !important;
    border-bottom-color: rgba(139, 92, 246, 0.3) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.game-profile-card.profile-card-v3::before,
.game-profile-card.profile-card-v3::after,
.game-profile-card.game-profile-card-user.profile-card-v3::before,
.game-profile-card.game-profile-card-user.profile-card-v3::after {
    display: none !important;
    content: none !important;
}

.game-profile-card.profile-card-v3:hover,
.game-profile-card.profile-card-v3:focus-visible,
.game-profile-card.game-profile-card-user.profile-card-v3:hover,
.game-profile-card.game-profile-card-user.profile-card-v3:focus-visible {
    border-color: rgba(168, 85, 247, 0.7) !important;
    box-shadow: 0 15px 40px rgba(124, 58, 237, 0.3), inset 0 1px 1px rgba(255,255,255,0.2) !important;
    transform: translateY(-1px) translateZ(0) !important;
}

.premium-avatar-box {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    flex: 0 0 48px !important;
    z-index: 30 !important;
}

.premium-avatar-box .profile-frame-ring {
    z-index: 0 !important;
}

.avatar-border-anim {
    position: absolute !important;
    inset: 0 !important;
    border-radius: 9999px !important;
    opacity: 0.8 !important;
    background: conic-gradient(from 0deg, transparent 0%, transparent 50%, #c084fc 80%, #e879f9 100%) !important;
    animation: profileHudSpin 3s linear infinite !important;
    filter: drop-shadow(0 0 8px rgba(192, 132, 252, 0.6)) !important;
    transition: opacity 0.25s ease !important;
    z-index: 1 !important;
}

.profile-card-v3:hover .avatar-border-anim,
.profile-card-v3:focus-visible .avatar-border-anim { opacity: 1 !important; }

.premium-avatar-bg {
    position: absolute !important;
    inset: 3px !important;
    border-radius: 9999px !important;
    background: #0f172a !important;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.8) !important;
    z-index: 2 !important;
}

.premium-avatar-img {
    position: absolute !important;
    inset: 4px !important;
    width: calc(100% - 8px) !important;
    height: calc(100% - 8px) !important;
    border-radius: 9999px !important;
    object-fit: cover !important;
    display: block !important;
    z-index: 3 !important;
}

.level-shield {
    position: absolute !important;
    bottom: -6px !important;
    left: 50% !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 28px !important;
    height: 18px !important;
    padding: 0 6px !important;
    border-radius: 9999px !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(180deg, #334155 0%, #0f172a 100%) !important;
    border: 2px solid #a855f7 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.2) !important;
}

.level-shield span {
    color: #fff !important;
    font-size: 10px !important;
    line-height: 1 !important;
    font-weight: 950 !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.72) !important;
    transform: none !important;
    margin: 0 !important;
}

.premium-profile-info {
    position: relative !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-width: 0 !important;
    padding-left: clamp(24px, 7vw, 34px) !important;
    padding-right: 5px !important;
    overflow: hidden !important;
}

.premium-profile-topline {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 3px !important;
    min-width: 0 !important;
}

.premium-profile-name {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.75) !important;
    transition: color 0.25s ease !important;
}

.profile-card-v3:hover .premium-profile-name,
.profile-card-v3:focus-visible .premium-profile-name { color: #ddd6fe !important; }

.vip-badge.premium-profile-badge,
.profile-card-v3 .premium-profile-badge,
.profile-card-v3 .profile-badge {
    position: relative !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    max-width: 76px !important;
    overflow: hidden !important;
    padding: 2px 6px 1px !important;
    border-radius: 0.25rem !important;
    color: #451a03 !important;
    background: linear-gradient(135deg, #fef08a 0%, #f59e0b 50%, #b45309 100%) !important;
    border: 1px solid #fde68a !important;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.5), inset 0 1px 1px rgba(255,255,255,0.8) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4) !important;
    font-size: 8px !important;
    font-weight: 950 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.premium-badge-shimmer {
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.50), transparent) !important;
    transform: translateX(100%) !important;
    pointer-events: none !important;
}

.profile-card-v3:hover .premium-badge-shimmer,
.profile-card-v3:focus-visible .premium-badge-shimmer { animation: profileHudBadgeShimmer 1.5s infinite !important; }

.premium-xp-track {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 6px !important;
    overflow: hidden !important;
    border-radius: 9999px !important;
    background: rgba(2, 6, 23, 0.80) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8) !important;
}

.premium-xp-bar {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 9999px !important;
    overflow: hidden !important;
    background: linear-gradient(to left, #8b5cf6, #d946ef, #ec4899) !important;
    height: auto !important;
    inset-inline-start: auto !important;
}

.premium-xp-bar::after,
.glossy-bar::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent) !important;
    transform: skewX(-20deg) translate3d(-150%, 0, 0) !important;
    animation: profileHudShimmerBar 3s infinite !important;
    pointer-events: none !important;
}

.xp-glow-tip {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 8px !important;
    border-radius: 9999px !important;
    background: rgba(255,255,255,0.60) !important;
    filter: blur(1px) !important;
    box-shadow: -2px 0 10px 3px rgba(244, 114, 182, 0.8), -1px 0 4px 1px #fff !important;
}

.premium-xp-meta {
    display: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-top: 3px !important;
    color: rgba(221, 214, 254, 0.80) !important;
    font-size: 8px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    letter-spacing: 0.05em !important;
    direction: ltr !important;
}

.premium-xp-meta span:first-child { color: rgba(221, 214, 254, 0.60) !important; }

.profile-card-v3 .profile-role-ribbon-container {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    overflow: hidden !important;
    border-radius: 2rem !important;
    pointer-events: none !important;
}

.profile-card-v3 .corner-ribbon {
    position: absolute !important;
    top: 9px !important;
    left: -28px !important;
    width: 80px !important;
    display: block !important;
    overflow: hidden !important;
    padding: 1px 0 0 !important;
    transform: rotate(-45deg) !important;
    text-align: center !important;
    color: #fff !important;
    font-family: Lalezar, Vazirmatn, Tahoma, sans-serif !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.82) !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.50), inset 0 1px 1px rgba(255,255,255,0.40) !important;
}

.profile-card-v3 .corner-ribbon-label {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    white-space: nowrap !important;
}

.profile-card-v3 .ribbon-shimmer {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.50), transparent) !important;
    transform: translateX(-100%) !important;
    pointer-events: none !important;
}

.profile-card-v3:hover .ribbon-shimmer,
.profile-card-v3:focus-visible .ribbon-shimmer { animation: profileHudRibbonShimmer 1.5s infinite !important; }

.profile-card-v3 .ribbon-normal { background: linear-gradient(135deg, #94a3b8 0%, #475569 100%) !important; border-top: 1px solid #cbd5e1 !important; border-bottom: 1px solid #334155 !important; }
.profile-card-v3 .ribbon-vip { background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 50%, #b45309 100%) !important; border-top: 1px solid #fef08a !important; border-bottom: 1px solid #78350f !important; }
.profile-card-v3 .ribbon-admin { background: linear-gradient(135deg, #f87171 0%, #dc2626 50%, #7f1d1d 100%) !important; border-top: 1px solid #fca5a5 !important; border-bottom: 1px solid #450a0a !important; }
.profile-card-v3 .ribbon-helper { background: linear-gradient(135deg, #34d399 0%, #059669 50%, #064e3b 100%) !important; border-top: 1px solid #6ee7b7 !important; border-bottom: 1px solid #022c22 !important; }

.profile-card-v3[data-profile-ribbon="normal"] { border-color: rgba(148, 163, 184, 0.36) !important; }
.profile-card-v3[data-profile-ribbon="vip"] { border-color: rgba(245, 158, 11, 0.56) !important; box-shadow: 0 12px 34px rgba(245, 158, 11, 0.14), 0 10px 30px rgba(0,0,0,0.58), inset 0 1px 1px rgba(255,255,255,0.12), inset 0 -2px 5px rgba(0,0,0,0.48) !important; }
.profile-card-v3[data-profile-ribbon="admin"] { border-color: rgba(248, 113, 113, 0.56) !important; box-shadow: 0 12px 34px rgba(220, 38, 38, 0.14), 0 10px 30px rgba(0,0,0,0.58), inset 0 1px 1px rgba(255,255,255,0.12), inset 0 -2px 5px rgba(0,0,0,0.48) !important; }
.profile-card-v3[data-profile-ribbon="helper"] { border-color: rgba(52, 211, 153, 0.52) !important; box-shadow: 0 12px 34px rgba(5, 150, 105, 0.13), 0 10px 30px rgba(0,0,0,0.58), inset 0 1px 1px rgba(255,255,255,0.12), inset 0 -2px 5px rgba(0,0,0,0.48) !important; }

.game-resource-coin {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    width: auto !important;
    max-width: 166px !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: rgba(2, 6, 23, 0.90) !important;
    border: 1px solid rgba(180, 83, 9, 0.45) !important;
    box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.88), 0 4px 15px rgba(0, 0, 0, 0.5) !important;
    transition: border-color 0.25s ease, transform 0.25s ease, filter .25s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    overflow: visible !important;
}

.game-resource-coin:hover,
.game-resource-coin:focus-visible { border-color: rgba(245, 158, 11, 0.82) !important; transform: translateY(-1px) !important; }

.coin-icon {
    position: relative !important;
    z-index: 1 !important;
    width: 56px !important;
    height: 56px !important;
    flex: 0 0 56px !important;
    display: grid !important;
    place-items: center !important;
    margin-right: -12px !important;
    filter: drop-shadow(0 4px 8px rgba(245, 158, 11, 0.6)) !important;
    transition: transform 0.25s ease !important;
}

.game-resource-coin:hover .coin-icon { transform: scale(1.08) rotate(6deg) !important; }

.coin-icon::before {
    content: '' !important;
    position: absolute !important;
    inset: 10px !important;
    border-radius: 999px !important;
    background: rgba(245, 158, 11, 0.38) !important;
    filter: blur(10px) !important;
    animation: profileHudSubtlePulse 1.8s infinite alternate ease-in-out !important;
}

.coin-icon svg { position: relative !important; z-index: 1 !important; width: 100% !important; height: 100% !important; display: block !important; }

.coin-value {
    display: block !important;
    min-width: 54px !important;
    padding: 3px 6px 0 !important;
    color: #fde68a !important;
    font-family: Lalezar, Vazirmatn, Tahoma, sans-serif !important;
    font-size: 20px !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    text-align: center !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8) !important;
    white-space: nowrap !important;
}

.coin-plus {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(180deg, #fbbf24, #ea580c) !important;
    border: 1px solid rgba(254, 240, 138, 0.58) !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4) !important;
}

.coin-plus svg { width: 18px !important; height: 18px !important; fill: currentColor !important; }

@keyframes profileHudSpin { to { transform: rotate(360deg); } }
@keyframes profileHudBadgeShimmer { 100% { transform: translateX(-100%); } }
@keyframes profileHudRibbonShimmer { 100% { transform: translateX(100%); } }
@keyframes profileHudShimmerBar { 100% { transform: skewX(-20deg) translate3d(150%, 0, 0); } }
@keyframes profileHudSubtlePulse { to { opacity: .72; transform: scale(1.04); } }

@media (min-width: 640px) {
    .premium-xp-meta { display: flex !important; }
}

@media (min-width: 768px) {
    .game-profile-card.profile-card-v3,
    .game-profile-card.game-profile-card-user.profile-card-v3 { height: 56px !important; max-width: min(55%, 340px) !important; padding-left: 8px !important; padding-right: 4px !important; }
    .premium-avatar-box { width: 60px !important; height: 60px !important; flex-basis: 60px !important; }
    .premium-avatar-bg { inset: 4px !important; }
    .premium-avatar-img { inset: 5px !important; width: calc(100% - 10px) !important; height: calc(100% - 10px) !important; }
    .level-shield { bottom: -8px !important; min-width: 32px !important; height: 22px !important; }
    .level-shield span { font-size: 12px !important; }
    .premium-profile-info { padding-left: 34px !important; }
    .premium-profile-topline { margin-bottom: 4px !important; }
    .premium-profile-name { font-size: 14px !important; }
    .xp-glow-tip { width: 12px !important; }
    .profile-card-v3 .corner-ribbon { width: 90px !important; font-size: 11px !important; padding-top: 2px !important; }
}

@media (max-width: 420px) {
    .game-profile-card.profile-card-v3,
    .game-profile-card.game-profile-card-user.profile-card-v3 { max-width: 56vw !important; }
    .premium-profile-info { padding-left: 24px !important; }
    .premium-profile-name { font-size: 10px !important; }
    .profile-card-v3 .corner-ribbon { top: 8px !important; left: -30px !important; width: 78px !important; font-size: 9px !important; }
    .coin-icon { width: 48px !important; height: 48px !important; flex-basis: 48px !important; }
    .coin-value { min-width: 46px !important; font-size: 17px !important; }
    .coin-plus { width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
    .game-resource-coin { height: 44px !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .game-profile-card.profile-card-v3,
    .game-profile-card.game-profile-card-user.profile-card-v3 { height: 44px !important; max-width: min(45%, 300px) !important; }
    .premium-avatar-box { width: 46px !important; height: 46px !important; flex-basis: 46px !important; }
    .premium-xp-meta { display: none !important; }
    .game-resource-coin { height: 40px !important; max-width: 140px !important; }
    .coin-icon { width: 44px !important; height: 44px !important; flex-basis: 44px !important; }
    .coin-value { min-width: 42px !important; font-size: 16px !important; }
    .coin-plus { width: 22px !important; height: 22px !important; flex-basis: 22px !important; }
}

html[data-graphics-quality="low"] .profile-card-v3 .ribbon-shimmer,
html[data-graphics-quality="medium"] .profile-card-v3 .ribbon-shimmer,
html[data-graphics-quality="low"] .premium-xp-bar::after,
html[data-graphics-quality="medium"] .premium-xp-bar::after,
html[data-graphics-quality="low"] .coin-icon::before,
html[data-graphics-quality="medium"] .coin-icon::before { animation: none !important; }

html[data-graphics-quality="low"] .avatar-border-anim { display: none !important; }

.stage-hud-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    max-width: min(72vw, 560px);
}

.stage-hud-group .stage-profile-hud {
    max-width: min(46vw, 340px) !important;
}

.stage-hud-group .stage-coin-hud {
    flex: 0 0 auto !important;
}

@media (max-width: 720px) {
    .stage-hud-group { max-width: 100%; gap: 6px; }
    .stage-hud-group .stage-profile-hud { max-width: min(58vw, 280px) !important; }
    .stage-hud-group .stage-coin-hud .coin-plus { display: none !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .stage-hud-group .stage-profile-hud { max-width: min(42vw, 280px) !important; }
}

/* Story fuel resource card - lightweight version inspired by the provided HTML mockup. */
.game-resource-fuel {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    height: 48px !important;
    min-width: 154px !important;
    max-width: 178px !important;
    padding: 5px 2px 5px 10px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    color: #fff7ed !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(251, 191, 36, .22), transparent 30%),
        linear-gradient(135deg, rgba(15, 23, 42, .72), rgba(2, 6, 23, .86)) !important;
    border: 1px solid rgba(245, 158, 11, .46) !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255,255,255,.13) !important;
    overflow: visible !important;
    isolation: isolate !important;
    -webkit-tap-highlight-color: transparent !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease !important;
}
.game-resource-fuel::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: linear-gradient(90deg, rgba(245, 158, 11, .14), transparent 62%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .35s ease !important;
    z-index: -1 !important;
}
.game-resource-fuel:hover,
.game-resource-fuel:focus-visible {
    transform: translateY(-1px) translateZ(0) !important;
    border-color: rgba(251, 191, 36, .72) !important;
    box-shadow: 0 10px 28px rgba(245, 158, 11, .24), 0 8px 22px rgba(0,0,0,.44), inset 0 1px 0 rgba(255,255,255,.16) !important;
    filter: brightness(1.05) !important;
}
.game-resource-fuel:hover::before,
.game-resource-fuel:focus-visible::before { opacity: 1 !important; }
.fuel-shell-glow {
    position: absolute !important;
    inset: 4px !important;
    border-radius: inherit !important;
    border: 1px solid rgba(255, 255, 255, .09) !important;
    pointer-events: none !important;
}
.fuel-icon {
    position: relative !important;
    width: 54px !important;
    height: 54px !important;
    flex: 0 0 54px !important;
    display: grid !important;
    place-items: center !important;
    margin-right: -10px !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 50%, #ea580c 100%) !important;
    border: 2px solid rgba(254, 249, 195, .92) !important;
    box-shadow: 0 0 22px rgba(245, 158, 11, .64), 0 8px 16px rgba(0,0,0,.38) !important;
    z-index: 2 !important;
    transition: transform .25s ease !important;
}
.game-resource-fuel:hover .fuel-icon,
.game-resource-fuel:focus-visible .fuel-icon { transform: scale(1.045) rotate(3deg) !important; }
.fuel-icon-pulse {
    position: absolute !important;
    inset: 0 !important;
    border-radius: inherit !important;
    background: rgba(255,255,255,.18) !important;
    animation: storyFuelPulse 2.2s ease-in-out infinite !important;
}
.fuel-icon-shade {
    position: absolute !important;
    inset: 5px !important;
    border-radius: inherit !important;
    background: linear-gradient(0deg, rgba(194,65,12,.75), transparent 58%) !important;
    pointer-events: none !important;
}
.fuel-icon svg {
    position: relative !important;
    z-index: 2 !important;
    width: 31px !important;
    height: 31px !important;
    display: block !important;
    fill: currentColor !important;
    filter: drop-shadow(0 2px 5px rgba(0,0,0,.52)) !important;
}
.fuel-bars {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding-top: 1px !important;
    flex: 0 0 auto !important;
}
.fuel-bar {
    display: block !important;
    width: 11px !important;
    height: 24px !important;
    border-radius: 3px !important;
    transform: skewX(-12deg) !important;
    transition: background .28s ease, border-color .28s ease, opacity .28s ease, box-shadow .28s ease, transform .28s ease !important;
}
.fuel-bar.is-filled {
    opacity: 1 !important;
    transform: skewX(-12deg) scale(1) !important;
    background: linear-gradient(0deg, #ea580c, #f59e0b 52%, #fde047) !important;
    border: 1px solid rgba(254, 240, 138, .88) !important;
    box-shadow: 0 0 12px rgba(251, 191, 36, .76) !important;
}
.fuel-bar.is-empty {
    opacity: .55 !important;
    transform: skewX(-12deg) scale(.9) !important;
    background: rgba(15, 23, 42, .82) !important;
    border: 1px solid rgba(100, 116, 139, .56) !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.38) !important;
}
.fuel-counter {
    position: relative !important;
    z-index: 1 !important;
    min-width: 38px !important;
    height: 32px !important;
    display: grid !important;
    place-items: center !important;
    padding: 1px 9px 0 !important;
    border-radius: 13px !important;
    color: #fbbf24 !important;
    background: rgba(2, 6, 23, .78) !important;
    border: 1px solid rgba(245, 158, 11, .36) !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,.42) !important;
    overflow: hidden !important;
}
.fuel-counter::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(245, 158, 11, .09) !important;
    animation: storyFuelCounterPulse 2.4s ease-in-out infinite !important;
}
.fuel-counter span {
    position: relative !important;
    z-index: 1 !important;
    font-family: Lalezar, Vazirmatn, Tahoma, sans-serif !important;
    font-size: 22px !important;
    line-height: .9 !important;
    letter-spacing: .04em !important;
    text-shadow: 0 0 9px rgba(251, 191, 36, .62), 0 2px 4px rgba(0,0,0,.62) !important;
}
@keyframes storyFuelPulse { 0%, 100% { opacity: .18; } 50% { opacity: .36; } }
@keyframes storyFuelCounterPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (max-width: 420px) {
    .game-resource-fuel { height: 44px !important; min-width: 138px !important; max-width: 152px !important; gap: 6px !important; padding-left: 7px !important; }
    .fuel-icon { width: 48px !important; height: 48px !important; flex-basis: 48px !important; margin-right: -8px !important; }
    .fuel-icon svg { width: 28px !important; height: 28px !important; }
    .fuel-bars { gap: 4px !important; }
    .fuel-bar { width: 9px !important; height: 21px !important; }
    .fuel-counter { min-width: 34px !important; height: 29px !important; padding-inline: 7px !important; }
    .fuel-counter span { font-size: 19px !important; }
}

@media (max-height: 500px) and (orientation: landscape) {
    .game-resource-fuel { height: 40px !important; min-width: 128px !important; max-width: 144px !important; gap: 5px !important; }
    .fuel-icon { width: 42px !important; height: 42px !important; flex-basis: 42px !important; }
    .fuel-icon svg { width: 25px !important; height: 25px !important; }
    .fuel-bar { width: 8px !important; height: 19px !important; }
    .fuel-counter { min-width: 31px !important; height: 26px !important; }
    .fuel-counter span { font-size: 17px !important; }
}

/* Shared fuel-empty modal for story map and stage pages. */
.story-fuel-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 220 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: max(16px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)) !important;
    background: rgba(2, 6, 23, .78) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    backdrop-filter: blur(16px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity .22s ease !important;
}
.story-fuel-modal.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
}
.story-fuel-modal__card {
    position: relative !important;
    width: min(92vw, 440px) !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    padding: 22px !important;
    text-align: center !important;
    color: #fff !important;
    background:
        radial-gradient(circle at 12% 8%, rgba(251,191,36,.26), transparent 30%),
        linear-gradient(145deg, rgba(15,23,42,.96), rgba(2,6,23,.96)) !important;
    border: 1px solid rgba(251,191,36,.45) !important;
    box-shadow: 0 28px 80px rgba(0,0,0,.64), 0 0 42px rgba(245,158,11,.18) !important;
    transform: translateY(12px) scale(.97) !important;
    transition: transform .22s ease !important;
}
.story-fuel-modal.is-open .story-fuel-modal__card { transform: translateY(0) scale(1) !important; }
.story-fuel-modal__close {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: rgba(255,255,255,.76) !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    cursor: pointer !important;
}
.story-fuel-modal__icon {
    position: relative !important;
    width: 76px !important;
    height: 76px !important;
    margin: 4px auto 14px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #fde047, #f59e0b 52%, #ea580c) !important;
    border: 2px solid rgba(254,249,195,.86) !important;
    box-shadow: 0 0 30px rgba(245,158,11,.58) !important;
}
.story-fuel-modal__icon svg { width: 42px !important; height: 42px !important; fill: currentColor !important; filter: drop-shadow(0 3px 6px rgba(0,0,0,.52)) !important; }
.story-fuel-modal__title {
    margin: 0 0 8px !important;
    font-family: Lalezar, Vazirmatn, Tahoma, sans-serif !important;
    font-size: clamp(26px, 7vw, 34px) !important;
    line-height: 1.1 !important;
    color: #fef3c7 !important;
    text-shadow: 0 0 18px rgba(251,191,36,.28) !important;
}
.story-fuel-modal__text {
    margin: 0 auto 16px !important;
    max-width: 34rem !important;
    color: rgba(226,232,240,.88) !important;
    font-size: 14px !important;
    line-height: 1.9 !important;
}
.story-fuel-modal__timer {
    display: grid !important;
    gap: 6px !important;
    margin: 0 0 16px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    background: rgba(15,23,42,.7) !important;
    border: 1px solid rgba(251,191,36,.22) !important;
    box-shadow: inset 0 1px 8px rgba(0,0,0,.24) !important;
}
.story-fuel-modal__timer span { color: rgba(254,243,199,.8) !important; font-size: 12px !important; font-weight: 900 !important; }
.story-fuel-modal__countdown {
    color: #fbbf24 !important;
    font-family: Lalezar, Vazirmatn, Tahoma, sans-serif !important;
    font-size: 32px !important;
    line-height: 1 !important;
    letter-spacing: .05em !important;
    text-shadow: 0 0 16px rgba(251,191,36,.34) !important;
}
.story-fuel-modal__actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}
.story-fuel-modal__buy,
.story-fuel-modal__wait {
    min-height: 48px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 16px !important;
    border: 0 !important;
    text-decoration: none !important;
    font-family: Lalezar, Vazirmatn, Tahoma, sans-serif !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: transform .18s ease, filter .18s ease !important;
}
.story-fuel-modal__buy { color: #451a03 !important; background: linear-gradient(135deg, #fef08a, #f59e0b 58%, #fb923c) !important; box-shadow: 0 12px 24px rgba(245,158,11,.28) !important; }
.story-fuel-modal__wait { color: rgba(226,232,240,.92) !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.12) !important; }
.story-fuel-modal__buy:hover,
.story-fuel-modal__wait:hover { transform: translateY(-1px) !important; filter: brightness(1.05) !important; }
@media (max-width: 420px) {
    .story-fuel-modal__card { padding: 20px 16px 16px !important; border-radius: 24px !important; }
    .story-fuel-modal__actions { grid-template-columns: 1fr !important; }
    .story-fuel-modal__icon { width: 68px !important; height: 68px !important; }
    .story-fuel-modal__countdown { font-size: 29px !important; }
}