/* ===== css/base.css ===== */
/* ========== BASE STYLES ========== */
/* Core styles for html, body, canvas, and UI layer */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    background-color: #000;
    font-family: 'Saira', -apple-system, system-ui, sans-serif;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-overflow-scrolling: none;
}

/* Scrolling backdrop container - only visible on desktop */
#scrolling-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    background-color: #000;
}

/* The actual scrolling backdrop image */
#scrolling-backdrop-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Full height - background-repeat handles seamless tiling */
    height: 100%;
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
    /* GPU acceleration for background-position scrolling */
    will-change: background-position;
    /* Force GPU layer for smoother compositing */
    transform: translateZ(0);
    backface-visibility: hidden;
    /* Crisp pixel art rendering without antialiasing */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    -webkit-image-rendering: pixelated;
    /* Prevent any layout thrashing */
    contain: strict;
}

/* Show scrolling backdrop on desktop */
body.desktop-mode #scrolling-backdrop {
    display: block;
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.7), 0 0 14px rgba(255, 204, 0, 0.6);
}

#game-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    image-rendering: pixelated;
    /* GPU acceleration for smoother rendering on mobile */
    will-change: transform;
    transform: translateZ(0);
}

/* Desktop: center the PIXI canvas within the container */
#game-canvas.desktop-centered {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* Desktop: center the UI layer to match canvas in portrait mode */
/* In landscape mode, UI layer should span full width so HUD can be outside game area */
@media (orientation: portrait) {
    body:has(#game-canvas.desktop-centered) #ui-layer {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Landscape mode: UI layer spans full width for side panels */
@media (orientation: landscape) {
    body:has(#game-canvas.desktop-centered) #ui-layer {
        max-width: none;
        left: 0;
        transform: none;
    }
}

canvas, #game-canvas {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    outline: none;
}

#ui-layer {
    position: fixed;
    /* Safe-area insets (viewport-fit=cover in index.html). The HUD children are
       position:absolute with hard-coded top/right offsets, which padding would
       NOT shift, so the layer itself is inset instead: the children keep their
       15px offsets, now measured from the notch/home-indicator edge. The
       fullscreen overlays (title, pause, wasted) are siblings, not children,
       and are unaffected. Fallback 0 keeps every non-notch device identical. */
    top: env(safe-area-inset-top, 0px);
    left: env(safe-area-inset-left, 0px);
    width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    height: calc(100% - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(10, 10, 10, 0.95);
    color: #ffffff;
    padding: 12px 16px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.4);
    font-family: 'Rajdhani', sans-serif;
    pointer-events: auto;
}

.consent-banner__content {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.consent-banner__text {
    flex: 1 1 240px;
    font-size: 0.95rem;
}

.consent-banner__actions {
    display: flex;
    gap: 8px;
}

.consent-btn {
    border: none;
    padding: 8px 14px;
    border-radius: 8px;
    background: #ff3b3b;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.consent-btn--secondary {
    background: rgba(255, 255, 255, 0.2);
}

.consent-banner__content--manage {
    flex-direction: column;
    gap: 12px;
}

.consent-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    cursor: pointer;
}

.consent-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #ff3b3b;
}

.consent-banner__links {
    margin-top: 4px;
}

.consent-link {
    color: #aaa;
    font-size: 0.8rem;
    text-decoration: underline;
}

/* Loading spinner overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.2);
    border-top-color: #ff3b3b;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* New best run indicator */
.new-best-indicator {
    color: #ffd700;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    animation: new-best-pulse 1s ease-in-out infinite alternate;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
}

@keyframes new-best-pulse {
    from { opacity: 0.7; transform: scale(1); }
    to { opacity: 1; transform: scale(1.05); }
}

/* ===== css/hud-weapons.css ===== */
/* ========== HUD STYLES - WEAPONS DISPLAY ========== */
/* Weapons display, weapon tags, and status bars */

#weapons-display {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.weapon-tag {
    position: relative;
    background: rgba(0, 0, 0, 0.7);
    color: #ffcc00;
    padding: 5px 10px;
    border: 2px solid #ffcc00;
    border-radius: 4px;
    font-family: 'Rajdhani', monospace;
    font-size: 0.9rem;
    font-weight: 600;
    text-shadow: 2px 2px 0 #000;
    box-shadow: 2px 2px 0 #000, 0 0 8px rgba(255, 204, 0, 0.3);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.weapon-tag:hover {
    transform: translateX(3px);
    box-shadow: 3px 3px 0 #000, 0 0 15px rgba(255, 204, 0, 0.5);
}

.weapon-tag.cannot-fire {
    color: #ff0000;
    border-color: #ff0000;
    animation: weaponEmpty 0.5s ease-in-out;
}

.weapon-tag.low-ammo {
    animation: lowAmmoPulse 1s ease-in-out infinite;
}

.weapon-tag.reloading {
    border-color: #ffff00;
    animation: reloadingPulse 0.8s ease-in-out infinite;
}

.weapon-tag.ready-flash {
    animation: weaponReady 0.4s ease-out;
}

@keyframes weaponEmpty {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}

@keyframes lowAmmoPulse {
    0%, 100% {
        box-shadow: 2px 2px 0 #000, 0 0 5px rgba(255, 255, 0, 0.3);
        border-color: #ffcc00;
    }
    50% {
        box-shadow: 2px 2px 0 #000, 0 0 15px rgba(255, 100, 0, 0.6);
        border-color: #ff6600;
    }
}

@keyframes reloadingPulse {
    0%, 100% {
        opacity: 0.7;
        box-shadow: 2px 2px 0 #000, 0 0 5px rgba(255, 255, 0, 0.3);
    }
    50% {
        opacity: 1;
        box-shadow: 2px 2px 0 #000, 0 0 15px rgba(255, 255, 0, 0.6);
    }
}

@keyframes weaponReady {
    0% {
        transform: scale(1);
        box-shadow: 2px 2px 0 #000;
    }
    50% {
        transform: scale(1.05);
        box-shadow: 2px 2px 0 #000, 0 0 20px rgba(0, 255, 0, 0.8);
        border-color: #00ff00;
    }
    100% {
        transform: scale(1);
        box-shadow: 2px 2px 0 #000, 0 0 8px rgba(255, 204, 0, 0.3);
    }
}

.weapon-status-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0, 255, 0, 0.2), rgba(0, 255, 0, 0.4));
    transition: width 0.1s linear, background 0.2s ease;
    z-index: 0;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(0, 255, 0, 0.3);
}

.weapon-text {
    position: relative;
    z-index: 1;
    pointer-events: none;
}

/* ===== css/hud-currency.css ===== */
/* ========== HUD STYLES - CURRENCY & SCORE ========== */
/* Currency display, score display, and floating effects */

#currency-display {
    position: absolute;
    top: 15px;
    right: 15px;
    color: #00ff00;
    font-weight: 700;
    text-shadow: 3px 3px 0 #000, 0 0 10px rgba(0, 255, 0, 0.3);
    font-size: 1.5rem;
    font-family: 'Roboto Mono', 'Rajdhani', monospace;
    font-variant-numeric: tabular-nums;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                text-shadow 0.2s ease,
                color 0.15s ease;
    will-change: transform;
}

#currency-display.currency-gain {
    animation: currencyGain 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes currencyGain {
    0% {
        transform: scale(1) translateY(0);
        text-shadow: 3px 3px 0 #000, 0 0 10px rgba(0, 255, 0, 0.3);
    }
    25% {
        transform: scale(1.25) translateY(-3px);
        text-shadow: 3px 3px 0 #000, 0 0 35px rgba(0, 255, 0, 0.95), 0 0 60px rgba(0, 255, 0, 0.6);
        color: #88ff88;
    }
    50% {
        transform: scale(1.15) translateY(-1px);
        text-shadow: 3px 3px 0 #000, 0 0 25px rgba(0, 255, 0, 0.7);
        color: #66ff66;
    }
    75% {
        transform: scale(1.05) translateY(1px);
    }
    100% {
        transform: scale(1) translateY(0);
        text-shadow: 3px 3px 0 #000, 0 0 10px rgba(0, 255, 0, 0.3);
        color: #00ff00;
    }
}

/* HUD Pause Button */
.hud-pause-button {
    position: absolute;
    top: 50px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    color: #fff;
    font-family: 'Rajdhani', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 0 #000;
    box-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 0, 0, 0.5);
    transition: all 0.15s ease;
    z-index: 10;
    letter-spacing: -2px;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.hud-pause-button.visible {
    display: flex;
}

.hud-pause-button:hover {
    background: rgba(255, 204, 0, 0.3);
    border-color: #ffcc00;
    color: #ffcc00;
    transform: scale(1.1);
    box-shadow: 2px 2px 0 #000, 0 0 15px rgba(255, 204, 0, 0.4);
}

.hud-pause-button:active {
    transform: scale(0.95);
    box-shadow: 1px 1px 0 #000;
}

/* Enhanced score display with subtle glow */
#score-display {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                text-shadow 0.2s ease;
}

#score-display.score-change {
    animation: scorePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes scorePop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.15);
        text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }
    100% {
        transform: scale(1);
    }
}

/* Floating currency text effect */
.currency-float {
    position: fixed;
    color: #00ff00;
    font-family: 'Rajdhani', monospace;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 255, 0, 0.8);
    pointer-events: none;
    z-index: 100;
    animation: currencyFloat 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes currencyFloat {
    0% {
        opacity: 1;
        transform: translateY(0) scale(0.8);
        filter: blur(0px);
    }
    20% {
        opacity: 1;
        transform: translateY(-10px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateY(-50px) scale(1.3);
        filter: blur(2px);
    }
}

/* Large currency gains get bigger text */
.currency-float.big-gain {
    font-size: 1.6rem;
    color: #88ff88;
    animation-duration: 1.5s;
}

#perf-stats {
    position: absolute;
    bottom: 15px;
    left: 15px;
    color: #00ff00;
    font-weight: 600;
    text-shadow: 2px 2px 0 #000;
    font-size: 0.8rem;
    font-family: 'Rajdhani', monospace;
    display: none; /* Hidden by default */
}

/* ===== css/hud-levelup.css ===== */
/* ========== HUD STYLES - LEVEL UP BANNER ========== */
/* Level up banner and particles */

/* Level Up Banner */
#level-up-banner {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.95), rgba(255, 170, 0, 0.95));
    color: #000;
    padding: 15px 40px;
    border: 4px solid #fff;
    border-radius: 8px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 3px;
    text-transform: uppercase;
    text-shadow: none;
    box-shadow: 5px 5px 0 #000, 0 0 40px rgba(255, 204, 0, 0.8);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    display: none;
}

#level-up-banner.show {
    display: block;
    animation: levelUpBanner 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes levelUpBanner {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(-50px) scale(0.3) rotate(-5deg);
        filter: blur(5px);
    }
    10% {
        filter: blur(0px);
    }
    15% {
        opacity: 1;
        transform: translateX(-50%) translateY(5px) scale(1.15) rotate(0deg);
    }
    25% {
        transform: translateX(-50%) translateY(0) scale(1) rotate(0deg);
    }
    30% {
        transform: translateX(-50%) translateY(0) scale(1.02);
        box-shadow: 5px 5px 0 #000, 0 0 60px rgba(255, 204, 0, 1), 0 0 100px rgba(255, 204, 0, 0.5);
    }
    35% {
        transform: translateX(-50%) translateY(0) scale(1);
        box-shadow: 5px 5px 0 #000, 0 0 40px rgba(255, 204, 0, 0.8);
    }
    75% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-25px) scale(0.85);
        filter: blur(3px);
    }
}

/* Level up particles */
.level-up-particle {
    position: fixed;
    width: 8px;
    height: 8px;
    background: #ffcc00;
    border-radius: 50%;
    pointer-events: none;
    z-index: 49;
    box-shadow: 0 0 10px #ffcc00, 0 0 20px #ff9900;
    animation: levelUpParticle 1s ease-out forwards;
}

@keyframes levelUpParticle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx, 50px), var(--ty, -100px)) scale(0);
    }
}

/* ===== css/hud-tutorial.css ===== */
/* ========== HUD STYLES - TUTORIAL ========== */
/* Tutorial text and mobile swipe tutorial */

#tutorial-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.8;
    text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 255, 255, 0.3);
    animation: tutorialPulse 2s ease-in-out infinite;
    pointer-events: none;
    white-space: nowrap;
    width: auto;
    max-width: 90vw;
    /* GPU acceleration for animation */
    will-change: transform, opacity;
    transition: opacity 0.4s ease-out;
}

#tutorial-text.fade-out {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9) translateY(-10px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

#tutorial-text.fade-in {
    animation: tutorialFadeIn 0.4s ease-out forwards, tutorialPulse 2s ease-in-out infinite 0.4s;
}

@keyframes tutorialPulse {
    0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.98) translateZ(0); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.02) translateZ(0); }
    100% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.98) translateZ(0); }
}

@keyframes tutorialFadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9) translateY(10px) translateZ(0);
    }
    100% {
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1) translateY(0) translateZ(0);
    }
}

/* Mobile Swipe Tutorial */
#mobile-swipe-tutorial {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    display: none; /* Hidden by default, shown via JS on mobile */
    flex-direction: row;
    align-items: center;
    gap: 20px;
    pointer-events: none;
    z-index: 100;
    animation: swipeTutorialFadeIn 0.5s ease-in-out;
}

#mobile-swipe-tutorial.hide {
    animation: swipeTutorialFadeOut 0.5s ease-in-out forwards;
}

.swipe-tutorial-text {
    color: #fff;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #000, 0 0 10px rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.swipe-tutorial-arrow {
    color: #00ff00;
    font-size: 2.5rem;
    font-weight: bold;
    text-shadow: 3px 3px 0 #000, 0 0 15px rgba(0, 255, 0, 0.8);
    animation: arrowBounce 1s ease-in-out infinite;
}

.swipe-arrow-left {
    animation-name: arrowBounceLeft;
}

.swipe-arrow-right {
    animation-name: arrowBounceRight;
}

@keyframes swipeTutorialFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes swipeTutorialFadeOut {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}

@keyframes arrowBounceLeft {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
}

@keyframes arrowBounceRight {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

/* Responsive sizing for smaller screens */
@media (max-width: 480px) {
    #tutorial-text {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }
    .swipe-tutorial-text {
        font-size: 1.4rem;
    }
    .swipe-tutorial-arrow {
        font-size: 2rem;
    }
    #mobile-swipe-tutorial {
        gap: 15px;
    }
}

/* ===== css/hud-responsive.css ===== */
/* ========== HUD STYLES - LANDSCAPE & RESPONSIVE ========== */
/* Landscape mode layout and responsive adjustments */

/* ========== LANDSCAPE MODE LAYOUT ========== */
/* On landscape screens, position HUD elements outside the centered game area */
/* Left side: Pause button + Currency display */
/* Right side: Weapons display */

@media (orientation: landscape) and (min-width: 600px) {
    /* Left panel - Weapons display (matches mobile layout) */
    #weapons-display {
        /* Position on the left side of the game canvas */
        left: calc(50% - 240px - 190px);
        right: auto;
        top: 20px;
        align-items: flex-start;
    }

    /* Make weapon tags align left */
    #weapons-display .weapon-tag {
        text-align: left;
    }

    /* Right panel - Currency display (matches mobile layout) */
    #currency-display {
        /* Position on the right side of the game canvas */
        left: auto;
        right: calc(50% - 240px - 190px);
        top: 20px;
        text-align: center;
        min-width: 100px;
        font-size: 1.5rem;
    }

    .hud-pause-button {
        /* Position below currency on right side */
        left: auto;
        right: calc(50% - 240px - 160px);
        top: 60px;
    }

    .weapon-tag {
        font-size: 1rem;
        padding: 6px 12px;
    }
}

/* Ensure sufficient space for landscape panels */
@media (orientation: landscape) and (min-width: 800px) {
    #weapons-display {
        left: calc(50% - 240px - 220px);
    }

    #currency-display {
        right: calc(50% - 240px - 220px);
        font-size: 1.7rem;
    }

    .hud-pause-button {
        right: calc(50% - 240px - 185px);
        width: 45px;
        height: 45px;
    }

    .weapon-tag {
        font-size: 1.15rem;
        padding: 7px 14px;
    }
}

/* Extra wide screens - more spacing */
@media (orientation: landscape) and (min-width: 1024px) {
    #weapons-display {
        left: calc(50% - 240px - 280px);
    }

    #currency-display {
        right: calc(50% - 240px - 280px);
        font-size: 2rem;
    }

    .hud-pause-button {
        right: calc(50% - 240px - 240px);
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }

    .weapon-tag {
        font-size: 1.3rem;
        padding: 8px 16px;
    }
}

/* ===== css/buttons.css ===== */
/* ========== BUTTON STYLES ========== */
/* Main and secondary button styles */

.btn-main {
    background: linear-gradient(135deg, #00dd00 0%, #00aa00 100%);
    color: white;
    border: 4px solid white;
    padding: 15px 40px;
    font-size: 1.8rem;
    font-weight: 400;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    margin-top: 20px;
    cursor: pointer;
    box-shadow: 5px 5px 0 #000, 0 0 20px rgba(0, 221, 0, 0.5);
    text-transform: uppercase;
    transition: all 0.3s ease;
    animation: buttonGlow 2s infinite;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-main::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transform: rotate(45deg);
    animation: buttonShine 3s infinite;
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 5px 5px 0 #000, 0 0 20px rgba(0, 221, 0, 0.5);
    }
    50% {
        box-shadow: 5px 5px 0 #000, 0 0 30px rgba(0, 221, 0, 0.8), 0 0 40px rgba(0, 170, 0, 0.4);
    }
}

@keyframes buttonShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50%, 100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 5px 7px 0 #000, 0 0 35px rgba(0, 221, 0, 0.7);
}

.btn-main:active {
    transform: translate(3px, 3px) scale(0.98);
    box-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 221, 0, 0.3);
    filter: brightness(0.9);
    transition: all 0.1s ease;
}

.btn-secondary {
    background: linear-gradient(135deg, #333 0%, #555 100%);
    color: white;
    border: 4px solid #ffcc00;
    padding: 12px 35px;
    font-size: 1.8rem;
    font-weight: 400;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    margin-top: 15px;
    cursor: pointer;
    box-shadow: 5px 5px 0 #000, 0 0 15px rgba(255, 204, 0, 0.3);
    text-transform: uppercase;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-secondary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 204, 0, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 5px 7px 0 #000, 0 0 20px rgba(255, 204, 0, 0.5);
}

.btn-secondary:hover::before {
    width: 300px;
    height: 300px;
}

.btn-secondary:active {
    transform: translate(3px, 3px) scale(0.98);
    box-shadow: 2px 2px 0 #000, 0 0 8px rgba(255, 204, 0, 0.2);
    filter: brightness(0.9);
    transition: all 0.1s ease;
}

.btn-secondary:disabled {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%);
    border-color: #718096;
    color: #A0AEC0;
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: 4px 4px 0 #000;
}

.btn-secondary:disabled::before {
    display: none;
}

.btn-secondary.unaffordable {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%);
    border-color: #718096;
    color: #A0AEC0;
    box-shadow: 4px 4px 0 #000;
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-secondary.unaffordable::before {
    display: none;
}

/* ===== css/perk-menu.css ===== */
/* ========== PERK MENU STYLES ========== */
/* Perk selection menu and cards */

#perk-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    z-index: 20;
}

.perk-menu-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 480px;
    opacity: 0;
    transform: translate(var(--perk-offset-x, 0px), var(--perk-offset-y, 0px)) scale(0.6);
    transition: transform 280ms ease, opacity 200ms ease;
    pointer-events: auto;
}

#perk-menu.perk-menu-visible {
    display: flex;
}

#perk-menu.perk-menu-enter .perk-menu-content,
#perk-menu.perk-menu-ready .perk-menu-content {
    opacity: 1;
    transform: translate(0, 0) scale(1);
}

#perk-menu.perk-menu-exit .perk-menu-content {
    animation: perkMenuExit 280ms ease forwards;
}

#perk-menu.perk-menu-animating {
    pointer-events: none;
}

#perk-menu.perk-menu-animating .perk-menu-content {
    pointer-events: none;
}

@keyframes perkMenuExit {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(-20vh) scale(0.95);
        opacity: 0;
    }
}

body.perk-menu-dimmed #game-canvas,
body.perk-menu-dimmed #ui-layer {
    filter: grayscale(1) brightness(0.7);
    transition: filter 200ms ease;
    pointer-events: none;
}

.perk-card {
    background: #333;
    width: 85%;
    max-width: 350px;
    padding: 15px;
    margin: 10px 0;
    border: 4px solid #fff;
    box-shadow: 5px 5px 0 #000;
    color: white;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px) scale(0.9);
    animation: perkCardSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered animation delays for each card */
.perk-card:nth-child(1) { animation-delay: 0.1s; }
.perk-card:nth-child(2) { animation-delay: 0.2s; }
.perk-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes perkCardSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.perk-card:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 8px 12px 0 #000, 0 0 25px rgba(255, 255, 255, 0.15);
    filter: brightness(1.05);
}

.perk-card:active {
    transform: translateY(2px) scale(0.97);
    box-shadow: 3px 3px 0 #000;
    filter: brightness(0.92);
    transition: all 0.08s ease;
}

/* Rarity-based styles */
.perk-rarity-common {
    background: linear-gradient(135deg, #2a2a2a 0%, #333 100%);
    border-color: #CCCCCC;
}

.perk-rarity-uncommon {
    background: linear-gradient(135deg, #1a2f1a 0%, #2d4a2d 100%);
    border-color: #5FD35F;
    box-shadow: 5px 5px 0 #000, 0 0 10px rgba(95, 211, 95, 0.3);
}

.perk-rarity-uncommon:hover {
    box-shadow: 7px 7px 0 #000, 0 0 15px rgba(95, 211, 95, 0.5);
}

.perk-rarity-rare {
    background: linear-gradient(135deg, #1a2640 0%, #2d3d5a 100%);
    border-color: #4A9EFF;
    box-shadow: 5px 5px 0 #000, 0 0 10px rgba(74, 158, 255, 0.3);
}

.perk-rarity-rare:hover {
    box-shadow: 7px 7px 0 #000, 0 0 15px rgba(74, 158, 255, 0.5);
}

.perk-rarity-mythic {
    background: linear-gradient(135deg, #3d1f00 0%, #5a3000 100%);
    border-color: #FF6B00;
    box-shadow: 5px 5px 0 #000, 0 0 15px rgba(255, 107, 0, 0.4);
    animation: mythicPulse 2s infinite;
}

.perk-rarity-mythic:hover {
    box-shadow: 7px 7px 0 #000, 0 0 20px rgba(255, 107, 0, 0.6);
}

@keyframes mythicPulse {
    0%, 100% {
        box-shadow: 5px 5px 0 #000, 0 0 15px rgba(255, 107, 0, 0.4);
    }
    50% {
        box-shadow: 5px 5px 0 #000, 0 0 25px rgba(255, 107, 0, 0.6), 0 0 35px rgba(255, 107, 0, 0.3);
    }
}

/* Enhanced rarity shimmer effects */
.perk-rarity-rare::after,
.perk-rarity-mythic::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%
    );
    pointer-events: none;
    animation: rarityShimmer 3s ease-in-out infinite;
}

.perk-rarity-mythic::after {
    animation-duration: 2s;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 200, 100, 0.2) 50%,
        transparent 100%
    );
}

@keyframes rarityShimmer {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 200%;
    }
}

.perk-type-weapon { border-color: #ffcc00; }
.perk-type-stat { border-color: #00ccff; }

.perk-title {
    font-size: 1.3rem;
    font-weight: 400;
    display: block;
    margin-bottom: 5px;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: text-shadow 0.2s ease;
}

.perk-card:hover .perk-title {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Selection animation when perk is chosen */
.perk-card.selected {
    animation: perkSelected 0.5s ease-out forwards;
    pointer-events: none;
}

@keyframes perkSelected {
    0% {
        transform: scale(1);
        box-shadow: 5px 5px 0 #000;
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 40px rgba(255, 255, 255, 0.6), 5px 5px 0 #000;
        filter: brightness(1.3);
    }
    100% {
        transform: scale(1) translateY(-20px);
        opacity: 0;
        box-shadow: 0 0 60px rgba(255, 255, 255, 0.8);
    }
}

.perk-desc {
    font-size: 0.9rem;
    color: #ddd;
    font-family: 'Saira', sans-serif;
    /* Fixed height for 2 lines to ensure consistent card sizes */
    min-height: 2.7em;
    line-height: 1.35em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reroll button */
.perk-reroll-button {
    background: linear-gradient(135deg, #6B46C1 0%, #553C9A 100%);
    color: white;
    border: 3px solid #9F7AEA;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    font-family: 'Rajdhani', monospace;
    cursor: pointer;
    margin-top: 20px;
    border-radius: 8px;
    box-shadow: 4px 4px 0 #000, 0 0 10px rgba(159, 122, 234, 0.3);
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.perk-reroll-button:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000, 0 0 15px rgba(159, 122, 234, 0.5);
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

.perk-reroll-button:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 #000;
}

.perk-reroll-button:disabled {
    background: linear-gradient(135deg, #4A5568 0%, #2D3748 100%);
    border-color: #718096;
    color: #A0AEC0;
    cursor: not-allowed;
    opacity: 0.6;
    box-shadow: 4px 4px 0 #000;
}

/* ===== css/title-screen.css ===== */
/* ========== TITLE SCREEN STYLES ========== */

#title-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    pointer-events: auto;
    z-index: 30;
    cursor: pointer;
}

/* Leaving the title screen.
 *
 * This used to be a single-frame cut: js/game-lifecycle.js set display:none the
 * instant the run began, which threw away the `transition: opacity` that used to
 * be declared here (display:none skips transitions). The two images either side
 * of that cut have nothing in common - a warm brown horizon view of a ruined
 * city, then a cold blue top-down street - so it read as a glitch rather than a
 * start.
 *
 * The run still begins on the very same frame as before. The title just stays up
 * for 220ms on top of it and pushes away, so the player falls into the street
 * they were looking down. Nothing waits on this: pointer-events go off
 * immediately, so the first swipe lands in the game even mid-fade.
 */
#title-screen.title-exit {
    pointer-events: none;
    animation: titleExit 220ms cubic-bezier(0.4, 0.0, 1, 1) forwards;
}

@keyframes titleExit {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(1.08);
    }
}

/* The push-in is the point of the effect, but it is also the one part of it that
 * costs anything on a weak phone: scaling a full-screen backdrop image. Devices
 * that ask for less motion get the fade alone. */
@media (prefers-reduced-motion: reduce) {
    #title-screen.title-exit {
        animation-name: titleExitFadeOnly;
    }

    @keyframes titleExitFadeOnly {
        from { opacity: 1; }
        to { opacity: 0; }
    }
}

/* Title Screen Backdrop */
.title-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/attached_assets/titletall_1765605844996.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    opacity: 0;
    animation: titleBackdropFadeIn 0.8s ease-out 0.2s forwards;
    z-index: 0;
}

.title-backdrop::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0.1) 30%,
        rgba(0, 0, 0, 0.1) 70%,
        rgba(0, 0, 0, 0.5) 100%
    );
    pointer-events: none;
}

@keyframes titleBackdropFadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Static backdrop always visible */
.title-backdrop {
    display: block;
}

#title-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.title-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 2;
}

.title-logo-image {
    width: min(80vw, 400px);
    max-width: 400px;
    height: auto;
    image-rendering: pixelated;
    animation: logoDropIn 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

@keyframes logoDropIn {
    0% {
        transform: translateY(-110vh) scale(0.98) translateZ(0);
        opacity: 0;
    }
    55% {
        transform: translateY(0) scale(1) translateZ(0);
        opacity: 1;
    }
    70% {
        transform: translateY(-22px) scale(1.02) translateZ(0);
    }
    83% {
        transform: translateY(0) scale(1) translateZ(0);
    }
    92% {
        transform: translateY(-10px) scale(1.01) translateZ(0);
    }
    100% {
        transform: translateY(0) scale(1) translateZ(0);
        opacity: 1;
    }
}

.title-tap-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.8rem;
    font-weight: 400;
    color: #ffffff;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin: 0;
    opacity: 0;
    animation: tapFadeIn 0.5s ease-out 0.9s forwards, tapPulse 1.5s infinite ease-in-out 1.4s;
}

@keyframes tapFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tapPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.title-version {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #888888;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin: 0;
    margin-top: -25px;
    opacity: 0;
    animation: versionFadeIn 0.5s ease-out 1.1s forwards;
}

@keyframes versionFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 0.7;
        transform: translateY(0);
    }
}

.title-armory-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: #000000;
    border: 2px solid #44ff44;
    color: #44ff44;
    font-family: 'Rajdhani', monospace;
    font-weight: 600;
    font-size: 1rem;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 100;
    pointer-events: auto;
    transition: all 0.2s ease;
}

.title-armory-btn:hover {
    background: #44ff44;
    color: #000000;
}

.title-armory-btn:active {
    transform: translateX(-50%) scale(0.95);
}

/* ========== SAVE CODE BUTTON ========== */
/* Shown once the player has progress worth keeping. Sits under the Arms
   Dealer button; opens the transfer-code modal so the player can copy their
   code before a browser wipes local storage. */
.title-transfer-btn {
    position: absolute;
    bottom: calc(20px + 54px);
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 18px;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid #888888;
    color: #cccccc;
    font-family: 'Rajdhani', monospace;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 100;
    pointer-events: auto;
    transition: all 0.2s ease;
}

.title-transfer-btn:hover {
    border-color: #ffffff;
    color: #ffffff;
}

.title-transfer-btn:active {
    transform: translateX(-50%) scale(0.95);
}

/* ========== CONTINUE RUN BUTTON ========== */
/* Shown when a saved run exists from a previous session */

.title-continue-container {
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    z-index: 100;
    opacity: 0;
    animation: continueSlideIn 0.5s ease-out 1.3s forwards;
}

@keyframes continueSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.title-continue-btn {
    padding: 14px 28px;
    background: linear-gradient(135deg, #ff6600 0%, #cc4400 100%);
    border: 3px solid #ffcc00;
    color: #ffffff;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    cursor: pointer;
    z-index: 100;
    pointer-events: auto;
    transition: all 0.2s ease;
    box-shadow: 4px 4px 0 #000, 0 0 20px rgba(255, 102, 0, 0.5);
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.title-continue-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: rotate(45deg);
    animation: continueShine 2s infinite;
}

@keyframes continueShine {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    50%, 100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.title-continue-btn:hover {
    background: linear-gradient(135deg, #ff8833 0%, #ff6600 100%);
    transform: translateY(-2px);
    box-shadow: 4px 6px 0 #000, 0 0 30px rgba(255, 102, 0, 0.7);
}

.title-continue-btn:active {
    transform: translate(2px, 2px) scale(0.98);
    box-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 102, 0, 0.3);
}

.title-continue-btn:disabled {
    cursor: wait;
    opacity: 0.75;
    box-shadow: 2px 2px 0 #000;
    filter: grayscale(0.2);
}

.title-continue-btn:disabled::before {
    animation: none;
}

.title-continue-info {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #ffcc00;
    letter-spacing: 1px;
    margin: 0;
    text-shadow: 1px 1px 2px #000;
}

/* ========== MOBILE ADJUSTMENTS FOR CONTINUE BUTTON ========== */
@media (max-width: 480px) {
    .title-continue-container {
        bottom: 70px;
        padding: 0 10px;
        width: calc(100% - 20px);
        max-width: 320px;
    }

    .title-continue-btn {
        padding: 12px 24px;
        font-size: 1.2rem;
        letter-spacing: 2px;
        width: 100%;
        max-width: 280px;
    }

    .title-continue-info {
        font-size: 0.8rem;
    }

    .title-content {
        gap: 30px;
    }

    .title-tap-text {
        font-size: 1.5rem;
    }

    .title-version {
        margin-top: -20px;
    }
}

/* Small height screens - adjust layout to prevent overlap and clipping */
@media (max-height: 700px) {
    #title-screen {
        justify-content: flex-start;
        padding-top: 40px;
    }

    .title-content {
        gap: 25px;
    }

    .title-logo-image {
        width: min(70vw, 350px);
    }
}

@media (max-height: 600px) {
    #title-screen {
        padding-top: 30px;
    }

    .title-content {
        gap: 20px;
    }

    .title-logo-image {
        width: min(65vw, 300px);
    }

    .title-tap-text {
        font-size: 1.4rem;
    }

    .title-continue-container {
        bottom: 60px;
    }

    .title-armory-btn {
        bottom: 15px;
        padding: 10px 20px;
        font-size: 0.9rem;
    }
}

@media (max-height: 500px) {
    #title-screen {
        padding-top: 20px;
    }

    .title-content {
        gap: 15px;
    }

    .title-logo-image {
        width: min(55vw, 250px);
    }

    .title-tap-text {
        font-size: 1.2rem;
    }

    .title-version {
        display: none;
    }

    .title-continue-container {
        bottom: 50px;
    }

    .title-continue-btn {
        padding: 10px 20px;
        font-size: 1.1rem;
    }

    .title-armory-btn {
        bottom: 10px;
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* ===== css/wasted.css ===== */
/* ========== WASTED SLAM ANIMATION ========== */

#wasted-slam {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.82);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 30;
    pointer-events: none;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    padding-bottom: 60px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    scroll-behavior: smooth;
    touch-action: pan-y pinch-zoom;
    /* Improve momentum scrolling on iOS */
    -webkit-overflow-scrolling: touch;
    /* Ensure scrolling works smoothly */
    will-change: scroll-position;
}

/* Wasted backdrop image - pixelated */
.wasted-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image: url('../attached_assets/deathtall_1765572694910.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    opacity: 0;
    animation: wastedBackdropFadeIn 0.5s ease-out forwards;
}

/* Held clear for the first 45% - about 225ms - so the player's collapse
   (playPlayerDeathAnimation, js/update/helpers.js) is actually visible instead
   of playing behind a curtain that is already down. ease-out on a plain 0->1
   fade put this at ~85% opaque by 250ms and hid the whole thing.
   The animation is still 0.5s and the stats still appear on the same schedule,
   so this buys the death a moment without costing the replay one. */
@keyframes wastedBackdropFadeIn {
    0%   { opacity: 0; }
    45%  { opacity: 0; }
    100% { opacity: 1; }
}

/* Dark overlay for text readability */
.wasted-backdrop::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(60, 0, 0, 0.5) 0%,
        rgba(40, 0, 0, 0.32) 30%,
        rgba(40, 0, 0, 0.36) 70%,
        rgba(60, 0, 0, 0.5) 100%
    );
}

.wasted-fade-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    z-index: 60;
}

#wasted-slam.fading-out .wasted-fade-overlay,
#wasted-slam.postgame-exit .wasted-fade-overlay {
    opacity: 1;
}

/* Use wide backdrop for landscape/desktop */
@media (orientation: landscape), (min-width: 800px) {
    .wasted-backdrop {
        background-image: url('../attached_assets/deathwide_1765572694910.png');
    }
}

#wasted-slam.show-stats {
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    pointer-events: auto;
}

#wasted-slam.show-stats .wasted-slam-text {
    display: none;
}

#wasted-slam.show-stats .wasted-slam-impact {
    display: none;
}

#wasted-slam.active {
    display: flex;
    animation: wastedBackgroundFade 0.3s ease-out forwards;
}

@keyframes wastedBackgroundFade {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(139, 0, 0, 0.85); /* Dark red overlay */
    }
}

.wasted-slam-text {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 10rem;
    font-weight: 900;
    color: #ff0000;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow:
        0 0 20px #ff0000,
        0 0 40px #ff0000,
        0 0 60px #ff0000,
        0 0 80px #ff0000,
        8px 8px 0 #000,
        -8px -8px 0 #000,
        8px -8px 0 #000,
        -8px 8px 0 #000;
    letter-spacing: 0.2em;
    text-align: center;
    width: auto;
    max-width: 100%;
    align-self: center;
    transform: scale(0);
    opacity: 0;
    z-index: 2;
}

#wasted-slam.active .wasted-slam-text {
    /* 2.5s was a long time to look at a death screen you have already read,
       several times a session. */
    animation: wastedSlam 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes wastedSlam {
    0% {
        transform: scale(0) rotate(-5deg);
        opacity: 0;
    }
    40% {
        transform: scale(1.3) rotate(2deg);
        opacity: 1;
    }
    50% {
        transform: scale(0.95) rotate(-1deg);
        opacity: 1;
    }
    60% {
        transform: scale(1.05) rotate(0.5deg);
        opacity: 1;
    }
    70% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}

/* Keep WASTED text centered */
@keyframes wastedMoveToTop {
    0% {
        transform: scale(1) translateY(0);
        font-size: 10rem;
    }
    100% {
        transform: scale(1) translateY(0);
        font-size: 10rem;
    }
}

#wasted-slam.move-to-top .wasted-slam-text {
    animation: wastedMoveToTop 0.8s cubic-bezier(0.4, 0.0, 0.2, 1) forwards;
}

.wasted-slam-impact {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 0, 0.8) 0%, rgba(255, 0, 0, 0) 70%);
    opacity: 0;
    z-index: 1;
}

#wasted-slam.active .wasted-slam-impact {
    animation: wastedImpact 1s ease-out forwards;
}

@keyframes wastedImpact {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    30% {
        transform: translate(-50%, -50%) scale(15);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(25);
        opacity: 0;
    }
}

/* Screen shake during slam */
#wasted-slam.active {
    animation:
        wastedBackgroundFade 0.3s ease-out forwards,
        wastedScreenShake 0.6s ease-out;
}

@keyframes wastedScreenShake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-10px, 5px);
    }
    20% {
        transform: translate(10px, -5px);
    }
    30% {
        transform: translate(-8px, 8px);
    }
    40% {
        transform: translate(8px, -8px);
    }
    50% {
        transform: translate(-5px, 3px);
    }
    60% {
        transform: translate(5px, -3px);
    }
    70% {
        transform: translate(-3px, 2px);
    }
    80% {
        transform: translate(3px, -2px);
    }
    90% {
        transform: translate(-1px, 1px);
    }
}

/* Stats container for wasted screen */
.wasted-stats-content {
    display: none;
    opacity: 0;
    transform: translateX(-60px);
    pointer-events: auto;
    max-width: 780px;
    width: 90%;
    padding: 15px;
    padding-bottom: 40px;
    margin-top: 10px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    /* Removed min-height to allow content to fit naturally on screen */
    /* Removed nested overflow to prevent scrolling conflicts - parent #wasted-slam handles scrolling */
}

#wasted-slam.show-stats .wasted-stats-content {
    display: flex;
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease;
}

#wasted-slam.postgame-exit .wasted-stats-content {
    opacity: 0;
    transform: translateX(70px);
}

/* Mobile adjustments for WASTED text */
@media (max-width: 768px) {
    .wasted-slam-text {
        font-size: 5rem;
        letter-spacing: 0.1em;
        padding: 0 10px;
        padding-left: calc(10px + 0.1em);
    }

    @keyframes wastedMoveToTop {
        0% {
            transform: scale(1) translateY(0);
            font-size: 5rem;
        }
        100% {
            transform: scale(1) translateY(-35vh);
            font-size: 3rem;
        }
    }
}

@media (max-width: 480px) {
    .wasted-slam-text {
        font-size: 3.5rem;
        letter-spacing: 0.05em;
        padding: 0 15px;
        padding-left: calc(15px + 0.05em);
    }

    @keyframes wastedMoveToTop {
        0% {
            transform: scale(1) translateY(0);
            font-size: 3.5rem;
        }
        100% {
            transform: scale(1) translateY(-35vh);
            font-size: 2.5rem;
        }
    }
}

/* ===== css/game-over-base.css ===== */
/* ========== GAME OVER SCREEN - BASE STYLES ========== */
/* Core layout, background effects, particles, vignette, header, and content */

#game-over {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, #1a0000 0%, #000000 70%);
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding-top: clamp(24px, 8vh, 96px);
    text-align: center;
    pointer-events: auto;
    z-index: 20;
    overflow: hidden;
    animation: screenShake 0.5s ease-out, scanlines 8s infinite;
}

@keyframes screenShake {
    0%, 100% {
        transform: translate(0, 0);
    }
    10% {
        transform: translate(-5px, 2px);
    }
    20% {
        transform: translate(5px, -2px);
    }
    30% {
        transform: translate(-3px, 3px);
    }
    40% {
        transform: translate(3px, -3px);
    }
    50% {
        transform: translate(-2px, 1px);
    }
}

@keyframes scanlines {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 0 100%;
    }
}

/* Animated background particles */
.gameover-bg-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    pointer-events: none;
}

.gameover-bg-particles .particle {
    animation: gameoverParticleFloat 6s infinite ease-in-out;
    box-shadow: 0 0 15px #ff4444, 0 0 30px #ff0000, 0 0 45px #ff4444;
}

@keyframes gameoverParticleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0) scale(1) rotate(0deg) translateZ(0);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-50px) translateX(30px) scale(1.5) rotate(90deg) translateZ(0);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-20px) translateX(-30px) scale(0.8) rotate(180deg) translateZ(0);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-60px) translateX(15px) scale(1.3) rotate(270deg) translateZ(0);
        opacity: 0.9;
    }
}

/* Vignette overlay */
.gameover-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
    pointer-events: none;
}

/* Scanline effect */
.gameover-vignette::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(100%);
    }
}

/* Main content container */
.gameover-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 15px;
    max-width: 600px;
    width: 100%;
    max-height: 100vh;
    box-sizing: border-box;
}

/* Header with title */
.gameover-header {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.gameover-glow-circle {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(255, 68, 68, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: gameoverGlowPulse 2s infinite;
    pointer-events: none;
}

@keyframes gameoverGlowPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

.gameover-title {
    position: relative;
    font-size: 4.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    color: #ff4444;
    text-transform: uppercase;
    letter-spacing: 8px;
    margin: 0;
    text-align: center;
    width: 100%;
    margin-left: 200px;
    text-shadow:
        6px 6px 0 #000,
        0 0 30px #ff0000,
        0 0 50px #ff4444,
        0 0 80px #ff0000;
    animation: gameoverTitleGlitch 3s infinite, chromaticAberration 0.3s infinite;
    z-index: 1;
}

@keyframes gameoverTitleGlitch {
    0%, 90%, 100% {
        transform: translate(0, 0) skew(0deg);
        text-shadow:
            6px 6px 0 #000,
            0 0 30px #ff0000,
            0 0 50px #ff4444,
            0 0 80px #ff0000;
    }
    92% {
        transform: translate(-3px, 2px) skew(-2deg);
        text-shadow:
            6px 6px 0 #000,
            -2px 0 0 #00ffff,
            2px 0 0 #ff0000,
            0 0 40px #ff4444;
    }
    94% {
        transform: translate(3px, -2px) skew(2deg);
        text-shadow:
            6px 6px 0 #000,
            2px 0 0 #00ffff,
            -2px 0 0 #ff0000,
            0 0 40px #ff4444;
    }
    96% {
        transform: translate(-2px, 1px) skew(-1deg);
        text-shadow:
            6px 6px 0 #000,
            -3px 0 0 #ff00ff,
            3px 0 0 #ffff00;
    }
}

@keyframes chromaticAberration {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.1) contrast(1.1);
    }
}

.gameover-underline {
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #ff4444, transparent);
    margin-top: 15px;
    box-shadow: 0 0 20px #ff4444;
    animation: underlineGlow 2s infinite;
}

/* Corner decorations */
.gameover-corner {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 3px solid #ff4444;
    box-shadow: 0 0 15px #ff4444;
    opacity: 0.5;
    animation: cornerPulse 2s infinite;
}

.gameover-corner-tl {
    top: 20px;
    left: 20px;
    border-right: none;
    border-bottom: none;
}

.gameover-corner-tr {
    top: 20px;
    right: 20px;
    border-left: none;
    border-bottom: none;
}

.gameover-corner-bl {
    bottom: 20px;
    left: 20px;
    border-right: none;
    border-top: none;
}

.gameover-corner-br {
    bottom: 20px;
    right: 20px;
    border-left: none;
    border-top: none;
}

/* ===== css/game-over-stats.css ===== */
/* ========== GAME OVER SCREEN - STATS GRID ========== */
/* Stats cards, icons, values, and animations */

/* Stats Grid */
.gameover-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
}

.stat-card {
    position: relative;
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.8) 0%, rgba(42, 42, 42, 0.8) 100%);
    border: 3px solid #555;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow:
        4px 4px 0 #000,
        0 0 20px rgba(0, 0, 0, 0.5);
    animation: statCardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards, statCardPulse 3s infinite 0.8s;
    transition: all 0.3s ease;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow:
        6px 6px 0 #000,
        0 0 30px rgba(255, 68, 68, 0.3);
}

@keyframes statCardPulse {
    0%, 100% {
        box-shadow:
            4px 4px 0 #000,
            0 0 20px rgba(0, 0, 0, 0.5);
    }
    50% {
        box-shadow:
            4px 4px 0 #000,
            0 0 30px rgba(255, 68, 68, 0.3),
            inset 0 0 20px rgba(255, 68, 68, 0.1);
    }
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: statCardShine 3s infinite;
}

@keyframes statCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes statCardShine {
    0% {
        left: -100%;
    }
    50%, 100% {
        left: 100%;
    }
}

.stat-card-kills {
    animation-delay: 0.6s;
    border-color: #ff4444;
}

.stat-card-kills:hover {
    border-color: #ff6666;
    box-shadow: 6px 6px 0 #000, 0 0 25px rgba(255, 68, 68, 0.5);
}

.stat-card-distance {
    animation-delay: 0.65s;
    border-color: #ffaa00;
}

.stat-card-distance:hover {
    border-color: #ffcc44;
    box-shadow: 6px 6px 0 #000, 0 0 25px rgba(255, 170, 0, 0.5);
}

.stat-card-total {
    animation-delay: 0.7s;
    border-color: #00ddff;
}

.stat-card-total:hover {
    border-color: #44eeff;
    box-shadow: 6px 6px 0 #000, 0 0 25px rgba(0, 221, 255, 0.5);
}

.stat-card-currency {
    animation-delay: 0.75s;
    border-color: #00ff00;
}

.stat-card-currency:hover {
    border-color: #44ff44;
    box-shadow: 6px 6px 0 #000, 0 0 25px rgba(0, 255, 0, 0.5);
}

.stat-icon {
    font-size: 2.5rem;
    filter: drop-shadow(2px 2px 0 #000);
    animation: statIconBounce 2s infinite;
}

@keyframes statIconBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.stat-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.stat-label {
    font-family: 'Rajdhani', monospace;
    font-size: 0.9rem;
    font-weight: 500;
    color: #aaa;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 #000;
    letter-spacing: 1px;
}

.stat-value {
    font-family: 'Rajdhani', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 3px 3px 0 #000;
}

.stat-card-kills .stat-value {
    color: #ff4444;
    text-shadow:
        3px 3px 0 #000,
        0 0 10px #ff0000;
}

.stat-card-distance .stat-value {
    color: #ffaa00;
    text-shadow:
        3px 3px 0 #000,
        0 0 10px #ff8800;
}

.stat-card-currency .stat-value {
    color: #00ff00;
    text-shadow:
        3px 3px 0 #000,
        0 0 10px #00cc00;
}

.stat-card-total .stat-value {
    color: #00ddff;
    text-shadow:
        3px 3px 0 #000,
        0 0 10px #00aacc;
}

.best-run-summary {
    margin: 12px auto 0;
    padding: 10px 12px;
    width: min(100%, 500px);
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    text-align: center;
}

.best-run-label {
    font-family: 'Rajdhani', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: #ffcf4a;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.best-run-values {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #ffffff;
}

.best-run-value {
    font-weight: 600;
}

/* Weapons Section */
.gameover-weapons-section {
    width: min(100%, 640px);
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeInUp 0.6s ease-out 0.4s backwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.weapons-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #ffaa00;
    text-shadow:
        3px 3px 0 #000,
        0 0 15px rgba(255, 170, 0, 0.6);
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 15px 0;
    letter-spacing: 2px;
}

.weapon-stats-container {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
    max-height: 250px;
    overflow-y: auto;
    padding: 15px;
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(255, 170, 0, 0.3);
    border-radius: 8px;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
}

.weapon-stats-container::-webkit-scrollbar {
    width: 8px;
}

.weapon-stats-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
}

.weapon-stats-container::-webkit-scrollbar-thumb {
    background: rgba(255, 170, 0, 0.5);
    border-radius: 4px;
}

.weapon-stats-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 170, 0, 0.7);
}

.weapon-stats-container.two-column {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weapon-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.8) 0%, rgba(40, 40, 40, 0.8) 100%);
    border: 2px solid rgba(255, 204, 0, 0.4);
    border-radius: 5px;
    box-shadow: 2px 2px 0 #000;
    transition: all 0.2s ease;
    animation: weaponStatSlideIn 0.4s ease-out backwards;
}

@keyframes weaponStatSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.weapon-stat-item:hover {
    transform: translateX(5px);
    border-color: rgba(255, 204, 0, 0.7);
}

.weapon-stat-name {
    font-family: 'Rajdhani', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #000;
}

.weapon-stat-damage {
    font-family: 'Rajdhani', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
}

/* ===== css/game-over-share.css ===== */
/* ========== GAME OVER SCREEN - SHARE SECTION ========== */
/* Action buttons, share section, share cards, and social buttons */

/* Action Buttons */
.gameover-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 720px;
    animation: fadeInUp 0.6s ease-out 0.2s backwards;
    pointer-events: auto;
}

.gameover-actions .btn-main,
.gameover-actions .btn-secondary {
    margin-top: 0;
    flex: 1;
}

/* Share Section */
.gameover-share-section {
    width: 100%;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid #ffcc00;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 204, 0, 0.3);
    animation: fadeInUp 0.6s ease-out 0.45s backwards;
    pointer-events: auto;
    touch-action: auto;
}

.wasted-share-card {
    width: 100%;
    max-width: 720px;
    margin: 0 auto 15px auto;
    padding: 20px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, rgba(15, 15, 20, 0.95) 100%);
    border: 2px solid rgba(255, 204, 0, 0.7);
    border-radius: 14px;
    box-shadow: 0 0 25px rgba(255, 204, 0, 0.25);
}

.share-card-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.share-card-logo {
    height: 54px;
    width: auto;
    filter: drop-shadow(0 0 8px rgba(255, 204, 0, 0.4));
}

.share-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    letter-spacing: 2px;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #000, 0 0 10px #ffcc00;
}

.stats-toggle-btn {
    background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
    color: white;
    border: 2px solid #5da8ff;
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 1px;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000, 0 0 10px rgba(74, 144, 226, 0.4);
    text-transform: uppercase;
    transition: all 0.3s ease;
    border-radius: 6px;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    margin-left: auto;
}

.stats-toggle-btn:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 #000, 0 0 15px rgba(74, 144, 226, 0.6);
    background: linear-gradient(135deg, #5da8ff 0%, #4a90e2 100%);
}

.stats-toggle-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #000;
}

.share-card-tagline {
    margin-left: auto;
    font-family: 'Rajdhani', monospace;
    font-size: 0.95rem;
    color: #c8ff8c;
    text-shadow: 1px 1px 0 #000;
}

.share-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: #ffcc00;
    text-align: center;
    margin: 0 0 15px 0;
    letter-spacing: 2px;
    text-shadow: 2px 2px 0 #000, 0 0 10px #ffcc00;
}

.share-message-box {
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #444;
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.5);
}

.share-message-text {
    font-family: 'Rajdhani', monospace;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #fff;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-shadow: 1px 1px 0 #000;
    user-select: text;
    -webkit-user-select: text;
}

.share-message-preview {
    font-family: 'Rajdhani', monospace;
    font-size: 1rem;
    line-height: 1.6;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #444;
    margin-bottom: 15px;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-shadow: 1px 1px 0 #000;
}

.share-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.btn-share {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    padding: 16px 24px;
    border-radius: 10px;
    border: 3px solid;
    cursor: pointer;
    font-weight: 700;
    letter-spacing: 1.5px;
    transition: all 0.2s ease;
    box-shadow: 4px 4px 0 #000;
    position: relative;
    overflow: hidden;
    pointer-events: auto;
    touch-action: manipulation;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-share-copy {
    background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
    color: white;
    border-color: white;
}

.btn-share-copy:hover {
    background: linear-gradient(135deg, #45a049 0%, #3d8b40 100%);
    box-shadow: 6px 6px 0 #000;
    transform: translate(-2px, -2px);
}

.btn-share-copy:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #000;
}

.btn-share-twitter {
    background: linear-gradient(135deg, #1DA1F2 0%, #0d8bd9 100%);
    color: white;
    border-color: white;
}

.btn-share-twitter:hover {
    background: linear-gradient(135deg, #0d8bd9 0%, #0a74b8 100%);
    box-shadow: 6px 6px 0 #000;
    transform: translate(-2px, -2px);
}

.btn-share-twitter:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #000;
}

.btn-share-facebook {
    background: linear-gradient(135deg, #1877F2 0%, #0c5ecf 100%);
    color: white;
    border-color: white;
}

.btn-share-facebook:hover {
    background: linear-gradient(135deg, #0c5ecf 0%, #0a4dad 100%);
    box-shadow: 6px 6px 0 #000;
    transform: translate(-2px, -2px);
}

.btn-share-facebook:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #000;
}

.btn-share-whatsapp {
    background: linear-gradient(135deg, #25D366 0%, #1da851 100%);
    color: white;
    border-color: white;
}

.btn-share-whatsapp:hover {
    background: linear-gradient(135deg, #1da851 0%, #128C7E 100%);
    box-shadow: 6px 6px 0 #000;
    transform: translate(-2px, -2px);
}

.btn-share-whatsapp:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #000;
}

.btn-share-reddit {
    background: linear-gradient(135deg, #FF4500 0%, #d93b00 100%);
    color: white;
    border-color: white;
}

.btn-share-reddit:hover {
    background: linear-gradient(135deg, #d93b00 0%, #b33200 100%);
    box-shadow: 6px 6px 0 #000;
    transform: translate(-2px, -2px);
}

.btn-share-reddit:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #000;
}

.btn-share-native {
    background: linear-gradient(135deg, #667eea 0%, #4c5fd5 100%);
    color: white;
    border-color: white;
}

.btn-share-image {
    background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
    color: #1b1b1b;
    border-color: #1b1b1b;
}

.btn-share-image:hover {
    background: linear-gradient(135deg, #ffb300 0%, #f57c00 100%);
    box-shadow: 6px 6px 0 #000;
    transform: translate(-2px, -2px);
}

.btn-share-image:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #000;
}

.btn-share-native:hover {
    background: linear-gradient(135deg, #4c5fd5 0%, #3847c1 100%);
    box-shadow: 6px 6px 0 #000;
    transform: translate(-2px, -2px);
}

.btn-share-native:active {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0 #000;
}

.share-copied-feedback {
    font-family: 'Rajdhani', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: #4CAF50;
    text-align: center;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    text-shadow: 0 0 10px #4CAF50, 2px 2px 0 #000;
}

.share-copied-feedback.is-error {
    color: #ff6b6b;
    text-shadow: 0 0 10px rgba(255, 107, 107, 0.8), 2px 2px 0 #000;
}

.share-copied-feedback.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===== css/game-over-transfer.css ===== */
/* ========== GAME OVER SCREEN - TRANSFER SECTION ========== */
/* Transfer button, modal, and controls */

/* Transfer Section */
.gameover-transfer {
    width: 100%;
    max-width: 720px;
    margin: 18px auto 0 auto;
    text-align: center;
    animation: fadeInUp 0.6s ease-out 0.55s backwards;
    pointer-events: auto;
}

.btn-transfer {
    width: 100%;
    padding: 16px;
    font-size: 1.35rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    color: #0d0d0f;
    background: linear-gradient(135deg, #9eff8c 0%, #6fefc8 100%);
    border: 3px solid #0d0d0f;
    border-radius: 10px;
    box-shadow: 6px 6px 0 #000, 0 0 12px rgba(158, 255, 140, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    user-select: none;
}

.btn-transfer:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 #000, 0 0 16px rgba(158, 255, 140, 0.5);
}

.btn-transfer:active {
    transform: translate(1px, 1px);
    box-shadow: 4px 4px 0 #000;
}

.transfer-help-text {
    margin-top: 8px;
    font-family: 'Rajdhani', monospace;
    color: #cfe6c8;
    text-shadow: 1px 1px 0 #000;
    font-size: 0.95rem;
}

.transfer-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.transfer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}

.transfer-dialog {
    position: relative;
    z-index: 1;
    width: min(90vw, 520px);
    background: linear-gradient(180deg, #0f121a 0%, #111827 100%);
    border: 2px solid #9eff8c;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 0 25px rgba(158, 255, 140, 0.3);
}

.transfer-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.transfer-dialog-header h3 {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: #9eff8c;
    text-shadow: 2px 2px 0 #000;
}

.transfer-close {
    background: transparent;
    border: 2px solid #9eff8c;
    color: #9eff8c;
    font-weight: 700;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000;
}

.transfer-description, .transfer-note {
    font-family: 'Rajdhani', monospace;
    color: #d4f3c5;
    margin: 0 0 12px 0;
    line-height: 1.5;
}

.transfer-label {
    display: block;
    font-family: 'Rajdhani', monospace;
    font-weight: 700;
    color: #9eff8c;
    text-shadow: 1px 1px 0 #000;
    margin-bottom: 6px;
}

.transfer-textarea {
    width: 100%;
    min-height: 120px;
    background: #0b0e14;
    color: #e4ffe0;
    border: 2px solid #9eff8c;
    border-radius: 10px;
    padding: 12px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.95rem;
    resize: vertical;
    box-shadow: inset 0 0 12px rgba(158, 255, 140, 0.15);
}

.transfer-controls,
.transfer-import-actions {
    display: flex;
    gap: 12px;
    margin: 12px 0;
    justify-content: flex-end;
}

.transfer-status {
    font-family: 'Rajdhani', monospace;
    font-weight: 700;
    margin-top: 6px;
    text-shadow: 1px 1px 0 #000;
}

.transfer-status.success {
    color: #9eff8c;
}

.transfer-status.error {
    color: #ff9e9e;
}

.transfer-status.info {
    color: #cde3ff;
}

@media (max-width: 480px) {
    .btn-transfer {
        font-size: 1.1rem;
    }

    .transfer-dialog {
        width: 92vw;
        padding: 16px;
    }

    .transfer-controls,
    .transfer-import-actions {
        flex-direction: column;
    }

    .transfer-controls button,
    .transfer-import-actions button {
        width: 100%;
    }
}

/* ===== css/game-over-responsive.css ===== */
/* ========== GAME OVER SCREEN - RESPONSIVE STYLES ========== */
/* Media queries and mobile responsiveness */

/* Desktop landscape mode - fill top to bottom */
@media (orientation: landscape) and (min-width: 800px) {
    #game-over {
        padding-top: 15px;
        padding-bottom: 15px;
        justify-content: flex-start;
    }

    .gameover-content {
        max-width: 90%;
        max-height: 100%;
        gap: 15px;
        padding: 10px 20px;
    }

    .gameover-header {
        margin-bottom: 5px;
    }

    .gameover-title {
        font-size: 3.5rem;
        letter-spacing: 6px;
    }

    .gameover-stats-grid {
        gap: 12px;
    }

    .stat-card {
        padding: 15px;
        gap: 10px;
    }

    .stat-icon {
        font-size: 2rem;
    }

    .stat-value {
        font-size: 1.4rem;
    }

    .gameover-actions {
        gap: 15px;
        margin-top: 10px;
    }

    .gameover-actions .btn-main,
    .gameover-actions .btn-secondary {
        padding: 14px 30px;
        font-size: 1.3rem;
    }
}

@media (orientation: landscape) and (min-width: 1200px) {
    #game-over {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    .gameover-content {
        max-width: 85%;
        gap: 20px;
    }

    .gameover-title {
        font-size: 4.5rem;
        letter-spacing: 8px;
    }

    .stat-card {
        padding: 20px;
    }

    .stat-icon {
        font-size: 2.5rem;
    }

    .stat-value {
        font-size: 1.5rem;
    }

    .gameover-actions .btn-main,
    .gameover-actions .btn-secondary {
        padding: 16px 40px;
        font-size: 1.5rem;
    }
}

/* Mobile responsiveness for share section */
@media (max-width: 480px) {
    .share-message-text {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    .share-message-box {
        padding: 14px;
    }

    .btn-share {
        font-size: 1.25rem;
        padding: 14px 20px;
    }

    .share-buttons {
        gap: 10px;
    }
}

/* Responsive adjustments for game over screen */
@media (max-width: 600px) {
    .gameover-content {
        gap: 12px;
        padding: 10px;
    }

    #wasted-slam {
        align-items: flex-start;
        padding-top: 60px;
        padding-bottom: 40px;
    }

    .wasted-stats-content {
        width: 100%;
        padding: 12px;
        padding-bottom: 30px;
        margin-top: 5px;
        /* Removed min-height to allow content to fit naturally on mobile screens */
    }

    .gameover-header {
        margin-bottom: 0;
    }

    .gameover-title {
        font-size: 2.2rem;
        letter-spacing: 3px;
    }

    .gameover-underline {
        margin-top: 8px;
        height: 3px;
    }

    .gameover-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        margin: 5px 0;
    }

    .stat-card {
        padding: 8px;
        gap: 8px;
    }

    .stat-icon {
        font-size: 1.5rem;
    }

    .stat-label {
        font-size: 0.7rem;
    }

    .stat-value {
        font-size: 1.1rem;
    }

    .gameover-weapons-section {
        max-width: 100%;
        margin-top: 8px;
    }

    .weapons-title {
        font-size: 1rem;
        margin: 0 0 8px 0;
    }

    .weapon-stats-container {
        max-height: 100px;
        padding: 8px;
        gap: 4px;
    }

    .weapon-stat-item {
        padding: 6px 8px;
    }

    .weapon-stat-name {
        font-size: 0.85rem;
    }

    .weapon-stat-damage {
        font-size: 0.95rem;
    }

    .gameover-actions {
        gap: 8px;
        margin-bottom: 10px;
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    .gameover-actions .btn-main,
    .gameover-actions .btn-secondary {
        padding: 10px 20px;
        font-size: 1.4rem;
    }

    .gameover-share-section {
        padding: 10px;
        margin-top: 8px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .wasted-share-card {
        padding: 12px;
        max-width: 100%;
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    /* Keep rank bar aligned with other cards on narrow screens */
    .rank-progress-card {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .share-card-header {
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
    }

    .share-card-logo {
        height: 36px;
    }

    .share-card-title {
        font-size: 1.2rem;
    }

    .stats-toggle-btn {
        font-size: 0.75rem;
        padding: 5px 10px;
    }

    .share-card-tagline {
        margin-left: 0;
        width: 100%;
        font-size: 0.85rem;
    }

    .share-title {
        font-size: 1.25rem;
        margin-bottom: 8px;
    }

    .share-message-box {
        padding: 10px;
        margin-bottom: 10px;
    }

    .share-message-text {
        font-size: 0.9rem;
        line-height: 1.5;
    }

    .share-message-preview {
        font-size: 0.85rem;
        padding: 8px;
        line-height: 1.4;
        margin-bottom: 10px;
    }

    .share-buttons {
        grid-template-columns: 1fr;
        gap: 6px;
        max-width: 100%;
    }

    .btn-share {
        font-size: 0.95rem;
        padding: 8px 12px;
    }

    .btn-main {
        padding: 12px 20px;
        font-size: 1.2rem;
        margin-top: 0;
        flex: 1;
    }

    .btn-secondary {
        padding: 10px 15px;
        font-size: 1rem;
        margin-top: 0;
        flex: 1;
    }

    .gameover-corner {
        width: 30px;
        height: 30px;
    }

    .gameover-glow-circle {
        width: 180px;
        height: 180px;
    }
}

/* ===== css/armory-base.css ===== */
/* ========== ARMORY SCREEN - BASE STYLES ========== */
/* Core layout, header, balance, and animations */

#armory-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #0a0a0a;
    display: none;
    flex-direction: column;
    align-items: center;
    pointer-events: auto;
    z-index: 25;
    overflow-y: scroll;
    overflow-x: hidden;
    padding: 10px 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    scroll-behavior: smooth;
}

/* Armory backdrop image with dark overlay */
.armory-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background-image: url('../attached_assets/armorytall_1765571724019.png');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    /* Slide-in animation for backdrop */
    opacity: 0;
    transform: translateX(-30px) scale(1.05);
    animation: backdropSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes backdropSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-30px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Slide-out animation class for closing */
.armory-backdrop.closing {
    animation: backdropSlideOut 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}

@keyframes backdropSlideOut {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(30px) scale(1.05);
    }
}

/* Dark overlay for text readability */
.armory-backdrop::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.42) 0%,
            rgba(0, 0, 0, 0.32) 30%,
            rgba(0, 0, 0, 0.36) 70%,
            rgba(0, 0, 0, 0.5) 100%
        );
    }

/* Overlay used when fading to black */
.armory-fade-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    z-index: 120;
}

#armory-screen.fading-out .armory-fade-overlay {
    opacity: 1;
}

/* Unified UX slide timing so the backdrop shows first */
.armory-ux-animate {
    opacity: 0;
    transform: translateX(-60px);
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.45s ease;
    transition-delay: 0s;
}

#armory-screen.ux-visible .armory-ux-animate {
    opacity: 1;
    transform: translateX(0);
}

#armory-screen.ux-exit .armory-ux-animate {
    opacity: 0;
    transform: translateX(70px);
}

/* Use wide backdrop for landscape/desktop */
@media (orientation: landscape), (min-width: 800px) {
    .armory-backdrop {
        background-image: url('../attached_assets/armorywide_1765571724019.png');
    }
}

/* Back button in top right corner */
.armory-back-btn-top {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    z-index: 100;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    min-height: auto !important;
    margin: 0 !important;
    border-radius: 8px !important;
    background: linear-gradient(135deg, #cc0000, #990000) !important;
    border: 2px solid #ff4444 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5), 0 0 10px rgba(255,0,0,0.3) !important;
}

#armory-screen.opening {
    animation: armorySlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes armorySlideIn {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(50px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Graceful closing animation */
#armory-screen.closing {
    animation: armorySlideOut 0.3s cubic-bezier(0.55, 0, 1, 0.45) forwards;
    pointer-events: none;
}

@keyframes armorySlideOut {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
}

#armory-screen.shake {
    animation: armoryScreenShake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes armoryScreenShake {
    0%, 100% { transform: translate(0, 0); }
    10%, 30%, 50%, 70%, 90% { transform: translate(-5px, 0); }
    20%, 40%, 60%, 80% { transform: translate(5px, 0); }
}

.purchase-particle {
    position: fixed;
    font-size: 2rem;
    pointer-events: none;
    z-index: 100;
    animation: particleFloat 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes particleFloat {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.5) rotate(360deg);
    }
}

/* Smaller secondary sparkles */
.purchase-particle-small {
    font-size: 1.2rem;
    animation: particleFloatSmall 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes particleFloatSmall {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(0.8) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(1.2) rotate(180deg);
    }
}

/* Money particle rises up with glow */
.purchase-particle-money {
    font-size: 2.5rem;
    animation: moneyRise 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

@keyframes moneyRise {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(var(--tx), calc(var(--ty) * 0.5)) scale(1.3);
    }
    100% {
        opacity: 0;
        transform: translate(var(--tx), var(--ty)) scale(0.8);
    }
}

.armory-title-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.armory-title {
    font-size: 2.5rem;
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 3px;
    color: #ffcc00;
    text-shadow: 3px 3px 0 #000, 0 0 15px rgba(255, 204, 0, 0.5);
    margin: 0 0 2px;
    text-transform: uppercase;
    animation: armoryTitlePulse 3s infinite;
}

.armory-subtitle {
    margin: 0;
    font-family: 'Saira', sans-serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: #d9d9d9;
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 0.5px;
}

@keyframes armoryTitlePulse {
    0%, 100% {
        text-shadow: 5px 5px 0 #000, 0 0 20px rgba(255, 204, 0, 0.5);
    }
    50% {
        text-shadow: 5px 5px 0 #000, 0 0 30px rgba(255, 204, 0, 0.8), 0 0 40px rgba(255, 204, 0, 0.4);
    }
}

.armory-history-btn {
    white-space: nowrap;
    width: 100%;
    max-width: 650px;
    margin-bottom: 24px;
    margin-bottom: max(24px, env(safe-area-inset-bottom, 24px));
    min-height: 50px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
}

.armory-balance {
    font-size: 1.5rem;
    font-family: 'Rajdhani', monospace;
    font-weight: 600;
    color: white;
    text-shadow: 2px 2px 0 #000;
    margin: 0;
    text-align: right;
}

.armory-balance span {
    color: #00ff00;
    font-weight: bold;
    text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 255, 0, 0.6);
}

.armory-message {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translate(-50%, -10px);
    background: rgba(0, 0, 0, 0.85);
    color: #ffd700;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: 0.3px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 2000;
}

.armory-message.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.armory-header {
    width: 100%;
    max-width: 650px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 16px;
}

.armory-reroll-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 650px;
    margin: 10px 0 12px;
}

/* Restock button enhanced animation */
.armory-reroll-block .btn-secondary {
    position: relative;
    overflow: hidden;
}

.armory-reroll-block .btn-secondary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: restockShine 3s ease-in-out infinite;
}

@keyframes restockShine {
    0%, 70%, 100% {
        left: -100%;
    }
    85% {
        left: 100%;
    }
}

.armory-offers {
    width: 100%;
    max-width: 650px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

/* ===== css/armory-purchases.css ===== */
/* ========== ARMORY SCREEN - PURCHASE PANEL ========== */
/* Purchase panel, items, and category headers */

.armory-purchase-panel {
    width: 100%;
    max-width: 650px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
    border: 2px solid rgba(255, 204, 0, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}

.armory-purchase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.armory-purchase-title {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #ffcc00;
    text-shadow: 3px 3px 0 #000;
    font-size: 1.4rem;
}

.armory-purchase-desc {
    font-family: 'Saira', sans-serif;
    font-weight: 400;
    color: #d9d9d9;
    text-shadow: 2px 2px 0 #000;
    font-size: 0.95rem;
}

.armory-purchase-icon {
    font-size: 2rem;
    filter: drop-shadow(2px 2px 0 #000);
}

.armory-purchase-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.armory-purchase-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 204, 0, 0.3);
    box-shadow: inset 0 0 10px rgba(255, 204, 0, 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
}

.armory-purchase-item .upgrade-icon {
    font-size: 1.2rem;
    min-width: 36px;
    min-height: 36px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(255, 204, 0, 0.35), rgba(255, 204, 0, 0.15));
    border: 1px solid rgba(255, 204, 0, 0.3);
}

.armory-purchase-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.armory-purchase-name {
    font-family: 'Rajdhani', monospace;
    font-weight: 600;
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    letter-spacing: 0.5px;
}

.armory-purchase-rarity {
    font-family: 'Rajdhani', monospace;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: fit-content;
    text-shadow: 1px 1px 0 #000;
    letter-spacing: 0.4px;
}

.armory-purchase-level {
    font-family: 'Rajdhani', monospace;
    font-weight: 500;
    color: #8fdd73;
    text-shadow: 2px 2px 0 #000;
    font-size: 0.9rem;
}

.armory-purchase-empty {
    font-family: 'Saira', sans-serif;
    font-weight: 400;
    color: #d9d9d9;
    text-shadow: 2px 2px 0 #000;
    text-align: center;
}

.armory-purchase-item:hover {
    background: rgba(255, 204, 0, 0.15);
    border-color: rgba(255, 204, 0, 0.5);
    transform: scale(1.02);
}

.armory-purchase-item:active {
    transform: scale(0.98);
}

/* Category Headers - Mobile Game Style */
.upgrade-category-header {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    color: #fff;
    text-shadow: 3px 3px 0 #000;
    text-transform: uppercase;
    padding: 12px 16px;
    margin-top: 16px;
    margin-bottom: 6px;
    background:
        linear-gradient(90deg, rgba(255, 204, 0, 0.2) 0%, rgba(255, 204, 0, 0.05) 100%);
    border-left: 5px solid #ffcc00;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    min-height: 56px;
}

.upgrade-category-header:active {
    background:
        linear-gradient(90deg, rgba(255, 204, 0, 0.35) 0%, rgba(255, 204, 0, 0.1) 100%);
    transform: scale(0.98);
}

.upgrade-category-header .category-arrow {
    margin-left: auto;
    font-size: 1rem;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(1px 1px 0 #000);
}

.upgrade-category-header.expanded .category-arrow {
    transform: rotate(90deg);
}

.category-icon {
    font-size: 1.6rem;
    filter: drop-shadow(2px 2px 0 #000);
    animation: iconBounce 2s infinite;
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* ===== css/armory-cards.css ===== */
/* ========== ARMORY SCREEN - UPGRADE CARDS ========== */
/* Upgrade cards, category colors, affordability states */

/* Upgrade Cards - Mobile Game Style */
.upgrade-card {
    background: linear-gradient(145deg, rgba(26, 26, 26, 0.85) 0%, rgba(42, 42, 42, 0.85) 100%);
    border: 2px solid #555;
    border-radius: 10px;
    padding: 10px;
    display: none;
    gap: 8px;
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

.upgrade-card.visible {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    min-height: 90px;
    animation: cardSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
}

/* Staggered animation delays for armory cards - delayed 0.5s to show backdrop first */
.upgrade-card.visible:nth-child(1) { animation-delay: 0.6s; }
.upgrade-card.visible:nth-child(2) { animation-delay: 0.65s; }
.upgrade-card.visible:nth-child(3) { animation-delay: 0.7s; }
.upgrade-card.visible:nth-child(4) { animation-delay: 0.75s; }
.upgrade-card.visible:nth-child(5) { animation-delay: 0.8s; }
.upgrade-card.visible:nth-child(6) { animation-delay: 0.85s; }

/* Hover effects for upgrade cards */
.upgrade-card.visible:hover {
    transform: translateX(5px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 20px rgba(255, 204, 0, 0.2);
}

.upgrade-card.slide-out {
    animation: slideOutRight 0.5s cubic-bezier(0.6, 0.04, 0.98, 0.34) forwards;
}

.upgrade-card.slide-in {
    animation: slideInLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.upgrade-card.blank {
    background: linear-gradient(145deg, #3a3a3a 0%, #4a4a4a 100%);
    border: 2px solid #666;
    opacity: 0.5;
    min-height: 90px;
}

.upgrade-card.blank .upgrade-icon,
.upgrade-card.blank .upgrade-info,
.upgrade-card.blank .upgrade-buy {
    visibility: hidden;
}

.upgrade-card.blank .upgrade-icon {
    width: 50px;
    height: 50px;
}

.upgrade-card.blank .upgrade-info {
    min-height: 60px;
}

.upgrade-card.blank .upgrade-buy {
    min-width: 70px;
    min-height: 40px;
}

@keyframes cardSlideIn {
    0% {
        opacity: 0;
        transform: translateX(-50px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes purchaseFlash {
    0% {
        filter: brightness(1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        filter: brightness(2);
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8), 0 0 60px rgba(255, 215, 0, 0.4);
    }
    100% {
        filter: brightness(1);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

.upgrade-card.purchase-flash {
    animation: purchaseFlash 0.3s ease-out;
}

@keyframes slideOutRight {
    0% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateX(150%) scale(0.8);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-150%) scale(0.8);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* Category-specific colors - with translucency */
.upgrade-card-offense {
    border-color: #ff4444;
    background: linear-gradient(145deg, rgba(26, 10, 10, 0.85) 0%, rgba(42, 20, 20, 0.85) 100%);
}

.upgrade-card-defense {
    border-color: #4444ff;
    background: linear-gradient(145deg, rgba(10, 10, 26, 0.85) 0%, rgba(20, 20, 42, 0.85) 100%);
}

.upgrade-card-tactical {
    border-color: #ffaa00;
    background: linear-gradient(145deg, rgba(26, 20, 0, 0.85) 0%, rgba(42, 34, 16, 0.85) 100%);
}

.upgrade-card-utility {
    border-color: #00ff88;
    background: linear-gradient(145deg, rgba(10, 26, 20, 0.85) 0%, rgba(20, 42, 32, 0.85) 100%);
}

.upgrade-card-special {
    border-color: #ff00ff;
    background: linear-gradient(145deg, rgba(26, 10, 26, 0.85) 0%, rgba(42, 20, 42, 0.85) 100%);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 0, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: specialGlow 2s infinite;
}

@keyframes specialGlow {
    0%, 100% {
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.6),
            0 0 20px rgba(255, 0, 255, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
    50% {
        box-shadow:
            0 4px 8px rgba(0, 0, 0, 0.6),
            0 0 30px rgba(255, 0, 255, 0.6),
            inset 0 1px 0 rgba(255, 255, 255, 0.1);
    }
}

.special-badge {
    background: linear-gradient(135deg, #ff00ff, #aa00aa);
    color: white;
    animation: badgePulse 1.5s infinite;
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Affordability states */
.upgrade-card.unaffordable {
    opacity: 0.6;
    filter: grayscale(0.3);
}

.upgrade-card.maxed {
    border-color: #00ff00;
    opacity: 0.8;
    background: linear-gradient(145deg, #0a2a0a 0%, #1a3a1a 100%);
}

.upgrade-card.maxed::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent, rgba(0, 255, 0, 0.05));
    pointer-events: none;
}

/* Upgrade Icon */
.upgrade-icon {
    font-size: 2rem;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Upgrade Info */
.upgrade-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0; /* Allow text truncation if needed */
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.upgrade-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.upgrade-name {
    font-family: 'Rajdhani', monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #000;
    flex: 1;
    min-width: 0;
}

.upgrade-rarity-badge {
    font-family: 'Rajdhani', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    padding: 3px 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    text-shadow: 1px 1px 0 #000;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.upgrade-level-badge {
    font-family: 'Rajdhani', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, 0.6);
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid rgba(255, 204, 0, 0.5);
    text-shadow: 1px 1px 0 #000;
    white-space: nowrap;
}

.upgrade-desc {
    font-family: 'Saira', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: #ccc;
}

.upgrade-effect {
    font-family: 'Rajdhani', monospace;
    font-size: 0.75rem;
    font-weight: 500;
    color: #aaffaa;
    text-shadow: 1px 1px 0 #000;
}

/* Progress Bar - Mobile Game Style */
.upgrade-progress-container {
    position: relative;
    width: 100%;
    height: 18px;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8)),
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 4px,
            rgba(255, 255, 255, 0.02) 4px,
            rgba(255, 255, 255, 0.02) 8px
        );
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
}

.upgrade-progress-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background:
        linear-gradient(90deg, #00aa00 0%, #00ff00 50%, #00aa00 100%);
    box-shadow:
        inset 0 2px 4px rgba(255, 255, 255, 0.4),
        inset 0 -2px 4px rgba(0, 0, 0, 0.3),
        0 0 10px rgba(0, 255, 0, 0.4);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: progressShine 2s infinite;
}

@keyframes progressShine {
    0%, 100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(1.2);
    }
}

.upgrade-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Rajdhani', monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-shadow:
        1px 1px 2px #000,
        -1px -1px 2px #000,
        1px -1px 2px #000,
        -1px 1px 2px #000,
        0 0 4px rgba(0, 0, 0, 0.8);
    z-index: 1;
}

/* ===== css/armory-buttons.css ===== */
/* ========== ARMORY SCREEN - BUY BUTTONS ========== */
/* Buy button styles and hover effects */

/* Buy Button - Mobile Game Style */
.upgrade-buy {
    background: linear-gradient(145deg, #00ff44 0%, #00cc00 100%);
    color: #000;
    border: 3px solid #fff;
    border-radius: 10px;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Rajdhani', monospace;
    cursor: pointer;
    box-shadow:
        0 4px 0 #009900,
        0 6px 8px rgba(0, 0, 0, 0.4);
    text-transform: uppercase;
    transition: all 0.15s ease;
    min-width: 110px;
    white-space: nowrap;
    flex-shrink: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: auto;
}

.upgrade-buy.unaffordable {
    background: linear-gradient(145deg, #555 0%, #333 100%);
    color: #999;
    border-color: #666;
    box-shadow:
        0 4px 0 #222,
        0 6px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.upgrade-buy::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.upgrade-buy:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow:
        0 0 0 #009900,
        0 2px 4px rgba(0, 0, 0, 0.4);
}

.upgrade-buy:disabled {
    background: linear-gradient(145deg, #555 0%, #333 100%);
    color: #888;
    cursor: not-allowed;
    border-color: #666;
    box-shadow:
        0 4px 0 #222,
        0 6px 8px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.upgrade-buy:disabled::before {
    display: none;
}

/* Hover effects only on non-touch devices */
@media (hover: hover) {
    .upgrade-buy:hover:not(:disabled)::before {
        left: 100%;
    }

    .upgrade-buy:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow:
            0 6px 0 #009900,
            0 10px 12px rgba(0, 0, 0, 0.5);
    }
}

/* ===== css/armory-responsive.css ===== */
/* ========== ARMORY SCREEN - RESPONSIVE STYLES ========== */
/* Media queries for tablet and mobile */

/* Desktop landscape mode - fill top to bottom */
@media (orientation: landscape) and (min-width: 800px) {
    #armory-screen {
        padding: 15px 20px;
        justify-content: flex-start;
    }

    .armory-header {
        max-width: 90%;
        margin-top: 10px;
    }

    .armory-title {
        font-size: 3.2rem;
    }

    .armory-subtitle {
        font-size: 1.1rem;
    }

    .armory-balance {
        font-size: 2rem;
    }

    .armory-offers {
        max-width: 90%;
        gap: 12px;
    }

    .upgrade-card.visible {
        padding: 18px;
    }

    .upgrade-icon {
        width: 55px;
        height: 55px;
        font-size: 2.5rem;
    }

    .upgrade-name {
        font-size: 1.35rem;
    }

    .upgrade-rarity-badge {
        font-size: 0.85rem;
    }

    .upgrade-level-badge {
        font-size: 0.9rem;
    }

    .upgrade-desc {
        font-size: 1.1rem;
    }

    .upgrade-effect {
        font-size: 1rem;
    }

    .upgrade-progress-text {
        font-size: 0.9rem;
    }

    .upgrade-buy {
        padding: 14px 24px;
        font-size: 1.25rem;
    }

    .armory-history-btn {
        max-width: 90%;
        font-size: 1.2rem;
        padding: 14px 24px;
    }
}

@media (orientation: landscape) and (min-width: 1200px) {
    #armory-screen {
        padding: 20px 30px;
    }

    .armory-header {
        max-width: 85%;
    }

    .armory-title {
        font-size: 3.8rem;
    }

    .armory-subtitle {
        font-size: 1.25rem;
    }

    .armory-balance {
        font-size: 2.4rem;
    }

    .armory-offers {
        max-width: 85%;
        gap: 15px;
    }

    .upgrade-card.visible {
        padding: 22px;
    }

    .upgrade-icon {
        width: 65px;
        height: 65px;
        font-size: 3rem;
    }

    .upgrade-name {
        font-size: 1.5rem;
    }

    .upgrade-rarity-badge {
        font-size: 0.95rem;
    }

    .upgrade-level-badge {
        font-size: 1rem;
    }

    .upgrade-desc {
        font-size: 1.2rem;
    }

    .upgrade-effect {
        font-size: 1.1rem;
    }

    .upgrade-progress-text {
        font-size: 1rem;
    }

    .upgrade-buy {
        padding: 16px 28px;
        font-size: 1.35rem;
    }

    .armory-history-btn {
        max-width: 85%;
        font-size: 1.3rem;
        padding: 16px 28px;
    }
}

/* Tablet & mobile armory refinements */
@media (max-width: 900px) {
    .armory-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-top: 12px;
    }

    .armory-title-block {
        width: 100%;
    }

    .armory-title {
        margin: 4px 0 6px 0;
    }

    .armory-subtitle {
        margin: 0;
    }

    .armory-balance {
        width: 100%;
        text-align: center;
    }

    .upgrade-card.visible {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
    }

    .upgrade-info {
        grid-column: 2;
        grid-row: 1;
    }

    .upgrade-buy {
        grid-column: 1 / 3;
        grid-row: 2;
        width: 100%;
        min-width: 0;
        margin-top: 6px;
    }
}

/* Mobile-specific armory optimizations */
@media (max-width: 600px) {
    #armory-screen {
        padding: 12px 8px;
        padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    }

    .armory-title-block {
        align-items: flex-start;
        width: 100%;
    }

    .armory-title {
        font-size: 2rem;
        margin: 8px 0 12px 0;
        text-shadow: 3px 3px 0 #000, 0 0 15px rgba(255, 204, 0, 0.5);
    }

    .armory-balance {
        font-size: 1.3rem;
        margin-bottom: 0;
    }

    .armory-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .armory-history-btn {
        width: 100%;
        margin-bottom: 40px;
        margin-bottom: max(40px, calc(env(safe-area-inset-bottom, 20px) + 20px));
    }

    .armory-offers {
        max-width: 100%;
        gap: 10px;
        padding: 0;
        margin-bottom: 16px;
    }

    .armory-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .armory-reroll-block {
        width: 100%;
        align-items: flex-start;
    }

    .armory-purchase-panel {
        max-width: 100%;
    }

    /* Upgrade cards - mobile-first grid layout */
    .upgrade-card.visible {
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        gap: 10px;
        padding: 14px;
    }

    .upgrade-icon {
        grid-row: 1 / 3;
        width: 56px;
        height: 56px;
        font-size: 2.5rem;
    }

    .upgrade-info {
        grid-column: 2;
        grid-row: 1;
        gap: 6px;
    }

    .upgrade-buy {
        grid-column: 1 / 3;
        grid-row: 2;
        width: 100%;
        padding: 16px 20px;
        font-size: 1.1rem;
        min-height: 52px;
        margin-top: 4px;
    }

    .upgrade-name {
        font-size: 1rem;
    }

    .upgrade-level-badge {
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .upgrade-desc {
        font-size: 0.8rem;
        line-height: 1.3;
    }

    .upgrade-effect {
        font-size: 0.75rem;
    }

    .upgrade-progress-container {
        height: 22px;
    }

    .upgrade-progress-text {
        font-size: 0.7rem;
    }

    /* Back button - optimized for mobile */
    #armory-back-btn {
        width: calc(100% - 16px);
        max-width: 400px;
        margin: 8px auto 16px auto;
        padding: 16px 40px;
        font-size: 1.3rem;
        min-height: 56px;
        border-radius: 12px;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    #armory-screen {
        padding: 10px 6px;
        padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
    }

    .armory-title {
        font-size: 1.7rem;
        margin: 6px 0 10px 0;
    }

    .armory-balance {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }

    .armory-offers {
        gap: 8px;
    }

    .upgrade-card.visible {
        padding: 12px;
        gap: 8px;
    }

    .upgrade-icon {
        width: 48px;
        height: 48px;
        font-size: 2.2rem;
    }

    .upgrade-name {
        font-size: 0.95rem;
    }

    .upgrade-level-badge {
        font-size: 0.65rem;
        padding: 2px 5px;
    }

    .upgrade-desc {
        font-size: 0.75rem;
    }

    .upgrade-effect {
        font-size: 0.7rem;
    }

    .upgrade-progress-container {
        height: 20px;
    }

    .upgrade-buy {
        padding: 14px 16px;
        font-size: 1rem;
        min-height: 48px;
    }

    #armory-back-btn {
        padding: 14px 32px;
        font-size: 1.2rem;
        min-height: 52px;
    }
}

/* ===== css/pause.css ===== */
/* ========== PAUSE OVERLAY ========== */

#pause-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    pointer-events: none;
    /* Dark overlay disabled for backdrop visibility testing */
    /* backdrop-filter: blur(4px); */
    /* -webkit-backdrop-filter: blur(4px); */
}

#pause-overlay.visible {
    display: flex;
    pointer-events: auto;
}

.pause-content {
    text-align: center;
    padding: 40px;
    background: rgba(20, 20, 20, 0.95);
    border: 3px solid #ffcc00;
    border-radius: 12px;
    box-shadow: 0 0 40px rgba(255, 204, 0, 0.5), 0 0 80px rgba(255, 204, 0, 0.2);
    max-width: 90%;
    animation: pauseFadeIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pause-icon {
    font-size: 4rem;
    margin-bottom: 20px;
    opacity: 0.9;
    animation: pauseIconPulse 2s ease-in-out infinite;
    filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.5));
}

.pause-title {
    color: #ffcc00;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 5px;
    text-transform: uppercase;
    text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 204, 0, 0.5);
    margin: 0 0 15px 0;
    animation: pauseTitleGlow 2s ease-in-out infinite;
}

@keyframes pauseTitleGlow {
    0%, 100% {
        text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255, 204, 0, 0.5);
    }
    50% {
        text-shadow: 3px 3px 0 #000, 0 0 30px rgba(255, 204, 0, 0.8), 0 0 40px rgba(255, 204, 0, 0.4);
    }
}

.pause-message {
    color: #ccc;
    font-family: 'Saira', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    margin: 0;
    opacity: 0.9;
    animation: pauseMessageFade 3s ease-in-out infinite;
}

@keyframes pauseMessageFade {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

.resume-button {
    margin-top: 18px;
    padding: 14px 28px;
    background: linear-gradient(135deg, #ffcc00, #ffaa00);
    color: #000;
    border: none;
    border-radius: 8px;
    font-family: 'Rajdhani', monospace;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 4px 0 #b58c00, 0 0 20px rgba(255, 204, 0, 0.4);
    transition: all 0.15s ease;
    animation: resumeButtonPulse 1.5s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.resume-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: resumeShine 2s ease-in-out infinite;
}

@keyframes resumeShine {
    0%, 60%, 100% { left: -100%; }
    80% { left: 100%; }
}

@keyframes resumeButtonPulse {
    0%, 100% {
        box-shadow: 0 4px 0 #b58c00, 0 0 20px rgba(255, 204, 0, 0.4);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 4px 0 #b58c00, 0 0 30px rgba(255, 204, 0, 0.6);
        transform: scale(1.02);
    }
}

.resume-button:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 6px 0 #b58c00, 0 0 30px rgba(255, 204, 0, 0.6);
}

.resume-button:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 0 2px 0 #b58c00, 0 0 10px rgba(255, 204, 0, 0.3);
}

@keyframes pauseFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pauseIconPulse {
    0%, 100% {
        opacity: 0.7;
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 204, 0, 0.5));
    }
    50% {
        opacity: 1;
        transform: scale(1.15);
        filter: drop-shadow(0 0 20px rgba(255, 204, 0, 0.8));
    }
}

/* Purchase Details Modal */
.purchase-details-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.purchase-details-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
}

.purchase-details-content {
    position: relative;
    background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(30, 30, 30, 0.98));
    border: 3px solid #ffcc00;
    border-radius: 15px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(255, 204, 0, 0.1);
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        transform: scale(0.9) translateY(-20px);
        opacity: 0;
    }
    to {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

.purchase-details-close {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 0, 0, 0.7);
    border: 2px solid #ff0000;
    color: white;
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: monospace;
    font-weight: bold;
    transition: all 0.2s ease;
    box-shadow: 2px 2px 0 #000;
    text-shadow: 2px 2px 0 #000;
}

.purchase-details-close:hover {
    background: rgba(255, 0, 0, 0.9);
    transform: scale(1.1);
}

.purchase-details-close:active {
    transform: scale(0.95);
}

.purchase-details-icon {
    font-size: 4rem;
    text-align: center;
    margin-bottom: 15px;
    filter: drop-shadow(3px 3px 0 #000);
}

.purchase-details-name {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2rem;
    color: #ffcc00;
    text-align: center;
    text-shadow: 3px 3px 0 #000;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
}

.purchase-details-level {
    font-family: 'Rajdhani', monospace;
    font-size: 1.2rem;
    color: #8fdd73;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    font-weight: 600;
    margin-bottom: 20px;
}

.purchase-details-desc {
    font-family: 'Saira', sans-serif;
    font-size: 1rem;
    color: #d9d9d9;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    margin-bottom: 15px;
    line-height: 1.5;
}

.purchase-details-effect {
    font-family: 'Rajdhani', monospace;
    font-size: 1.1rem;
    color: #fff;
    text-align: center;
    text-shadow: 2px 2px 0 #000;
    font-weight: 600;
    margin-bottom: 25px;
    padding: 12px;
    background: rgba(255, 204, 0, 0.15);
    border-radius: 8px;
    border: 1px solid rgba(255, 204, 0, 0.3);
}

.purchase-details-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.purchase-detail-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    border: 1px solid rgba(255, 204, 0, 0.2);
}

.purchase-detail-label {
    font-family: 'Saira', sans-serif;
    font-size: 0.95rem;
    color: #d9d9d9;
    text-shadow: 2px 2px 0 #000;
}

.purchase-detail-value {
    font-family: 'Rajdhani', monospace;
    font-size: 1.1rem;
    color: #ffcc00;
    text-shadow: 2px 2px 0 #000;
    font-weight: 600;
}

/* Mobile responsive adjustments */
@media (max-width: 480px) {
    .pause-content {
        padding: 30px 20px;
    }

    .pause-icon {
        font-size: 3rem;
        margin-bottom: 15px;
    }

    .pause-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .pause-message {
        font-size: 0.9rem;
    }

    .purchase-details-content {
        padding: 20px;
        width: 95%;
    }

    .purchase-details-name {
        font-size: 1.5rem;
    }

    .purchase-details-icon {
        font-size: 3rem;
    }
}

/* ===== css/rank-system-base.css ===== */
/* ========== RANK SYSTEM - BASE STYLES ========== */
/* Title screen rank strip, game over rank card, and basic elements */

/* Title Screen Rank Strip */
.title-rank-strip {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.95) 0%, rgba(35, 35, 45, 0.95) 100%);
    border: 2px solid #444;
    border-radius: 8px;
    min-width: 260px;
    max-width: 320px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.title-rank-strip.visible {
    display: flex;
    opacity: 0;
    animation: rankStripFadeIn 0.5s ease-out forwards;
}

@keyframes rankStripFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.rank-strip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: center;
}

.rank-badge-small {
    font-size: 1.4rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.rank-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.3rem;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 10px rgba(255, 215, 0, 0.3);
}

.rank-badge-small,
.rank-badge {
    cursor: pointer;
}

.title-rank-strip .rank-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #333;
}

.title-rank-strip .rank-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffaa00);
    border-radius: 3px;
    transition: width 0.5s ease-out;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.rank-strip-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
}

.rank-next-reward {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    color: #88ff88;
    text-align: center;
}

.rank-progress-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    font-weight: 400;
    color: #888;
}

/* Game Over Rank Progress Card */
.rank-progress-card {
    width: 100%;
    max-width: 500px;
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.95) 0%, rgba(40, 35, 50, 0.95) 100%);
    border: 3px solid #ffd700;
    border-radius: 12px;
    padding: 16px;
    margin: 10px auto 5px auto;
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: rankCardSlideIn 0.6s ease-out 0.4s backwards;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

@keyframes rankCardSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Rank Up Banner */
.rank-up-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #ffd700, #ffaa00, #ffd700);
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    animation: rankUpPulse 1s ease-in-out infinite;
    z-index: 1;
}

@keyframes rankUpPulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
    }
    50% {
        box-shadow: 0 0 30px rgba(255, 215, 0, 0.8);
    }
}

.rank-up-text {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.2rem;
    color: #000;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}

.rank-progress-card.has-rank-up {
    padding-top: 60px;
}

.rank-progress-card.has-rank-up .rank-up-banner {
    display: flex;
}

/* Rank Card Content */
.rank-card-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rank-badge {
    font-size: 3rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    animation: rankBadgeFloat 3s ease-in-out infinite;
}

@keyframes rankBadgeFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.rank-card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rank-card-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.4);
}

.rank-reward {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: #88ff88;
    padding: 6px 12px;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(136, 255, 136, 0.3);
    border-radius: 4px;
    display: inline-block;
    animation: rewardGlow 2s ease-in-out infinite;
}

@keyframes rewardGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(136, 255, 136, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(136, 255, 136, 0.6);
    }
}

.rank-progress-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rank-progress-card .rank-progress-bar {
    width: 100%;
    height: 10px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #444;
}

.rank-progress-card .rank-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd700, #ffaa00, #ff8800);
    border-radius: 5px;
    transition: width 0.8s ease-out;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
    position: relative;
}

.rank-progress-card .rank-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    animation: rankProgressShine 2s infinite;
}

@keyframes rankProgressShine {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.rank-progress-card .rank-progress-text {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.85rem;
    color: #aaa;
    text-align: right;
}

/* ===== css/rank-system-locked.css ===== */
/* ========== RANK SYSTEM - LOCKED UPGRADES ========== */
/* Rank-locked upgrade cards in Arms Dealer */

/* Rank-locked upgrade cards in Arms Dealer */
.upgrade-card.rank-locked {
    opacity: 0.6;
    border-color: #555;
    background: linear-gradient(135deg, rgba(30, 30, 35, 0.95) 0%, rgba(40, 40, 50, 0.95) 100%);
    position: relative;
}

.upgrade-card.rank-locked::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(0, 0, 0, 0.1) 10px,
        rgba(0, 0, 0, 0.1) 20px
    );
    pointer-events: none;
    border-radius: inherit;
}

.upgrade-card.rank-locked .upgrade-buy {
    background: linear-gradient(135deg, #2f2f2f 0%, #3f3f3f 100%);
    color: #ff4d4d;
    border-color: #ff4d4d;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 10px rgba(255, 77, 77, 0.4);
}

.upgrade-card.rank-locked .upgrade-buy:disabled {
    color: #ff8080;
    border-color: #ff4d4d;
}

.upgrade-card.rank-locked .upgrade-buy.locked .lock-icon {
    font-size: 1.35rem;
    margin-right: 8px;
    display: inline-block;
    transform: translateY(1px);
}

.upgrade-card.rank-locked .upgrade-buy.locked .lock-text {
    font-size: 1.05rem;
}

.upgrade-card.rank-locked .upgrade-icon {
    filter: grayscale(50%);
}

.upgrade-card.rank-locked .upgrade-name,
.upgrade-card.rank-locked .upgrade-desc,
.upgrade-card.rank-locked .upgrade-effect {
    color: #888;
}

/* ===== css/rank-system-modal.css ===== */
/* ========== RANK SYSTEM - INFO BUTTON & MODAL ========== */
/* Rank info button and perks modal */

/* ========== RANK INFO BUTTON ========== */

.rank-info-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #ffd700;
    background: rgba(255, 215, 0, 0.15);
    color: #ffd700;
    font-family: 'Georgia', serif;
    font-size: 14px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    margin-left: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-shadow: 0 0 5px rgba(255, 215, 0, 0.5);
}

.rank-info-btn-right {
    margin-left: auto;
}

.rank-card-info-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    margin-left: 0;
}

.rank-info-btn:hover {
    background: rgba(255, 215, 0, 0.3);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
    transform: scale(1.1);
}

.rank-info-btn:active {
    transform: scale(0.95);
}

/* ========== RANK PERKS MODAL ========== */

.rank-perks-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-perks-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(3px);
}

.rank-perks-dialog {
    position: relative;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    background: linear-gradient(135deg, rgba(20, 20, 25, 0.98) 0%, rgba(35, 35, 45, 0.98) 100%);
    border: 3px solid #ffd700;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7), 0 0 30px rgba(255, 215, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: rankPerksModalIn 0.3s ease-out;
}

@keyframes rankPerksModalIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.rank-perks-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 2px solid rgba(255, 215, 0, 0.3);
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.1) 0%, transparent 100%);
}

.rank-perks-header h3 {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.6rem;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 3px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 215, 0, 0.4);
}

.rank-perks-close {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 100, 100, 0.2);
    color: #ff8888;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rank-perks-close:hover {
    background: rgba(255, 100, 100, 0.4);
    color: #ff4444;
    transform: scale(1.1);
}

.rank-perks-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
}

/* Rank item styling */
.rank-perk-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease;
}

.rank-perk-item.achieved {
    border-color: rgba(136, 255, 136, 0.4);
    background: rgba(136, 255, 136, 0.08);
}

.rank-perk-item.current {
    border-color: #ffd700;
    background: rgba(255, 215, 0, 0.1);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.2);
}

.rank-perk-item.locked {
    opacity: 0.6;
}

.rank-perk-badge {
    font-size: 1.8rem;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.rank-perk-item.locked .rank-perk-badge {
    filter: grayscale(70%) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.rank-perk-info {
    flex: 1;
    min-width: 0;
}

.rank-perk-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.rank-perk-item.current .rank-perk-title {
    color: #ffd700;
}

.rank-perk-item.achieved .rank-perk-title {
    color: #88ff88;
}

.rank-perk-kills {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.75rem;
    color: #888;
    margin-bottom: 4px;
}

.rank-perk-reward {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #88ff88;
    padding: 4px 8px;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(136, 255, 136, 0.3);
    border-radius: 4px;
    display: inline-block;
}

.rank-perk-item.locked .rank-perk-reward {
    color: #aaa;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
}

.rank-perk-flavor {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.8rem;
    font-style: italic;
    color: #777;
    margin-top: 4px;
}

.rank-perk-check {
    color: #88ff88;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* ===== css/rank-system-responsive.css ===== */
/* ========== RANK SYSTEM - RESPONSIVE STYLES ========== */
/* Media queries for mobile and small screens */

/* Mobile adjustments for rank system */
@media (max-width: 480px) {
    .title-rank-strip {
        min-width: 220px;
        max-width: 280px;
        padding: 10px 15px;
        margin-top: 5px;
    }

    .rank-title {
        font-size: 1.1rem;
    }

    .rank-next-reward {
        font-size: 0.8rem;
    }

    .rank-progress-card {
        padding: 12px;
    }

    .rank-badge {
        font-size: 2.5rem;
    }

    .rank-card-title {
        font-size: 1.3rem;
    }

    .rank-card-content {
        gap: 12px;
    }
}

/* Small height screens - prevent rank strip from overlapping continue button */
@media (max-height: 600px) {
    .title-rank-strip {
        padding: 8px 12px;
        gap: 4px;
        margin-top: 0;
    }

    .title-rank-strip .rank-progress-bar {
        height: 4px;
    }

    .rank-badge-small {
        font-size: 1.2rem;
    }

    .rank-title {
        font-size: 1rem;
    }

    .rank-next-reward {
        font-size: 0.75rem;
    }

    .rank-progress-text {
        font-size: 0.7rem;
    }
}

/* Very small screens - compact layout */
@media (max-height: 500px) {
    .title-rank-strip {
        padding: 6px 10px;
        gap: 3px;
        min-width: 180px;
        max-width: 240px;
    }

    .title-rank-strip .rank-strip-footer {
        display: none;
    }
}

/* Mobile adjustments for rank modal */
@media (max-width: 480px) {
    .rank-info-btn {
        width: 20px;
        height: 20px;
        font-size: 12px;
        margin-left: 6px;
    }

    .rank-perks-dialog {
        width: 95%;
        max-height: 85vh;
    }

    .rank-perks-header {
        padding: 12px 16px;
    }

    .rank-perks-header h3 {
        font-size: 1.3rem;
    }

    .rank-perk-item {
        padding: 10px;
        gap: 10px;
    }

    .rank-perk-badge {
        font-size: 1.5rem;
    }

    .rank-perk-title {
        font-size: 1rem;
    }

    .rank-perk-reward {
        font-size: 0.8rem;
    }
}

/* ===== css/helicopter.css ===== */
/*
 * Helicopter Ride Dialog Styles
 * Dialog shown when player enters the rescue helicopter
 */

.helicopter-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    animation: helicopterFadeIn 0.3s ease-out;
}

@keyframes helicopterFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.helicopter-dialog-content {
    background: linear-gradient(135deg, #1a3010 0%, #2d5016 50%, #1a3010 100%);
    border: 4px solid #4CAF50;
    border-radius: 16px;
    padding: 24px;
    max-width: 340px;
    width: 90%;
    text-align: center;
    box-shadow:
        0 0 30px rgba(76, 175, 80, 0.5),
        inset 0 0 20px rgba(0, 0, 0, 0.3);
    animation: helicopterSlideIn 0.4s ease-out;
}

@keyframes helicopterSlideIn {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.helicopter-dialog-icon {
    font-size: 64px;
    margin-bottom: 8px;
    animation: helicopterBounce 1s ease-in-out infinite;
}

@keyframes helicopterBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.helicopter-dialog-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 36px;
    color: #FFFFFF;
    margin: 0 0 8px 0;
    text-shadow: 3px 3px 0 #000;
    letter-spacing: 2px;
}

.helicopter-dialog-destination {
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #4CAF50;
    margin-bottom: 16px;
    text-shadow: 2px 2px 0 #000;
}

.helicopter-dialog-perks-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #FFD700;
    margin-bottom: 12px;
    text-shadow: 1px 1px 0 #000;
}

.helicopter-dialog-perks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    max-height: 280px;
    overflow-y: auto;
}

.helicopter-perk {
    background: rgba(0, 0, 0, 0.5);
    border-radius: 6px;
    padding: 8px 12px;
    text-align: left;
    border-left: 4px solid #CCCCCC;
}

.helicopter-perk-name {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
}

.helicopter-perk-desc {
    display: block;
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    color: #AAAAAA;
}

/* Rarity colors for perk items */
.helicopter-perk.perk-rarity-common {
    border-left-color: #CCCCCC;
}

.helicopter-perk.perk-rarity-uncommon {
    border-left-color: #5FD35F;
}

.helicopter-perk.perk-rarity-rare {
    border-left-color: #4A9EFF;
}

.helicopter-perk.perk-rarity-mythic {
    border-left-color: #FF6B00;
}

.helicopter-dialog-continue {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.1);
    padding: 12px 24px;
    border-radius: 8px;
    animation: helicopterPulse 1.5s ease-in-out infinite;
}

@keyframes helicopterPulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.98);
    }
}

/* ===== css/tactile-feedback.css ===== */
/* ========== TACTILE FEEDBACK & MICRO-INTERACTIONS ========== */
/* Elegant UX polish with subtle animations and transitions */

/* ===== Global Touch/Click Feedback ===== */
.touchable {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    cursor: pointer;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                filter 0.1s ease;
}

.touchable:active {
    transform: scale(0.96);
    filter: brightness(0.92);
}

/* ===== Enhanced Button Press Animation ===== */
.btn-main,
.btn-secondary {
    position: relative;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, box-shadow;
}

/* Ripple effect on buttons */
.btn-main::after,
.btn-secondary::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease-out, height 0.4s ease-out, opacity 0.4s ease-out;
    pointer-events: none;
}

.btn-main:active::after,
.btn-secondary:active::after {
    width: 200%;
    height: 200%;
    opacity: 1;
    transition: width 0s, height 0s, opacity 0s;
}

/* Subtle press-down shadow shift */
.btn-main:active {
    transform: translate(3px, 3px) scale(0.98);
    box-shadow: 2px 2px 0 #000, 0 0 10px rgba(0, 221, 0, 0.3);
    transition: all 0.08s ease;
}

.btn-secondary:active {
    transform: translate(3px, 3px) scale(0.98);
    box-shadow: 2px 2px 0 #000, 0 0 8px rgba(255, 204, 0, 0.2);
    transition: all 0.08s ease;
}

/* ===== Perk Card Tactile Enhancements ===== */
.perk-card {
    transform-origin: center center;
    will-change: transform, box-shadow;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                filter 0.15s ease;
}

/* Hover lift effect */
.perk-card:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 8px 12px 0 #000, 0 0 25px rgba(255, 255, 255, 0.15);
}

/* Active press effect */
.perk-card:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 3px 3px 0 #000;
    filter: brightness(0.92);
    transition: all 0.08s ease;
}

/* Shimmer effect on perk cards */
.perk-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.1) 50%,
        transparent 100%
    );
    pointer-events: none;
    z-index: 2;
}

.perk-card:hover::before {
    animation: cardShimmer 0.6s ease-out;
}

@keyframes cardShimmer {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ===== Weapon Tag Tactile Feedback ===== */
.weapon-tag {
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                border-color 0.2s ease;
    will-change: transform;
}

.weapon-tag:hover {
    transform: translateX(4px) scale(1.02);
    box-shadow: 4px 4px 0 #000, 0 0 18px rgba(255, 204, 0, 0.5);
}

.weapon-tag:active {
    transform: translateX(2px) scale(0.98);
    box-shadow: 2px 2px 0 #000;
    transition: all 0.08s ease;
}

/* Weapon ready pulse */
.weapon-tag.weapon-ready {
    animation: weaponReadyPulse 0.5s ease-out;
}

@keyframes weaponReadyPulse {
    0% {
        transform: scale(1);
        box-shadow: 2px 2px 0 #000, 0 0 0 rgba(0, 255, 0, 0);
    }
    50% {
        transform: scale(1.08);
        box-shadow: 2px 2px 0 #000, 0 0 25px rgba(0, 255, 0, 0.8);
        border-color: #00ff00;
    }
    100% {
        transform: scale(1);
        box-shadow: 2px 2px 0 #000, 0 0 8px rgba(255, 204, 0, 0.3);
    }
}

/* ===== Currency Display Bounce ===== */
#currency-display {
    will-change: transform, text-shadow;
}

#currency-display.currency-bounce {
    animation: currencyBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes currencyBounce {
    0% {
        transform: scale(1) translateY(0);
    }
    30% {
        transform: scale(1.2) translateY(-5px);
    }
    50% {
        transform: scale(0.95) translateY(2px);
    }
    70% {
        transform: scale(1.05) translateY(-1px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* ===== Menu Open/Close Transitions ===== */
.menu-slide-in {
    animation: menuSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-slide-out {
    animation: menuSlideOut 0.25s ease-in forwards;
}

@keyframes menuSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes menuSlideOut {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

/* ===== Armory Card Enhancements ===== */
.offer-card {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                border-color 0.2s ease;
    will-change: transform;
}

.offer-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 6px 10px 0 #000, 0 0 20px rgba(255, 204, 0, 0.3);
}

.offer-card:active {
    transform: translateY(2px) scale(0.98);
    box-shadow: 3px 3px 0 #000;
    transition: all 0.08s ease;
}

/* ===== Modal Transitions ===== */
.modal-enter {
    animation: modalEnter 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-exit {
    animation: modalExit 0.25s ease-in forwards;
}

@keyframes modalEnter {
    0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes modalExit {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(-10px);
    }
}

/* ===== Overlay Fade Effects ===== */
.overlay-fade-in {
    animation: overlayFadeIn 0.3s ease-out;
}

.overlay-fade-out {
    animation: overlayFadeOut 0.25s ease-in forwards;
}

@keyframes overlayFadeIn {
    0% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
    100% {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
}

@keyframes overlayFadeOut {
    0% {
        opacity: 1;
        backdrop-filter: blur(4px);
    }
    100% {
        opacity: 0;
        backdrop-filter: blur(0px);
    }
}

/* ===== Subtle Hover Glow Effect ===== */
.hover-glow {
    position: relative;
}

.hover-glow::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: transparent;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    box-shadow: 0 0 20px currentColor;
}

.hover-glow:hover::after {
    opacity: 0.4;
}

/* ===== Success Flash Animation ===== */
.success-flash {
    animation: successFlash 0.5s ease-out;
}

@keyframes successFlash {
    0% {
        filter: brightness(1);
        box-shadow: inherit;
    }
    30% {
        filter: brightness(1.4);
        box-shadow: 0 0 30px rgba(0, 255, 0, 0.8);
    }
    100% {
        filter: brightness(1);
        box-shadow: inherit;
    }
}

/* ===== Error Shake Animation ===== */
.error-shake {
    animation: errorShake 0.4s ease-out;
}

@keyframes errorShake {
    0%, 100% {
        transform: translateX(0);
    }
    20% {
        transform: translateX(-8px);
    }
    40% {
        transform: translateX(8px);
    }
    60% {
        transform: translateX(-5px);
    }
    80% {
        transform: translateX(5px);
    }
}

/* ===== Pulse Attention Animation ===== */
.pulse-attention {
    animation: pulseAttention 1.5s ease-in-out infinite;
}

@keyframes pulseAttention {
    0%, 100% {
        transform: scale(1);
        box-shadow: inherit;
    }
    50% {
        transform: scale(1.03);
        box-shadow: 0 0 25px rgba(255, 204, 0, 0.6);
    }
}

/* ===== Smooth Number Transitions ===== */
.number-animate {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.number-animate.changed {
    animation: numberPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes numberPop {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== Icon Bounce on Interaction ===== */
.icon-bounce {
    display: inline-block;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.icon-bounce:hover {
    transform: scale(1.15) rotate(-5deg);
}

.icon-bounce:active {
    transform: scale(0.9);
}

/* ===== Smooth Focus States ===== */
.focus-ring:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.5), 5px 5px 0 #000;
    transition: box-shadow 0.15s ease;
}

/* ===== Loading Shimmer Effect ===== */
.loading-shimmer {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 25%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.05) 75%
    );
    background-size: 200% 100%;
    animation: loadingShimmer 1.5s ease-in-out infinite;
}

@keyframes loadingShimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== Text Selection Highlight ===== */
::selection {
    background: rgba(0, 221, 0, 0.3);
    color: #fff;
}

/* ===== Scrollbar Polish ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #555 0%, #333 100%);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #666 0%, #444 100%);
}

/* ===== Improved Active States for Touch ===== */
@media (hover: none) and (pointer: coarse) {
    /* Touch device optimizations */
    .btn-main:active,
    .btn-secondary:active,
    .perk-card:active,
    .offer-card:active {
        transition-duration: 0.05s;
    }

    /* Increase touch targets */
    .btn-main,
    .btn-secondary {
        min-height: 48px;
        min-width: 48px;
    }
}

/* ===== Reduced Motion Preference ===== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== css/reward-cards.css ===== */
/* Reward Cards - the three-card pick on the game over screen.
   Sized for a thumb: three cards across a phone width, each tall enough to hit
   without aiming. Feature-flagged; nothing here renders unless
   CONFIG.rewardCardsMode is on. */

.reward-cards {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 14px;
    padding: 0 8px;
    box-sizing: border-box;
}

.reward-cards-heading {
    text-align: center;
    font-size: 13px;
    letter-spacing: 1.5px;
    color: #ffcc44;
    margin-bottom: 8px;
    text-shadow: 0 0 8px rgba(255, 204, 68, 0.5);
}

.reward-cards-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.reward-card {
    flex: 1 1 0;
    min-width: 0;
    min-height: 96px;
    padding: 10px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    border: 2px solid rgba(255, 204, 68, 0.55);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(40, 30, 10, 0.92), rgba(18, 14, 8, 0.92));
    color: #fff;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, border-color 0.12s ease, opacity 0.2s ease;
}

.reward-card:active {
    transform: scale(0.96);
}

.reward-card-name {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.5px;
    color: #ffcc44;
    line-height: 1.15;
}

.reward-card-desc {
    font-size: 10px;
    line-height: 1.25;
    color: rgba(255, 255, 255, 0.75);
}

/* After the pick: the chosen card stays lit, the other two fade out rather than
   vanishing, so the player can see what they turned down. */
.reward-cards.has-pick .reward-card {
    cursor: default;
}

.reward-cards.has-pick .reward-card:not(.chosen) {
    opacity: 0.28;
    border-color: rgba(255, 255, 255, 0.15);
}

.reward-card.chosen {
    border-color: #ffcc44;
    box-shadow: 0 0 14px rgba(255, 204, 68, 0.6);
}

/* Reward-cards mode replaces the cash economy outright: no wallet, no shop. */
body.reward-cards-mode #currency-display,
body.reward-cards-mode #wasted-armory-btn,
body.reward-cards-mode #armory-btn,
body.reward-cards-mode #title-armory-btn,
body.reward-cards-mode .stat-card-currency,
body.reward-cards-mode .stat-card-total {
    display: none !important;
}

@media (max-width: 360px) {
    .reward-card-name { font-size: 12px; }
    .reward-card-desc { font-size: 9px; }
}

/* ===== styles.css ===== */
/*
 * ZomRun Styles
 *
 * This file imports all modular CSS files.
 * Each module handles a specific part of the UI.
 */

/* Base styles - html, body, canvas, UI layer */
/* inlined: css/base.css */

/* HUD elements - split into modules for better organization */
/* inlined: css/hud-weapons.css */
/* inlined: css/hud-currency.css */
/* inlined: css/hud-levelup.css */
/* inlined: css/hud-tutorial.css */
/* inlined: css/hud-responsive.css */

/* Button styles - main and secondary buttons */
/* inlined: css/buttons.css */

/* Perk menu - upgrade selection cards */
/* inlined: css/perk-menu.css */

/* Title screen */
/* inlined: css/title-screen.css */

/* Wasted/death animation */
/* inlined: css/wasted.css */

/* Game over screen - split into modules for better organization */
/* inlined: css/game-over-base.css */
/* inlined: css/game-over-stats.css */
/* inlined: css/game-over-share.css */
/* inlined: css/game-over-transfer.css */
/* inlined: css/game-over-responsive.css */

/* Armory/shop screen - split into modules for better organization */
/* inlined: css/armory-base.css */
/* inlined: css/armory-purchases.css */
/* inlined: css/armory-cards.css */
/* inlined: css/armory-buttons.css */
/* inlined: css/armory-responsive.css */

/* Pause overlay and purchase details modal */
/* inlined: css/pause.css */

/* Rank progression system - split into modules for better organization */
/* inlined: css/rank-system-base.css */
/* inlined: css/rank-system-locked.css */
/* inlined: css/rank-system-modal.css */
/* inlined: css/rank-system-responsive.css */

/* Helicopter ride dialog */
/* inlined: css/helicopter.css */

/* Tactile feedback and micro-interactions */
/* inlined: css/tactile-feedback.css */

/* Reward cards - alternate progression, behind CONFIG.rewardCardsMode */
/* inlined: css/reward-cards.css */

/* ===== css/reset-progress.css ===== */
/* ========== RESET PROGRESS MODAL ========== */
/* Modal for resetting all player progress */

.reset-progress-modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.reset-progress-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
}

.reset-progress-dialog {
    position: relative;
    z-index: 1;
    width: min(90vw, 420px);
    background: linear-gradient(180deg, #1a0f0f 0%, #1f1111 100%);
    border: 2px solid #ff4444;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 0 25px rgba(255, 68, 68, 0.4);
}

.reset-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 15px;
}

.reset-progress-header h3 {
    margin: 0;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.5rem;
    letter-spacing: 1px;
    color: #ff4444;
    text-shadow: 2px 2px 0 #000;
}

.reset-progress-close {
    background: transparent;
    border: 2px solid #ff4444;
    color: #ff4444;
    font-weight: 700;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    box-shadow: 3px 3px 0 #000;
    transition: all 0.2s ease;
}

.reset-progress-close:hover {
    background: rgba(255, 68, 68, 0.2);
}

.reset-progress-warning {
    font-family: 'Rajdhani', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    color: #ffcc00;
    margin: 0 0 12px 0;
    text-shadow: 1px 1px 0 #000;
}

.reset-progress-list {
    font-family: 'Rajdhani', monospace;
    color: #ffa0a0;
    margin: 0 0 15px 20px;
    padding: 0;
    line-height: 1.8;
    text-shadow: 1px 1px 0 #000;
}

.reset-progress-list li {
    margin-bottom: 4px;
}

.reset-progress-confirm-text {
    font-family: 'Rajdhani', monospace;
    font-weight: 700;
    font-size: 1rem;
    color: #ff6666;
    margin: 0 0 20px 0;
    text-align: center;
    text-shadow: 1px 1px 0 #000;
}

.reset-progress-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn-danger {
    padding: 12px 24px;
    font-size: 1.1rem;
    font-family: 'Bebas Neue', sans-serif;
    letter-spacing: 2px;
    color: #fff;
    background: linear-gradient(135deg, #ff4444 0%, #cc2222 100%);
    border: 3px solid #ff6666;
    border-radius: 8px;
    box-shadow: 4px 4px 0 #000, 0 0 10px rgba(255, 68, 68, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-transform: uppercase;
    user-select: none;
}

.btn-danger:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #000, 0 0 16px rgba(255, 68, 68, 0.6);
    background: linear-gradient(135deg, #ff5555 0%, #dd3333 100%);
}

.btn-danger:active {
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0 #000;
}

/* Make the logo clickable in postgame stats */
.share-card-logo.clickable {
    cursor: pointer;
    transition: filter 0.2s ease, transform 0.2s ease;
}

.share-card-logo.clickable:hover {
    filter: drop-shadow(0 0 12px rgba(255, 204, 0, 0.8)) brightness(1.1);
    transform: scale(1.05);
}

.share-card-logo.clickable:active {
    transform: scale(0.98);
}

@media (max-width: 480px) {
    .reset-progress-dialog {
        width: 92vw;
        padding: 16px;
    }

    .reset-progress-actions {
        flex-direction: column;
    }

    .reset-progress-actions button {
        width: 100%;
    }
}

/* ===== css/backdrop-controller.css ===== */
/**
 * Backdrop Controller Styles
 * Temporary controller panel for adjusting the scrolling backdrop
 */

/* Main panel - fixed to the right side */
#backdrop-controller {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 220px;
    max-height: 90vh;
    background: rgba(20, 20, 30, 0.95);
    border: 2px solid #ff6600;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 0 20px rgba(255, 102, 0, 0.4);
    z-index: 9999;
    display: none;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
    font-family: 'Roboto Mono', monospace;
    pointer-events: auto;
}

#backdrop-controller.visible {
    display: flex;
}

/* Only show on desktop mode */
body:not(.desktop-mode) #backdrop-controller {
    display: none !important;
}

/* Header */
.backdrop-ctrl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 102, 0, 0.4);
}

.backdrop-ctrl-title {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 1.1rem;
    color: #ff6600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.backdrop-ctrl-close {
    width: 28px;
    height: 28px;
    background: rgba(255, 50, 50, 0.2);
    border: 1px solid #ff5555;
    border-radius: 50%;
    color: #ff5555;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.backdrop-ctrl-close:hover,
.backdrop-ctrl-close:active {
    background: rgba(255, 50, 50, 0.4);
    transform: scale(1.1);
}

/* Toggle button for opening controller */
#backdrop-ctrl-toggle {
    position: fixed;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: rgba(255, 102, 0, 0.3);
    border: 2px solid #ff6600;
    border-radius: 8px;
    color: #ff6600;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    pointer-events: auto;
}

/* Only show toggle on desktop mode */
body.desktop-mode #backdrop-ctrl-toggle {
    display: flex;
}

#backdrop-ctrl-toggle:hover {
    background: rgba(255, 102, 0, 0.5);
    transform: translateY(-50%) scale(1.1);
}

#backdrop-ctrl-toggle.hidden {
    display: none !important;
}

/* Control section */
.backdrop-ctrl-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.backdrop-ctrl-section-title {
    font-size: 0.7rem;
    color: #ff6600;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 2px;
}

/* Direction toggle */
.backdrop-ctrl-direction {
    display: flex;
    gap: 8px;
}

.backdrop-ctrl-dir-btn {
    flex: 1;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #aaa;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-transform: uppercase;
}

.backdrop-ctrl-dir-btn.active {
    background: rgba(255, 102, 0, 0.3);
    border-color: #ff6600;
    color: #ff6600;
}

.backdrop-ctrl-dir-btn:hover {
    background: rgba(255, 102, 0, 0.2);
}

/* Slider group */
.backdrop-slider-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.backdrop-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.backdrop-slider-label {
    font-size: 0.7rem;
    color: #ccc;
    text-transform: uppercase;
}

.backdrop-slider-value {
    font-size: 0.75rem;
    color: #ff6600;
    min-width: 50px;
    text-align: right;
}

/* Custom slider */
.backdrop-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.backdrop-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    background: #ff6600;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.5);
    transition: transform 0.1s ease;
}

.backdrop-slider::-webkit-slider-thumb:active {
    transform: scale(1.2);
}

.backdrop-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #ff6600;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.5);
}

/* Action buttons */
.backdrop-ctrl-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 102, 0, 0.3);
}

.backdrop-ctrl-btn {
    padding: 10px 15px;
    font-family: 'Bebas Neue', sans-serif;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.backdrop-ctrl-btn-reset {
    background: rgba(255, 165, 0, 0.2);
    border: 1px solid #ffa500;
    color: #ffa500;
}

.backdrop-ctrl-btn-reset:hover,
.backdrop-ctrl-btn-reset:active {
    background: rgba(255, 165, 0, 0.4);
}

/* Current values display */
.backdrop-ctrl-values {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 8px;
    font-size: 0.65rem;
    color: #888;
}

.backdrop-ctrl-values pre {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
    color: #ff6600;
}

/* Responsive adjustments for smaller screens */
@media (max-height: 700px) {
    #backdrop-controller {
        padding: 10px;
        gap: 8px;
        font-size: 0.85rem;
    }

    .backdrop-slider-group {
        gap: 2px;
    }

    .backdrop-ctrl-btn {
        padding: 8px 12px;
    }
}

/* ===== css/landscape-blocker.css ===== */
#landscape-blocker {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    z-index: 99999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* The art is a background on the .visible rule, not an <img> in the markup.
   As an <img> the browser fetched all 146 KB of it on every single load, for a
   screen most players never see - it is only shown if you turn the phone
   sideways. A background-image on a display:none element is never requested,
   so this costs nothing until it is actually needed. */
#landscape-blocker.visible {
    display: flex;
    background-image: url('../attached_assets/sideways_1765573933999.png');
    background-size: cover;
    background-position: center;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* ===== css/replay-transition.css ===== */
/* ========== REPLAY TRANSITION OVERLAY ========== */
/* Smooth fade transition between games to mask GC pause */

#replay-transition {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 10001; /* Above everything including pause overlay */
    opacity: 0;
    pointer-events: none;
    display: none;
}

#replay-transition.active {
    display: block;
    pointer-events: auto;
}

#replay-transition.fade-in {
    animation: replayFadeIn 120ms ease-out forwards;
}

#replay-transition.fade-out {
    animation: replayFadeOut 150ms ease-in forwards;
}

@keyframes replayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes replayFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* ===== css/skeleton-run.css ===== */
/* Local OFL fonts are fetched only when a Skeleton Run text face is used. */
@font-face {
    font-family: 'Silkscreen';
    src: url('../assets/fonts/skeleton-run/Silkscreen-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pixelify Sans';
    src: url('../assets/fonts/skeleton-run/PixelifySans-Variable.ttf') format('truetype');
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
}

/* The variant entry is available in both games. All fantasy overrides below
   are gated by the URL-selected .skeleton-run class. */
.title-content:has(.title-variant-link) {
    gap: 24px;
}

.title-content:has(.title-variant-link) .title-version {
    margin-top: -10px;
}

.title-variant-link {
    display: flex;
    align-items: center;
    gap: 13px;
    width: min(290px, calc(100vw - 56px));
    box-sizing: border-box;
    padding: 12px 16px;
    color: #ecd8ac;
    background: rgba(24, 20, 33, 0.94);
    border: 1px solid #a38352;
    box-shadow: 0 3px 0 #08080d, inset 0 0 0 3px #302837;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: background 140ms, transform 140ms;
}

.title-variant-link:hover {
    background: #33283e;
    transform: translateY(-2px);
}

.title-variant-link:active {
    transform: translateY(1px);
}

.title-variant-icon {
    flex: 0 0 32px;
    image-rendering: pixelated;
    object-fit: contain;
}

.title-variant-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    font-family: 'Rajdhani', sans-serif;
}

.title-variant-copy strong {
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1.2px;
}

.title-variant-copy > span {
    color: #c7bbc9;
    font-size: 13px;
    line-height: 1.3;
}

.title-variant-arrow {
    color: #d0b379;
    font-size: 25px;
}

.skeleton-title-branding[hidden] {
    display: none;
}

body.skeleton-run {
    --skeleton-font-display: 'Silkscreen', monospace;
    --skeleton-font-body: 'Pixelify Sans', monospace;
    /* Keep in sync with SkeletonPalette: UI and source art share one palette. */
    --skeleton-ink: #171820;
    --skeleton-deep: #242331;
    --skeleton-panel: #2e2b3b;
    --skeleton-stone: #4a4655;
    --skeleton-stone-light: #78707c;
    --skeleton-ivory: #f1e4c6;
    --skeleton-bone: #d8cfb4;
    --skeleton-bone-shadow: #928575;
    --skeleton-gold: #d6ad60;
    --skeleton-gold-light: #f1d28a;
    --skeleton-gold-dark: #9f7544;
    --skeleton-teal: #69aaa8;
    --skeleton-ice: #a5d5cf;
    --skeleton-ice-dark: #3e707d;
    --skeleton-blue: #6a86ad;
    --skeleton-violet: #96799f;
    --skeleton-violet-light: #c5a8c5;
    --skeleton-ember: #d7825c;
    --skeleton-ember-light: #efb17a;
    --skeleton-danger: #c06b6b;
    --skeleton-danger-dark: #763f51;
    --skeleton-sage: #8da875;
    --skeleton-success: #8da875;
    --skeleton-poison: #b8c88b;
    --skeleton-teal-rgb: 105, 170, 168;
    --skeleton-ink-rgb: 23, 24, 32;
    --skeleton-deep-rgb: 36, 35, 49;
    --skeleton-violet-rgb: 150, 121, 159;
    --skeleton-gold-rgb: 214, 173, 96;
    --skeleton-stone-rgb: 74, 70, 85;
    --skeleton-ice-rgb: 165, 213, 207;

    background: var(--skeleton-ink);
    color: var(--skeleton-bone);
    font-family: var(--skeleton-font-body);
    font-size: 16px;
    line-height: 1.4;
}

.skeleton-run #title-screen {
    background: var(--skeleton-ink);
    overflow-y: auto;
    box-sizing: border-box;
    gap: 16px;
    padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
}

.skeleton-run #title-screen .title-backdrop,
.skeleton-run .armory-backdrop,
.skeleton-run .wasted-backdrop {
    background-image: linear-gradient(rgba(var(--skeleton-ink-rgb), 0.38), rgba(var(--skeleton-ink-rgb), 0.86)), var(--skeleton-dungeon-art, url('../assets/skeleton-run/dungeon-v2.png'));
    background-size: auto, 480px auto;
    background-position: center;
    background-repeat: repeat;
    image-rendering: pixelated;
}

.skeleton-run .title-backdrop::after {
    background: radial-gradient(ellipse at 50% 34%, rgba(var(--skeleton-stone-rgb), 0.03), rgba(var(--skeleton-ink-rgb), 0.7) 78%);
}

.skeleton-run #scrolling-backdrop-inner {
    background-image: linear-gradient(rgba(var(--skeleton-ink-rgb), 0.65), rgba(var(--skeleton-ink-rgb), 0.65)), var(--skeleton-dungeon-art, url('../assets/skeleton-run/dungeon-v2.png')) !important;
    background-size: auto, 640px auto !important;
}

.skeleton-run .title-logo-image {
    display: none;
}

.skeleton-run .title-content {
    gap: 22px;
    width: 100%;
    max-width: 440px;
    padding: 8px 0;
    flex: 0 0 auto;
}

/* Continue, its saved-run summary and the other menu actions share normal
   flow. Their legacy absolute bottom offsets otherwise overlap on phones. */
.skeleton-run .title-continue-container {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: min(290px, 100%);
    max-width: 290px;
    padding: 0;
    transform: none;
    animation: none;
    opacity: 1;
    gap: 8px;
}

.skeleton-run .title-continue-btn {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
}

.skeleton-run .title-continue-info {
    width: 100%;
    color: var(--skeleton-bone);
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.skeleton-run .title-armory-btn,
.skeleton-run .title-transfer-btn {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    transform: none;
    margin: 0;
}

.skeleton-run .title-armory-btn:active,
.skeleton-run .title-transfer-btn:active {
    transform: scale(0.98);
}

.skeleton-run .skeleton-title-branding {
    width: min(420px, 100%);
    margin: 0;
    line-height: 0;
}

.skeleton-run .skeleton-title-logo {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: pixelated;
    object-fit: contain;
}

.skeleton-run .title-tap-text {
    color: var(--skeleton-ivory);
    font-family: 'Rajdhani', sans-serif;
    font-size: 23px;
    font-weight: 700;
    letter-spacing: 4px;
    text-shadow: 0 2px var(--skeleton-ink);
}

.skeleton-run .title-version {
    color: var(--skeleton-bone);
    font-size: 12px;
}

.skeleton-run .title-variant-link {
    padding: 8px 14px;
    width: 265px;
    background: rgba(var(--skeleton-ink-rgb), 0.8);
    border-color: var(--skeleton-stone);
}

.skeleton-run .title-variant-copy strong {
    font-size: 16px;
}

.skeleton-run .title-variant-icon {
    display: none;
}

.skeleton-run .title-rank-strip {
    border-radius: 0;
    border-color: var(--skeleton-stone);
    background: rgba(var(--skeleton-deep-rgb), 0.95);
    margin-top: 0;
}

.skeleton-run .title-armory-btn,
.skeleton-run .btn-secondary,
.skeleton-run .resume-button {
    color: var(--skeleton-bone);
    border-color: var(--skeleton-gold-dark);
    background: var(--skeleton-deep);
}

.skeleton-run .btn-main,
.skeleton-run .title-continue-btn {
    color: var(--skeleton-ink);
    border-color: var(--skeleton-gold-light);
    background: var(--skeleton-gold);
    text-shadow: none;
    box-shadow: 3px 4px 0 var(--skeleton-ink);
}

.skeleton-run .btn-main {
    animation: none;
    box-shadow: 3px 4px 0 var(--skeleton-ink), inset 0 1px 0 var(--skeleton-gold-light), 0 0 14px rgba(var(--skeleton-gold-rgb), 0.14);
}

.skeleton-run .btn-main::before {
    opacity: 0.25;
}

.skeleton-run .btn-main:hover {
    box-shadow: 3px 6px 0 var(--skeleton-ink), 0 0 18px rgba(var(--skeleton-gold-rgb), 0.22);
}

.skeleton-run .btn-main:active {
    box-shadow: 1px 2px 0 var(--skeleton-ink), 0 0 8px rgba(var(--skeleton-gold-rgb), 0.12);
}

.skeleton-run .title-armory-btn:hover,
.skeleton-run .btn-secondary:hover,
.skeleton-run .resume-button:hover {
    background: var(--skeleton-stone);
}

.skeleton-run .btn-main:hover,
.skeleton-run .title-continue-btn:hover {
    background: var(--skeleton-gold-light);
}

.skeleton-run #currency-display,
.skeleton-run .armory-balance,
.skeleton-run .stat-card-total .stat-value,
.skeleton-run .stat-card-currency .stat-value {
    color: var(--skeleton-gold-light);
}

.skeleton-run .hud-top {
    position: absolute;
    top: 15px;
    left: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    padding: 7px 12px;
    color: var(--skeleton-bone);
    background: rgba(var(--skeleton-ink-rgb), 0.9);
    border: 1px solid var(--skeleton-stone-light);
    box-shadow: 2px 3px 0 rgba(var(--skeleton-ink-rgb), 0.55);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 2px 1px var(--skeleton-ink);
}

.skeleton-run #weapons-display {
    top: 64px;
}

.skeleton-run .weapon-status-bar {
    /* The inline fill reflects ready, charging, empty and active states. */
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.1s linear, background-color 0.2s ease;
    background-image: none;
    box-shadow: none;
}

.skeleton-run .currency-float {
    color: var(--skeleton-gold-light);
    text-shadow: 0 2px 1px var(--skeleton-ink);
}

.skeleton-run #score-display {
    color: var(--skeleton-ivory);
    font-size: 24px;
    font-variant-numeric: tabular-nums;
}

.skeleton-run #score-display::before {
    content: '☠';
    color: var(--skeleton-bone);
    margin-right: 8px;
    font-size: 18px;
}

.skeleton-run #level-display {
    padding-left: 10px;
    color: var(--skeleton-ice);
    border-left: 1px solid var(--skeleton-stone-light);
    font-size: 18px;
    letter-spacing: 0.8px;
}

.skeleton-run .hud-pause-button {
    color: var(--skeleton-gold-light);
    border-color: var(--skeleton-gold-dark);
    background: var(--skeleton-deep);
}

.skeleton-run #pause-overlay {
    background: rgba(var(--skeleton-ink-rgb), 0.74);
}

.skeleton-run .pause-content {
    box-sizing: border-box;
    width: min(380px, calc(100vw - 36px));
    padding: 30px 22px;
    background: var(--skeleton-deep);
    border-color: var(--skeleton-gold-dark);
    border-radius: 2px;
    box-shadow: 0 6px 0 var(--skeleton-ink), inset 0 0 0 4px var(--skeleton-panel);
}

.skeleton-run .pause-title {
    color: var(--skeleton-bone);
    font-family: 'Rajdhani', sans-serif;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: 2px;
    animation: none;
    text-shadow: 0 3px var(--skeleton-ink);
}

.skeleton-run .pause-icon {
    color: var(--skeleton-ice);
    font-size: 44px;
    animation: none;
    filter: none;
}

.skeleton-run .pause-message {
    color: var(--skeleton-bone);
    animation: none;
}

.skeleton-run .resume-button {
    animation: none;
    border-radius: 2px;
    border: 1px solid var(--skeleton-gold-dark);
    box-shadow: 0 4px var(--skeleton-ink);
}

.skeleton-run .resume-button::before {
    display: none;
}

/* Cards share the exact 16px sprites already loaded by the game. No cropped
   duplicates or extra image requests are needed for individual spell icons. */
.skeleton-run [data-skeleton-icon]::before {
    content: '';
    display: inline-block;
    width: var(--skeleton-icon-width, 16px);
    height: var(--skeleton-icon-height, 16px);
    flex: 0 0 var(--skeleton-icon-width, 16px);
    margin: 8px;
    background-image: var(--skeleton-icon-image);
    background-position: var(--skeleton-icon-position);
    background-repeat: no-repeat;
    image-rendering: pixelated;
    transform: scale(2);
}

.skeleton-run .perk-title[data-skeleton-icon] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.skeleton-run .reward-card-name[data-skeleton-icon]::before {
    display: block;
    margin: 8px auto 16px;
}

.skeleton-run .upgrade-icon[data-skeleton-icon],
.skeleton-run .purchase-details-icon[data-skeleton-icon],
.skeleton-run .stat-icon[data-skeleton-icon] {
    font-size: 0;
    line-height: 1;
    filter: none;
    animation: none;
}

@media (orientation: landscape) and (min-width: 600px) {
    .skeleton-run .hud-top,
    .skeleton-run #weapons-display { left: max(15px, calc(50% - 240px - 190px)); }
}

@media (orientation: landscape) and (min-width: 800px) {
    .skeleton-run .hud-top,
    .skeleton-run #weapons-display { left: max(15px, calc(50% - 240px - 220px)); }
}

@media (orientation: landscape) and (min-width: 1024px) {
    .skeleton-run .hud-top,
    .skeleton-run #weapons-display { left: max(15px, calc(50% - 240px - 280px)); }
}

.skeleton-run .weapon-tag {
    border-color: var(--skeleton-stone-light);
    color: var(--skeleton-bone);
    background: rgba(var(--skeleton-deep-rgb), 0.92);
    border-radius: 2px;
    text-shadow: 0 2px var(--skeleton-ink);
    box-shadow: 2px 2px var(--skeleton-ink);
}

/* Draw the filled native coin at exactly 2×, reserving its real layout size. */
.skeleton-run [data-skeleton-icon='gold']::before {
    width: var(--skeleton-icon-width-2x, 32px);
    height: var(--skeleton-icon-height-2x, 32px);
    flex-basis: var(--skeleton-icon-width-2x, 32px);
    background-position: var(--skeleton-icon-position-2x);
    background-size: var(--skeleton-icon-size-2x);
    transform: none;
}

.skeleton-run .weapon-tag.cannot-fire {
    border-color: var(--skeleton-danger);
    color: var(--skeleton-ember-light);
}

.skeleton-run .weapon-tag:hover { box-shadow: 3px 3px var(--skeleton-ink); }
.skeleton-run .weapon-tag.low-ammo { border-color: var(--skeleton-ember); animation: skeletonStatusPulse 1s ease-in-out infinite; }
.skeleton-run .weapon-tag.reloading { border-color: var(--skeleton-gold); animation: skeletonStatusPulse 0.8s ease-in-out infinite; }
.skeleton-run .weapon-tag.ready-flash { border-color: var(--skeleton-teal) !important; box-shadow: 2px 2px var(--skeleton-ink) !important; }
@keyframes skeletonStatusPulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } }

.skeleton-run #perk-menu-content > h2 {
    color: var(--skeleton-gold-light) !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-size: clamp(24px, 6vw, 32px) !important;
    letter-spacing: 1px;
}

.skeleton-run .perk-card,
.skeleton-run .reward-card,
.skeleton-run .armory-card,
.skeleton-run .stat-card,
.skeleton-run .rank-progress-card,
.skeleton-run .wasted-share-card {
    background-color: var(--skeleton-deep);
    border-radius: 2px;
}

.skeleton-run .armory-title,
.skeleton-run .rank-title,
.skeleton-run .share-title {
    color: var(--skeleton-gold);
}

.skeleton-run .wasted-slam-text,
.skeleton-run .gameover-title {
    color: var(--skeleton-bone);
    text-shadow: 0 4px 0 var(--skeleton-stone), 0 8px 0 var(--skeleton-ink);
}

.skeleton-run .share-card-logo {
    image-rendering: pixelated;
    object-fit: contain;
    width: 48px;
    height: 48px;
}

.skeleton-run .stat-card {
    background: linear-gradient(135deg, var(--skeleton-panel), var(--skeleton-deep));
    border-color: var(--skeleton-stone-light);
    animation: statCardSlideIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
    box-shadow: 3px 4px 0 var(--skeleton-ink);
}

.skeleton-run .stat-card:hover {
    border-color: var(--skeleton-stone-light);
    box-shadow: 3px 5px 0 var(--skeleton-ink), 0 0 12px rgba(var(--skeleton-violet-rgb), 0.12);
}

.skeleton-run .stat-card .stat-value {
    color: var(--skeleton-bone);
    text-shadow: 0 2px var(--skeleton-ink);
}

.skeleton-run .stat-card-kills .stat-value {
    color: var(--skeleton-bone);
}

.skeleton-run .wasted-share-card {
    border-color: var(--skeleton-gold-dark);
    box-shadow: 3px 4px 0 var(--skeleton-ink), inset 0 1px 0 rgba(var(--skeleton-gold-rgb), 0.12);
}

.skeleton-run .share-card-title {
    color: var(--skeleton-bone);
    text-shadow: 0 2px var(--skeleton-ink);
}

.skeleton-run #backdrop-ctrl-toggle,
.skeleton-run #backdrop-controller {
    display: none !important;
}

/* Coins remain an earned, saved balance in the dungeon even when the three
   reward runes are enabled. These overrides do not enable the legacy shop. */
body.skeleton-run.reward-cards-mode #currency-display,
body.skeleton-run.reward-cards-mode .stat-card-currency,
body.skeleton-run.reward-cards-mode .stat-card-total {
    display: flex !important;
}

.skeleton-run #currency-display {
    display: flex;
    align-items: center;
    gap: 5px;
    top: 15px;
    right: 15px;
    min-width: 0;
    max-width: calc(100% - 175px);
    padding: 6px 8px;
    border: 1px solid var(--skeleton-gold-dark);
    border-radius: 2px;
    background: rgba(var(--skeleton-deep-rgb), 0.94);
    color: var(--skeleton-gold-light);
    font-size: 17px;
    line-height: 1.2;
    text-shadow: 0 2px var(--skeleton-ink);
    white-space: nowrap;
    animation: none;
    transition: border-color 150ms;
    will-change: auto;
}

.skeleton-run #currency-display::before {
    margin: 0 4px 0 1px;
    transform: scale(1);
}

.skeleton-run .skeleton-gold-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.skeleton-run .skeleton-gold-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 11px;
    letter-spacing: 0.5px;
}

.skeleton-run #currency-display.currency-gain {
    animation: none;
    border-color: var(--skeleton-gold-light);
    color: var(--skeleton-gold-light);
}

.skeleton-run .skeleton-gold-gain {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    padding: 3px 6px;
    background: var(--skeleton-deep);
    color: var(--skeleton-gold-light);
    font-size: 12px;
    opacity: 0;
    transition: opacity 150ms;
    pointer-events: none;
}

.skeleton-run .currency-gain .skeleton-gold-gain { opacity: 1; }

/* The existing income burst coalesces kills: no forced layout or repeated DOM
   animation restarts. Move crisp glyphs instead of scaling their pixels. */
.skeleton-run .currency-gain .skeleton-gold-value {
    animation: skeletonGoldTap 280ms steps(3, end);
}
.skeleton-run .currency-gain .skeleton-gold-gain {
    animation: skeletonGoldReceipt 650ms ease-out;
}
@keyframes skeletonGoldTap {
    0%, 100% { transform: translateY(0); }
    28% { transform: translateY(-3px); }
    65% { transform: translateY(1px); }
}
@keyframes skeletonGoldReceipt {
    from { transform: translateY(4px); }
    to { transform: translateY(0); }
}

.skeleton-run .hud-pause-button {
    right: 15px;
    top: 85px;
    width: 44px;
    height: 44px;
}

/* All overlay content stays inside an iPhone's cutouts and can scroll when
   browser chrome, a short viewport or larger text leaves less vertical room. */
.skeleton-run #wasted-slam,
.skeleton-run #game-over,
.skeleton-run #perk-menu {
    box-sizing: border-box;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: max(20px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.skeleton-run #perk-menu { justify-content: flex-start; }
.skeleton-run .perk-menu-content { flex-shrink: 0; margin-block: auto; }
.skeleton-run .rank-perks-dialog,
.skeleton-run .transfer-dialog,
.skeleton-run .purchase-details-content,
.skeleton-run .reset-progress-dialog,
.skeleton-run .pause-content {
    max-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(16px, env(safe-area-inset-bottom)));
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

.skeleton-run .rank-perks-close,
.skeleton-run .transfer-close,
.skeleton-run .title-transfer-btn,
.skeleton-run .stats-toggle-btn,
.skeleton-run .btn-main,
.skeleton-run .btn-secondary,
.skeleton-run .btn-share { min-height: 44px; }

.skeleton-run .reward-card-desc {
    color: var(--skeleton-bone);
    font-size: 12px;
    line-height: 1.35;
}

.skeleton-run .reward-card-name { color: var(--skeleton-gold-light); line-height: 1.25; }
.skeleton-run .reward-cards-heading { color: var(--skeleton-gold-light); text-shadow: 0 2px var(--skeleton-ink); }
.skeleton-run .reward-card.chosen { box-shadow: 0 0 0 2px var(--skeleton-gold), 0 4px var(--skeleton-ink); }

/* Shared surfaces replace the city gradients, including secondary dialogs.
   Dimensions, entrance timing and touch targets remain in the base styles. */
.skeleton-run .perk-card,
.skeleton-run .reward-card,
.skeleton-run .upgrade-card,
.skeleton-run .rank-progress-card,
.skeleton-run .rank-perks-dialog,
.skeleton-run .transfer-dialog,
.skeleton-run .purchase-details-content,
.skeleton-run .reset-progress-dialog,
.skeleton-run .wasted-share-card,
.skeleton-run .gameover-share-section,
.skeleton-run .armory-purchase-panel {
    background: var(--skeleton-panel);
    color: var(--skeleton-bone);
    border-color: var(--skeleton-stone-light);
    box-shadow: 3px 4px 0 var(--skeleton-ink);
}

.skeleton-run .title-variant-link { color: var(--skeleton-bone); box-shadow: 0 3px 0 var(--skeleton-ink), inset 0 0 0 3px var(--skeleton-panel); }
.skeleton-run .title-variant-copy > span { color: var(--skeleton-bone); }
.skeleton-run .title-variant-arrow { color: var(--skeleton-gold); }
.skeleton-run .title-variant-link:hover { background: var(--skeleton-panel); }
.skeleton-run .title-continue-btn:hover { box-shadow: 3px 6px 0 var(--skeleton-ink); }
.skeleton-run .title-continue-btn:active { box-shadow: 1px 2px 0 var(--skeleton-ink); }
.skeleton-run .title-armory-btn,
.skeleton-run .btn-secondary,
.skeleton-run .title-armory-btn:hover,
.skeleton-run .btn-secondary:hover { box-shadow: 3px 4px 0 var(--skeleton-ink); text-shadow: none; }
.skeleton-run .title-armory-btn:active,
.skeleton-run .btn-secondary:active { box-shadow: 1px 2px 0 var(--skeleton-ink); }

.skeleton-run .perk-card { --skeleton-rarity: var(--skeleton-bone-shadow); border-color: var(--skeleton-rarity) !important; }
.skeleton-run .perk-rarity-uncommon { --skeleton-rarity: var(--skeleton-sage); }
.skeleton-run .perk-rarity-rare { --skeleton-rarity: var(--skeleton-teal); }
.skeleton-run .perk-rarity-mythic { --skeleton-rarity: var(--skeleton-gold); animation: perkCardSlideIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.skeleton-run .perk-card:hover { background: var(--skeleton-deep); box-shadow: 0 0 0 1px var(--skeleton-rarity), 3px 5px 0 var(--skeleton-ink); filter: none; }
.skeleton-run .perk-card.selected { animation: perkSelected 0.4s forwards; box-shadow: 0 0 0 2px var(--skeleton-rarity) !important; }
.skeleton-run .perk-rarity-rare::after,
.skeleton-run .perk-rarity-mythic::after { background: linear-gradient(90deg, transparent, rgba(var(--skeleton-gold-rgb), 0.08), transparent); }
.skeleton-run .perk-title,
.skeleton-run .perk-card:hover .perk-title { color: var(--skeleton-ivory); text-shadow: 0 2px var(--skeleton-ink); }
.skeleton-run .perk-desc { color: var(--skeleton-bone); }
.skeleton-run .perk-reroll-button { color: var(--skeleton-ivory); background: var(--skeleton-deep); border-color: var(--skeleton-violet); box-shadow: 0 3px var(--skeleton-ink); }
.skeleton-run .perk-reroll-button:hover { background: var(--skeleton-panel); box-shadow: 0 3px var(--skeleton-ink), 0 0 0 1px var(--skeleton-violet); }
.skeleton-run .perk-reroll-button:active { box-shadow: 0 1px var(--skeleton-ink); }
.skeleton-run .perk-reroll-button:disabled { color: var(--skeleton-bone); border-color: var(--skeleton-stone-light); background: var(--skeleton-stone); box-shadow: none; }
.skeleton-run .reward-card { border-color: var(--skeleton-gold-dark); }
.skeleton-run .reward-card.chosen { background: var(--skeleton-deep); border-color: var(--skeleton-gold-light); }

/* Gold marks saved treasure and earned rank; magic and healing use teal/sage. */
.skeleton-run .rank-title,
.skeleton-run .rank-card-title,
.skeleton-run .rank-perks-header h3,
.skeleton-run .armory-title,
.skeleton-run .armory-purchase-title,
.skeleton-run .share-title,
.skeleton-run .weapons-title { color: var(--skeleton-gold-light); text-shadow: 0 2px var(--skeleton-ink); animation: none; }
.skeleton-run .rank-next-reward,
.skeleton-run .rank-reward,
.skeleton-run .rank-perk-reward,
.skeleton-run .rank-perk-check { color: var(--skeleton-poison); }
.skeleton-run .rank-reward,
.skeleton-run .rank-perk-reward { background: var(--skeleton-deep); border-color: var(--skeleton-sage); box-shadow: none; animation: none; }
.skeleton-run .rank-progress-fill,
.skeleton-run .title-rank-strip .rank-progress-fill,
.skeleton-run .rank-progress-card .rank-progress-fill { background: var(--skeleton-gold); box-shadow: none; }
.skeleton-run .rank-progress-bar { background: var(--skeleton-ink); border-color: var(--skeleton-stone-light); }
.skeleton-run .rank-progress-fill::after { background: linear-gradient(90deg, transparent, rgba(var(--skeleton-gold-rgb), 0.2), transparent); }
.skeleton-run .rank-up-banner { background: var(--skeleton-gold); border-color: var(--skeleton-gold-light); box-shadow: 0 3px var(--skeleton-ink); animation: none; }
.skeleton-run .rank-up-text { color: var(--skeleton-ink); text-shadow: none; }
.skeleton-run .rank-perks-header { background: var(--skeleton-deep); border-color: var(--skeleton-stone-light); }
.skeleton-run .rank-perk-item { background: var(--skeleton-deep); border-color: var(--skeleton-stone); }
.skeleton-run .rank-perk-item.achieved { background: var(--skeleton-deep); border-color: var(--skeleton-sage); }
.skeleton-run .rank-perk-item.current { background: var(--skeleton-deep); border-color: var(--skeleton-gold); box-shadow: 0 0 0 1px var(--skeleton-gold-dark); }
.skeleton-run .rank-perk-title { color: var(--skeleton-ivory); }
.skeleton-run .rank-perk-item.current .rank-perk-title { color: var(--skeleton-gold-light); }
.skeleton-run .rank-perk-item.achieved .rank-perk-title { color: var(--skeleton-poison); }
.skeleton-run .rank-perk-item.locked .rank-perk-reward { color: var(--skeleton-bone); background: var(--skeleton-deep); border-color: var(--skeleton-stone-light); }
.skeleton-run .rank-progress-text,
.skeleton-run .rank-progress-card .rank-progress-text,
.skeleton-run .rank-perk-kills,
.skeleton-run .rank-perk-flavor,
.skeleton-run .stat-label,
.skeleton-run .armory-subtitle,
.skeleton-run .armory-purchase-desc,
.skeleton-run .armory-purchase-empty,
.skeleton-run .transfer-help-text,
.skeleton-run .transfer-description,
.skeleton-run .transfer-note { color: var(--skeleton-bone); }

.skeleton-run .upgrade-card-offense { border-color: var(--skeleton-danger); }
.skeleton-run .upgrade-card-defense { border-color: var(--skeleton-blue); }
.skeleton-run .upgrade-card-tactical { border-color: var(--skeleton-gold); }
.skeleton-run .upgrade-card-utility { border-color: var(--skeleton-teal); }
.skeleton-run .upgrade-card-special { border-color: var(--skeleton-violet); box-shadow: 3px 4px var(--skeleton-ink) !important; }
.skeleton-run .upgrade-card.visible:hover { box-shadow: 3px 5px var(--skeleton-ink); }
.skeleton-run .upgrade-card:active { background: var(--skeleton-deep); border-color: var(--skeleton-bone); }
.skeleton-run .upgrade-card.purchase-flash { box-shadow: 0 0 0 2px var(--skeleton-gold) !important; }
.skeleton-run .upgrade-card.maxed { background: var(--skeleton-deep); border-color: var(--skeleton-sage); }
.skeleton-run .upgrade-card.maxed::after { background: transparent; }
.skeleton-run .special-badge { color: var(--skeleton-ivory); background: var(--skeleton-deep); border-color: var(--skeleton-violet); }
.skeleton-run .upgrade-name,
.skeleton-run .upgrade-level-badge,
.skeleton-run .purchase-details-name,
.skeleton-run .purchase-detail-value,
.skeleton-run .best-run-label,
.skeleton-run .weapon-stat-name { color: var(--skeleton-gold-light); text-shadow: 0 2px var(--skeleton-ink); }
.skeleton-run .upgrade-desc,
.skeleton-run .purchase-details-desc,
.skeleton-run .purchase-detail-label { color: var(--skeleton-bone); }
.skeleton-run .upgrade-effect,
.skeleton-run .armory-purchase-level { color: var(--skeleton-ice); }
.skeleton-run .upgrade-rarity-badge,
.skeleton-run .armory-purchase-rarity { color: var(--skeleton-ivory); background: var(--skeleton-deep) !important; border-color: var(--skeleton-stone-light) !important; text-shadow: none; }
.skeleton-run .purchase-details-level { color: var(--skeleton-ice) !important; }
.skeleton-run .armory-balance span { color: var(--skeleton-gold-light); text-shadow: 0 2px var(--skeleton-ink); }
.skeleton-run .armory-purchase-name,
.skeleton-run .best-run-values,
.skeleton-run .best-run-value,
.skeleton-run .weapon-stat-damage { color: var(--skeleton-ivory); }
.skeleton-run .upgrade-icon,
.skeleton-run .upgrade-level-badge,
.skeleton-run .upgrade-progress-container,
.skeleton-run .purchase-detail-stat,
.skeleton-run .best-run-summary,
.skeleton-run .weapon-stats-container,
.skeleton-run .weapon-stat-item,
.skeleton-run .armory-purchase-item,
.skeleton-run .armory-purchase-item .upgrade-icon { background: var(--skeleton-deep); border-color: var(--skeleton-stone-light); box-shadow: none; }
.skeleton-run .weapon-stat-item:hover,
.skeleton-run .armory-purchase-item:hover { background: var(--skeleton-deep); border-color: var(--skeleton-gold); }
.skeleton-run .upgrade-progress-bar { background: var(--skeleton-teal); box-shadow: none; animation: none; }
.skeleton-run .upgrade-progress-text { color: var(--skeleton-ivory); text-shadow: 1px 1px var(--skeleton-ink), -1px -1px var(--skeleton-ink); }
.skeleton-run .purchase-details-effect,
.skeleton-run .upgrade-category-header,
.skeleton-run .upgrade-category-header:active { color: var(--skeleton-ivory); background: var(--skeleton-deep); border-color: var(--skeleton-gold-dark); box-shadow: none; }
.skeleton-run .upgrade-buy { color: var(--skeleton-ink); background: var(--skeleton-gold); border-color: var(--skeleton-gold-light); box-shadow: 0 4px var(--skeleton-gold-dark), 0 6px 8px var(--skeleton-ink); text-shadow: none; }
.skeleton-run .upgrade-buy:hover:not(:disabled) { box-shadow: 0 6px var(--skeleton-gold-dark), 0 10px 12px var(--skeleton-ink); }
.skeleton-run .upgrade-buy:active:not(:disabled) { box-shadow: 0 2px var(--skeleton-ink); }
.skeleton-run .upgrade-buy.unaffordable,
.skeleton-run .upgrade-buy:disabled,
.skeleton-run .upgrade-card.rank-locked .upgrade-buy,
.skeleton-run .upgrade-card.rank-locked .upgrade-buy:disabled { color: var(--skeleton-bone); background: var(--skeleton-stone); border-color: var(--skeleton-stone-light); box-shadow: 0 3px var(--skeleton-ink); text-shadow: none; }
.skeleton-run .upgrade-card.rank-locked { background: var(--skeleton-deep); border-color: var(--skeleton-stone-light); }
.skeleton-run .upgrade-card.rank-locked .upgrade-name,
.skeleton-run .upgrade-card.rank-locked .upgrade-desc,
.skeleton-run .upgrade-card.rank-locked .upgrade-effect { color: var(--skeleton-bone); }
.skeleton-run .armory-back-btn-top { color: var(--skeleton-ivory) !important; background: var(--skeleton-deep) !important; border-color: var(--skeleton-gold-dark) !important; box-shadow: 3px 4px var(--skeleton-ink) !important; }

.skeleton-run .stats-toggle-btn,
.skeleton-run .btn-share,
.skeleton-run .btn-transfer { color: var(--skeleton-ivory); background: var(--skeleton-deep); border-color: var(--skeleton-stone-light); box-shadow: 3px 4px var(--skeleton-ink); text-shadow: none; }
.skeleton-run .stats-toggle-btn:hover,
.skeleton-run .btn-share:hover,
.skeleton-run .btn-transfer:hover { color: var(--skeleton-ivory); background: var(--skeleton-panel); border-color: var(--skeleton-gold); box-shadow: 3px 5px var(--skeleton-ink); }
.skeleton-run .stats-toggle-btn:active,
.skeleton-run .btn-share:active,
.skeleton-run .btn-transfer:active { box-shadow: 1px 2px var(--skeleton-ink); }
.skeleton-run .share-card-tagline { color: var(--skeleton-bone); text-shadow: none; }
.skeleton-run .share-card-logo,
.skeleton-run .share-card-logo.clickable:hover { filter: none; }
.skeleton-run .share-message-box,
.skeleton-run .share-message-preview { color: var(--skeleton-ivory); background: var(--skeleton-deep); border-color: var(--skeleton-stone-light); }
.skeleton-run .share-message-text { color: var(--skeleton-ivory); }
.skeleton-run .share-copied-feedback,
.skeleton-run .transfer-status.success { color: var(--skeleton-poison); text-shadow: none; }
.skeleton-run .share-copied-feedback.is-error,
.skeleton-run .transfer-status.error { color: var(--skeleton-ember-light); text-shadow: none; }
.skeleton-run .transfer-status.info { color: var(--skeleton-ice); }
.skeleton-run .transfer-dialog-header h3,
.skeleton-run .transfer-label { color: var(--skeleton-gold-light); }
.skeleton-run .transfer-textarea { color: var(--skeleton-ivory); background: var(--skeleton-ink); border-color: var(--skeleton-stone-light); box-shadow: none; }
.skeleton-run .rank-perks-close,
.skeleton-run .transfer-close,
.skeleton-run .purchase-details-close,
.skeleton-run .reset-progress-close { color: var(--skeleton-ivory); background: var(--skeleton-deep); border-color: var(--skeleton-stone-light); box-shadow: 2px 3px var(--skeleton-ink); }
.skeleton-run .rank-perks-close:hover,
.skeleton-run .transfer-close:hover,
.skeleton-run .purchase-details-close:hover,
.skeleton-run .reset-progress-close:hover { background: var(--skeleton-stone); }
.skeleton-run .reset-progress-dialog { border-color: var(--skeleton-danger); }
.skeleton-run .reset-progress-header h3,
.skeleton-run .reset-progress-warning,
.skeleton-run .reset-progress-confirm-text { color: var(--skeleton-ember-light); }
.skeleton-run .reset-progress-list { color: var(--skeleton-bone); }
.skeleton-run .btn-danger,
.skeleton-run .btn-danger:hover { color: var(--skeleton-ivory); background: var(--skeleton-danger-dark); border-color: var(--skeleton-danger); box-shadow: 3px 4px var(--skeleton-ink); }
.skeleton-run .btn-danger:active { box-shadow: 1px 2px var(--skeleton-ink); }
.skeleton-run :focus-visible { outline: 2px solid var(--skeleton-ice); outline-offset: 3px; }

/* Keep motion timing while removing animated city-colored flashes and glows. */
.skeleton-run #game-over { background: var(--skeleton-ink); }
.skeleton-run .gameover-title { animation: none; }
.skeleton-run .gameover-glow-circle { background: radial-gradient(circle, rgba(var(--skeleton-violet-rgb), 0.16), transparent 70%); }
.skeleton-run .gameover-bg-particles .particle { background: var(--skeleton-bone-shadow); box-shadow: none; }
.skeleton-run .gameover-underline { background: linear-gradient(90deg, transparent, var(--skeleton-gold-dark), transparent); box-shadow: none; animation: none; }
.skeleton-run .gameover-corner { border-color: var(--skeleton-stone-light); box-shadow: none; animation: none; }
.skeleton-run .armory-backdrop::after,
.skeleton-run .wasted-backdrop::after { background: linear-gradient(rgba(var(--skeleton-ink-rgb), 0.35), rgba(var(--skeleton-ink-rgb), 0.55)); }
.skeleton-run .wasted-slam-impact { display: none; animation: none; }
.skeleton-run #level-up-banner { color: var(--skeleton-ink); background: var(--skeleton-gold); border-color: var(--skeleton-gold-light); box-shadow: 3px 4px var(--skeleton-ink) !important; }
.skeleton-run .level-up-particle,
.skeleton-run .purchase-particle { background: var(--skeleton-gold); box-shadow: none; }
.skeleton-run .purchase-particle-money { color: var(--skeleton-gold-light); text-shadow: 0 2px var(--skeleton-ink); }
.skeleton-run .weapon-stats-container::-webkit-scrollbar-track { background: var(--skeleton-deep); }
.skeleton-run .weapon-stats-container::-webkit-scrollbar-thumb { background: var(--skeleton-gold-dark); }
.skeleton-run .weapon-stats-container::-webkit-scrollbar-thumb:hover { background: var(--skeleton-gold); }
.skeleton-run #tutorial-text,
.skeleton-run .swipe-tutorial-text { color: var(--skeleton-ivory); text-shadow: 0 2px var(--skeleton-ink); }
.skeleton-run .swipe-tutorial-arrow { color: var(--skeleton-teal); text-shadow: 0 2px var(--skeleton-ink); }

@media (max-width: 600px) {
    .skeleton-run #wasted-slam { align-items: flex-start; }
    .skeleton-run .wasted-stats-content { padding: 8px 0 16px; }
    .skeleton-run .gameover-stats-grid { gap: 8px; }
    .skeleton-run .stat-card { gap: 5px; padding: 8px 6px; min-width: 0; }
    .skeleton-run .stat-content { min-width: 0; }
    .skeleton-run .stat-label { font-size: 12px; letter-spacing: 0.3px; line-height: 1.15; }
    .skeleton-run .stat-value { font-size: 18px; overflow-wrap: anywhere; }
    .skeleton-run .stat-icon { flex: 0 0 22px; font-size: 22px; }
    .skeleton-run .stat-icon[data-skeleton-icon]::before { transform: scale(1); margin: 0 3px; }
    .skeleton-run .reward-cards { padding-inline: 0; }
    .skeleton-run .reward-cards-row { gap: 6px; }
    .skeleton-run .gameover-actions { flex-wrap: wrap; }
    .skeleton-run .gameover-actions .btn-main,
    .skeleton-run .gameover-actions .btn-secondary { padding: 10px 12px; }
}

@media (orientation: landscape) and (min-width: 600px) {
    .skeleton-run #currency-display,
    .skeleton-run .hud-pause-button { right: max(15px, calc(50% - 420px)); }
}

@media (max-height: 760px) {
    .title-content:has(.title-variant-link) {
        gap: 16px;
    }
    .title-variant-link {
        padding: 8px 13px;
    }
    .skeleton-run #title-screen {
        justify-content: flex-start;
        padding-top: max(18px, env(safe-area-inset-top));
        gap: 12px;
    }
}

@media (max-height: 600px) {
    .title-content:has(.title-variant-link) {
        gap: 12px;
    }
    .title-variant-link {
        padding: 6px 12px;
    }
    .title-variant-icon {
        width: 32px;
        height: 38px;
        flex-basis: 32px;
    }
    .skeleton-run .title-version {
        display: none;
    }
    .skeleton-run .skeleton-title-branding {
        width: min(300px, 100%);
    }
    .skeleton-run .title-rank-strip {
        padding: 8px 16px;
    }
}

@media (orientation: landscape) and (max-height: 600px) {
    .skeleton-run .skeleton-title-branding { width: min(300px, 48vh); }
}

/* Typography hierarchy: the compact pixel face carries readable copy; the
   display face is reserved for short headings. These rules also override the
   city's responsive font reductions without changing its own interface. */
.skeleton-run :is(button, input, textarea, .title-variant-copy, .title-continue-info,
    .title-version, .pause-message,
    .hud-top, .weapon-tag, .currency-float, .skeleton-gold-label, .skeleton-gold-gain,
    .perk-title, .perk-desc, .reward-card-name, .reward-card-desc, .stat-label,
    .stat-value, .best-run-label, .best-run-value, .weapon-stat-name, .weapon-stat-damage,
    .rank-progress-text, .rank-next-reward, .rank-reward, .rank-perk-title,
    .rank-perk-kills, .rank-perk-reward, .rank-perk-flavor, .armory-subtitle,
    .armory-balance, .armory-purchase-name, .armory-purchase-desc, .armory-purchase-empty,
    .armory-purchase-rarity, .armory-purchase-level, .upgrade-name, .upgrade-desc,
    .upgrade-effect, .upgrade-level-badge, .upgrade-rarity-badge, .upgrade-progress-text,
    .purchase-details-name, .purchase-details-desc, .purchase-details-level,
    .purchase-detail-label, .purchase-detail-value, .purchase-details-effect,
    .share-card-tagline, .share-message-preview, .share-message-text,
    .share-copied-feedback, .transfer-label, .transfer-description, .transfer-help-text,
    .transfer-note, .transfer-status, .reset-progress-warning, .reset-progress-list,
    .reset-progress-confirm-text, .swipe-tutorial-text) {
    font-family: var(--skeleton-font-body);
    font-kerning: normal;
    letter-spacing: normal;
    font-variant-numeric: normal;
}

.skeleton-run :is(.perk-desc, .reward-card-desc, .pause-message,
    .rank-next-reward, .rank-reward, .rank-perk-reward, .rank-perk-flavor,
    .armory-subtitle, .armory-purchase-desc, .armory-purchase-empty, .upgrade-desc,
    .upgrade-effect, .purchase-details-desc, .purchase-details-effect,
    .share-message-preview, .share-message-text, .transfer-description,
    .transfer-help-text, .transfer-note, .reset-progress-warning, .reset-progress-list) {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: 0;
}

.skeleton-run :is(.title-version, .title-continue-info,
    .stat-label, .rank-progress-text, .rank-perk-kills, .purchase-detail-label,
    .upgrade-rarity-badge, .armory-purchase-rarity, .armory-purchase-level,
    .share-card-tagline, .transfer-label) {
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: normal;
}

.skeleton-run :is(.title-tap-text, .pause-title,
    .armory-title, .armory-purchase-title, .rank-title, .rank-card-title,
    .rank-up-text, .rank-perks-header h3, .share-title, .share-card-title,
    .weapons-title, .transfer-dialog-header h3, .reset-progress-header h3,
    .upgrade-category-header, .reward-cards-heading) {
    font-family: var(--skeleton-font-display);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.4;
}

.skeleton-run .title-tap-text { font-size: 20px; }
.skeleton-run .title-variant-copy strong { font-family: var(--skeleton-font-body); font-size: 18px; letter-spacing: 0; }
.skeleton-run .title-variant-copy > span { font-size: 14px; }
.skeleton-run .title-rank-strip { box-sizing: border-box; min-width: 0; width: min(320px, 100%); }
.skeleton-run :is(.rank-title, .rank-card-title, .rank-up-text, .share-card-title,
    .armory-purchase-title, .weapons-title, .reward-cards-heading) { font-size: 16px; }
.skeleton-run :is(.pause-title, .armory-title, .rank-perks-header h3,
    .share-title, .transfer-dialog-header h3, .reset-progress-header h3) { font-size: 20px; }
.skeleton-run #perk-menu-content > h2 {
    font-family: var(--skeleton-font-display) !important;
    font-size: 20px !important;
    line-height: 1.4;
    letter-spacing: 0;
}
.skeleton-run :is(.perk-title, .upgrade-name, .purchase-details-name,
    .armory-purchase-name, .rank-perk-title) { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: 0; }
.skeleton-run .stat-value { font-size: 24px; font-weight: 600; line-height: 1.2; }
.skeleton-run :is(.best-run-label, .best-run-value) { font-size: 16px; line-height: 1.3; letter-spacing: 0; }
.skeleton-run :is(.rank-card-info, .rank-perk-info, .share-card-header) { min-width: 0; }
.skeleton-run :is(.rank-card-title, .rank-title, .rank-perk-title) { overflow-wrap: anywhere; }

.skeleton-run :is(.btn-main, .btn-secondary, .btn-share, .btn-transfer,
    .btn-danger, .title-continue-btn, .title-armory-btn, .title-transfer-btn,
    .resume-button, .stats-toggle-btn, .perk-reroll-button, .upgrade-buy,
    .armory-back-btn-top) {
    min-height: 44px;
    font-family: var(--skeleton-font-body);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: normal;
    white-space: normal;
}
.skeleton-run :is(.btn-main, .title-continue-btn, .resume-button) { font-size: 20px; }
.skeleton-run .transfer-textarea { font-size: 16px; line-height: 1.4; }
.skeleton-run #tutorial-text { font-family: var(--skeleton-font-body); font-size: 20px; line-height: 1.3; letter-spacing: 0; }
.skeleton-run #level-up-banner { font-family: var(--skeleton-font-display); font-size: 20px; letter-spacing: 0; }

/* Death choreography: the last moment of the dungeon stays visible under a
   red wash, then the title lands at 1160ms. Results replace it at 2600ms.
   All motion uses transforms or opacity; the scrolling overlay stays still. */
.skeleton-run #wasted-slam {
    background: transparent;
    isolation: isolate;
}
.skeleton-run #wasted-slam.active {
    animation: none;
    transform: none;
    background: transparent;
}
.skeleton-run #wasted-slam::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at 50% 42%, rgba(118, 35, 52, 0.42), rgba(81, 19, 36, 0.86));
    opacity: 0;
    pointer-events: none;
}
.skeleton-run #wasted-slam.active::before {
    animation: skeletonDeathRedFade 950ms ease-out both;
}
.skeleton-run #wasted-slam .wasted-backdrop {
    inset: -12px;
    width: calc(100% + 24px);
    height: calc(100% + 24px);
    z-index: 0;
    animation: none;
    opacity: 0;
}
.skeleton-run #wasted-slam.active .wasted-backdrop {
    animation: skeletonDeathBackdrop 650ms ease-out 1100ms both,
        skeletonDeathScreenShake 420ms linear 1160ms;
}
.skeleton-run.skeleton-death-cinematic #game-canvas {
    animation: skeletonDeathScreenShake 420ms linear 1160ms;
}
.skeleton-run.skeleton-death-cinematic :is(.hud-top, #weapons-display, #currency-display, #tutorial-text, #level-up-banner) {
    visibility: hidden;
}
.skeleton-run #wasted-slam.show-stats::before {
    animation: skeletonDeathRedSettle 650ms ease-out both;
}
.skeleton-run :is(.wasted-slam-text, .gameover-title) {
    font-family: var(--skeleton-font-display);
    font-size: 48px;
    font-weight: 400;
    line-height: 1.35;
    letter-spacing: 0;
    width: min(8em, calc(100vw - 64px));
    max-width: 100%;
    margin-inline: auto;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    text-wrap: balance;
    text-align: center;
}
.skeleton-run .wasted-slam-text {
    position: fixed;
    inset: 0;
    display: block;
    width: min(520px, calc(100vw - 48px));
    height: max-content;
    margin: auto;
    padding: 0;
    z-index: 3;
    transform-origin: center bottom;
    text-shadow: none;
    pointer-events: none;
}
.skeleton-run .skeleton-fallen-kicker {
    display: block;
    margin-bottom: 12px;
    color: var(--skeleton-gold-light);
    font-size: clamp(18px, 5.5vw, 28px);
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-shadow: 0 3px var(--skeleton-ink);
}
.skeleton-run .skeleton-fallen-word {
    display: block;
    color: var(--skeleton-ivory);
    font-size: clamp(52px, 16vw, 88px);
    line-height: 1.05;
    letter-spacing: 0;
    text-shadow: -2px 0 var(--skeleton-ink), 2px 0 var(--skeleton-ink),
        0 -2px var(--skeleton-ink), 0 3px var(--skeleton-gold-dark),
        0 6px var(--skeleton-stone), 0 10px var(--skeleton-ink);
}
.skeleton-run .wasted-slam-text::before,
.skeleton-run .wasted-slam-text::after {
    content: '';
    position: absolute;
    top: calc(100% + 15px);
    width: 20px;
    height: 8px;
    border-style: solid;
    opacity: 0;
    pointer-events: none;
}
.skeleton-run .wasted-slam-text::before {
    left: calc(50% - 44px);
    border-width: 0 0 3px 3px;
    border-color: var(--skeleton-gold);
}
.skeleton-run .wasted-slam-text::after {
    right: calc(50% - 44px);
    border-width: 0 3px 3px 0;
    border-color: var(--skeleton-teal);
}
.skeleton-run .skeleton-fallen-debris {
    position: absolute;
    inset: auto 0 0;
    height: 0;
    pointer-events: none;
}
.skeleton-run .skeleton-fallen-debris > span {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--skeleton-gold);
    opacity: 0;
}
.skeleton-run .skeleton-fallen-debris > span:nth-child(even) { background: var(--skeleton-teal); width: 4px; height: 8px; }
.skeleton-run .skeleton-fallen-debris > span:nth-child(1) { left: 10%; --fallen-drift: -28px; --fallen-rise: -35px; }
.skeleton-run .skeleton-fallen-debris > span:nth-child(2) { left: 20%; --fallen-drift: -24px; --fallen-rise: -58px; }
.skeleton-run .skeleton-fallen-debris > span:nth-child(3) { left: 32%; --fallen-drift: -18px; --fallen-rise: -30px; }
.skeleton-run .skeleton-fallen-debris > span:nth-child(4) { left: 42%; --fallen-drift: -12px; --fallen-rise: -46px; }
.skeleton-run .skeleton-fallen-debris > span:nth-child(5) { right: 42%; --fallen-drift: 12px; --fallen-rise: -52px; }
.skeleton-run .skeleton-fallen-debris > span:nth-child(6) { right: 32%; --fallen-drift: 18px; --fallen-rise: -34px; }
.skeleton-run .skeleton-fallen-debris > span:nth-child(7) { right: 20%; --fallen-drift: 24px; --fallen-rise: -62px; }
.skeleton-run .skeleton-fallen-debris > span:nth-child(8) { right: 10%; --fallen-drift: 28px; --fallen-rise: -38px; }
.skeleton-run #wasted-slam.active .wasted-slam-text {
    animation: skeletonFallenDrop 850ms cubic-bezier(0.6, 0.01, 1, 0.6) 650ms both;
}
.skeleton-run #wasted-slam.active .skeleton-fallen-debris > span {
    animation: skeletonFallenDebris 650ms ease-out 1160ms both;
}
.skeleton-run #wasted-slam.active .wasted-slam-text::before,
.skeleton-run #wasted-slam.active .wasted-slam-text::after {
    animation: skeletonFallenRune 520ms ease-out 1160ms both;
}
.skeleton-run #wasted-slam.move-to-top .wasted-slam-text,
.skeleton-run #wasted-slam.show-stats .wasted-slam-text {
    display: block;
    animation: skeletonFallenExit 600ms cubic-bezier(0.55, 0, 0.85, 0.45) both;
}
.skeleton-run #wasted-slam .wasted-stats-content {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    box-sizing: border-box;
    transition: none;
}
.skeleton-run #wasted-slam.show-stats .wasted-stats-content {
    animation: skeletonStatsRise 650ms cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: none;
}
.skeleton-run #wasted-slam.postgame-exit .wasted-stats-content {
    animation: none;
    opacity: 0;
    transform: translate3d(0, -24px, 0);
    transition: transform 450ms ease, opacity 450ms ease;
}
.skeleton-run #wasted-slam.show-stats .skeleton-fallen-debris,
.skeleton-run #wasted-slam.show-stats .wasted-slam-text::before,
.skeleton-run #wasted-slam.show-stats .wasted-slam-text::after { display: none; animation: none; }
@keyframes skeletonDeathRedFade {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes skeletonDeathBackdrop {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes skeletonDeathRedSettle {
    from { opacity: 1; }
    to { opacity: 0.4; }
}
@keyframes skeletonDeathScreenShake {
    0%, 100% { transform: translate3d(0, 0, 0); }
    12% { transform: translate3d(-9px, 6px, 0); }
    24% { transform: translate3d(8px, -5px, 0); }
    38% { transform: translate3d(-6px, -4px, 0); }
    52% { transform: translate3d(5px, 4px, 0); }
    68% { transform: translate3d(-3px, 2px, 0); }
    84% { transform: translate3d(2px, -1px, 0); }
}
@keyframes skeletonFallenDrop {
    0% { transform: translate3d(0, -70vh, 0) scale(0.98, 1.04); opacity: 0; }
    8% { opacity: 1; }
    60% { transform: translate3d(0, 8px, 0) scale(1.025, 0.9); opacity: 1; animation-timing-function: ease-out; }
    72% { transform: translate3d(0, -14px, 0) scale(0.985, 1.025); animation-timing-function: ease-in; }
    81% { transform: translate3d(-3px, 3px, 0) scale(1.01, 0.98); animation-timing-function: ease-out; }
    87% { transform: translate3d(2px, 0, 0) scale(1); }
    93% { transform: translate3d(-1px, 0, 0) scale(1); }
    100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
}
@keyframes skeletonFallenExit {
    0% { transform: translate3d(0, 0, 0); opacity: 1; visibility: visible; }
    16% { transform: translate3d(0, 10px, 0); opacity: 1; }
    70% { opacity: 1; }
    100% { transform: translate3d(0, -85vh, 0); opacity: 0; visibility: hidden; }
}
@keyframes skeletonStatsRise {
    0% { transform: translate3d(0, 36vh, 0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: translate3d(0, 0, 0); opacity: 1; }
}
@keyframes skeletonFallenDebris {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    10% { opacity: 1; }
    60% { transform: translate3d(var(--fallen-drift), var(--fallen-rise), 0); opacity: 1; }
    100% { transform: translate3d(calc(var(--fallen-drift) * 1.3), 14px, 0); opacity: 0; }
}
@keyframes skeletonFallenRune {
    0% { transform: translateY(0) scaleX(0.5); opacity: 0; }
    15% { opacity: 0.8; }
    100% { transform: translateY(12px) scaleX(1.8); opacity: 0; }
}

/* HUD numbers retain enough room for seven-digit saved balances. The coin
   identifies the wallet on phones, so its extra GOLD label can step aside. */
.skeleton-run :is(#score-display, #currency-display) {
    font-kerning: normal;
    letter-spacing: normal;
    font-variant-numeric: tabular-nums;
}
.skeleton-run .hud-top { gap: 6px; padding: 8px; }
.skeleton-run #score-display { font-family: var(--skeleton-font-body); font-size: 22px; font-weight: 600; }
.skeleton-run #score-display::before { margin-right: 5px; }
.skeleton-run #level-display { font-family: var(--skeleton-font-body); font-size: 16px; padding-left: 6px; letter-spacing: 0; }
.skeleton-run .weapon-tag { font-size: 16px; font-weight: 500; line-height: 1.25; }
.skeleton-run #currency-display {
    font-family: var(--skeleton-font-body);
    font-size: 20px;
    font-weight: 600;
    max-width: calc(100% - 150px);
    min-height: 36px;
    gap: 5px;
    padding: 3px 7px;
    box-sizing: border-box;
}
.skeleton-run #currency-display::before { margin: 0; transform: none; }
.skeleton-run .skeleton-gold-label { font-size: 14px; }
.skeleton-run .skeleton-gold-gain { font-size: 16px; }
.skeleton-run .stat-icon[data-skeleton-icon='gold'] { flex-basis: 32px; }
.skeleton-run .stat-icon[data-skeleton-icon='gold']::before { margin: 0; transform: none; }

@media (max-width: 600px) {
    .skeleton-run :is(.wasted-slam-text, .gameover-title) { font-size: 32px; }
    .skeleton-run .skeleton-gold-label { display: none; }
    .skeleton-run .stat-value { font-size: 20px; }
    .skeleton-run .stat-label { font-size: 14px; }
    .skeleton-run .gameover-actions :is(.btn-main, .btn-secondary) { padding: 10px 16px; }
    .skeleton-run .stats-toggle-btn { font-size: 16px; padding-inline: 8px; }
}

@media (max-width: 360px) {
    .skeleton-run .hud-top { left: 10px; }
    .skeleton-run #currency-display { right: 10px; font-size: 18px; }
    .skeleton-run #score-display { font-size: 20px; }
    .skeleton-run #level-display { font-size: 16px; }
    .skeleton-run .stat-card { gap: 5px; padding-inline: 6px; }
    .skeleton-run .stat-value { font-size: 18px; }
    .skeleton-run .share-card-header { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton-run .currency-gain :is(.skeleton-gold-value, .skeleton-gold-gain) { animation: none; }
    .skeleton-run.skeleton-death-cinematic #game-canvas { animation: none; }
    .skeleton-run #wasted-slam.active .wasted-slam-text {
        animation: none;
        transform: none;
        opacity: 1;
    }
    .skeleton-run #wasted-slam.show-stats .wasted-slam-text { display: none; }
    .skeleton-run #wasted-slam.active .wasted-backdrop { animation: none; opacity: 1; }
    .skeleton-run #wasted-slam.active::before { animation: none; opacity: 0.4; }
    .skeleton-run #wasted-slam.show-stats .wasted-stats-content,
    .skeleton-run #wasted-slam.postgame-exit .wasted-stats-content {
        animation: none;
        transform: none;
        transition: none;
    }
    .skeleton-run #wasted-slam.active .skeleton-fallen-debris,
    .skeleton-run #wasted-slam.active .skeleton-fallen-debris > span,
    .skeleton-run #wasted-slam.active .wasted-slam-text::before,
    .skeleton-run #wasted-slam.active .wasted-slam-text::after { display: none; animation: none; }
}

/* ===== css/performance-report.css ===== */
/* A quiet, optional diagnostic action in results and pause screens. */
.performance-report-controls {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 12px;
    text-align: center;
}
.performance-report-controls[hidden],
.performance-report-fallback[hidden] { display: none; }
.performance-report-button {
    max-width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1px solid #777;
    border-radius: 4px;
    background: #202020;
    color: #ddd;
    font: 600 16px/1.3 'Rajdhani', sans-serif;
    letter-spacing: normal;
    cursor: pointer;
    touch-action: manipulation;
}
.performance-report-button:disabled { cursor: default; opacity: 0.6; }
.performance-report-status {
    margin: 8px 0;
    color: #ddd;
    font: 400 16px/1.35 'Saira', sans-serif;
}
.performance-report-status:empty { display: none; }
.performance-report-fallback { margin-top: 10px; }
.performance-report-text {
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-height: 220px;
    margin: 0 0 8px;
    padding: 10px;
    border: 1px solid #777;
    border-radius: 3px;
    background: #111;
    color: #eee;
    font: 400 16px/1.4 ui-monospace, monospace;
    text-align: left;
    resize: vertical;
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
    touch-action: pan-y;
    overscroll-behavior: contain;
}
#pause-overlay .performance-report-controls { margin-top: 14px; margin-bottom: 0; }
#pause-overlay .pause-content:has(.performance-report-controls:not([hidden])) {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    box-sizing: border-box;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.skeleton-run .performance-report-button {
    border-color: var(--skeleton-stone-light);
    border-radius: 0;
    background: var(--skeleton-deep);
    color: var(--skeleton-bone);
    font-family: var(--skeleton-font-body);
    box-shadow: none;
}
.skeleton-run .performance-report-status {
    color: var(--skeleton-bone);
    font-family: var(--skeleton-font-body);
}
.skeleton-run .performance-report-text {
    border-color: var(--skeleton-stone-light);
    background: var(--skeleton-ink);
    color: var(--skeleton-ivory);
}

/* ===== css/skeleton-economy.css ===== */
/* Optional next-run supplies: prices and missing gold stay readable on phones.
   City reward cards keep their original free selection flow. */
.skeleton-run .reward-economy-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    color: var(--skeleton-gold-light);
    font-family: var(--skeleton-font-body, 'Pixelify Sans', monospace);
    font-size: 20px;
    font-weight: 600;
    font-kerning: normal;
    letter-spacing: normal;
    font-variant-numeric: normal;
}

.skeleton-run .reward-card-price {
    margin-top: auto;
    padding-top: 6px;
    color: var(--skeleton-gold-light);
    font-family: var(--skeleton-font-body, 'Pixelify Sans', monospace);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    font-kerning: normal;
    letter-spacing: normal;
    font-variant-numeric: normal;
}

.skeleton-run .reward-card-shortfall {
    color: var(--skeleton-ember-light);
    font-size: 14px;
    line-height: 1.25;
    min-height: 18px;
}

.skeleton-run .reward-card.unaffordable {
    border-color: var(--skeleton-stone-light);
    background: var(--skeleton-deep);
    cursor: default;
}

.skeleton-run .reward-card.unaffordable:active { transform: none; }
.skeleton-run .reward-card.unaffordable .reward-card-name { color: var(--skeleton-bone); }
.skeleton-run .reward-card.unaffordable .reward-card-price { color: var(--skeleton-bone); }

.skeleton-run .reward-economy-status {
    margin: 10px 0 0;
    color: var(--skeleton-bone);
    text-align: center;
    font-size: 16px;
    line-height: 1.35;
}

.skeleton-run .reward-economy-status.is-error { color: var(--skeleton-ember-light); }
.skeleton-run .reward-economy-status:empty,
.skeleton-run .reward-card-shortfall:empty { display: none; }

.skeleton-run .reward-card {
    font-family: var(--skeleton-font-body, 'Pixelify Sans', monospace);
    font-kerning: normal;
    letter-spacing: normal;
}
.skeleton-run .reward-card-name { font-size: 18px; font-weight: 600; letter-spacing: 0; line-height: 1.2; overflow-wrap: anywhere; }
.skeleton-run .reward-card-desc { font-size: 16px; line-height: 1.3; }

@media (max-width: 360px) {
    /* Three narrow columns cannot fit whole 16px words on a 320px phone. */
    .skeleton-run .reward-cards-row { flex-direction: column; }
    .skeleton-run .reward-card {
        position: relative;
        display: grid;
        flex: 0 0 auto;
        height: auto;
        min-height: 96px;
        max-height: none;
        box-sizing: border-box;
        align-content: start;
        grid-template-columns: minmax(0, 1fr) 76px;
        grid-template-rows: max-content max-content;
        column-gap: 10px;
        row-gap: 4px;
        padding: 10px 10px 10px 54px;
        text-align: left;
    }
    .skeleton-run .reward-card-name { grid-column: 1; grid-row: 1; font-size: 18px; }
    .skeleton-run .reward-card-desc { grid-column: 1; grid-row: 2; }
    .skeleton-run .reward-card-price { grid-column: 2; grid-row: 1; margin: 0; padding: 0; text-align: center; }
    .skeleton-run .reward-card-shortfall { grid-column: 2; grid-row: 2; text-align: center; }
    .skeleton-run .reward-card-name[data-skeleton-icon]::before {
        position: absolute;
        left: 16px;
        top: 22px;
        margin: 0;
    }
}

.skeleton-run .skeleton-merchant-overlay {
    position: fixed; inset: 0; z-index: 25000;
    display: flex; align-items: center; justify-content: center;
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    padding: max(16px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    background: rgba(23,24,32,.91); color: var(--skeleton-ivory);
}
.skeleton-run .skeleton-merchant-panel {
    width: 100%; max-width: 400px; margin: auto;
    padding: 24px; border: 2px solid var(--skeleton-gold-dark);
    background: var(--skeleton-panel); box-shadow: 6px 6px 0 var(--skeleton-ink);
    box-sizing: border-box;
    font-family: var(--skeleton-font-body, 'Pixelify Sans', monospace);
    font-size: 16px;
    line-height: 1.4;
    font-kerning: normal;
    letter-spacing: normal;
    font-variant-numeric: normal;
}
.skeleton-run .merchant-eyebrow {
    margin: 0 0 8px; color: var(--skeleton-gold); font-size: 14px; letter-spacing: normal;
}
.skeleton-run .merchant-header { display: flex; align-items: flex-start; gap: 12px; }
.skeleton-run .merchant-introduction { flex: 1; min-width: 0; }
.skeleton-run .merchant-portrait {
    display: block; flex: 0 0 80px; width: 80px; height: 80px;
    padding: 6px; border: 2px solid var(--skeleton-gold-dark); box-sizing: border-box;
    background: var(--skeleton-deep); box-shadow: 3px 3px 0 var(--skeleton-ink);
    object-fit: contain; image-rendering: pixelated;
    animation: merchantPortraitIdle 2.4s steps(1, end) infinite;
}
@keyframes merchantPortraitIdle {
    0%, 50%, 100% { object-position: center center; }
    25%, 75% { object-position: center calc(50% - 4px); }
}
.skeleton-run .skeleton-merchant-panel h2 { margin: 0; font-family: var(--skeleton-font-display, 'Silkscreen', monospace); font-size: 24px; font-weight: 400; line-height: 1.4; }
.skeleton-run .merchant-wallet { margin: 12px 0; color: var(--skeleton-gold-light); font-size: 24px; font-weight: 600; }
.skeleton-run .merchant-stock { display: grid; gap: 10px; }
.skeleton-run .merchant-offer { padding: 14px; background: var(--skeleton-deep); border: 1px solid var(--skeleton-masonry); }
.skeleton-run .merchant-offer h3 { margin: 0 0 8px; color: var(--skeleton-ivory); font-size: 24px; font-weight: 600; line-height: 1.25; }
.skeleton-run .merchant-offer p { margin: 0 0 12px; color: var(--skeleton-bone); font-size: 18px; line-height: 1.35; }
.skeleton-run .merchant-offer .merchant-shortfall { color: var(--skeleton-gold-light); }
.skeleton-run .merchant-offer.legendary { border-color: var(--skeleton-gold); box-shadow: inset 0 0 0 2px var(--skeleton-gold-shadow); }
.skeleton-run .merchant-offer .merchant-rarity { margin: 0 0 10px; color: var(--skeleton-gold-light); font-size: 14px; font-weight: 600; letter-spacing: normal; }
.skeleton-run .merchant-buy, .skeleton-run .merchant-leave {
    width: 100%; min-height: 46px; padding: 10px 12px;
    border: 1px solid var(--skeleton-gold); border-radius: 0;
    font: 600 20px/1.25 var(--skeleton-font-body, 'Pixelify Sans', monospace); cursor: pointer; touch-action: manipulation;
}
.skeleton-run .merchant-buy { background: var(--skeleton-gold-light); color: var(--skeleton-ink); }
.skeleton-run .merchant-buy:disabled { cursor: default; background: var(--skeleton-panel); color: var(--skeleton-bone); border-color: var(--skeleton-masonry); }
.skeleton-run .merchant-offer.purchased { border-color: var(--skeleton-teal); }
.skeleton-run .merchant-offer.purchased .merchant-buy { color: var(--skeleton-ice); }
.skeleton-run .merchant-status { margin: 12px 0; color: var(--skeleton-ice); font-size: 18px; line-height: 1.35; }
.skeleton-run .merchant-status:empty { display: none; }
.skeleton-run .merchant-leave { margin-top: 12px; background: transparent; color: var(--skeleton-gold-light); }
/* The Continue button had a draining meter behind its label: buying started a
   three second countdown and then closed the dialog for you. Buying now returns
   to the game at once, so the meter, its keyframes and its reduced-motion
   variant went with it. The label keeps its own stacking context and shadow. */
.skeleton-run .merchant-continue-label {
    position: relative;
    z-index: 1;
    pointer-events: none;
    text-shadow: 0 2px var(--skeleton-ink);
}
@media (prefers-reduced-motion: reduce) {
    .skeleton-run .merchant-portrait { animation: none !important; }
}
.skeleton-run .merchant-buy:focus-visible, .skeleton-run .merchant-leave:focus-visible { outline: 3px solid var(--skeleton-ice); outline-offset: 3px; }
@media (max-width: 420px) {
    .skeleton-run .skeleton-merchant-panel { padding: 16px; }
    .skeleton-run .skeleton-merchant-panel h2 { font-size: 20px; }
    .skeleton-run .merchant-offer { padding: 11px; }
}